@haniffalab/cherita-react 1.5.0 → 2.0.0

package/dist/cjs/components/dotplot/Dotplot.js

@@ -15,7 +15,8 @@ var _SettingsContext = require("../../context/SettingsContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _Resolver = require("../../utils/Resolver");
-var _PlotAlert = require("../full-page/PlotAlert");
+var _usePlotVisibility = _interopRequireDefault(require("../../utils/usePlotVisibility"));
+var _PlotAlert = require("../plot/PlotAlert");
 var _Toolbar = require("../toolbar/Toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -26,14 +27,12 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 Dotplot(_ref) {
   let {
-    showObsBtn = false,
-    showVarsBtn = false,
-    showCtrlsBtn = false,
-    setShowObs,
-    setShowVars,
+    setShowCategories,
+    setShowSearch,
     setShowControls,
     plotType,
-    setPlotType
+    setPlotType,
+    isFullscreen = false
   } = _ref;
   const ENDPOINT = 'dotplot';
   const dataset = (0, _DatasetContext.useDataset)();
@@ -49,6 +48,10 @@ function Dotplot(_ref) {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const selectedObs = (0, _Resolver.useSelectedObs)();
   const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
+  const {
+    showCategoriesBtn,
+    showSearchBtn
+  } = (0, _usePlotVisibility.default)(isFullscreen);
   const params = (0, _react.useMemo)(() => {
     var _selectedObs$omit;
     return {
@@ -125,19 +128,21 @@ function Dotplot(_ref) {
       });
     });
   }, [settings.controls.colorAxis.cmin, settings.controls.colorAxis.cmax]);
-  const customModeBarButtons = _lodash.default.compact([showObsBtn && (0, _Toolbar.ObsPlotlyToolbar)({
-    onClick: setShowObs
-  }), showVarsBtn && (0, _Toolbar.VarPlotlyToolbar)({
-    onClick: setShowVars
-  }), showCtrlsBtn && (0, _Toolbar.ControlsPlotlyToolbar)({
+  const modeBarButtons = [_lodash.default.compact([(0, _Toolbar.PlotlyModebarControls)({
     onClick: setShowControls
-  })]);
-  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, _constants.PLOTLY_MODEBAR_BUTTONS] : [_constants.PLOTLY_MODEBAR_BUTTONS];
+  }), ..._constants.PLOTLY_MODEBAR_BUTTONS])];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-plot cherita-dotplot position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "plotly-toolbar",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.PlotlyToolbar, {
+            setShowCategories: setShowCategories,
+            setShowSearch: setShowSearch,
+            isFullscreen: isFullscreen
+          })
+        }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
           data: data,
           layout: layout,
           useResizeHandler: true,
@@ -159,15 +164,15 @@ function Dotplot(_ref) {
       setPlotType: setPlotType,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
-        children: ["Select one or more", ' ', showVarsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        children: ["Select one or more", ' ', showSearchBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
-          onClick: setShowVars,
+          onClick: setShowSearch,
           children: "features"
-        }) : 'features', ' ', "to display their expression across groups, then choose a", ' ', showObsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        }) : 'features', ' ', "to display their expression across groups, then choose a", ' ', showCategoriesBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
-          onClick: setShowObs,
+          onClick: setShowCategories,
           children: "category"
         }) : 'category', ' ', "to group observations in the dotplot."]
       })

package/dist/cjs/components/heatmap/Heatmap.js

