@haniffalab/cherita-react 0.2.0-dev.2024-05-09.97c686f2 → 0.2.0-dev.2024-05-09.07fb18ed

package/dist/components/Offcanvas/index.js

@@ -11,6 +11,7 @@ exports.OffcanvasVars = OffcanvasVars;
 var _react = require("react");
 var _Offcanvas = _interopRequireDefault(require("react-bootstrap/Offcanvas"));
 var _cheritaReact = require("@haniffalab/cherita-react");
+var _SearchBar = require("../search-bar/SearchBar");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function OffcanvasObs(_ref) {
@@ -65,10 +66,12 @@ function OffcanvasVars(_ref3) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
         children: "Features"
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.VarNamesList, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default.Body, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
+        searchDiseases: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.VarNamesList, {
         mode: mode
-      })
+      })]
     })]
   });
 }

package/dist/components/search-bar/SearchBar.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchBar = SearchBar;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _SearchResults = require("./SearchResults");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function SearchBar(_ref) {
+  let {
+    searchVar = true,
+    searchDiseases = false
+  } = _ref;
+  const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
+  const [text, setText] = (0, _react.useState)("");
+  const inputRef = (0, _react.useRef)(null);
+  const displayText = [...(searchVar ? ["features"] : []), ...(searchDiseases ? ["diseases"] : [])].join(" and ");
+  (0, _react.useEffect)(() => {
+    if (text.length > 0) {
+      setShowSuggestions(true);
+    }
+  }, [text]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
+      onSubmit: e => {
+        e.preventDefault();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.FormGroup, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
+          ref: inputRef,
+          onFocus: () => {
+            setShowSuggestions(text.length > 0);
+          },
+          onBlur: () => {
+            _lodash.default.delay(() => {
+              setShowSuggestions(false);
+            }, 150);
+          },
+          type: "text",
+          placeholder: "Search " + displayText,
+          value: text,
+          onChange: e => {
+            setText(e.target.value);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown, {
+          show: showSuggestions,
+          onMouseDown: e => {
+            e.preventDefault();
+          },
+          onSelect: () => {
+            inputRef.current.blur();
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Menu, {
+            style: {
+              width: "90%"
+            },
+            children: [searchVar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.VarSearchResults, {
+              text: text,
+              setShowSuggestions: setShowSuggestions
+            }), searchVar && searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Divider, {}), searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.DiseasesSearchResults, {
+              text: text,
+              setShowSuggestions: setShowSuggestions
+            })]
+          })
+        })]
+      })
+    })
+  });
+}

