app: Affichage des alias

app/src/components/TermInput.js

@@ -216,6 +216,14 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
                         onClick={addTerm.bind(null, suggestion)}
                     >
                         {suggestion.name}
+                        {suggestion.alias.length >= 1 ? (
+                            <span
+                                className="TermInput_suggestionAlias"
+                                title={`Alias du terme : ${suggestion.alias.join(', ')}`}
+                            >
+                                {suggestion.alias.join(', ')}
+                            </span>
+                        ) : null}
                     </li>
                 )}
             </ul>

app/src/data/mock.js

@@ -23,9 +23,6 @@ export const terms = {
         id: 'Q154882',
         name: 'Légionellose',
         alias: [
-            'Légionnellose',
-            'Légionnelose',
-            'Légionelose',
             'Maladie des légionnaires',
         ],
         types: [types.disease],
@@ -42,8 +39,6 @@ export const terms = {
         id: 'Q326663',
         name: 'Encéphalite à tiques',
         alias: [
-            'Encéphalite à tique',
-            'Encéphalites à tiques',
             'Encéphalite d\'Europe centrale',
             'Encéphalite verno-estivale russe',
             'Méningoencéphalite à tique',
@@ -106,7 +101,6 @@ export const terms = {
         id: 'Q127076',
         name: 'Vomissement',
         alias: [
-            'Vomissements',
             'Vomi',
             'Vomissage',
             'Vomir',

app/style/style.css

@@ -156,6 +156,10 @@ input
 
     cursor: pointer;
     line-height: calc(2 * var(--base-size));
+    white-space: nowrap;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     transition: background var(--animation-short) var(--animation-ease-out);
 }
@@ -165,6 +169,19 @@ input
     background: var(--color-light-darker);
 }
 
+.TermInput_suggestionAlias
+{
+    font-style: italic;
+    color: var(--color-dark-lighter);
+}
+
+.TermInput_suggestionAlias::before
+{
+    content: "— ";
+    margin-left: calc(.4 * var(--base-size));
+    margin-right: calc(.25 * var(--base-size));
+}
+
 /**
  * Graph
  */
@@ -248,6 +265,7 @@ input
     font-size: var(--font-size-larger);
     font-style: italic;
     color: var(--color-dark-lighter);
+    text-align: center;
 }
 
 /**