@haniffalab/cherita-react 1.2.0 → 1.3.0-dev.2025-05-29.ee7e9b72

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

@@ -4,14 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SearchBar = SearchBar;
+exports.SearchModal = SearchModal;
 var _react = _interopRequireWildcard(require("react"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
-var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
+var _Col = _interopRequireDefault(require("react-bootstrap/Col"));
+var _Container = _interopRequireDefault(require("react-bootstrap/Container"));
+var _Nav = _interopRequireDefault(require("react-bootstrap/Nav"));
+var _Row = _interopRequireDefault(require("react-bootstrap/Row"));
+var _Tab = _interopRequireDefault(require("react-bootstrap/Tab"));
+var _SearchInfo = require("./SearchInfo");
 var _SearchResults = require("./SearchResults");
+var _constants = require("../../constants/constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 && {}.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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function onVarSelect(dispatch, item) {
   dispatch({
     type: "select.var",
@@ -23,77 +35,162 @@ function onVarSelect(dispatch, item) {
   });
   dispatch({
     type: "set.colorEncoding",
-    value: "var"
+    value: _constants.COLOR_ENCODINGS.VAR
   });
 }
-function SearchBar(_ref) {
+function addVarSet(dispatch, _ref) {
   let {
-    searchVar = true,
-    searchDiseases = false,
-    handleSelect = onVarSelect
+    name,
+    vars
   } = _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);
+  dispatch({
+    type: "add.var",
+    var: {
+      name: name,
+      vars: vars,
+      isSet: true
     }
-  }, [text]);
-
-  //@TODO: Abstract styles
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
+  });
+}
+const FEATURE_TYPE = {
+  VAR: "var",
+  DISEASE: "disease"
+};
+function SearchModal(_ref2) {
+  let {
+    show,
+    handleClose,
+    text,
+    setText,
+    displayText,
+    handleSelect = onVarSelect,
+    searchVar,
+    searchDiseases
+  } = _ref2;
+  const [tab, setTab] = (0, _react.useState)("var");
+  const [selectedResult, setSelectedResult] = (0, _react.useState)({
+    var: null,
+    disease: null
+  });
+  const [varResultsLength, setVarResultsLength] = (0, _react.useState)(null);
+  const [diseaseResultsLength, setDiseaseResultsLength] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
+    show: show,
+    onHide: handleClose,
+    size: "xl"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, {
+    className: "bg-primary"
+  }, /*#__PURE__*/_react.default.createElement(_Container.default, {
+    className: "gx-0"
+  }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
     onSubmit: e => {
       e.preventDefault();
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
-    ref: inputRef,
-    onFocus: () => {
-      setShowSuggestions(text.length > 0);
-    },
-    onBlur: () => {
-      _lodash.default.delay(() => {
-        setShowSuggestions(false);
-      }, 150);
-    },
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, /*#__PURE__*/_react.default.createElement(_Search.default, null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
+    autoFocus: true,
     type: "text",
     placeholder: "Search " + displayText,
     value: text,
     onChange: e => {
       setText(e.target.value);
-    },
-    style: {
-      paddingLeft: "2.5rem",
-      borderRadius: "5px"
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      position: "absolute",
-      left: "10px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      pointerEvents: "none",
-      zIndex: 10
+      setSelectedResult({
+        var: null,
+        disease: null
+      });
+      setVarResultsLength(null);
+      setDiseaseResultsLength(null);
     }
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, {
-    show: showSuggestions,
-    onMouseDown: e => {
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "light",
+    onClick: handleClose
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, null)))))))))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, {
+    className: "p-0"
+  }, /*#__PURE__*/_react.default.createElement(_Container.default, null, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    xs: 12,
+    md: 8
+  }, /*#__PURE__*/_react.default.createElement(_Tab.default.Container, {
+    activeKey: tab,
+    onSelect: k => setTab(k)
+  }, /*#__PURE__*/_react.default.createElement(_Row.default, {
+    className: "w-100"
+  }, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    sm: 3,
+    className: "py-3 border-end"
+  }, /*#__PURE__*/_react.default.createElement(_Nav.default, {
+    variant: "pills",
+    className: "flex-column"
+  }, searchVar && /*#__PURE__*/_react.default.createElement(_Nav.default.Item, null, /*#__PURE__*/_react.default.createElement(_Nav.default.Link, {
+    eventKey: FEATURE_TYPE.VAR
+  }, "Genes", " ", !!varResultsLength && "(".concat(varResultsLength, ")"))), searchDiseases && /*#__PURE__*/_react.default.createElement(_Nav.default.Item, null, /*#__PURE__*/_react.default.createElement(_Nav.default.Link, {
+    eventKey: FEATURE_TYPE.DISEASE
+  }, "Diseases", " ", !!diseaseResultsLength && "(".concat(diseaseResultsLength, ")"))))), /*#__PURE__*/_react.default.createElement(_Col.default, {
+    sm: 9,
+    className: "py-3"
+  }, /*#__PURE__*/_react.default.createElement(_Tab.default.Content, null, searchVar && /*#__PURE__*/_react.default.createElement(_Tab.default.Pane, {
+    eventKey: FEATURE_TYPE.VAR
+  }, /*#__PURE__*/_react.default.createElement(_SearchResults.VarSearchResults, {
+    text: text,
+    handleSelect: handleSelect,
+    selectedResult: selectedResult.var,
+    setSelectedResult: item => setSelectedResult(prev => {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        var: item
+      });
+    }),
+    setResultsLength: setVarResultsLength
+  })), searchDiseases && /*#__PURE__*/_react.default.createElement(_Tab.default.Pane, {
+    eventKey: FEATURE_TYPE.DISEASE
+  }, /*#__PURE__*/_react.default.createElement(_SearchResults.DiseasesSearchResults, {
+    text: text,
+    selectedResult: selectedResult.disease,
+    setSelectedResult: item => setSelectedResult(prev => {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        disease: item
+      });
+    }),
+    setResultsLength: setDiseaseResultsLength
+  }))))))), /*#__PURE__*/_react.default.createElement(_Col.default, {
+    xs: 12,
+    md: 4,
+    className: "bg-light p-3 search-modal-info"
+  }, selectedResult[tab] ? tab === FEATURE_TYPE.DISEASE ? /*#__PURE__*/_react.default.createElement(_SearchInfo.DiseaseInfo, {
+    disease: selectedResult.disease,
+    handleSelect: handleSelect,
+    addVarSet: addVarSet
+  }) : /*#__PURE__*/_react.default.createElement(_SearchInfo.VarInfo, {
+    varItem: selectedResult.var
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-muted"
+  }, "No result selected"))))));
+}
+function SearchBar(_ref3) {
+  let {
+    searchVar = true,
+    searchDiseases = false
+  } = _ref3;
+  const [text, setText] = (0, _react.useState)("");
+  const displayText = [...(searchVar ? ["features"] : []), ...(searchDiseases ? ["diseases"] : [])].join(" and ");
+  const [showModal, setShowModal] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
+    onSubmit: e => {
       e.preventDefault();
-    },
-    onSelect: () => {
-      inputRef.current.blur();
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, {
-    style: {
-      width: "90%"
     }
-  }, searchVar && /*#__PURE__*/_react.default.createElement(_SearchResults.VarSearchResults, {
-    text: text,
-    setShowSuggestions: setShowSuggestions,
-    handleSelect: handleSelect
-  }), searchVar && searchDiseases && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Divider, null), searchDiseases && /*#__PURE__*/_react.default.createElement(_SearchResults.DiseasesSearchResults, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, /*#__PURE__*/_react.default.createElement(_Search.default, null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
+    onClick: () => setShowModal(true),
+    type: "text",
+    placeholder: "Search " + displayText,
+    defaultValue: text
+  })))), /*#__PURE__*/_react.default.createElement(SearchModal, {
+    show: showModal,
     text: text,
-    setShowSuggestions: setShowSuggestions
-  }))))));
+    setText: setText,
+    displayText: displayText,
+    searchVar: searchVar,
+    searchDiseases: searchDiseases,
+    handleClose: () => setShowModal(false)
+  }));
 }

