@haniffalab/cherita-react 0.2.0-dev.2024-09-26.775b9a06 → 0.2.0-dev.2024-09-26.1ea62883

package/dist/App.scss

@@ -1,6 +1,11 @@
+// Theme CSS
+$accordion-button-active-bg: #e7edf0;
+
 @import "bootstrap/scss/bootstrap";
 
-// Theme CSS
+input[type="checkbox"], .cursor-pointer {
+    cursor: pointer;
+}
 
 .loading-spinner {
     @extend .bg-light;
@@ -78,12 +83,6 @@
     height: 100%;
 }
 
-.cherita-alert {
-    position: absolute;
-    z-index: 10;
-    bottom: 40px;
-    left: 20px;
-}
 .cherita-spatial-controls {
     position: absolute;
     z-index: 10;
@@ -110,6 +109,15 @@
     }
 }
 
+.cherita-toolbox-footer {
+    display: flex;
+    flex-direction: column;
+}
+
+.cherita-toolbox-footer .alert {
+    width: fit-content;
+}
+
 .cherita-toolbox {
     order: 1;
 }
@@ -126,7 +134,7 @@
   }
 
 .cherita-accordion-active .accordion-button {
-    background-color: $accordion-button-active-bg
+    background-color: rgb(204, 227, 237)
 }
 
 .obs-value-list-check {
@@ -187,4 +195,65 @@
 .cm-small {
     height: 15px;
     width: 15px;
+}
+
+.obs-distribution {
+    width: 100%;
+    height: 4rem;
+}
+
+.obs-continuous-stats {
+    font-weight: lighter;
+    margin: 0;
+}
+
+.value-count-badge {
+    color: black !important;
+    background-color: rgb(222, 222, 222) !important;
+}
+
+.value-pct-gauge-container {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0.2rem;
+}
+
+.feature-histogram-container {
+    height: 1.25rem;
+    width: 5rem;
+    display: flex;
+    align-items: center;
+}
+
+.feature-histogram {
+    @extend .feature-histogram-container;
+    background-color: rgb(222, 222, 222);
+}
+
+.feature-histogram-tooltip .MuiChartsTooltip-markCell,.MuiChartsTooltip-labelCell {
+    display: none;
+}
+
+.feature-histogram-tooltip .MuiChartsTooltip-valueCell {
+    padding: 0.5rem !important;
+}
+
+.feature-histogram-tooltip .MuiChartsTooltip-valueCell > p {
+    font-size: 0.85rem !important;
+}
+
+.feature-histogram-tooltip td > p {
+    font-size: 0.85rem !important;
+}
+
+.feature-disease-info {
+    font-weight: lighter;
+    border-top: 1px solid var(list-group-border-color);
+    border-right: 0;
+    border-left: 0;
+    border-bottom: 0;
+}
+
+.feature-disease-info table {
+    margin: 0;
 }

package/dist/components/Offcanvas/index.js

@@ -20,7 +20,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function OffcanvasObs(_ref) {
   let {
     show,
-    handleClose
+    handleClose,
+    ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
     show: show,
@@ -33,7 +34,10 @@ function OffcanvasObs(_ref) {
         children: "Categories"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsList.ObsColsList, {})
+      className: "p-0",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsList.ObsColsList, {
+        ...props
+      })
     })]
   });
 }

package/dist/components/dotplot/Dotplot.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Dotplot = Dotplot;
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
@@ -15,6 +16,7 @@ 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)();
@@ -24,8 +26,15 @@ function Dotplot() {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    selectedObs: dataset.selectedObs,
-    selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+    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];
+    }),
+    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+      name: i.name,
+      indices: i.vars.map(v => v.index)
+    } : i.index),
     standardScale: dataset.controls.standardScale,
     meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
     expressionCutoff: dataset.controls.expressionCutoff,
@@ -40,11 +49,19 @@ function Dotplot() {
       setHasSelections(false);
     }
     setParams(p => {
+      var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
       return {
         ...p,
         url: dataset.url,
-        selectedObs: dataset.selectedObs,
-        selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+        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];
+        }),
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
         standardScale: dataset.controls.standardScale,
         meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
         expressionCutoff: dataset.controls.expressionCutoff,
