@haniffalab/cherita-react 1.3.0 → 1.4.0-dev.2025-06-09.7cd38232

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

@@ -8,11 +8,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
+var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _Toolbar = require("../toolbar/Toolbar");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -20,8 +22,16 @@ 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); }
-function Heatmap() {
+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 = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
@@ -98,17 +108,29 @@ function Heatmap() {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
+  const customModeBarButtons = _lodash.default.compact([showObsBtn && (0, _Toolbar.ObsPlotlyToolbar)({
+    onClick: setShowObs
+  }), showVarsBtn && (0, _Toolbar.VarPlotlyToolbar)({
+    onClick: setShowVars
+  }), showCtrlsBtn && (0, _Toolbar.ControlsPlotlyToolbar)({
+    onClick: setShowControls
+  })]);
+  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, _constants.PLOTLY_MODEBAR_BUTTONS] : [_constants.PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "cherita-heatmap position-relative"
+        className: "cherita-plot cherita-heatmap position-relative"
       }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          maxWidth: "100%",
-          maxHeight: "100%"
+          width: "100%",
+          height: "100%"
+        },
+        config: {
+          displaylogo: false,
+          modeBarButtons: modeBarButtons
         }
       }));
     }
@@ -116,7 +138,15 @@ function Heatmap() {
       className: "cherita-heatmap"
     }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "light"
-    }, "Select features and a category"));
+    }, "Select", " ", showVarsBtn ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "features") : "features", " ", "and a", " ", showObsBtn ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowObs
+    }, "category") : "category"));
   } else {
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "danger"

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

@@ -8,11 +8,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
+var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _Toolbar = require("../toolbar/Toolbar");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -20,8 +22,16 @@ 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); }
-function Matrixplot() {
+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 = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
@@ -100,17 +110,29 @@ function Matrixplot() {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
+  const customModeBarButtons = _lodash.default.compact([showObsBtn && (0, _Toolbar.ObsPlotlyToolbar)({
+    onClick: setShowObs
+  }), showVarsBtn && (0, _Toolbar.VarPlotlyToolbar)({
+    onClick: setShowVars
+  }), showCtrlsBtn && (0, _Toolbar.ControlsPlotlyToolbar)({
+    onClick: setShowControls
+  })]);
+  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, _constants.PLOTLY_MODEBAR_BUTTONS] : [_constants.PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "cherita-matrixplot position-relative"
+        className: "cherita-plot cherita-matrixplot position-relative"
       }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          maxWidth: "100%",
-          maxHeight: "100%"
+          width: "100%",
+          height: "100%"
+        },
+        config: {
+          displaylogo: false,
+          modeBarButtons: modeBarButtons
         }
       }));
     }
@@ -118,7 +140,15 @@ function Matrixplot() {
       className: "cherita-matrixplot"
     }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "light"
-    }, "Select features and a category"));
+    }, "Select", " ", showVarsBtn ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "features") : "features", " ", "and a", " ", showObsBtn ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowObs
+    }, "category") : "category"));
   } else {
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "danger"

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

@@ -52,8 +52,11 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function getContinuousLabel(code, binEdges) {
   return "[ ".concat((0, _string.formatNumerical)(binEdges[code][0]), ", ").concat((0, _string.formatNumerical)(binEdges[code][1], _string.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 = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
@@ -85,7 +88,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 (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: !!settings.selectedVar && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
+    enabled: enabled && !!settings.selectedVar && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
     refetchOnMount: false
   });
 };
@@ -132,7 +135,7 @@ const useFilteredObsData = obs => {
     pct: pct
   };
 };
-function CategoricalItem(_ref) {
+function CategoricalItem(_ref2) {
   let {
     value,
     label,
@@ -155,8 +158,12 @@ function CategoricalItem(_ref) {
       pct: null
     },
     isSliced,
+    colors = null,
     showColor = true
-  } = _ref;
+  } = _ref2;
+  const {
+    useUnsColors
+  } = (0, _DatasetContext.useDataset)();
   const {
     getColor
   } = (0, _colorHelper.useColor)();
@@ -241,7 +248,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,
@@ -249,16 +256,19 @@ function CategoricalItem(_ref) {
         alpha: 1
       },
       colorEncoding: "obs"
-    }), ")")
+    }, useUnsColors ? {
+      colorscale: colors
+    } : {})), ")")
   }))) : null))));
 }
