@haniffalab/cherita-react 0.1.12-dev.2023-12-19.edfc4091 → 0.1.12-dev.2024-02-12.f6d21b70

package/dist/components/dotplot/Dotplot.js

@@ -14,6 +14,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
 var _requests = require("../../utils/requests");
 var _reactBootstrap = require("react-bootstrap");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -269,8 +270,8 @@ function Dotplot() {
   }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
   if (hasSelections) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-dotplot"
-    }, /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-dotplot position-relative"
+    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
       layout: layout,
       useResizeHandler: true,

package/dist/components/heatmap/Heatmap.js

@@ -13,6 +13,7 @@ var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
 var _requests = require("../../utils/requests");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -117,8 +118,8 @@ function Heatmap() {
   }, [dataset.controls.colorScale, updateColorscale]);
   if (hasSelections) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-heatmap"
-    }, /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-heatmap position-relative"
+    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
       layout: layout,
       useResizeHandler: true,

package/dist/components/matrixplot/Matrixplot.js

@@ -14,6 +14,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
 var _reactBootstrap = require("react-bootstrap");
 var _requests = require("../../utils/requests");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -135,8 +136,8 @@ function Matrixplot() {
   }, [dataset.controls.colorScale, updateColorscale]);
   if (hasSelections) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-matrixplot"
-    }, /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-matrixplot position-relative"
+    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
       layout: layout,
       useResizeHandler: true,

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

