From 27fd1ce02741978d6668af64eca448cfff5c9fd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= <contact@matteodelabre.me>
Date: Wed, 4 Dec 2019 21:06:19 -0500
Subject: [PATCH] app: Ouverture de la ressource au clic

---
 app/src/components/DiseaseGraph.js | 33 ++++++++++++++++++++++--------
 app/src/components/Graph.js        |  4 ++--
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/app/src/components/DiseaseGraph.js b/app/src/components/DiseaseGraph.js
index 2b4f538..b613573 100644
--- a/app/src/components/DiseaseGraph.js
+++ b/app/src/components/DiseaseGraph.js
@@ -27,15 +27,24 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
      */
     const render = id =>
     {
+        const term = nodes[id];
         const isTerm = terms.some(({id: termId}) => termId === id);
         const isDisease = nodes[id].types.includes(termTypes.disease);
 
         return (
-            <span className={[
-                'SearchResults_result',
-                isTerm ? 'SearchResults_result-term' : '',
-                isDisease ? 'SearchResults_result-disease' : '',
-            ].join(' ')}>{nodes[id].name}</span>
+            <span
+                className={[
+                    'SearchResults_result',
+                    isTerm ? 'SearchResults_result-term' : '',
+                    isDisease ? 'SearchResults_result-disease' : '',
+                ].join(' ')}
+                title={
+                    `Cliquez pour plus d’informations sur « ${term.name} »\n`
+                    + '(Ctrl-clic pour l’ajouter à la requête)'
+                }
+            >
+                {nodes[id].name}
+            </span>
         );
     };
 
@@ -43,17 +52,23 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
      * Gère le clic sur un nœud du graphe.
      *
      * @param id Identifiant du nœud cliqué.
+     * @param ev Événement DOM décrivant le clic.
      */
-    const handleNodeClick = id =>
+    const handleNodeClick = (id, ev) =>
     {
         const result = results.find(({id: termId}) => termId === id);
         const termIndex = terms.findIndex(({id: termId}) => termId === id);
 
         if (result !== undefined)
         {
-            if (termIndex >= 0)
+            if (!ev.ctrlKey)
             {
-                // Retrait d’un terme déjà dans la requête
+                // Clic normal : Ouverture de la ressource
+                window.open(result.url, '_blank');
+            }
+            else if (termIndex >= 0)
+            {
+                // Ctrl-clic : Retrait d’un terme déjà dans la requête
                 setTerms([
                     ...terms.slice(0, termIndex),
                     ...terms.slice(termIndex + 1)
@@ -61,7 +76,7 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
             }
             else
             {
-                // Ajout d’un nouveau terme dans la requête
+                // Ctrl-clic : Ajout d’un nouveau terme dans la requête
                 setTerms(terms.concat([result]));
             }
         }
diff --git a/app/src/components/Graph.js b/app/src/components/Graph.js
index 6976d0c..d8f6730 100644
--- a/app/src/components/Graph.js
+++ b/app/src/components/Graph.js
@@ -268,13 +268,13 @@ const Graph = ({
             }
         };
 
-        const mouseUp = () =>
+        const mouseUp = ev =>
         {
             if (dragElement !== null)
             {
                 if (dragClick)
                 {
-                    onNodeClick(dragNode);
+                    onNodeClick(dragNode, ev);
                 }
 
                 dragNode = -1;