package/dist/components/search-bar/SearchResults.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DiseasesSearchResults = DiseasesSearchResults;
+exports.VarSearchResults = VarSearchResults;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _DatasetContext = require("../../context/DatasetContext");
+var _search = require("../../utils/search");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function VarSearchResults(_ref) {
+  let {
+    text,
+    setShowSuggestions
+  } = _ref;
+  const [suggestions, setSuggestions] = (0, _react.useState)([]);
+  const {
+    setParams,
+    data: {
+      fetchedData = [],
+      isPending,
+      serverError
+    },
+    onSelect
+  } = (0, _search.useVarSearch)();
+  const deferredData = (0, _react.useDeferredValue)(suggestions);
+  const isStale = deferredData !== fetchedData;
+  const updateParams = (0, _react.useMemo)(() => {
+    const setData = text => {
+      if (text.length) {
+        setParams(p => {
+          return {
+            ...p,
+            text: text
+          };
+        });
+      } else {
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+    };
+    return _lodash.default.debounce(setData, 300);
+  }, [setParams, setShowSuggestions]);
+  (0, _react.useEffect)(() => {
+    updateParams(text);
+  }, [text, updateParams]);
+  (0, _react.useEffect)(() => {
+    if (!isPending && !serverError) {
+      setSuggestions(fetchedData);
+      setShowSuggestions(true);
+    }
+  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  const suggestionsList = (0, _react.useMemo)(() => {
+    return deferredData === null || deferredData === void 0 ? void 0 : deferredData.map(item => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+        as: "button",
+        disabled: isStale,
+        onClick: () => {
+          onSelect(item);
+          _lodash.default.delay(() => {
+            setShowSuggestions(false);
+          }, 150);
+        },
+        children: item.name
+      }, item.name);
+    });
+  }, [deferredData, isStale, onSelect, setShowSuggestions]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
+      children: "Features"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        maxHeight: "25vh",
+        overflowY: "scroll"
+      },
+      children: deferredData !== null && deferredData !== void 0 && deferredData.length ? suggestionsList : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+        as: "button",
+        disabled: true,
+        children: !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"
+      }, "empty")
+    })]
+  });
+}
+function DiseasesSearchResults(_ref2) {
+  let {
+    text,
+    setShowSuggestions
+  } = _ref2;
+  const [suggestions, setSuggestions] = (0, _react.useState)([]);
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const {
+    setParams,
+    data: {
+      fetchedData = [],
+      isPending,
+      serverError
+    }
+  } = (0, _search.useDiseaseSearch)();
+  (0, _search.useGetDisease)();
+  const deferredData = (0, _react.useDeferredValue)(suggestions);
+  const isStale = deferredData !== fetchedData;
+  const updateParams = (0, _react.useMemo)(() => {
+    const setData = text => {
+      if (text.length) {
+        setParams(p => {
+          return {
+            ...p,
+            text: text
+          };
+        });
+      } else {
+        setSuggestions([]);
+      }
+    };
+    return _lodash.default.debounce(setData, 300);
+  }, [setParams]);
+  (0, _react.useEffect)(() => {
+    updateParams(text);
+  }, [text, updateParams]);
+  (0, _react.useEffect)(() => {
+    if (!isPending && !serverError) {
+      setSuggestions(fetchedData);
+      setShowSuggestions(true);
+    }
+  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  const suggestionsList = (0, _react.useMemo)(() => {
+    return deferredData === null || deferredData === void 0 ? void 0 : deferredData.map(item => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+        as: "button",
+        disabled: isStale,
+        onClick: () => {
+          dispatch({
+            type: "select.disease",
+            id: item === null || item === void 0 ? void 0 : item.disease_id,
+            name: item === null || item === void 0 ? void 0 : item.disease_name
+          });
+          _lodash.default.delay(() => {
+            setShowSuggestions(false);
+          }, 150);
+        },
+        children: item.disease_name
+      }, item.id);
+    });
+  }, [deferredData, dispatch, isStale, setShowSuggestions]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
+      children: "Diseases"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        maxHeight: "25vh",
+        overflowY: "scroll"
+      },
+      children: deferredData !== null && deferredData !== void 0 && deferredData.length ? suggestionsList : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+        as: "button",
+        disabled: true,
+        children: !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"
+      }, "empty")
+    })]
+  });
+}

package/dist/components/var-list/VarList.js

@@ -4,164 +4,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VarNamesList = VarNamesList;
-exports.VarSearchBar = VarSearchBar;
 require("bootstrap/dist/css/bootstrap.min.css");
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
-var _requests = require("../../utils/requests");
 var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
 var _reactBootstrap = require("react-bootstrap");
