@haniffalab/cherita-react 0.1.0 → 0.1.2

package/dist/lib/components/Dotplot.js

@@ -0,0 +1,125 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dotplot = Dotplot;
+exports.DotplotControls = DotplotControls;
+require("bootstrap/dist/css/bootstrap.min.css");
+var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
+var _react = require("react");
+var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
+var _DatasetContext = require("./DatasetContext");
+var _constants = require("./lib/constants/constants");
+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); }
+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 DotplotControls() {
+  var dataset = (0, _DatasetContext.useDataset)();
+  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  var _useState = (0, _react.useState)(dataset.colorscale),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setActive(dataset.colorscale);
+  }, [dataset.colorscale]);
+  var colormapList = _constants.PLOTLY_COLORSCALES.map(function (item) {
+    return /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
+      key: item,
+      active: active === item,
+      onClick: function onClick() {
+        dispatch({
+          type: "colorscaleSelected",
+          colorscale: item
+        });
+      }
+    }, item);
+  });
+  return /*#__PURE__*/_react.React.createElement(_Dropdown.default, null, /*#__PURE__*/_react.React.createElement(_Dropdown.default.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.colorscale), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Menu, null, colormapList));
+}
+function Dotplot() {
+  var dataset = (0, _DatasetContext.useDataset)();
+  var colorscale = (0, _react.useRef)(dataset.colorscale);
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    data = _useState4[0],
+    setData = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    layout = _useState6[0],
+    setLayout = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hasSelections = _useState8[0],
+    setHasSelections = _useState8[1];
+  var updateColorscale = (0, _react.useCallback)(function (colorscale) {
+    setLayout(function (l) {
+      return _objectSpread(_objectSpread({}, l), {}, {
+        coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
+          colorscale: colorscale
+        })
+      });
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
+      setHasSelections(true);
+      fetch(new URL("dotplot", process.env.REACT_APP_API_URL), {
+        method: "POST",
+        mode: "cors",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify({
+          url: dataset.url,
+          selectedObs: dataset.selectedObs,
+          selectedMultiVar: dataset.selectedMultiVar
+        })
+      }).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        setData(data.data);
+        setLayout(data.layout);
+        updateColorscale(colorscale.current);
+      });
+    } else {
+      setHasSelections(false);
+    }
+  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, updateColorscale]);
+  (0, _react.useEffect)(function () {
+    console.log("update colorscale");
+    colorscale.current = dataset.colorscale;
+    updateColorscale(colorscale.current);
+  }, [dataset.colorscale, updateColorscale]);
+  if (hasSelections) {
+    return /*#__PURE__*/_react.React.createElement("div", {
+      className: "container text-center"
+    }, /*#__PURE__*/_react.React.createElement("h5", null, dataset.url), /*#__PURE__*/_react.React.createElement(DotplotControls, null), /*#__PURE__*/_react.React.createElement(_reactPlotly.default, {
+      data: data,
+      layout: layout,
+      useResizeHandler: true,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    }));
+  }
+  return /*#__PURE__*/_react.React.createElement("div", {
+    className: "h-100"
+  }, /*#__PURE__*/_react.React.createElement("h5", null, dataset.url), /*#__PURE__*/_react.React.createElement("p", null, "Select OBS and VAR"));
+}

package/dist/lib/components/Heatmap.js

@@ -0,0 +1,125 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Heatmap = Heatmap;
+exports.HeatmapControls = HeatmapControls;
+require("bootstrap/dist/css/bootstrap.min.css");
+var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
+var _react = require("react");
+var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
+var _DatasetContext = require("./DatasetContext");
+var _constants = require("./lib/constants/constants");
+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); }
+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 HeatmapControls() {
+  var dataset = (0, _DatasetContext.useDataset)();
+  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  var _useState = (0, _react.useState)(dataset.colorscale),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setActive(dataset.colorscale);
+  }, [dataset.colorscale]);
+  var colormapList = _constants.PLOTLY_COLORSCALES.map(function (item) {
+    return /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
+      key: item,
+      active: active === item,
+      onClick: function onClick() {
+        dispatch({
+          type: "colorscaleSelected",
+          colorscale: item
+        });
+      }
+    }, item);
+  });
+  return /*#__PURE__*/_react.React.createElement(_Dropdown.default, null, /*#__PURE__*/_react.React.createElement(_Dropdown.default.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.colorscale), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Menu, null, colormapList));
+}
+function Heatmap() {
+  var dataset = (0, _DatasetContext.useDataset)();
+  var colorscale = (0, _react.useRef)(dataset.colorscale);
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    data = _useState4[0],
+    setData = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    layout = _useState6[0],
+    setLayout = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hasSelections = _useState8[0],
+    setHasSelections = _useState8[1];
+  var updateColorscale = (0, _react.useCallback)(function (colorscale) {
+    setData(function (d) {
+      return d.map(function (i) {
+        return _objectSpread(_objectSpread({}, i), {}, {
+          colorscale: colorscale
+        });
+      });
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
+      setHasSelections(true);
+      fetch(new URL("heatmap", process.env.REACT_APP_API_URL), {
+        method: "POST",
+        mode: "cors",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify({
+          url: dataset.url,
+          selectedObs: dataset.selectedObs,
+          selectedMultiVar: dataset.selectedMultiVar
+        })
+      }).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        setData(data.data);
+        setLayout(data.layout);
+        updateColorscale(colorscale.current);
+      });
+    } else {
+      setHasSelections(false);
+    }
+  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, updateColorscale]);
+  (0, _react.useEffect)(function () {
+    console.log("update colorscale");
+    colorscale.current = dataset.colorscale;
+    updateColorscale(colorscale.current);
+  }, [dataset.colorscale, updateColorscale]);
+  if (hasSelections) {
+    return /*#__PURE__*/_react.React.createElement("div", {
+      className: "container text-center"
+    }, /*#__PURE__*/_react.React.createElement("h5", null, dataset.url), /*#__PURE__*/_react.React.createElement(HeatmapControls, null), /*#__PURE__*/_react.React.createElement(_reactPlotly.default, {
+      data: data,
+      layout: layout,
+      useResizeHandler: true,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    }));
+  }
+  return /*#__PURE__*/_react.React.createElement("div", {
+    className: "h-100"
+  }, /*#__PURE__*/_react.React.createElement("h5", null, dataset.url), /*#__PURE__*/_react.React.createElement("p", null, "Select OBS and VAR"));
+}

