@haniffalab/cherita-react 1.4.1-dev.2025-10-23.3179e534 → 1.4.1-dev.2025-10-23.55fbe6ff

package/dist/esm/components/full-page/PlotTypeSelector.js

@@ -3,40 +3,40 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 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 { useState } from "react";
-import { PLOT_TYPES } from "../../constants/constants";
-import { StyledTooltip } from "../../utils/StyledTooltip";
-import DotPlotIcon from "../icons/DotPlotIcon";
-import HeatmapIcon from "../icons/HeatmapIcon";
-import MatrixPlotIcon from "../icons/MatrixPlotIcon";
-import ScatterplotIcon from "../icons/ScatterplotIcon";
-import ViolinPlotIcon from "../icons/ViolinPlotIcon";
+import { useState } from 'react';
+import { PLOT_TYPES } from '../../constants/constants';
+import { StyledTooltip } from '../../utils/StyledTooltip';
+import DotPlotIcon from '../icons/DotPlotIcon';
+import HeatmapIcon from '../icons/HeatmapIcon';
+import MatrixPlotIcon from '../icons/MatrixPlotIcon';
+import ScatterplotIcon from '../icons/ScatterplotIcon';
+import ViolinPlotIcon from '../icons/ViolinPlotIcon';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const plotTypes = [{
   type: PLOT_TYPES.SCATTERPLOT,
   icon: ScatterplotIcon,
-  name: "Scatterplot",
-  description: "Displays cells in 2D based on dimensionality reduction."
+  name: 'Scatterplot',
+  description: 'Displays cells in 2D based on dimensionality reduction.'
 }, {
   type: PLOT_TYPES.MATRIXPLOT,
   icon: MatrixPlotIcon,
-  name: "Matrix Plot",
-  description: "Shows expression values of genes across categories."
+  name: 'Matrix Plot',
+  description: 'Shows expression values of genes across categories.'
 }, {
   type: PLOT_TYPES.DOTPLOT,
   icon: DotPlotIcon,
-  name: "Dot Plot",
-  description: "Shows proportion and expression of genes across groups."
+  name: 'Dot Plot',
+  description: 'Shows proportion and expression of genes across groups.'
 }, {
   type: PLOT_TYPES.HEATMAP,
   icon: HeatmapIcon,
-  name: "Heatmap",
-  description: "Visualises gene expression or feature activity as a colour-coded matrix."
+  name: 'Heatmap',
+  description: 'Visualises gene expression or feature activity as a colour-coded matrix.'
 }, {
   type: PLOT_TYPES.VIOLINPLOT,
   icon: ViolinPlotIcon,
-  name: "Violin Plot",
-  description: "Displays distribution of gene expression across categories."
+  name: 'Violin Plot',
+  description: 'Displays distribution of gene expression across categories.'
 }];
 export function PlotTypeSelector(_ref) {
   let {
@@ -61,7 +61,7 @@ export function PlotTypeSelector(_ref) {
       } = _ref2;
       const isActive = currentType === type;
       const hovered = hoveredMap[type] || false;
-      const colour = isActive ? "#005a86" : hovered ? "#0071a7" : "#000";
+      const colour = isActive ? '#005a86' : hovered ? '#0071a7' : '#000';
       return /*#__PURE__*/_jsx(StyledTooltip, {
         title: /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("strong", {
@@ -72,7 +72,7 @@ export function PlotTypeSelector(_ref) {
         slotProps: {
           popper: {
             modifiers: [{
-              name: "offset",
+              name: 'offset',
               options: {
                 offset: [0, -12]
               }
@@ -83,7 +83,7 @@ export function PlotTypeSelector(_ref) {
           onMouseEnter: () => handleMouseEnter(type),
           onMouseLeave: () => handleMouseLeave(type),
           onClick: () => onChange(type),
-          className: "plotselector-icon".concat(isActive ? " active" : ""),
+          className: "plotselector-icon".concat(isActive ? ' active' : ''),
           children: /*#__PURE__*/_jsx(Icon, {
             size: 34,
             colour: colour

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

@@ -3,19 +3,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 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 { useCallback, useEffect, 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 { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings } from "../../context/SettingsContext";
-import { LoadingSpinner } from "../../utils/LoadingIndicators";
-import { useDebouncedFetch } from "../../utils/requests";
-import { useSelectedMultiVar, useSelectedObs } from "../../utils/Resolver";
-import { PlotAlert } from "../full-page/PlotAlert";
-import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
+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 { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings } from '../../context/SettingsContext';
+import { LoadingSpinner } from '../../utils/LoadingIndicators';
+import { useDebouncedFetch } from '../../utils/requests';
+import { useSelectedMultiVar, useSelectedObs } from '../../utils/Resolver';
+import { PlotAlert } from '../full-page/PlotAlert';
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from '../toolbar/Toolbar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Heatmap(_ref) {
   let {
@@ -28,7 +28,7 @@ export function Heatmap(_ref) {
     plotType,
     setPlotType
   } = _ref;
-  const ENDPOINT = "heatmap";
+  const ENDPOINT = 'heatmap';
   const dataset = useDataset();
   const settings = useSettings();
   const {
@@ -41,7 +41,7 @@ export function Heatmap(_ref) {
   const [hasSelections, setHasSelections] = useState(false);
   const selectedObs = useSelectedObs();
   const selectedMultiVar = useSelectedMultiVar();
-  const [params, setParams] = useState({
+  const params = useMemo(() => ({
     url: dataset.url,
     obsCol: selectedObs,
     obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
@@ -51,26 +51,13 @@ export function Heatmap(_ref) {
     } : i.index),
     obsIndices: isSliced ? [...(obsIndices || [])] : null,
     varNamesCol: dataset.varNamesCol
-  });
+  }), [dataset.url, dataset.varNamesCol, isSliced, obsIndices, selectedMultiVar, selectedObs]);
   useEffect(() => {
     if (selectedObs && selectedMultiVar.length) {
       setHasSelections(true);
     } else {
       setHasSelections(false);
     }
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        url: dataset.url,
-        obsCol: selectedObs,
-        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
-        varKeys: selectedMultiVar.map(i => i.isSet ? {
-          name: i.name,
-          indices: i.vars.map(v => v.index)
-        } : i.index),
-        obsIndices: isSliced ? [...(obsIndices || [])] : null,
-        varNamesCol: dataset.varNamesCol
-      });
-    });
   }, [selectedMultiVar, selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
   const updateColorscale = useCallback(colorscale => {
     setLayout(l => {
@@ -86,13 +73,16 @@ export function Heatmap(_ref) {
     isPending,
     serverError
   } = useDebouncedFetch(ENDPOINT, params, 500, {
-    enabled: !!params.obsCol && !!params.varKeys.length
+    isEnabled: params => !!params.obsCol && !!params.varKeys.length
   });
   useEffect(() => {
-    if (hasSelections && !isPending && !serverError) {
+    if (hasSelections && !!fetchedData && !isPending && !serverError) {
       setData(fetchedData.data);
       setLayout(fetchedData.layout);
       updateColorscale(colorscale.current);
+    } else {
+      setData([]);
+      setLayout({});
     }
   }, [fetchedData, hasSelections, isPending, serverError, updateColorscale]);
   useEffect(() => {
@@ -116,8 +106,8 @@ export function Heatmap(_ref) {
           layout: layout,
           useResizeHandler: true,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           config: {
             displaylogo: false,
@@ -133,17 +123,17 @@ export function Heatmap(_ref) {
       setPlotType: setPlotType,
       children: /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
-        children: ["Select one or more", " ", showVarsBtn ? /*#__PURE__*/_jsx(Button, {
+        children: ["Select one or more", ' ', showVarsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowVars,
           children: "features"
-        }) : "features", " ", "to display their expression, then choose a", " ", showObsBtn ? /*#__PURE__*/_jsx(Button, {
+        }) : 'features', ' ', "to display their expression, then choose a", ' ', showObsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowObs,
           children: "category"
-        }) : "category", " ", "to group observations in the heatmap."]
+        }) : 'category', ' ', "to group observations in the heatmap."]
       })
     });
   } else {
@@ -152,7 +142,7 @@ export function Heatmap(_ref) {
       heading: "Error displaying the heatmap",
       plotType: plotType,
       setPlotType: setPlotType,
-      children: serverError.message || "An unexpected error occurred while generating the plot."
+      children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });
   }
 }

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

@@ -1,5 +1,5 @@
-import { Form } from "react-bootstrap";
-import { ColorscaleSelect } from "../controls/Controls";
+import { Form } from 'react-bootstrap';
+import { ColorscaleSelect } from '../controls/Controls';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export function HeatmapControls() {
   return /*#__PURE__*/_jsx(_Fragment, {

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

@@ -10,7 +10,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 export default function DotPlotIcon(_ref) {
   let {
       size = 40,
-      colour = "#000",
+      colour = '#000',
       gap = 20
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);

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

@@ -10,7 +10,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 export default function HeatmapIcon(_ref) {
   let {
       size = 40,
-      colour = "#000",
+      colour = '#000',
       gap = 1
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/components/icons/MatrixPlotIcon.1.js

@@ -10,7 +10,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 export default function MatrixPlotIcon(_ref) {
   let {
       size = 40,
-      colour = "#000",
+      colour = '#000',
       gap = 2
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);

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

@@ -10,7 +10,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 export default function MatrixPlotIcon(_ref) {
   let {
       size = 40,
-      colour = "#000",
+      colour = '#000',
       gap = 2
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/components/icons/ScatterplotIcon.1.js

@@ -10,7 +10,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 export default function ScatterplotIcon(_ref) {
   let {
       size = 40,
-      colour = "#000"
+      colour = '#000'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // Points with cluster assignments

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

@@ -10,7 +10,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 export default function ScatterplotIcon(_ref) {
   let {
       size = 40,
-      colour = "#000"
+      colour = '#000'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // Points with cluster assignments

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

@@ -10,7 +10,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 export default function ViolinPlotIcon(_ref) {
   let {
       size = 40,
-      colour = "#000"
+      colour = '#000'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({

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

@@ -3,19 +3,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 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 { useCallback, useEffect, 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 { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings } from "../../context/SettingsContext";
-import { LoadingSpinner } from "../../utils/LoadingIndicators";
-import { useDebouncedFetch } from "../../utils/requests";
-import { useSelectedMultiVar, useSelectedObs } from "../../utils/Resolver";
-import { PlotAlert } from "../full-page/PlotAlert";
-import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
+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 { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings } from '../../context/SettingsContext';
+import { LoadingSpinner } from '../../utils/LoadingIndicators';
+import { useDebouncedFetch } from '../../utils/requests';
+import { useSelectedMultiVar, useSelectedObs } from '../../utils/Resolver';
+import { PlotAlert } from '../full-page/PlotAlert';
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from '../toolbar/Toolbar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Matrixplot(_ref) {
   let {
@@ -28,7 +28,7 @@ export function Matrixplot(_ref) {
     plotType,
     setPlotType
   } = _ref;
-  const ENDPOINT = "matrixplot";
+  const ENDPOINT = 'matrixplot';
   const dataset = useDataset();
   const settings = useSettings();
   const {
@@ -41,7 +41,7 @@ export function Matrixplot(_ref) {
   const [hasSelections, setHasSelections] = useState(false);
   const selectedObs = useSelectedObs();
   const selectedMultiVar = useSelectedMultiVar();
-  const [params, setParams] = useState({
+  const params = useMemo(() => ({
     url: dataset.url,
     obsCol: selectedObs,
     obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
@@ -52,28 +52,14 @@ export function Matrixplot(_ref) {
     obsIndices: isSliced ? [...(obsIndices || [])] : null,
     standardScale: settings.controls.scale.matrixplot,
     varNamesCol: dataset.varNamesCol
-  });
+  }), [dataset.url, dataset.varNamesCol, isSliced, obsIndices, selectedMultiVar, selectedObs, settings.controls.scale.matrixplot]);
   useEffect(() => {
     if (selectedObs && selectedMultiVar.length) {
       setHasSelections(true);
     } else {
       setHasSelections(false);
     }
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        url: dataset.url,
-        obsCol: selectedObs,
-        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
-        varKeys: selectedMultiVar.map(i => i.isSet ? {
-          name: i.name,
-          indices: i.vars.map(v => v.index)
-        } : i.index),
-        obsIndices: isSliced ? [...(obsIndices || [])] : null,
-        standardScale: settings.controls.scale.matrixplot,
-        varNamesCol: dataset.varNamesCol
-      });
-    });
-  }, [settings.controls.scale.matrixplot, selectedMultiVar, selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
+  }, [selectedMultiVar.length, selectedObs]);
   const updateColorscale = useCallback(colorscale => {
     setLayout(l => {
       return _objectSpread(_objectSpread({}, l), {}, {
@@ -88,13 +74,16 @@ export function Matrixplot(_ref) {
     isPending,
     serverError
   } = useDebouncedFetch(ENDPOINT, params, 500, {
-    enabled: !!params.obsCol && !!params.varKeys.length
+    isEnabled: params => !!params.obsCol && !!params.varKeys.length
   });
   useEffect(() => {
-    if (hasSelections && !isPending && !serverError) {
+    if (hasSelections && !!fetchedData && !isPending && !serverError) {
       setData(fetchedData.data);
       setLayout(fetchedData.layout);
       updateColorscale(colorscale.current);
+    } else {
+      setData([]);
+      setLayout({});
     }
   }, [fetchedData, hasSelections, isPending, serverError, updateColorscale]);
   useEffect(() => {
@@ -118,8 +107,8 @@ export function Matrixplot(_ref) {
           layout: layout,
           useResizeHandler: true,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           config: {
             displaylogo: false,
@@ -135,17 +124,17 @@ export function Matrixplot(_ref) {
       setPlotType: setPlotType,
       children: /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
-        children: ["Select a", " ", showObsBtn ? /*#__PURE__*/_jsx(Button, {
+        children: ["Select a", ' ', showObsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowObs,
           children: "category"
-        }) : "category", " ", "to group observations, then choose one or more", " ", showVarsBtn ? /*#__PURE__*/_jsx(Button, {
+        }) : 'category', ' ', "to group observations, then choose one or more", ' ', showVarsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowVars,
           children: "features"
-        }) : "features", " ", "to display the matrix plot."]
+        }) : 'features', ' ', "to display the matrix plot."]
       })
     });
   } else {
@@ -154,7 +143,7 @@ export function Matrixplot(_ref) {
       heading: "Error displaying the matrix plot",
       plotType: plotType,
       setPlotType: setPlotType,
-      children: serverError.message || "An unexpected error occurred while generating the plot."
+      children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });
   }
 }

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

@@ -1,5 +1,5 @@
-import { Form } from "react-bootstrap";
-import { ColorscaleSelect, ScaleSelect } from "../controls/Controls";
+import { Form } from 'react-bootstrap';
+import { ColorscaleSelect, ScaleSelect } from '../controls/Controls';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function MatrixplotControls() {
   return /*#__PURE__*/_jsx(_Fragment, {