-var _LoadingSpinner = require("../../utils/LoadingSpinner");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function VarSearchBar(_ref) {
+function VarNamesList(_ref) {
+  var _dataset$selectedVar, _dataset$selectedDise, _dataset$selectedDise2, _dataset$selectedDise3;
   let {
-    varNames = [],
-    onSelect
+    mode = _constants.SELECTION_MODES.SINGLE,
+    displayName = "genes"
   } = _ref;
-  const [suggestions, setSuggestions] = (0, _react.useState)([]);
-  const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
-  const [text, setText] = (0, _react.useState)("");
-  const getSuggestions = (0, _react.useMemo)(() => {
-    const filter = text => {
-      if (text.length > 0) {
-        const regex = new RegExp("^".concat(text), "i");
-        const filter = varNames.sort().filter(v => regex.test(v.name));
-        setSuggestions(filter);
-        setShowSuggestions(true);
-      } else {
-        setShowSuggestions(false);
-      }
-    };
-    return _lodash.default.debounce(filter, 300);
-  }, [varNames]);
-  (0, _react.useEffect)(() => {
-    getSuggestions(text);
-  }, [getSuggestions, text]);
-  const suggestionsList = suggestions.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-    as: "button",
-    onClick: () => {
-      onSelect(item);
-    },
-    children: item.name
-  }, item.name));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
-      onSubmit: e => {
-        e.preventDefault();
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.FormGroup, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Label, {
-          children: "Feature:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
-          onFocus: () => {
-            setShowSuggestions(text.length > 0);
-          },
-          onBlur: () => {
-            _lodash.default.delay(() => {
-              setShowSuggestions(false);
-            }, 150);
-          },
-          type: "text",
-          placeholder: "Search for a feature",
-          value: text,
-          onChange: e => {
-            setText(e.target.value);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
-          style: {
-            width: "90%",
-            maxHeight: "25vh",
-            overflowY: "scroll"
-          },
-          show: showSuggestions,
-          children: suggestionsList
-        })]
-      })
-    })
-  });
-}
-function VarNamesList(_ref2) {
-  let {
-    mode = _constants.SELECTION_MODES.SINGLE
-  } = _ref2;
-  const ENDPOINT = "var/names";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const [varNames, setVarNames] = (0, _react.useState)([]);
-  const [updatedVarNames, setUpdatedVarNames] = (0, _react.useState)(false);
-  const [varButtons, setVarButtons] = (0, _react.useState)(mode ? mode === _constants.SELECTION_MODES.SINGLE ? [dataset.selectVar] : dataset.selectedMultiVar : []);
-  const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectVar : dataset.selectedMultiVar);
-  const [params, setParams] = (0, _react.useState)({
-    url: dataset.url,
-    col: dataset.varNamesCol
-  });
+  const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? [dataset.selectedVar] : dataset.selectedMultiVar);
+  const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? (_dataset$selectedVar = dataset.selectedVar) === null || _dataset$selectedVar === void 0 ? void 0 : _dataset$selectedVar.matrix_index : dataset.selectedMultiVar.map(i => i.matrix_index));
   (0, _react.useEffect)(() => {
-    setParams(p => {
-      return {
-        ...p,
-        url: dataset.url,
-        col: dataset.varNamesCol
-      };
-    });
-  }, [dataset.url, dataset.varNamesCol]);
-  const {
-    fetchedData,
-    isPending,
-    serverError
-  } = (0, _requests.useFetch)(ENDPOINT, params, {
-    refetchOnMount: false
-  });
-  const validateSelection = (0, _react.useCallback)((selectedVar, mode) => {
-    if (updatedVarNames) {
-      if (mode === _constants.SELECTION_MODES.SINGLE) {
-        if (selectedVar && !_lodash.default.some(varNames, selectedVar)) {
-          setActive(null);
-          dispatch({
-            type: "varSelected",
-            var: null
-          });
-        }
-      } else {
-        if (selectedVar.length && !_lodash.default.every(selectedVar, v => _lodash.default.some(varNames, v))) {
-          setActive([]);
-          dispatch({
-            type: "multiVarReset",
-            var: []
-          });
+    if (mode === _constants.SELECTION_MODES.SINGLE) {
+      var _dataset$selectedVar2;
+      setVarButtons(v => {
+        if (dataset.selectedVar) {
+          return _lodash.default.unionWith(v, [dataset.selectedVar], _lodash.default.isEqual);
+        } else {
+          return [];
         }
-      }
-    }
-  }, [dispatch, varNames, updatedVarNames]);
-  (0, _react.useEffect)(() => {
-    if (!isPending && !serverError) {
-      setVarNames(fetchedData);
-      setUpdatedVarNames(true);
-    }
-  }, [fetchedData, isPending, serverError]);
-  (0, _react.useEffect)(() => {
-    if (mode === _constants.SELECTION_MODES.SINGLE && dataset.selectedVar) {
-      validateSelection(dataset.selectVar, mode);
-      setActive(dataset.selectedVar.matrix_index);
+      });
+      setActive((_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.matrix_index);
     }
-  }, [mode, dataset.selectedVar, dataset.selectVar, validateSelection]);
+  }, [mode, dataset.selectedVar]);
   (0, _react.useEffect)(() => {
     if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      validateSelection(dataset.selectedMultiVar, mode);
+      setVarButtons(v => {
+        if (dataset.selectedMultiVar.length) {
+          return _lodash.default.unionWith(v, dataset.selectedMultiVar, _lodash.default.isEqual);
+        } else {
+          return [];
+        }
+      });
       setActive(dataset.selectedMultiVar.map(i => i.matrix_index));
     }
-  }, [mode, dataset.selectedMultiVar, validateSelection]);
-  const selectVar = item => {
-    setVarButtons(() => {
-      if (varButtons[0] && varButtons.find(v => v.matrix_index === item.matrix_index)) {
-        return varButtons;
-      } else {
-        return [...varButtons, item];
-      }
-    });
+  }, [mode, dataset.selectedMultiVar]);
+  const selectVar = (0, _react.useCallback)(item => {
     if (mode === _constants.SELECTION_MODES.SINGLE) {
       dispatch({
         type: "varSelected",
@@ -173,26 +61,25 @@ function VarNamesList(_ref2) {
         var: item
       });
     }
-  };
-  const varList = (0, _react.useMemo)(() => {
-    return varButtons.map(item => {
+  }, [dispatch, mode]);
+  const makeList = (0, _react.useCallback)(vars => {
+    return vars.map(item => {
       if (item && mode === _constants.SELECTION_MODES.SINGLE) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           type: "button",
-          variant: "outline-primary",
+          variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
           className: "".concat(active === item.matrix_index && "active", " m-1"),
           onClick: () => {
-            dispatch({
-              type: "varSelected",
-              var: item
-            });
+            selectVar(item);
           },
+          disabled: item.matrix_index === -1,
+          title: item.matrix_index === -1 ? "Not present in data" : "",
           children: item.name
         }, item.matrix_index);
       } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           type: "button",
-          variant: "outline-primary",
+          variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
           className: "".concat(active.includes(item.matrix_index) && "active", " m-1"),
           onClick: () => {
             if (active.includes(item.matrix_index)) {
@@ -201,38 +88,63 @@ function VarNamesList(_ref2) {
                 var: item
               });
             } else {
-              dispatch({
-                type: "multiVarSelected",
-                var: item
-              });
+              selectVar(item);
             }
           },
+          disabled: item.matrix_index === -1,
+          title: item.matrix_index === -1 ? "Not present in data" : "",
           children: item.name
         }, item.matrix_index);
       } else {
         return null;
       }
     });