package/dist/lib/components/ObsList.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ObsColsList = ObsColsList;
+require("bootstrap/dist/css/bootstrap.min.css");
+require("bootstrap/dist/js/bootstrap.bundle.min.js");
+var _react = require("react");
+var _DatasetContext = require("./DatasetContext");
+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 ObsColsList() {
+  var dataset = (0, _DatasetContext.useDataset)();
+  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    obsColsList = _useState2[0],
+    setObsColsList = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    active = _useState4[0],
+    setActive = _useState4[1];
+  (0, _react.useEffect)(function () {
+    fetch(new URL("obs/cols", process.env.REACT_APP_API_URL), {
+      method: "POST",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      },
+      body: JSON.stringify({
+        url: dataset.url
+      })
+    }).then(function (response) {
+      return response.json();
+    }).then(function (data) {
+      setObsColsList(data);
+    });
+  }, [dataset.url]);
+  (0, _react.useEffect)(function () {
+    setActive(dataset.selectedObs);
+  }, [dataset.selectedObs]);
+  var obsList = obsColsList.map(function (item) {
+    return /*#__PURE__*/_react.React.createElement("button", {
+      type: "button",
+      key: item,
+      className: "list-group-item list-grou-item-action ".concat(active === item && "active"),
+      onClick: function onClick() {
+        dispatch({
+          type: "obsSelected",
+          obs: item
+        });
+      }
+    }, item);
+  });
+  return /*#__PURE__*/_react.React.createElement("div", {
+    className: "h-100"
+  }, /*#__PURE__*/_react.React.createElement("h5", null, dataset.url), /*#__PURE__*/_react.React.createElement("div", {
+    className: "list-group overflow-auto mh-100"
+  }, obsList));
+}

package/dist/lib/components/VarList.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiVarNamesList = MultiVarNamesList;
+exports.VarNamesList = VarNamesList;
+require("bootstrap/dist/css/bootstrap.min.css");
+var _react = require("react");
+var _DatasetContext = require("./DatasetContext");
+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() {
+  var dataset = (0, _DatasetContext.useDataset)();
+  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    varNames = _useState2[0],
+    setVarNames = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    active = _useState4[0],
+    setActive = _useState4[1];
+  (0, _react.useEffect)(function () {
+    fetch(new URL("var/names", process.env.REACT_APP_API_URL), {
+      method: "POST",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      },
+      body: JSON.stringify({
+        url: dataset.url
+      })
+    }).then(function (response) {
+      return response.json();
+    }).then(function (data) {
+      setVarNames(data);
+    });
+  }, [dataset.url]);
+  (0, _react.useEffect)(function () {
+    setActive(dataset.selectedVar);
+  }, [dataset.selectedVar]);
+  var varList = varNames.map(function (item) {
+    return /*#__PURE__*/_react.React.createElement("button", {
+      type: "button",
+      key: item,
+      className: "list-group-item list-grou-item-action ".concat(active === item && "active"),
+      onClick: function onClick() {
+        dispatch({
+          type: "varSelected",
+          var: item
+        });
+      }
+    }, item);
+  });
+  return /*#__PURE__*/_react.React.createElement("div", {
+    className: "h-100"
+  }, /*#__PURE__*/_react.React.createElement("h5", null, dataset.url), /*#__PURE__*/_react.React.createElement("div", {
+    className: "list-group overflow-auto mh-100"
+  }, varList));
+}
+function MultiVarNamesList() {
+  var dataset = (0, _DatasetContext.useDataset)();
+  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    varNames = _useState6[0],
+    setVarNames = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    active = _useState8[0],
+    setActive = _useState8[1];
+  (0, _react.useEffect)(function () {
+    fetch(new URL("var/names", process.env.REACT_APP_API_URL), {
+      method: "POST",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      },
+      body: JSON.stringify({
+        url: dataset.url
+      })
+    }).then(function (response) {
+      return response.json();
+    }).then(function (data) {
+      setVarNames(data);
+    });
+  }, [dataset.url]);
+  (0, _react.useEffect)(function () {
+    setActive(dataset.selectedMultiVar);
+  }, [dataset.selectedMultiVar]);
+  var varList = varNames.map(function (item) {
+    return /*#__PURE__*/_react.React.createElement("button", {
+      type: "button",
+      key: item,
+      className: "list-group-item list-grou-item-action ".concat(active.includes(item) && "active"),
+      onClick: function onClick() {
+        if (active.includes(item)) {
+          dispatch({
+            type: "multiVarDeselected",
+            var: item
+          });
+        } else {
+          dispatch({
+            type: "multiVarSelected",
+            var: item
+          });
+        }
+      }
+    }, item);
+  });
+  return /*#__PURE__*/_react.React.createElement("div", {
+    className: "h-100"
+  }, /*#__PURE__*/_react.React.createElement("h5", null, dataset.url), /*#__PURE__*/_react.React.createElement("div", {
+    className: "list-group overflow-auto mh-100"
+  }, varList));
+}

