@haniffalab/cherita-react 1.3.0 → 1.4.0-dev.2025-06-09.09fbcbf5

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

@@ -0,0 +1,50 @@
+import React from "react";
+import dotplotIcon from "../../../assets/images/plots/dotplot.svg";
+import heatmapIcon from "../../../assets/images/plots/heatmap.svg";
+import matrixplotIcon from "../../../assets/images/plots/matrixplot.svg";
+import scatterplotIcon from "../../../assets/images/plots/scatterplot.svg";
+import violinIcon from "../../../assets/images/plots/violin.svg";
+import { PLOT_TYPES } from "../../constants/constants";
+const iconMap = {
+  [PLOT_TYPES.DOTPLOT]: dotplotIcon,
+  [PLOT_TYPES.MATRIXPLOT]: matrixplotIcon,
+  [PLOT_TYPES.VIOLINPLOT]: violinIcon,
+  [PLOT_TYPES.SCATTERPLOT]: scatterplotIcon,
+  [PLOT_TYPES.HEATMAP]: heatmapIcon
+};
+const plotTypes = Object.entries(iconMap).map(_ref => {
+  let [type, icon] = _ref;
+  return {
+    type,
+    icon,
+    alt: type.charAt(0).toUpperCase() + type.slice(1)
+  };
+});
+export function PlotTypeSelector(_ref2) {
+  let {
+    currentType,
+    onChange
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "d-flex gap-2 justify-content-between"
+  }, plotTypes.map(_ref3 => {
+    let {
+      type,
+      icon,
+      alt
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("img", {
+      key: type,
+      src: icon,
+      alt: alt,
+      height: 32,
+      width: 32,
+      className: "plotselector-icon".concat(currentType === type ? " active" : ""),
+      onClick: () => onChange(type),
+      style: {
+        borderBottom: currentType === type ? "2px solid #007bff" : "none"
+      },
+      title: alt
+    });
+  }));
+}

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

@@ -5,15 +5,25 @@ 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 React, { useCallback, useEffect, useRef, useState } from "react";
 import _ from "lodash";
-import { Alert } from "react-bootstrap";
+import { Alert, 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";
-export function Heatmap() {
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
+export function Heatmap(_ref) {
   var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
+  let {
+    showObsBtn = false,
+    showVarsBtn = false,
+    showCtrlsBtn = false,
+    setShowObs,
+    setShowVars,
+    setShowControls
+  } = _ref;
   const ENDPOINT = "heatmap";
   const dataset = useDataset();
   const settings = useSettings();
@@ -90,17 +100,29 @@ export function Heatmap() {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
+  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
+    onClick: setShowObs
+  }), showVarsBtn && VarPlotlyToolbar({
+    onClick: setShowVars
+  }), showCtrlsBtn && ControlsPlotlyToolbar({
+    onClick: setShowControls
+  })]);
+  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-heatmap position-relative"
+        className: "cherita-plot cherita-heatmap position-relative"
       }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          maxWidth: "100%",
-          maxHeight: "100%"
+          width: "100%",
+          height: "100%"
+        },
+        config: {
+          displaylogo: false,
+          modeBarButtons: modeBarButtons
         }
       }));
     }
@@ -108,7 +130,15 @@ export function Heatmap() {
       className: "cherita-heatmap"
     }, /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select features and a category"));
+    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "features") : "features", " ", "and a", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowObs
+    }, "category") : "category"));
   } else {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
       variant: "danger"

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

@@ -5,15 +5,25 @@ 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 React, { useCallback, useEffect, useRef, useState } from "react";
 import _ from "lodash";
-import { Alert } from "react-bootstrap";
+import { Alert, 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";
-export function Matrixplot() {
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
+export function Matrixplot(_ref) {
   var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
+  let {
+    showObsBtn = false,
+    showVarsBtn = false,
+    showCtrlsBtn = false,
+    setShowObs,
+    setShowVars,
+    setShowControls
+  } = _ref;
   const ENDPOINT = "matrixplot";
   const dataset = useDataset();
   const settings = useSettings();
@@ -92,17 +102,29 @@ export function Matrixplot() {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
+  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
+    onClick: setShowObs
+  }), showVarsBtn && VarPlotlyToolbar({
+    onClick: setShowVars
+  }), showCtrlsBtn && ControlsPlotlyToolbar({
+    onClick: setShowControls
+  })]);
+  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-matrixplot position-relative"
+        className: "cherita-plot cherita-matrixplot position-relative"
       }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          maxWidth: "100%",
-          maxHeight: "100%"
+          width: "100%",
+          height: "100%"
+        },
+        config: {
+          displaylogo: false,
+          modeBarButtons: modeBarButtons
         }
       }));
     }
@@ -110,7 +132,15 @@ export function Matrixplot() {
       className: "cherita-matrixplot"
     }, /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select features and a category"));