-  }, [active, dispatch, mode, varButtons]);
-  if (!serverError) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "position-relative",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
-        children: mode
-      }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(VarSearchBar, {
-        varNames: varNames,
-        onSelect: selectVar
+  }, [active, dispatch, mode, selectVar]);
+  const varList = (0, _react.useMemo)(() => {
+    return makeList(varButtons);
+  }, [makeList, varButtons]);
+  const diseaseVarList = (0, _react.useMemo)(() => {
+    return makeList(dataset.selectedDisease.genes);
+  }, [makeList, dataset.selectedDisease.genes]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "position-relative",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "overflow-auto mt-2",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex justify-content-between",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+            children: _lodash.default.capitalize(displayName)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+            variant: "link",
+            onClick: () => {
+              dispatch({
+                type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
+              });
+            },
+            children: "clear"
+          })]
+        }), varList]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "overflow-auto mt-2",
-        children: varList
+        children: ((_dataset$selectedDise = dataset.selectedDisease) === null || _dataset$selectedDise === void 0 ? void 0 : _dataset$selectedDise.id) && ((_dataset$selectedDise2 = dataset.selectedDisease) === null || _dataset$selectedDise2 === void 0 || (_dataset$selectedDise2 = _dataset$selectedDise2.genes) === null || _dataset$selectedDise2 === void 0 ? void 0 : _dataset$selectedDise2.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "d-flex justify-content-between",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+              children: "Disease genes"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+              variant: "link",
+              onClick: () => {
+                dispatch({
+                  type: "reset.disease"
+                });
+              },
+              children: "clear"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: (_dataset$selectedDise3 = dataset.selectedDisease) === null || _dataset$selectedDise3 === void 0 ? void 0 : _dataset$selectedDise3.name
+          }), diseaseVarList]
+        })
       })]
