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

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

@@ -1,8 +1,15 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
 import SearchIcon from "@mui/icons-material/Search";
-import _ from "lodash";
-import { Dropdown, Form, FormGroup, InputGroup } from "react-bootstrap";
+import { Button, Form, FormGroup, InputGroup, Modal } from "react-bootstrap";
+import Col from "react-bootstrap/Col";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Row from "react-bootstrap/Row";
+import Tab from "react-bootstrap/Tab";
+import { DiseaseInfo, VarInfo } from "./SearchInfo";
 import { DiseasesSearchResults, VarSearchResults } from "./SearchResults";
+import { COLOR_ENCODINGS } from "../../constants/constants";
 function onVarSelect(dispatch, item) {
   dispatch({
     type: "select.var",
@@ -14,77 +21,164 @@ function onVarSelect(dispatch, item) {
   });
   dispatch({
     type: "set.colorEncoding",
-    value: "var"
+    value: COLOR_ENCODINGS.VAR
   });
 }
-export function SearchBar(_ref) {
+function addVarSet(dispatch, _ref) {
   let {
-    searchVar = true,
-    searchDiseases = false,
-    handleSelect = onVarSelect
+    name,
+    vars
   } = _ref;
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const [text, setText] = useState("");
-  const inputRef = useRef(null);
-  const displayText = [...(searchVar ? ["features"] : []), ...(searchDiseases ? ["diseases"] : [])].join(" and ");
-  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.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
+  });
+}
+const FEATURE_TYPE = {
+  VAR: "var",
+  DISEASE: "disease"
+};
+export function SearchModal(_ref2) {
+  let {
+    show,
+    handleClose,
+    text,
+    setText,
+    displayText,
+    handleSelect = onVarSelect,
+    searchVar,
+    searchDiseases
+  } = _ref2;
+  const [tab, setTab] = useState("var");
+  const [selectedResult, setSelectedResult] = useState({
+    var: null,
+    disease: null
+  });
+  const [varResultsLength, setVarResultsLength] = useState(null);
+  const [diseaseResultsLength, setDiseaseResultsLength] = useState(null);
+  return /*#__PURE__*/React.createElement(Modal, {
+    show: show,
+    onHide: handleClose,
+    size: "xl"
+  }, /*#__PURE__*/React.createElement(Modal.Header, {
+    className: "bg-primary"
+  }, /*#__PURE__*/React.createElement(Container, {
+    className: "gx-0"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(Form, {
     onSubmit: e => {
       e.preventDefault();
     }
-  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Form.Control, {
-    ref: inputRef,
-    onFocus: () => {
-      setShowSuggestions(text.length > 0);
-    },
-    onBlur: () => {
-      _.delay(() => {
-        setShowSuggestions(false);
-      }, 150);
-    },
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement(Form.Control, {
+    autoFocus: true,
     type: "text",
     placeholder: "Search " + displayText,
     value: text,
     onChange: e => {
       setText(e.target.value);
-    },
-    style: {
-      paddingLeft: "2.5rem",
-      borderRadius: "5px"
+      setSelectedResult({
+        var: null,
+        disease: null
+      });
+      setVarResultsLength(null);
+      setDiseaseResultsLength(null);
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      left: "10px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      pointerEvents: "none",
-      zIndex: 10
-    }
-  }, /*#__PURE__*/React.createElement(SearchIcon, null))), /*#__PURE__*/React.createElement(Dropdown, {
-    show: showSuggestions,
-    onMouseDown: e => {
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "light",
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(CloseIcon, null)))))))))), /*#__PURE__*/React.createElement(Modal.Body, {
+    className: "p-0"
+  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    xs: 12,
+    md: 8
+  }, /*#__PURE__*/React.createElement(Tab.Container, {
+    activeKey: tab,
+    onSelect: k => setTab(k)
+  }, /*#__PURE__*/React.createElement(Row, {
+    className: "w-100"
+  }, /*#__PURE__*/React.createElement(Col, {
+    sm: 3,
+    className: "py-3 border-end"
+  }, /*#__PURE__*/React.createElement(Nav, {
+    variant: "pills",
+    className: "flex-column"
+  }, searchVar && /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    eventKey: FEATURE_TYPE.VAR
+  }, "Genes", " ", !!varResultsLength && `(${varResultsLength})`)), searchDiseases && /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    eventKey: FEATURE_TYPE.DISEASE
+  }, "Diseases", " ", !!diseaseResultsLength && `(${diseaseResultsLength})`)))), /*#__PURE__*/React.createElement(Col, {
+    sm: 9,
+    className: "py-3"
+  }, /*#__PURE__*/React.createElement(Tab.Content, null, searchVar && /*#__PURE__*/React.createElement(Tab.Pane, {
+    eventKey: FEATURE_TYPE.VAR
+  }, /*#__PURE__*/React.createElement(VarSearchResults, {
+    text: text,
+    handleSelect: handleSelect,
+    selectedResult: selectedResult.var,
+    setSelectedResult: item => setSelectedResult(prev => {
+      return {
+        ...prev,
+        var: item
+      };
+    }),
+    setResultsLength: setVarResultsLength
+  })), searchDiseases && /*#__PURE__*/React.createElement(Tab.Pane, {
+    eventKey: FEATURE_TYPE.DISEASE
+  }, /*#__PURE__*/React.createElement(DiseasesSearchResults, {
+    text: text,
+    selectedResult: selectedResult.disease,
+    setSelectedResult: item => setSelectedResult(prev => {
+      return {
+        ...prev,
+        disease: item
+      };
+    }),
+    setResultsLength: setDiseaseResultsLength
+  }))))))), /*#__PURE__*/React.createElement(Col, {
+    xs: 12,
+    md: 4,
+    className: "bg-light p-3 search-modal-info"
+  }, selectedResult[tab] ? tab === FEATURE_TYPE.DISEASE ? /*#__PURE__*/React.createElement(DiseaseInfo, {
+    disease: selectedResult.disease,
+    handleSelect: handleSelect,
+    addVarSet: addVarSet
+  }) : /*#__PURE__*/React.createElement(VarInfo, {
+    varItem: selectedResult.var
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "text-muted"
+  }, "No result selected"))))));
+}
+export function SearchBar(_ref3) {
+  let {
+    searchVar = true,
+    searchDiseases = false
+  } = _ref3;
+  const [text, setText] = useState("");
+  const displayText = [...(searchVar ? ["features"] : []), ...(searchDiseases ? ["diseases"] : [])].join(" and ");
+  const [showModal, setShowModal] = useState(false);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
+    onSubmit: e => {
       e.preventDefault();
-    },
-    onSelect: () => {
-      inputRef.current.blur();
-    }
-  }, /*#__PURE__*/React.createElement(Dropdown.Menu, {
-    style: {
-      width: "90%"
     }
-  }, searchVar && /*#__PURE__*/React.createElement(VarSearchResults, {
-    text: text,
-    setShowSuggestions: setShowSuggestions,
-    handleSelect: handleSelect
-  }), searchVar && searchDiseases && /*#__PURE__*/React.createElement(Dropdown.Divider, null), searchDiseases && /*#__PURE__*/React.createElement(DiseasesSearchResults, {
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement(Form.Control, {
+    onClick: () => setShowModal(true),
+    type: "text",
+    placeholder: "Search " + displayText,
+    defaultValue: text
+  })))), /*#__PURE__*/React.createElement(SearchModal, {
+    show: showModal,
     text: text,
-    setShowSuggestions: setShowSuggestions
-  }))))));
+    setText: setText,
+    displayText: displayText,
+    searchVar: searchVar,
+    searchDiseases: searchDiseases,
+    handleClose: () => setShowModal(false)
+  }));
 }

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

