@haniffalab/cherita-react 2.0.0 → 2.1.0

package/dist/cjs/context/SettingsContext.js

@@ -176,7 +176,7 @@ function SettingsProvider(_ref2) {
 
   // If the buster is not set or does not match the current package version,
   // reset localSettings to avoid stale data
-  if (!buster || buster !== "2.0.0") {
+  if (!buster || buster !== "2.1.0") {
     localSettings = {};
   }
   const initSettings = (0, _react.useRef)(initializer({
@@ -201,7 +201,7 @@ function SettingsProvider(_ref2) {
     if (canOverrideSettings && settings) {
       try {
         localStorage.setItem(DATASET_STORAGE_KEY, JSON.stringify(_objectSpread({
-          buster: "2.0.0" || '0.0.0',
+          buster: "2.1.0" || '0.0.0',
           timestamp: Date.now()
         }, _lodash.default.omit(settings, 'data'))));
       } catch (err) {
@@ -345,6 +345,31 @@ function settingsReducer(settings, action) {
           }));
         }
       }
+    case 'select.multivar.batch':
+      {
+        const newVars = [];
+        let newVarData = {};
+        _lodash.default.forEach(action.vars, v => {
+          const inMultiVar = settings.selectedMultiVar.some(mv => mv.name === v.name);
+          if (!inMultiVar) {
+            const {
+              settings: varSettings,
+              data: varData
+            } = splitVar(v);
+            newVars.push(varSettings);
+            newVarData = _objectSpread(_objectSpread({}, newVarData), varData);
+          }
+        });
+        if (!newVars.length) {
+          return validateSettings(_objectSpread({}, settings));
+        }
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedMultiVar: [...settings.selectedMultiVar, ...newVars],
+          data: _objectSpread(_objectSpread({}, settings.data), {}, {
+            vars: _objectSpread(_objectSpread({}, settings.data.vars), newVarData)
+          })
+        }));
+      }
     case 'deselect.multivar':
       {
         return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {

package/dist/cjs/helpers/color-helper.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useColor = exports.rgbToHex = void 0;
 var _react = require("react");
 var _colorscales = require("../constants/colorscales");
+var _constants = require("../constants/constants");
 var _SettingsContext = require("../context/SettingsContext");
-const GRAY = [214, 212, 212];
 const parseHexColor = color => {
   const r = parseInt(color === null || color === void 0 ? void 0 : color.substring(1, 3), 16);
   const g = parseInt(color === null || color === void 0 ? void 0 : color.substring(3, 5), 16);
@@ -40,34 +40,39 @@ const rgbToHex = color => {
   return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 };
 exports.rgbToHex = rgbToHex;
-const useColor = () => {
+const useColor = _ref => {
+  let {
+    isCategorical = false,
+    colorscale = null
+  } = _ref;
   const settings = (0, _SettingsContext.useSettings)();
-  const getColor = (0, _react.useCallback)(_ref => {
+  const colormap = (0, _react.useMemo)(() => {
+    return colorscale || _colorscales.COLORSCALES[isCategorical ? 'Accent' : settings.controls.colorScale];
+  }, [colorscale, isCategorical, settings.controls.colorScale]);
+  const getColor = (0, _react.useCallback)(_ref2 => {
     let {
       value,
-      categorical = false,
       grayOut = false,
       grayParams: {
-        alpha = 0.75,
-        gray = 0.95
+        alpha = _constants.GRAY_ALPHA,
+        gray = _constants.GRAY_MIX
       } = {},
-      colorEncoding = settings.colorEncoding,
-      colorscale = null
-    } = _ref;
-    const colormap = colorscale || _colorscales.COLORSCALES[categorical ? 'Accent' : settings.controls.colorScale];
+      colorEncoding = settings.colorEncoding
+    } = _ref2;
     if (colorEncoding) {
       if (grayOut) {
         // Mix color with gray manually instead of chroma.mix to get better performance with deck.gl
         const rgb = computeColor(colormap, value);
-        return [rgb[0] * (1 - gray) + GRAY[0] * gray, rgb[1] * (1 - gray) + GRAY[1] * gray, rgb[2] * (1 - gray) + GRAY[2] * gray, 255 * alpha];
+        return [rgb[0] * (1 - gray) + _constants.GRAY[0] * gray, rgb[1] * (1 - gray) + _constants.GRAY[1] * gray, rgb[2] * (1 - gray) + _constants.GRAY[2] * gray, 255 * alpha];
       } else {
         return [...computeColor(colormap, value), 255];
       }
     } else {
       return null;
     }
-  }, [settings.colorEncoding, settings.controls.colorScale]);
+  }, [settings.colorEncoding, colormap]);
   return {
+    colormap,
     getColor
   };
 };

package/dist/cjs/index.js

@@ -147,12 +147,6 @@ Object.defineProperty(exports, "SearchBar", {
     return _SearchBar.SearchBar;
   }
 });
-Object.defineProperty(exports, "Toolbar", {
-  enumerable: true,
-  get: function () {
-    return _Toolbar.Toolbar;
-  }
-});
 Object.defineProperty(exports, "VIOLIN_MODES", {
   enumerable: true,
   get: function () {
@@ -192,7 +186,6 @@ var _Pseudospatial = require("./components/pseudospatial/Pseudospatial");
 var _Scatterplot = require("./components/scatterplot/Scatterplot");
 var _ScatterplotControls = require("./components/scatterplot/ScatterplotControls");
 var _SearchBar = require("./components/search-bar/SearchBar");
-var _Toolbar = require("./components/toolbar/Toolbar");
 var _VarList = require("./components/var-list/VarList");
 var _Violin = require("./components/violin/Violin");
 var _ViolinControls = require("./components/violin/ViolinControls");

package/dist/cjs/utils/Legend.js

@@ -25,13 +25,14 @@ function Legend(_ref) {
   const settings = (0, _SettingsContext.useSettings)();
   const {
     getColor
-  } = (0, _colorHelper.useColor)();
+  } = (0, _colorHelper.useColor)({
+    isCategorical,
+    colorscale
+  });
   const spanList = (0, _react.useMemo)(() => {
     return _lodash.default.range(100).map(i => {
       var color = (0, _colorHelper.rgbToHex)(getColor({
-        value: i / 100,
-        categorical: isCategorical,
-        colorscale: colorscale
+        value: i / 100
       }));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "grad-step",
@@ -40,7 +41,7 @@ function Legend(_ref) {
         }
       }, i);
     });
-  }, [colorscale, getColor, isCategorical]);
+  }, [getColor]);
   if (settings.colorEncoding && !isCategorical) {
     var _settings$selectedVar, _settings$selectedObs;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/cjs/utils/requests.js

@@ -15,8 +15,8 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 async function fetchData(endpoint, params) {
   let signal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  let ms = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300000;
-  let apiUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  let apiUrl = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  let ms = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 300000;
   apiUrl = apiUrl || process.env.REACT_APP_API_URL;
   const controller = new AbortController();
   const timeout = setTimeout(() => {

package/dist/cjs/views/ObservationFeature/StandardView.js

@@ -109,7 +109,7 @@ function StandardView(_ref) {
       default:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, _objectSpread({}, commonProps));
     }
-  }, [plotType]);
+  }, [plotType, props]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "cherita-app",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DatasetContext.DatasetProvider, _objectSpread(_objectSpread({}, props), {}, {

package/dist/cjs/views/PerturbationMap/ObsExplorer.js

@@ -149,7 +149,9 @@ function ObsExplorer() {
     selectedObsIndex
   } = (0, _SettingsContext.useSettings)();
   const {
-    obsExplorer = {}
+    obsExplorer = {},
+    obsLabel,
+    valueLabel
   } = (0, _DatasetContext.useDataset)();
   (0, _parquetData.useParquet)(); // initialize duckdb instance
 
@@ -160,9 +162,9 @@ function ObsExplorer() {
     serverError
   } = (0, _zarrData.useObsColsData)(obsExplorer === null || obsExplorer === void 0 ? void 0 : obsExplorer.obsCols);
   if (selectedObsIndex == null) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "my-4 text-muted",
-      children: "Select a point in the scatterplot to view details about the gene perturbation."
+      children: ["Select a point in the scatterplot or search for ", obsLabel.plural, " to view details about the ", obsLabel.singular, " perturbation."]
     });
   }
   if (isPending) {
@@ -184,8 +186,8 @@ function ObsExplorer() {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
         className: "fw-bold mb-2",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-          title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: "This panel shows metadata and predicted downstream effects for the selected gene perturbation across the atlas."
+          title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: ["This panel shows metadata and predicted downstream effects for the selected ", obsLabel.singular, " perturbation across the atlas."]
           }),
           placement: "right",
           arrow: true,
@@ -200,8 +202,8 @@ function ObsExplorer() {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
           className: "fw-bold mb-2",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-            title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-              children: "These values describe how the selected gene perturbation is annotated in the atlas, including lineage, biological context, and summary scores used in the perturbation landscape."
+            title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: ["These values describe how the selected ", obsLabel.singular, ' ', "perturbation is annotated in the atlas, including lineage, biological context, and summary scores used in the perturbation landscape."]
             }),
             placement: "right",
             arrow: true,
