@haniffalab/cherita-react 0.2.0-dev.2024-12-16.ab9c5057 → 0.2.0-dev.2024-12-16.f02cfae4

package/dist/components/scatterplot/Scatterplot.js

@@ -14,7 +14,6 @@ var _layers2 = require("@nebula.gl/layers");
 var _turf = require("@turf/turf");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _Legend = require("./Legend");
 var _SpatialControls = require("./SpatialControls");
 var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
@@ -22,6 +21,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
 var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
+var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _string = require("../../utils/string");
 var _zarrData = require("../../utils/zarrData");
@@ -300,8 +300,21 @@ function Scatterplot(_ref) {
       index
     } = _ref2;
     const grayOut = filteredIndices && !filteredIndices.has(index);
-    return getColor((data.values[index] - min) / (max - min), isCategorical, grayOut);
+    return getColor({
+      value: (data.values[index] - min) / (max - min),
+      categorical: isCategorical,
+      grayOut: grayOut
+    });
   }, [data.values, filteredIndices, getColor, isCategorical, max, min]);
+
+  // @TODO: add support for pseudospatial hover to reflect in radius
+  const getRadius = (0, _react.useCallback)((_d, _ref3) => {
+    let {
+      index
+    } = _ref3;
+    const grayOut = filteredIndices && !filteredIndices.has(index);
+    return grayOut ? 1 : 3;
+  }, [filteredIndices]);
   const memoizedLayers = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
       id: "cherita-layer-scatterplot",