@@ -15,7 +15,8 @@ var _SettingsContext = require("../../context/SettingsContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _Resolver = require("../../utils/Resolver");
-var _PlotAlert = require("../full-page/PlotAlert");
+var _usePlotVisibility = _interopRequireDefault(require("../../utils/usePlotVisibility"));
+var _PlotAlert = require("../plot/PlotAlert");
 var _Toolbar = require("../toolbar/Toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -26,14 +27,12 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 Heatmap(_ref) {
   let {
-    showObsBtn = false,
-    showVarsBtn = false,
-    showCtrlsBtn = false,
-    setShowObs,
-    setShowVars,
+    setShowCategories,
+    setShowSearch,
     setShowControls,
     plotType,
-    setPlotType
+    setPlotType,
+    isFullscreen = false
   } = _ref;
   const ENDPOINT = 'heatmap';
   const dataset = (0, _DatasetContext.useDataset)();
@@ -48,6 +47,10 @@ function Heatmap(_ref) {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const selectedObs = (0, _Resolver.useSelectedObs)();
   const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
+  const {
+    showCategoriesBtn,
+    showSearchBtn
+  } = (0, _usePlotVisibility.default)(isFullscreen);
   const params = (0, _react.useMemo)(() => {
     var _selectedObs$omit;
     return {
@@ -99,19 +102,21 @@ function Heatmap(_ref) {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
-  const customModeBarButtons = _lodash.default.compact([showObsBtn && (0, _Toolbar.ObsPlotlyToolbar)({
-    onClick: setShowObs
-  }), showVarsBtn && (0, _Toolbar.VarPlotlyToolbar)({
-    onClick: setShowVars
-  }), showCtrlsBtn && (0, _Toolbar.ControlsPlotlyToolbar)({
+  const modeBarButtons = [_lodash.default.compact([(0, _Toolbar.PlotlyModebarControls)({
     onClick: setShowControls
-  })]);
-  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, _constants.PLOTLY_MODEBAR_BUTTONS] : [_constants.PLOTLY_MODEBAR_BUTTONS];
+  }), ..._constants.PLOTLY_MODEBAR_BUTTONS])];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-plot cherita-heatmap position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "plotly-toolbar",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.PlotlyToolbar, {
+            setShowCategories: setShowCategories,
+            setShowSearch: setShowSearch,
+            isFullscreen: isFullscreen
+          })
+        }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
           data: data,
           layout: layout,
           useResizeHandler: true,
@@ -133,15 +138,15 @@ function Heatmap(_ref) {
       setPlotType: setPlotType,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
-        children: ["Select one or more", ' ', showVarsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        children: ["Select one or more", ' ', showSearchBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
-          onClick: setShowVars,
+          onClick: setShowSearch,
           children: "features"
-        }) : 'features', ' ', "to display their expression, then choose a", ' ', showObsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        }) : 'features', ' ', "to display their expression, then choose a", ' ', showCategoriesBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
-          onClick: setShowObs,
+          onClick: setShowCategories,
           children: "category"
         }) : 'category', ' ', "to group observations in the heatmap."]
       })

package/dist/cjs/components/matrixplot/Matrixplot.js

@@ -15,7 +15,8 @@ var _SettingsContext = require("../../context/SettingsContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _Resolver = require("../../utils/Resolver");
-var _PlotAlert = require("../full-page/PlotAlert");
+var _usePlotVisibility = _interopRequireDefault(require("../../utils/usePlotVisibility"));
+var _PlotAlert = require("../plot/PlotAlert");
 var _Toolbar = require("../toolbar/Toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -26,14 +27,12 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 Matrixplot(_ref) {
   let {
-    showObsBtn = false,
-    showVarsBtn = false,
-    showCtrlsBtn = false,
-    setShowObs,
-    setShowVars,
+    setShowCategories,
+    setShowSearch,
     setShowControls,
     plotType,
-    setPlotType
+    setPlotType,
+    isFullscreen = false
   } = _ref;
   const ENDPOINT = 'matrixplot';
   const dataset = (0, _DatasetContext.useDataset)();
@@ -48,6 +47,10 @@ function Matrixplot(_ref) {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const selectedObs = (0, _Resolver.useSelectedObs)();
   const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
+  const {
+    showCategoriesBtn,
+    showSearchBtn
+  } = (0, _usePlotVisibility.default)(isFullscreen);
   const params = (0, _react.useMemo)(() => {
     var _selectedObs$omit;
     return {
@@ -100,19 +103,21 @@ function Matrixplot(_ref) {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
-  const customModeBarButtons = _lodash.default.compact([showObsBtn && (0, _Toolbar.ObsPlotlyToolbar)({
-    onClick: setShowObs
-  }), showVarsBtn && (0, _Toolbar.VarPlotlyToolbar)({
-    onClick: setShowVars
-  }), showCtrlsBtn && (0, _Toolbar.ControlsPlotlyToolbar)({
+  const modeBarButtons = [_lodash.default.compact([(0, _Toolbar.PlotlyModebarControls)({
     onClick: setShowControls
-  })]);
-  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, _constants.PLOTLY_MODEBAR_BUTTONS] : [_constants.PLOTLY_MODEBAR_BUTTONS];
+  }), ..._constants.PLOTLY_MODEBAR_BUTTONS])];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-plot cherita-matrixplot position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "plotly-toolbar",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.PlotlyToolbar, {
+            setShowCategories: setShowCategories,
+            setShowSearch: setShowSearch,
+            isFullscreen: isFullscreen
+          })
+        }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
           data: data,
           layout: layout,
           useResizeHandler: true,
@@ -134,15 +139,15 @@ function Matrixplot(_ref) {
       setPlotType: setPlotType,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
-        children: ["Select a", ' ', showObsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        children: ["Select a", ' ', showCategoriesBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
-          onClick: setShowObs,
+          onClick: setShowCategories,
           children: "category"
-        }) : 'category', ' ', "to group observations, then choose one or more", ' ', showVarsBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+        }) : 'category', ' ', "to group observations, then choose one or more", ' ', showSearchBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
-          onClick: setShowVars,
+          onClick: setShowSearch,
           children: "features"
         }) : 'features', ' ', "to display the matrix plot."]
       })

