@haniffalab/cherita-react 0.2.0-dev.2024-04-04.2167aa53 → 0.2.0-dev.2024-05-09.97c686f2

package/dist/App.scss

@@ -1,4 +1,4 @@
-@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/bootstrap";
 
 // Theme CSS
 .cherita-container {

package/dist/components/dotplot/Dotplot.js

@@ -209,10 +209,11 @@ function Dotplot() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     selectedObs: dataset.selectedObs,
-    selectedMultiVar: dataset.selectedMultiVar.map(i => i.name),
+    selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
     standardScale: dataset.controls.standardScale,
     meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
-    expressionCutoff: dataset.controls.expressionCutoff
+    expressionCutoff: dataset.controls.expressionCutoff,
+    varNamesCol: dataset.varNamesCol
   });
   // @TODO: set default scale
 
@@ -227,13 +228,14 @@ function Dotplot() {
         ...p,
         url: dataset.url,
         selectedObs: dataset.selectedObs,
-        selectedMultiVar: dataset.selectedMultiVar.map(i => i.name),
+        selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
         standardScale: dataset.controls.standardScale,
         meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
-        expressionCutoff: dataset.controls.expressionCutoff
+        expressionCutoff: dataset.controls.expressionCutoff,
+        varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, dataset.controls.standardScale, dataset.controls.meanOnlyExpressed, dataset.controls.expressionCutoff]);
+  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, dataset.controls.standardScale, dataset.controls.meanOnlyExpressed, dataset.controls.expressionCutoff, dataset.varNamesCol]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

package/dist/components/heatmap/Heatmap.js

@@ -50,7 +50,8 @@ function Heatmap() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     selectedObs: dataset.selectedObs,
-    selectedMultiVar: dataset.selectedMultiVar.map(i => i.name)
+    selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+    varNamesCol: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {
     if (dataset.selectedObs && dataset.selectedMultiVar.length) {
@@ -63,10 +64,11 @@ function Heatmap() {
         ...p,
         url: dataset.url,
         selectedObs: dataset.selectedObs,
-        selectedMultiVar: dataset.selectedMultiVar.map(i => i.name)
+        selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+        varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url]);
+  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

package/dist/components/matrixplot/Matrixplot.js

@@ -78,8 +78,9 @@ function Matrixplot() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     selectedObs: dataset.selectedObs,
-    selectedMultiVar: dataset.selectedMultiVar.map(i => i.name),
-    standardScale: dataset.controls.standardScale
+    selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+    standardScale: dataset.controls.standardScale,
+    varNamesCol: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {
     if (dataset.selectedObs && dataset.selectedMultiVar.length) {
@@ -92,11 +93,12 @@ function Matrixplot() {
         ...p,
         url: dataset.url,
         selectedObs: dataset.selectedObs,
-        selectedMultiVar: dataset.selectedMultiVar.map(i => i.name),
-        standardScale: dataset.controls.standardScale
+        selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+        standardScale: dataset.controls.standardScale,
+        varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url]);
+  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

package/dist/components/scatterplot/Legend.js

@@ -43,7 +43,7 @@ function Legend(_ref) {
         style: {
           backgroundColor: color.hex()
         }
-      }));
+      }, i));
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "cherita-legend",
@@ -51,13 +51,13 @@ function Legend(_ref) {
         className: "gradient",
         children: [legendList, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-min",
-          children: dmin
+          children: dmin.toString()
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-med",
-          children: (dmin + dmax) * 0.5
+          children: ((dmin + dmax) * 0.5).toString()
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-max",
-          children: dmax
+          children: dmax.toString()
         })]
       })
     });

package/dist/components/scatterplot/Scatterplot.js

@@ -7,8 +7,6 @@ exports.Scatterplot = Scatterplot;
 exports.ScatterplotControls = ScatterplotControls;
 require("bootstrap/dist/css/bootstrap.min.css");
 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 _layers2 = require("@nebula.gl/layers");
