From 7dd10b75c86fb8e6f292c264f1f525086a9d6f3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= <contact@matteodelabre.me>
Date: Sun, 1 Dec 2019 22:25:41 -0500
Subject: [PATCH] =?UTF-8?q?app:=20Affichage=20diff=C3=A9rent=20des=20malad?=
 =?UTF-8?q?ies=20vs.=20sympt=C3=B4mes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/Graph.js         |  2 +-
 app/src/ResultsGraph.js  | 13 -------------
 app/src/SearchResults.js |  6 +++++-
 app/style/style.css      | 37 ++++++++++++++++++++++++++++++++++++-
 4 files changed, 42 insertions(+), 16 deletions(-)
 delete mode 100644 app/src/ResultsGraph.js

diff --git a/app/src/Graph.js b/app/src/Graph.js
index d4d7cef..9925522 100644
--- a/app/src/Graph.js
+++ b/app/src/Graph.js
@@ -48,7 +48,7 @@ const Graph = ({nodes, edges, render}) =>
     const [layout,] = useState(new Springy.Layout.ForceDirected(
         graph,
         /* rigidité = */ 400,
-        /* répulsion = */ 400,
+        /* répulsion = */ 450,
         /* amortissement = */ 0.5
     ));
 
diff --git a/app/src/ResultsGraph.js b/app/src/ResultsGraph.js
deleted file mode 100644
index 4b98bd0..0000000
--- a/app/src/ResultsGraph.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import Graph from './Graph.js';
-
-
-const ResultsGraph = () => (
-    <Graph
-        nodes={Object.keys(nodes)}
-        edges={edges}
-        render={id => nodes[id].name}
-    />
-);
-
-export default ResultsGraph;
diff --git a/app/src/SearchResults.js b/app/src/SearchResults.js
index b243e93..8728f68 100644
--- a/app/src/SearchResults.js
+++ b/app/src/SearchResults.js
@@ -29,7 +29,11 @@ const SearchResults = ({terms}) =>
         <Graph
             nodes={Object.keys(nodes)}
             edges={edges}
-            render={id => nodes[id].name}
+            render={id => <span className={[
+                'SearchResults_result',
+                terms.includes(nodes[id].name) ? 'SearchResults_result-term' : '',
+                nodes[id].types.includes('Maladie') ? 'SearchResults_result-disease' : '',
+            ].join(' ')}>{nodes[id].name}</span>}
         />
     );
 };
diff --git a/app/style/style.css b/app/style/style.css
index f0dac4c..020aca0 100644
--- a/app/style/style.css
+++ b/app/style/style.css
@@ -3,10 +3,12 @@
     --color-accent: #D80C49;
     --color-secondary: #AE1246;
     --color-light: #EEEEEE;
+    --color-dark-lighter: #6A6A6A;
     --color-dark: #1D1D1D;
 
     --font-family: 'Source Sans Pro';
     --font-size: 18px;
+    --font-size-larger: 22px;
     --font-color: var(--color-dark);
 
     --base-size: 25px;
@@ -160,7 +162,40 @@ input
 
     display: block;
     transform: translate(-50%, -50%);
+}
+
+/**
+ * SearchResults
+ */
+
+.SearchResults_result
+{
+    display: inline-block;
+    max-width: 200px;
+    padding: calc(.25 * var(--base-size)) calc(.5 * var(--base-size));
 
     background: white;
-    padding: 4px 8px;
+    border-radius: 2px;
+    margin-left: calc(.3 * var(--base-size));
+
+    cursor: pointer;
+
+    text-align: center;
+    font-style: italic;
+    color: var(--color-dark-lighter);
+
+    transition: background var(--animation-short) var(--animation-ease-out);
+}
+
+.SearchResults_result-disease
+{
+    font-size: var(--font-size-larger);
+    font-style: normal;
+    color: var(--color-dark);
+}
+
+.SearchResults_result-term
+{
+    background: var(--color-secondary);
+    color: var(--color-light);
 }