@@ -11,6 +11,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _DatasetContext = require("../../context/DatasetContext");
 var _requests = require("../../utils/requests");
 var _reactBootstrap = require("react-bootstrap");
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
+var _color = require("../../helpers/color");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,16 +60,21 @@ function ObsColsList() {
     _useState2 = _slicedToArray(_useState, 2),
     obsColsList = _useState2[0],
     setObsColsList = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
+  var _useState3 = (0, _react.useState)([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    active = _useState4[0],
-    setActive = _useState4[1];
-  var _useState5 = (0, _react.useState)({
+    obs = _useState4[0],
+    setObs = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    active = _useState6[0],
+    setActive = _useState6[1];
+  var _useState7 = (0, _react.useState)({
       url: dataset.url
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    params = _useState6[0],
-    setParams = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 2),
+    params = _useState8[0],
+    setParams = _useState8[1];
+  var colorHelper = new _color.ColorHelper();
   (0, _react.useEffect)(function () {
     setParams(function (p) {
       return _objectSpread(_objectSpread({}, p), {}, {
@@ -82,6 +90,23 @@ function ObsColsList() {
     serverError = _useFetch.serverError;
   (0, _react.useEffect)(function () {
     if (!isPending && !serverError) {
+      setObs(fetchedData.reduce(function (result, key) {
+        var colors = _chromaJs.default.scale("Accent").colors(key.n_values, "rgb");
+        result[key.name] = {
+          is_truncated: key.is_truncated,
+          n_values: key.n_values,
+          type: key.type,
+          values: key.values,
+          state: key.values.map(function (value, index) {
+            return {
+              value: value,
+              color: (0, _chromaJs.default)(colors[index]).rgb(),
+              checked: true
+            };
+          })
+        };
+        return result;
+      }, {}));
       setObsColsList(fetchedData.map(function (d) {
         if (d.type === "continuous") {
           d = binContinuous(d);
@@ -98,14 +123,28 @@ function ObsColsList() {
       setActive(dataset.selectedObs.name);
     }
   }, [dataset.selectedObs]);
+  (0, _react.useEffect)(function () {
+    dispatch({
+      type: "set.obs",
+      value: obs
+    });
+  }, [obs, dispatch]);
   function categoricalList(item) {
+    console.log(obs);
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Item, {
       key: item.name,
       eventKey: item.name
-    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Header, null, item.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Body, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, item.values.map(function (val) {
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Header, null, item.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Body, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+      variant: "flush"
+    }, item.values.map(function (value, index) {
       return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
-        key: val
-      }, val);
+        key: index
+      }, value, /*#__PURE__*/_react.default.createElement("span", {
+        className: "cm-string cm-color",
+        style: {
+          backgroundColor: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
+        }
+      }));
     }))));
   }
   function continuousList(item) {
@@ -132,18 +171,21 @@ function ObsColsList() {
     });
   }, [obsColsList]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: ""
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative"
+  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "list-group overflow-auto"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion, {
+    flush: true,
     activeKey: active,
     onSelect: function onSelect(key) {
-      dispatch({
-        type: "obsSelected",
-        obs: obsColsList.find(function (obs) {
-          return obs.name === key;
-        })
-      });
+      if (key != null) {
+        dispatch({
+          type: "obsSelected",
+          obs: obsColsList.find(function (obs) {
+            return obs.name === key;
+          })
+        });
+      }
     }
   }, obsList)));
 }

package/dist/components/scatterplot/Legend.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Legend = Legend;
+require("bootstrap/dist/css/bootstrap.min.css");
+var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
+var _react = require("react");
+var _DatasetContext = require("../../context/DatasetContext");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _color = require("../../helpers/color");
+var _OverlayTrigger = _interopRequireDefault(require("react-bootstrap/OverlayTrigger"));
+var _layers = require("@nebula.gl/layers");
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
+var _Tooltip = _interopRequireDefault(require("react-bootstrap/Tooltip"));
+var _constants = require("../../constants/constants");
+var _editModes = require("@nebula.gl/edit-modes");
+var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
+var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
+var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Legend(_ref) {
+  var values = _ref.values;
+  var dataset = (0, _DatasetContext.useDataset)();
+  var colorHelper = new _color.ColorHelper();
+  if (dataset.colorEncoding === "var") {
+    var c = colorHelper.getScale(dataset, values);
+    var dom = c.domain ? c.domain() : [0, 1],
+      dmin = Math.min(dom[0], dom[dom.length - 1]),
+      dmax = Math.max(dom[dom.length - 1], dom[0]);
+    var legendList = [];
+    for (var i = 0; i <= 100; i++) {
+      var color = c(dmin + i / 100 * (dmax - dmin));
+      //console.log(color.hex());
+      legendList.push( /*#__PURE__*/_react.React.createElement("span", {
+        className: "grad-step",
+        style: {
+          backgroundColor: color.hex()
+        }
+      }));
+    }
+    return /*#__PURE__*/_react.React.createElement("div", {
+      className: "cherita-legend"
+    }, /*#__PURE__*/_react.React.createElement("div", {
+      className: "gradient"
+    }, legendList, /*#__PURE__*/_react.React.createElement("span", {
+      className: "domain-min"
+    }, dmin), /*#__PURE__*/_react.React.createElement("span", {
+      className: "domain-med"
+    }, (dmin + dmax) * 0.5), /*#__PURE__*/_react.React.createElement("span", {
+      className: "domain-max"
+    }, dmax)));
+  }
+  return /*#__PURE__*/_react.React.createElement(_react.React.Fragment, null);
+}

package/dist/components/scatterplot/Scatterplot.js

@@ -7,21 +7,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.Scatterplot = Scatterplot;
 exports.ScatterplotControls = ScatterplotControls;
 require("bootstrap/dist/css/bootstrap.min.css");
-var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _react2 = _interopRequireDefault(require("@deck.gl/react"));
 var _layers = require("@deck.gl/layers");
-var _DatasetContext = require("../../context/DatasetContext");
-var _map = require("../../helpers/map");
-var _zarr = require("../../helpers/zarr");
-var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _layers2 = require("@nebula.gl/layers");
 var _editModes = require("@nebula.gl/edit-modes");
-var _editor = require("@nebula.gl/editor");
+var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _Toolbox = require("./Toolbox");
+var _Legend = require("./Legend");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _map = require("../../helpers/map");
+var _zarr = require("../../helpers/zarr");
+var _color = require("../../helpers/color");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -35,12 +42,28 @@ window.deck.log.level = 1;
 function ScatterplotControls() {
   var dataset = (0, _DatasetContext.useDataset)();
   var dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  return /*#__PURE__*/_react.React.createElement(_react.React.Fragment, null);
+  var colormapList = _constants.PLOTLY_COLORSCALES.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+      key: item,
+      active: dataset.controls.colorScale === item,
+      onClick: function onClick() {
+        dispatch({
+          type: "set.controls.colorScale",
+          colorScale: item
+        });
+      }
+    }, item);
+  });
+  return /*#__PURE__*/_react.default.createElement(_Dropdown.default, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.controls.colorScale), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, colormapList));
 }
 function Scatterplot(_ref) {
   var _ref$radius = _ref.radius,
     radius = _ref$radius === void 0 ? 30 : _ref$radius;
   var dataset = (0, _DatasetContext.useDataset)();
+  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
   var _useState = (0, _react.useState)({
       type: "FeatureCollection",
       features: []
@@ -54,14 +77,14 @@ function Scatterplot(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     mode = _useState4[0],
     setMode = _useState4[1];
-  var _useState5 = (0, _react.useState)({}),
+  var _useState5 = (0, _react.useState)([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    modeConfig = _useState6[0],
-    setModeConfig = _useState6[1];
+    selectedFeatureIndexes = _useState6[0],
+    setSelectedFeatureIndexes = _useState6[1];
   var _useState7 = (0, _react.useState)([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectedFeatureIndexes = _useState8[0],
-    setSelectedFeatureIndexes = _useState8[1];
+    featureState = _useState8[0],
+    setFeatureState = _useState8[1];
   var _useState9 = (0, _react.useState)([]),
     _useState10 = _slicedToArray(_useState9, 2),
     data = _useState10[0],
@@ -87,18 +110,19 @@ function Scatterplot(_ref) {
     setViewport = _useState16[1];
   (0, _react.useEffect)(function () {
     setData(function (prevState, props) {
-      var colorScale = _chromaJs.default.scale(["yellow", "008ae5"]).domain([_lodash.default.min(values), _lodash.default.max(values)]);
+      var colorHelper = new _color.ColorHelper();
+      var scale = dataset.colorEncoding === "var" ? colorHelper.getScale(dataset, values) : null;
       var data = position.map(function (e, i) {
         return {
           index: i,
           position: [position[i][0], position[i][1]],
           value: values[i],
-          color: colorScale(values[i]).rgb()
+          color: colorHelper.getColor(dataset, values[i], scale)
         };
       });
       return data;
     });
-  }, [position, values]);
+  }, [position, values, dataset.controls.colorScale]);
   (0, _react.useEffect)(function () {
     if (dataset.selectedObsm) {
       var helper = new _map.MapHelper();
@@ -158,6 +182,10 @@ function Scatterplot(_ref) {
                 _context2.next = 5;
                 return z.get([null, dataset.selectedVar.matrix_index], _zarr.GET_OPTIONS).then(function (result) {
                   setValues(result.data);
+                  dispatch({
+                    type: "set.colorEncoding",
+                    value: "var"
+                  });
                 });
               case 5:
               case "end":
@@ -171,9 +199,43 @@ function Scatterplot(_ref) {
       }();
       fetchData().catch(console.error);
     }
-  }, [dataset.url, dataset.selectedObs, dataset.selectedVar]);
+  }, [dataset.url, dataset.selectedVar]);
+  (0, _react.useEffect)(function () {
+    if (dataset.selectedObs) {
+      var zarrHelper = new _zarr.ZarrHelper();
+      var fetchData = /*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+          var z;
+          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return zarrHelper.open(dataset.url, "obs/" + dataset.selectedObs.name + "/codes");
+              case 2:
+                z = _context3.sent;
+                _context3.next = 5;
+                return z.get().then(function (result) {
+                  setValues(result.data);
+                  dispatch({
+                    type: "set.colorEncoding",
+                    value: "obs"
+                  });
+                });
+              case 5:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3);
+        }));
+        return function fetchData() {
+          return _ref4.apply(this, arguments);
+        };
+      }();
+      fetchData().catch(console.error);
+    }
+  }, [dataset.url, dataset.selectedObs]);
   var layers = [new _layers.ScatterplotLayer({
-    id: "scatter-plot",
+    id: "cherita-layer-scatterplot",
     data: data,
     radiusScale: radius,
     radiusMinPixels: 1,
@@ -185,16 +247,28 @@ function Scatterplot(_ref) {
     },
     getRadius: 1
   }), new _layers2.EditableGeoJsonLayer({
-    // id: "geojson-layer",
+    id: "cherita-layer-draw",
     data: features,
     mode: mode,
-    modeConfig: modeConfig,
     selectedFeatureIndexes: selectedFeatureIndexes,
-    onEdit: function onEdit(_ref4) {
-      var updatedData = _ref4.updatedData;
+    onEdit: function onEdit(_ref5) {
+      var updatedData = _ref5.updatedData,
+        editType = _ref5.editType,
+        editContext = _ref5.editContext;
       setFeatures(updatedData);
+      var updatedSelectedFeatureIndexes = selectedFeatureIndexes;
+      setFeatureState({
+        data: updatedData
+      });
+      if (editType === "addFeature") {
+        // when a drawing is complete, the value of editType becomes addFeature
+        var featureIndexes = editContext.featureIndexes; //extracting indexes of current features selected
+        updatedSelectedFeatureIndexes = [].concat(_toConsumableArray(selectedFeatureIndexes), _toConsumableArray(featureIndexes));
+      }
+      setSelectedFeatureIndexes(updatedSelectedFeatureIndexes); //now update your state
     }
   })];
+
   function onLayerClick(info) {
     if (mode !== _editModes.ViewMode) {
       // don't change selection while editing
@@ -202,19 +276,19 @@ function Scatterplot(_ref) {
     }
     setSelectedFeatureIndexes(info.object ? [info.index] : []);
   }
-  return /*#__PURE__*/_react.React.createElement(_react.React.Fragment, null, /*#__PURE__*/_react.React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-scatterplot"
-  }, /*#__PURE__*/_react.React.createElement(_react2.default, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.default, {
     layers: layers,
     initialViewState: viewport,
     controller: true,
     onClick: onLayerClick
-  }), /*#__PURE__*/_react.React.createElement(_Toolbox.Toolbox2, {
+  }), /*#__PURE__*/_react.default.createElement(_Toolbox.Toolbox, {
     mode: mode,
     setMode: setMode,
-    modeConfig: modeConfig,
-    setModeConfig: setModeConfig,
     features: mode,
     setFeatures: setFeatures
+  }), /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
+    values: values
   })));
 }

package/dist/components/scatterplot/Toolbox.js

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toolbox2 = Toolbox2;
+exports.Toolbox = Toolbox;
 require("bootstrap/dist/css/bootstrap.min.css");
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _react = require("react");
-var _DatasetContext = require("../../context/DatasetContext");
-var _layers = require("@nebula.gl/layers");
 var _editModes = require("@nebula.gl/edit-modes");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
@@ -16,7 +14,7 @@ var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup")
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Toolbox2(_ref) {
+function Toolbox(_ref) {
   var mode = _ref.mode,
     setMode = _ref.setMode,
     features = _ref.features,
@@ -62,14 +60,6 @@ function Toolbox2(_ref) {
       features: []
     });
   };
-  var undo = function undo(eventKey, event) {
-    console.log(features); // selected event will trigger
-    // setFeatures({
-    //   type: "FeatureCollection",
-    //   features: [],
-    // });
-  };
-
   return /*#__PURE__*/_react.React.createElement("div", {
     className: "cherita-toolbox"
   }, /*#__PURE__*/_react.React.createElement(_ButtonGroup.default, null, /*#__PURE__*/_react.React.createElement(_DropdownButton.default, {
@@ -94,8 +84,5 @@ function Toolbox2(_ref) {
   }, "ViewMode")), /*#__PURE__*/_react.React.createElement(_Button.default, {
     variant: "primary",
     onClick: deleteFeatures
-  }, "Delete"), /*#__PURE__*/_react.React.createElement(_Button.default, {
-    variant: "primary",
-    onClick: undo
-  }, "Undo")));
+  }, "Delete")));
 }

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

@@ -158,7 +158,7 @@ function VarNamesList(_ref2) {
   }, [mode, dataset.selectedMultiVar]);
   var selectVar = function selectVar(item) {
     setVarButtons(function () {
-      if (varButtons.find(function (v) {
+      if (varButtons[0] && varButtons.find(function (v) {
         return v.matrix_index === item.matrix_index;
       })) {
         return varButtons;
@@ -180,7 +180,7 @@ function VarNamesList(_ref2) {
   };
   var varList = (0, _react.useMemo)(function () {
     return varButtons.map(function (item) {
-      if (mode === _constants.SELECTION_MODES.SINGLE) {
+      if (item && mode === _constants.SELECTION_MODES.SINGLE) {
         return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
           type: "button",
           key: item.matrix_index,

package/dist/components/violin/Violin.js

@@ -14,6 +14,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
 var _reactBootstrap = require("react-bootstrap");
 var _requests = require("../../utils/requests");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -132,8 +133,8 @@ function Violin(_ref) {
   }, [fetchedData, hasSelections, isPending, serverError]);
   if (hasSelections) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-violin"
-    }, /*#__PURE__*/_react.default.createElement("h5", null, mode), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-violin position-relative"
+    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement("h5", null, mode), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
       layout: layout,
       useResizeHandler: true,

package/dist/constants/constants.js

@@ -3,9 +3,52 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.SELECTION_MODES = exports.PLOTLY_COLORSCALES = exports.MATRIXPLOT_STANDARDSCALES = exports.DOTPLOT_STANDARDSCALES = void 0;
+exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.SELECTION_MODES = exports.PLOTLY_COLORSCALES = exports.MATRIXPLOT_STANDARDSCALES = exports.DOTPLOT_STANDARDSCALES = exports.CHROMA_COLORSCALES = void 0;
 var PLOTLY_COLORSCALES = ["Blackbody", "Bluered", "Blues", "Cividis", "Earth", "Electric", "Greens", "Greys", "Hot", "Jet", "Picnic", "Portland", "Rainbow", "RdBu", "Reds", "Viridis", "YlGnBu", "YlOrRd"];
 exports.PLOTLY_COLORSCALES = PLOTLY_COLORSCALES;
+var CHROMA_COLORSCALES = {
+  OrRd: ["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000"],
+  PuBu: ["#fff7fb", "#ece7f2", "#d0d1e6", "#a6bddb", "#74a9cf", "#3690c0", "#0570b0", "#045a8d", "#023858"],
+  BuPu: ["#f7fcfd", "#e0ecf4", "#bfd3e6", "#9ebcda", "#8c96c6", "#8c6bb1", "#88419d", "#810f7c", "#4d004b"],
+  Oranges: ["#fff5eb", "#fee6ce", "#fdd0a2", "#fdae6b", "#fd8d3c", "#f16913", "#d94801", "#a63603", "#7f2704"],
+  BuGn: ["#f7fcfd", "#e5f5f9", "#ccece6", "#99d8c9", "#66c2a4", "#41ae76", "#238b45", "#006d2c", "#00441b"],
+  YlOrBr: ["#ffffe5", "#fff7bc", "#fee391", "#fec44f", "#fe9929", "#ec7014", "#cc4c02", "#993404", "#662506"],
+  YlGn: ["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"],
+  Reds: ["#fff5f0", "#fee0d2", "#fcbba1", "#fc9272", "#fb6a4a", "#ef3b2c", "#cb181d", "#a50f15", "#67000d"],
+  RdPu: ["#fff7f3", "#fde0dd", "#fcc5c0", "#fa9fb5", "#f768a1", "#dd3497", "#ae017e", "#7a0177", "#49006a"],
+  Greens: ["#f7fcf5", "#e5f5e0", "#c7e9c0", "#a1d99b", "#74c476", "#41ab5d", "#238b45", "#006d2c", "#00441b"],
+  YlGnBu: ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"],
+  Purples: ["#fcfbfd", "#efedf5", "#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3", "#54278f", "#3f007d"],
+  GnBu: ["#f7fcf0", "#e0f3db", "#ccebc5", "#a8ddb5", "#7bccc4", "#4eb3d3", "#2b8cbe", "#0868ac", "#084081"],
+  Greys: ["#ffffff", "#f0f0f0", "#d9d9d9", "#bdbdbd", "#969696", "#737373", "#525252", "#252525", "#000000"],
+  YlOrRd: ["#ffffcc", "#ffeda0", "#fed976", "#feb24c", "#fd8d3c", "#fc4e2a", "#e31a1c", "#bd0026", "#800026"],
+  PuRd: ["#f7f4f9", "#e7e1ef", "#d4b9da", "#c994c7", "#df65b0", "#e7298a", "#ce1256", "#980043", "#67001f"],
+  Blues: ["#f7fbff", "#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"],
+  PuBuGn: ["#fff7fb", "#ece2f0", "#d0d1e6", "#a6bddb", "#67a9cf", "#3690c0", "#02818a", "#016c59", "#014636"],
+  Viridis: ["#440154", "#482777", "#3f4a8a", "#31678e", "#26838f", "#1f9d8a", "#6cce5a", "#b6de2b", "#fee825"],
+  // diverging
+
+  Spectral: ["#9e0142", "#d53e4f", "#f46d43", "#fdae61", "#fee08b", "#ffffbf", "#e6f598", "#abdda4", "#66c2a5", "#3288bd", "#5e4fa2"],
+  RdYlGn: ["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee08b", "#ffffbf", "#d9ef8b", "#a6d96a", "#66bd63", "#1a9850", "#006837"],
+  RdBu: ["#67001f", "#b2182b", "#d6604d", "#f4a582", "#fddbc7", "#f7f7f7", "#d1e5f0", "#92c5de", "#4393c3", "#2166ac", "#053061"],
+  PiYG: ["#8e0152", "#c51b7d", "#de77ae", "#f1b6da", "#fde0ef", "#f7f7f7", "#e6f5d0", "#b8e186", "#7fbc41", "#4d9221", "#276419"],
+  PRGn: ["#40004b", "#762a83", "#9970ab", "#c2a5cf", "#e7d4e8", "#f7f7f7", "#d9f0d3", "#a6dba0", "#5aae61", "#1b7837", "#00441b"],
+  RdYlBu: ["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee090", "#ffffbf", "#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695"],
+  BrBG: ["#543005", "#8c510a", "#bf812d", "#dfc27d", "#f6e8c3", "#f5f5f5", "#c7eae5", "#80cdc1", "#35978f", "#01665e", "#003c30"],
+  RdGy: ["#67001f", "#b2182b", "#d6604d", "#f4a582", "#fddbc7", "#ffffff", "#e0e0e0", "#bababa", "#878787", "#4d4d4d", "#1a1a1a"],
+  PuOr: ["#7f3b08", "#b35806", "#e08214", "#fdb863", "#fee0b6", "#f7f7f7", "#d8daeb", "#b2abd2", "#8073ac", "#542788", "#2d004b"],
+  // qualitative
+
+  Set2: ["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854", "#ffd92f", "#e5c494", "#b3b3b3"],
+  Accent: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f", "#bf5b17", "#666666"],
+  Set1: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf", "#999999"],
+  Set3: ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#d9d9d9", "#bc80bd", "#ccebc5", "#ffed6f"],
+  Dark2: ["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d", "#666666"],
+  Paired: ["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99", "#e31a1c", "#fdbf6f", "#ff7f00", "#cab2d6", "#6a3d9a", "#ffff99", "#b15928"],
+  Pastel2: ["#b3e2cd", "#fdcdac", "#cbd5e8", "#f4cae4", "#e6f5c9", "#fff2ae", "#f1e2cc", "#cccccc"],
+  Pastel1: ["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6", "#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"]
+};
+exports.CHROMA_COLORSCALES = CHROMA_COLORSCALES;
 var SELECTION_MODES = {
   SINGLE: "single",
   MULTIPLE: "multiple"

package/dist/context/DatasetContext.js

@@ -61,11 +61,13 @@ function DatasetProvider(_ref2) {
     children = _ref2.children;
   var _useReducer = (0, _react.useReducer)(datasetReducer, {
       url: dataset_url,
+      obs: {},
       selectedObs: null,
       selectedObsm: null,
       selectedVar: null,
       selectedMultiObs: [],
       selectedMultiVar: [],
+      colorEncoding: null,
       controls: {
         colorScale: "Viridis",
         colorAxis: {
@@ -77,6 +79,9 @@ function DatasetProvider(_ref2) {
         standardScale: null,
         meanOnlyExpressed: false,
         expressionCutoff: 0.0
+      },
+      state: {
+        obs: {}
       }
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -103,6 +108,12 @@ function datasetReducer(dataset, action) {
       {
         return action.dataset;
       }
+    case "set.obs":
+      {
+        return _objectSpread(_objectSpread({}, dataset), {}, {
+          obs: action.value
+        });
+      }
     case "obsSelected":
       {
         return _objectSpread(_objectSpread({}, dataset), {}, {
@@ -141,6 +152,12 @@ function datasetReducer(dataset, action) {
           })
         });
       }
+    case "set.colorEncoding":
+      {
+        return _objectSpread(_objectSpread({}, dataset), {}, {
+          colorEncoding: action.value
+        });
+      }
     case "set.controls.colorScale":
       {
         return _objectSpread(_objectSpread({}, dataset), {}, {

package/dist/helpers/color.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorHelper = void 0;
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _constants = require("../constants/constants");
+var _DatasetContext = require("../context/DatasetContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var ColorHelper = /*#__PURE__*/_createClass(function ColorHelper() {
+  _classCallCheck(this, ColorHelper);
+  _defineProperty(this, "getScale", function (dataset, values) {
+    return _chromaJs.default.scale(_constants.CHROMA_COLORSCALES[dataset.controls.colorScale]).domain([_lodash.default.min(values), _lodash.default.max(values)]);
+  });
+  _defineProperty(this, "getColor", function (dataset, value) {
+    var scale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _chromaJs.default.scale();
+    if (dataset.colorEncoding === "var") {
+      return scale(value).rgb();
+    } else if (dataset.colorEncoding === "obs") {
+      //console.log(dataset.obs[dataset.selectedObs.name].state[value]["color"]);
+      return dataset.obs[dataset.selectedObs.name].state.hasOwnProperty(value) ? dataset.obs[dataset.selectedObs.name].state[value]["color"] : null;
+    }
+  });
+});
+exports.ColorHelper = ColorHelper;

package/dist/helpers/map.js

@@ -12,7 +12,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-window.deck.log.level = 1;
 var MapHelper = /*#__PURE__*/_createClass(function MapHelper() {
   _classCallCheck(this, MapHelper);
   _defineProperty(this, "fitBounds", function (coords) {
@@ -30,8 +29,8 @@ var MapHelper = /*#__PURE__*/_createClass(function MapHelper() {
     var lonMin = 180;
     var lonMax = -180;
     coords.forEach(function (coord) {
-      var RECT_LAT_INDEX = '0';
-      var RECT_LON_INDEX = '1';
+      var RECT_LAT_INDEX = "0";
+      var RECT_LON_INDEX = "1";
       if (coord[RECT_LAT_INDEX] < latMin) latMin = coord[RECT_LAT_INDEX];
       if (coord[RECT_LAT_INDEX] > latMax) latMax = coord[RECT_LAT_INDEX];
       if (coord[RECT_LON_INDEX] < lonMin) lonMin = coord[RECT_LON_INDEX];

package/dist/utils/LoadingSpinner.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadingSpinner = LoadingSpinner;
+require("bootstrap/dist/css/bootstrap.min.css");
+var _reactBootstrap = require("react-bootstrap");
+function LoadingSpinner(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "icon" : _ref$type,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "Loading..." : _ref$text;
+  if (type === "message") {
+    return /*#__PURE__*/React.createElement("div", {
+      className: " h-100 w-100 d-flex z-1 bg-light opacity-75 position-absolute justify-content-center align-items-center "
+    }, /*#__PURE__*/React.createElement(_reactBootstrap.Button, {
+      variant: "primary",
+      disabled: true
+    }, /*#__PURE__*/React.createElement(_reactBootstrap.Spinner, {
+      as: "span",
+      animation: "border",
+      size: "sm",
+      role: "status",
+      "aria-hidden": "true"
+    }), text));
+  } else {
+    return /*#__PURE__*/React.createElement("div", {
+      className: " h-100 w-100 d-flex z-1 bg-light opacity-75 position-absolute justify-content-center align-items-center "
+    }, /*#__PURE__*/React.createElement(_reactBootstrap.Spinner, {
+      animation: "border",
+      variant: "primary",
+      role: "status"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "visually-hidden"
+    }, text)));
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.1.12-dev.2023-12-19.edfc4091",
+  "version": "0.1.12-dev.2024-02-12.f6d21b70",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -78,5 +78,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "edfc40913a8d9d9358dda442c8aeb8dc52c10acc"
+  "prereleaseSha": "f6d21b70934071cac3bb5899d8aead080a15b135"
 }