app: Renommages de variables pour cohérence

app/src/components/App.js

@@ -9,22 +9,22 @@ import {
 
 const App = () =>
 {
-    const [terms, setTerms] = useState([]);
+    const [query, setQuery] = useState([]);
 
-    const diseases = useAsync([], diseasesBySymptoms, terms);
+    const diseases = useAsync([], diseasesBySymptoms, query);
-    const results = useAsync([], exploreSymptoms, diseases);
+    const terms = useAsync([], exploreSymptoms, diseases);
 
     return (
         <div className="App">
             <TermInput
-                terms={terms}
+                query={query}
-                setTerms={setTerms}
+                setQuery={setQuery}
-                availableTerms={results}
+                availableTerms={terms}
             />
             <DiseaseGraph
                 terms={terms}
-                setTerms={setTerms}
+                query={query}
-                results={results}
+                setQuery={setQuery}
             />
         </div>
     );

app/src/components/DiseaseGraph.js

@@ -8,17 +8,17 @@ import {symptomsSubgraph} from '../data/mock';
 /**
  * Graphe de maladies et symptômes.
  *
- * @prop terms Ensemble de symptômes recherchés par l’utilisateur.
+ * @prop terms Termes à afficher.
- * @prop setTerms Fonction de rappel pour ajouter de nouveaux termes de
+ * @prop query Ensemble de termes recherchés par l’utilisateur.
+ * @prop setQuery Fonction de rappel pour ajouter de nouveaux termes de
  * recherche.
- * @prop results Maladies correspondant à la recherche de l’utilisateur.
  */
-const DiseaseGraph = ({terms, setTerms, results}) =>
+const DiseaseGraph = ({terms, query, setQuery}) =>
 {
     const {nodes, edges} = useAsync({
         nodes: {},
         edges: []
-    }, symptomsSubgraph, results);
+    }, symptomsSubgraph, terms);
 
     /**
      * Rendu d’un nœud du graphe.
@@ -28,14 +28,14 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
     const render = id =>
     {
         const term = nodes[id];
-        const isTerm = terms.some(({id: termId}) => termId === id);
+        const isInQuery = query.some(({id: termId}) => termId === id);
         const isDisease = nodes[id].types.includes(termTypes.disease);
 
         return (
             <span
                 className={[
                     'SearchResults_result',
-                    isTerm ? 'SearchResults_result-term' : '',
+                    isInQuery ? 'SearchResults_result-inQuery' : '',
                     isDisease ? 'SearchResults_result-disease' : '',
                 ].join(' ')}
                 title={
@@ -56,29 +56,26 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
      */
     const handleNodeClick = (id, ev) =>
     {
-        const result = results.find(({id: termId}) => termId === id);
+        const term = nodes[id];
-        const termIndex = terms.findIndex(({id: termId}) => termId === id);
+        const queryIndex = query.findIndex(({id: termId}) => termId === id);
 
-        if (result !== undefined)
+        if (!ev.ctrlKey)
         {
-            if (!ev.ctrlKey)
+            // Clic normal : Ouverture de la ressource
-            {
+            window.open(term.url, '_blank');
-                // Clic normal : Ouverture de la ressource
+        }
-                window.open(result.url, '_blank');
+        else if (queryIndex >= 0)
-            }
+        {
-            else if (termIndex >= 0)
+            // Ctrl-clic : Retrait d’un terme déjà dans la requête
-            {
+            setQuery([
-                // Ctrl-clic : Retrait d’un terme déjà dans la requête
+                ...query.slice(0, queryIndex),
-                setTerms([
+                ...query.slice(queryIndex + 1)
-                    ...terms.slice(0, termIndex),
+            ]);
-                    ...terms.slice(termIndex + 1)
+        }
-                ]);
+        else
-            }
+        {
-            else
+            // Ctrl-clic : Ajout d’un nouveau terme dans la requête
-            {
+            setQuery(query.concat([term]));
-                // Ctrl-clic : Ajout d’un nouveau terme dans la requête
-                setTerms(terms.concat([result]));
-            }
         }
     };
 
@@ -95,8 +92,8 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
 
 DiseaseGraph.propTypes = {
     terms: PropTypes.arrayOf(Term).isRequired,
-    setTerms: PropTypes.func.isRequired,
+    query: PropTypes.arrayOf(Term).isRequired,
-    results: PropTypes.arrayOf(Term).isRequired,
+    setQuery: PropTypes.func.isRequired,
 };
 
 export default DiseaseGraph;

app/src/components/TermInput.js

@@ -19,12 +19,11 @@ const keys = Object.assign(Object.create(null), {
 /**
  * Zone de saisie des termes de recherche.
  *
- * @prop terms Ensemble de termes déjà validés.
+ * @prop query Ensemble de termes déjà dans la requête.
+ * @prop setQuery Fonction de rappel utilisée pour modifier la requête.
  * @param availableTerms Termes pouvant être ajoutés par l’utilisateur.
- * @prop setTerms Fonction de rappel utilisée pour modifier l’ensemble des
- * termes validés par l’utilisateur.
  */
-const TermInput = ({terms, availableTerms, setTerms}) =>
+const TermInput = ({query, setQuery, availableTerms}) =>
 {
     // Valeur actuellement saisie dans le champ de recherche de termes
     const [value, setValue] = useState('');
@@ -41,19 +40,19 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
     const inputRef = useRef(null);
 
     /**
-     * Ajoute un terme à l’ensemble des termes sélectionnés.
+     * Ajoute un terme à la requête.
      *
      * @param term Terme à ajouter.
      */
-    const addTerm = term =>
+    const addQueryTerm = term =>
     {
-        if (terms.some(({id}) => id === term.id))
+        if (query.some(({id}) => id === term.id))
         {
             // N’ajoute pas les termes déjà sélectionnés
             return;
         }
 
-        setTerms(terms.concat([term]));
+        setQuery(query.concat([term]));
         setValue('');
         setSuggestions([]);
 
@@ -64,15 +63,15 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
     };
 
     /**
-     * Supprime un terme des termes sélectionnés.
+     * Supprime un terme de la requête.
      *
      * @param index Indice du terme à supprimer dans la liste.
      */
-    const removeTerm = index =>
+    const removeQueryTerm = index =>
     {
-        setTerms([
+        setQuery([
-            ...terms.slice(0, index),
+            ...query.slice(0, index),
-            ...terms.slice(index + 1)
+            ...query.slice(index + 1)
         ]);
     };
 
@@ -90,19 +89,19 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
 
             if (focusedSuggestion < suggestions.length)
             {
-                addTerm(suggestions[focusedSuggestion]);
+                addQueryTerm(suggestions[focusedSuggestion]);
             }
         }
         else if (
             ev.keyCode === keys.backspace
             && !value
-            && terms.length !== 0
+            && query.length !== 0
         )
         {
             // Touche Retour alors que le champ de saisie est vide :
-            // retrait du dernier terme
+            // retrait du dernier terme de la requête
             ev.preventDefault();
-            setTerms(terms.slice(0, -1));
+            setQuery(query.slice(0, -1));
         }
         else if (ev.keyCode === keys.up)
         {
@@ -141,7 +140,7 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
 
                 // Sélectionne les termes qui n’ont pas déjà été choisis
                 availableTerms.filter(({id: suggestionId}) =>
-                    !terms.some(({id: termId}) =>
+                    !query.some(({id: termId}) =>
                         termId === suggestionId
                     )
                 )
@@ -151,11 +150,12 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
 
     return (
         <div className="TermInput">
-            {terms.map((term, index) => 
+            {query.map((term, index) => 
                 <span
                     key={term.id}
-                    className="TermInput_term"
+                    className="TermInput_queryTerm"
-                    onClick={removeTerm.bind(null, index)}
+                    title="Cliquez pour retirer ce terme de la recherche"
+                    onClick={removeQueryTerm.bind(null, index)}
                 >
                     {term.name}
                 </span>
@@ -180,14 +180,17 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
                                 : ''
                         ].join(' ')}
                         onMouseEnter={setFocusedSuggestion.bind(null, index)}
-                        onClick={addTerm.bind(null, suggestion)}
+                        onClick={addQueryTerm.bind(null, suggestion)}
+                        title="Cliquez pour ajouter ce terme à la recherche"
                     >
                         {suggestion.name}
                         {suggestion.alias.length >= 1 ? (
                             <span
                                 className="TermInput_suggestionAlias"
                                 title={
-                                    'Alias du terme : '
+                                    (suggestion.alias.length >= 2
+                                        ? 'Autres noms : '
+                                        : 'Autre nom : ')
                                     + suggestion.alias.join(', ')
                                 }
                             >
@@ -202,9 +205,9 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
 };
 
 TermInput.propTypes = {
-    terms: PropTypes.arrayOf(Term).isRequired,
+    query: PropTypes.arrayOf(Term).isRequired,
+    setQuery: PropTypes.func.isRequired,
     availableTerms: PropTypes.arrayOf(Term).isRequired,
-    setTerms: PropTypes.func.isRequired
 };
 
 export default TermInput;

app/src/data/model.js

@@ -75,7 +75,7 @@ const URL = makePropType((props, propName, componentName) =>
     {
         return new Error(
             `URL “${value}”, passed as ${componentName}’s ${propName} `
-            + `prop, does not start with “http://” or “https://”.`
+            + 'prop, does not start with “http://” or “https://”.'
         );
     }
 });
@@ -108,7 +108,7 @@ export const Term = PropTypes.exact({
 /**
  * Relation entre deux termes.
  */
-export const Relation = makePropType((props, propName, componentName) =>
+export const Relation = makePropType((props, propName) =>
 {
     const value = props[propName];
 

app/style/style.css

@@ -109,7 +109,7 @@ input
     box-shadow: var(--shadow-high);
 }
 
-.TermInput_term
+.TermInput_queryTerm
 {
     display: inline-block;
 
@@ -128,7 +128,7 @@ input
     transition: background var(--animation-short) var(--animation-ease-out);
 }
 
-.TermInput_term:hover
+.TermInput_queryTerm:hover
 {
     background: var(--color-accent);
 }
@@ -296,7 +296,7 @@ input
     color: var(--color-dark);
 }
 
-.SearchResults_result-term
+.SearchResults_result-inQuery
 {
     background: var(--color-secondary);
     color: var(--color-light);