@haniffalab/cherita-react 0.2.0-dev.2024-12-16.ab9c5057 → 0.2.0-dev.2024-12-16.67617f27

package/dist/components/scatterplot/Scatterplot.js

@@ -11,17 +11,16 @@ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _editModes = require("@nebula.gl/edit-modes");
 var _layers2 = require("@nebula.gl/layers");
-var _turf = require("@turf/turf");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _Legend = require("./Legend");
 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 _Filter = require("../../utils/Filter");
+var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _string = require("../../utils/string");
 var _zarrData = require("../../utils/zarrData");
@@ -38,14 +37,12 @@ const INITIAL_VIEW_STATE = {
   pitch: 0,
   bearing: 0
 };
-const EPSILON = 1e-6;
 function Scatterplot(_ref) {
   let {
     radius = 30
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const filterDispatch = (0, _FilterContext.useFilteredDataDispatch)();
   const {
     getColor
   } = (0, _colorHelper.useColor)();
@@ -72,6 +69,12 @@ function Scatterplot(_ref) {
   const labelObsData = (0, _zarrData.useLabelObsData)();
   // @TODO: assert length of obsmData, xData, obsData is equal
 
+  const {
+    filteredIndices,
+    valueMin,
+    valueMax,
+    slicedLength
+  } = (0, _Filter.useFilter)(data, features);
   (0, _react.useEffect)(() => {
     if (!obsmData.isPending && !obsmData.serverError) {
       setIsRendering(true);
@@ -187,101 +190,6 @@ function Scatterplot(_ref) {
       return false;
     }
   }, [dataset.colorEncoding, dataset.selectedObs?.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) => {
-    let inSlice = true;
-    if (isCategorical && values) {
-      inSlice &= !_lodash.default.includes(dataset.selectedObs?.omit, values[index]);
-    } else if ((dataset.sliceBy.obs || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS) && !!dataset.selectedObs?.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 (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?.features, (_f, i) => {
-        return (0, _turf.booleanPointInPolygon)((0, _turf.point)([positions[index][0], positions[index][1]]), features.features[i]);
-      });
-    }
-    return inSlice;
-  }, [dataset.colorEncoding, dataset.selectedObs?.bins?.binEdges, dataset.selectedObs?.omit, dataset.selectedObs?.type, dataset.sliceBy.obs, dataset.sliceBy.polygons, features.features, isCategorical]);
-
-  // @TODO: abstract filtering out of this component, maybe in FilterContext ?
-  const {
-    filteredIndices,
-    valueMin,
-    valueMax,
-    slicedLength
-  } = (0, _react.useMemo)(() => {
-    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
-      const {
-        filtered,
-        filteredIndices
-      } = _lodash.default.reduce(data.values, (acc, v, i) => {
-        if (isInSlice(i, data.sliceValues, data.positions)) {
-          acc.filtered.push(v);
-          acc.filteredIndices.add(i);
-        }
-        return acc;
-      }, {
-        filtered: [],
-        filteredIndices: new Set()
-      });
-      return {
-        filteredIndices: filteredIndices,
-        valueMin: _lodash.default.min(filtered),
-        valueMax: _lodash.default.max(filtered),
-        slicedLength: filtered.length
-      };
-    } else if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      const isContinuous = dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS;
-      const {
-        filtered,
-        filteredIndices
-      } = _lodash.default.reduce(data.values, (acc, v, i) => {
-        if (isInSlice(i, data.values, data.positions)) {
-          acc.filtered.push(v);
-          acc.filteredIndices.add(i);
-        }
-        return acc;
-      }, {
-        filtered: [],
-        filteredIndices: new Set()
-      });
-      return {
-        filteredIndices: filteredIndices,
-        valueMin: _lodash.default.min(isContinuous ? filtered : data.values),
-        valueMax: _lodash.default.max(isContinuous ? filtered : data.values),
-        slicedLength: filtered.length
-      };
-    } else {
-      return {
-        filteredIndices: null,
-        valueMin: _lodash.default.min(data.values),
-        valueMax: _lodash.default.max(data.values),
-        slicedLength: data.values.length
-      };
-    }
-  }, [data.positions, data.sliceValues, data.values, dataset.colorEncoding, dataset.selectedObs?.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",
@@ -300,8 +208,21 @@ function Scatterplot(_ref) {
       index
     } = _ref2;
     const grayOut = filteredIndices && !filteredIndices.has(index);
-    return getColor((data.values[index] - min) / (max - min), isCategorical, grayOut);
+    return getColor({
+      value: (data.values[index] - min) / (max - min),
+      categorical: isCategorical,
+      grayOut: grayOut
+    });
   }, [data.values, filteredIndices, getColor, isCategorical, max, min]);
+
+  // @TODO: add support for pseudospatial hover to reflect in radius
+  const getRadius = (0, _react.useCallback)((_d, _ref3) => {
+    let {
+      index
+    } = _ref3;
+    const grayOut = filteredIndices && !filteredIndices.has(index);
+    return grayOut ? 1 : 3;
+  }, [filteredIndices]);
   const memoizedLayers = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
       id: "cherita-layer-scatterplot",
@@ -311,21 +232,22 @@ function Scatterplot(_ref) {
       radiusMinPixels: 1,
       getPosition: d => d,
       getFillColor: getFillColor,
-      getRadius: 1,
+      getRadius: getRadius,
       updateTriggers: {
-        getFillColor: getFillColor
+        getFillColor: getFillColor,
+        getRadius: getRadius
       }
     }), new _layers2.EditableGeoJsonLayer({
       id: "cherita-layer-draw",
       data: features,
       mode: mode,
       selectedFeatureIndexes,
-      onEdit: _ref3 => {
+      onEdit: _ref4 => {
         let {
           updatedData,
           editType,
           editContext
-        } = _ref3;
+        } = _ref4;
         setFeatures(updatedData);
         let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
         if (editType === "addFeature") {
@@ -349,7 +271,7 @@ function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, mode, radius, selectedFeatureIndexes]);
+  }, [data.positions, features, getFillColor, getRadius, mode, radius, selectedFeatureIndexes]);
   const layers = (0, _react.useDeferredValue)(mode === _editModes.ViewMode ? memoizedLayers.reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
 
   (0, _react.useEffect)(() => {
@@ -374,11 +296,11 @@ function Scatterplot(_ref) {
       return `${o.name}: ${o.codesMap[v]}`;
     }
   };
-  const getTooltip = _ref4 => {
+  const getTooltip = _ref5 => {
     let {
       object,
       index
-    } = _ref4;
+    } = _ref5;
     if (!object) return;
     const text = [];
     if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs && !_lodash.default.some(dataset.labelObs, {
@@ -396,70 +318,82 @@ function Scatterplot(_ref) {
       }));
     }
     if (!text.length) return;
+    const grayOut = filteredIndices && !filteredIndices.has(index);
     return {
-      text: text.length ? _lodash.default.compact(text).join("\n") : null
+      text: text.length ? _lodash.default.compact(text).join("\n") : null,
+      className: grayOut ? "tooltip-grayout" : "deck-tooltip",
+      style: !grayOut ? {
+        "border-left": `3px solid ${(0, _colorHelper.rgbToHex)(getFillColor(null, {
+          index
+        }))}`
+      } : {
+        "border-left": "none"
+      }
     };
   };
   const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
   const error = dataset.selectedObsm && obsmData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && xData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && obsData.serverError?.length || dataset.labelObs.lengh && labelObsData.serverError?.length;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "cherita-scatterplot",
-    children: [obsmData.isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {
-      disableShrink: true
-    }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.DeckGL, {
-      viewState: viewState,
-      onViewStateChange: e => setViewState(e.viewState),
-      controller: {
-        doubleClickZoom: mode === _editModes.ViewMode
-      },
-      layers: layers,
-      onClick: onLayerClick,
-      getTooltip: getTooltip,
-      onAfterRender: () => {
-        setIsRendering(false);
-      },
-      useDevicePixels: false,
-      getCursor: _ref5 => {
-        let {
-          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(getBounds()),
-      increaseZoom: () => setViewState(v => ({
-        ...v,
-        zoom: v.zoom + 1
-      })),
-      decreaseZoom: () => setViewState(v => ({
-        ...v,
-        zoom: v.zoom - 1
-      }))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "cherita-spatial-footer",
-      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?.length),
-          slicedLength: parseInt(slicedLength)
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "cherita-container-scatterplot",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "cherita-scatterplot",
+      children: [obsmData.isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {
+        disableShrink: true
+      }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.DeckGL, {
+        viewState: viewState,
+        onViewStateChange: e => setViewState(e.viewState),
+        controller: {
+          doubleClickZoom: mode === _editModes.ViewMode
+        },
+        layers: layers,
+        onClick: onLayerClick,
+        getTooltip: getTooltip,
+        onAfterRender: () => {
+          setIsRendering(false);
+        },
+        useDevicePixels: false,
+        getCursor: _ref6 => {
+          let {
+            isDragging
+          } = _ref6;
+          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(getBounds()),
+        increaseZoom: () => setViewState(v => ({
+          ...v,
+          zoom: v.zoom + 1
+        })),
+        decreaseZoom: () => setViewState(v => ({
+          ...v,
+          zoom: v.zoom - 1
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "cherita-spatial-footer",
+        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?.length),
+            slicedLength: parseInt(slicedLength)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+          isCategorical: isCategorical,
+          min: min,
+          max: max
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
-        isCategorical: isCategorical,
-        min: min,
-        max: max
       })]
-    })]
+    })
   });
 }

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

