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

package/README.md

@@ -21,7 +21,7 @@ Install packages
 npm i
 ```
 
-Create a ``.env`` file within ``sites/demo`` to store environment variables for Vite to use. Within it set ``REACT_APP_API_URL`` to the backend API url like
+Create a `.env` file within `sites/demo` to store environment variables for Vite to use. Within it set `REACT_APP_API_URL` to the backend API url like
 
 ```sh
 REACT_APP_API_URL=http://localhost:5000/api/

package/dist/cjs/components/controls/Controls.js

@@ -22,7 +22,7 @@ const ColorscaleSelect = () => {
       value: settings.controls.colorScale,
       onChange: e => {
         dispatch({
-          type: "set.controls.colorScale",
+          type: 'set.controls.colorScale',
           colorScale: e.target.value
         });
       },
@@ -50,16 +50,16 @@ const ScaleSelect = _ref => {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Label, {
       children: "Standard scale"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Select, {
-      value: settings.controls.scale[plot] || "",
+      value: settings.controls.scale[plot] || '',
       onChange: e => {
         dispatch({
-          type: "set.controls.scale",
+          type: 'set.controls.scale',
           plot: plot,
           scale: !e.target.value.length ? null : e.target.value
         });
       },
       children: _lodash.default.values(SCALES[plot]).map(scale => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: scale.value || "",
+        value: scale.value || '',
         children: scale.name
       }, scale.value))
     })]

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

@@ -35,7 +35,7 @@ function Dotplot(_ref) {
     plotType,
     setPlotType
   } = _ref;
-  const ENDPOINT = "dotplot";
+  const ENDPOINT = 'dotplot';
   const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const {
@@ -49,7 +49,7 @@ function Dotplot(_ref) {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const selectedObs = (0, _Resolver.useSelectedObs)();
   const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
-  const [params, setParams] = (0, _react.useState)({
+  const params = (0, _react.useMemo)(() => ({
     url: dataset.url,
     obsCol: selectedObs,
     obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
@@ -62,7 +62,7 @@ function Dotplot(_ref) {
     meanOnlyExpressed: settings.controls.meanOnlyExpressed,
     expressionCutoff: settings.controls.expressionCutoff,
     varNamesCol: dataset.varNamesCol
-  });
+  }), [dataset.url, dataset.varNamesCol, isSliced, obsIndices, selectedMultiVar, selectedObs, settings.controls.expressionCutoff, settings.controls.meanOnlyExpressed, settings.controls.scale.dotplot]);
   // @TODO: set default scale
 
   (0, _react.useEffect)(() => {
@@ -71,22 +71,6 @@ function Dotplot(_ref) {
     } else {
       setHasSelections(false);
     }
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        url: dataset.url,
-        obsCol: selectedObs,
-        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.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.dotplot,
-        meanOnlyExpressed: settings.controls.meanOnlyExpressed,
-        expressionCutoff: settings.controls.expressionCutoff,
-        varNamesCol: dataset.varNamesCol
-      });
-    });
   }, [dataset.url, selectedObs, settings.controls.scale.dotplot, settings.controls.meanOnlyExpressed, settings.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices, selectedMultiVar]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