@@ -0,0 +1,165 @@
+import React, { useState, useEffect } from "react";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import _ from "lodash";
+import { Button, ListGroup } from "react-bootstrap";
+import { VAR_SORT } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFetch } from "../../utils/requests";
+import { VarDiseaseInfo } from "../var-list/VarItem";
+export function VarInfo(_ref) {
+  let {
+    varItem
+  } = _ref;
+  const ENDPOINT = "disease/gene";
+  const dataset = useDataset();
+  const [params, setParams] = useState({
+    geneName: varItem.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        geneName: varItem.name
+      };
+    });
+  }, [varItem.name]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false,
+    enabled: !!dataset.diseaseDatasets.length
+  });
+  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData?.length;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h5", null, varItem.name), !!dataset.diseaseDatasets.length && isPending && /*#__PURE__*/React.createElement("p", null, "Loading..."), hasDiseaseInfo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", null, "Associated diseases"), /*#__PURE__*/React.createElement(VarDiseaseInfo, {
+    data: fetchedData
+  })));
+}
+const useVarMean = function (varKeys) {
+  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const ENDPOINT = "matrix/mean";
+  const dataset = useDataset();
+  const [params, setParams] = useState({
+    url: dataset.url,
+    varKeys: _.map(varKeys, v => v.isSet ? {
+      name: v.name,
+      indices: v.vars.map(v => v.index)
+    } : v.index),
+    // obsIndices:
+    varNamesCol: dataset.varNamesCol
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        varKeys: _.map(varKeys, v => v.isSet ? {
+          name: v.name,
+          indices: v.vars.map(v => v.index)
+        } : v.index)
+      };
+    });
+  }, [varKeys]);
+  return useFetch(ENDPOINT, params, {
+    enabled: enabled,
+    refetchOnMount: false
+  });
+};
+
+// ensure nulls are lowest values
+const sortMeans = (i, means) => {
+  return means[i.name] || _.min(_.values(means)) - 1;
+};
+export function DiseaseInfo(_ref2) {
+  let {
+    disease,
+    handleSelect,
+    addVarSet
+  } = _ref2;
+  const ENDPOINT = "disease/genes";
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [diseaseVars, setDiseaseVars] = useState([]);
+  const [sortedDiseaseVars, setSortedDiseaseVars] = useState([]);
+  const [params, setParams] = useState({
+    url: dataset.url,
+    col: dataset.varNamesCol,
+    diseaseDatasets: dataset.diseaseDatasets,
+    diseaseId: disease.id
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        diseaseId: disease.id
+      };
+    });
+  }, [disease]);
+  const diseaseData = useFetch(ENDPOINT, params, {
+    enabled: !!params.diseaseId,
+    refetchOnMount: true
+  });
+  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 === VAR_SORT.MATRIX);
+  useEffect(() => {
+    if (dataset.varSort.disease.sort === VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError) {
+        setSortedDiseaseVars(_.orderBy(diseaseVars, o => {
+          return sortMeans(o, varMeans.fetchedData);
+        }, dataset.varSort.disease.sortOrder));
+      }
+    } else if (dataset.varSort.disease.sort === VAR_SORT.NAME) {
+      setSortedDiseaseVars(_.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 = _.map(sortedDiseaseVars, v => {
+    return /*#__PURE__*/React.createElement(ListGroup.Item, {
+      key: v.gene_id
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "d-flex justify-content-between align-items-center w-100"
+    }, v.name, /*#__PURE__*/React.createElement("div", {
+      className: "d-flex align-items-center gap-1"
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "button",
+      className: "m-0 p-0 px-1",
+      variant: "outline-secondary",
+      title: "Add to list",
+      onClick: () => {
+        handleSelect(dispatch, v);
+      }
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faPlus
+    })))));
+  });
+  const isPending = diseaseData.isPending || varMeans.isPending && dataset.varSort.disease.sort === VAR_SORT.MATRIX;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h5", null, disease.disease_name), /*#__PURE__*/React.createElement("h6", null, "Implicated genes"), isPending ? /*#__PURE__*/React.createElement("p", null, "Loading...") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-end mb-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    title: "Add all as a set",
+    onClick: () => {
+      addVarSet(dispatch, {
+        name: disease.disease_name,
+        vars: _.map(diseaseVars, v => {
+          return {
+            index: v.index,
+            name: v.name,
+            matrix_index: v.matrix_index
+          };
+        })
+      });
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faPlus
+  }), " Add all as a set")), /*#__PURE__*/React.createElement(ListGroup, {
+    className: "overflow-scroll"
+  }, diseaseVarList)));
+}

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

