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

package/dist/components/scatterplot/Scatterplot.js

@@ -19,10 +19,12 @@ var _SpatialControls = require("./SpatialControls");
 var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
 var _zarrHelper = require("../../helpers/zarr-helper");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
+var _string = require("../../utils/string");
 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); }
@@ -36,16 +38,19 @@ const INITIAL_VIEW_STATE = {
   pitch: 0,
   bearing: 0
 };
+const EPSILON = 1e-6;
 function Scatterplot(_ref) {
-  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs6, _dataset$selectedObs8, _dataset$selectedObs10, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _obsmData$data;
+  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;
   let {
     radius = 30
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const filterDispatch = (0, _FilterContext.useFilteredDataDispatch)();
   const {
     getColor
   } = (0, _colorHelper.useColor)();
+  const deckRef = (0, _react.useRef)(null);
   const [viewState, setViewState] = (0, _react.useState)(INITIAL_VIEW_STATE);
   const [isRendering, setIsRendering] = (0, _react.useState)(true);
   const [data, setData] = (0, _react.useState)({
@@ -72,7 +77,7 @@ function Scatterplot(_ref) {
   });
   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.CONTINUOUS ? "" : "/codes")
+    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)([]);
 
@@ -107,7 +112,7 @@ function Scatterplot(_ref) {
       var _dataset$selectedObs3, _dataset$selectedObs4;
       return {
         ...p,
-        path: "obs/" + ((_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.name) + (((_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.type) === _constants.OBS_TYPES.CONTINUOUS ? "" : "/codes")
+        path: "obs/" + ((_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.name) + (((_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.type) === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
       };
     });
   }, [dataset.selectedObs]);
@@ -115,7 +120,7 @@ function Scatterplot(_ref) {
     setLabelObsParams(_lodash.default.map(dataset.labelObs, obs => {
       return {
         url: dataset.url,
-        path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CONTINUOUS ? "" : "/codes"),
+        path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
         key: obs.name
       };
     }));
@@ -145,6 +150,7 @@ function Scatterplot(_ref) {
 
   (0, _react.useEffect)(() => {
     if (!obsmData.isPending && !obsmData.serverError) {
+      var _deckRef$current, _deckRef$current2;
       setIsRendering(true);
       setData(d => {
         return {
@@ -157,7 +163,10 @@ function Scatterplot(_ref) {
         latitude,
         longitude,
         zoom
-      } = mapHelper.fitBounds(obsmData.data);
+      } = mapHelper.fitBounds(obsmData.data, {
+        width: deckRef === null || deckRef === void 0 || (_deckRef$current = deckRef.current) === null || _deckRef$current === void 0 || (_deckRef$current = _deckRef$current.deck) === null || _deckRef$current === void 0 ? void 0 : _deckRef$current.width,
+        height: deckRef === null || deckRef === void 0 || (_deckRef$current2 = deckRef.current) === null || _deckRef$current2 === void 0 || (_deckRef$current2 = _deckRef$current2.deck) === null || _deckRef$current2 === void 0 ? void 0 : _deckRef$current2.height
+      });
       setViewState(v => {
         return {
           ...v,
@@ -176,12 +185,16 @@ function Scatterplot(_ref) {
       });
     }
   }, [dataset.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
-  const bounds = (0, _react.useMemo)(() => {
+  const getBounds = (0, _react.useCallback)(() => {
+    var _deckRef$current3, _deckRef$current4;
     const {
       latitude,
       longitude,
       zoom
-    } = new _mapHelper.MapHelper().fitBounds(data.positions);
+    } = new _mapHelper.MapHelper().fitBounds(data.positions, {
+      width: deckRef === null || deckRef === void 0 || (_deckRef$current3 = deckRef.current) === null || _deckRef$current3 === void 0 || (_deckRef$current3 = _deckRef$current3.deck) === null || _deckRef$current3 === void 0 ? void 0 : _deckRef$current3.width,
+      height: deckRef === null || deckRef === void 0 || (_deckRef$current4 = deckRef.current) === null || _deckRef$current4 === void 0 || (_deckRef$current4 = _deckRef$current4.deck) === null || _deckRef$current4 === void 0 ? void 0 : _deckRef$current4.height
+    });
     return {
       latitude,
       longitude,
@@ -247,17 +260,37 @@ function Scatterplot(_ref) {
   }, [dataset.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, dataset.sliceBy.obs]);
   const isCategorical = (0, _react.useMemo)(() => {
     if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      var _dataset$selectedObs5;
-      return ((_dataset$selectedObs5 = dataset.selectedObs) === null || _dataset$selectedObs5 === void 0 ? void 0 : _dataset$selectedObs5.type) === _constants.OBS_TYPES.CATEGORICAL;
+      var _dataset$selectedObs5, _dataset$selectedObs6;
+      return ((_dataset$selectedObs5 = dataset.selectedObs) === null || _dataset$selectedObs5 === void 0 ? void 0 : _dataset$selectedObs5.type) === _constants.OBS_TYPES.CATEGORICAL || ((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.type) === _constants.OBS_TYPES.BOOLEAN;
     } else {
       return false;
     }
-  }, [dataset.colorEncoding, (_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.type]);
+  }, [dataset.colorEncoding, (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.type]);
+  const isInBins = (v, binEdges, indices) => {
+    const lastEdge = _lodash.default.last(binEdges);
+    const allButLastEdges = _lodash.default.initial(binEdges);
+    // add epsilon to last edge to include the last value
+    const modifiedBinEdges = [...allButLastEdges, [lastEdge[0], lastEdge[1] + EPSILON]];
+    const binIndices = _lodash.default.difference(_lodash.default.range(binEdges.length), indices);
+    const ranges = _lodash.default.at(modifiedBinEdges, binIndices);
+    return _lodash.default.some(ranges, range => _lodash.default.inRange(v, ...range));
+  };
   const isInSlice = (0, _react.useCallback)((index, values, positions) => {
+    var _dataset$selectedObs9, _dataset$selectedObs10;
     let inSlice = true;
-    if ((dataset.sliceBy.obs || isCategorical) && values) {
-      var _dataset$selectedObs7;
-      inSlice &= !_lodash.default.includes((_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit, values[index]);
+    if (isCategorical && values) {
+      var _dataset$selectedObs8;
+      inSlice &= !_lodash.default.includes((_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.omit, values[index]);
+    } else if ((dataset.sliceBy.obs || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_dataset$selectedObs9 = dataset.selectedObs) === null || _dataset$selectedObs9 === void 0 ? void 0 : _dataset$selectedObs9.type) === _constants.OBS_TYPES.CONTINUOUS) && !!((_dataset$selectedObs10 = dataset.selectedObs) !== null && _dataset$selectedObs10 !== void 0 && _dataset$selectedObs10.omit.length) && values) {
+      if (dataset.selectedObs.type === _constants.OBS_TYPES.CATEGORICAL) {
+        inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, values[index]);
+      } else if (dataset.selectedObs.type === _constants.OBS_TYPES.CONTINUOUS) {
+        if (Number.isNaN(values[index])) {
+          inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, -1);
+        } else {
+          inSlice &= isInBins(values[index], dataset.selectedObs.bins.binEdges, _lodash.default.without(dataset.selectedObs.omit, -1));
+        }
+      }
     }
     if (dataset.sliceBy.polygons && positions) {
       inSlice &= _lodash.default.some(features === null || features === void 0 ? void 0 : features.features, (_f, i) => {
@@ -265,7 +298,7 @@ function Scatterplot(_ref) {
       });
     }
     return inSlice;
-  }, [(_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.omit, dataset.sliceBy.obs, dataset.sliceBy.polygons, features.features, isCategorical]);
+  }, [dataset.colorEncoding, (_dataset$selectedObs11 = dataset.selectedObs) === null || _dataset$selectedObs11 === void 0 || (_dataset$selectedObs11 = _dataset$selectedObs11.bins) === null || _dataset$selectedObs11 === void 0 ? void 0 : _dataset$selectedObs11.binEdges, (_dataset$selectedObs12 = dataset.selectedObs) === null || _dataset$selectedObs12 === void 0 ? void 0 : _dataset$selectedObs12.omit, (_dataset$selectedObs13 = dataset.selectedObs) === null || _dataset$selectedObs13 === void 0 ? void 0 : _dataset$selectedObs13.type, dataset.sliceBy.obs, dataset.sliceBy.polygons, features.features, isCategorical]);
   const {
     filteredIndices,
     valueMin,
@@ -293,8 +326,8 @@ function Scatterplot(_ref) {
         slicedLength: filtered.length
       };
     } else if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      var _dataset$selectedObs9;
-      const isContinuous = ((_dataset$selectedObs9 = dataset.selectedObs) === null || _dataset$selectedObs9 === void 0 ? void 0 : _dataset$selectedObs9.type) === _constants.OBS_TYPES.CONTINUOUS;
+      var _dataset$selectedObs14;
+      const isContinuous = ((_dataset$selectedObs14 = dataset.selectedObs) === null || _dataset$selectedObs14 === void 0 ? void 0 : _dataset$selectedObs14.type) === _constants.OBS_TYPES.CONTINUOUS;
       const {
         filtered,
         filteredIndices
@@ -322,7 +355,13 @@ function Scatterplot(_ref) {
         slicedLength: data.values.length
       };
     }
-  }, [data.positions, data.sliceValues, data.values, dataset.colorEncoding, (_dataset$selectedObs10 = dataset.selectedObs) === null || _dataset$selectedObs10 === void 0 ? void 0 : _dataset$selectedObs10.type, isInSlice]);
+  }, [data.positions, data.sliceValues, data.values, dataset.colorEncoding, (_dataset$selectedObs15 = dataset.selectedObs) === null || _dataset$selectedObs15 === void 0 ? void 0 : _dataset$selectedObs15.type, isInSlice]);
+  (0, _react.useEffect)(() => {
+    filterDispatch({
+      type: "set.obs.indices",
+      indices: dataset.sliceBy.obs || dataset.sliceBy.polygons ? filteredIndices : null
+    });
+  }, [dataset.sliceBy.obs, dataset.sliceBy.polygons, filterDispatch, filteredIndices]);
   (0, _react.useEffect)(() => {
     dispatch({
       type: "set.controls.valueRange",
@@ -408,20 +447,40 @@ function Scatterplot(_ref) {
     }
     setSelectedFeatureIndexes(f => info.object ? info.layer.id === "cherita-layer-draw" ? [info.index] : f : []);
   }
+  const getLabel = function (o, v) {
+    let isVar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isVar || o.type === _constants.OBS_TYPES.CONTINUOUS) {
+      return "".concat(o.name, ": ").concat((0, _string.prettyNumerical)(parseFloat(v)));
+    } else {
+      return "".concat(o.name, ": ").concat(o.codesMap[v]);
+    }
+  };
   const getTooltip = _ref4 => {
     let {
       object,
       index
     } = _ref4;
-    return object && dataset.labelObs.length && {
-      text: _lodash.default.map(labelObsData, (v, k) => {
+    if (!object) return;
+    const text = [];
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs && !_lodash.default.some(dataset.labelObs, {
+      name: dataset.selectedObs.name
+    })) {
+      var _obsData$data;
+      text.push(getLabel(dataset.selectedObs, (_obsData$data = obsData.data) === null || _obsData$data === void 0 ? void 0 : _obsData$data[index]));
+    }
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && dataset.selectedVar) {
+      var _xData$data;
+      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) => {
         const labelObs = _lodash.default.find(dataset.labelObs, o => o.name === k);
-        if (labelObs.type === _constants.OBS_TYPES.CONTINUOUS) {
-          return "".concat(k, ": ").concat(parseFloat(v === null || v === void 0 ? void 0 : v[index]).toLocaleString());
-        } else {
-          return "".concat(k, ": ").concat(labelObs.codesMap[v === null || v === void 0 ? void 0 : v[index]]);
-        }
-      }).join("\n")
+        return getLabel(labelObs, v[index]);
+      }));
+    }
+    if (!text.length) return;
+    return {
+      text: text.length ? _lodash.default.compact(text).join("\n") : null
     };
   };
   const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
@@ -448,14 +507,15 @@ function Scatterplot(_ref) {
           isDragging
         } = _ref5;
         return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
-      }
+      },
+      ref: deckRef
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
       mode: mode,
       setMode: setMode,
       features: features,
       setFeatures: setFeatures,
       selectedFeatureIndexes: selectedFeatureIndexes,
-      resetBounds: () => setViewState(bounds),
+      resetBounds: () => setViewState(getBounds()),
       increaseZoom: () => setViewState(v => ({
         ...v,
         zoom: v.zoom + 1
@@ -464,20 +524,20 @@ function Scatterplot(_ref) {
         ...v,
         zoom: v.zoom - 1
       }))
-    }), error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "cherita-alert",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
-        variant: "danger",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-          icon: _freeSolidSvgIcons.faTriangleExclamation
-        }), "Error loading data"]
-      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "cherita-spatial-footer",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
-        mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
-        obsLength: parseInt((_obsmData$data = obsmData.data) === null || _obsmData$data === void 0 ? void 0 : _obsmData$data.length),
-        slicedLength: parseInt(slicedLength)
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "cherita-toolbox-footer",
+        children: [error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+          variant: "danger",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faTriangleExclamation
+          }), "\xA0Error loading data"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
+          mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
+          obsLength: parseInt((_obsmData$data = obsmData.data) === null || _obsmData$data === void 0 ? void 0 : _obsmData$data.length),
+          slicedLength: parseInt(slicedLength)
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
         isCategorical: isCategorical,
         min: min,

