@haniffalab/cherita-react 0.1.12 → 0.2.0-dev.2024-02-12.4d768f57

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

@@ -5,94 +5,262 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VarNamesList = VarNamesList;
+exports.VarSearchBar = VarSearchBar;
 require("bootstrap/dist/css/bootstrap.min.css");
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _requests = require("../../utils/requests");
 var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
+var _reactBootstrap = require("react-bootstrap");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function VarNamesList(_ref) {
-  var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? _constants.SELECTION_MODES.SINGLE : _ref$mode;
-  var dataset = (0, _DatasetContext.useDataset)();
-  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
+function VarSearchBar(_ref) {
+  var _ref$varNames = _ref.varNames,
+    varNames = _ref$varNames === void 0 ? [] : _ref$varNames,
+    onSelect = _ref.onSelect;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
-    varNames = _useState2[0],
-    setVarNames = _useState2[1];
-  var _useState3 = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? null : []),
+    suggestions = _useState2[0],
+    setSuggestions = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    active = _useState4[0],
-    setActive = _useState4[1];
+    showSuggestions = _useState4[0],
+    setShowSuggestions = _useState4[1];
+  var _useState5 = (0, _react.useState)(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    text = _useState6[0],
+    setText = _useState6[1];
+  var getSuggestions = (0, _react.useMemo)(function () {
+    var filter = function filter(text) {
+      if (text.length > 0) {
+        var regex = new RegExp("^".concat(text), "i");
+        var _filter = varNames.sort().filter(function (v) {
+          return regex.test(v.name);
+        });
+        setSuggestions(_filter);
+        setShowSuggestions(true);
+      } else {
+        setShowSuggestions(false);
+      }
+    };
+    return _lodash.default.debounce(filter, 300);
+  }, [varNames]);
   (0, _react.useEffect)(function () {
-    (0, _requests.fetchData)("var/names", {
+    getSuggestions(text);
+  }, [getSuggestions, text]);
+  var suggestionsList = suggestions.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+      key: item.name,
+      as: "button",
+      onClick: function onClick() {
+        onSelect(item);
+      }
+    }, item.name);
+  });
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, "Feature:"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
+    onFocus: function onFocus() {
+      setShowSuggestions(text.length > 0);
+    },
+    onBlur: function onBlur() {
+      _lodash.default.delay(function () {
+        setShowSuggestions(false);
+      }, 150);
+    },
+    type: "text",
+    placeholder: "Search for a feature",
+    value: text,
+    onChange: function onChange(e) {
+      setText(e.target.value);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, {
+    style: {
+      width: "90%",
+      maxHeight: "25vh",
+      overflowY: "scroll"
+    },
+    show: showSuggestions
+  }, suggestionsList))));
+}
+function VarNamesList(_ref2) {
+  var _ref2$mode = _ref2.mode,
+    mode = _ref2$mode === void 0 ? _constants.SELECTION_MODES.SINGLE : _ref2$mode;
+  var ENDPOINT = "var/names";
+  var dataset = (0, _DatasetContext.useDataset)();
+  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    varNames = _useState8[0],
+    setVarNames = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    updatedVarNames = _useState10[0],
+    setUpdatedVarNames = _useState10[1];
+  var _useState11 = (0, _react.useState)(mode ? mode === _constants.SELECTION_MODES.SINGLE ? [dataset.selectVar] : dataset.selectedMultiVar : []),
+    _useState12 = _slicedToArray(_useState11, 2),
+    varButtons = _useState12[0],
+    setVarButtons = _useState12[1];
+  var _useState13 = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectVar : dataset.selectedMultiVar),
+    _useState14 = _slicedToArray(_useState13, 2),
+    active = _useState14[0],
+    setActive = _useState14[1];
+  var _useState15 = (0, _react.useState)({
       url: dataset.url
-    }).then(function (data) {
-      setVarNames(data);
-    }).catch(function (response) {
-      response.json().then(function (json) {
-        console.log(json.message);
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    params = _useState16[0],
+    setParams = _useState16[1];
+  (0, _react.useEffect)(function () {
+    setParams(function (p) {
+      return _objectSpread(_objectSpread({}, p), {}, {
+        url: dataset.url
       });
     });
   }, [dataset.url]);
+  var _useFetch = (0, _requests.useFetch)(ENDPOINT, params, {
+      refetchOnMount: false
+    }),
+    fetchedData = _useFetch.fetchedData,
+    isPending = _useFetch.isPending,
+    serverError = _useFetch.serverError;
+  var validateSelection = (0, _react.useCallback)(function (selectedVar, mode) {
+    if (updatedVarNames) {
+      if (mode === _constants.SELECTION_MODES.SINGLE) {
+        if (selectedVar && !_lodash.default.some(varNames, selectedVar)) {
+          setActive(null);
+          dispatch({
+            type: "varSelected",
+            var: null
+          });
+        }
+      } else {
+        if (selectedVar.length && !_lodash.default.every(selectedVar, function (v) {
+          return _lodash.default.some(varNames, v);
+        })) {
+          setActive([]);
+          dispatch({
+            type: "multiVarReset",
+            var: []
+          });
+        }
+      }
+    }
+  }, [dispatch, varNames, updatedVarNames]);
+  (0, _react.useEffect)(function () {
+    if (!isPending && !serverError) {
+      setVarNames(fetchedData);
+      setUpdatedVarNames(true);
+    }
+  }, [fetchedData, isPending, serverError]);
   (0, _react.useEffect)(function () {
     if (mode === _constants.SELECTION_MODES.SINGLE && dataset.selectedVar) {
+      validateSelection(dataset.selectVar, mode);
       setActive(dataset.selectedVar.matrix_index);
     }
-  }, [mode, dataset.selectedVar]);
+  }, [mode, dataset.selectedVar, dataset.selectVar, validateSelection]);
   (0, _react.useEffect)(function () {
     if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+      validateSelection(dataset.selectedMultiVar, mode);
       setActive(dataset.selectedMultiVar.map(function (i) {
         return i.matrix_index;
       }));
     }
-  }, [mode, dataset.selectedMultiVar]);
-  var varList = varNames.map(function (item) {
+  }, [mode, dataset.selectedMultiVar, validateSelection]);
+  var selectVar = function selectVar(item) {
+    setVarButtons(function () {
+      if (varButtons[0] && varButtons.find(function (v) {
+        return v.matrix_index === item.matrix_index;
+      })) {
+        return varButtons;
+      } else {
+        return [].concat(_toConsumableArray(varButtons), [item]);
+      }
+    });
     if (mode === _constants.SELECTION_MODES.SINGLE) {
-      return /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        key: item.matrix_index,
-        className: "list-group-item list-grou-item-action ".concat(active === item.matrix_index && "active"),
-        onClick: function onClick() {
-          dispatch({
-            type: "varSelected",
-            var: item
-          });
-        }
-      }, item.name);
+      dispatch({
+        type: "varSelected",
+        var: item
+      });
     } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      return /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        key: item.matrix_index,