package/dist/cjs/components/search-bar/SearchInfo.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DiseaseInfo = DiseaseInfo;
+exports.VarInfo = VarInfo;
+var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _SettingsContext = require("../../context/SettingsContext");
+var _requests = require("../../utils/requests");
+var _VarItem = require("../var-list/VarItem");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function VarInfo(_ref) {
+  let {
+    varItem
+  } = _ref;
+  const ENDPOINT = "disease/gene";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [params, setParams] = (0, _react.useState)({
+    geneName: varItem.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return _objectSpread(_objectSpread({}, p), {}, {
+        geneName: varItem.name
+      });
+    });
+  }, [varItem.name]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useFetch)(ENDPOINT, params, {
+    refetchOnMount: false,
+    enabled: !!dataset.diseaseDatasets.length
+  });
+  const hasDiseaseInfo = !isPending && !serverError && !!(fetchedData !== null && fetchedData !== void 0 && fetchedData.length);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", null, varItem.name), !!dataset.diseaseDatasets.length && isPending && /*#__PURE__*/_react.default.createElement("p", null, "Loading..."), hasDiseaseInfo && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", null, "Associated diseases"), /*#__PURE__*/_react.default.createElement(_VarItem.VarDiseaseInfo, {
+    data: fetchedData
+  })));
+}
+const useVarMean = function (varKeys) {
+  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const ENDPOINT = "matrix/mean";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
+      name: v.name,
+      indices: v.vars.map(v => v.index)
+    } : v.index),
+    // obsIndices:
+    varNamesCol: dataset.varNamesCol
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return _objectSpread(_objectSpread({}, p), {}, {
+        varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
+          name: v.name,
+          indices: v.vars.map(v => v.index)
+        } : v.index)
+      });
+    });
+  }, [varKeys]);
+  return (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: enabled,
+    refetchOnMount: false
+  });
+};
+
+// ensure nulls are lowest values
+const sortMeans = (i, means) => {
+  return means[i.name] || _lodash.default.min(_lodash.default.values(means)) - 1;
+};
+function DiseaseInfo(_ref2) {
+  let {
+    disease,
+    handleSelect,
+    addVarSet
+  } = _ref2;
+  const ENDPOINT = "disease/genes";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
+  const [diseaseVars, setDiseaseVars] = (0, _react.useState)([]);
+  const [sortedDiseaseVars, setSortedDiseaseVars] = (0, _react.useState)([]);
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    col: dataset.varNamesCol,
+    diseaseDatasets: dataset.diseaseDatasets,
+    diseaseId: disease.id
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return _objectSpread(_objectSpread({}, p), {}, {
+        diseaseId: disease.id
+      });
+    });
+  }, [disease]);
+  const diseaseData = (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: !!params.diseaseId,
+    refetchOnMount: true
+  });
+  (0, _react.useEffect)(() => {
+    if (!diseaseData.isPending && !diseaseData.serverError) {
+      setDiseaseVars(diseaseData.fetchedData);
+    }
+  }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
+  const varMeans = useVarMean(diseaseVars, !!(diseaseVars !== null && diseaseVars !== void 0 && diseaseVars.length) && settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
+  (0, _react.useEffect)(() => {
+    if (settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError) {
+        setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, o => {
+          return sortMeans(o, varMeans.fetchedData);
+        }, settings.varSort.disease.sortOrder));
+      }
+    } else if (settings.varSort.disease.sort === _constants.VAR_SORT.NAME) {
+      setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, "name", settings.varSort.disease.sortOrder));
+    } else {
+      setSortedDiseaseVars(diseaseVars);
+    }
+  }, [settings.varSort.disease.sort, settings.varSort.disease.sortOrder, diseaseVars, varMeans.fetchedData, varMeans.isPending, varMeans.serverError]);
+  const diseaseVarList = _lodash.default.map(sortedDiseaseVars, v => {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+      key: v.gene_id
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "d-flex justify-content-between align-items-center w-100"
+    }, v.name, /*#__PURE__*/_react.default.createElement("div", {
+      className: "d-flex align-items-center gap-1"
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      type: "button",
+      className: "m-0 p-0 px-1",
+      variant: "outline-secondary",
+      title: "Add to list",
+      onClick: () => {
+        handleSelect(dispatch, {
+          name: v.name,
+          index: v.index,
+          matrix_index: v.matrix_index
+        });
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faPlus
+    })))));
+  });
+  const isPending = diseaseData.isPending || varMeans.isPending && settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", null, disease.disease_name), /*#__PURE__*/_react.default.createElement("h6", null, "Implicated genes"), isPending ? /*#__PURE__*/_react.default.createElement("p", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-end mb-2"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    size: "sm",
+    title: "Add all as a set",
+    onClick: () => {
+      addVarSet(dispatch, {
+        name: disease.disease_name,
+        vars: _lodash.default.map(diseaseVars, v => {
+          return {
+            index: v.index,
+            name: v.name,
+            matrix_index: v.matrix_index
+          };
+        })
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faPlus
+  }), " Add all as a set")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    className: "overflow-scroll"
+  }, diseaseVarList)));
+}

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