package/dist/cjs/components/obs-list/ObsItem.js

@@ -165,7 +165,7 @@ function CategoricalItem(_ref2) {
     getColor
   } = (0, _colorHelper.useColor)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "virtualized-list-wrapper",
+    className: "virtualized-list-wrapper ps-1",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
       className: "obs-item",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -275,7 +275,7 @@ function CategoricalItem(_ref2) {
         })]
       })
     }, value)
-  });
+  }, value);
 }
 function CategoricalObs(_ref3) {
   let {

package/dist/cjs/components/offcanvas/{index.js → OffCanvas.js}

@@ -5,17 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OffcanvasControls = OffcanvasControls;
 exports.OffcanvasObs = OffcanvasObs;
+exports.OffcanvasObsExplorer = OffcanvasObsExplorer;
 exports.OffcanvasObsm = OffcanvasObsm;
 exports.OffcanvasVars = OffcanvasVars;
 var _Offcanvas = _interopRequireDefault(require("react-bootstrap/Offcanvas"));
 var _constants = require("../../constants/constants");
+var _ObsExplorer = require("../../views/PerturbationMap/ObsExplorer");
 var _ObsList = require("../obs-list/ObsList");
 var _ObsmList = require("../obsm-list/ObsmList");
 var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["show", "handleClose"],
-  _excluded2 = ["show", "handleClose", "Controls"];
+  _excluded2 = ["show", "handleClose", "Controls"],
+  _excluded3 = ["show", "handleClose"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -112,4 +115,34 @@ function OffcanvasControls(_ref4) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Controls, _objectSpread({}, props))
     })]
   });
+}
+function OffcanvasObsExplorer(_ref5) {
+  let {
+      show,
+      handleClose
+    } = _ref5,
+    props = _objectWithoutProperties(_ref5, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
+    show: show,
+    onHide: handleClose,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
+      closeButton: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
+        children: "Gene Perturbations"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
+      className: "p-1",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "sidebar-features",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
+          searchDiseases: false,
+          searchVar: false,
+          searchObs: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "sidebar-features-list",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsExplorer.ObsExplorer, _objectSpread({}, props))
+        })]
+      })
+    })]
+  });
 }

package/dist/cjs/components/{full-page → plot}/PlotAlert.js

@@ -34,7 +34,7 @@ function PlotAlert(_ref) {
         className: "w-100 h-100 d-flex justify-content-center align-items-center",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
           variant: variant,
-          className: "m-0 w-75 w-lg-50 text-center",
+          className: "m-0 my-3 w-75 w-lg-50 text-center",
           children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert.Heading, {
             children: heading
           }), " ", children]

package/dist/cjs/components/scatterplot/Scatterplot.js

@@ -27,8 +27,9 @@ var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _Resolver = require("../../utils/Resolver");
 var _string = require("../../utils/string");
+var _usePlotVisibility = _interopRequireDefault(require("../../utils/usePlotVisibility"));
 var _zarrData = require("../../utils/zarrData");
-var _PlotAlert = require("../full-page/PlotAlert");
+var _PlotAlert = require("../plot/PlotAlert");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -45,16 +46,24 @@ const INITIAL_VIEW_STATE = {
   pitch: 0,
   bearing: 0
 };