@@ -9,16 +9,13 @@ 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 _Histogram = require("../../utils/Histogram");
 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 }; }
@@ -35,13 +32,13 @@ function VarHistogram(_ref) {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     varKey: item.matrix_index,
-    obsIndices: isSliced && Array.from(filteredData.obsIndices || [])
+    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
         ...p,
-        obsIndices: isSliced && Array.from(filteredData.obsIndices || [])
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
       };
     });
   }, [filteredData.obsIndices, isSliced]);
@@ -52,46 +49,29 @@ function VarHistogram(_ref) {
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, {
     refetchOnMount: false
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "feature-histogram-container",
-    children: isPending ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}) : !serverError && fetchedData ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "feature-histogram m-1",
-      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 `${(0, _string.formatNumerical)(fetchedData.hist[dataIndex])}`;
-        },
-        xAxis: {
-          data: _lodash.default.range(fetchedData.bin_edges?.length) || null,
-          valueFormatter: v => `Bin [${(0, _string.formatNumerical)(fetchedData.bin_edges[v][0], _string.FORMATS.EXPONENTIAL)}, ${(0, _string.formatNumerical)(fetchedData.bin_edges[v][1], _string.FORMATS.EXPONENTIAL)}${v === fetchedData.bin_edges.length - 1 ? "]" : ")"}`
-        },
-        slotProps: {
-          popper: {
-            className: "feature-histogram-tooltip"
-          }
-        }
-      })
-    }) : null
+  return !serverError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Histogram.Histogram, {
+    data: fetchedData,
+    isPending: isPending,
+    altColor: isSliced
   });
 }
 function VarDiseaseInfoItem(item) {
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   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, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: "btn btn-link",
+        onClick: () => {
+          dispatch({
+            type: "select.disease",
+            id: item.disease_id,
+            name: item.disease_name
+          });
+        },
+        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", {
@@ -120,25 +100,25 @@ function VarDiseaseInfoItem(item) {
         })
       })]
     })