-        className: "list-group-item list-grou-item-action ".concat(active.includes(item.matrix_index) && "active"),
-        onClick: function onClick() {
-          if (active.includes(item.matrix_index)) {
-            dispatch({
-              type: "multiVarDeselected",
-              var: item
-            });
-          } else {
+      dispatch({
+        type: "multiVarSelected",
+        var: item
+      });
+    }
+  };
+  var varList = (0, _react.useMemo)(function () {
+    return varButtons.map(function (item) {
+      if (item && mode === _constants.SELECTION_MODES.SINGLE) {
+        return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+          type: "button",
+          key: item.matrix_index,
+          variant: "outline-primary",
+          className: "".concat(active === item.matrix_index && "active", " m-1"),
+          onClick: function onClick() {
             dispatch({
-              type: "multiVarSelected",
+              type: "varSelected",
               var: item
             });
           }
-        }
-      }, item.name);
-    } else {
-      return null;
-    }
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: ""
-  }, /*#__PURE__*/_react.default.createElement("h4", null, mode), /*#__PURE__*/_react.default.createElement("div", {
-    className: "list-group overflow-auto mh-100"
-  }, varList));
+        }, item.name);
+      } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+        return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+          type: "button",
+          key: item.matrix_index,
+          variant: "outline-primary",
+          className: "".concat(active.includes(item.matrix_index) && "active", " m-1"),
+          onClick: function onClick() {
+            if (active.includes(item.matrix_index)) {
+              dispatch({
+                type: "multiVarDeselected",
+                var: item
+              });
+            } else {
+              dispatch({
+                type: "multiVarSelected",
+                var: item
+              });
+            }
+          }
+        }, item.name);
+      } else {
+        return null;
+      }
+    });
+  }, [active, dispatch, mode, varButtons]);
+  if (!serverError) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative"
+    }, /*#__PURE__*/_react.default.createElement("h4", null, mode), isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(VarSearchBar, {
+      varNames: varNames,
+      onSelect: selectVar
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "overflow-auto mt-2"
+    }, varList));
+  } else {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "danger"
+    }, serverError.message));
+  }
 }