@@ -311,21 +324,22 @@ function Scatterplot(_ref) {
       radiusMinPixels: 1,
       getPosition: d => d,
       getFillColor: getFillColor,
-      getRadius: 1,
+      getRadius: getRadius,
       updateTriggers: {
-        getFillColor: getFillColor
+        getFillColor: getFillColor,
+        getRadius: getRadius
       }
     }), new _layers2.EditableGeoJsonLayer({
       id: "cherita-layer-draw",
       data: features,
       mode: mode,
       selectedFeatureIndexes,
-      onEdit: _ref3 => {
+      onEdit: _ref4 => {
         let {
           updatedData,
           editType,
           editContext
-        } = _ref3;
+        } = _ref4;
         setFeatures(updatedData);
         let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
         if (editType === "addFeature") {
@@ -349,7 +363,7 @@ function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, mode, radius, selectedFeatureIndexes]);
+  }, [data.positions, features, getFillColor, getRadius, mode, radius, selectedFeatureIndexes]);
   const layers = (0, _react.useDeferredValue)(mode === _editModes.ViewMode ? memoizedLayers.reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
 
   (0, _react.useEffect)(() => {
@@ -374,11 +388,11 @@ function Scatterplot(_ref) {
       return `${o.name}: ${o.codesMap[v]}`;
     }
   };
-  const getTooltip = _ref4 => {
+  const getTooltip = _ref5 => {
     let {
       object,
       index
-    } = _ref4;
+    } = _ref5;
     if (!object) return;
     const text = [];
     if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs && !_lodash.default.some(dataset.labelObs, {
@@ -396,70 +410,82 @@ function Scatterplot(_ref) {
       }));
     }
     if (!text.length) return;
+    const grayOut = filteredIndices && !filteredIndices.has(index);
     return {
-      text: text.length ? _lodash.default.compact(text).join("\n") : null
+      text: text.length ? _lodash.default.compact(text).join("\n") : null,
+      className: grayOut ? "tooltip-grayout" : "deck-tooltip",
+      style: !grayOut ? {
+        "border-left": `3px solid ${(0, _colorHelper.rgbToHex)(getFillColor(null, {
+          index
+        }))}`
+      } : {
+        "border-left": "none"
+      }
     };
   };
   const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
   const error = dataset.selectedObsm && obsmData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && xData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && obsData.serverError?.length || dataset.labelObs.lengh && labelObsData.serverError?.length;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "cherita-scatterplot",
-    children: [obsmData.isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {
-      disableShrink: true
-    }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.DeckGL, {
-      viewState: viewState,
-      onViewStateChange: e => setViewState(e.viewState),
-      controller: {
-        doubleClickZoom: mode === _editModes.ViewMode
-      },
-      layers: layers,
-      onClick: onLayerClick,
-      getTooltip: getTooltip,
-      onAfterRender: () => {
-        setIsRendering(false);
-      },
-      useDevicePixels: false,
-      getCursor: _ref5 => {
-        let {
-          isDragging
-        } = _ref5;
-        return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
-      },
-      ref: deckRef
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
-      mode: mode,
-      setMode: setMode,
-      features: features,
-      setFeatures: setFeatures,
-      selectedFeatureIndexes: selectedFeatureIndexes,
-      resetBounds: () => setViewState(getBounds()),
-      increaseZoom: () => setViewState(v => ({
-        ...v,
-        zoom: v.zoom + 1
-      })),
-      decreaseZoom: () => setViewState(v => ({
-        ...v,
-        zoom: v.zoom - 1
-      }))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "cherita-spatial-footer",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "cherita-toolbox-footer",
-        children: [error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
-          variant: "danger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faTriangleExclamation
-          }), "\xA0Error loading data"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
-          mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
-          obsLength: parseInt(obsmData.data?.length),
-          slicedLength: parseInt(slicedLength)
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "cherita-container-scatterplot",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "cherita-scatterplot",
+      children: [obsmData.isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {
+        disableShrink: true
+      }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.DeckGL, {
+        viewState: viewState,
+        onViewStateChange: e => setViewState(e.viewState),
+        controller: {
+          doubleClickZoom: mode === _editModes.ViewMode
+        },
+        layers: layers,
+        onClick: onLayerClick,
+        getTooltip: getTooltip,
+        onAfterRender: () => {
+          setIsRendering(false);
+        },
+        useDevicePixels: false,
+        getCursor: _ref6 => {
+          let {
+            isDragging
+          } = _ref6;
+          return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
+        },
+        ref: deckRef
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
+        mode: mode,
+        setMode: setMode,
+        features: features,
+        setFeatures: setFeatures,
+        selectedFeatureIndexes: selectedFeatureIndexes,
+        resetBounds: () => setViewState(getBounds()),
+        increaseZoom: () => setViewState(v => ({
+          ...v,
+          zoom: v.zoom + 1
+        })),
+        decreaseZoom: () => setViewState(v => ({
+          ...v,
+          zoom: v.zoom - 1
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "cherita-spatial-footer",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "cherita-toolbox-footer",
+          children: [error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+            variant: "danger",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faTriangleExclamation
+            }), "\xA0Error loading data"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
+            mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
+            obsLength: parseInt(obsmData.data?.length),
+            slicedLength: parseInt(slicedLength)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+          isCategorical: isCategorical,
+          min: min,
+          max: max
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
-        isCategorical: isCategorical,
-        min: min,
-        max: max
       })]
-    })]
+    })
   });
 }

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

@@ -88,10 +88,22 @@ function VarHistogram(_ref) {
   });
 }
 function VarDiseaseInfoItem(item) {
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
     className: "feature-disease-info",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      children: [item.disease_name, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: "btn btn-link",
+        onClick: () => {
+          dispatch({
+            type: "select.disease",
+            id: item.disease_id,
+            name: item.disease_name
+          });
+        },
+        children: item.disease_name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
         striped: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
@@ -120,7 +132,7 @@ function VarDiseaseInfoItem(item) {
         })
       })]
     })
-  });
+  }, item.disease_name);
 }
 function VarDiseaseInfo(_ref3) {
   let {
@@ -131,8 +143,8 @@ function VarDiseaseInfo(_ref3) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.VirtualizedList, {
         getDataAtIndex: index => data[index],
         count: data.length,
-        estimateSize: 70,
-        maxHeight: "40vh",
+        estimateSize: 140,
+        maxHeight: "100%",
         ItemComponent: VarDiseaseInfoItem
       })
     })
@@ -207,7 +219,7 @@ function SingleSelectionItem(_ref4) {
     }), hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Collapse, {
       in: openInfo,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "mt-2",
+        className: "mt-2 var-disease-info-collapse",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VarDiseaseInfo, {
           data: fetchedData
         })

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