-  });
+  }, item.disease_name);
 }
-function VarDiseaseInfo(_ref3) {
+function VarDiseaseInfo(_ref2) {
   let {
     data
-  } = _ref3;
+  } = _ref2;
   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",
+        estimateSize: 140,
+        maxHeight: "100%",
         ItemComponent: VarDiseaseInfoItem
       })
     })
   });
 }
-function SingleSelectionItem(_ref4) {
+function SingleSelectionItem(_ref3) {
   let {
     item,
     isActive,
@@ -147,7 +127,7 @@ function SingleSelectionItem(_ref4) {
     isDiseaseGene = false,
     showSetColorEncoding = true,
     showRemove = true
-  } = _ref4;
+  } = _ref3;
   const ENDPOINT = "disease/gene";
   const [openInfo, setOpenInfo] = (0, _react.useState)(false);
   const dataset = (0, _DatasetContext.useDataset)();
@@ -160,7 +140,9 @@ function SingleSelectionItem(_ref4) {
     fetchedData,
     isPending,
     serverError
-  } = (0, _requests.useFetch)(ENDPOINT, params);
+  } = (0, _requests.useFetch)(ENDPOINT, params, {
+    refetchOnMount: false
+  });
   const hasDiseaseInfo = !isPending && !serverError && !!fetchedData.length;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -207,7 +189,7 @@ function SingleSelectionItem(_ref4) {
     }), hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Collapse, {
       in: openInfo,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "mt-2",
+        className: "mt-2 var-disease-info-collapse",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VarDiseaseInfo, {
           data: fetchedData
         })