@@ -68,7 +85,7 @@ function Dotplot() {
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: !!params.selectedObs && !!params.selectedMultiVar.length
+    enabled: !!params.obsCol && !!params.varKeys.length
   });
   (0, _react.useEffect)(() => {
     if (hasSelections && !isPending && !serverError) {

package/dist/components/dotplot/DotplotControls.js

@@ -19,7 +19,6 @@ function DotplotControls() {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [controls, setControls] = (0, _react.useState)({
-    standardScale: dataset.controls.standardScale,
     expressionCutoff: dataset.controls.expressionCutoff,
     colorAxis: {
       cmin: dataset.controls.colorAxis.cmin,
@@ -32,9 +31,10 @@ function DotplotControls() {
       colorAxis: {
         cmin: dataset.controls.colorAxis.cmin,
         cmax: dataset.controls.colorAxis.cmax
-      }
+      },
+      expressionCutoff: dataset.controls.expressionCutoff
     }));
-  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
+  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax, dataset.controls.expressionCutoff]);
   const colorScaleList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
     active: dataset.controls.colorScale === key,
     onClick: () => {
@@ -45,16 +45,17 @@ function DotplotControls() {
     },
     children: key
   }, key));
-  const standardScaleList = _constants.DOTPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-    active: dataset.controls.standardScale === item.value,
+  const standardScaleList = _lodash.default.values(_constants.DOTPLOT_SCALES).map(scale => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+    active: dataset.controls.scale.dotplot === scale,
     onClick: () => {
       dispatch({
-        type: "set.controls.standardScale",
-        standardScale: item.value
+        type: "set.controls.scale",
+        plot: "dotplot",
+        scale: scale
       });
     },
-    children: item.name
-  }, item.value));
+    children: scale.name
+  }, scale.value));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
@@ -74,7 +75,7 @@ function DotplotControls() {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
             id: "dropdownStandardScale",
             variant: "light",
-            children: dataset.controls.standardScale
+            children: dataset.controls.scale.dotplot.name
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
             children: standardScaleList
           })]

package/dist/components/heatmap/Heatmap.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Heatmap = Heatmap;
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
@@ -15,6 +16,7 @@ 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);
@@ -23,8 +25,15 @@ function Heatmap() {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    selectedObs: dataset.selectedObs,
-    selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+    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];
+    }),
+    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+      name: i.name,
+      indices: i.vars.map(v => v.index)
+    } : i.index),
     varNamesCol: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {
@@ -34,11 +43,19 @@ function Heatmap() {
       setHasSelections(false);
     }
     setParams(p => {
+      var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
       return {
         ...p,
         url: dataset.url,
-        selectedObs: dataset.selectedObs,
-        selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+        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];
+        }),
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
         varNamesCol: dataset.varNamesCol
       };
     });
@@ -59,7 +76,7 @@ function Heatmap() {
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: !!params.selectedObs && !!params.selectedMultiVar.length
+    enabled: !!params.obsCol && !!params.varKeys.length
   });
   (0, _react.useEffect)(() => {
     if (hasSelections && !isPending && !serverError) {

package/dist/components/matrixplot/Matrixplot.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Matrixplot = Matrixplot;
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
@@ -15,6 +16,7 @@ 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);
@@ -23,8 +25,15 @@ function Matrixplot() {
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    selectedObs: dataset.selectedObs,
-    selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+    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];
+    }),
+    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+      name: i.name,
+      indices: i.vars.map(v => v.index)
+    } : i.index),
     standardScale: dataset.controls.standardScale,
     varNamesCol: dataset.varNamesCol
   });
@@ -35,11 +44,19 @@ function Matrixplot() {
       setHasSelections(false);
     }
     setParams(p => {
+      var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
       return {
         ...p,
         url: dataset.url,
-        selectedObs: dataset.selectedObs,
-        selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
+        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];
+        }),
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
         standardScale: dataset.controls.standardScale,
         varNamesCol: dataset.varNamesCol
       };
@@ -61,7 +78,7 @@ function Matrixplot() {
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: !!params.selectedObs && !!params.selectedMultiVar.length
+    enabled: !!params.obsCol && !!params.varKeys.length
   });
   (0, _react.useEffect)(() => {
     if (hasSelections && !isPending && !serverError) {

package/dist/components/matrixplot/MatrixplotControls.js

@@ -25,16 +25,17 @@ function MatrixplotControls() {
     },
     children: key
   }, key));
-  const standardScaleList = _constants.MATRIXPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-    active: dataset.controls.standardScale === item.name,
+  const standardScaleList = _lodash.default.values(_constants.MATRIXPLOT_SCALES).map(scale => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.controls.scale.matrixplot.name === scale.name,
     onClick: () => {
       dispatch({
-        type: "set.controls.standardScale",
-        standardScale: item.value
+        type: "set.controls.scale",
+        plot: "matrixplot",
+        scale: scale
       });
     },
-    children: item.name
-  }, item.value));
+    children: scale.name
+  }, scale.value));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
@@ -54,7 +55,7 @@ function MatrixplotControls() {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
             id: "dropdownStandardScale",
             variant: "light",
-            children: dataset.controls.standardScale
+            children: dataset.controls.scale.matrixplot.name
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
             children: standardScaleList
           })]