@haniffalab/cherita-react 0.2.0-dev.2024-09-26.1ea62883 → 0.2.0-dev.2024-10-16.42ace931

package/dist/components/dotplot/Dotplot.js

@@ -16,7 +16,6 @@ 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; }
 function Dotplot() {
-  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs3;
   const ENDPOINT = "dotplot";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
@@ -27,10 +26,7 @@ function Dotplot() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     obsCol: dataset.selectedObs,
-    obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
-      var _dataset$selectedObs4;
-      return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
-    }),
+    obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
     varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
       name: i.name,
       indices: i.vars.map(v => v.index)
@@ -49,15 +45,11 @@ function Dotplot() {
       setHasSelections(false);
     }
     setParams(p => {
-      var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
       return {
         ...p,
         url: dataset.url,
         obsCol: dataset.selectedObs,
-        obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
-          var _dataset$selectedObs8;
-          return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
-        }),
+        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
         varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
           name: i.name,
           indices: i.vars.map(v => v.index)

package/dist/components/full-page/FullPage.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullPage = FullPage;
+var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _ObsList = require("../obs-list/ObsList");
+var _offcanvas = require("../offcanvas");
+var _Scatterplot = require("../scatterplot/Scatterplot");
+var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
+var _SearchBar = require("../search-bar/SearchBar");
+var _VarList = require("../var-list/VarList");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+function FullPage(props) {
+  const targetRef = (0, _react.useRef)();
+  const [showObs, setShowObs] = (0, _react.useState)(false);
+  const [showObsm, setShowObsm] = (0, _react.useState)(false);
+  const [showVars, setShowVars] = (0, _react.useState)(false);
+  const [showControls, setShowControls] = (0, _react.useState)(false);
+  const [dimensions, setDimensions] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  });
+  (0, _react.useLayoutEffect)(() => {
+    function updateDimensions() {
+      if (targetRef.current) {
+        setDimensions({
+          width: targetRef.current.offsetWidth,
+          height: window.innerHeight - targetRef.current.offsetTop
+        });
+      }
+    }
+    window.addEventListener("resize", updateDimensions);
+    updateDimensions();
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: targetRef,
+    className: "cherita-app",
+    style: {
+      height: dimensions.height
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatasetContext.DatasetProvider, {
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "row g-0",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "cherita-app-obs",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsList.ObsColsList, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "cherita-app-plot",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "position-relative",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar, {
+              expand: "sm",
+              bg: "primary",
+              className: "cherita-navbar",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "container-fluid",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar.Toggle, {
+                  "aria-controls": "navbarScroll"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Navbar.Collapse, {
+                  id: "navbarScroll",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Nav, {
+                    className: "me-auto my-0",
+                    navbarScroll: true,
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Item, {
+                      className: "d-block d-lg-none",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Link, {
+                        onClick: () => setShowObs(true),
+                        children: "Observations"
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Item, {
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Link, {
+                        onClick: () => setShowVars(true),
+                        children: "Features"
+                      })
+                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav, {
+                    className: "d-flex",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Item, {
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Link, {
+                        onClick: () => setShowControls(true),
+                        children: "Controls"
+                      })
+                    })
+                  })]
+                })]
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "cherita-container-scatterplot",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, {})
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "cherita-app-var",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Card, {
+            className: "cherita-app-features",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Body, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
+                searchDiseases: true
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarList.VarNamesList, {
+                mode: _constants.SELECTION_MODES.SINGLE
+              })]
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "col",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasObs, {
+            show: showObs,
+            handleClose: () => setShowObs(false)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasVars, {
+            show: showVars,
+            handleClose: () => setShowVars(false)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasControls, {
+            show: showControls,
+            handleClose: () => setShowControls(false),
+            Controls: _ScatterplotControls.ScatterplotControls
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasObsm, {
+            show: showObsm,
+            handleClose: () => setShowObsm(false)
+          })]
+        })]
+      })
+    })
+  });
+}

package/dist/components/heatmap/Heatmap.js

@@ -16,7 +16,6 @@ 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; }
 function Heatmap() {
-  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs3;
   const ENDPOINT = "heatmap";
   const dataset = (0, _DatasetContext.useDataset)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
@@ -26,10 +25,7 @@ function Heatmap() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     obsCol: dataset.selectedObs,
-    obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
-      var _dataset$selectedObs4;
-      return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
-    }),
+    obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
     varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
       name: i.name,
       indices: i.vars.map(v => v.index)