package/dist/components/violin/Violin.js

@@ -7,17 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.Violin = Violin;
 exports.ViolinControls = ViolinControls;
 require("bootstrap/dist/css/bootstrap.min.css");
-var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
-var _lodash = _interopRequireDefault(require("lodash"));
 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 _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -39,7 +43,7 @@ function ViolinControls() {
     }
   }, [dataset.controls.standardScale]);
   var standardScaleList = _constants.VIOLINPLOT_STANDARDSCALES.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
       key: item.value,
       active: activeStandardScale === item.value,
       onClick: function onClick() {
@@ -50,14 +54,15 @@ function ViolinControls() {
       }
     }, item.name);
   });
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Standard scale"), /*#__PURE__*/_react.default.createElement(_Dropdown.default, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Standard scale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
     id: "dropdownStandardScale",
     variant: "light"
-  }, activeStandardScale), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, standardScaleList)))));
+  }, activeStandardScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, standardScaleList)))));
 }
 function Violin(_ref) {
   var _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? _constants.VIOLIN_MODES.MULTIKEY : _ref$mode;
+  var ENDPOINT = "violin";
   var dataset = (0, _DatasetContext.useDataset)();
   var _useState3 = (0, _react.useState)([]),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -71,82 +76,84 @@ function Violin(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     hasSelections = _useState8[0],
     setHasSelections = _useState8[1];
+  var _useState9 = (0, _react.useState)({
+      url: dataset.url,
+      keys: [],
+      scale: dataset.controls.standardScale
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    params = _useState10[0],
+    setParams = _useState10[1];
   // @TODO: set default scale
 
-  var update = (0, _react.useMemo)(function () {
-    var func = function func(abortController) {
-      if (mode === _constants.VIOLIN_MODES.MULTIKEY) {
-        if (dataset.selectedMultiVar.length) {
-          setHasSelections(true);
-          (0, _requests.fetchData)("violin", {
-            url: dataset.url,
-            keys: dataset.selectedMultiVar.map(function (i) {
-              return i.name;
-            }),
-            scale: dataset.controls.standardScale
-          }, abortController.signal).then(function (data) {
-            setData(data.data);
-            setLayout(data.layout);
-          }).catch(function (response) {
-            if (response.name !== "AbortError") {
-              response.json().then(function (json) {
-                console.log(json.message);
-              });
-            }
-          });
-        } else {
-          setHasSelections(false);
-        }
-      } else if (mode === _constants.VIOLIN_MODES.GROUPBY) {
-        if (dataset.selectedObs && dataset.selectedVar) {
-          setHasSelections(true);
-          (0, _requests.fetchData)("violin", {
-            url: dataset.url,
-            keys: dataset.selectedVar.name,
-            selectedObs: dataset.selectedObs,
-            scale: dataset.controls.standardScale
-          }).then(function (data) {
-            setData(data.data);
-            setLayout(data.layout);
-          }).catch(function (response) {
-            if (response.name !== "AbortError") {
-              response.json().then(function (json) {
-                console.log(json.message);
-              });
-            }
-          });
-        } else {
-          setHasSelections(false);
-        }
+  (0, _react.useEffect)(function () {
+    if (mode === _constants.VIOLIN_MODES.MULTIKEY) {
+      if (dataset.selectedMultiVar.length) {
+        setHasSelections(true);
+      } else {
+        setHasSelections(false);
+      }
+      setParams(function (p) {
+        return _objectSpread(_objectSpread({}, p), {}, {
+          url: dataset.url,
+          keys: dataset.selectedMultiVar.map(function (i) {
+            return i.name;
+          }),
+          scale: dataset.controls.standardScale
+        });
+      });
+    } else if (mode === _constants.VIOLIN_MODES.GROUPBY) {
+      if (dataset.selectedObs && dataset.selectedVar) {
+        setHasSelections(true);
+      } else {
+        setHasSelections(false);
       }
-    };
-    // delay invoking the fetch function to avoid firing requests
-    // while dependencies might still be getting updated by the user
-    return _lodash.default.debounce(func, 500);
-  }, [mode, dataset.url, dataset.selectedObs, dataset.selectedVar, dataset.selectedMultiVar, dataset.controls.standardScale]);
+      setParams(function (p) {
+        return _objectSpread(_objectSpread({}, p), {}, {
+          url: dataset.url,
+          keys: dataset.selectedVar.name,
+          selectedObs: dataset.selectedObs,
+          scale: dataset.controls.standardScale
+        });
+      });
+    }
+  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, mode]);
+  var _useDebouncedFetch = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
+      enabled: mode === _constants.VIOLIN_MODES.MULTIKEY && !!params.keys || mode === _constants.VIOLIN_MODES.GROUPBY && !!params.keys.length && !!params.selectedObs
+    }),
+    fetchedData = _useDebouncedFetch.fetchedData,
+    isPending = _useDebouncedFetch.isPending,
+    serverError = _useDebouncedFetch.serverError;
   (0, _react.useEffect)(function () {
-    // create an abort controller to pass into each fetch function
-    // to abort previous incompleted requests when a new request is fired
-    var abortController = new AbortController();
-    update(abortController);
-    return function () {
-      abortController.abort();
-    };
-  }, [update]);
-  if (hasSelections) {
+    if (hasSelections && !isPending && !serverError) {
+      setData(fetchedData.data);
+      setLayout(fetchedData.layout);
+    }
+  }, [fetchedData, hasSelections, isPending, serverError]);
+  if (!serverError) {
+    if (hasSelections) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        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,
+        style: {
+          maxWidth: "100%",
+          maxHeight: "100%"
+        }
+      }));
+    }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "cherita-violin"
-    }, /*#__PURE__*/_react.default.createElement("h5", null, mode), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
-      data: data,
-      layout: layout,
-      useResizeHandler: true,
-      style: {
-        maxWidth: "100%",
-        maxHeight: "100%"
-      }
-    }));
+    }, mode === _constants.VIOLIN_MODES.MULTIKEY && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "light"
+    }, "Select features"), mode === _constants.VIOLIN_MODES.GROUPBY && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "light"
+    }, "Select categories and a feature"));
+  } else {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "danger"
+    }, serverError.message));
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-violin"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Select variables to plot"));
 }

package/dist/constants/constants.js

@@ -3,11 +3,54 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.SELECTION_MODES = exports.PLOTLY_COLORSCALES = exports.MATRIXPLOT_STANDARDSCALES = exports.EMBEDDINGS = exports.DOTPLOT_STANDARDSCALES = void 0;
+exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.SELECTION_MODES = exports.PLOTLY_COLORSCALES = exports.MATRIXPLOT_STANDARDSCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_STANDARDSCALES = exports.CHROMA_COLORSCALES = void 0;
+var LOCAL_STORAGE_KEY = "CHERITA";
+exports.LOCAL_STORAGE_KEY = LOCAL_STORAGE_KEY;
 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 EMBEDDINGS = ["X_umap", "X_tsne"];
-exports.EMBEDDINGS = EMBEDDINGS;
+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"