@haniffalab/cherita-react 0.2.0-dev.2024-05-22.5ce64346 → 0.2.0-dev.2024-09-26.f9979478

package/dist/App.scss

@@ -1,6 +1,19 @@
 @import "bootstrap/scss/bootstrap";
 
 // Theme CSS
+
+.loading-spinner {
+    @extend .bg-light;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    z-index: 1;
+    opacity: 75%;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+}
+
 .cherita-container {
     margin: 40px auto;
     background-color: #fff;
@@ -13,11 +26,13 @@
 }
 
 .cherita-navbar {
+    @extend .mx-1;
+    @extend .my-2;
     position: absolute;
     z-index: 11;
-    top: 20px;
-    right: 20px;
-    left: 20px;
+    top: 0;
+    left: 0;
+    right: 0;
     border-radius: 0.25rem;
 }
 
@@ -59,55 +74,74 @@
 
 .cherita-container-scatterplot {
     position: relative;
-    min-height: 300px;
+    min-height: 500px;
     height: 100%;
 }
 
-.cherita-toolbox {
+.cherita-alert {
     position: absolute;
     z-index: 10;
-    bottom: 20px;
+    bottom: 40px;
     left: 20px;
 }
 .cherita-spatial-controls {
     position: absolute;
     z-index: 10;
-    top: 20px;
-    left: 20px;
+    top: 1rem;
+    left: 1rem;
+    width: 3rem;
 }
 
-@include media-breakpoint-down(xl) {
-    .cherita-spatial-controls {
-        top: 100px;
-    }
-    .cherita-toolbox {
-        right: 20px;
-        left: auto;
+.cherita-spatial-footer {
+    position: absolute;
+    z-index: 10;
+    bottom: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    width: 100%;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-bottom: 1rem;
+    pointer-events: none;
+    > * { 
+        pointer-events: auto;
     }
-  }
-
-
+}
 
+.cherita-toolbox {
+    order: 1;
+}
 
 .cherita-legend {
-    position: absolute;
-    z-index: 10;
-    bottom: 20px;
-    right: 20px;
-    width: 200px;
+    order: 2;
+    width: 12rem;
 }
 
+@include media-breakpoint-down(xl) {
+    .cherita-spatial-controls {
+        top: 100px;
+    }
+  }
+
 .cherita-accordion-active .accordion-button {
     background-color: $accordion-button-active-bg
 }
 
+.obs-value-list-check {
+    padding-right: 1rem;
+    word-break: auto-phrase;
+    overflow-wrap: anywhere;
+}
+
 .grad-step {
     display: inline-block;
     height: 20px;
     width: 1%;
 }
 .gradient {
-    width: 85%;
+    width: 100%;
     white-space: nowrap;
     position: relative;
     display: inline-block;

package/dist/components/Offcanvas/index.js

@@ -10,10 +10,13 @@ exports.OffcanvasObsm = OffcanvasObsm;
 exports.OffcanvasVars = OffcanvasVars;
 var _react = require("react");
 var _Offcanvas = _interopRequireDefault(require("react-bootstrap/Offcanvas"));
-var _cheritaReact = require("@haniffalab/cherita-react");
+var _constants = require("../../constants/constants");
+var _ObsList = require("../obs-list/ObsList");
+var _ObsmList = require("../obsm-list/ObsmList");
 var _SearchBar = require("../search-bar/SearchBar");
+var _VarList = require("../var-list/VarList");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function OffcanvasObs(_ref) {
   let {
     show,
@@ -30,7 +33,7 @@ function OffcanvasObs(_ref) {
         children: "Categories"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.ObsColsList, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsList.ObsColsList, {})
     })]
   });
 }
@@ -48,7 +51,7 @@ function OffcanvasObsm(_ref2) {
         children: "Embedding space"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.ObsmKeysList, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsmList.ObsmKeysList, {})
     })]
   });
 }
@@ -56,7 +59,7 @@ function OffcanvasVars(_ref3) {
   let {
     show,
     handleClose,
-    mode = _cheritaReact.SELECTION_MODES.MULTIPLE
+    mode = _constants.SELECTION_MODES.MULTIPLE
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
     show: show,
@@ -69,7 +72,7 @@ function OffcanvasVars(_ref3) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default.Body, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
         searchDiseases: true
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.VarNamesList, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarList.VarNamesList, {
         mode: mode
       })]
     })]

package/dist/components/dotplot/Dotplot.js

