@haniffalab/cherita-react 0.2.1 → 1.0.0-dev.2025-03-07.aedc1788

package/dist/components/offcanvas/index.js

@@ -61,12 +61,13 @@ function OffcanvasVars({
 function OffcanvasControls({
   show,
   handleClose,
-  Controls
+  Controls,
+  ...props
 }) {
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
     closeButton: true
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Controls")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement(Controls, null)));
+  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Controls")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement(Controls, props)));
 }

package/dist/components/pseudospatial/Pseudospatial.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.Pseudospatial = Pseudospatial;
 exports.PseudospatialImage = PseudospatialImage;
 var _react = _interopRequireWildcard(require("react"));
+var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
-var _PseudospatialToolbar = require("./PseudospatialToolbar");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
@@ -21,6 +22,7 @@ var _requests = require("../../utils/requests");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+_fontawesomeSvgCore.library.add(_freeSolidSvgIcons.faSliders);
 function usePseudospatialData(plotType) {
   const ENDPOINT = "pseudospatial";
   const dataset = (0, _DatasetContext.useDataset)();
@@ -76,7 +78,11 @@ function usePseudospatialData(plotType) {
 }
 function Pseudospatial({
   showLegend = true,
-  sharedScaleRange = false
+  sharedScaleRange = false,
+  height = 200,
+  setShowControls,
+  plotType,
+  setPlotType
 }) {
   const dataset = (0, _DatasetContext.useDataset)();
   const [data, setData] = (0, _react.useState)([]);
@@ -85,7 +91,9 @@ function Pseudospatial({
     getColor
   } = (0, _colorHelper.useColor)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
-  const plotType = dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS;
+  (0, _react.useEffect)(() => {
+    setPlotType(dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS);
+  }, [dataset.colorEncoding, dataset.selectedObs?.type, setPlotType]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {
@@ -175,18 +183,33 @@ function Pseudospatial({
     }
   }, [dataset.controls.range, dataset.controls.valueMax, dataset.controls.valueMin, dataset.controls.valueRange, getColor, sharedScaleRange]);
   const hasSelections = !!plotType && !!dataset.pseudospatial.maskSet;
+  const faSlidersPath = _freeSolidSvgIcons.faSliders.icon[4];
   if (!serverError) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-pseudospatial position-relative"
-    }, /*#__PURE__*/_react.default.createElement(_PseudospatialToolbar.PseudospatialToolbar, {
-      plotType: plotType
-    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSelections && isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), hasSelections && /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-pseudospatial"
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSelections && isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), hasSelections && /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
-      layout: layout,
+      layout: {
+        ...layout,
+        autosize: true,
+        height: height
+      },
       useResizeHandler: true,
       className: "cherita-pseudospatial-plot",
       config: {
-        displaylogo: false
+        displaylogo: false,
+        displayModeBar: true,
+        modeBarButtonsToAdd: [{
+          name: "Open plot controls",
+          icon: {
+            width: 512,
+            height: 512,
+            path: faSlidersPath,
+            ascent: 512,
+            descent: 0
+          },
+          click: () => setShowControls(prev => !prev)
+        }]
       }
     }), hasSelections && showLegend && /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
       min: layout?.coloraxis?.cmin,

package/dist/components/pseudospatial/PseudospatialToolbar.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PseudospatialToolbar = PseudospatialToolbar;
 var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");

package/dist/components/scatterplot/Scatterplot.js

@@ -212,7 +212,7 @@ function Scatterplot({
       value: (data.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
-    });
+    }) || [0, 0, 0, 100];
   }, [data.values, obsIndices, getColor, isCategorical, max, min]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius

package/dist/context/DatasetContext.js

@@ -23,17 +23,22 @@ const DatasetDispatchContext = exports.DatasetDispatchContext = /*#__PURE__*/(0,
 const queryClient = new _reactQuery.QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: 1000 * 60 * 60 * 24 * 7 // store for a week
+      gcTime: 1000 * 60 * 15,
+      // garbage collect after 15min of inactive
+      staleTime: 1000 * 60 * 60,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false
     }
   },
   queryCache: new _reactQuery.QueryCache({
-    onError: (error, query) => {
-      console.error(error, query);
+    onError: error => {
+      console.error(error);
     }
   })
 });
 // Type of queries to store responses
-const persistKeys = ["obs/cols", "var/names", "obsm/keys", "var/histograms", "obs/bins", "obs/distribution"];
+const persistKeys = ["obs/cols", "var/names", "obsm/keys", "obs/bins", "obs/distribution"];
 const persistOptions = {
   persister: (0, _querySyncStoragePersister.createSyncStoragePersister)({
     storage: window.localStorage
@@ -129,9 +134,9 @@ function DatasetProvider({
       }));
     } 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");
+        console.err("Browser storage quota exceeded");
       } else {
-        console.log(err);
+        console.err(err);
       }
     }
   }, [dataset]);