@haniffalab/cherita-react 2.0.0 → 2.1.0

package/dist/esm/context/SettingsContext.js

@@ -166,7 +166,7 @@ export function SettingsProvider(_ref2) {
 
   // If the buster is not set or does not match the current package version,
   // reset localSettings to avoid stale data
-  if (!buster || buster !== "2.0.0") {
+  if (!buster || buster !== "2.1.0") {
     localSettings = {};
   }
   const initSettings = useRef(initializer({
@@ -191,7 +191,7 @@ export function SettingsProvider(_ref2) {
     if (canOverrideSettings && settings) {
       try {
         localStorage.setItem(DATASET_STORAGE_KEY, JSON.stringify(_objectSpread({
-          buster: "2.0.0" || '0.0.0',
+          buster: "2.1.0" || '0.0.0',
           timestamp: Date.now()
         }, _.omit(settings, 'data'))));
       } catch (err) {
@@ -335,6 +335,31 @@ function settingsReducer(settings, action) {
           }));
         }
       }
+    case 'select.multivar.batch':
+      {
+        const newVars = [];
+        let newVarData = {};
+        _.forEach(action.vars, v => {
+          const inMultiVar = settings.selectedMultiVar.some(mv => mv.name === v.name);
+          if (!inMultiVar) {
+            const {
+              settings: varSettings,
+              data: varData
+            } = splitVar(v);
+            newVars.push(varSettings);
+            newVarData = _objectSpread(_objectSpread({}, newVarData), varData);
+          }
+        });
+        if (!newVars.length) {
+          return validateSettings(_objectSpread({}, settings));
+        }
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedMultiVar: [...settings.selectedMultiVar, ...newVars],
+          data: _objectSpread(_objectSpread({}, settings.data), {}, {
+            vars: _objectSpread(_objectSpread({}, settings.data.vars), newVarData)
+          })
+        }));
+      }
     case 'deselect.multivar':
       {
         return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {

package/dist/esm/helpers/color-helper.js

@@ -1,7 +1,7 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { COLORSCALES } from '../constants/colorscales';
+import { GRAY, GRAY_MIX, GRAY_ALPHA } from '../constants/constants';
 import { useSettings } from '../context/SettingsContext';
-const GRAY = [214, 212, 212];
 const parseHexColor = color => {
   const r = parseInt(color === null || color === void 0 ? void 0 : color.substring(1, 3), 16);
   const g = parseInt(color === null || color === void 0 ? void 0 : color.substring(3, 5), 16);
@@ -33,21 +33,25 @@ export const rgbToHex = color => {
   const [r, g, b] = color || [0, 0, 0, 0];
   return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 };
-export const useColor = () => {
+export const useColor = _ref => {
+  let {
+    isCategorical = false,
+    colorscale = null
+  } = _ref;
   const settings = useSettings();
-  const getColor = useCallback(_ref => {
+  const colormap = useMemo(() => {
+    return colorscale || COLORSCALES[isCategorical ? 'Accent' : settings.controls.colorScale];
+  }, [colorscale, isCategorical, settings.controls.colorScale]);
+  const getColor = useCallback(_ref2 => {
     let {
       value,
-      categorical = false,
       grayOut = false,
       grayParams: {
-        alpha = 0.75,
-        gray = 0.95
+        alpha = GRAY_ALPHA,
+        gray = GRAY_MIX
       } = {},
-      colorEncoding = settings.colorEncoding,
-      colorscale = null
-    } = _ref;
-    const colormap = colorscale || COLORSCALES[categorical ? 'Accent' : settings.controls.colorScale];
+      colorEncoding = settings.colorEncoding
+    } = _ref2;
     if (colorEncoding) {
       if (grayOut) {
         // Mix color with gray manually instead of chroma.mix to get better performance with deck.gl
@@ -59,8 +63,9 @@ export const useColor = () => {
     } else {
       return null;
     }
-  }, [settings.colorEncoding, settings.controls.colorScale]);
+  }, [settings.colorEncoding, colormap]);
   return {
+    colormap,
     getColor
   };
 };

package/dist/esm/index.js

@@ -13,7 +13,6 @@ export { Pseudospatial } from './components/pseudospatial/Pseudospatial';
 export { Scatterplot } from './components/scatterplot/Scatterplot';
 export { ScatterplotControls } from './components/scatterplot/ScatterplotControls';
 export { SearchBar } from './components/search-bar/SearchBar';
-export { Toolbar } from './components/toolbar/Toolbar';
 export { VarNamesList } from './components/var-list/VarList';
 export { Violin } from './components/violin/Violin';
 export { ViolinControls } from './components/violin/ViolinControls';

package/dist/esm/utils/Legend.js

@@ -18,13 +18,14 @@ export function Legend(_ref) {
   const settings = useSettings();
   const {
     getColor
-  } = useColor();
+  } = useColor({
+    isCategorical,
+    colorscale
+  });
   const spanList = useMemo(() => {
     return _.range(100).map(i => {
       var color = rgbToHex(getColor({
-        value: i / 100,
-        categorical: isCategorical,
-        colorscale: colorscale
+        value: i / 100
       }));
       return /*#__PURE__*/_jsx("span", {
         className: "grad-step",
@@ -33,7 +34,7 @@ export function Legend(_ref) {
         }
       }, i);
     });
-  }, [colorscale, getColor, isCategorical]);
+  }, [getColor]);
   if (settings.colorEncoding && !isCategorical) {
     var _settings$selectedVar, _settings$selectedObs;
     return /*#__PURE__*/_jsx("div", {

package/dist/esm/utils/requests.js

@@ -8,8 +8,8 @@ import { useDebounce } from '@uidotdev/usehooks';
 import { parseError } from './errors';
 export async function fetchData(endpoint, params) {
   let signal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  let ms = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300000;
-  let apiUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  let apiUrl = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  let ms = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 300000;
   apiUrl = apiUrl || process.env.REACT_APP_API_URL;
   const controller = new AbortController();
   const timeout = setTimeout(() => {

package/dist/esm/views/ObservationFeature/StandardView.js

@@ -103,7 +103,7 @@ export function StandardView(_ref) {
       default:
         return /*#__PURE__*/_jsx(Scatterplot, _objectSpread({}, commonProps));
     }
-  }, [plotType]);
+  }, [plotType, props]);
   return /*#__PURE__*/_jsx("div", {
     className: "cherita-app",
     children: /*#__PURE__*/_jsxs(DatasetProvider, _objectSpread(_objectSpread({}, props), {}, {

package/dist/esm/views/PerturbationMap/ObsExplorer.js

@@ -142,7 +142,9 @@ export function ObsExplorer() {
     selectedObsIndex
   } = useSettings();
   const {
-    obsExplorer = {}
+    obsExplorer = {},
+    obsLabel,
+    valueLabel
   } = useDataset();
   useParquet(); // initialize duckdb instance
 
@@ -153,9 +155,9 @@ export function ObsExplorer() {
     serverError
   } = useObsColsData(obsExplorer === null || obsExplorer === void 0 ? void 0 : obsExplorer.obsCols);
   if (selectedObsIndex == null) {
-    return /*#__PURE__*/_jsx("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: "my-4 text-muted",
-      children: "Select a point in the scatterplot to view details about the gene perturbation."
+      children: ["Select a point in the scatterplot or search for ", obsLabel.plural, " to view details about the ", obsLabel.singular, " perturbation."]
     });
   }
   if (isPending) {
@@ -177,8 +179,8 @@ export function ObsExplorer() {
       children: [/*#__PURE__*/_jsx("h2", {
         className: "fw-bold mb-2",
         children: /*#__PURE__*/_jsx(Tooltip, {
-          title: /*#__PURE__*/_jsx(_Fragment, {
-            children: "This panel shows metadata and predicted downstream effects for the selected gene perturbation across the atlas."
+          title: /*#__PURE__*/_jsxs(_Fragment, {
+            children: ["This panel shows metadata and predicted downstream effects for the selected ", obsLabel.singular, " perturbation across the atlas."]
           }),
           placement: "right",
           arrow: true,
@@ -193,8 +195,8 @@ export function ObsExplorer() {
         children: [/*#__PURE__*/_jsx("h5", {
           className: "fw-bold mb-2",
           children: /*#__PURE__*/_jsx(Tooltip, {
-            title: /*#__PURE__*/_jsx(_Fragment, {
-              children: "These values describe how the selected gene perturbation is annotated in the atlas, including lineage, biological context, and summary scores used in the perturbation landscape."
+            title: /*#__PURE__*/_jsxs(_Fragment, {
+              children: ["These values describe how the selected ", obsLabel.singular, ' ', "perturbation is annotated in the atlas, including lineage, biological context, and summary scores used in the perturbation landscape."]
             }),
             placement: "right",
             arrow: true,
@@ -248,8 +250,8 @@ export function ObsExplorer() {
         children: [/*#__PURE__*/_jsxs("h5", {
           className: "fw-bold mb-2 d-flex align-items-center justify-content-between",
           children: [/*#__PURE__*/_jsx(Tooltip, {
-            title: /*#__PURE__*/_jsx(_Fragment, {
-              children: "This table shows genes predicted to change expression in response to the selected perturbation. Results can be sorted and explored to identify affected pathways and regulatory programs."
+            title: /*#__PURE__*/_jsxs(_Fragment, {
+              children: ["This table shows ", obsLabel.plural, " predicted to change", ' ', valueLabel, " in response to the selected perturbation. Results can be sorted and explored to identify affected pathways and regulatory programs."]
             }),
             placement: "right",
             arrow: true,

package/dist/esm/views/PerturbationMap/StandardView.js

@@ -45,7 +45,8 @@ export function StandardView(_ref) {
             setShowSearch: setShowObsExplorer,
             setShowControls: setShowControls,
             isFullscreen: true,
-            pointInteractionEnabled: true
+            pointInteractionEnabled: true,
+            isSearchObs: true
           })
         }), /*#__PURE__*/_jsx("div", {
           className: "cherita-app-sidebar p-3",

package/dist/esm/workers/scatterplotData.js

@@ -0,0 +1,10 @@
+const WORKER_CODE = "\nfunction computeBitmask(indices, length) {\n  if (indices === null) return new Uint8Array(length).fill(1);\n  const bitmask = new Uint8Array(length);\n  for (const idx of indices) {\n    bitmask[idx] = 1;\n  }\n  return bitmask;\n}\n\nself.onmessage = ({ data }) => {\n  // compute and transfer only updated data\n  const msg = {};\n  const transfer = [];\n\n  if (data.positions) {\n    const positions = new Float32Array(data.positions.flat());\n    msg.positions = positions;\n    msg.count = data.positions.length;\n    transfer.push(positions.buffer);\n  }\n\n  if (data.values) {\n    const values = new Float32Array(data.values);\n    msg.values = values;\n    transfer.push(values.buffer);\n  }\n\n  if (data.obsIndices !== undefined && !!data.length) {\n    const bitmask = computeBitmask(data.obsIndices, data.length);\n    msg.indexEnabledBitmask = bitmask;\n    transfer.push(bitmask.buffer);\n  }\n\n  self.postMessage(msg, transfer);\n};\n";
+export function createScatterplotWorker() {
+  const blob = new Blob([WORKER_CODE], {
+    type: 'application/javascript'
+  });
+  const url = URL.createObjectURL(blob);
+  const worker = new Worker(url);
+  URL.revokeObjectURL(url);
+  return worker;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -52,7 +52,7 @@
     "ndarray-unpack": "^1.0.0",
     "nebula.gl": "^1.0.4",
     "numbro": "^2.5.0",
-    "plotly.js": "^2.23.2",
+    "plotly.js": "^3.4.0",
     "popper.js": "^1.16.1",
     "react-bootstrap": "^2.7.4",
     "react-plotly.js": "^2.6.0",
@@ -117,7 +117,10 @@
     "lint:js": "eslint 'src/**/*.{js,jsx}' --fix",
     "lint": "npm run lint:scss && npm run lint:js",
     "start-demo": "npm run dev --prefix sites/demo",
-    "reinstall": "rm -rf node_modules package-lock.json && npm install"
+    "reinstall": "rm -rf node_modules package-lock.json && npm install",
+    "docs:start": "npm run start --prefix website",
+    "docs:build": "npm run build --prefix website",
+    "docs:serve": "npm run serve --prefix website"
   },
   "eslintConfig": {
     "extends": [