@haniffalab/cherita-react 1.5.0 → 2.0.0

package/dist/esm/{components/full-page/FullPage.js → views/ObservationFeature/StandardView.js}

@@ -7,37 +7,36 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { useEffect, useMemo, useState } from 'react';
-import { useMediaQuery } from '@mui/material';
 import { Card, Container, Modal } from 'react-bootstrap';
-import { BREAKPOINTS, PLOT_TYPES, SELECTION_MODES, VIOLIN_MODES } from '../../constants/constants';
+import { Dotplot } from '../../components/dotplot/Dotplot';
+import { DotplotControls } from '../../components/dotplot/DotplotControls';
+import { Heatmap } from '../../components/heatmap/Heatmap';
+import { HeatmapControls } from '../../components/heatmap/HeatmapControls';
+import { Matrixplot } from '../../components/matrixplot/Matrixplot';
+import { MatrixplotControls } from '../../components/matrixplot/MatrixplotControls';
+import { ObsColsList } from '../../components/obs-list/ObsList';
+import { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from '../../components/offcanvas/OffCanvas';
+import { PlotTypeSelector } from '../../components/plot/PlotTypeSelector';
+import { Pseudospatial } from '../../components/pseudospatial/Pseudospatial';
+import { PseudospatialToolbar } from '../../components/pseudospatial/PseudospatialToolbar';
+import { Scatterplot } from '../../components/scatterplot/Scatterplot';
+import { ScatterplotControls } from '../../components/scatterplot/ScatterplotControls';
+import { SearchBar } from '../../components/search-bar/SearchBar';
+import { VarNamesList } from '../../components/var-list/VarList';
+import { Violin } from '../../components/violin/Violin';
+import { ViolinControls } from '../../components/violin/ViolinControls';
+import { PLOT_TYPES, SELECTION_MODES, VIOLIN_MODES } from '../../constants/constants';
 import { DatasetProvider } from '../../context/DatasetContext';
-import { Dotplot } from '../dotplot/Dotplot';
-import { DotplotControls } from '../dotplot/DotplotControls';
-import { Heatmap } from '../heatmap/Heatmap';
-import { HeatmapControls } from '../heatmap/HeatmapControls';
-import { Matrixplot } from '../matrixplot/Matrixplot';
-import { MatrixplotControls } from '../matrixplot/MatrixplotControls';
-import { ObsColsList } from '../obs-list/ObsList';
-import { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from '../offcanvas';
-import { PlotTypeSelector } from './PlotTypeSelector';
-import { Pseudospatial } from '../pseudospatial/Pseudospatial';
-import { PseudospatialToolbar } from '../pseudospatial/PseudospatialToolbar';
-import { Scatterplot } from '../scatterplot/Scatterplot';
-import { ScatterplotControls } from '../scatterplot/ScatterplotControls';
-import { SearchBar } from '../search-bar/SearchBar';
-import { VarNamesList } from '../var-list/VarList';
-import { Violin } from '../violin/Violin';
-import { ViolinControls } from '../violin/ViolinControls';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export function FullPage(_ref) {
+export function StandardView(_ref) {
   let {
       searchDiseases = true,
       defaultPlotType = PLOT_TYPES.SCATTERPLOT
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const [showObs, setShowObs] = useState(false);
-  const [showObsm, setShowObsm] = useState(false);
-  const [showVars, setShowVars] = useState(false);
+  const [showCategories, setShowCategories] = useState(false);
+  const [showEmbeddings, setShowEmbeddings] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
   const [showControls, setShowControls] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [plotType, setPlotType] = useState(defaultPlotType || PLOT_TYPES.SCATTERPLOT);
@@ -49,10 +48,6 @@ export function FullPage(_ref) {
   useEffect(() => {
     setPlotType(defaultPlotType || PLOT_TYPES.SCATTERPLOT);
   }, [defaultPlotType]);
-  const LgBreakpoint = useMediaQuery(BREAKPOINTS.LG);
-  const XlBreakpoint = useMediaQuery(BREAKPOINTS.XL);
-  const showObsBtn = LgBreakpoint;
-  const showVarsBtn = XlBreakpoint;
   const {
     plotControls,
     varMode,
@@ -85,16 +80,14 @@ export function FullPage(_ref) {
     }
   }[plotType];
   const plot = useMemo(() => {
-    const commonProps = {
-      showObsBtn,
-      showVarsBtn,
-      showCtrlsBtn: true,
+    const commonProps = _objectSpread({
       plotType,
-      setShowObs,
-      setShowVars,
+      isFullscreen: true,
+      setShowCategories,
+      setShowSearch,
       setShowControls,
       setPlotType
-    };
+    }, props);
     switch (plotType) {
       case PLOT_TYPES.DOTPLOT:
         return /*#__PURE__*/_jsx(Dotplot, _objectSpread({}, commonProps));
@@ -108,11 +101,9 @@ export function FullPage(_ref) {
         }, commonProps));
       case PLOT_TYPES.SCATTERPLOT:
       default:
-        return /*#__PURE__*/_jsx(Scatterplot, _objectSpread(_objectSpread({}, commonProps), {}, {
-          isFullscreen: true
-        }));
+        return /*#__PURE__*/_jsx(Scatterplot, _objectSpread({}, commonProps));
     }
-  }, [plotType, showObsBtn, showVarsBtn]);
+  }, [plotType]);
   return /*#__PURE__*/_jsx("div", {
     className: "cherita-app",
     children: /*#__PURE__*/_jsxs(DatasetProvider, _objectSpread(_objectSpread({}, props), {}, {
@@ -171,19 +162,19 @@ export function FullPage(_ref) {
           }), /*#__PURE__*/_jsx(Modal.Body, {})]
         }), /*#__PURE__*/_jsx(OffcanvasObs, _objectSpread(_objectSpread({}, props), {}, {
           showSelectedAsActive: showSelectedAsActive,
-          show: showObs,
-          handleClose: () => setShowObs(false)
+          show: showCategories,
+          handleClose: () => setShowCategories(false)
         })), /*#__PURE__*/_jsx(OffcanvasVars, {
-          show: showVars,
-          handleClose: () => setShowVars(false),
+          show: showSearch,
+          handleClose: () => setShowSearch(false),
           mode: varMode
         }), plotControls && /*#__PURE__*/_jsx(OffcanvasControls, {
           show: showControls,
           handleClose: () => setShowControls(false),
           Controls: plotControls
         }), /*#__PURE__*/_jsx(OffcanvasObsm, {
-          show: showObsm,
-          handleClose: () => setShowObsm(false)
+          show: showEmbeddings,
+          handleClose: () => setShowEmbeddings(false)
         }), /*#__PURE__*/_jsx(OffcanvasControls, {
           show: showPseudospatialControls,
           handleClose: () => setShowPseudospatialControls(false),

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

@@ -0,0 +1,6 @@
+import { EmbeddedPlot } from './EmbeddedPlot';
+import { StandardView } from './StandardView';
+export const ObservationFeature = {
+  EmbeddedPlot,
+  StandardView
+};

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

@@ -0,0 +1,50 @@
+const _excluded = ["showCtrlsBtn"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : 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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useState } from 'react';
+import { OffcanvasControls, OffcanvasObs, OffcanvasObsExplorer, OffcanvasObsm } from '../../components/offcanvas/OffCanvas';
+import { Scatterplot } from '../../components/scatterplot/Scatterplot';
+import { ScatterplotControls } from '../../components/scatterplot/ScatterplotControls';
+import { DatasetProvider } from '../../context/DatasetContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EmbeddedPlot(_ref) {
+  let {
+      showCtrlsBtn = true
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [showCategories, setShowCategories] = useState(false);
+  const [showEmbeddings, setShowEmbeddings] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
+  const [showControls, setShowControls] = useState(false);
+  const commonProps = _objectSpread({
+    setShowCategories,
+    setShowSearch,
+    setShowControls
+  }, props);
+  return /*#__PURE__*/_jsxs(DatasetProvider, _objectSpread(_objectSpread({
+    canOverrideSettings: false
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Scatterplot, _objectSpread(_objectSpread({}, commonProps), {}, {
+      pointInteractionEnabled: true
+    })), /*#__PURE__*/_jsx(OffcanvasObs, _objectSpread(_objectSpread({}, props), {}, {
+      showSelectedAsActive: false,
+      show: showCategories,
+      handleClose: () => setShowCategories(false)
+    })), /*#__PURE__*/_jsx(OffcanvasObsExplorer, _objectSpread(_objectSpread({}, props), {}, {
+      show: showSearch,
+      handleClose: () => setShowSearch(false)
+    })), /*#__PURE__*/_jsx(OffcanvasControls, _objectSpread(_objectSpread({}, props), {}, {
+      show: showControls,
+      handleClose: () => setShowControls(false),
+      Controls: ScatterplotControls
+    })), /*#__PURE__*/_jsx(OffcanvasObsm, _objectSpread(_objectSpread({}, props), {}, {
+      show: showEmbeddings,
+      handleClose: () => setShowEmbeddings(false)
+    }))]
+  }));
+}

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

@@ -0,0 +1,292 @@
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import OpenInFullIcon from '@mui/icons-material/OpenInFull';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableRow from '@mui/material/TableRow';
+import Tooltip from '@mui/material/Tooltip';
+import _ from 'lodash';
+import { Alert, Modal } from 'react-bootstrap';
+import { OBS_TYPES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useSettings } from '../../context/SettingsContext';
+import { useParquet, useParquetQuery } from '../../utils/parquetData';
+import { DataTableSkeleton } from '../../utils/Skeleton';
+import { formatNumerical } from '../../utils/string';
+import { useNCBIData } from '../../utils/useNCBIData';
+import { VirtualizedTable } from '../../utils/VirtualizedTable';
+import { useObsColsData } from '../../utils/zarrData';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const NCBIData = _ref => {
+  var _fetchedData$reports;
+  let {
+    symbol
+  } = _ref;
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useNCBIData({
+    symbol
+  });
+  const {
+    description
+  } = (fetchedData === null || fetchedData === void 0 || (_fetchedData$reports = fetchedData.reports) === null || _fetchedData$reports === void 0 || (_fetchedData$reports = _fetchedData$reports[0]) === null || _fetchedData$reports === void 0 || (_fetchedData$reports = _fetchedData$reports.gene) === null || _fetchedData$reports === void 0 || (_fetchedData$reports = _fetchedData$reports.summary) === null || _fetchedData$reports === void 0 ? void 0 : _fetchedData$reports[0]) || {};
+  if (!isPending && !serverError && description) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("p", {
+        children: description
+      }), /*#__PURE__*/_jsxs("p", {
+        className: "text-muted small",
+        children: ["Data fetched from", ' ', /*#__PURE__*/_jsx("a", {
+          href: "https://www.ncbi.nlm.nih.gov/datasets/docs/v2/api/rest-api/",
+          target: "_blank",
+          rel: "noreferrer",
+          children: "NCBI API"
+        }), ' · ', /*#__PURE__*/_jsx("a", {
+          href: "https://www.ncbi.nlm.nih.gov/gene/?term=".concat(encodeURIComponent(symbol)),
+          target: "_blank",
+          rel: "noreferrer",
+          children: "Gene page"
+        })]
+      })]
+    });
+  }
+  return null;
+};
+const DataTable = _ref2 => {
+  let {
+    query: baseQuery,
+    pageSize = 100
+  } = _ref2;
+  const [offset, setOffset] = useState(0);
+  const [data, setData] = useState([]);
+  const [fields, setFields] = useState([]);
+  useEffect(() => {
+    setData([]);
+    setOffset(0);
+  }, [baseQuery]);
+  const query = useMemo(() => {
+    if (!baseQuery) return null;
+    return "\n      ".concat(baseQuery, "\n      LIMIT ").concat(pageSize, " OFFSET ").concat(offset, "\n    ");
+  }, [baseQuery, offset, pageSize]);
+  const {
+    data: queryData,
+    isLoading,
+    error
+  } = useParquetQuery(query);
+  useEffect(() => {
+    if (queryData) {
+      var _queryData$schema;
+      const newData = queryData.toArray().map(row => row.toJSON());
+      setData(prevData => [...prevData, ...newData]);
+      setFields(((_queryData$schema = queryData.schema) === null || _queryData$schema === void 0 ? void 0 : _queryData$schema.fields) || []);
+    }
+  }, [queryData]);
+  const loadMore = useCallback(() => {
+    if (isLoading) return;
+    if (queryData && !queryData.numRows) return;
+    setOffset(prev => prev + pageSize);
+  }, [isLoading, pageSize, queryData]);
+  if (isLoading && offset === 0) {
+    return /*#__PURE__*/_jsx(DataTableSkeleton, {});
+  }
+  if (error) {
+    return /*#__PURE__*/_jsx(Alert, {
+      variant: "danger",
+      children: "Error loading data"
+    });
+  }
+  if (!data || data.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(VirtualizedTable, {
+    fields: fields,
+    data: data,
+    loadMore: loadMore,
+    isLoading: isLoading
+  });
+};
+const ObsExplorerTable = _ref3 => {
+  let {
+    colsData
+  } = _ref3;
+  const {
+    selectedObsIndex
+  } = useSettings();
+  const {
+    obsExplorer = {}
+  } = useDataset();
+  const {
+    dataUrl,
+    dataFilterCols
+  } = obsExplorer;
+  const query = useMemo(() => {
+    if (!selectedObsIndex || !dataUrl || dataFilterCols && !colsData) return null;
+    const where = _.map(_.keys(dataFilterCols), colName => {
+      return "".concat(dataFilterCols[colName], "='").concat(colsData === null || colsData === void 0 ? void 0 : colsData[colName], "'");
+    }).join(' AND ');
+    return "\n      SELECT *\n      FROM read_parquet('".concat(dataUrl, "')\n    ") + (where ? "WHERE ".concat(where) : '');
+  }, [selectedObsIndex, dataUrl, dataFilterCols, colsData]);
+  return /*#__PURE__*/_jsx(DataTable, {
+    query: query
+  });
+};
+export function ObsExplorer() {
+  const [showModal, setShowModal] = useState(false);
+  const {
+    selectedObsIndex
+  } = useSettings();
+  const {
+    obsExplorer = {}
+  } = useDataset();
+  useParquet(); // initialize duckdb instance
+
+  const {
+    obsCols,
+    data: colsData,
+    isPending,
+    serverError
+  } = useObsColsData(obsExplorer === null || obsExplorer === void 0 ? void 0 : obsExplorer.obsCols);
+  if (selectedObsIndex == null) {
+    return /*#__PURE__*/_jsx("div", {
+      className: "my-4 text-muted",
+      children: "Select a point in the scatterplot to view details about the gene perturbation."
+    });
+  }
+  if (isPending) {
+    return /*#__PURE__*/_jsx("div", {
+      className: "my-3",
+      children: "Loading..."
+    });
+  }
+  if (serverError) {
+    return /*#__PURE__*/_jsx("div", {
+      className: "my-3",
+      children: "Error loading data"
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: "mt-3 d-flex flex-column h-100",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "overflow-auto flex-grow-1 modern-scrollbars",
+      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."
+          }),
+          placement: "right",
+          arrow: true,
+          children: /*#__PURE__*/_jsx("span", {
+            children: colsData === null || colsData === void 0 ? void 0 : colsData[obsExplorer.symbolCol]
+          })
+        })
+      }), /*#__PURE__*/_jsx(NCBIData, {
+        symbol: colsData === null || colsData === void 0 ? void 0 : colsData[obsExplorer.symbolCol]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "mb-0",
+        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."
+            }),
+            placement: "right",
+            arrow: true,
+            children: /*#__PURE__*/_jsxs("span", {
+              children: ["Perturbation metadata ", /*#__PURE__*/_jsx(InfoOutlinedIcon, {
+                fontSize: "small"
+              })]
+            })
+          })
+        }), /*#__PURE__*/_jsx(TableContainer, {
+          component: Paper,
+          sx: {
+            borderRadius: 2,
+            marginBottom: 2,
+            border: 1,
+            borderColor: 'divider'
+          },
+          children: /*#__PURE__*/_jsx(Table, {
+            size: "small",
+            "aria-label": "perturbation metadata",
+            children: /*#__PURE__*/_jsx(TableBody, {
+              children: _.map(colsData, (value, colName) => {
+                const col = (obsCols === null || obsCols === void 0 ? void 0 : obsCols[colName]) || {};
+                let v;
+                if (col.type === OBS_TYPES.CONTINUOUS) {
+                  v = formatNumerical(parseFloat(value));
+                } else if (col.type === OBS_TYPES.DISCRETE) {
+                  v = value;
+                } else if (col.type === OBS_TYPES.BOOLEAN) {
+                  var _col$codesMap;
+                  v = ((_col$codesMap = col.codesMap) === null || _col$codesMap === void 0 ? void 0 : _col$codesMap[+value]) || value;
+                } else {
+                  var _col$codesMap2;
+                  v = ((_col$codesMap2 = col.codesMap) === null || _col$codesMap2 === void 0 ? void 0 : _col$codesMap2[value]) || value;
+                }
+                return /*#__PURE__*/_jsxs(TableRow, {
+                  hover: true,
+                  children: [/*#__PURE__*/_jsx(TableCell, {
+                    scope: "row",
+                    children: col.displayName || colName
+                  }), /*#__PURE__*/_jsx(TableCell, {
+                    children: v
+                  })]
+                }, colName);
+              })
+            })
+          })
+        })]
+      }), (obsExplorer === null || obsExplorer === void 0 ? void 0 : obsExplorer.dataUrl) && /*#__PURE__*/_jsxs("div", {
+        className: "mb-3",
+        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."
+            }),
+            placement: "right",
+            arrow: true,
+            children: /*#__PURE__*/_jsxs("span", {
+              className: "d-i{' '} nline-flex align-items-center",
+              children: ["Predicted downstream effects", ' ', /*#__PURE__*/_jsx(InfoOutlinedIcon, {
+                fontSize: "small",
+                className: "ms-1"
+              })]
+            })
+          }), /*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            onClick: () => setShowModal(true),
+            "aria-label": "Expand full table",
+            children: /*#__PURE__*/_jsx(OpenInFullIcon, {
+              fontSize: "small"
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ObsExplorerTable, {
+          colsData: colsData
+        })]
+      }), /*#__PURE__*/_jsxs(Modal, {
+        show: showModal,
+        onHide: () => setShowModal(false),
+        size: "xl",
+        scrollable: true,
+        children: [/*#__PURE__*/_jsx(Modal.Header, {
+          closeButton: true,
+          children: /*#__PURE__*/_jsx(Modal.Title, {
+            children: "Full downstream effects table"
+          })
+        }), /*#__PURE__*/_jsx(Modal.Body, {
+          children: /*#__PURE__*/_jsx(ObsExplorerTable, {
+            colsData: colsData
+          })
+        })]
+      })]
+    })
+  });
+}

