From e7205cad1d5ad8cafaa652523d3058019cf738c0 Mon Sep 17 00:00:00 2001
From: Franck Michel <frmichel@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:46:04 +0100
Subject: [PATCH] Minor look&feel changes

---
 src/Component/NavBar.js                  |  5 ++---
 src/Component/search/SearchForm.js       | 12 ++++++++++--
 src/Component/search/SuggestionEntity.js | 10 ++++------
 src/config/knowledge_bases.json          |  6 +++---
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/Component/NavBar.js b/src/Component/NavBar.js
index 9e86e42..a9653c7 100644
--- a/src/Component/NavBar.js
+++ b/src/Component/NavBar.js
@@ -11,10 +11,9 @@ class NavBar extends Component {
             <Navbar bg="" variant="">
                 <Navbar.Brand href=""></Navbar.Brand>
                 <img className="mt-4 me-5" id="logo_d2kab" src={logo_d2kab} alt="D2KAB"></img>
-                <div className="mt-4 me-0 col-sm-6">
+                <div className="mt-4 me-0 col-sm-8">
                     <div className="title">Wheat Genomics SLKG</div>
-                    <div>Visualization interface for the <b>Wheat Genomics Scientific Literature Knowledge Graph</b></div>
-                    <div>Developed by the <a href="https://www.d2kab.org/">D2KAB</a> project.</div>
+                    <div>Search interface for the <a href="https://github.com/Wimmics/WheatGenomicsSLKG">Wheat Genomics Scientific Literature Knowledge Graph</a>.</div>
                 </div>
                 <Nav className="mr-auto flex-column">
                     <Nav.Item>
diff --git a/src/Component/search/SearchForm.js b/src/Component/search/SearchForm.js
index 5dde459..700fa24 100644
--- a/src/Component/search/SearchForm.js
+++ b/src/Component/search/SearchForm.js
@@ -102,15 +102,22 @@ function SearchForm() {
      * @param {Object} e - event
      */
     const handleInputKeyUp = (e) => {
+        //alert('Key: ' + e.keyCode + " " + e.key);
         if (e.key === 'Escape') {
             setSuggestions([]); // Clear suggestions on Escape
         }
 
         // if (e.key === 'Enter' && input.trim() !== '') {
-        //     // @TODO - possible to use the arrows to navigate the suggestions and enter to select one?
         //     setInput('');
         //     setSuggestions([]); // Clear suggestions when an item is added
         // }
+
+        // if (e.key === 'ArrowDown' ) {
+        //     // use the arrows to navigate the suggestions and enter to select one
+        // }
+        // if (e.key === 'ArrowUp' ) {
+        //     // use the arrows to navigate the suggestions and enter to select one
+        // }
     };
 
     /**
@@ -227,7 +234,7 @@ function SearchForm() {
     return (
         <>
             <div className="component">
-                <h1 className="">Search documents by named entities</h1>
+                <h1 className="">Search articles by named entities</h1>
                 <div className="multiple-inputs-container">
 
                     { /* List of the search entities that have already been selected */}
@@ -252,6 +259,7 @@ function SearchForm() {
                                               value={input}
                                               onChange={(e) => setInput(e.target.value)}
                                               onKeyUp={handleInputKeyUp}
+                                              autoFocus
                                 />
                             </Col>
                             <Col xs={2}>
diff --git a/src/Component/search/SuggestionEntity.js b/src/Component/search/SuggestionEntity.js
index e6ab255..920da4c 100644
--- a/src/Component/search/SuggestionEntity.js
+++ b/src/Component/search/SuggestionEntity.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ListGroup from 'react-bootstrap/ListGroup';
+import Badge from 'react-bootstrap/Badge';
 import './SearchForm.css';
 
 /**
@@ -47,17 +48,14 @@ const SuggestionEntity = (props) => {
     }
 
     return (
-        <ListGroup.Item key={id} className="suggestion-item" action variant="light"
-            onClick={() => handleSelect(id)}>
-
+        <ListGroup.Item key={id} className="suggestion-item" action  variant="light" onClick={() => handleSelect(id)}>
             <span>{entityLabel}</span>
             &nbsp;
             <span className={"suggestion-pref-label"}>{entityPrefLabel}</span>
             &nbsp;
-            <span className={"suggestion-pref-label"}>({entityCount})</span>
-            &nbsp;
             <span className={"suggestion-pref-label"}>[{entityType}]</span>
-
+            &nbsp;
+            <Badge bg="secondary">{entityCount}</Badge>
         </ListGroup.Item>
     );
 }
diff --git a/src/config/knowledge_bases.json b/src/config/knowledge_bases.json
index 7c1bb53..153dd14 100644
--- a/src/config/knowledge_bases.json
+++ b/src/config/knowledge_bases.json
@@ -2,7 +2,7 @@
   {
     "name": "NCBITaxon",
     "namespace": "purl.obolibrary.org/obo/NCBITaxon",
-    "endpoint": "http://sparql.bioontology.org/",
+    "endpoint": "http://d2kab.i3s.unice.fr/sparql",
     "used_for": [
       "named_entity"
     ]
@@ -19,7 +19,7 @@
   {
     "name": "GENE",
     "namespace": "ns.inria.fr/d2kab/gene",
-    "endpoint": "http://sparql.bioontology.org/",
+    "endpoint": "http://d2kab.i3s.unice.fr/sparql",
     "used_for": [
       "named_entity"
     ]
@@ -27,7 +27,7 @@
   {
     "name": "Variety",
     "namespace": "ns.inria.fr/d2kab/variety",
-    "endpoint": "http://sparql.bioontology.org/",
+    "endpoint": "http://d2kab.i3s.unice.fr/sparql",
     "used_for": [
       "named_entity"
     ]