Connects to #358. Dependency updates and search UI refactoring.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MoTrPAC",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "private": true,
   "dependencies": {
     "auth0-js": "9.26.0",
@@ -36,9 +36,7 @@
     "redux-thunk": "^2.3.0",
     "tocbot": "^4.25.0",
     "victory": "37.0.2",
-    "vis-data": "^7.1.7",
-    "vis-network": "^9.1.8",
-    "vis-network-react": "^1.3.6"
+    "vis-network-react": "DinerIsmail/vis-network-react"
   },
   "scripts": {
     "start": "react-scripts start",

src/LandingPage/landingPage.jsx

@@ -19,8 +19,11 @@ import NatureIssueCover from '../assets/LandingPageGraphics/nature_issue_cover.j
 import BackgroundVideo from './components/backgroundVideo';
 import Figure1C from './components/figure1c';
 
-// import figure 4E visualization dataset
-const figure4eData = require('../data/landscape_figure_4e.json');
+// import network figure 4e visualization dataset
+import landscapeFigure4eNetworkData from '../data/landscape_figure_4e';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import 'vis-network/styles/vis-network.css';
 
 // animated down arrow icon
 function AnimatedDownArrow() {
@@ -56,82 +59,6 @@ const options = {
   },
 };
 
-let events = {
-  click(params) {
-    params.event = '[original event]';
-    console.log(
-      'click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM),
-    );
-  },
-  doubleClick (params) {
-    console.log('doubleClick Event:', params);
-    params.event = '[original event]';
-  },
-  oncontext (params) {
-    console.log('oncontext Event:', params);
-
-    params.event = '[original event]';
-  },
-  dragStart (params) {
-    // There's no point in displaying this event on screen, it gets immediately overwritten
-    params.event = '[original event]';
-    console.log('dragStart Event:', params);
-    console.log(
-      'dragStart event, getNodeAt returns: ' +
-        this.getNodeAt(params.pointer.DOM),
-    );
-  },
-  dragging (params) {
-    params.event = '[original event]';
-  },
-  dragEnd (params) {
-    params.event = '[original event]';
-    console.log('dragEnd Event:', params);
-    console.log(
-      'dragEnd event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM),
-    );
-  },
-  controlNodeDragging (params) {
-    params.event = '[original event]';
-  },
-  controlNodeDragEnd (params) {
-    params.event = '[original event]';
-    console.log('controlNodeDragEnd Event:', params);
-  },
-  zoom (params) {},
-  showPopup (params) {},
-  hidePopup () {
-    console.log('hidePopup Event');
-  },
-  select (params) {
-    console.log('select Event:', params);
-  },
-  selectNode (params) {
-    console.log('selectNode Event:', params);
-  },
-  selectEdge (params) {
-    console.log('selectEdge Event:', params);
-  },
-  deselectNode (params) {
-    console.log('deselectNode Event:', params);
-  },
-  deselectEdge (params) {
-    console.log('deselectEdge Event:', params);
-  },
-  hoverNode (params) {
-    console.log('hoverNode Event:', params);
-  },
-  hoverEdge (params) {
-    console.log('hoverEdge Event:', params);
-  },
-  blurNode (params) {
-    console.log('blurNode Event:', params);
-  },
-  blurEdge (params) {
-    console.log('blurEdge Event:', params);
-  },
-};
-
 /**
  * Renders the landing page in unauthenticated state.
  *
@@ -142,26 +69,16 @@ let events = {
  */
 export function LandingPage({ isAuthenticated, profile }) {
   const [backgroundVideoLoaded, setBackgroundVideoLoaded] = useState(false);
-  const [data, setData] = useState(figure4eData);
   const [networkNodes, setNetwortNodes] = useState([]);
   const isMobile = useMediaQuery({ query: '(max-width: 768px)' });
 
-  const handleAddNode = useCallback(() => {
-    const id = data.nodes.length + 1;
-    setData({
-      ...data,
-      nodes: [...data.nodes, { id, label: `Node ${id}` }],
-    });
-  }, [setData, data]);
-
+  // vis-network-react event object
+  const events = {};
+  // vis-network-react event handlers
   const getNodes = useCallback((a) => {
     setNetwortNodes(a);
   }, []);
 
-  const handleGetNodes = useCallback(() => {
-    console.log(networkNodes);
-  }, [networkNodes]);
-
   const goToExternalLink = useCallback(() => {
     window.open('https://www.nature.com/nature/volumes/629/issues/8010', '_blank');
   }, []);
@@ -331,7 +248,7 @@ export function LandingPage({ isAuthenticated, profile }) {
         <div className="w-100 h-100 d-flex align-items-start direction-column">
           <div className="section-content-container container-fluid text-center">
             <VisNetworkReactComponent
-              data={data}
+              data={landscapeFigure4eNetworkData}
               options={options}
               events={events}
               getNodes={getNodes}

src/Search/searchPage.jsx

@@ -147,10 +147,10 @@ export function SearchPage({
     const inputElProtein = document.querySelector('.search-input-kype');
 
     if (ktype && ktype === 'protein') {
-      if (inputElProtein.value && inputElProtein.value.length) {
+      if (inputElProtein && inputElProtein.value && inputElProtein.value.length) {
         inputElProtein.value = '';
       }
-    } else if (inputEl.value && inputEl.value.length) {
+    } else if (inputEl && inputEl.value && inputEl.value.length) {
       inputRef.current.clear();
     }
   }
@@ -185,6 +185,7 @@ export function SearchPage({
               ktype={searchParams.ktype}
               resetSearch={resetSearch}
               setMultiSelections={setMultiSelections}
+              inputEl={inputEl}
             />
             <div className="search-box-input-group d-flex align-items-center flex-grow-1">
               {/*  
@@ -440,64 +441,72 @@ export function SearchPage({
   );
 }
 
+function RadioButtonComponent({ ktype, keyType, elId, label, eventHandler }) {
+  return (
+    <div className="form-check form-check-inline">
+      <input
+        className="form-check-input"
+        type="radio"
+        name="ktype"
+        id={elId}
+        value={keyType}
+        checked={ktype === keyType}
+        onChange={(e) => eventHandler(e)}
+      />
+      <label className="form-check-label" htmlFor={elId}>
+        {label}
+      </label>
+    </div>
+  );
+}
+
 // Radio buttons for selecting the search context
-function RadioButton({ changeParam, ktype, resetSearch, setMultiSelections }) {
+function RadioButton({
+  changeParam,
+  ktype,
+  resetSearch,
+  setMultiSelections,
+  inputEl,
+}) {
+  const radioButtons = [
+    {
+      keyType: 'gene',
+      id: 'inlineRadioGene',
+      label: 'Gene',
+    },
+    {
+      keyType: 'protein',
+      id: 'inlineRadioProtein',
+      label: 'Protein ID',
+    },
+    {
+      keyType: 'metab',
+      id: 'inlineRadioMetab',
+      label: 'Metabolite',
+    },
+  ];
+
+  const handleRadioChange = (e) => {
+    resetSearch('all');
+    setMultiSelections([]);
+    changeParam('ktype', e.target.value);
+    if (inputEl && inputEl.value && inputEl.value.length) {
+      inputEl.value = '';
+    }
+  };
+
   return (
     <div className="search-context">
-      <div className="form-check form-check-inline">
-        <input
-          className="form-check-input"
-          type="radio"
-          name="ktype"
-          id="inlineRadioGene"
-          value="gene"
-          checked={ktype === 'gene'}
-          onChange={(e) => {
-            resetSearch('all');
-            setMultiSelections([]);
-            changeParam('ktype', e.target.value);
-          }}
-        />
-        <label className="form-check-label" htmlFor="inlineRadioGene">
-          Gene
-        </label>
-      </div>
-      <div className="form-check form-check-inline">
-        <input
-          className="form-check-input"
-          type="radio"
-          name="ktype"
-          id="inlineRadioProtein"
-          value="protein"
-          checked={ktype === 'protein'}
-          onChange={(e) => {
-            resetSearch('all');
-            setMultiSelections([]);
-            changeParam('ktype', e.target.value);
-          }}
-        />
-        <label className="form-check-label" htmlFor="inlineRadioProtein">
-          Protein ID
-        </label>
-      </div>
-      <div className="form-check form-check-inline">
-        <input
-          className="form-check-input"
-          type="radio"
-          name="ktype"
-          id="inlineRadioMetab"
-          value="metab"
-          checked={ktype === 'metab'}
-          onChange={(e) => {
-            resetSearch('all');
-            setMultiSelections([]);
-            changeParam('ktype', e.target.value);
-          }}
+      {radioButtons.map((item) => (
+        <RadioButtonComponent
+          key={item.id}
+          ktype={ktype}
+          keyType={item.keyType}
+          elId={item.id}
+          label={item.label}
+          eventHandler={handleRadioChange}
         />
-        <label className="form-check-label" htmlFor="inlineRadioMetabolite">
-          Metabolite
-        </label>
-      </div>
+      ))}
     </div>
   );
 }