-    });
-  } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "danger",
-        children: serverError.message
-      })
-    });
-  }
+    })
+  });
 }

package/dist/context/DatasetContext.js

@@ -74,6 +74,12 @@ const initialDataset = {
   },
   state: {
     obs: {}
+  },
+  diseaseDatasets: [],
+  selectedDisease: {
+    id: null,
+    name: null,
+    genes: []
   }
 };
 const initializer = initialState => {
@@ -125,10 +131,6 @@ function useDatasetDispatch() {
 }
 function datasetReducer(dataset, action) {
   switch (action.type) {
-    case "setDataset":
-      {
-        return action.dataset;
-      }
     case "set.obs":
       {
         return {
@@ -159,7 +161,7 @@ function datasetReducer(dataset, action) {
       }
     case "multiVarSelected":
       {
-        if (dataset.selectedMultiVar.find(i => i === action.var)) {
+        if (dataset.selectedMultiVar.find(i => _lodash.default.isEqual(i, action.var))) {
           return dataset;
         } else {
           return {
@@ -172,7 +174,7 @@ function datasetReducer(dataset, action) {
       {
         return {
           ...dataset,
-          selectedMultiVar: dataset.selectedMultiVar.filter(a => a !== action.var)
+          selectedMultiVar: dataset.selectedMultiVar.filter(a => a.matrix_index !== action.var.matrix_index)
         };
       }
     case "set.colorEncoding":
@@ -182,13 +184,52 @@ function datasetReducer(dataset, action) {
           colorEncoding: action.value
         };
       }
-    case "multiVarReset":
+    case "reset.multiVar":
       {
         return {
           ...dataset,
           selectedMultiVar: []
         };
       }
+    case "reset.var":
+      {
+        return {
+          ...dataset,
+          selectedVar: null
+        };
+      }
+    case "select.disease":
+      {
+        return {
+          ...dataset,
+          selectedDisease: {
+            id: action.id,
+            name: action.name,
+            genes: []
+          }
+        };
+      }
+    case "set.disease.genes":
+      {
+        return {
+          ...dataset,
+          selectedDisease: {
+            ...dataset.selectedDisease,
+            genes: action.genes
+          }
+        };
+      }
+    case "reset.disease":
+      {
+        return {
+          ...dataset,
+          selectedDisease: {
+            id: null,
+            name: null,
+            genes: []
+          }
+        };
+      }
     case "set.controls.colorScale":
       {
         return {

package/dist/helpers/color-helper.js

@@ -21,7 +21,7 @@ class ColorHelper {
       if (colorEncoding === "var") {
         return scale(value).rgb();
       } else if (colorEncoding === "obs") {
-        return state.hasOwnProperty(value) ? state[value]["color"] : null;
+        return state !== null && state !== void 0 && state.hasOwnProperty(value) ? state[value]["color"] : null;
       }
     });
   }

package/dist/index.js

@@ -111,6 +111,12 @@ Object.defineProperty(exports, "ScatterplotControls", {
     return _Scatterplot.ScatterplotControls;
   }
 });
+Object.defineProperty(exports, "SearchBar", {
+  enumerable: true,
+  get: function () {
+    return _SearchBar.SearchBar;
+  }
+});
 Object.defineProperty(exports, "VIOLIN_MODES", {
   enumerable: true,
   get: function () {
@@ -138,6 +144,7 @@ Object.defineProperty(exports, "ViolinControls", {
 var _ObsList = require("./components/obs-list/ObsList");
 var _ObsmList = require("./components/obsm-list/ObsmList");
 var _VarList = require("./components/var-list/VarList");
+var _SearchBar = require("./components/search-bar/SearchBar");
 var _Heatmap = require("./components/heatmap/Heatmap");
 var _Dotplot = require("./components/dotplot/Dotplot");
 var _Scatterplot = require("./components/scatterplot/Scatterplot");

package/dist/utils/requests.js

@@ -11,7 +11,8 @@ var _errors = require("./errors");
 async function fetchData(endpoint, params) {
   let signal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   let ms = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300000;
-  const apiUrl = process.env.REACT_APP_API_URL;
+  let apiUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  apiUrl = apiUrl || process.env.REACT_APP_API_URL;
   const controller = new AbortController();
   const timeout = setTimeout(() => {
     controller.abort(DOMException.TIMEOUT_ERR);
@@ -40,6 +41,10 @@ async function fetchData(endpoint, params) {
 }
 const useFetch = function (endpoint, params) {
   let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  let apiUrl = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  const {
+    enabled = true
+  } = opts;
   const {
     data: fetchedData,
     isLoading: isPending,
@@ -50,7 +55,11 @@ const useFetch = function (endpoint, params) {
       let {
         signal
       } = _ref;
-      return fetchData(endpoint, params, signal);
+      if (enabled) {
+        return fetchData(endpoint, params, signal, apiUrl);
+      } else {
+        return;
+      }
     },
     ...opts
   });
@@ -64,6 +73,10 @@ exports.useFetch = useFetch;
 const useDebouncedFetch = function (endpoint, params) {
   let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 500;
   let opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  let apiUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  const {
+    enabled = true
+  } = opts;
   const debouncedParams = (0, _usehooks.useDebounce)(params, delay);
   const {
     data: fetchedData,
@@ -75,7 +88,11 @@ const useDebouncedFetch = function (endpoint, params) {
       let {
         signal
       } = _ref2;
-      return fetchData(endpoint, debouncedParams, signal);
+      if (enabled) {
+        return fetchData(endpoint, debouncedParams, signal, apiUrl);
+      } else {
+        return;
+      }
     },
     ...opts
   });

package/dist/utils/search.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVarSearch = exports.useGetDisease = exports.useDiseaseSearch = void 0;
+var _react = require("react");
+var _DatasetContext = require("../context/DatasetContext");
+var _requests = require("./requests");
+const useDiseaseSearch = () => {
+  const ENDPOINT = "diseases";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    diseaseDatasets: dataset.diseaseDatasets,
+    text: ""
+  });
+  const data = (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: !!params.text.length
+  });
+  return {
+    params,
+    setParams,
+    data
+  };
+};
+exports.useDiseaseSearch = useDiseaseSearch;
+const useVarSearch = () => {
+  const ENDPOINT = "var/names";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    text: ""
+  });
+  const data = (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: !!params.text.length
+  });
+  const onSelect = item => {
+    dispatch({
+      type: "varSelected",
+      var: item
+    });
+    dispatch({
+      type: "multiVarSelected",
+      var: item
+    });
+  };
+  return {
+    params,
+    setParams,
+    data,
+    onSelect
+  };
+};
+exports.useVarSearch = useVarSearch;
+const useGetDisease = () => {
+  var _dataset$selectedDise, _dataset$selectedDise2, _params$diseaseName;
+  const ENDPOINT = "disease/genes";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    col: dataset.varNamesCol,
+    diseaseName: (_dataset$selectedDise = dataset.selectedDisease) === null || _dataset$selectedDise === void 0 ? void 0 : _dataset$selectedDise.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return {
+        ...p,
+        diseaseName: dataset.selectedDisease.name
+      };
+    });
+  }, [(_dataset$selectedDise2 = dataset.selectedDisease) === null || _dataset$selectedDise2 === void 0 ? void 0 : _dataset$selectedDise2.name]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: !!((_params$diseaseName = params.diseaseName) !== null && _params$diseaseName !== void 0 && _params$diseaseName.length)
+  });
+  (0, _react.useEffect)(() => {
+    if (!isPending && !serverError) {
+      dispatch({
+        type: "set.disease.genes",
+        genes: fetchedData
+      });
+    }
+  }, [dispatch, fetchedData, isPending, serverError]);
+  return;
+};
+exports.useGetDisease = useGetDisease;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-05-09.97c686f2",
+  "version": "0.2.0-dev.2024-05-09.07fb18ed",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -78,5 +78,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "97c686f2f71b9fd317123f14ba380ca42cbbbe7f"
+  "prereleaseSha": "07fb18ed8d66be9ecd7817e41b76b1b5cdf3ba7b"
 }