@haniffalab/cherita-react 1.2.0-dev.2025-04-29.181538d6 → 1.2.0-dev.2025-05-16.4367ee63

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
+  }))));
 }

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

@@ -10,13 +10,13 @@ var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
+var _VarItem = require("./VarItem");
+var _VarListToolbar = require("./VarListToolbar");
+var _VarSet = require("./VarSet");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _VarItem = require("./VarItem");
-var _VarListToolbar = require("./VarListToolbar");
-var _VarSet = require("./VarSet");
 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; }
@@ -54,93 +54,11 @@ const useVarMean = function (varKeys) {
 const sortMeans = (i, means) => {
   return means[i.name] || _lodash.default.min(_lodash.default.values(means)) - 1;
 };
-
-// @TODO: display where disease data comes from
-// add to disease dataset metadata
-function DiseaseVarList(_ref) {
-  let {
-    makeListItem
-  } = _ref;
-  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,
-    diseaseId: dataset.selectedDisease?.id,
-    diseaseDatasets: dataset.diseaseDatasets
-  });
-  (0, _react.useEffect)(() => {
-    setParams(p => {
-      return {
-        ...p,
-        diseaseId: dataset.selectedDisease?.id
-      };
-    });
-  }, [dataset.selectedDisease]);
-  const diseaseData = (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: !!params.diseaseId,
-    refetchOnMount: false
-  });
-  (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, item => {
-    return makeListItem(item, true);
-  });
-  const isPending = diseaseData.isPending || varMeans.isPending && dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, dataset.selectedDisease && (!isPending && !diseaseVars?.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between mt-3"
-  }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
-    variant: "light"
-  }, "No disease genes found.")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between my-2"
-  }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes"), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-    "aria-label": "Feature options",
-    size: "sm"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "info",
-    onClick: () => {
-      dispatch({
-        type: "reset.disease"
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faTimes,
-    className: "me-1"
-  }), "Clear"))), /*#__PURE__*/_react.default.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, {
-    varType: "disease"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "position-relative"
-  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
-    variant: "flush",
-    className: "cherita-list"
-  }, diseaseVarList)))));
-}
-function VarNamesList(_ref2) {
+function VarNamesList(_ref) {
   let {
     mode = _constants.SELECTION_MODES.SINGLE,
-    displayName = "genes",
-    showDiseaseVarList = true
-  } = _ref2;
+    displayName = "genes"
+  } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar ? _lodash.default.unionWith([dataset.selectedVar], dataset.varSets, _lodash.default.isEqual) : [...dataset.varSets] : [...dataset.selectedMultiVar, ...dataset.varSets]);
@@ -294,7 +212,5 @@ function VarNamesList(_ref2) {
   }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
     variant: "flush",
     className: "cherita-list"
-  }, varList)))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDiseaseVarList && /*#__PURE__*/_react.default.createElement(DiseaseVarList, {
-    makeListItem: makeListItem
-  }))));
+  }, varList))))));
 }

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

@@ -7,13 +7,12 @@ exports.VarSet = VarSet;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _iconsMaterial = require("@mui/icons-material");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
+var _VarItem = require("./VarItem");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _SearchBar = require("../search-bar/SearchBar");
-var _VarItem = require("./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; }
@@ -32,10 +31,11 @@ function SingleSelectionSet(_ref) {
     isActive,
     selectSet,
     removeSet,
-    removeSetVar,
-    showSearchBar = true
+    removeSetVar
   } = _ref;
   const [openSet, setOpenSet] = (0, _react.useState)(false);
+  const [showModal, setShowModal] = (0, _react.useState)(false);
+  const [searchText, setSearchText] = (0, _react.useState)("");
   const varList = set.vars.length ? _lodash.default.map(set.vars, v => {
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
       key: v.name
@@ -54,16 +54,38 @@ function SingleSelectionSet(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "d-flex justify-content-between align-items-center w-100"
-  }, /*#__PURE__*/_react.default.createElement("div", null, set.name), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ellipsis-text",
+    title: set.name
+  }, set.name), /*#__PURE__*/_react.default.createElement("div", {
     className: "d-flex align-items-center gap-1"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
     placement: "top",
     overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, null, "This set represents the mean value of its features")
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faCircleInfo
-  })), /*#__PURE__*/_react.default.createElement(_iconsMaterial.List, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    variant: "outline-primary",
+    className: "m-0 p-0 px-1",
+    disabled: !set.vars.length,
+    title: "Open set"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: openSet ? _freeSolidSvgIcons.faChevronUp : _freeSolidSvgIcons.faChevronDown
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    variant: "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: e => {
+      e.stopPropagation();
+      setShowModal(true);
+    },
+    disabled: !set.vars.length,
+    title: "Add to set"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faPlus
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     type: "button",
-    key: set.name,
     variant: isActive ? "primary" : "outline-primary",
     className: "m-0 p-0 px-1",
     onClick: e => {
@@ -89,17 +111,21 @@ function SingleSelectionSet(_ref) {
     in: openSet
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "mt-2"
-  }, showSearchBar &&
-  /*#__PURE__*/
-  // @TODO: fix how results are displayed, should be placed on top of parent components
-  _react.default.createElement(_SearchBar.SearchBar, {
-    handleSelect: (d, i) => addVarToSet(d, set, i)
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "mx-2"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
     variant: "flush",
-    className: "cherita-list"
-  }, varList)))));
+    className: "cherita-list var-set-list"
+  }, varList))), /*#__PURE__*/_react.default.createElement(_SearchBar.SearchModal, {
+    show: showModal,
+    handleClose: () => setShowModal(false),
+    text: searchText,
+    setText: setSearchText,
+    displayText: "features",
+    handleSelect: (d, i) => {
+      addVarToSet(d, set, i);
+    },
+    searchVar: true,
+    searchDiseases: false
+  }));
 }
 function MultipleSelectionSet(_ref2) {
   let {