@@ -43,15 +39,11 @@ function Heatmap() {
       setHasSelections(false);
     }
     setParams(p => {
-      var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
       return {
         ...p,
         url: dataset.url,
         obsCol: dataset.selectedObs,
-        obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
-          var _dataset$selectedObs8;
-          return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
-        }),
+        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
         varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
           name: i.name,
           indices: i.vars.map(v => v.index)

package/dist/components/matrixplot/Matrixplot.js

@@ -16,7 +16,6 @@ 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; }
 function Matrixplot() {
-  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs3;
   const ENDPOINT = "matrixplot";
   const dataset = (0, _DatasetContext.useDataset)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
@@ -26,10 +25,7 @@ function Matrixplot() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     obsCol: dataset.selectedObs,
-    obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
-      var _dataset$selectedObs4;
-      return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
-    }),
+    obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
     varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
       name: i.name,
       indices: i.vars.map(v => v.index)
@@ -44,15 +40,11 @@ function Matrixplot() {
       setHasSelections(false);
     }
     setParams(p => {
-      var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
       return {
         ...p,
         url: dataset.url,
         obsCol: dataset.selectedObs,
-        obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
-          var _dataset$selectedObs8;
-          return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
-        }),
+        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
         varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
           name: i.name,
           indices: i.vars.map(v => v.index)

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

@@ -53,7 +53,7 @@ function binDiscrete(data) {
   };
 }
 function getContinuousLabel(code, binEdges) {
-  return "[ ".concat((0, _string.prettyNumerical)(binEdges[code][0]), ", ").concat((0, _string.prettyNumerical)(binEdges[code][1])).concat(code === binEdges.length - 1 ? " ]" : " )");
+  return `[ ${(0, _string.prettyNumerical)(binEdges[code][0])}, ${(0, _string.prettyNumerical)(binEdges[code][1])}${code === binEdges.length - 1 ? " ]" : " )"}`;
 }
 function CategoricalItem(_ref) {
   let {
@@ -88,7 +88,7 @@ function CategoricalItem(_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "pl-1 m-0",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-            title: "".concat((0, _string.prettyNumerical)(pct), "%"),
+            title: `${(0, _string.prettyNumerical)(pct)}%`,
             placement: "left",
             arrow: true,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -128,9 +128,9 @@ function CategoricalItem(_ref) {
               y: "0",
               width: "10",
               height: "10",
-              fill: "rgb(".concat(getColor((code - min) / (max - min), true, isOmitted, {
+              fill: `rgb(${getColor((code - min) / (max - min), true, isOmitted, {
                 alpha: 1
-              }, "obs"), ")")
+              }, "obs")})`
             })
           })
         })]