@@ -255,8 +257,8 @@ function ObsExplorer() {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h5", {
           className: "fw-bold mb-2 d-flex align-items-center justify-content-between",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-            title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-              children: "This table shows genes predicted to change expression in response to the selected perturbation. Results can be sorted and explored to identify affected pathways and regulatory programs."
+            title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: ["This table shows ", obsLabel.plural, " predicted to change", ' ', valueLabel, " in response to the selected perturbation. Results can be sorted and explored to identify affected pathways and regulatory programs."]
             }),
             placement: "right",
             arrow: true,

package/dist/cjs/views/PerturbationMap/StandardView.js

@@ -51,7 +51,8 @@ function StandardView(_ref) {
             setShowSearch: setShowObsExplorer,
             setShowControls: setShowControls,
             isFullscreen: true,
-            pointInteractionEnabled: true
+            pointInteractionEnabled: true,
+            isSearchObs: true
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "cherita-app-sidebar p-3",

package/dist/cjs/workers/scatterplotData.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createScatterplotWorker = createScatterplotWorker;
+const WORKER_CODE = "\nfunction computeBitmask(indices, length) {\n  if (indices === null) return new Uint8Array(length).fill(1);\n  const bitmask = new Uint8Array(length);\n  for (const idx of indices) {\n    bitmask[idx] = 1;\n  }\n  return bitmask;\n}\n\nself.onmessage = ({ data }) => {\n  // compute and transfer only updated data\n  const msg = {};\n  const transfer = [];\n\n  if (data.positions) {\n    const positions = new Float32Array(data.positions.flat());\n    msg.positions = positions;\n    msg.count = data.positions.length;\n    transfer.push(positions.buffer);\n  }\n\n  if (data.values) {\n    const values = new Float32Array(data.values);\n    msg.values = values;\n    transfer.push(values.buffer);\n  }\n\n  if (data.obsIndices !== undefined && !!data.length) {\n    const bitmask = computeBitmask(data.obsIndices, data.length);\n    msg.indexEnabledBitmask = bitmask;\n    transfer.push(bitmask.buffer);\n  }\n\n  self.postMessage(msg, transfer);\n};\n";
+function createScatterplotWorker() {
+  const blob = new Blob([WORKER_CODE], {
+    type: 'application/javascript'
+  });
+  const url = URL.createObjectURL(blob);
+  const worker = new Worker(url);
+  URL.revokeObjectURL(url);
+  return worker;
+}

package/dist/esm/components/dotplot/Dotplot.js

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import _ from 'lodash';
 import { Button } from 'react-bootstrap';
 import Plot from 'react-plotly.js';
-import { PLOTLY_MODEBAR_BUTTONS } from '../../constants/constants';
+import { PLOT_TYPES, PLOTLY_MODEBAR_BUTTONS } from '../../constants/constants';
 import { useDataset } from '../../context/DatasetContext';
 import { useFilteredData } from '../../context/FilterContext';
 import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
@@ -23,7 +23,6 @@ export function Dotplot(_ref) {
     setShowCategories,
     setShowSearch,
     setShowControls,
-    plotType,
     setPlotType,
     isFullscreen = false
   } = _ref;
@@ -153,7 +152,7 @@ export function Dotplot(_ref) {
     return /*#__PURE__*/_jsx(PlotAlert, {
       variant: "info",
       heading: "Set up your dotplot",
-      plotType: plotType,
+      plotType: PLOT_TYPES.DOTPLOT,
       setPlotType: setPlotType,
       children: /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
@@ -161,8 +160,8 @@ export function Dotplot(_ref) {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowSearch,
-          children: "features"
-        }) : 'features', ' ', "to display their expression across groups, then choose a", ' ', showCategoriesBtn ? /*#__PURE__*/_jsx(Button, {
+          children: dataset.varLabel.plural
+        }) : dataset.varLabel.plural, ' ', "to display their ", dataset.valueLabel, " across groups, then choose a", ' ', showCategoriesBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowCategories,
@@ -174,7 +173,7 @@ export function Dotplot(_ref) {
     return /*#__PURE__*/_jsx(PlotAlert, {
       variant: "danger",
       heading: "Error displaying the dotplot",
-      plotType: plotType,
+      plotType: PLOT_TYPES.DOTPLOT,
       setPlotType: setPlotType,
       children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });

package/dist/esm/components/dotplot/DotplotControls.js

@@ -4,13 +4,16 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { useEffect, useState } from 'react';
+import _ from 'lodash';
 import { Button, Form, InputGroup } from 'react-bootstrap';
+import { useDataset } from '../../context/DatasetContext';
 import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
 import { ColorscaleSelect, ScaleSelect } from '../controls/Controls';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function DotplotControls() {
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
+  const dataset = useDataset();
   const [controls, setControls] = useState({
     expressionCutoff: settings.controls.expressionCutoff,
     colorAxis: {
@@ -91,8 +94,8 @@ export function DotplotControls() {
         plot: "dotplot"
       }), /*#__PURE__*/_jsxs(Form.Group, {
         className: "mb-2",
-        children: [/*#__PURE__*/_jsx(Form.Label, {
-          children: "Expression Cutoff"
+        children: [/*#__PURE__*/_jsxs(Form.Label, {
+          children: [_.capitalize(dataset.valueLabel), " Cutoff"]
         }), /*#__PURE__*/_jsxs(InputGroup, {
           children: [/*#__PURE__*/_jsx(Form.Control, {
             size: "sm",
@@ -119,7 +122,7 @@ export function DotplotControls() {
         children: /*#__PURE__*/_jsx(Form.Check, {
           type: "switch",
           id: "meanOnlyExpressed",
-          label: "Average only above cutoff",
+          label: "Average only above ".concat(dataset.valueLabel, " cutoff"),
           checked: settings.controls.meanOnlyExpressed,
           onChange: () => {
             dispatch({

package/dist/esm/components/heatmap/Heatmap.js

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import _ from 'lodash';
 import { Button } from 'react-bootstrap';
 import Plot from 'react-plotly.js';
-import { PLOTLY_MODEBAR_BUTTONS } from '../../constants/constants';
+import { PLOT_TYPES, PLOTLY_MODEBAR_BUTTONS } from '../../constants/constants';
 import { useDataset } from '../../context/DatasetContext';
 import { useFilteredData } from '../../context/FilterContext';
 import { useSettings } from '../../context/SettingsContext';
@@ -23,7 +23,6 @@ export function Heatmap(_ref) {
     setShowCategories,
     setShowSearch,
     setShowControls,
-    plotType,
     setPlotType,
     isFullscreen = false
   } = _ref;
@@ -127,7 +126,7 @@ export function Heatmap(_ref) {
     return /*#__PURE__*/_jsx(PlotAlert, {
       variant: "info",
       heading: "Set up your heatmap",
-      plotType: plotType,
+      plotType: PLOT_TYPES.HEATMAP,
       setPlotType: setPlotType,
       children: /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
@@ -135,8 +134,8 @@ export function Heatmap(_ref) {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowSearch,
-          children: "features"
-        }) : 'features', ' ', "to display their expression, then choose a", ' ', showCategoriesBtn ? /*#__PURE__*/_jsx(Button, {
+          children: dataset.varLabel.plural
+        }) : dataset.varLabel.plural, ' ', "to display their ", dataset.valueLabel, ", then choose a", ' ', showCategoriesBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowCategories,
@@ -148,7 +147,7 @@ export function Heatmap(_ref) {
     return /*#__PURE__*/_jsx(PlotAlert, {
       variant: "danger",
       heading: "Error displaying the heatmap",
-      plotType: plotType,
+      plotType: PLOT_TYPES.HEATMAP,
       setPlotType: setPlotType,
       children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });

package/dist/esm/components/icons/HeatmapIcon.js

@@ -14,8 +14,8 @@ export default function HeatmapIcon(_ref) {
       gap = 1
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const rows = 6; // genes
-  const cols = 8; // cells
+  const rows = 6; // features
+  const cols = 8; // observations
 
   // Example expression pattern for visual clusters
   const expressionLevels = [[1, 0.8, 0.2, 0.2, 0.5, 0.9, 1, 0.7], [0.9, 0.7, 0.1, 0.2, 0.4, 0.8, 0.9, 0.6], [0.1, 0.2, 0.8, 0.9, 0.7, 0.2, 0.1, 0.3], [0.2, 0.3, 0.9, 1, 0.8, 0.3, 0.2, 0.4], [0.5, 0.6, 0.2, 0.1, 0.9, 0.7, 0.6, 0.8], [0.6, 0.7, 0.3, 0.2, 0.8, 0.6, 0.7, 0.9]];

package/dist/esm/components/matrixplot/Matrixplot.js

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import _ from 'lodash';
 import { Button } from 'react-bootstrap';
 import Plot from 'react-plotly.js';
-import { PLOTLY_MODEBAR_BUTTONS } from '../../constants/constants';
+import { PLOT_TYPES, PLOTLY_MODEBAR_BUTTONS } from '../../constants/constants';
 import { useDataset } from '../../context/DatasetContext';
 import { useFilteredData } from '../../context/FilterContext';
 import { useSettings } from '../../context/SettingsContext';
@@ -23,7 +23,6 @@ export function Matrixplot(_ref) {
     setShowCategories,
     setShowSearch,
     setShowControls,
-    plotType,
     setPlotType,
     isFullscreen = false
   } = _ref;
@@ -128,7 +127,7 @@ export function Matrixplot(_ref) {
     return /*#__PURE__*/_jsx(PlotAlert, {
       variant: "info",
       heading: "Set up your matrix plot",
-      plotType: plotType,
+      plotType: PLOT_TYPES.MATRIXPLOT,
       setPlotType: setPlotType,
       children: /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
@@ -141,15 +140,15 @@ export function Matrixplot(_ref) {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowSearch,
-          children: "features"
-        }) : 'features', ' ', "to display the matrix plot."]
+          children: dataset.varLabel.plural
+        }) : dataset.varLabel.plural, ' ', "to display the matrix plot."]
       })
     });
   } else {
     return /*#__PURE__*/_jsx(PlotAlert, {
       variant: "danger",
       heading: "Error displaying the matrix plot",
-      plotType: plotType,
+      plotType: PLOT_TYPES.MATRIXPLOT,
       setPlotType: setPlotType,
       children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });

package/dist/esm/components/obs-list/ObsItem.js

@@ -158,7 +158,10 @@ function CategoricalItem(_ref2) {
   } = useDataset();
   const {
     getColor
-  } = useColor();
+  } = useColor({
+    isCategorical: true,
+    colorscale: useUnsColors ? colors : null
+  });
   return /*#__PURE__*/_jsx("div", {
     className: "virtualized-list-wrapper ps-1",
     children: /*#__PURE__*/_jsx(ListGroup.Item, {
@@ -253,17 +256,14 @@ function CategoricalItem(_ref2) {
                 y: "0",
                 width: "10",
                 height: "10",
-                fill: "rgb(".concat(getColor(_objectSpread({
-                  value: (code - min) / (max - min),
-                  categorical: true,
+                fill: "rgb(".concat(getColor({
+                  value: (code - min) / Math.max(max - min, 1e-6),
                   grayOut: isOmitted,
                   grayParams: {
                     alpha: 1
                   },
                   colorEncoding: 'obs'
-                }, useUnsColors ? {
-                  colorscale: colors
-                } : {})), ")")
+                }), ")")
               })
             })
           }) : null]

package/dist/esm/components/offcanvas/OffCanvas.js

@@ -10,6 +10,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import Offcanvas from 'react-bootstrap/Offcanvas';
 import { SELECTION_MODES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
 import { ObsExplorer } from '../../views/PerturbationMap/ObsExplorer';
 import { ObsColsList } from '../obs-list/ObsList';
 import { ObsmKeysList } from '../obsm-list/ObsmList';
@@ -61,14 +62,15 @@ export function OffcanvasVars(_ref3) {
     handleClose,
     mode = SELECTION_MODES.MULTIPLE
   } = _ref3;
+  const dataset = useDataset();
   return /*#__PURE__*/_jsxs(Offcanvas, {
     show: show,
     onHide: handleClose,
     className: "offcanvas-vars",
     children: [/*#__PURE__*/_jsx(Offcanvas.Header, {
       closeButton: true,
-      children: /*#__PURE__*/_jsx(Offcanvas.Title, {
-        children: "Features"
+      children: /*#__PURE__*/_jsxs(Offcanvas.Title, {
+        children: ["Search for ", dataset.varLabel.plural]
       })
     }), /*#__PURE__*/_jsx(Offcanvas.Body, {
       children: /*#__PURE__*/_jsxs("div", {
@@ -111,13 +113,14 @@ export function OffcanvasObsExplorer(_ref5) {
       handleClose
     } = _ref5,
     props = _objectWithoutProperties(_ref5, _excluded3);
+  const dataset = useDataset();
   return /*#__PURE__*/_jsxs(Offcanvas, {
     show: show,
     onHide: handleClose,
     children: [/*#__PURE__*/_jsx(Offcanvas.Header, {
       closeButton: true,
-      children: /*#__PURE__*/_jsx(Offcanvas.Title, {
-        children: "Gene Perturbations"
+      children: /*#__PURE__*/_jsxs(Offcanvas.Title, {
+        children: ["Search for ", dataset.obsLabel.plural]
       })
     }), /*#__PURE__*/_jsx(Offcanvas.Body, {
       className: "p-1",

package/dist/esm/components/plot/PlotTypeSelector.js

@@ -5,6 +5,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { useState } from 'react';
 import { PLOT_TYPES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
 import { StyledTooltip } from '../../utils/StyledTooltip';
 import DotPlotIcon from '../icons/DotPlotIcon';
 import HeatmapIcon from '../icons/HeatmapIcon';
@@ -16,33 +17,67 @@ const plotTypes = [{
   type: PLOT_TYPES.SCATTERPLOT,
   icon: ScatterplotIcon,
   name: 'Scatterplot',
-  description: 'Displays cells in 2D based on dimensionality reduction.'
+  description: _ref => {
+    let {
+      obsLabel
+    } = _ref;
+    return "Displays ".concat(obsLabel.plural, " in 2D based on dimensionality reduction.");
+  }
 }, {
   type: PLOT_TYPES.MATRIXPLOT,
   icon: MatrixPlotIcon,
   name: 'Matrix Plot',
-  description: 'Shows expression values of genes across categories.'
+  description: _ref2 => {
+    let {
+      varLabel,
+      valueLabel
+    } = _ref2;
+    return "Shows ".concat(valueLabel, " values of ").concat(varLabel.plural, " across categories.");
+  }
 }, {
   type: PLOT_TYPES.DOTPLOT,
   icon: DotPlotIcon,
   name: 'Dot Plot',
-  description: 'Shows proportion and expression of genes across groups.'
+  description: _ref3 => {
+    let {
+      varLabel,
+      valueLabel
+    } = _ref3;
+    return "Shows proportion and ".concat(valueLabel, " of ").concat(varLabel.plural, " across groups.");
+  }
 }, {
   type: PLOT_TYPES.HEATMAP,
   icon: HeatmapIcon,
   name: 'Heatmap',
-  description: 'Visualises gene expression or feature activity as a colour-coded matrix.'
+  description: _ref4 => {
+    let {
+      varLabel,
+      valueLabel
+    } = _ref4;
+    return "Visualises ".concat(valueLabel, " of ").concat(varLabel.plural, " as a colour-coded matrix.");
+  }
 }, {
   type: PLOT_TYPES.VIOLINPLOT,
   icon: ViolinPlotIcon,
   name: 'Violin Plot',
-  description: 'Displays distribution of gene expression across categories.'
+  description: _ref5 => {
+    let {
+      obsLabel,
+      valueLabel
+    } = _ref5;
+    return "Displays distribution of ".concat(valueLabel, " across ").concat(obsLabel.plural, ".");
+  }
 }];
-export function PlotTypeSelector(_ref) {
+export function PlotTypeSelector(_ref6) {
   let {
     currentType,
     onChange
-  } = _ref;
+  } = _ref6;
+  const {
+    obsLabel,
+    varLabel,
+    valueLabel
+  } = useDataset();
   const [hoveredMap, setHoveredMap] = useState({});
   const handleMouseEnter = type => setHoveredMap(prev => _objectSpread(_objectSpread({}, prev), {}, {
     [type]: true
@@ -52,13 +87,13 @@ export function PlotTypeSelector(_ref) {
   }));
   return /*#__PURE__*/_jsx("div", {
     className: "d-flex gap-2 justify-content-between",
-    children: plotTypes.map(_ref2 => {
+    children: plotTypes.map(_ref7 => {
       let {
         type,
         icon: Icon,
         name,
         description
-      } = _ref2;
+      } = _ref7;
       const isActive = currentType === type;
       const hovered = hoveredMap[type] || false;
       const colour = isActive ? '#005a86' : hovered ? '#0071a7' : '#000';
@@ -66,7 +101,11 @@ export function PlotTypeSelector(_ref) {
         title: /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("strong", {
             children: name
-          }), /*#__PURE__*/_jsx("br", {}), description]
+          }), /*#__PURE__*/_jsx("br", {}), description({
+            obsLabel,
+            varLabel,
+            valueLabel
+          })]
         }),
         placement: "bottom",
         slotProps: {