@haniffalab/cherita-react 2.0.0 → 2.1.0

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

@@ -30,7 +30,6 @@ function Dotplot(_ref) {
     setShowCategories,
     setShowSearch,
     setShowControls,
-    plotType,
     setPlotType,
     isFullscreen = false
   } = _ref;
@@ -160,7 +159,7 @@ function Dotplot(_ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlotAlert.PlotAlert, {
       variant: "info",
       heading: "Set up your dotplot",
-      plotType: plotType,
+      plotType: _constants.PLOT_TYPES.DOTPLOT,
       setPlotType: setPlotType,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
@@ -168,8 +167,8 @@ 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__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          children: dataset.varLabel.plural
+        }) : dataset.varLabel.plural, ' ', "to display their ", dataset.valueLabel, " across groups, then choose a", ' ', showCategoriesBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowCategories,
@@ -181,7 +180,7 @@ function Dotplot(_ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlotAlert.PlotAlert, {
       variant: "danger",
       heading: "Error displaying the dotplot",
-      plotType: plotType,
+      plotType: _constants.PLOT_TYPES.DOTPLOT,
       setPlotType: setPlotType,
       children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });

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

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DotplotControls = DotplotControls;
 var _react = require("react");
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
+var _DatasetContext = require("../../context/DatasetContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _Controls = require("../controls/Controls");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -17,6 +20,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function DotplotControls() {
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
+  const dataset = (0, _DatasetContext.useDataset)();
   const [controls, setControls] = (0, _react.useState)({
     expressionCutoff: settings.controls.expressionCutoff,
     colorAxis: {
@@ -97,8 +101,8 @@ function DotplotControls() {
         plot: "dotplot"
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Form.Group, {
         className: "mb-2",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Label, {
-          children: "Expression Cutoff"
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Form.Label, {
+          children: [_lodash.default.capitalize(dataset.valueLabel), " Cutoff"]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
             size: "sm",
@@ -125,7 +129,7 @@ function DotplotControls() {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.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/cjs/components/heatmap/Heatmap.js

@@ -30,7 +30,6 @@ function Heatmap(_ref) {
     setShowCategories,
     setShowSearch,
     setShowControls,
-    plotType,
     setPlotType,
     isFullscreen = false
   } = _ref;
@@ -134,7 +133,7 @@ function Heatmap(_ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlotAlert.PlotAlert, {
       variant: "info",
       heading: "Set up your heatmap",
-      plotType: plotType,
+      plotType: _constants.PLOT_TYPES.HEATMAP,
       setPlotType: setPlotType,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
@@ -142,8 +141,8 @@ 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__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          children: dataset.varLabel.plural
+        }) : dataset.varLabel.plural, ' ', "to display their ", dataset.valueLabel, ", then choose a", ' ', showCategoriesBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowCategories,
@@ -155,7 +154,7 @@ function Heatmap(_ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlotAlert.PlotAlert, {
       variant: "danger",
       heading: "Error displaying the heatmap",
-      plotType: plotType,
+      plotType: _constants.PLOT_TYPES.HEATMAP,
       setPlotType: setPlotType,
       children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });

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

@@ -20,8 +20,8 @@ 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/cjs/components/matrixplot/Matrixplot.js

@@ -30,7 +30,6 @@ function Matrixplot(_ref) {
     setShowCategories,
     setShowSearch,
     setShowControls,
-    plotType,
     setPlotType,
     isFullscreen = false
   } = _ref;
@@ -135,7 +134,7 @@ function Matrixplot(_ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlotAlert.PlotAlert, {
       variant: "info",
       heading: "Set up your matrix plot",
-      plotType: plotType,
+      plotType: _constants.PLOT_TYPES.MATRIXPLOT,
       setPlotType: setPlotType,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
@@ -148,15 +147,15 @@ 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__*/(0, _jsxRuntime.jsx)(_PlotAlert.PlotAlert, {
       variant: "danger",
       heading: "Error displaying the matrix plot",
-      plotType: plotType,
+      plotType: _constants.PLOT_TYPES.MATRIXPLOT,
       setPlotType: setPlotType,
       children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });

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

@@ -163,7 +163,10 @@ function CategoricalItem(_ref2) {
   } = (0, _DatasetContext.useDataset)();
   const {
     getColor
-  } = (0, _colorHelper.useColor)();
+  } = (0, _colorHelper.useColor)({
+    isCategorical: true,
+    colorscale: useUnsColors ? colors : null
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "virtualized-list-wrapper ps-1",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
@@ -258,17 +261,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/cjs/components/offcanvas/OffCanvas.js

@@ -10,6 +10,7 @@ exports.OffcanvasObsm = OffcanvasObsm;
 exports.OffcanvasVars = OffcanvasVars;
 var _Offcanvas = _interopRequireDefault(require("react-bootstrap/Offcanvas"));
 var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
 var _ObsExplorer = require("../../views/PerturbationMap/ObsExplorer");
 var _ObsList = require("../obs-list/ObsList");
 var _ObsmList = require("../obsm-list/ObsmList");
@@ -72,14 +73,15 @@ function OffcanvasVars(_ref3) {
     handleClose,
     mode = _constants.SELECTION_MODES.MULTIPLE
   } = _ref3;
+  const dataset = (0, _DatasetContext.useDataset)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
     show: show,
     onHide: handleClose,
     className: "offcanvas-vars",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
       closeButton: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
-        children: "Features"
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default.Title, {
+        children: ["Search for ", dataset.varLabel.plural]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -122,13 +124,14 @@ function OffcanvasObsExplorer(_ref5) {
       handleClose
     } = _ref5,
     props = _objectWithoutProperties(_ref5, _excluded3);
+  const dataset = (0, _DatasetContext.useDataset)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
     show: show,
     onHide: handleClose,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
       closeButton: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
-        children: "Gene Perturbations"
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default.Title, {
+        children: ["Search for ", dataset.obsLabel.plural]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
       className: "p-1",

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PlotTypeSelector = PlotTypeSelector;
 var _react = require("react");
 var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
 var _StyledTooltip = require("../../utils/StyledTooltip");
 var _DotPlotIcon = _interopRequireDefault(require("../icons/DotPlotIcon"));
 var _HeatmapIcon = _interopRequireDefault(require("../icons/HeatmapIcon"));
@@ -23,33 +24,67 @@ const plotTypes = [{
   type: _constants.PLOT_TYPES.SCATTERPLOT,
   icon: _ScatterplotIcon.default,
   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: _constants.PLOT_TYPES.MATRIXPLOT,
   icon: _MatrixPlotIcon.default,
   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: _constants.PLOT_TYPES.DOTPLOT,
   icon: _DotPlotIcon.default,
   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: _constants.PLOT_TYPES.HEATMAP,
   icon: _HeatmapIcon.default,
   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: _constants.PLOT_TYPES.VIOLINPLOT,
   icon: _ViolinPlotIcon.default,
   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, ".");
+  }
 }];
-function PlotTypeSelector(_ref) {
+function PlotTypeSelector(_ref6) {
   let {
     currentType,
     onChange
-  } = _ref;
+  } = _ref6;
+  const {
+    obsLabel,
+    varLabel,
+    valueLabel
+  } = (0, _DatasetContext.useDataset)();
   const [hoveredMap, setHoveredMap] = (0, _react.useState)({});
   const handleMouseEnter = type => setHoveredMap(prev => _objectSpread(_objectSpread({}, prev), {}, {
     [type]: true
@@ -59,13 +94,13 @@ function PlotTypeSelector(_ref) {
   }));
   return /*#__PURE__*/(0, _jsxRuntime.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';
@@ -73,7 +108,11 @@ function PlotTypeSelector(_ref) {
         title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
             children: name
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), description]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), description({
+            obsLabel,
+            varLabel,
+            valueLabel
+          })]
         }),
         placement: "bottom",
         slotProps: {

package/dist/cjs/components/pseudospatial/Pseudospatial.js

@@ -93,7 +93,8 @@ function Pseudospatial(_ref) {
     setPlotType
   } = _ref;
   const {
-    imageUrl
+    imageUrl,
+    valueLabel
   } = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
@@ -101,7 +102,9 @@ function Pseudospatial(_ref) {
   const [layout, setLayout] = (0, _react.useState)({});
   const {
     getColor
-  } = (0, _colorHelper.useColor)();
+  } = (0, _colorHelper.useColor)({
+    isCategorical: false
+  });
   const colorscale = (0, _react.useRef)(settings.controls.colorScale);
   const {
     valueMin,
@@ -137,7 +140,7 @@ function Pseudospatial(_ref) {
           return trace;
         }
         const color = (0, _colorHelper.rgbToHex)(getColor({
-          value: (v - min) / (max - min)
+          value: (v - min) / Math.max(max - min, 1e-6)
         }));
         return _objectSpread(_objectSpread({}, trace), {}, {
           fillcolor: color,
@@ -180,7 +183,7 @@ function Pseudospatial(_ref) {
             return trace;
           }
           const color = (0, _colorHelper.rgbToHex)(getColor({
-            value: (v - min) / (max - min)
+            value: (v - min) / Math.max(max - min, 1e-6)
           }));
           return _objectSpread(_objectSpread({}, trace), {}, {
             fillcolor: color,
@@ -279,7 +282,7 @@ function Pseudospatial(_ref) {
         }), hasSelections && showLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
           min: layout === null || layout === void 0 || (_layout$coloraxis5 = layout.coloraxis) === null || _layout$coloraxis5 === void 0 ? void 0 : _layout$coloraxis5.cmin,
           max: layout === null || layout === void 0 || (_layout$coloraxis6 = layout.coloraxis) === null || _layout$coloraxis6 === void 0 ? void 0 : _layout$coloraxis6.cmax,
-          addText: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE ? ' - Mean expression' : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL ? ' - %' : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS ? ' - Mean value' : ''
+          addText: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE ? " - Mean ".concat(valueLabel) : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL ? ' - %' : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS ? ' - Mean value' : ''
         })]
       })
     });