@@ -215,12 +197,12 @@ function SingleSelectionItem(_ref4) {
     })]
   });
 }
-function MultipleSelectionItem(_ref5) {
+function MultipleSelectionItem(_ref4) {
   let {
     item,
     isActive,
     toggleVar
-  } = _ref5;
+  } = _ref4;
   const isNotInData = item.matrix_index === -1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -240,14 +222,14 @@ function MultipleSelectionItem(_ref5) {
     })
   });
 }
-function VarItem(_ref6) {
+function VarItem(_ref5) {
   let {
     item,
     active,
     setVarButtons,
     mode = _constants.SELECTION_MODES.SINGLE,
     isDiseaseGene = false
-  } = _ref6;
+  } = _ref5;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const selectVar = () => {

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

@@ -44,7 +44,8 @@ const useVarMean = function (varKeys) {
     });
   }, [varKeys]);
   return (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: enabled
+    enabled: enabled,
+    refetchOnMount: false
   });
 };
 
@@ -74,7 +75,8 @@ function DiseaseVarList(_ref) {
     });
   }, [dataset.selectedDisease]);
   const diseaseData = (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: !!params.diseaseId
+    enabled: !!params.diseaseId,
+    refetchOnMount: false
   });
   (0, _react.useEffect)(() => {
     if (!diseaseData.isPending && !diseaseData.serverError) {

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

@@ -18,6 +18,7 @@ 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; }
+// @TODO: add button to score genes and plot
 const addVarToSet = (dispatch, set, v) => {
   dispatch({
     type: "add.varSet.var",

package/dist/components/violin/Violin.js

@@ -12,6 +12,7 @@ var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 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 _jsxRuntime = require("react/jsx-runtime");
@@ -24,6 +25,8 @@ function Violin(_ref) {
   } = _ref;
   const ENDPOINT = "violin";
   const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
@@ -46,7 +49,8 @@ function Violin(_ref) {
           indices: dataset.selectedVar?.vars.map(v => v.index)
         } : dataset.selectedVar?.index,
         obsCol: dataset.selectedObs,
-        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c])
+        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
       }
     }[mode]
   });
@@ -89,12 +93,13 @@ function Violin(_ref) {
           } : dataset.selectedVar?.index,
           obsCol: dataset.selectedObs,
           obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+          obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
           scale: dataset.controls.scale.violinplot.value,
           varNamesCol: dataset.varNamesCol
         };
       });
     }
-  }, [dataset.controls.scale.violinplot.value, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, dataset.varNamesCol, mode]);
+  }, [dataset.controls.scale.violinplot.value, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, dataset.varNamesCol, filteredData.obsIndices, isSliced, mode]);
   const {
     fetchedData,
     isPending,

package/dist/constants/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.COLOR_ENCODINGS = void 0;
+exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.COLOR_ENCODINGS = void 0;
 const LOCAL_STORAGE_KEY = exports.LOCAL_STORAGE_KEY = "CHERITA";
 const COLOR_ENCODINGS = exports.COLOR_ENCODINGS = {
   VAR: "var",
@@ -71,4 +71,20 @@ const VIOLINPLOT_SCALES = exports.VIOLINPLOT_SCALES = {
     value: "count",
     name: "Count"
   }
+};
+const PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_PLOT_TYPES = {
+  GENE: "gene",
+  CATEGORICAL: "categorical",
+  CONTINUOUS: "continuous",
+  MASKS: "masks"
+};
+const PSEUDOSPATIAL_CATEGORICAL_MODES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = {
+  ACROSS: {
+    value: "across",
+    name: "% across sections"
+  },
+  WITHIN: {
+    value: "within",
+    name: "% within section"
+  }
 };