@@ -1,14 +1,18 @@
-import React, { useState, useEffect, useMemo, useDeferredValue } from "react";
+import React, { useDeferredValue, useEffect, useMemo, useState } from "react";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import _ from "lodash";
-import { Dropdown } from "react-bootstrap";
+import { Button, ListGroup } from "react-bootstrap";
 import { useDatasetDispatch } from "../../context/DatasetContext";
 import { useDiseaseSearch, useVarSearch } from "../../utils/search";
 import { VirtualizedList } from "../../utils/VirtualizedList";
 export function VarSearchResults(_ref) {
   let {
     text,
-    setShowSuggestions,
-    handleSelect
+    handleSelect,
+    selectedResult,
+    setSelectedResult,
+    setResultsLength
   } = _ref;
   const [suggestions, setSuggestions] = useState([]);
   const dispatch = useDatasetDispatch();
@@ -33,51 +37,68 @@ export function VarSearchResults(_ref) {
         });
       } else {
         setSuggestions([]);
-        setShowSuggestions(false);
       }
     };
     return _.debounce(setData, 300);
-  }, [setParams, setShowSuggestions]);
+  }, [setParams]);
   useEffect(() => {
     updateParams(text);
   }, [text, updateParams]);
   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.createElement(Dropdown.Item, {
-    key: item.name,
-    as: "button",
+  const ItemComponent = item => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "virtualized-list-wrapper"
+  }, /*#__PURE__*/React.createElement(ListGroup.Item, {
+    key: item,
+    onClick: () => {
+      setSelectedResult(item);
+    },
+    active: selectedResult?.index === item.index
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Add to list",
     disabled: isStale,
     onClick: () => {
       handleSelect(dispatch, item);
-      _.delay(() => {
-        setShowSuggestions(false);
-      }, 150);
     }
-  }, item.name);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Features"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faPlus
+  })))))));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "search-results"
+  }, /*#__PURE__*/React.createElement(ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
   }, deferredData?.length ? /*#__PURE__*/React.createElement(VirtualizedList, {
     getDataAtIndex: getDataAtIndex,
     count: deferredData.length,
     ItemComponent: ItemComponent,
     overscan: 500,
-    estimateSize: 32,
-    maxHeight: "25vh"
-  }) : /*#__PURE__*/React.createElement(Dropdown.Item, {
+    estimateSize: 42,
+    maxHeight: "70vh"
+  }) : /*#__PURE__*/React.createElement(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"))));
 }
 export function DiseasesSearchResults(_ref2) {
   let {
     text,
-    setShowSuggestions
+    selectedResult,
+    setSelectedResult,
+    setResultsLength
   } = _ref2;
   const [suggestions, setSuggestions] = useState([]);
   const dispatch = useDatasetDispatch();
@@ -112,37 +133,41 @@ export function DiseasesSearchResults(_ref2) {
   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.createElement(Dropdown.Item, {
+  const ItemComponent = item => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "virtualized-list-wrapper"
+  }, /*#__PURE__*/React.createElement(ListGroup.Item, {
     key: item.name,
-    as: "button",
-    disabled: isStale,
     onClick: () => {
+      setSelectedResult(item);
       dispatch({
         type: "select.disease",
         id: item.disease_id,
         name: item.disease_name
       });
-      _.delay(() => {
-        setShowSuggestions(false);
-      }, 150);
-    }
-  }, item.disease_name);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Diseases"), /*#__PURE__*/React.createElement("div", {
+    },
+    active: selectedResult?.id === item.id
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/React.createElement("div", null, item.disease_name)))));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "search-results"
+  }, /*#__PURE__*/React.createElement(ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
   }, deferredData?.length ? /*#__PURE__*/React.createElement(VirtualizedList, {
     getDataAtIndex: getDataAtIndex,
     count: deferredData.length,
     ItemComponent: ItemComponent,
     overscan: 250,
     estimateSize: 32,
-    maxHeight: "25vh"
-  }) : /*#__PURE__*/React.createElement(Dropdown.Item, {
+    maxHeight: "70vh"
+  }) : /*#__PURE__*/React.createElement(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/esm/components/var-list/VarItem.js

@@ -8,7 +8,7 @@ import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { Histogram } from "../../utils/Histogram";
-import { useFetch, useDebouncedFetch } from "../../utils/requests";
+import { useDebouncedFetch, useFetch } from "../../utils/requests";
 import { VirtualizedList } from "../../utils/VirtualizedList";
 function VarHistogram(_ref) {
   let {
@@ -75,7 +75,7 @@ function VarDiseaseInfoItem(item) {
     }
   }))));
 }