package/dist/lib/constants/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PLOTLY_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;

package/dist/lib/context/DatasetContext.js

@@ -0,0 +1,100 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasetDispatchContext = exports.DatasetContext = void 0;
+exports.DatasetProvider = DatasetProvider;
+exports.useDataset = useDataset;
+exports.useDatasetDispatch = useDatasetDispatch;
+var _react = require("react");
+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; }
+var DatasetContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.DatasetContext = DatasetContext;
+var DatasetDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.DatasetDispatchContext = DatasetDispatchContext;
+function DatasetProvider(_ref) {
+  var dataset_url = _ref.dataset_url,
+    children = _ref.children;
+  var _useReducer = (0, _react.useReducer)(datasetReducer, {
+      url: dataset_url,
+      selectedObs: null,
+      selectedVar: null,
+      selectedMultiObs: [],
+      selectedMultiVar: [],
+      colorscale: "Viridis"
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    dataset = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  return /*#__PURE__*/React.createElement(DatasetContext.Provider, {
+    value: dataset
+  }, /*#__PURE__*/React.createElement(DatasetDispatchContext.Provider, {
+    value: dispatch
+  }, children));
+}
+function useDataset() {
+  return (0, _react.useContext)(DatasetContext);
+}
+function useDatasetDispatch() {
+  return (0, _react.useContext)(DatasetDispatchContext);
+}
+function datasetReducer(dataset, action) {
+  switch (action.type) {
+    case "setDataset":
+      {
+        return action.dataset;
+      }
+    case "obsSelected":
+      {
+        return _objectSpread(_objectSpread({}, dataset), {}, {
+          selectedObs: action.obs
+        });
+      }
+    case "varSelected":
+      {
+        return _objectSpread(_objectSpread({}, dataset), {}, {
+          selectedVar: action.var
+        });
+      }
+    case "multiVarSelected":
+      {
+        return _objectSpread(_objectSpread({}, dataset), {}, {
+          selectedMultiVar: [].concat(_toConsumableArray(dataset.selectedMultiVar), [action.var])
+        });
+      }
+    case "multiVarDeselected":
+      {
+        return _objectSpread(_objectSpread({}, dataset), {}, {
+          selectedMultiVar: dataset.selectedMultiVar.filter(function (a) {
+            return a !== action.var;
+          })
+        });
+      }
+    case "colorscaleSelected":
+      {
+        return _objectSpread(_objectSpread({}, dataset), {}, {
+          colorscale: action.colorscale
+        });
+      }
+    default:
+      {
+        throw Error("Unknown action: " + action.type);
+      }
+  }
+}

package/package.json

@@ -1,46 +1,53 @@
-{
-  "name": "@haniffalab/cherita-react",
-  "version": "0.1.0",
-  "author": "",
-  "license": "",
-  "dependencies": {
-    "bootstrap": "^5.3.0",
-    "jquery": "^3.7.0",
-    "plotly.js": "^2.23.2",
-    "popper.js": "^1.16.1",
-    "react": "^18.2.0",
-    "react-bootstrap": "^2.7.4",
-    "react-dom": "^18.2.0",
-    "react-plotly.js": "^2.6.0",
-    "react-scripts": "^5.0.1"
-  },
-  "devDependencies": {
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-react-app": "^7.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "prettier"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
+{
+  "name": "@haniffalab/cherita-react",
+  "version": "0.1.2",
+  "author": "",
+  "license": "",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": ["dist"],
+  "dependencies": {
+    "bootstrap": "^5.3.0",
+    "jquery": "^3.7.0",
+    "plotly.js": "^2.23.2",
+    "popper.js": "^1.16.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
+    "react-dom": "^18.2.0",
+    "react-plotly.js": "^2.6.0",
+    "react-scripts": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.22.5",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "babel src/lib --out-dir dist --copy-files",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "prettier"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}