@@ -4,200 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Dotplot = Dotplot;
-exports.DotplotControls = DotplotControls;
-require("bootstrap/dist/css/bootstrap.min.css");
-var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
-var _constants = require("../../constants/constants");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _reactBootstrap = require("react-bootstrap");
-var _LoadingSpinner = require("../../utils/LoadingSpinner");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function DotplotControls() {
-  const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const [controls, setControls] = (0, _react.useState)({
-    standardScale: dataset.controls.standardScale,
-    expressionCutoff: dataset.controls.expressionCutoff,
-    colorAxis: {
-      cmin: dataset.controls.colorAxis.cmin,
-      cmax: dataset.controls.colorAxis.cmax
-    }
-  });
-  (0, _react.useEffect)(() => {
-    setControls(c => ({
-      ...c,
-      colorAxis: {
-        cmin: dataset.controls.colorAxis.cmin,
-        cmax: dataset.controls.colorAxis.cmax
-      }
-    }));
-  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
-  const colorScaleList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-    active: dataset.controls.colorScale === item,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.colorScale",
-        colorScale: item
-      });
-    },
-    children: item
-  }, item));
-  const standardScaleList = _constants.DOTPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-    active: dataset.controls.standardScale === item.value,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.standardScale",
-        standardScale: item.value
-      });
-    },
-    children: item.name
-  }, item.value));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
-          id: "dropdownColorscale",
-          variant: "light",
-          children: dataset.controls.colorScale
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
-          children: colorScaleList
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
-          children: "Standard scale"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
-            id: "dropdownStandardScale",
-            variant: "light",
-            children: dataset.controls.standardScale
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
-            children: standardScaleList
-          })]
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ToggleButton, {
-        id: "toggleMeanOnlyExpressed",
-        type: "checkbox",
-        variant: "outline-primary",
-        checked: dataset.controls.meanOnlyExpressed,
-        onChange: () => {
-          dispatch({
-            type: "set.controls.meanOnlyExpressed",
-            meanOnlyExpressed: !dataset.controls.meanOnlyExpressed
-          });
-        },
-        children: "Average only above cutoff"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
-      onSubmit: e => {
-        e.preventDefault();
-        dispatch({
-          type: "set.controls.expressionCutoff",
-          expressionCutoff: parseFloat(controls.expressionCutoff)
-        });
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
-          children: "Expression Cutoff"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
-          size: "sm",
-          type: "number",
-          step: "0.1",
-          min: 0.0,
-          value: controls.expressionCutoff,
-          onChange: e => {
-            setControls({
-              ...controls,
-              expressionCutoff: e.target.value
-            });
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          type: "submit",
-          variant: "outline-primary",
-          children: "Apply"
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
-      onSubmit: e => {
-        e.preventDefault();
-        dispatch({
-          type: "set.controls.colorAxis.crange",
-          cmin: controls.colorAxis.cmin,
-          cmax: controls.colorAxis.cmax
-        });
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
-          children: "Colorscale"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
-          children: "min"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
-          name: "scaleMin",
-          size: "sm",
-          type: "number",
-          value: controls.colorAxis.cmin,
-          step: 0.1,
-          min: Math.min(dataset.controls.colorAxis.dmin, 0.0),
-          max: dataset.controls.colorAxis.dmax,
-          onChange: e => {
-            setControls({
-              ...controls,
-              colorAxis: {
-                ...controls.colorAxis,
-                cmin: e.target.value
-              }
-            });
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
-          children: "max"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
-          name: "scaleMax",
-          size: "sm",
-          type: "number",
-          value: controls.colorAxis.cmax,
-          step: 0.1,
-          min: controls.colorAxis.cmin,
-          max: dataset.controls.colorAxis.dmax,
-          onChange: e => {
-            if (parseFloat(e.target.value) > dataset.controls.colorAxis.dmax) {
-              e.target.value = dataset.controls.colorAxis.dmax.toFixed(1);
-            }
-            setControls({
-              ...controls,
-              colorAxis: {
-                ...controls.colorAxis,
-                cmax: e.target.value
-              }
-            });
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          type: "submit",
-          variant: "outline-primary",
-          children: "Apply"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          variant: "outline-primary",
-          onClick: () => {
-            dispatch({
-              type: "set.controls.colorAxis.crange",
-              cmin: dataset.controls.colorAxis.dmin,
-              cmax: dataset.controls.colorAxis.dmax
-            });
-          },
-          children: "Autoscale"
-        })]
-      })
-    })]
-  });
-}
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function Dotplot() {
   const ENDPOINT = "dotplot";
   const dataset = (0, _DatasetContext.useDataset)();
@@ -290,7 +106,7 @@ function Dotplot() {
     if (hasSelections) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-dotplot position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
+        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
           data: data,
           layout: layout,
           useResizeHandler: true,

package/dist/components/dotplot/DotplotControls.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DotplotControls = DotplotControls;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
+var _colorscales = require("../../constants/colorscales");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function DotplotControls() {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [controls, setControls] = (0, _react.useState)({
+    standardScale: dataset.controls.standardScale,
+    expressionCutoff: dataset.controls.expressionCutoff,
+    colorAxis: {
+      cmin: dataset.controls.colorAxis.cmin,
+      cmax: dataset.controls.colorAxis.cmax
+    }
+  });
+  (0, _react.useEffect)(() => {
+    setControls(c => ({
+      ...c,
+      colorAxis: {
+        cmin: dataset.controls.colorAxis.cmin,
+        cmax: dataset.controls.colorAxis.cmax
+      }
+    }));
+  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
+  const colorScaleList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+    active: dataset.controls.colorScale === key,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.colorScale",
+        colorScale: key
+      });
+    },
+    children: key
+  }, key));
+  const standardScaleList = _constants.DOTPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+    active: dataset.controls.standardScale === item.value,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.standardScale",
+        standardScale: item.value
+      });
+    },
+    children: item.name
+  }, item.value));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
+          id: "dropdownColorscale",
+          variant: "light",
+          children: dataset.controls.colorScale
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
+          children: colorScaleList
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
+          children: "Standard scale"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
+            id: "dropdownStandardScale",
+            variant: "light",
+            children: dataset.controls.standardScale
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
+            children: standardScaleList
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ToggleButton, {
+        id: "toggleMeanOnlyExpressed",
+        type: "checkbox",
+        variant: "outline-primary",
+        checked: dataset.controls.meanOnlyExpressed,
+        onChange: () => {
+          dispatch({
+            type: "set.controls.meanOnlyExpressed",
+            meanOnlyExpressed: !dataset.controls.meanOnlyExpressed
+          });
+        },
+        children: "Average only above cutoff"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
+      onSubmit: e => {
+        e.preventDefault();
+        dispatch({
+          type: "set.controls.expressionCutoff",
+          expressionCutoff: parseFloat(controls.expressionCutoff)
+        });
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
+          children: "Expression Cutoff"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
+          size: "sm",
+          type: "number",
+          step: "0.1",
+          min: 0.0,
+          value: controls.expressionCutoff,
+          onChange: e => {
+            setControls({
+              ...controls,
+              expressionCutoff: e.target.value
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          type: "submit",
+          variant: "outline-primary",
+          children: "Apply"
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
+      onSubmit: e => {
+        e.preventDefault();
+        dispatch({
+          type: "set.controls.colorAxis.crange",
+          cmin: controls.colorAxis.cmin,
+          cmax: controls.colorAxis.cmax
+        });
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
+          children: "Colorscale"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
+          children: "min"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
+          name: "scaleMin",
+          size: "sm",
+          type: "number",
+          value: controls.colorAxis.cmin,
+          step: 0.1,
+          min: Math.min(dataset.controls.colorAxis.dmin, 0.0),
+          max: dataset.controls.colorAxis.dmax,
+          onChange: e => {
+            setControls({
+              ...controls,
+              colorAxis: {
+                ...controls.colorAxis,
+                cmin: e.target.value
+              }
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
+          children: "max"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
+          name: "scaleMax",
+          size: "sm",
+          type: "number",
+          value: controls.colorAxis.cmax,
+          step: 0.1,
+          min: controls.colorAxis.cmin,
+          max: dataset.controls.colorAxis.dmax,
+          onChange: e => {
+            if (parseFloat(e.target.value) > dataset.controls.colorAxis.dmax) {
+              e.target.value = dataset.controls.colorAxis.dmax.toFixed(1);
+            }
+            setControls({
+              ...controls,
+              colorAxis: {
+                ...controls.colorAxis,
+                cmax: e.target.value
+              }
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          type: "submit",
+          variant: "outline-primary",
+          children: "Apply"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          variant: "outline-primary",
+          onClick: () => {
+            dispatch({
+              type: "set.controls.colorAxis.crange",
+              cmin: dataset.controls.colorAxis.dmin,
+              cmax: dataset.controls.colorAxis.dmax
+            });
+          },
+          children: "Autoscale"
+        })]
+      })
+    })]
+  });
+}

package/dist/components/heatmap/Heatmap.js

@@ -4,42 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Heatmap = Heatmap;
-exports.HeatmapControls = HeatmapControls;
-require("bootstrap/dist/css/bootstrap.min.css");
-var _reactBootstrap = require("react-bootstrap");
 var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
-var _constants = require("../../constants/constants");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _LoadingSpinner = require("../../utils/LoadingSpinner");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function HeatmapControls() {
-  const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const colormapList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-    active: dataset.controls.colorScale === item,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.colorScale",
-        colorScale: item
-      });
-    },
-    children: item
-  }, item));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
-      id: "dropdownColorscale",
-      variant: "light",
-      children: dataset.controls.colorScale
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
-      children: colormapList
-    })]
-  });
-}
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function Heatmap() {
   const ENDPOINT = "heatmap";
   const dataset = (0, _DatasetContext.useDataset)();
@@ -102,7 +76,7 @@ function Heatmap() {
     if (hasSelections) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-heatmap position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
+        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
           data: data,
           layout: layout,
           useResizeHandler: true,