package/dist/components/scatterplot/Toolbox.js

@@ -9,6 +9,7 @@ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
+var _string = require("../../utils/string");
 var _ObsmList = require("../obsm-list/ObsmList");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,10 +29,10 @@ function Toolbox(_ref) {
         }), " ", mode]
       }), (mode || !Number.isNaN(obsLength)) && (mode !== null && !Number.isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
         size: "sm",
-        children: [slicedLength.toLocaleString(), " out of", " ", obsLength.toLocaleString(), " cells"]
+        children: [(0, _string.prettyNumerical)(slicedLength), " out of", " ", (0, _string.prettyNumerical)(obsLength), " cells"]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
         size: "sm",
-        children: [obsLength.toLocaleString(), " cells"]
+        children: [(0, _string.prettyNumerical)(obsLength), " cells"]
       }))]
     })
   });

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

@@ -0,0 +1,313 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VarItem = VarItem;
+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 _xCharts = require("@mui/x-charts");
+var _colorPalettes = require("@mui/x-charts/colorPalettes");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
+var _requests = require("../../utils/requests");
+var _string = require("../../utils/string");
+var _VirtualizedList = require("../../utils/VirtualizedList");
+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 VarHistogram(_ref) {
+  var _fetchedData$bin_edge;
+  let {
+    item
+  } = _ref;
+  const ENDPOINT = "var/histograms";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    var_index: item.matrix_index,
+    obs_indices: isSliced && Array.from(filteredData.obsIndices || [])
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return {
+        ...p,
+        obs_indices: isSliced && Array.from(filteredData.obsIndices || [])
+      };
+    });
+  }, [filteredData.obsIndices, isSliced]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "feature-histogram-container m-2",
+    children: isPending ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}) : !serverError && fetchedData ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "feature-histogram",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.SparkLineChart, {
+        plotType: "bar",
+        data: fetchedData.log10,
+        margin: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        colors: isSliced ? _colorPalettes.mangoFusionPalette : _colorPalettes.blueberryTwilightPalette,
+        showHighlight: true,
+        showTooltip: true,
+        valueFormatter: (v, _ref2) => {
+          let {
+            dataIndex
+          } = _ref2;
+          return "".concat((0, _string.prettyNumerical)(fetchedData.hist[dataIndex]));
+        },
+        xAxis: {
+          data: _lodash.default.range((_fetchedData$bin_edge = fetchedData.bin_edges) === null || _fetchedData$bin_edge === void 0 ? void 0 : _fetchedData$bin_edge.length) || null,
+          valueFormatter: v => "Bin [".concat((0, _string.prettyNumerical)(fetchedData.bin_edges[v][0]), ", ").concat((0, _string.prettyNumerical)(fetchedData.bin_edges[v][1])).concat(v === fetchedData.bin_edges.length - 1 ? "]" : ")")
+        },
+        slotProps: {
+          popper: {
+            className: "feature-histogram-tooltip"
+          }
+        }
+      })
+    }) : null
+  });
+}
+function VarDiseaseInfoItem(item) {
+  var _item$metadata;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+    className: "feature-disease-info",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [item.disease_name, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
+        striped: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: "Confidence"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: item.confidence || "unknown"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("td", {
+              children: ["Organ", item.organs.length > 1 ? "s" : ""]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: item.organs.map(o => o.name).join(", ")
+            })]
+          }), !!((_item$metadata = item.metadata) !== null && _item$metadata !== void 0 && _item$metadata.length) && item.metadata.map(m => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                children: m.key
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                children: m.value
+              })]
+            });
+          })]
+        })
+      })]
+    })
+  });
+}
+function VarDiseaseInfo(_ref3) {
+  let {
+    data
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.VirtualizedList, {
+        getDataAtIndex: index => data[index],
+        count: data.length,
+        estimateSize: 70,
+        maxHeight: "40vh",
+        ItemComponent: VarDiseaseInfoItem
+      })
+    })
+  });
+}
+function SingleSelectionItem(_ref4) {
+  let {
+    item,
+    isActive,
+    selectVar,
+    removeVar,
+    isDiseaseGene
+  } = _ref4;
+  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);
+  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData.length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "d-flex justify-content-between ".concat(hasDiseaseInfo ? "cursor-pointer" : ""),
+      onClick: () => {
+        setOpenInfo(o => !o);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "d-flex justify-content-between align-items-center w-100",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: item.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          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, {
+            type: "button",
+            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",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faDroplet
+            })
+          }, item.matrix_index), !isDiseaseGene && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+            type: "button",
+            className: "m-0 p-0 px-1",
+            variant: "outline-secondary",
+            title: "Remove from list",
+            onClick: e => {
+              e.stopPropagation();
+              removeVar();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faTrash
+            })
+          })]
+        })]
+      })
+    }), hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Collapse, {
+      in: openInfo,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "mt-2",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VarDiseaseInfo, {
+          data: fetchedData
+        })
+      })
+    })]
+  });
+}
+function MultipleSelectionItem(_ref5) {
+  let {
+    item,
+    isActive,
+    toggleVar
+  } = _ref5;
+  const isNotInData = item.matrix_index === -1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "d-flex",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          type: "button",
+          variant: isActive ? "primary" : "outline-primary",
+          className: "m-0 p-0 px-1",
+          onClick: toggleVar,
+          disabled: isNotInData,
+          title: isNotInData ? "Not present in data" : "",
+          children: item.name
+        }, item.matrix_index)
+      })
+    })
+  });
+}
+function VarItem(_ref6) {
+  let {
+    item,
+    active,
+    setVarButtons,
+    mode = _constants.SELECTION_MODES.SINGLE,
+    isDiseaseGene = false
+  } = _ref6;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const selectVar = v => {
+    if (mode === _constants.SELECTION_MODES.SINGLE) {
+      dispatch({
+        type: "select.var",
+        var: v
+      });
+      dispatch({
+        type: "set.colorEncoding",
+        value: "var"
+      });
+    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+      dispatch({
+        type: "select.multivar",
+        var: v
+      });
+    }
+  };
+  const removeVar = v => {
+    setVarButtons(b => {
+      return b.filter(i => i.name !== v.name);
+    });
+    if (mode === _constants.SELECTION_MODES.SINGLE) {
+      if (active === v.matrix_index) {
+        dispatch({
+          type: "deselect.var"
+        });
+      }
+    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+      if (active.includes(v.matrix_index)) {
+        dispatch({
+          type: "deselect.multivar",
+          var: v
+        });
+      }
+    }
+  };
+  const toggleVar = v => {
+    if (active.includes(v.matrix_index)) {
+      dispatch({
+        type: "deselect.multivar",
+        var: v
+      });
+    } else {
+      selectVar(v);
+    }
+  };
+  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),
+      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)
+    });
+  } else {
+    return null;
+  }
+}