+    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "features") : "features", " ", "and a", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowObs
+    }, "category") : "category"));
   } else {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
       variant: "danger"

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

@@ -44,8 +44,11 @@ import { useObsData } from "../../utils/zarrData";
 function getContinuousLabel(code, binEdges) {
   return "[ ".concat(formatNumerical(binEdges[code][0]), ", ").concat(formatNumerical(binEdges[code][1], FORMATS.EXPONENTIAL)).concat(code === binEdges.length - 1 ? " ]" : " )");
 }
-const useObsHistogram = obs => {
+const useObsHistogram = (obs, _ref) => {
   var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedVar9, _settings$selectedVar0, _settings$selectedVar1, _settings$selectedVar10;
+  let {
+    enabled = true
+  } = _ref;
   const ENDPOINT = "obs/histograms";
   const dataset = useDataset();
   const settings = useSettings();
@@ -77,7 +80,7 @@ const useObsHistogram = obs => {
     });
   }, [(_settings$selectedVar9 = settings.selectedVar) === null || _settings$selectedVar9 === void 0 ? void 0 : _settings$selectedVar9.index, (_settings$selectedVar0 = settings.selectedVar) === null || _settings$selectedVar0 === void 0 ? void 0 : _settings$selectedVar0.isSet, (_settings$selectedVar1 = settings.selectedVar) === null || _settings$selectedVar1 === void 0 ? void 0 : _settings$selectedVar1.name, (_settings$selectedVar10 = settings.selectedVar) === null || _settings$selectedVar10 === void 0 ? void 0 : _settings$selectedVar10.vars, obsIndices, isSliced, obs]);
   return useFetch(ENDPOINT, params, {
-    enabled: !!settings.selectedVar && settings.colorEncoding === COLOR_ENCODINGS.VAR,
+    enabled: enabled && !!settings.selectedVar && settings.colorEncoding === COLOR_ENCODINGS.VAR,
     refetchOnMount: false
   });
 };
@@ -124,7 +127,7 @@ const useFilteredObsData = obs => {
     pct: pct
   };
 };
-function CategoricalItem(_ref) {
+function CategoricalItem(_ref2) {
   let {
     value,
     label,
@@ -147,8 +150,12 @@ function CategoricalItem(_ref) {
       pct: null
     },
     isSliced,
+    colors = null,
     showColor = true
-  } = _ref;
+  } = _ref2;
+  const {
+    useUnsColors
+  } = useDataset();
   const {
     getColor
   } = useColor();
@@ -233,7 +240,7 @@ function CategoricalItem(_ref) {
     y: "0",
     width: "10",
     height: "10",
-    fill: "rgb(".concat(getColor({
+    fill: "rgb(".concat(getColor(_objectSpread({
       value: (code - min) / (max - min),
       categorical: true,
       grayOut: isOmitted,
@@ -241,16 +248,19 @@ function CategoricalItem(_ref) {
         alpha: 1
       },
       colorEncoding: "obs"
-    }), ")")
+    }, useUnsColors ? {
+      colorscale: colors
+    } : {})), ")")
   }))) : null))));
 }
-export function CategoricalObs(_ref2) {
+export function CategoricalObs(_ref3) {
   let {
     obs,
     toggleAll,
     toggleObs,
-    showColor = true
-  } = _ref2;
+    showColor = true,
+    showHistograms = true
+  } = _ref3;
   const settings = useSettings();
   const {
     isSliced
@@ -258,7 +268,9 @@ export function CategoricalObs(_ref2) {
   const totalCounts = _.sum(_.values(obs.value_counts));
   const min = _.min(_.values(obs.codes));
   const max = _.max(_.values(obs.codes));
-  const obsHistograms = useObsHistogram(obs);
+  const obsHistograms = useObsHistogram(obs, {
+    enabled: showHistograms
+  });
   const filteredObsData = useFilteredObsData(obs);
   const getDataAtIndex = useCallback(index => {
     var _obsHistograms$fetche;
@@ -271,7 +283,7 @@ export function CategoricalObs(_ref2) {
       },
       isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
       label: obs.values[index],
-      histogramData: settings.colorEncoding === COLOR_ENCODINGS.VAR ? {
+      histogramData: showHistograms && settings.colorEncoding === COLOR_ENCODINGS.VAR ? {
         data: (_obsHistograms$fetche = obsHistograms.fetchedData) === null || _obsHistograms$fetche === void 0 ? void 0 : _obsHistograms$fetche[obs.values[index]],
         isPending: obsHistograms.isPending,
         altColor: isSliced
@@ -283,9 +295,10 @@ export function CategoricalObs(_ref2) {
         value_counts: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts[obs.values[index]]) || 0,
         pct: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct[obs.values[index]]) || 0
       },
-      isSliced: isSliced
+      isSliced: isSliced,
+      colors: obs.colors
     };
-  }, [settings.colorEncoding, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
+  }, [obs.values, obs.codes, obs.value_counts, obs.omit, totalCounts, showHistograms, obs.colors, settings.colorEncoding, obsHistograms.fetchedData, obsHistograms.isPending, isSliced, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct]);
   showColor &= settings.colorEncoding === COLOR_ENCODINGS.OBS;
   return /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
@@ -307,10 +320,10 @@ export function CategoricalObs(_ref2) {
     estimateSize: 42
   }));
 }
