@haniffalab/cherita-react 0.1.12-dev.2024-02-12.20ce0bfd → 0.1.12-dev.2024-02-12.b016d286

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

@@ -64,16 +64,20 @@ function ObsColsList() {
     _useState4 = _slicedToArray(_useState3, 2),
     obs = _useState4[0],
     setObs = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    active = _useState6[0],
-    setActive = _useState6[1];
-  var _useState7 = (0, _react.useState)({
+    updatedObsColsList = _useState6[0],
+    setUpdatedObsColsList = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    active = _useState8[0],
+    setActive = _useState8[1];
+  var _useState9 = (0, _react.useState)({
       url: dataset.url
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    params = _useState8[0],
-    setParams = _useState8[1];
+    _useState10 = _slicedToArray(_useState9, 2),
+    params = _useState10[0],
+    setParams = _useState10[1];
   var colorHelper = new _color.ColorHelper();
   (0, _react.useEffect)(function () {
     setParams(function (p) {
@@ -88,6 +92,17 @@ function ObsColsList() {
     fetchedData = _useFetch.fetchedData,
     isPending = _useFetch.isPending,
     serverError = _useFetch.serverError;
+  var validateSelection = (0, _react.useCallback)(function (selectedObs) {
+    if (updatedObsColsList) {
+      if (!_lodash.default.some(obsColsList, selectedObs)) {
+        setActive(null);
+        dispatch({
+          type: "obsSelected",
+          obs: null
+        });
+      }
+    }
+  }, [dispatch, obsColsList, updatedObsColsList]);
   (0, _react.useEffect)(function () {
     if (!isPending && !serverError) {
       setObs(fetchedData.reduce(function (result, key) {
@@ -118,13 +133,15 @@ function ObsColsList() {
         }
         return d;
       }));
+      setUpdatedObsColsList(true);
     }
   }, [fetchedData, isPending, serverError]);
   (0, _react.useEffect)(function () {
     if (dataset.selectedObs) {
+      validateSelection(dataset.selectedObs);
       setActive(dataset.selectedObs.name);
     }
-  }, [dataset.selectedObs]);
+  }, [dataset.selectedObs, validateSelection]);
   (0, _react.useEffect)(function () {
     dispatch({
       type: "set.obs",

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

@@ -113,20 +113,24 @@ function VarNamesList(_ref2) {
     _useState8 = _slicedToArray(_useState7, 2),
     varNames = _useState8[0],
     setVarNames = _useState8[1];
-  var _useState9 = (0, _react.useState)(mode ? mode === _constants.SELECTION_MODES.SINGLE ? [dataset.selectVar] : dataset.selectedMultiVar : []),
+  var _useState9 = (0, _react.useState)(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    varButtons = _useState10[0],
-    setVarButtons = _useState10[1];
-  var _useState11 = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? null : []),
+    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),
-    active = _useState12[0],
-    setActive = _useState12[1];
-  var _useState13 = (0, _react.useState)({
+    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
     }),
-    _useState14 = _slicedToArray(_useState13, 2),
-    params = _useState14[0],
-    setParams = _useState14[1];
+    _useState16 = _slicedToArray(_useState15, 2),
+    params = _useState16[0],
+    setParams = _useState16[1];
   (0, _react.useEffect)(function () {
     setParams(function (p) {
       return _objectSpread(_objectSpread({}, p), {}, {
@@ -140,23 +144,49 @@ function VarNamesList(_ref2) {
     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]);
+  }, [mode, dataset.selectedMultiVar, validateSelection]);
   var selectVar = function selectVar(item) {
     setVarButtons(function () {
       if (varButtons[0] && varButtons.find(function (v) {

package/dist/constants/constants.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.SELECTION_MODES = exports.PLOTLY_COLORSCALES = exports.MATRIXPLOT_STANDARDSCALES = exports.DOTPLOT_STANDARDSCALES = exports.CHROMA_COLORSCALES = 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 CHROMA_COLORSCALES = {

package/dist/context/DatasetContext.js

@@ -9,9 +9,12 @@ exports.DatasetProvider = DatasetProvider;
 exports.useDataset = useDataset;
 exports.useDatasetDispatch = useDatasetDispatch;
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactQuery = require("@tanstack/react-query");
 var _reactQueryPersistClient = require("@tanstack/react-query-persist-client");
 var _querySyncStoragePersister = require("@tanstack/query-sync-storage-persister");
+var _constants = require("../constants/constants");
+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(); }
@@ -36,15 +39,17 @@ exports.DatasetDispatchContext = DatasetDispatchContext;
 var queryClient = new _reactQuery.QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: 1000 * 60 * 60 * 24
+      gcTime: 1000 * 60 * 60 * 24 * 7 // store for a week
     }
   },
+
   queryCache: new _reactQuery.QueryCache({
     onError: function onError(error, query) {
       console.error(error);
     }
   })
 });
+// Type of queries to store responses
 var persistKeys = ["obs/cols", "var/names", "obsm/keys"];
 var persistOptions = {
   persister: (0, _querySyncStoragePersister.createSyncStoragePersister)({
@@ -60,38 +65,59 @@ var persistOptions = {
       return false;
     }
   }
+  // @TODO: add maxAge and buster (app and api version numbers as busters)
+};
+
+var initialDataset = {
+  obs: {},
+  selectedObs: null,
+  selectedObsm: null,
+  selectedVar: null,
+  selectedMultiObs: [],
+  selectedMultiVar: [],
+  colorEncoding: null,
+  controls: {
+    colorScale: "Viridis",
+    colorAxis: {
+      dmin: 0,
+      dmax: 1,
+      cmin: 0,
+      cmax: 1
+    },
+    standardScale: null,
+    meanOnlyExpressed: false,
+    expressionCutoff: 0.0
+  },
+  state: {
+    obs: {}
+  }
+};
+var initializer = function initializer(initialState) {
+  var localObj = (JSON.parse(localStorage.getItem(_constants.LOCAL_STORAGE_KEY)) || {})[initialState.url] || {};
+  var keys = _lodash.default.keys(initialState);
+  var localValues = _lodash.default.pick(localObj, keys);
+  return _lodash.default.assign(initialState, localValues);
 };
 function DatasetProvider(_ref2) {
   var dataset_url = _ref2.dataset_url,
     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: {
-          dmin: 0,
-          dmax: 1,
-          cmin: 0,
-          cmax: 1
-        },
-        standardScale: null,
-        meanOnlyExpressed: false,
-        expressionCutoff: 0.0
-      },
-      state: {
-        obs: {}
-      }
-    }),
+  var _useReducer = (0, _react.useReducer)(datasetReducer, _objectSpread({
+      url: dataset_url
+    }, initialDataset), initializer),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     dataset = _useReducer2[0],
     dispatch = _useReducer2[1];
+  (0, _react.useEffect)(function () {
+    try {
+      localStorage.setItem(_constants.LOCAL_STORAGE_KEY, JSON.stringify(_defineProperty({}, dataset.url, dataset)));
+    } catch (err) {
+      if (err.code === 22 || err.code === 1014 || err.name === "QuotaExceededError" || err.name === "NS_ERROR_DOM_QUOTA_REACHED") {
+        console.log("Browser storage quota exceeded");
+      } else {
+        console.log(err);
+      }
+    }
+  }, [dataset]);
   return /*#__PURE__*/_react.default.createElement(DatasetContext.Provider, {
     value: dataset
   }, /*#__PURE__*/_react.default.createElement(DatasetDispatchContext.Provider, {
@@ -163,6 +189,12 @@ function datasetReducer(dataset, action) {
           colorEncoding: action.value
         });
       }
+    case "multiVarReset":
+      {
+        return _objectSpread(_objectSpread({}, dataset), {}, {
+          selectedMultiVar: []
+        });
+      }
     case "set.controls.colorScale":
       {
         return _objectSpread(_objectSpread({}, dataset), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.1.12-dev.2024-02-12.20ce0bfd",
+  "version": "0.1.12-dev.2024-02-12.b016d286",
   "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": "20ce0bfd7d3b61f7825d8028031f9c8cb9db1b32"
+  "prereleaseSha": "b016d286df62d95c86e969e73dd08d268dc41a7a"
 }