@haniffalab/cherita-react 1.2.0-dev.2025-04-30.0a204a1c → 1.2.0-dev.2025-05-16.4367ee63

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

@@ -4,11 +4,19 @@ 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; }
@@ -23,77 +31,164 @@ 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.varSet",
+    varSet: {
+      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 && `(${varResultsLength})`)), searchDiseases && /*#__PURE__*/_react.default.createElement(_Nav.default.Item, null, /*#__PURE__*/_react.default.createElement(_Nav.default.Link, {
+    eventKey: FEATURE_TYPE.DISEASE
+  }, "Diseases", " ", !!diseaseResultsLength && `(${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 {
+        ...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 {
+        ...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,175 @@
+"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 _requests = require("../../utils/requests");
+var _VarItem = require("../var-list/VarItem");
+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 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 {
+        ...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?.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 {
+        ...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 dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  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 {
+        ...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?.length && dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
+  (0, _react.useEffect)(() => {
+    if (dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError) {
+        setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, o => {
+          return sortMeans(o, varMeans.fetchedData);
+        }, dataset.varSort.disease.sortOrder));
+      }
+    } else if (dataset.varSort.disease.sort === _constants.VAR_SORT.NAME) {
+      setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, "name", dataset.varSort.disease.sortOrder));
+    } else {
+      setSortedDiseaseVars(diseaseVars);
+    }
+  }, [dataset.varSort.disease.sort, dataset.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, v);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faPlus
+    })))));
+  });
+  const isPending = diseaseData.isPending || varMeans.isPending && dataset.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,6 +6,8 @@ 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");
@@ -17,8 +19,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function VarSearchResults(_ref) {
   let {
     text,
-    setShowSuggestions,
-    handleSelect
+    handleSelect,
+    selectedResult,
+    setSelectedResult,
+    setResultsLength
   } = _ref;
   const [suggestions, setSuggestions] = (0, _react.useState)([]);
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
@@ -43,51 +47,68 @@ function VarSearchResults(_ref) {
         });
       } 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?.length);
     }
-  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  }, [fetchedData, isPending, serverError, setResultsLength]);
   const getDataAtIndex = index => deferredData[index];
-  const ItemComponent = item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-    key: item.name,
-    as: "button",
+  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?.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);
-      _lodash.default.delay(() => {
-        setShowSuggestions(false);
-      }, 150);
     }
-  }, item.name);
-  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"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
   }, deferredData?.length ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
     getDataAtIndex: getDataAtIndex,
     count: deferredData.length,
     ItemComponent: ItemComponent,
     overscan: 500,
-    estimateSize: 32,
-    maxHeight: "25vh"
-  }) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    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)();
@@ -122,37 +143,41 @@ function DiseasesSearchResults(_ref2) {
   (0, _react.useEffect)(() => {
     if (!isPending && !serverError) {
       setSuggestions(fetchedData);
-      setShowSuggestions(true);
+      setResultsLength(fetchedData?.length);
     }
-  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  }, [fetchedData, isPending, serverError, setResultsLength]);
   const getDataAtIndex = index => deferredData[index];
-  const ItemComponent = item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+  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,
-    as: "button",
-    disabled: isStale,
     onClick: () => {
+      setSelectedResult(item);
       dispatch({
         type: "select.disease",
         id: item.disease_id,
         name: item.disease_name
       });
-      _lodash.default.delay(() => {
-        setShowSuggestions(false);
-      }, 150);
-    }
-  }, item.disease_name);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Diseases"), /*#__PURE__*/_react.default.createElement("div", {
+    },
+    active: 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"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
   }, deferredData?.length ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
     getDataAtIndex: getDataAtIndex,
     count: deferredData.length,
     ItemComponent: ItemComponent,
     overscan: 250,
     estimateSize: 32,
-    maxHeight: "25vh"
-  }) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    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"))));
 }

package/dist/cjs/components/var-list/VarItem.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.SearchResultItem = SearchResultItem;
 exports.SingleSelectionItem = SingleSelectionItem;
+exports.VarDiseaseInfo = VarDiseaseInfo;
 exports.VarItem = VarItem;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
@@ -265,4 +267,72 @@ function VarItem(_ref5) {
   } else {
     return null;
   }
+}
+function SearchResultItem(_ref6) {
+  let {
+    item,
+    isActive,
+    selectVar,
+    removeVar,
+    isDiseaseGene = false,
+    showSetColorEncoding = true,
+    showRemove = true
+  } = _ref6;
+  const ENDPOINT = "disease/gene";
+  const [openInfo, setOpenInfo] = (0, _react.useState)(false);
+  const dataset = (0, _DatasetContext.useDataset)();
+  const params = {
+    geneName: item.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  };
+  const isNotInData = item.matrix_index === -1;
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useFetch)(ENDPOINT, params, {
+    refetchOnMount: false,
+    enabled: !!dataset.diseaseDatasets.length
+  });
+  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData?.length;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: `d-flex justify-content-between ${hasDiseaseInfo ? "cursor-pointer" : ""}`,
+    onClick: () => {
+      setOpenInfo(o => !o);
+    }
+  }, /*#__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"
+  }, hasDiseaseInfo && /*#__PURE__*/_react.default.createElement(_iconsMaterial.MoreVert, null), showSetColorEncoding && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    key: item.matrix_index,
+    variant: isActive ? "primary" : isNotInData ? "outline-secondary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: e => {
+      e.stopPropagation();
+      selectVar();
+    },
+    disabled: isNotInData,
+    title: isNotInData ? "Not present in data" : "Set as color encoding"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDroplet
+  })), (!isDiseaseGene || !showRemove) && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Remove from list",
+    onClick: e => {
+      e.stopPropagation();
+      removeVar();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTrash
+  }))))), hasDiseaseInfo && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Collapse, {
+    in: openInfo
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mt-2 var-disease-info-collapse"
+  }, /*#__PURE__*/_react.default.createElement(VarDiseaseInfo, {
+    data: fetchedData
+  }))));
 }