@haniffalab/cherita-react 0.2.0-dev.2024-09-26.d9293c4c → 0.2.0-dev.2024-09-26.ab815be6

package/dist/components/dotplot/Dotplot.js

@@ -26,12 +26,15 @@ function Dotplot() {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    selectedObs: dataset.selectedObs,
+    obsCol: dataset.selectedObs,
     obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
       var _dataset$selectedObs4;
       return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
     }),
-    selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+      name: i.name,
+      indices: i.vars.map(v => v.index)
+    } : i.index),
     standardScale: dataset.controls.standardScale,
     meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
     expressionCutoff: dataset.controls.expressionCutoff,
@@ -50,12 +53,15 @@ function Dotplot() {
       return {
         ...p,
         url: dataset.url,
-        selectedObs: dataset.selectedObs,
+        obsCol: dataset.selectedObs,
         obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
           var _dataset$selectedObs8;
           return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
         }),
-        selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
         standardScale: dataset.controls.standardScale,
         meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
         expressionCutoff: dataset.controls.expressionCutoff,
@@ -79,7 +85,7 @@ function Dotplot() {
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: !!params.selectedObs && !!params.selectedMultiVar.length
+    enabled: !!params.obsCol && !!params.varKeys.length
   });
   (0, _react.useEffect)(() => {
     if (hasSelections && !isPending && !serverError) {

package/dist/components/dotplot/DotplotControls.js

@@ -19,7 +19,6 @@ function DotplotControls() {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [controls, setControls] = (0, _react.useState)({
-    standardScale: dataset.controls.standardScale,
     expressionCutoff: dataset.controls.expressionCutoff,
     colorAxis: {
       cmin: dataset.controls.colorAxis.cmin,
@@ -32,9 +31,10 @@ function DotplotControls() {
       colorAxis: {
         cmin: dataset.controls.colorAxis.cmin,
         cmax: dataset.controls.colorAxis.cmax
-      }
+      },
+      expressionCutoff: dataset.controls.expressionCutoff
     }));
-  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
+  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax, dataset.controls.expressionCutoff]);
   const colorScaleList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
     active: dataset.controls.colorScale === key,
     onClick: () => {
@@ -45,16 +45,17 @@ function DotplotControls() {
     },
     children: key
   }, key));
-  const standardScaleList = _constants.DOTPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-    active: dataset.controls.standardScale === item.value,
+  const standardScaleList = _lodash.default.values(_constants.DOTPLOT_SCALES).map(scale => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+    active: dataset.controls.scale.dotplot === scale,
     onClick: () => {
       dispatch({
-        type: "set.controls.standardScale",
-        standardScale: item.value
+        type: "set.controls.scale",
+        plot: "dotplot",
+        scale: scale
       });
     },
-    children: item.name
-  }, item.value));
+    children: scale.name
+  }, scale.value));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
@@ -74,7 +75,7 @@ function DotplotControls() {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
             id: "dropdownStandardScale",
             variant: "light",
-            children: dataset.controls.standardScale
+            children: dataset.controls.scale.dotplot.name
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
             children: standardScaleList
           })]

package/dist/components/heatmap/Heatmap.js

@@ -25,12 +25,15 @@ function Heatmap() {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    selectedObs: dataset.selectedObs,
+    obsCol: dataset.selectedObs,
     obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
       var _dataset$selectedObs4;
       return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
     }),
-    selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+      name: i.name,
+      indices: i.vars.map(v => v.index)
+    } : i.index),
     varNamesCol: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {
@@ -44,12 +47,15 @@ function Heatmap() {
       return {
         ...p,
         url: dataset.url,
-        selectedObs: dataset.selectedObs,
+        obsCol: dataset.selectedObs,
         obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
           var _dataset$selectedObs8;
           return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
         }),
-        selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
         varNamesCol: dataset.varNamesCol
       };
     });
@@ -70,7 +76,7 @@ function Heatmap() {
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: !!params.selectedObs && !!params.selectedMultiVar.length
+    enabled: !!params.obsCol && !!params.varKeys.length
   });
   (0, _react.useEffect)(() => {
     if (hasSelections && !isPending && !serverError) {

package/dist/components/matrixplot/Matrixplot.js

@@ -25,12 +25,15 @@ function Matrixplot() {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    selectedObs: dataset.selectedObs,
+    obsCol: dataset.selectedObs,
     obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
       var _dataset$selectedObs4;
       return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
     }),
-    selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+      name: i.name,
+      indices: i.vars.map(v => v.index)
+    } : i.index),
     standardScale: dataset.controls.standardScale,
     varNamesCol: dataset.varNamesCol
   });