-function CategoricalObs(_ref2) {
+function CategoricalObs(_ref3) {
   let {
     obs,
     toggleAll,
     toggleObs,
-    showColor = true
-  } = _ref2;
+    showColor = true,
+    showHistograms = true
+  } = _ref3;
   const settings = (0, _SettingsContext.useSettings)();
   const {
     isSliced
@@ -266,7 +276,9 @@ function CategoricalObs(_ref2) {
   const totalCounts = _lodash.default.sum(_lodash.default.values(obs.value_counts));
   const min = _lodash.default.min(_lodash.default.values(obs.codes));
   const max = _lodash.default.max(_lodash.default.values(obs.codes));
-  const obsHistograms = useObsHistogram(obs);
+  const obsHistograms = useObsHistogram(obs, {
+    enabled: showHistograms
+  });
   const filteredObsData = useFilteredObsData(obs);
   const getDataAtIndex = (0, _react.useCallback)(index => {
     var _obsHistograms$fetche;
@@ -279,7 +291,7 @@ function CategoricalObs(_ref2) {
       },
       isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
       label: obs.values[index],
-      histogramData: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? {
+      histogramData: showHistograms && settings.colorEncoding === _constants.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
@@ -291,9 +303,10 @@ 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 === _constants.COLOR_ENCODINGS.OBS;
   return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
     variant: "flush",
@@ -315,10 +328,10 @@ function CategoricalObs(_ref2) {
     estimateSize: 42
   }));
 }
-function ObsContinuousStats(_ref3) {
+function ObsContinuousStats(_ref4) {
   let {
     obs
-  } = _ref3;
+  } = _ref4;
   const ENDPOINT = "obs/distribution";
   const dataset = (0, _DatasetContext.useDataset)();
   const params = {
@@ -378,21 +391,26 @@ function ObsContinuousStats(_ref3) {
 }
 
 // @TODO: add bin controls
-// @TODO: add histogram
-function ContinuousObs(_ref4) {
+function ContinuousObs(_ref5) {
   let {
     obs,
     toggleAll,
-    toggleObs
-  } = _ref4;
+    toggleObs,
+    showHistograms = true
+  } = _ref5;
+  const settings = (0, _SettingsContext.useSettings)();
   const {
     isSliced
   } = (0, _FilterContext.useFilteredData)();
   const totalCounts = _lodash.default.sum(_lodash.default.values(obs.value_counts));
   const min = _lodash.default.min(_lodash.default.values(obs.codes));
   const max = _lodash.default.max(_lodash.default.values(obs.codes));
+  const obsHistograms = useObsHistogram(obs, {
+    enabled: showHistograms
+  });
   const filteredObsData = useFilteredObsData(obs);
-  const getDataAtIndex = index => {
+  const getDataAtIndex = (0, _react.useCallback)(index => {
+    var _obsHistograms$fetche2;
     return {
       value: obs.values[index],
       code: obs.codes[obs.values[index]],
@@ -402,13 +420,21 @@ function ContinuousObs(_ref4) {
       },
       isOmitted: _lodash.default.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 === _constants.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
     variant: "flush",
     className: "cherita-list"
@@ -425,7 +451,8 @@ function ContinuousObs(_ref4) {
     min: min,
     max: max,
     onChange: toggleObs,
-    showColor: false
+    showColor: false,
+    estimateSize: 42
   })), /*#__PURE__*/_react.default.createElement(ObsContinuousStats, {
     obs: obs
   }));

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

@@ -56,7 +56,9 @@ function ObsColsList(_ref2) {
   var _settings$selectedObs;
   let {
     showColor = true,
-    enableObsGroups = true
+    enableObsGroups = true,
+    showSelectedAsActive = false,
+    showHistograms = true
   } = _ref2;
   const ENDPOINT = "obs/cols";
   const dataset = (0, _DatasetContext.useDataset)();
@@ -223,7 +225,7 @@ function ObsColsList(_ref2) {
     }
     const inLabelObs = _lodash.default.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 === _constants.COLOR_ENCODINGS.OBS && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
+    const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "accordion-item",
       key: item.name
@@ -250,7 +252,7 @@ function ObsColsList(_ref2) {
         event.stopPropagation();
         toggleColor(item);
       },
-      title: "Is color encoding"
+      title: showSelectedAsActive ? "Is selected" : "Is color encoding"
     }, /*#__PURE__*/_react.default.createElement(_WaterDrop.default, null)))), /*#__PURE__*/_react.default.createElement(_Accordion.default.Collapse, {
       eventKey: item.name
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -263,7 +265,8 @@ function ObsColsList(_ref2) {
       toggleLabel: () => toggleLabel(item),
       toggleSlice: () => toggleSlice(item),
       toggleColor: () => toggleColor(item),
-      showColor: showColor && isColorEncoding
+      showColor: showColor && isColorEncoding,
+      showHistograms: showHistograms
     }) : /*#__PURE__*/_react.default.createElement(_ObsItem.ContinuousObs, {
       key: item.name,
       obs: item,
@@ -271,7 +274,8 @@ function ObsColsList(_ref2) {
       toggleObs: value => toggleObs(item, value),
       toggleLabel: () => toggleLabel(item),
       toggleSlice: () => toggleSlice(item),
-      toggleColor: () => toggleColor(item)
+      toggleColor: () => toggleColor(item),
+      showHistograms: showHistograms
     })))));
   };
   const groupList = _lodash.default.map(_lodash.default.keys(obsGroups), group => {