@@ -6,21 +6,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.DiseasesSearchResults = DiseasesSearchResults;
 exports.VarSearchResults = VarSearchResults;
 var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _DatasetContext = require("../../context/DatasetContext");
+var _SettingsContext = require("../../context/SettingsContext");
 var _search = require("../../utils/search");
+var _VirtualizedList = require("../../utils/VirtualizedList");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 && {}.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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function VarSearchResults(_ref) {
   let {
     text,
-    setShowSuggestions,
-    handleSelect
+    handleSelect,
+    selectedResult,
+    setSelectedResult,
+    setResultsLength
   } = _ref;
   const [suggestions, setSuggestions] = (0, _react.useState)([]);
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
   const {
     setParams,
     data: {
@@ -35,57 +44,76 @@ function VarSearchResults(_ref) {
     const setData = text => {
       if (text.length) {
         setParams(p => {
-          return {
-            ...p,
+          return _objectSpread(_objectSpread({}, p), {}, {
             text: text
-          };
+          });
         });
       } else {
         setSuggestions([]);
-        setShowSuggestions(false);
       }
     };
     return _lodash.default.debounce(setData, 300);
-  }, [setParams, setShowSuggestions]);
+  }, [setParams]);
   (0, _react.useEffect)(() => {
     updateParams(text);
   }, [text, updateParams]);
   (0, _react.useEffect)(() => {
     if (!isPending && !serverError) {
       setSuggestions(fetchedData);
-      setShowSuggestions(true);
+      setResultsLength(fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.length);
+    }
+  }, [fetchedData, isPending, serverError, setResultsLength]);
+  const getDataAtIndex = index => deferredData[index];
+  const ItemComponent = item => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "virtualized-list-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+    key: item,
+    onClick: () => {
+      setSelectedResult(item);
+    },
+    active: (selectedResult === null || selectedResult === void 0 ? void 0 : selectedResult.index) === item.index
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/_react.default.createElement("div", null, item.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Add to list",
+    disabled: isStale,
+    onClick: () => {
+      handleSelect(dispatch, item);
     }
-  }, [fetchedData, isPending, serverError, setShowSuggestions]);
-  const suggestionsList = (0, _react.useMemo)(() => {
-    return deferredData?.map(item => {
-      return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-        key: item.name,
-        as: "button",
-        disabled: isStale,
-        onClick: () => {
-          handleSelect(dispatch, item);
-          _lodash.default.delay(() => {
-            setShowSuggestions(false);
-          }, 150);
-        }
-      }, item.name);
-    });
-  }, [deferredData, dispatch, handleSelect, isStale, setShowSuggestions]);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Features"), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faPlus
+  })))))));
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "search-results"
-  }, deferredData?.length ? suggestionsList : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, deferredData !== null && deferredData !== void 0 && deferredData.length ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
+    getDataAtIndex: getDataAtIndex,
+    count: deferredData.length,
+    ItemComponent: ItemComponent,
+    overscan: 500,
+    estimateSize: 42,
+    maxHeight: "70vh"
+  }) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
     key: "empty",
     as: "button",
     disabled: true