@@ -45,12 +48,15 @@ function Matrixplot() {
       return {
         ...p,
         url: dataset.url,
-        selectedObs: dataset.selectedObs,
+        obsCol: dataset.selectedObs,
         obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
           var _dataset$selectedObs8;
           return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
         }),
-        selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
         standardScale: dataset.controls.standardScale,
         varNamesCol: dataset.varNamesCol
       };
@@ -72,7 +78,7 @@ function Matrixplot() {
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: !!params.selectedObs && !!params.selectedMultiVar.length
+    enabled: !!params.obsCol && !!params.varKeys.length
   });
   (0, _react.useEffect)(() => {
     if (hasSelections && !isPending && !serverError) {

package/dist/components/matrixplot/MatrixplotControls.js

@@ -25,16 +25,17 @@ function MatrixplotControls() {
     },
     children: key
   }, key));
-  const standardScaleList = _constants.MATRIXPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-    active: dataset.controls.standardScale === item.name,
+  const standardScaleList = _lodash.default.values(_constants.MATRIXPLOT_SCALES).map(scale => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.controls.scale.matrixplot.name === scale.name,
     onClick: () => {
       dispatch({
-        type: "set.controls.standardScale",
-        standardScale: item.value
+        type: "set.controls.scale",
+        plot: "matrixplot",
+        scale: scale
       });
     },
-    children: item.name
-  }, item.value));
+    children: scale.name
+  }, scale.value));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
@@ -54,7 +55,7 @@ function MatrixplotControls() {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
             id: "dropdownStandardScale",
             variant: "light",
-            children: dataset.controls.standardScale
+            children: dataset.controls.scale.matrixplot.name
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
             children: standardScaleList
           })]

package/dist/components/scatterplot/Scatterplot.js

@@ -39,8 +39,16 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 const EPSILON = 1e-6;
+const meanData = (_i, data) => {
+  return _lodash.default.zipWith(...data, function () {
+    for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
+      values[_key] = arguments[_key];
+    }
+    return _lodash.default.mean(values);
+  });
+};
 function Scatterplot(_ref) {
-  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs7, _dataset$selectedObs11, _dataset$selectedObs12, _dataset$selectedObs13, _dataset$selectedObs15, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _obsmData$data;
+  var _dataset$selectedVar, _dataset$selectedVar2, _dataset$selectedVar3, _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs7, _dataset$selectedObs11, _dataset$selectedObs12, _dataset$selectedObs13, _dataset$selectedObs15, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _obsmData$data;
   let {
     radius = 30
   } = _ref;
@@ -71,23 +79,24 @@ function Scatterplot(_ref) {
     url: dataset.url,
     path: "obsm/" + dataset.selectedObsm
   });