+const getRadiusScale = bounds => {
+  // From 28 degrees ~= 30km -> 30m radius
+  const lonDim = bounds[1][0] - bounds[0][0];
+  const latDim = bounds[1][1] - bounds[0][1];
+  const minDim = Math.min(lonDim, latDim);
+  const rs = 0.01 / minDim * 111111;
+  return rs;
+};
 function Scatterplot(_ref) {
   var _features$features2, _obsmData$serverError, _labelObsData$serverE, _settings$selectedVar, _data$positions2;
   let {
-    radius = null,
-    setShowObs,
-    setShowVars,
+    setShowCategories,
+    setShowSearch,
     plotType,
     setPlotType,
     isFullscreen = false,
-    pointInteractionEnabled = false
+    pointInteractionEnabled = false,
+    showSpatialControls = true
   } = _ref;
   const {
     useUnsColors
@@ -71,9 +80,9 @@ function Scatterplot(_ref) {
     getColor
   } = (0, _colorHelper.useColor)();
   const deckRef = (0, _react.useRef)(null);
+  const [viewport, setViewport] = (0, _react.useState)(null);
   const [viewState, setViewState] = (0, _react.useState)(INITIAL_VIEW_STATE);
   const [isRendering, setIsRendering] = (0, _react.useState)(true);
-  const [radiusScale, setRadiusScale] = (0, _react.useState)(radius || 1);
   const [isPending, setIsPending] = (0, _react.useState)(false);
   const [data, setData] = (0, _react.useState)({
     positions: [],
@@ -82,10 +91,14 @@ function Scatterplot(_ref) {
   const [coordsError, setCoordsError] = (0, _react.useState)(null);
   const [hasObsm, setHasObsm] = (0, _react.useState)(true);
   const [dataError, setDataError] = (0, _react.useState)(null);
+  const radiusScale = settings.controls.radiusScale[settings.selectedObsm] || 1;
   const selectedObs = (0, _Resolver.useSelectedObs)();
   const selectedObsIndex = settings.selectedObsIndex;
   const [hoveredIndex, setHoveredIndex] = (0, _react.useState)(null);
   const [isHoveringPoint, setIsHoveringPoint] = (0, _react.useState)(false);
+  const {
+    showSearchBtn
+  } = (0, _usePlotVisibility.default)(isFullscreen);
 
   // EditableGeoJsonLayer
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
@@ -104,15 +117,6 @@ function Scatterplot(_ref) {
 
   // @TODO: assert length of obsmData, xData, obsData is equal
 
-  const getRadiusScale = (0, _react.useCallback)(bounds => {
-    if (!!radius) return radius;
-    // From 28 degrees ~= 30km -> 30m radius
-    const lonDim = bounds[1][0] - bounds[0][0];
-    const latDim = bounds[1][1] - bounds[0][1];
-    const minDim = Math.min(lonDim, latDim);
-    const rs = 0.01 / minDim * 111111;
-    return rs;
-  }, [radius]);
   (0, _react.useEffect)(() => {
     if (obsmData.isPending || settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && xData.isPending || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && obsData.isPending) {
       setIsPending(true);
@@ -159,7 +163,7 @@ function Scatterplot(_ref) {
     }
   }, [obsData.data, obsData.isPending, obsData.serverError, obsmData.data, obsmData.isPending, obsmData.serverError, settings.colorEncoding, xData.data, xData.isPending, xData.serverError]);
   (0, _react.useEffect)(() => {
-    if (data.positions && !!data.positions.length) {
+    if (data.positions && data.positions.length) {
       var _deckRef$current, _deckRef$current2;
       const mapHelper = new _mapHelper.MapHelper();
       const {
@@ -171,16 +175,28 @@ function Scatterplot(_ref) {
         width: deckRef === null || deckRef === void 0 || (_deckRef$current = deckRef.current) === null || _deckRef$current === void 0 || (_deckRef$current = _deckRef$current.deck) === null || _deckRef$current === void 0 ? void 0 : _deckRef$current.width,
         height: deckRef === null || deckRef === void 0 || (_deckRef$current2 = deckRef.current) === null || _deckRef$current2 === void 0 || (_deckRef$current2 = _deckRef$current2.deck) === null || _deckRef$current2 === void 0 ? void 0 : _deckRef$current2.height
       });
-      setRadiusScale(getRadiusScale(bounds));
-      setViewState(v => {
-        return _objectSpread(_objectSpread({}, v), {}, {
-          longitude: longitude,
-          latitude: latitude,
-          zoom: zoom
-        });
+      setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
+        latitude,
+        longitude,
+        zoom
+      }));
+      setViewport({
+        latitude,
+        longitude,
+        zoom,
+        bounds
+      });
+    }
+  }, [data.positions]);
+  (0, _react.useEffect)(() => {
+    if (viewport !== null && viewport !== void 0 && viewport.bounds && !settings.controls.radiusScale[settings.selectedObsm]) {
+      dispatch({
+        type: 'set.controls.radiusScale',
+        obsm: settings.selectedObsm,
+        radiusScale: getRadiusScale(viewport.bounds)
       });
     }
-  }, [getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError, data.positions]);
+  }, [dispatch, settings.controls.radiusScale, settings.selectedObsm, viewport === null || viewport === void 0 ? void 0 : viewport.bounds]);
   (0, _react.useEffect)(() => {
     var _data$positions;
     if (!pointInteractionEnabled) return;
@@ -295,19 +311,19 @@ function Scatterplot(_ref) {
     }, useUnsColors && settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && selectedObs !== null && selectedObs !== void 0 && selectedObs.colors ? {
       colorscale: selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.colors
     } : {})) || [0, 0, 0, 100];
-  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical, useUnsColors, settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.colors, selectedObsIndex, getOriginalIndex]);
+  }, [isPending, sortedObsIndices, pointInteractionEnabled, getOriginalIndex, selectedObsIndex, getColor, sortedData.values, min, max, isCategorical, useUnsColors, settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.colors]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius
-  const getRadius = (_d, _ref3) => {
+  const getRadius = (0, _react.useCallback)((_d, _ref3) => {
     let {
       index
     } = _ref3;
     const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
     if (pointInteractionEnabled && getOriginalIndex(index) === selectedObsIndex) {
-      return grayOut ? 200 : 200;
+      return 50;
     }
-    return grayOut ? 1 : 60;
-  };
+    return (grayOut ? 1 : 3) * (pointInteractionEnabled ? 26 : 1);
+  }, [getOriginalIndex, pointInteractionEnabled, selectedObsIndex, sortedObsIndices]);
   const memoizedLayers = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
       id: 'cherita-layer-scatterplot',
@@ -399,12 +415,20 @@ function Scatterplot(_ref) {
         type: 'set.selectedObsIndex',
         index: originalIndex
       });
+      // in collapsed view, open offcanvas
+      if (pointInteractionEnabled && showSearchBtn) {
+        setShowSearch(true);
+      }
     }
   }
   const getLabel = function (o, v) {
     let isVar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (isVar || o.type === _constants.OBS_TYPES.CONTINUOUS) {
       return "".concat(o.name, ": ").concat((0, _string.formatNumerical)(parseFloat(v)));
+    } else if (o.type === _constants.OBS_TYPES.DISCRETE) {
+      return "".concat(o.name, ": ").concat(v);
+    } else if (o.type === _constants.OBS_TYPES.BOOLEAN) {
+      return "".concat(o.name, ": ").concat(o.codesMap[+v]);
     } else {
       return "".concat(o.name, ": ").concat(o.codesMap[v]);
     }
@@ -426,6 +450,7 @@ function Scatterplot(_ref) {
     }
     if (settings.labelObs.length) {
       text.push(..._lodash.default.map(labelObsData.data, (v, k) => {
+        if (!v) return;
         const labelObs = settings.data.obs[k];
         return getLabel(labelObs, v[getOriginalIndex(index)]);
       }));
@@ -492,7 +517,7 @@ function Scatterplot(_ref) {
           return 'grab';
         },
         ref: deckRef
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
+      }), showSpatialControls && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
         mode: mode,
         setMode: setMode,
         features: features,
@@ -505,8 +530,8 @@ function Scatterplot(_ref) {
         decreaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
           zoom: v.zoom - 1
         })),
-        setShowObs: setShowObs,
-        setShowVars: setShowVars,
+        setShowCategories: setShowCategories,
+        setShowSearch: setShowSearch,
         isFullscreen: isFullscreen
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-spatial-footer",