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

This commit is contained in:
Mattéo Delabre 2019-12-01 22:25:41 -05:00
parent e551df60ec
commit 7dd10b75c8
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
4 changed files with 42 additions and 16 deletions

View File

@ -48,7 +48,7 @@ const Graph = ({nodes, edges, render}) =>
const [layout,] = useState(new Springy.Layout.ForceDirected( const [layout,] = useState(new Springy.Layout.ForceDirected(
graph, graph,
/* rigidité = */ 400, /* rigidité = */ 400,
/* répulsion = */ 400, /* répulsion = */ 450,
/* amortissement = */ 0.5 /* amortissement = */ 0.5
)); ));

View File

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

View File

@ -29,7 +29,11 @@ const SearchResults = ({terms}) =>
<Graph <Graph
nodes={Object.keys(nodes)} nodes={Object.keys(nodes)}
edges={edges} 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>}
/> />
); );
}; };

View File

@ -3,10 +3,12 @@
--color-accent: #D80C49; --color-accent: #D80C49;
--color-secondary: #AE1246; --color-secondary: #AE1246;
--color-light: #EEEEEE; --color-light: #EEEEEE;
--color-dark-lighter: #6A6A6A;
--color-dark: #1D1D1D; --color-dark: #1D1D1D;
--font-family: 'Source Sans Pro'; --font-family: 'Source Sans Pro';
--font-size: 18px; --font-size: 18px;
--font-size-larger: 22px;
--font-color: var(--color-dark); --font-color: var(--color-dark);
--base-size: 25px; --base-size: 25px;
@ -160,7 +162,40 @@ input
display: block; display: block;
transform: translate(-50%, -50%); 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; 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);
} }