-function ObsContinuousStats(_ref3) {
+function ObsContinuousStats(_ref4) {
   let {
     obs
-  } = _ref3;
+  } = _ref4;
   const ENDPOINT = "obs/distribution";
   const dataset = useDataset();
   const params = {
@@ -370,21 +383,26 @@ function ObsContinuousStats(_ref3) {
 }
 
 // @TODO: add bin controls
-// @TODO: add histogram
-export function ContinuousObs(_ref4) {
+export function ContinuousObs(_ref5) {
   let {
     obs,
     toggleAll,
-    toggleObs
-  } = _ref4;
+    toggleObs,
+    showHistograms = true
+  } = _ref5;
+  const settings = useSettings();
   const {
     isSliced
   } = useFilteredData();
   const totalCounts = _.sum(_.values(obs.value_counts));
   const min = _.min(_.values(obs.codes));
   const max = _.max(_.values(obs.codes));
+  const obsHistograms = useObsHistogram(obs, {
+    enabled: showHistograms
+  });
   const filteredObsData = useFilteredObsData(obs);
-  const getDataAtIndex = index => {
+  const getDataAtIndex = useCallback(index => {
+    var _obsHistograms$fetche2;
     return {
       value: obs.values[index],
       code: obs.codes[obs.values[index]],
@@ -394,13 +412,21 @@ export function ContinuousObs(_ref4) {
       },
       isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
       label: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges),
+      histogramData: showHistograms && settings.colorEncoding === COLOR_ENCODINGS.VAR ? {
+        data: (_obsHistograms$fetche2 = obsHistograms.fetchedData) === null || _obsHistograms$fetche2 === void 0 ? void 0 : _obsHistograms$fetche2[obs.values[index]],
+        isPending: obsHistograms.isPending,
+        altColor: isSliced
+      } : {
+        data: null,
+        isPending: false
+      },
       filteredStats: {
         value_counts: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts[obs.values[index]]) || 0,
         pct: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct[obs.values[index]]) || 0
       },
       isSliced: isSliced
     };
-  };
+  }, [filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, isSliced, obs.bins.binEdges, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, settings.colorEncoding, showHistograms, totalCounts]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
     className: "cherita-list"
@@ -417,7 +443,8 @@ export function ContinuousObs(_ref4) {
     min: min,
     max: max,
     onChange: toggleObs,
-    showColor: false
+    showColor: false,
+    estimateSize: 42
   })), /*#__PURE__*/React.createElement(ObsContinuousStats, {
     obs: obs
   }));

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

@@ -48,7 +48,9 @@ export function ObsColsList(_ref2) {
   var _settings$selectedObs;
   let {
     showColor = true,
-    enableObsGroups = true
+    enableObsGroups = true,
+    showSelectedAsActive = false,
+    showHistograms = true
   } = _ref2;
   const ENDPOINT = "obs/cols";
   const dataset = useDataset();
@@ -215,7 +217,7 @@ export function ObsColsList(_ref2) {
     }
     const inLabelObs = _.some(settings.labelObs, i => i.name === item.name);
     const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name;
-    const isColorEncoding = settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
+    const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === COLOR_ENCODINGS.OBS) && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
     return /*#__PURE__*/React.createElement("div", {
       className: "accordion-item",
       key: item.name
@@ -242,7 +244,7 @@ export function ObsColsList(_ref2) {
         event.stopPropagation();
         toggleColor(item);
       },
-      title: "Is color encoding"
+      title: showSelectedAsActive ? "Is selected" : "Is color encoding"
     }, /*#__PURE__*/React.createElement(WaterDropIcon, null)))), /*#__PURE__*/React.createElement(Accordion.Collapse, {
       eventKey: item.name
     }, /*#__PURE__*/React.createElement("div", {
@@ -255,7 +257,8 @@ export function ObsColsList(_ref2) {
       toggleLabel: () => toggleLabel(item),
       toggleSlice: () => toggleSlice(item),
       toggleColor: () => toggleColor(item),
-      showColor: showColor && isColorEncoding
+      showColor: showColor && isColorEncoding,
+      showHistograms: showHistograms
     }) : /*#__PURE__*/React.createElement(ContinuousObs, {
       key: item.name,
       obs: item,
@@ -263,7 +266,8 @@ export function ObsColsList(_ref2) {
       toggleObs: value => toggleObs(item, value),
       toggleLabel: () => toggleLabel(item),
       toggleSlice: () => toggleSlice(item),
-      toggleColor: () => toggleColor(item)
+      toggleColor: () => toggleColor(item),
+      showHistograms: showHistograms
     })))));
   };
   const groupList = _.map(_.keys(obsGroups), group => {