app: Affichage différent des maladies vs. symptômes

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
     ));
 

app/src/ResultsGraph.js

@@ -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;

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>}
         />
     );
 };

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);
 }