@haniffalab/cherita-react 1.4.1-dev.2025-10-23.e95b5a90 → 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 {
@@ -94,7 +94,7 @@ function Dotplot(_ref) {
       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),
@@ -139,8 +139,8 @@ function Dotplot(_ref) {
           layout: layout,
           useResizeHandler: true,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           config: {
             displaylogo: false,
@@ -156,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 {
@@ -175,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 {
@@ -113,8 +113,8 @@ function Heatmap(_ref) {
           layout: layout,
           useResizeHandler: true,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           config: {
             displaylogo: false,
@@ -130,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 {
@@ -149,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 {
@@ -114,8 +114,8 @@ function Matrixplot(_ref) {
           layout: layout,
           useResizeHandler: true,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           config: {
             displaylogo: false,
@@ -131,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 {
@@ -150,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.'
     });
   }
 }

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

@@ -48,13 +48,13 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 //   return { ...data, bins: bins };
 // }
 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 ? " ]" : " )");
+  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, _ref) => {
   let {
     enabled = true
   } = _ref;
-  const ENDPOINT = "obs/histograms";
+  const ENDPOINT = 'obs/histograms';
   const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const {
@@ -64,7 +64,7 @@ const useObsHistogram = (obs, _ref) => {
   const selectedVar = (0, _Resolver.useSelectedVar)();
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    obsCol: _lodash.default.omit(obs, "omit"),
+    obsCol: _lodash.default.omit(obs, 'omit'),
     // avoid re-rendering when toggling unselected obs
     varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
       name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
@@ -75,7 +75,7 @@ const useObsHistogram = (obs, _ref) => {
   (0, _react.useEffect)(() => {
     setParams(p => {
       return _objectSpread(_objectSpread({}, p), {}, {
-        obsCol: _lodash.default.omit(obs, "omit"),
+        obsCol: _lodash.default.omit(obs, 'omit'),
         varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
           name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
           indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
@@ -193,7 +193,7 @@ function CategoricalItem(_ref2) {
             className: "pl-1 m-0",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
               title: isSliced ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: ["Filtered:", " ", (0, _string.formatNumerical)(filteredStats.pct, _string.FORMATS.EXPONENTIAL), "%", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Total: ", (0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%"]
+                children: ["Filtered:", ' ', (0, _string.formatNumerical)(filteredStats.pct, _string.FORMATS.EXPONENTIAL), "%", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Total: ", (0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%"]
               }) : "".concat((0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%"),
               placement: "left",
               arrow: true,
@@ -201,8 +201,8 @@ function CategoricalItem(_ref2) {
                 className: "d-flex align-items-center",
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Badge, {
                   className: "value-count-badge",
-                  children: [" ", isSliced && parseInt(filteredStats.value_counts) !== parseInt(stats.value_counts) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                    children: [(0, _string.formatNumerical)(parseInt(filteredStats.value_counts)), " ", "out of", " "]
+                  children: [' ', isSliced && parseInt(filteredStats.value_counts) !== parseInt(stats.value_counts) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [(0, _string.formatNumerical)(parseInt(filteredStats.value_counts)), ' ', "out of", ' ']
                   }), (0, _string.formatNumerical)(parseInt(stats.value_counts), _string.FORMATS.EXPONENTIAL)]
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                   className: "value-pct-gauge-container",
@@ -211,8 +211,8 @@ function CategoricalItem(_ref2) {
                       className: "pct-gauge filtered-pct-gauge",
                       value: filteredStats.pct,
                       text: null,
-                      innerRadius: "50%",
-                      outerRadius: "75%",
+                      innerRadius: '50%',
+                      outerRadius: '75%',
                       margin: {
                         top: 0,
                         right: 0,
@@ -223,7 +223,7 @@ function CategoricalItem(_ref2) {
                       className: "pct-gauge",
                       value: stats.pct,
                       text: null,
-                      innerRadius: "75%",
+                      innerRadius: '75%',
                       margin: {
                         top: 0,
                         right: 0,
@@ -234,7 +234,7 @@ function CategoricalItem(_ref2) {
                   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.Gauge, {
                     value: stats.pct,
                     text: null,
-                    innerRadius: "50%",
+                    innerRadius: '50%',
                     margin: {
                       top: 0,
                       right: 0,
@@ -265,7 +265,7 @@ function CategoricalItem(_ref2) {
                   grayParams: {
                     alpha: 1
                   },
-                  colorEncoding: "obs"
+                  colorEncoding: 'obs'
                 }, useUnsColors ? {
                   colorscale: colors
                 } : {})), ")")
@@ -355,7 +355,7 @@ function ObsContinuousStats(_ref4) {
   let {
     obs
   } = _ref4;
-  const ENDPOINT = "obs/distribution";
+  const ENDPOINT = 'obs/distribution';
   const dataset = (0, _DatasetContext.useDataset)();
   const params = {
     url: dataset.url,
@@ -399,7 +399,7 @@ function ObsContinuousStats(_ref4) {
             valueFormatter: v => "".concat((0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)),
             slotProps: {
               popper: {
-                className: "feature-histogram-tooltip"
+                className: 'feature-histogram-tooltip'
               }
             }
           })
@@ -410,28 +410,28 @@ function ObsContinuousStats(_ref4) {
           className: "d-flex justify-content-between",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: "Min"
-          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: (0, _string.formatNumerical)(obs.min, _string.FORMATS.EXPONENTIAL)
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "d-flex justify-content-between",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: "Max"
-          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: (0, _string.formatNumerical)(obs.max, _string.FORMATS.EXPONENTIAL)
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "d-flex justify-content-between",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: "Mean"
-          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: (0, _string.formatNumerical)(obs.mean, _string.FORMATS.EXPONENTIAL)
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "d-flex justify-content-between",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: "Median"
-          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: (0, _string.formatNumerical)(obs.median, _string.FORMATS.EXPONENTIAL)
           })]
         })]
@@ -461,7 +461,7 @@ function ContinuousObs(_ref5) {
   const filteredObsData = useFilteredObsData(obs);
   const enabledHistograms = (0, _react.useMemo)(() => showHistograms && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR, [settings.colorEncoding, showHistograms]);
   const getLabel = (0, _react.useCallback)(index => {
-    return isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges);
+    return isNaN(obs.values[index]) ? 'NaN' : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges);
   }, [obs.bins.binEdges, obs.codes, obs.values]);
   const getDataAtIndex = (0, _react.useCallback)(index => {
     var _obsHistograms$fetche2;