@@ -102,15 +86,15 @@ function Dotplot(_ref) {
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: !!params.obsCol && !!params.varKeys.length
+    isEnabled: params => !!params.obsCol && !!params.varKeys.length
   });
   (0, _react.useEffect)(() => {
-    if (hasSelections && !isPending && !serverError) {
+    if (hasSelections && !!fetchedData && !isPending && !serverError) {
       setData(fetchedData.data);
       setLayout(fetchedData.layout);
       // @TODO: keep colorAxis range from settings
       dispatch({
-        type: "set.controls.colorAxis",
+        type: 'set.controls.colorAxis',
         colorAxis: {
           dmin: fetchedData.range.min.toFixed(1),
           dmax: fetchedData.range.max.toFixed(1),
@@ -119,6 +103,9 @@ function Dotplot(_ref) {
         }
       });
       updateColorscale(colorscale.current);
+    } else {
+      setData([]);
+      setLayout({});
     }
   }, [fetchedData, isPending, serverError, hasSelections, dispatch, updateColorscale]);
   (0, _react.useEffect)(() => {
@@ -152,8 +139,8 @@ function Dotplot(_ref) {
           layout: layout,
           useResizeHandler: true,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           config: {
             displaylogo: false,
@@ -169,17 +156,17 @@ function Dotplot(_ref) {
       setPlotType: setPlotType,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
-        children: ["Select one or more", " ", showVarsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        children: ["Select one or more", ' ', showVarsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowVars,
           children: "features"
-        }) : "features", " ", "to display their expression across groups, then choose a", " ", showObsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        }) : 'features', ' ', "to display their expression across groups, then choose a", ' ', showObsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowObs,
           children: "category"
-        }) : "category", " ", "to group observations in the dotplot."]
+        }) : 'category', ' ', "to group observations in the dotplot."]
       })
     });
   } else {
@@ -188,7 +175,7 @@ function Dotplot(_ref) {
       heading: "Error displaying the dotplot",
       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/cjs/components/dotplot/DotplotControls.js

@@ -78,7 +78,7 @@ function DotplotControls() {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             variant: "outline-primary",
             onClick: () => dispatch({
-              type: "set.controls.colorAxis.crange",
+              type: 'set.controls.colorAxis.crange',
               cmin: controls.colorAxis.cmin,
               cmax: controls.colorAxis.cmax
             }),
@@ -86,7 +86,7 @@ function DotplotControls() {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             variant: "outline-primary",
             onClick: () => dispatch({
-              type: "set.controls.colorAxis.crange",
+              type: 'set.controls.colorAxis.crange',
               cmin: settings.controls.colorAxis.dmin,
               cmax: settings.controls.colorAxis.dmax
             }),
@@ -103,7 +103,7 @@ function DotplotControls() {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
             size: "sm",
             type: "number",
-            step: "0.1",
+            step: '0.1',
             min: 0.0,
             value: controls.expressionCutoff,
             onChange: e => {
@@ -114,7 +114,7 @@ function DotplotControls() {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             variant: "outline-primary",
             onClick: () => dispatch({
-              type: "set.controls.expressionCutoff",
+              type: 'set.controls.expressionCutoff',
               expressionCutoff: parseFloat(controls.expressionCutoff)
             }),
             children: "Apply"
@@ -129,7 +129,7 @@ function DotplotControls() {
           checked: settings.controls.meanOnlyExpressed,
           onChange: () => {
             dispatch({
-              type: "set.controls.meanOnlyExpressed",
+              type: 'set.controls.meanOnlyExpressed',
               meanOnlyExpressed: !settings.controls.meanOnlyExpressed
             });
           }

package/dist/cjs/components/full-page/FullPage.js

@@ -7,7 +7,6 @@ exports.FullPage = FullPage;
 var _react = require("react");
 var _material = require("@mui/material");
 var _reactBootstrap = require("react-bootstrap");
-var _PlotTypeSelector = require("./PlotTypeSelector");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _Dotplot = require("../dotplot/Dotplot");
@@ -18,6 +17,7 @@ var _Matrixplot = require("../matrixplot/Matrixplot");
 var _MatrixplotControls = require("../matrixplot/MatrixplotControls");
 var _ObsList = require("../obs-list/ObsList");
 var _offcanvas = require("../offcanvas");
+var _PlotTypeSelector = require("./PlotTypeSelector");
 var _Pseudospatial = require("../pseudospatial/Pseudospatial");
 var _PseudospatialToolbar = require("../pseudospatial/PseudospatialToolbar");
 var _Scatterplot = require("../scatterplot/Scatterplot");
@@ -59,7 +59,6 @@ function FullPage(_ref) {
   const XlBreakpoint = (0, _material.useMediaQuery)(_constants.BREAKPOINTS.XL);
   const showObsBtn = LgBreakpoint;
   const showVarsBtn = XlBreakpoint;
-  const showPlotBtn = showVarsBtn;
   const {
     plotControls,
     varMode,

package/dist/cjs/components/full-page/PlotAlert.js

@@ -11,7 +11,7 @@ var _constants = require("../../constants/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function PlotAlert(_ref) {
   let {
-    variant = "warning",
+    variant = 'warning',
     plotType = _constants.PLOT_TYPES.SCATTERPLOT,
     setPlotType,
     heading,

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

@@ -22,28 +22,28 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 const plotTypes = [{
   type: _constants.PLOT_TYPES.SCATTERPLOT,
   icon: _ScatterplotIcon.default,
-  name: "Scatterplot",
-  description: "Displays cells in 2D based on dimensionality reduction."
+  name: 'Scatterplot',
+  description: 'Displays cells in 2D based on dimensionality reduction.'
 }, {
   type: _constants.PLOT_TYPES.MATRIXPLOT,
   icon: _MatrixPlotIcon.default,
-  name: "Matrix Plot",
-  description: "Shows expression values of genes across categories."
+  name: 'Matrix Plot',
+  description: 'Shows expression values of genes across categories.'
 }, {
   type: _constants.PLOT_TYPES.DOTPLOT,
   icon: _DotPlotIcon.default,
-  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: _constants.PLOT_TYPES.HEATMAP,
   icon: _HeatmapIcon.default,
-  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: _constants.PLOT_TYPES.VIOLINPLOT,
   icon: _ViolinPlotIcon.default,
-  name: "Violin Plot",
-  description: "Displays distribution of gene expression across categories."
+  name: 'Violin Plot',
+  description: 'Displays distribution of gene expression across categories.'
 }];
 function PlotTypeSelector(_ref) {
   let {
@@ -68,7 +68,7 @@ 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__*/(0, _jsxRuntime.jsx)(_StyledTooltip.StyledTooltip, {
         title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
@@ -79,7 +79,7 @@ function PlotTypeSelector(_ref) {
         slotProps: {
           popper: {
             modifiers: [{
-              name: "offset",
+              name: 'offset',
               options: {
                 offset: [0, -12]
               }
@@ -90,7 +90,7 @@ 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__*/(0, _jsxRuntime.jsx)(Icon, {
             size: 34,
             colour: colour

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

@@ -35,7 +35,7 @@ function Heatmap(_ref) {
     plotType,
     setPlotType
   } = _ref;
-  const ENDPOINT = "heatmap";
+  const ENDPOINT = 'heatmap';
   const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const {
@@ -48,7 +48,7 @@ function Heatmap(_ref) {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const selectedObs = (0, _Resolver.useSelectedObs)();
   const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
-  const [params, setParams] = (0, _react.useState)({
+  const params = (0, _react.useMemo)(() => ({
     url: dataset.url,
     obsCol: selectedObs,
     obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
@@ -58,26 +58,13 @@ function Heatmap(_ref) {
     } : i.index),
     obsIndices: isSliced ? [...(obsIndices || [])] : null,
     varNamesCol: dataset.varNamesCol
-  });
+  }), [dataset.url, dataset.varNamesCol, isSliced, obsIndices, selectedMultiVar, selectedObs]);
   (0, _react.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 : _lodash.default.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 = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
@@ -93,13 +80,16 @@ function Heatmap(_ref) {
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: !!params.obsCol && !!params.varKeys.length
+    isEnabled: params => !!params.obsCol && !!params.varKeys.length
   });
   (0, _react.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]);
   (0, _react.useEffect)(() => {
@@ -123,8 +113,8 @@ function Heatmap(_ref) {
           layout: layout,
           useResizeHandler: true,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           config: {
             displaylogo: false,
@@ -140,17 +130,17 @@ function Heatmap(_ref) {
       setPlotType: setPlotType,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
-        children: ["Select one or more", " ", showVarsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        children: ["Select one or more", ' ', showVarsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowVars,
           children: "features"
-        }) : "features", " ", "to display their expression, then choose a", " ", showObsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        }) : 'features', ' ', "to display their expression, then choose a", ' ', showObsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.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 {
@@ -159,7 +149,7 @@ 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/cjs/components/icons/DotPlotIcon.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -35,7 +35,7 @@ function Matrixplot(_ref) {
     plotType,
     setPlotType
   } = _ref;
-  const ENDPOINT = "matrixplot";
+  const ENDPOINT = 'matrixplot';
   const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const {
@@ -48,7 +48,7 @@ function Matrixplot(_ref) {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const selectedObs = (0, _Resolver.useSelectedObs)();
   const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
-  const [params, setParams] = (0, _react.useState)({
+  const params = (0, _react.useMemo)(() => ({
     url: dataset.url,
     obsCol: selectedObs,
     obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
@@ -59,28 +59,14 @@ 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]);
   (0, _react.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 : _lodash.default.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 = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return _objectSpread(_objectSpread({}, l), {}, {
@@ -95,13 +81,16 @@ function Matrixplot(_ref) {
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: !!params.obsCol && !!params.varKeys.length
+    isEnabled: params => !!params.obsCol && !!params.varKeys.length
   });
   (0, _react.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]);
   (0, _react.useEffect)(() => {
@@ -125,8 +114,8 @@ function Matrixplot(_ref) {
           layout: layout,
           useResizeHandler: true,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           config: {
             displaylogo: false,
@@ -142,17 +131,17 @@ function Matrixplot(_ref) {
       setPlotType: setPlotType,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
-        children: ["Select a", " ", showObsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        children: ["Select a", ' ', showObsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.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__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        }) : 'category', ' ', "to group observations, then choose one or more", ' ', showVarsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.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 {
@@ -161,7 +150,7 @@ 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.'
     });
   }
 }