@@ -155,8 +155,7 @@ function CategoricalObs(_ref2) {
   const min = _lodash.default.min(_lodash.default.values(obs.codes));
   const max = _lodash.default.max(_lodash.default.values(obs.codes));
   (0, _react.useEffect)(() => {
-    var _dataset$selectedObs;
-    if (((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name) === obs.name) {
+    if (dataset.selectedObs?.name === obs.name) {
       const selectedObsData = _lodash.default.omit(dataset.selectedObs, ["omit"]);
       const obsData = _lodash.default.omit(obs, ["omit"]);
       if (!_lodash.default.isEqual(selectedObsData, obsData)) {
@@ -281,9 +280,9 @@ function ObsContinuousStats(_ref3) {
           },
           xAxis: {
             data: fetchedData.kde_values[0],
-            valueFormatter: v => "".concat((0, _string.prettyNumerical)(v))
+            valueFormatter: v => `${(0, _string.prettyNumerical)(v)}`
           },
-          valueFormatter: v => "".concat((0, _string.prettyNumerical)(v)),
+          valueFormatter: v => `${(0, _string.prettyNumerical)(v)}`,
           slotProps: {
             popper: {
               className: "feature-histogram-tooltip"
@@ -334,8 +333,7 @@ function ContinuousObs(_ref4) {
     }
   }, [binnedObs, fetchedData, isPending, obs, serverError, updateObs]);
   (0, _react.useEffect)(() => {
-    var _dataset$selectedObs2;
-    if (updatedObs && ((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name) === obs.name) {
+    if (updatedObs && dataset.selectedObs?.name === obs.name) {
       const selectedObsData = _lodash.default.omit(dataset.selectedObs, ["omit"]);
       const obsData = _lodash.default.omit(obs, ["omit"]);
       if (!_lodash.default.isEqual(selectedObsData, obsData)) {
@@ -352,9 +350,9 @@ function ContinuousObs(_ref4) {
       }
     }
   }, [dataset.selectedObs, dispatch, obs, obs.name, updateObs, updatedObs]);
-  const totalCounts = _lodash.default.sum(_lodash.default.values(obs === null || obs === void 0 ? void 0 : obs.value_counts));
-  const min = _lodash.default.min(_lodash.default.values(obs === null || obs === void 0 ? void 0 : obs.codes));
-  const max = _lodash.default.max(_lodash.default.values(obs === null || obs === void 0 ? void 0 : obs.codes));
+  const totalCounts = _lodash.default.sum(_lodash.default.values(obs?.value_counts));
+  const min = _lodash.default.min(_lodash.default.values(obs?.codes));
+  const max = _lodash.default.max(_lodash.default.values(obs?.codes));
   const getDataAtIndex = index => {
     return {
       value: obs.values[index],

package/dist/components/obs-list/ObsList.js

@@ -17,7 +17,6 @@ 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; }
 function ObsColsList(_ref) {
-  var _dataset$selectedObs;
   let {
     showColor = true
   } = _ref;
@@ -25,7 +24,7 @@ function ObsColsList(_ref) {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [obsCols, setObsCols] = (0, _react.useState)(null);
-  const [active, setActive] = (0, _react.useState)((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name);
+  const [active, setActive] = (0, _react.useState)(dataset.selectedObs?.name);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
@@ -59,10 +58,8 @@ function ObsColsList(_ref) {
   // @TODO: fix re-rendering performance issue
   (0, _react.useEffect)(() => {
     if (obsCols) {
-      var _dataset$selectedObs2;
-      if (obsCols[(_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name]) {
-        var _dataset$selectedObs3;
-        setActive((_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.name);
+      if (obsCols[dataset.selectedObs?.name]) {
+        setActive(dataset.selectedObs?.name);
       } else {
         setActive(null);
       }

package/dist/components/obs-list/ObsToolbar.js

@@ -14,7 +14,6 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ObsToolbar(_ref) {
-  var _dataset$selectedObs, _dataset$selectedObs2;
   let {
     item,
     showToggleAllObs = true,
@@ -29,8 +28,8 @@ function ObsToolbar(_ref) {
   const dataset = (0, _DatasetContext.useDataset)();
   const allToggledOn = !item.omit.length;
   const inLabelObs = _lodash.default.some(dataset.labelObs, i => i.name === item.name);
-  const inSliceObs = dataset.sliceBy.obs && ((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name) === item.name;
-  const isColorEncoding = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name) === item.name;
+  const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
+  const isColorEncoding = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "d-flex",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/components/obsm-list/ObsmList.js

@@ -48,7 +48,7 @@ function ObsmKeysList() {
   }, [dataset.selectedObsm]);
   const obsmList = obsmKeysList.map(item => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-      className: "custom ".concat(active === item && "active"),
+      className: `custom ${active === item && "active"}`,
       onClick: () => {
         dispatch({
           type: "select.obsm",

package/dist/components/{Offcanvas → offcanvas}/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OffcanvasControls = OffcanvasControls;
-exports.OffcanvasInfo = OffcanvasInfo;
 exports.OffcanvasObs = OffcanvasObs;
 exports.OffcanvasObsm = OffcanvasObsm;
 exports.OffcanvasVars = OffcanvasVars;
@@ -100,22 +99,4 @@ function OffcanvasControls(_ref4) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Controls, {})
     })]
   });
-}
-function OffcanvasInfo(_ref5) {
-  let {
-    show,
-    handleClose
-  } = _ref5;
-  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: "Info"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      children: "Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc."
-    })]
-  });
 }

package/dist/components/scatterplot/Legend.js

@@ -34,14 +34,13 @@ function Legend(_ref) {
     });
   }, [getColor, isCategorical]);
   if (dataset.colorEncoding && !isCategorical) {
-    var _dataset$selectedVar, _dataset$selectedObs;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "cherita-legend",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "gradient",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           className: "small m-0 p-0",
-          children: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? (_dataset$selectedVar = dataset.selectedVar) === null || _dataset$selectedVar === void 0 ? void 0 : _dataset$selectedVar.name : (_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name
+          children: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar?.name : dataset.selectedObs?.name
         }), spanList, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-min",
           children: (0, _string.prettyNumerical)(min)