@@ -18,6 +18,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 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; }
+// @TODO: add button to score genes and plot
 const addVarToSet = (dispatch, set, v) => {
   dispatch({
     type: "add.varSet.var",

package/dist/constants/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.COLOR_ENCODINGS = void 0;
+exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.COLOR_ENCODINGS = void 0;
 const LOCAL_STORAGE_KEY = exports.LOCAL_STORAGE_KEY = "CHERITA";
 const COLOR_ENCODINGS = exports.COLOR_ENCODINGS = {
   VAR: "var",
@@ -71,4 +71,20 @@ const VIOLINPLOT_SCALES = exports.VIOLINPLOT_SCALES = {
     value: "count",
     name: "Count"
   }
+};
+const PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_PLOT_TYPES = {
+  GENE: "gene",
+  CATEGORICAL: "categorical",
+  CONTINUOUS: "continuous",
+  MASKS: "masks"
+};
+const PSEUDOSPATIAL_CATEGORICAL_MODES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = {
+  ACROSS: {
+    value: "across",
+    name: "% across sections"
+  },
+  WITHIN: {
+    value: "within",
+    name: "% within section"
+  }
 };

package/dist/context/DatasetContext.js

@@ -95,6 +95,14 @@ const initialDataset = {
       sort: _constants.VAR_SORT.NONE,
       sortOrder: _constants.VAR_SORT_ORDER.ASC
     }
+  },
+  obsCols: null,
+  // @TODO: implement specifying groups/categories for dropdowns
+  imageUrl: null,
+  pseudospatial: {
+    maskSet: null,
+    maskValues: null,
+    categoricalMode: _constants.PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
   }
 };
 const initializer = initialState => {
@@ -106,8 +114,8 @@ const initializer = initialState => {
 function DatasetProvider(_ref2) {
   let {
     dataset_url,
-    dataset_params = null,
-    children
+    children,
+    ...dataset_params
   } = _ref2;
   const [dataset, dispatch] = (0, _react.useReducer)(datasetReducer, _lodash.default.assign(initializer({
     url: dataset_url,
@@ -527,6 +535,36 @@ function datasetReducer(dataset, action) {
           }
         };
       }
+    case "set.pseudospatial.maskSet":
+      {
+        return {
+          ...dataset,
+          pseudospatial: {
+            ...dataset.pseudospatial,
+            maskSet: action.maskSet
+          }
+        };
+      }
+    case "set.pseudospatial.maskValues":
+      {
+        return {
+          ...dataset,
+          pseudospatial: {
+            ...dataset.pseudospatial,
+            maskValues: action.maskValues
+          }
+        };
+      }
+    case "set.pseudospatial.categoricalMode":
+      {
+        return {
+          ...dataset,
+          pseudospatial: {
+            ...dataset.pseudospatial,
+            categoricalMode: action.categoricalMode
+          }
+        };
+      }
     default:
       {
         throw Error("Unknown action: " + action.type);

package/dist/css/cherita.css

@@ -12121,4 +12121,43 @@ textarea.form-control-lg {
   display: none;
 }
 
+.cherita-pseudospatial {
+  width: 100%;
+}
+
+.cherita-pseudospatial-plot {
+  width: 100%;
+  height: 100%;
+}
+
+.cherita-pseudospatial-toolbar {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Add a bottom border to the last item in the Accordion */
+.accordion-flush .accordion-item:last-child {
+  border-bottom: 1px solid #dee2e6; /* Adjust the color and width as needed */
+}
+
+.var-disease-info-collapse {
+  max-height: 40vh;
+  overflow-y: auto;
+}
+
+.cherita-scatterplot #deckgl-wrapper {
+  z-index: 1 !important;
+}
+
+.tooltip-grayout {
+  color: #a0a7b4 !important;
+  background-color: #3a424b !important;
+  opacity: 0.8;
+  z-index: 100 !important;
+}
+
+.deck-tooltip {
+  z-index: 100 !important;
+}
+
 /*# sourceMappingURL=cherita.css.map */