-function VarDiseaseInfo(_ref2) {
+export function VarDiseaseInfo(_ref2) {
   let {
     data
   } = _ref2;
@@ -255,4 +255,72 @@ export function VarItem(_ref5) {
   } else {
     return null;
   }
+}
+export function SearchResultItem(_ref6) {
+  let {
+    item,
+    isActive,
+    selectVar,
+    removeVar,
+    isDiseaseGene = false,
+    showSetColorEncoding = true,
+    showRemove = true
+  } = _ref6;
+  const ENDPOINT = "disease/gene";
+  const [openInfo, setOpenInfo] = useState(false);
+  const dataset = useDataset();
+  const params = {
+    geneName: item.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  };
+  const isNotInData = item.matrix_index === -1;
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false,
+    enabled: !!dataset.diseaseDatasets.length
+  });
+  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData?.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `d-flex justify-content-between ${hasDiseaseInfo ? "cursor-pointer" : ""}`,
+    onClick: () => {
+      setOpenInfo(o => !o);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, hasDiseaseInfo && /*#__PURE__*/React.createElement(MoreVert, null), showSetColorEncoding && /*#__PURE__*/React.createElement(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.createElement(FontAwesomeIcon, {
+    icon: faDroplet
+  })), (!isDiseaseGene || !showRemove) && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Remove from list",
+    onClick: e => {
+      e.stopPropagation();
+      removeVar();
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTrash
+  }))))), hasDiseaseInfo && /*#__PURE__*/React.createElement(Collapse, {
+    in: openInfo
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt-2 var-disease-info-collapse"
+  }, /*#__PURE__*/React.createElement(VarDiseaseInfo, {
+    data: fetchedData
+  }))));
 }