-  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
+  }, !text.length ? "Search features" : !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"))));
 }
 function DiseasesSearchResults(_ref2) {
   let {
     text,
-    setShowSuggestions
+    selectedResult,
+    setSelectedResult,
+    setResultsLength
   } = _ref2;
   const [suggestions, setSuggestions] = (0, _react.useState)([]);
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const {
     setParams,
     data: {
@@ -100,10 +128,9 @@ function DiseasesSearchResults(_ref2) {
     const setData = text => {
       if (text.length) {
         setParams(p => {
-          return {
-            ...p,
+          return _objectSpread(_objectSpread({}, p), {}, {
             text: text
-          };
+          });
         });
       } else {
         setSuggestions([]);
@@ -117,33 +144,36 @@ function DiseasesSearchResults(_ref2) {
   (0, _react.useEffect)(() => {
     if (!isPending && !serverError) {
       setSuggestions(fetchedData);
-      setShowSuggestions(true);
+      setResultsLength(fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.length);
     }
-  }, [fetchedData, isPending, serverError, setShowSuggestions]);
-  const suggestionsList = (0, _react.useMemo)(() => {
-    return deferredData?.map(item => {
-      return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-        key: item.id,
-        as: "button",
-        disabled: isStale,
-        onClick: () => {
-          dispatch({
-            type: "select.disease",
-            id: item.disease_id,
-            name: item.disease_name
-          });
-          _lodash.default.delay(() => {
-            setShowSuggestions(false);
-          }, 150);
-        }
-      }, item.disease_name);
-    });
-  }, [deferredData, dispatch, isStale, setShowSuggestions]);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Diseases"), /*#__PURE__*/_react.default.createElement("div", {
+  }, [fetchedData, isPending, serverError, setResultsLength]);
+  const getDataAtIndex = index => deferredData[index];
+  const ItemComponent = item => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "virtualized-list-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+    key: item.name,
+    onClick: () => {
+      setSelectedResult(item);
+    },
+    active: (selectedResult === null || selectedResult === void 0 ? void 0 : selectedResult.id) === item.id
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/_react.default.createElement("div", null, item.disease_name)))));
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "search-results"
-  }, deferredData?.length ? suggestionsList : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, deferredData !== null && deferredData !== void 0 && deferredData.length ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
+    getDataAtIndex: getDataAtIndex,
+    count: deferredData.length,
+    ItemComponent: ItemComponent,
+    overscan: 250,
+    estimateSize: 32,
+    maxHeight: "70vh"
+  }) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
     key: "empty",
     as: "button",
     disabled: true
-  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
+  }, !text.length ? "Search diseases" : !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"))));
 }