@@ -76,18 +74,19 @@ function Scatterplot(_ref) {
   (0, _react.useEffect)(() => {
     setData(function (prevState, props) {
       const colorHelper = new _colorHelper.ColorHelper();
-      let scale = dataset.colorEncoding === "var" ? colorHelper.getScale(dataset, values) : null;
+      let scale = dataset.colorEncoding === "var" ? colorHelper.getScale(dataset.controls.colorScale, values) : null;
       var data = position.map(function (e, i) {
+        var _dataset$obs$dataset$, _dataset$selectedObs;
         return {
           index: i,
           position: [position[i][0], position[i][1]],
           value: values[i],
-          color: colorHelper.getColor(dataset, values[i], scale)
+          color: colorHelper.getColor(dataset.colorEncoding, (_dataset$obs$dataset$ = dataset.obs[(_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name]) === null || _dataset$obs$dataset$ === void 0 ? void 0 : _dataset$obs$dataset$.state, values[i], scale)
         };
       });
       return data;
     });
-  }, [position, values, dataset.controls.colorScale]);
+  }, [position, values, dataset.controls.colorScale, dataset.colorEncoding, dataset.obs, dataset.selectedObs]);
   (0, _react.useEffect)(() => {
     if (dataset.selectedObsm) {
       const helper = new _mapHelper.MapHelper();
@@ -129,7 +128,7 @@ function Scatterplot(_ref) {
       };
       fetchData().catch(console.error);
     }
-  }, [dataset.url, dataset.selectedVar]);
+  }, [dataset.url, dataset.selectedVar, dispatch]);
   (0, _react.useEffect)(() => {
     if (dataset.selectedObs) {
       const zarrHelper = new _zarrHelper.ZarrHelper();
@@ -145,7 +144,7 @@ function Scatterplot(_ref) {
       };
       fetchData().catch(console.error);
     }
-  }, [dataset.url, dataset.selectedObs]);
+  }, [dataset.url, dataset.selectedObs, dispatch]);
   const layers = [new _layers.ScatterplotLayer({
     id: "cherita-layer-scatterplot",
     data,

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

@@ -96,16 +96,18 @@ function VarNamesList(_ref2) {
   const [varButtons, setVarButtons] = (0, _react.useState)(mode ? mode === _constants.SELECTION_MODES.SINGLE ? [dataset.selectVar] : dataset.selectedMultiVar : []);
   const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectVar : dataset.selectedMultiVar);
   const [params, setParams] = (0, _react.useState)({
-    url: dataset.url
+    url: dataset.url,
+    col: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
         ...p,
-        url: dataset.url
+        url: dataset.url,
+        col: dataset.varNamesCol
       };
     });
-  }, [dataset.url]);
+  }, [dataset.url, dataset.varNamesCol]);
   const {
     fetchedData,
     isPending,

package/dist/components/violin/Violin.js

@@ -7,6 +7,8 @@ exports.Violin = Violin;
 exports.ViolinControls = ViolinControls;
 require("bootstrap/dist/css/bootstrap.min.css");
 var _react = _interopRequireWildcard(require("react"));
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
@@ -66,7 +68,8 @@ function Violin(_ref) {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     keys: [],
-    scale: dataset.controls.standardScale
+    scale: dataset.controls.standardScale,
+    varNamesCol: dataset.varNamesCol
   });
   // @TODO: set default scale
 
@@ -81,8 +84,9 @@ function Violin(_ref) {
         return {
           ...p,
           url: dataset.url,
-          keys: dataset.selectedMultiVar.map(i => i.name),
-          scale: dataset.controls.standardScale
+          keys: dataset.selectedMultiVar.map(i => i.index),
+          scale: dataset.controls.standardScale,
+          varNamesCol: dataset.varNamesCol
         };
       });
     } else if (mode === _constants.VIOLIN_MODES.GROUPBY) {
@@ -95,13 +99,14 @@ function Violin(_ref) {
         return {
           ...p,
           url: dataset.url,
-          keys: dataset.selectedVar.name,
+          keys: dataset.selectedVar.index,
           selectedObs: dataset.selectedObs,
-          scale: dataset.controls.standardScale
+          scale: dataset.controls.standardScale,
+          varNamesCol: dataset.varNamesCol
         };
       });
     }
-  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, mode]);
+  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, dataset.varNamesCol, mode]);
   const {
     fetchedData,
     isPending,
@@ -129,6 +134,19 @@ function Violin(_ref) {
             maxWidth: "100%",
             maxHeight: "100%"
           }
+        }), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+          variant: "warning",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+            children: "Warning:"
+          }), " For performance reasons this plot was generated with resampled data. It will not be exactly the same as one produced with the entire dataset. \xA0", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+            placement: "top",
+            overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
+              children: "Resampled to 100K values following a Monte Carlo style approach to help ensure resampled data is a good representation of the original dataset's distribution."
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faCircleInfo
+            })
+          })]
         })]
       });
     }

package/dist/context/DatasetContext.js

@@ -53,6 +53,7 @@ const persistOptions = {
 };
 const initialDataset = {
   obs: {},
+  varNamesCol: null,
   selectedObs: null,
   selectedObsm: null,
   selectedVar: null,
@@ -84,12 +85,13 @@ const initializer = initialState => {
 function DatasetProvider(_ref2) {
   let {
     dataset_url,
+    dataset_params = null,
     children
   } = _ref2;
-  const [dataset, dispatch] = (0, _react.useReducer)(datasetReducer, {
+  const [dataset, dispatch] = (0, _react.useReducer)(datasetReducer, _lodash.default.assign(initializer({
     url: dataset_url,
     ...initialDataset
-  }, initializer);
+  }), dataset_params));
   (0, _react.useEffect)(() => {
     try {
       localStorage.setItem(_constants.LOCAL_STORAGE_KEY, JSON.stringify({

package/dist/helpers/color-helper.js

@@ -7,20 +7,23 @@ 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 _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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class ColorHelper {
-  getScale(dataset, values) {
-    return _chromaJs.default.scale(_constants.CHROMA_COLORSCALES[dataset.controls.colorScale]).domain([_lodash.default.min(values), _lodash.default.max(values)]);
-  }
-  getColor(dataset, value) {
-    let 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;
-    }
+  constructor() {
+    _defineProperty(this, "getScale", (colorScale, values) => {
+      return _chromaJs.default.scale(_constants.CHROMA_COLORSCALES[colorScale]).domain([_lodash.default.min(values), _lodash.default.max(values)]);
+    });
+    _defineProperty(this, "getColor", function (colorEncoding, state, value) {
+      let scale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _chromaJs.default.scale();
+      if (colorEncoding === "var") {
+        return scale(value).rgb();
+      } else if (colorEncoding === "obs") {
+        return state.hasOwnProperty(value) ? state[value]["color"] : null;
+      }
+    });
   }
 }
 exports.ColorHelper = ColorHelper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-04-04.2167aa53",
+  "version": "0.2.0-dev.2024-05-09.97c686f2",
   "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": "2167aa53fbf527f25f71ab2e3825a3c1fe2033a6"
+  "prereleaseSha": "97c686f2f71b9fd317123f14ba380ca42cbbbe7f"
 }