@haniffalab/cherita-react 1.4.1-dev.2025-10-23.e95b5a90 → 1.4.1-dev.2025-10-23.55fbe6ff

package/dist/esm/components/var-list/VarItem.js

@@ -3,24 +3,24 @@ 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); }
-import { useEffect, useState } from "react";
-import { faDroplet, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { MoreVert } from "@mui/icons-material";
-import _ from "lodash";
-import { Button, Collapse, ListGroup, Table } from "react-bootstrap";
-import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { Histogram } from "../../utils/Histogram";
-import { useDebouncedFetch, useFetch } from "../../utils/requests";
+import { useEffect, useState } from 'react';
+import { faDroplet, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { MoreVert } from '@mui/icons-material';
+import _ from 'lodash';
+import { Button, Collapse, ListGroup, Table } from 'react-bootstrap';
+import { COLOR_ENCODINGS, SELECTION_MODES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { Histogram } from '../../utils/Histogram';
+import { useDebouncedFetch, useFetch } from '../../utils/requests';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function VarHistogram(_ref) {
   let {
     item
   } = _ref;
-  const ENDPOINT = "var/histograms";
+  const ENDPOINT = 'var/histograms';
   const dataset = useDataset();
   const settings = useSettings();
   const {
@@ -70,13 +70,13 @@ function VarDiseaseInfoItem(item) {
           children: [/*#__PURE__*/_jsx("td", {
             children: "Confidence"
           }), /*#__PURE__*/_jsx("td", {
-            children: item.confidence || "unknown"
+            children: item.confidence || 'unknown'
           })]
         }), /*#__PURE__*/_jsxs("tr", {
           children: [/*#__PURE__*/_jsxs("td", {
-            children: ["Organ", item.organs.length > 1 ? "s" : ""]
+            children: ["Organ", item.organs.length > 1 ? 's' : '']
           }), /*#__PURE__*/_jsx("td", {
-            children: item.organs.map(o => o.name).join(", ")
+            children: item.organs.map(o => o.name).join(', ')
           })]
         }), !_.isEmpty(item.metadata) && _.map(item.metadata, (value, key) => {
           if (value !== null && value !== undefined) {
@@ -114,7 +114,7 @@ export function SelectionItem(_ref3) {
     showRemove = true,
     isMultiple = false
   } = _ref3;
-  const ENDPOINT = "disease/gene";
+  const ENDPOINT = 'disease/gene';
   const [openInfo, setOpenInfo] = useState(false);
   const dataset = useDataset();
   const params = {
@@ -133,7 +133,7 @@ export function SelectionItem(_ref3) {
   const hasDiseaseInfo = !isPending && !serverError && !!(fetchedData !== null && fetchedData !== void 0 && fetchedData.length);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: hasDiseaseInfo ? "cursor-pointer" : "",
+      className: hasDiseaseInfo ? 'cursor-pointer' : '',
       onClick: () => {
         setOpenInfo(o => !o);
       },
@@ -149,14 +149,14 @@ export function SelectionItem(_ref3) {
             item: item
           }), showSetColorEncoding && /*#__PURE__*/_jsxs(Button, {
             type: "button",
-            variant: isActive ? "primary" : isNotInData ? "outline-secondary" : "outline-primary",
+            variant: isActive ? 'primary' : isNotInData ? 'outline-secondary' : 'outline-primary',
             className: "m-0 p-0 px-1",
             onClick: e => {
               e.stopPropagation();
               selectVar();
             },
             disabled: isNotInData,
-            title: isNotInData ? "Not present in data" : "Set as color encoding",
+            title: isNotInData ? 'Not present in data' : 'Set as color encoding',
             children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
               icon: faDroplet
             }), isMultiple && /*#__PURE__*/_jsx(FontAwesomeIcon, {
@@ -193,17 +193,17 @@ export function SelectionItem(_ref3) {
 const select = (dispatch, mode, item) => {
   if (mode === SELECTION_MODES.SINGLE) {
     dispatch({
-      type: "select.var",
+      type: 'select.var',
       var: item
     });
   } else if (mode === SELECTION_MODES.MULTIPLE) {
     dispatch({
-      type: "select.multivar",
+      type: 'select.multivar',
       var: item
     });
   }
   dispatch({
-    type: "set.colorEncoding",
+    type: 'set.colorEncoding',
     value: COLOR_ENCODINGS.VAR
   });
 };
@@ -219,19 +219,19 @@ export function VarItem(_ref4) {
   const selectVar = () => debounceSelect(dispatch, mode, item);
   const removeVar = () => {
     dispatch({
-      type: "remove.var",
+      type: 'remove.var',
       var: item
     });
     if (mode === SELECTION_MODES.SINGLE) {
       if (active === item.matrix_index) {
         dispatch({
-          type: "reset.var"
+          type: 'reset.var'
         });
       }
     } else if (mode === SELECTION_MODES.MULTIPLE) {
       if (active.includes(item.matrix_index)) {
         dispatch({
-          type: "deselect.multivar",
+          type: 'deselect.multivar',
           var: item
         });
       }
@@ -239,7 +239,7 @@ export function VarItem(_ref4) {
   };
   const toggleVar = () => {
     dispatch({
-      type: "toggle.multivar",
+      type: 'toggle.multivar',
       var: item
     });
   };

package/dist/esm/components/var-list/VarList.js

@@ -3,26 +3,26 @@ 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); }
-import { useEffect, useState } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { Alert, Button, ListGroup } from "react-bootstrap";
-import ButtonGroup from "react-bootstrap/ButtonGroup";
-import { VarItem } from "./VarItem";
-import { VarListToolbar } from "./VarListToolbar";
-import { VarSet } from "./VarSet";
-import { SELECTION_MODES, VAR_SORT } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { LoadingSpinner } from "../../utils/LoadingIndicators";
-import { useFetch } from "../../utils/requests";
-import { useSelectedMultiVar, useSelectedVar, useSettingsVars } from "../../utils/Resolver";
+import { useEffect, useState } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { Alert, Button, ListGroup } from 'react-bootstrap';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import { VarItem } from './VarItem';
+import { VarListToolbar } from './VarListToolbar';
+import { VarSet } from './VarSet';
+import { SELECTION_MODES, VAR_SORT } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { LoadingSpinner } from '../../utils/LoadingIndicators';
+import { useFetch } from '../../utils/requests';
+import { useSelectedMultiVar, useSelectedVar, useSettingsVars } from '../../utils/Resolver';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const useVarMean = function (varKeys) {
   let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const ENDPOINT = "matrix/mean";
+  const ENDPOINT = 'matrix/mean';
   const dataset = useDataset();
   const {
     obsIndices
@@ -60,7 +60,7 @@ export const sortMeans = (i, means) => {
 export function VarNamesList(_ref) {
   let {
     mode = SELECTION_MODES.SINGLE,
-    displayName = "genes"
+    displayName = 'genes'
   } = _ref;
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
@@ -90,7 +90,7 @@ export function VarNamesList(_ref) {
         }, settings.varSort.var.sortOrder));
       }
     } else if (settings.varSort.var.sort === VAR_SORT.NAME) {
-      setSortedVars(_.orderBy(settingsVars, "name", settings.varSort.var.sortOrder));
+      setSortedVars(_.orderBy(settingsVars, 'name', settings.varSort.var.sortOrder));
     } else {
       setSortedVars(settingsVars);
     }
@@ -146,7 +146,7 @@ export function VarNamesList(_ref) {
           variant: "info",
           onClick: () => {
             dispatch({
-              type: "add.var",
+              type: 'add.var',
               var: {
                 name: newSetName(),
                 vars: [],
@@ -159,7 +159,7 @@ export function VarNamesList(_ref) {
           variant: "info",
           onClick: () => {
             dispatch({
-              type: "reset.vars"
+              type: 'reset.vars'
             });
           },
           children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {

package/dist/esm/components/var-list/VarListToolbar.js

@@ -1,15 +1,15 @@
-import { useState } from "react";
-import { faArrowDown19, faArrowDownAZ, faArrowUp91, faArrowUpZA, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";
-import { VAR_SORT, VAR_SORT_ORDER } from "../../constants/constants";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
+import { useState } from 'react';
+import { faArrowDown19, faArrowDownAZ, faArrowUp91, faArrowUpZA, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
+import { VAR_SORT, VAR_SORT_ORDER } from '../../constants/constants';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
 
 // @TODO: set option for "var" and "disease"
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function VarListToolbar(_ref) {
   let {
-    varType = "var"
+    varType = 'var'
   } = _ref;
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
@@ -20,7 +20,7 @@ export function VarListToolbar(_ref) {
     if (sort !== sortValue) {
       setSort(sortValue);
       dispatch({
-        type: "set.varSort",
+        type: 'set.varSort',
         var: varType,
         sort: sortValue,
         sortOrder: sortOrder
@@ -29,7 +29,7 @@ export function VarListToolbar(_ref) {
       const newSortOrder = sortOrder === VAR_SORT_ORDER.ASC ? VAR_SORT_ORDER.DESC : VAR_SORT_ORDER.ASC;
       setSortOrder(newSortOrder);
       dispatch({
-        type: "set.varSort",
+        type: 'set.varSort',
         var: varType,
         sort: sortValue,
         sortOrder: newSortOrder
@@ -79,7 +79,7 @@ export function VarListToolbar(_ref) {
         onClick: () => {
           setSort(VAR_SORT.NONE);
           dispatch({
-            type: "set.varSort.sort",
+            type: 'set.varSort.sort',
             var: varType,
             sort: VAR_SORT.NONE
           });

package/dist/esm/components/var-list/VarSet.js

@@ -1,18 +1,18 @@
-import { useState } from "react";
-import { faChevronDown, faChevronUp, faCircleInfo, faDroplet, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { Button, Collapse, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { SelectionItem } from "./VarItem";
-import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { SearchModal } from "../search-bar/SearchBar";
+import { useState } from 'react';
+import { faChevronDown, faChevronUp, faCircleInfo, faDroplet, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { Button, Collapse, ListGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { SelectionItem } from './VarItem';
+import { COLOR_ENCODINGS, SELECTION_MODES } from '../../constants/constants';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { SearchModal } from '../search-bar/SearchBar';
 
 // @TODO: add button to score genes and plot
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const addVarToSet = (dispatch, set, v) => {
   dispatch({
-    type: "add.varSet.var",
+    type: 'add.varSet.var',
     varSet: set,
     var: v
   });
@@ -28,7 +28,7 @@ function SelectionSet(_ref) {
   } = _ref;
   const [openSet, setOpenSet] = useState(false);
   const [showModal, setShowModal] = useState(false);
-  const [searchText, setSearchText] = useState("");
+  const [searchText, setSearchText] = useState('');
   const varList = set.vars.length ? _.map(set.vars, v => {
     return /*#__PURE__*/_jsx(ListGroup.Item, {
       children: /*#__PURE__*/_jsx(SelectionItem, {
@@ -88,7 +88,7 @@ function SelectionSet(_ref) {
             })
           }), /*#__PURE__*/_jsxs(Button, {
             type: "button",
-            variant: isActive ? "primary" : "outline-primary",
+            variant: isActive ? 'primary' : 'outline-primary',
             className: "m-0 p-0 px-1",
             onClick: e => {
               e.stopPropagation();
@@ -133,7 +133,7 @@ function SelectionSet(_ref) {
       handleClose: () => setShowModal(false),
       text: searchText,
       setText: setSearchText,
-      displayText: "features",
+      displayText: 'features',
       handleSelect: (d, i) => {
         addVarToSet(d, set, i);
       },
@@ -153,16 +153,16 @@ export function VarSet(_ref2) {
   const selectSet = () => {
     if (mode === SELECTION_MODES.SINGLE) {
       dispatch({
-        type: "select.var",
+        type: 'select.var',
         var: set
       });
       dispatch({
-        type: "set.colorEncoding",
-        value: "var"
+        type: 'set.colorEncoding',
+        value: 'var'
       });
     } else if (mode === SELECTION_MODES.MULTIPLE) {
       dispatch({
-        type: "select.multivar",
+        type: 'select.multivar',
         var: set
       });
     }
@@ -171,32 +171,32 @@ export function VarSet(_ref2) {
     if (mode === SELECTION_MODES.SINGLE) {
       if (active === set.name) {
         dispatch({
-          type: "reset.var"
+          type: 'reset.var'
         });
       }
     } else if (mode === SELECTION_MODES.MULTIPLE) {
       if (active.includes(set.name)) {
         dispatch({
-          type: "deselect.multivar",
+          type: 'deselect.multivar',
           var: set
         });
       }
     }
     dispatch({
-      type: "remove.var",
+      type: 'remove.var',
       var: set
     });
   };
   const removeSetVar = v => {
     dispatch({
-      type: "remove.varSet.var",
+      type: 'remove.varSet.var',
       varSet: set,
       var: v
     });
   };
   const toggleSet = () => {
     dispatch({
-      type: "toggle.multivar",
+      type: 'toggle.multivar',
       var: set
     });
   };

package/dist/esm/components/violin/Violin.js

@@ -3,22 +3,22 @@ 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); }
-import { useEffect, useMemo, useState } from "react";
-import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { Badge, Button } from "react-bootstrap";
-import Plot from "react-plotly.js";
-import { PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings } from "../../context/SettingsContext";
-import { LoadingSpinner } from "../../utils/LoadingIndicators";
-import { useDebouncedFetch } from "../../utils/requests";
-import { useSelectedMultiVar, useSelectedObs, useSelectedVar } from "../../utils/Resolver";
-import { StyledTooltip } from "../../utils/StyledTooltip";
-import { PlotAlert } from "../full-page/PlotAlert";
-import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
+import { useEffect, useMemo, useState } from 'react';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { Badge, Button } from 'react-bootstrap';
+import Plot from 'react-plotly.js';
+import { PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings } from '../../context/SettingsContext';
+import { LoadingSpinner } from '../../utils/LoadingIndicators';
+import { useDebouncedFetch } from '../../utils/requests';
+import { useSelectedMultiVar, useSelectedObs, useSelectedVar } from '../../utils/Resolver';
+import { StyledTooltip } from '../../utils/StyledTooltip';
+import { PlotAlert } from '../full-page/PlotAlert';
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from '../toolbar/Toolbar';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function Violin(_ref) {
   let {
@@ -32,7 +32,7 @@ export function Violin(_ref) {
     plotType,
     setPlotType
   } = _ref;
-  const ENDPOINT = "violin";
+  const ENDPOINT = 'violin';
   const dataset = useDataset();
   const settings = useSettings();
   const {
@@ -118,15 +118,15 @@ export function Violin(_ref) {
           children: [/*#__PURE__*/_jsx("div", {
             className: "flex-grow-1 position-relative",
             style: {
-              minHeight: "0"
+              minHeight: '0'
             },
             children: /*#__PURE__*/_jsx(Plot, {
               data: data,
               layout: layout,
               useResizeHandler: true,
               style: {
-                width: "100%",
-                height: "100%"
+                width: '100%',
+                height: '100%'
               },
               config: {
                 displaylogo: false,
@@ -164,25 +164,25 @@ export function Violin(_ref) {
       setPlotType: setPlotType,
       children: [mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
-        children: ["Select one or more", " ", showVarsBtn ? /*#__PURE__*/_jsx(Button, {
+        children: ["Select one or more", ' ', showVarsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowVars,
           children: "features"
-        }) : "features", " ", "to display their expression distributions across all observations."]
+        }) : 'features', ' ', "to display their expression distributions across all observations."]
       }), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
-        children: ["Select a", " ", showObsBtn ? /*#__PURE__*/_jsx(Button, {
+        children: ["Select a", ' ', showObsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowObs,
           children: "category"
-        }) : "category", " ", "to group observations, and choose a", " ", showVarsBtn ? /*#__PURE__*/_jsx(Button, {
+        }) : 'category', ' ', "to group observations, and choose a", ' ', showVarsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowVars,
           children: "feature"
-        }) : "feature", " ", "to view its distribution within each group."]
+        }) : 'feature', ' ', "to view its distribution within each group."]
       })]
     });
   } else {
@@ -191,7 +191,7 @@ export function Violin(_ref) {
       heading: "Error displaying the violin 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/esm/components/violin/ViolinControls.js

@@ -1,5 +1,5 @@
-import { Form } from "react-bootstrap";
-import { ScaleSelect } from "../controls/Controls";
+import { Form } from 'react-bootstrap';
+import { ScaleSelect } from '../controls/Controls';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export function ViolinControls() {
   return /*#__PURE__*/_jsx(_Fragment, {

package/dist/esm/constants/colorscales.js

@@ -1,22 +1,22 @@
 // From plotly https://github.com/plotly/plotly.js/blob/5bc25b490702e5ed61265207833dbd58e8ab27f1/src/components/colorscale/scales.js
 export const COLORSCALES = {
-  Greys: ["#000000", "#ffffff"],
-  YlGnBu: ["#081d58", "#253494", "#225ea8", "#1d91c0", "#41b6c4", "#7fcdbb", "#c7e9b4", "#edf8d9", "#ffffd9"],
-  Greens: ["#00441b", "#006d2c", "#238b45", "#41ab5d", "#74c476", "#a1d9a5", "#c7e9c0", "#e5f5e0", "#f7fcf5"],
-  YlOrRd: ["#800026", "#bd0026", "#e31a1c", "#fc4e2a", "#fd8d3c", "#feb24c", "#fed976", "#ffed9f", "#ffffcc"],
-  Bluered: ["#0000ff", "#ff0000"],
-  RdBu: ["#050aac", "#6a89f7", "#bebebe", "#dcaa84", "#e6915a", "#b20a1c"],
-  Reds: ["#dcdcdc", "#f5c39d", "#f5a069", "#b20a1c"],
-  Blues: ["#050aac", "#283cba", "#4664f5", "#5a78f5", "#6a89f7", "#dcdcdc"],
-  Picnic: ["#0000ff", "#3399ff", "#66ccff", "#99ccff", "#ccccff", "#ffffff", "#ffccff", "#ff99ff", "#ff66cc", "#ff6666", "#ff0000"],
-  Rainbow: ["#96005a", "#0000c8", "#0019ff", "#0098ff", "#2cff96", "#97ff00", "#ffe600", "#ff6f00", "#ff0000"],
-  Portland: ["#0c3383", "#0a88ba", "#f2d338", "#f28f38", "#d91e1e"],
-  Jet: ["#000083", "#003caa", "#05ffff", "#ffff00", "#fa0000", "#800000"],
-  Hot: ["#000000", "#e60000", "#ffd200", "#ffffff"],
-  Blackbody: ["#000000", "#e60000", "#e6d200", "#ffffff", "#a0c8ff"],
-  Earth: ["#000082", "#00b4b4", "#28d228", "#e6e632", "#784614", "#ffffff"],
-  Electric: ["#000000", "#1e0064", "#780064", "#a05a00", "#e6c800", "#fffadc"],
-  Viridis: ["#440154", "#48186a", "#472d7b", "#424086", "#3b528b", "#33638d", "#2c728e", "#26828e", "#21918c", "#1fa088", "#28ae80", "#3fbc73", "#5ec962", "#84d44b", "#addc30", "#d8e219", "#fde725"],
-  Cividis: ["#00204c", "#002a66", "#00346e", "#273f6c", "#3c4a6c", "#4c556b", "#5b5f6d", "#686a70", "#757575", "#838178", "#929c78", "#a19676", "#b0a572", "#c0af6d", "#d1ba65", "#e1c75c", "#f3db4f", "#ffe945"],
-  Accent: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f", "#bf5b17", "#666666"]
+  Greys: ['#000000', '#ffffff'],
+  YlGnBu: ['#081d58', '#253494', '#225ea8', '#1d91c0', '#41b6c4', '#7fcdbb', '#c7e9b4', '#edf8d9', '#ffffd9'],
+  Greens: ['#00441b', '#006d2c', '#238b45', '#41ab5d', '#74c476', '#a1d9a5', '#c7e9c0', '#e5f5e0', '#f7fcf5'],
+  YlOrRd: ['#800026', '#bd0026', '#e31a1c', '#fc4e2a', '#fd8d3c', '#feb24c', '#fed976', '#ffed9f', '#ffffcc'],
+  Bluered: ['#0000ff', '#ff0000'],
+  RdBu: ['#050aac', '#6a89f7', '#bebebe', '#dcaa84', '#e6915a', '#b20a1c'],
+  Reds: ['#dcdcdc', '#f5c39d', '#f5a069', '#b20a1c'],
+  Blues: ['#050aac', '#283cba', '#4664f5', '#5a78f5', '#6a89f7', '#dcdcdc'],
+  Picnic: ['#0000ff', '#3399ff', '#66ccff', '#99ccff', '#ccccff', '#ffffff', '#ffccff', '#ff99ff', '#ff66cc', '#ff6666', '#ff0000'],
+  Rainbow: ['#96005a', '#0000c8', '#0019ff', '#0098ff', '#2cff96', '#97ff00', '#ffe600', '#ff6f00', '#ff0000'],
+  Portland: ['#0c3383', '#0a88ba', '#f2d338', '#f28f38', '#d91e1e'],
+  Jet: ['#000083', '#003caa', '#05ffff', '#ffff00', '#fa0000', '#800000'],
+  Hot: ['#000000', '#e60000', '#ffd200', '#ffffff'],
+  Blackbody: ['#000000', '#e60000', '#e6d200', '#ffffff', '#a0c8ff'],
+  Earth: ['#000082', '#00b4b4', '#28d228', '#e6e632', '#784614', '#ffffff'],
+  Electric: ['#000000', '#1e0064', '#780064', '#a05a00', '#e6c800', '#fffadc'],
+  Viridis: ['#440154', '#48186a', '#472d7b', '#424086', '#3b528b', '#33638d', '#2c728e', '#26828e', '#21918c', '#1fa088', '#28ae80', '#3fbc73', '#5ec962', '#84d44b', '#addc30', '#d8e219', '#fde725'],
+  Cividis: ['#00204c', '#002a66', '#00346e', '#273f6c', '#3c4a6c', '#4c556b', '#5b5f6d', '#686a70', '#757575', '#838178', '#929c78', '#a19676', '#b0a572', '#c0af6d', '#d1ba65', '#e1c75c', '#f3db4f', '#ffe945'],
+  Accent: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0', '#f0027f', '#bf5b17', '#666666']
 };