package/dist/esm/{apps/perturbgen/PerturbGen.js → views/PerturbationMap/StandardView.js}

@@ -6,30 +6,25 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { useState } from 'react';
-import { useMediaQuery } from '@mui/material';
 import { Card, Container, Modal } from 'react-bootstrap';
 import { ObsExplorer } from './ObsExplorer';
 import { ObsColsList } from '../../components/obs-list/ObsList';
-import { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from '../../components/offcanvas';
+import { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasObsExplorer } from '../../components/offcanvas/OffCanvas';
 import { PseudospatialToolbar } from '../../components/pseudospatial/PseudospatialToolbar';
 import { Scatterplot } from '../../components/scatterplot/Scatterplot';
 import { ScatterplotControls } from '../../components/scatterplot/ScatterplotControls';
 import { SearchBar } from '../../components/search-bar/SearchBar';
-import { BREAKPOINTS, SELECTION_MODES } from '../../constants/constants';
+import { SELECTION_MODES } from '../../constants/constants';
 import { DatasetProvider } from '../../context/DatasetContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function PerturbGen(_ref) {
+export function StandardView(_ref) {
   let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  const [showObs, setShowObs] = useState(false);
-  const [showObsm, setShowObsm] = useState(false);
-  const [showVars, setShowVars] = useState(false);
+  const [showCategories, setShowCategories] = useState(false);
+  const [showEmbeddings, setShowEmbeddings] = useState(false);
+  const [showObsExplorer, setShowObsExplorer] = useState(false);
   const [showControls, setShowControls] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [showPseudospatialControls, setShowPseudospatialControls] = useState(false);
-  const LgBreakpoint = useMediaQuery(BREAKPOINTS.LG);
-  const XlBreakpoint = useMediaQuery(BREAKPOINTS.XL);
-  const showObsBtn = LgBreakpoint;
-  const showVarsBtn = XlBreakpoint;
   return /*#__PURE__*/_jsx("div", {
     className: "cherita-app",
     children: /*#__PURE__*/_jsxs(DatasetProvider, _objectSpread(_objectSpread({}, props), {}, {
@@ -46,11 +41,8 @@ export function PerturbGen(_ref) {
         }), /*#__PURE__*/_jsx("div", {
           className: "cherita-app-canvas",
           children: /*#__PURE__*/_jsx(Scatterplot, {
-            showObsBtn: showObsBtn,
-            showVarsBtn: showVarsBtn,
-            showCtrlsBtn: true,
-            setShowObs: setShowObs,
-            setShowVars: setShowVars,
+            setShowCategories: setShowCategories,
+            setShowSearch: setShowObsExplorer,
             setShowControls: setShowControls,
             isFullscreen: true,
             pointInteractionEnabled: true
@@ -81,21 +73,21 @@ export function PerturbGen(_ref) {
           closeButton: true
         }), /*#__PURE__*/_jsx(Modal.Body, {})]
       }), /*#__PURE__*/_jsx(OffcanvasObs, _objectSpread(_objectSpread({
-        show: showObs,
-        handleClose: () => setShowObs(false)
+        show: showCategories,
+        handleClose: () => setShowCategories(false)
       }, props), {}, {
         showSelectedAsActive: false
-      })), /*#__PURE__*/_jsx(OffcanvasVars, {
-        show: showVars,
-        handleClose: () => setShowVars(false),
+      })), /*#__PURE__*/_jsx(OffcanvasObsExplorer, {
+        show: showObsExplorer,
+        handleClose: () => setShowObsExplorer(false),
         mode: SELECTION_MODES.SINGLE
       }), /*#__PURE__*/_jsx(OffcanvasControls, {
         show: showControls,
         handleClose: () => setShowControls(false),
         Controls: ScatterplotControls
       }), /*#__PURE__*/_jsx(OffcanvasObsm, {
-        show: showObsm,
-        handleClose: () => setShowObsm(false)
+        show: showEmbeddings,
+        handleClose: () => setShowEmbeddings(false)
       }), /*#__PURE__*/_jsx(OffcanvasControls, {
         show: showPseudospatialControls,
         handleClose: () => setShowPseudospatialControls(false),

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

@@ -0,0 +1,6 @@
+import { EmbeddedPlot } from './EmbeddedPlot';
+import { StandardView } from './StandardView';
+export const PerturbationMap = {
+  EmbeddedPlot,
+  StandardView
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -26,6 +26,7 @@
     "./dist/*.css": "./dist/css/*.css"
   },
   "dependencies": {
+    "@duckdb/duckdb-wasm": "^1.33.1-dev18.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
@@ -42,10 +43,12 @@
     "@tanstack/react-virtual": "^3.7.0",
     "@turf/turf": "^7.0.0",
     "@uidotdev/usehooks": "^2.4.1",
-    "@zarrita/ndarray": "^0.1.5",
+    "@zarrita/ndarray": "0.1.6",
     "bootstrap": "^5.3.3",
     "deck.gl": "8.8.27",
+    "isndarray": "^1.0.0",
     "jquery": "^3.7.1",
+    "ndarray": "^1.0.19",
     "ndarray-unpack": "^1.0.0",
     "nebula.gl": "^1.0.4",
     "numbro": "^2.5.0",
@@ -54,7 +57,8 @@
     "react-bootstrap": "^2.7.4",
     "react-plotly.js": "^2.6.0",
     "react-scripts": "^5.0.1",
-    "zarrita": "^0.5.4"
+    "react-virtuoso": "^4.18.1",
+    "zarrita": "0.6.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -110,7 +114,7 @@
     "test": "jest",
     "test:ci": "jest --coverage --ci --no-watch",
     "lint:scss": "stylelint 'src/**/*.scss' --fix",
-    "lint:js": "eslint 'src/**/*.js' --fix",
+    "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"

package/scss/cherita.scss

@@ -440,7 +440,7 @@ input[type='checkbox'] {
 .cherita-search-modal {
   .form-control:focus {
     box-shadow: none;
-    border: var(--bs-border-width) solid var(--bs-border-color);
+    border: var(--geeks-border-width) solid var(--geeks-input-border);
   }
 }
 

package/scss/components/layouts.scss

@@ -137,7 +137,6 @@
 
 .search-modal-info {
   overflow-y: auto;
-  border-left: 1px solid #dee2e6;
 }
 
 .cherita-app-canvas {

package/scss/components/lists.scss

@@ -1,6 +1,6 @@
 .list-group.cherita-list {
   .virtualized-list-wrapper {
-    padding: 0 0.25rem 0.25rem;
+    padding-bottom: 0.25rem;
   }
 
   .list-group-item.unstyled {