-  const [xParams, setXParams] = (0, _react.useState)({
+  const [xParams, setXParams] = (0, _react.useState)(!dataset.selectedVar ? [] : !((_dataset$selectedVar = dataset.selectedVar) !== null && _dataset$selectedVar !== void 0 && _dataset$selectedVar.isSet) ? [{
     url: dataset.url,
-    path: "X"
-  });
+    path: "X",
+    s: [null, (_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.matrix_index]
+  }] : _lodash.default.map((_dataset$selectedVar3 = dataset.selectedVar) === null || _dataset$selectedVar3 === void 0 ? void 0 : _dataset$selectedVar3.vars, v => {
+    return {
+      url: dataset.url,
+      path: "X",
+      s: [null, v.matrix_index]
+    };
+  }));
   const [obsParams, setObsParams] = (0, _react.useState)({
     url: dataset.url,
     path: "obs/" + ((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name) + (((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.type) === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
   });
   const [labelObsParams, setLabelObsParams] = (0, _react.useState)([]);
-
-  // needs to be wrapped in useMemo as it is an array an could cause an infinite loop otherwise
-  const xSelection = (0, _react.useMemo)(() => {
-    var _dataset$selectedVar;
-    return [null, (_dataset$selectedVar = dataset.selectedVar) === null || _dataset$selectedVar === void 0 ? void 0 : _dataset$selectedVar.matrix_index];
-  }, [dataset.selectedVar]);
   const obsmData = (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
-  const xData = (0, _zarrHelper.useZarr)(xParams, xSelection, _zarrHelper.GET_OPTIONS);
+  const xData = (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, meanData);
   const obsData = (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
   const labelObsData = (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS);
   (0, _react.useEffect)(() => {
@@ -99,14 +108,19 @@ function Scatterplot(_ref) {
     });
   }, [dataset.selectedObsm]);
   (0, _react.useEffect)(() => {
-    setXParams(p => {
-      var _dataset$selectedVar2;
+    var _dataset$selectedVar4, _dataset$selectedVar5, _dataset$selectedVar6;
+    setXParams(!dataset.selectedVar ? [] : !((_dataset$selectedVar4 = dataset.selectedVar) !== null && _dataset$selectedVar4 !== void 0 && _dataset$selectedVar4.isSet) ? [{
+      url: dataset.url,
+      path: "X",
+      s: [null, (_dataset$selectedVar5 = dataset.selectedVar) === null || _dataset$selectedVar5 === void 0 ? void 0 : _dataset$selectedVar5.matrix_index]
+    }] : _lodash.default.map((_dataset$selectedVar6 = dataset.selectedVar) === null || _dataset$selectedVar6 === void 0 ? void 0 : _dataset$selectedVar6.vars, v => {
       return {
-        ...p,
-        s: [null, (_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.matrix_index]
+        url: dataset.url,
+        path: "X",
+        s: [null, v.matrix_index]
       };
-    });
-  }, [dataset.selectedVar]);
+    }));
+  }, [dataset.selectedVar, dataset.url]);
   (0, _react.useEffect)(() => {
     setObsParams(p => {
       var _dataset$selectedObs3, _dataset$selectedObs4;
@@ -132,12 +146,6 @@ function Scatterplot(_ref) {
         url: dataset.url
       };
     });
-    setXParams(p => {
-      return {
-        ...p,
-        url: dataset.url
-      };
-    });
     setObsParams(p => {
       return {
         ...p,
@@ -473,7 +481,7 @@ function Scatterplot(_ref) {
       text.push(getLabel(dataset.selectedVar, (_xData$data = xData.data) === null || _xData$data === void 0 ? void 0 : _xData$data[index], true));
     }
     if (dataset.labelObs.length) {
-      text.push(..._lodash.default.map(labelObsData, (v, k) => {
+      text.push(..._lodash.default.map(labelObsData.data, (v, k) => {
         const labelObs = _lodash.default.find(dataset.labelObs, o => o.name === k);
         return getLabel(labelObs, v[index]);
       }));

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

@@ -12,10 +12,25 @@ var _jsxRuntime = require("react/jsx-runtime");
 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 onVarSelect(dispatch, item) {
+  dispatch({
+    type: "select.var",
+    var: item
+  });
+  dispatch({
+    type: "select.multivar",
+    var: item
+  });
+  dispatch({
+    type: "set.colorEncoding",
+    value: "var"
+  });
+}
 function SearchBar(_ref) {
   let {
     searchVar = true,
-    searchDiseases = false
+    searchDiseases = false,
+    handleSelect = onVarSelect
   } = _ref;
   const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
   const [text, setText] = (0, _react.useState)("");
@@ -62,7 +77,8 @@ function SearchBar(_ref) {
             },
             children: [searchVar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.VarSearchResults, {
               text: text,
-              setShowSuggestions: setShowSuggestions
+              setShowSuggestions: setShowSuggestions,
+              handleSelect: handleSelect
             }), searchVar && searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Divider, {}), searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.DiseasesSearchResults, {
               text: text,
               setShowSuggestions: setShowSuggestions

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

@@ -17,17 +17,18 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function VarSearchResults(_ref) {
   let {
     text,
-    setShowSuggestions
+    setShowSuggestions,
+    handleSelect
   } = _ref;
   const [suggestions, setSuggestions] = (0, _react.useState)([]);
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const {
     setParams,
     data: {
       fetchedData = [],
       isPending,
       serverError
-    },
-    onSelect
+    }
   } = (0, _search.useVarSearch)();
   const deferredData = (0, _react.useDeferredValue)(suggestions);
   const isStale = deferredData !== fetchedData;
@@ -62,7 +63,7 @@ function VarSearchResults(_ref) {
         as: "button",
         disabled: isStale,
         onClick: () => {
-          onSelect(item);
+          handleSelect(dispatch, item);
           _lodash.default.delay(() => {
             setShowSuggestions(false);
           }, 150);
@@ -70,7 +71,7 @@ function VarSearchResults(_ref) {
         children: item.name
       }, item.name);
     });
-  }, [deferredData, isStale, onSelect, setShowSuggestions]);
+  }, [deferredData, dispatch, handleSelect, isStale, setShowSuggestions]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
       children: "Features"
@@ -102,7 +103,6 @@ function DiseasesSearchResults(_ref2) {
       serverError
     }
   } = (0, _search.useDiseaseSearch)();
-  (0, _search.useGetDisease)();
   const deferredData = (0, _react.useDeferredValue)(suggestions);
   const isStale = deferredData !== fetchedData;
   const updateParams = (0, _react.useMemo)(() => {
@@ -137,8 +137,8 @@ function DiseasesSearchResults(_ref2) {
         onClick: () => {
           dispatch({
             type: "select.disease",
-            id: item === null || item === void 0 ? void 0 : item.disease_id,
-            name: item === null || item === void 0 ? void 0 : item.disease_name
+            id: item.disease_id,
+            name: item.disease_name
           });
           _lodash.default.delay(() => {
             setShowSuggestions(false);

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.SingleSelectionItem = SingleSelectionItem;
 exports.VarItem = VarItem;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
@@ -53,9 +54,9 @@ function VarHistogram(_ref) {
     refetchOnMount: false
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "feature-histogram-container m-2",
+    className: "feature-histogram-container",
     children: isPending ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}) : !serverError && fetchedData ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "feature-histogram",
+      className: "feature-histogram m-1",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.SparkLineChart, {
         plotType: "bar",
         data: fetchedData.log10,
@@ -143,7 +144,9 @@ function SingleSelectionItem(_ref4) {
     isActive,
     selectVar,
     removeVar,
-    isDiseaseGene
+    isDiseaseGene = false,
+    showSetColorEncoding = true,
+    showRemove = true
   } = _ref4;
   const ENDPOINT = "disease/gene";
   const [openInfo, setOpenInfo] = (0, _react.useState)(false);
@@ -173,7 +176,7 @@ function SingleSelectionItem(_ref4) {
           className: "d-flex align-items-center gap-1",
           children: [hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.MoreVert, {}), !isDiseaseGene && /*#__PURE__*/(0, _jsxRuntime.jsx)(VarHistogram, {
             item: item
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          }), showSetColorEncoding && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             type: "button",
             variant: isActive ? "primary" : isNotInData ? "outline-secondary" : "outline-primary",
             className: "m-0 p-0 px-1",
@@ -186,7 +189,7 @@ function SingleSelectionItem(_ref4) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
               icon: _freeSolidSvgIcons.faDroplet
             })
-          }, item.matrix_index), !isDiseaseGene && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          }, item.matrix_index), (!isDiseaseGene || !showRemove) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             type: "button",
             className: "m-0 p-0 px-1",
             variant: "outline-secondary",
@@ -230,7 +233,7 @@ function MultipleSelectionItem(_ref5) {
           className: "m-0 p-0 px-1",
           onClick: toggleVar,
           disabled: isNotInData,
-          title: isNotInData ? "Not present in data" : "",
+          title: isNotInData ? "Not present in data" : item.name,
           children: item.name
         }, item.matrix_index)
       })
@@ -247,11 +250,11 @@ function VarItem(_ref6) {
   } = _ref6;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const selectVar = v => {
+  const selectVar = () => {
     if (mode === _constants.SELECTION_MODES.SINGLE) {
       dispatch({
         type: "select.var",
-        var: v
+        var: item
       });
       dispatch({
         type: "set.colorEncoding",
@@ -260,52 +263,52 @@ function VarItem(_ref6) {
     } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
       dispatch({
         type: "select.multivar",
-        var: v
+        var: item
       });
     }
   };
-  const removeVar = v => {
+  const removeVar = () => {
     setVarButtons(b => {
-      return b.filter(i => i.name !== v.name);
+      return b.filter(i => i.name !== item.name);
     });
     if (mode === _constants.SELECTION_MODES.SINGLE) {
-      if (active === v.matrix_index) {
+      if (active === item.matrix_index) {
         dispatch({
-          type: "deselect.var"
+          type: "reset.var"
         });
       }
     } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      if (active.includes(v.matrix_index)) {
+      if (active.includes(item.matrix_index)) {
         dispatch({
           type: "deselect.multivar",
-          var: v
+          var: item
         });
       }
     }
   };
-  const toggleVar = v => {
-    if (active.includes(v.matrix_index)) {
+  const toggleVar = () => {
+    if (active.includes(item.matrix_index)) {
       dispatch({
         type: "deselect.multivar",
-        var: v
+        var: item
       });
     } else {
-      selectVar(v);
+      selectVar(item);
     }
   };
   if (item && mode === _constants.SELECTION_MODES.SINGLE) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(SingleSelectionItem, {
       item: item,
       isActive: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && active === item.matrix_index,
-      selectVar: () => selectVar(item),
-      removeVar: () => removeVar(item),
+      selectVar: selectVar,
+      removeVar: removeVar,
       isDiseaseGene: isDiseaseGene
     });
   } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultipleSelectionItem, {
       item: item,
       isActive: item.matrix_index !== -1 && _lodash.default.includes(active, item.matrix_index),
-      toggleVar: () => toggleVar(item)
+      toggleVar: toggleVar
     });
   } else {
     return null;