@haniffalab/cherita-react 1.3.0 → 1.3.1-dev.2025-10-29.6de4119f

package/dist/cjs/utils/zarrData.js

@@ -7,6 +7,7 @@ exports.useXData = exports.useObsmData = exports.useObsData = exports.useLabelOb
 var _react = require("react");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _zarr = require("zarr");
+var _Resolver = require("./Resolver");
 var _constants = require("../constants/constants");
 var _DatasetContext = require("../context/DatasetContext");
 var _SettingsContext = require("../context/SettingsContext");
@@ -20,7 +21,7 @@ const useObsmData = function () {
   obsm = obsm || settings.selectedObsm;
   const obsmParams = (0, _react.useMemo)(() => ({
     url: dataset.url,
-    path: "obsm/" + obsm,
+    path: 'obsm/' + obsm,
     s: [null, (0, _zarr.slice)(null, 2)] // load only [:, :2]
   }), [dataset.url, obsm]);
   return (0, _zarrHelper.useZarr)(obsmParams, _zarrHelper.GET_OPTIONS, {
@@ -39,21 +40,18 @@ const meanData = (_i, data) => {
 const useXData = function () {
   let agg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : meanData;
   const dataset = (0, _DatasetContext.useDataset)();
-  const settings = (0, _SettingsContext.useSettings)();
-  const xParams = (0, _react.useMemo)(() => {
-    var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3;
-    return !settings.selectedVar ? [] : !((_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet) ? [{
+  const selectedVar = (0, _Resolver.useSelectedVar)();
+  const xParams = (0, _react.useMemo)(() => !selectedVar ? [] : !(selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet) ? [{
+    url: dataset.url,
+    path: 'X',
+    s: [null, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.matrix_index]
+  }] : _lodash.default.map(selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, v => {
+    return {
       url: dataset.url,
-      path: "X",
-      s: [null, (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.matrix_index]
-    }] : _lodash.default.map((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars, v => {
-      return {
-        url: dataset.url,
-        path: "X",
-        s: [null, v.matrix_index]
-      };
-    });
-  }, [dataset.url, settings.selectedVar]);
+      path: 'X',
+      s: [null, v.matrix_index]
+    };
+  }), [dataset.url, selectedVar]);
   return (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, {
     enabled: !!xParams.length
   }, agg);
@@ -63,13 +61,13 @@ const useObsData = function () {
   var _obs3, _obs4;
   let obs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   const dataset = (0, _DatasetContext.useDataset)();
-  const settings = (0, _SettingsContext.useSettings)();
-  obs = obs || settings.selectedObs;
+  const selectedObs = (0, _Resolver.useSelectedObs)();
+  obs = obs || selectedObs;
   const obsParams = (0, _react.useMemo)(() => {
     var _obs, _obs2;
     return {
       url: dataset.url,
-      path: "obs/" + ((_obs = obs) === null || _obs === void 0 ? void 0 : _obs.name) + (((_obs2 = obs) === null || _obs2 === void 0 ? void 0 : _obs2.type) === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
+      path: 'obs/' + ((_obs = obs) === null || _obs === void 0 ? void 0 : _obs.name) + (((_obs2 = obs) === null || _obs2 === void 0 ? void 0 : _obs2.type) === _constants.OBS_TYPES.CATEGORICAL ? '/codes' : '')
     };
   }, [dataset.url, (_obs3 = obs) === null || _obs3 === void 0 ? void 0 : _obs3.name, (_obs4 = obs) === null || _obs4 === void 0 ? void 0 : _obs4.type]);
   return (0, _zarrHelper.useZarr)(obsParams, _zarrHelper.GET_OPTIONS, {
@@ -80,13 +78,14 @@ exports.useObsData = useObsData;
 const useLabelObsData = () => {
   const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
-  const labelObsParams = (0, _react.useMemo)(() => _lodash.default.map(settings.labelObs, obs => {
+  const labelObsParams = (0, _react.useMemo)(() => _lodash.default.map(settings.labelObs, obsName => {
+    const obs = settings.data.obs[obsName] || null;
     return {
       url: dataset.url,
-      path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
+      path: 'obs/' + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? '/codes' : ''),
       key: obs.name
     };
-  }), [dataset.url, settings.labelObs]);
+  }), [dataset.url, settings.data.obs, settings.labelObs]);
   return (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS, {
     enabled: !!labelObsParams.length
   });

package/dist/css/cherita.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Bootstrap  v5.3.6 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.8 (https://getbootstrap.com/)
  * Copyright 2011-2025 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
@@ -545,6 +545,10 @@ legend + * {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
+[type=search]::-webkit-search-cancel-button {
+  cursor: pointer;
+  filter: grayscale(1);
+}
 
 /* rtl:raw:
 [type="tel"],
@@ -6141,6 +6145,7 @@ textarea.form-control-lg {
 .spinner-grow,
 .spinner-border {
   display: inline-block;
+  flex-shrink: 0;
   width: var(--bs-spinner-width);
   height: var(--bs-spinner-height);
   vertical-align: var(--bs-spinner-vertical-align);
@@ -7216,7 +7221,7 @@ textarea.form-control-lg {
   display: inline-block !important;
 }
 
-.d-block, .cherita-app .cherita-navbar {
+.d-block, .cherita-app .cherita-navbar, .cherita-app-container .cherita-app-canvas .cherita-navbar {
   display: block !important;
 }
 
@@ -7240,7 +7245,7 @@ textarea.form-control-lg {
   display: table-cell !important;
 }
 
-.d-flex {
+.d-flex, .obs-accordion-header .obs-accordion-header-span .accordion-header-toolbar {
   display: flex !important;
 }
 
@@ -7646,7 +7651,7 @@ textarea.form-control-lg {
   flex-wrap: wrap !important;
 }
 
-.flex-nowrap {
+.flex-nowrap, .obs-accordion-header .obs-accordion-header-span .accordion-header-toolbar {
   flex-wrap: nowrap !important;
 }
 
@@ -7778,7 +7783,7 @@ textarea.form-control-lg {
   order: 6 !important;
 }
 
-.m-0 {
+.m-0, .cherita-app-container .cherita-app-canvas .cherita-navbar {
   margin: 0 !important;
 }
 
@@ -7811,7 +7816,7 @@ textarea.form-control-lg {
   margin-left: 0 !important;
 }
 
-.mx-1 {
+.mx-1, .js-plotly-plot .plotly .modebar .modebar-group {
   margin-right: 0.25rem !important;
   margin-left: 0.25rem !important;
 }
@@ -7908,7 +7913,7 @@ textarea.form-control-lg {
   margin-right: 0 !important;
 }
 
-.me-1 {
+.me-1, .obs-accordion-header .obs-accordion-header-span .accordion-header-title {
   margin-right: 0.25rem !important;
 }
 
@@ -7928,7 +7933,7 @@ textarea.form-control-lg {
   margin-right: 3rem !important;
 }
 
-.me-auto {
+.me-auto, .var-item-name {
   margin-right: auto !important;
 }
 
@@ -7988,7 +7993,7 @@ textarea.form-control-lg {
   margin-left: auto !important;
 }
 
-.p-0 {
+.p-0, .cherita-app-sidebar .card-body, .cherita-app-container, .cherita-app-container .cherita-app-canvas {
   padding: 0 !important;
 }
 
@@ -8012,7 +8017,7 @@ textarea.form-control-lg {
   padding: 3rem !important;
 }
 
-.px-0 {
+.px-0, .offcanvas-vars .offcanvas-body .sidebar-features {
   padding-right: 0 !important;
   padding-left: 0 !important;
 }
@@ -8076,7 +8081,7 @@ textarea.form-control-lg {
   padding-top: 0 !important;
 }
 
-.pt-1 {
+.pt-1, .offcanvas-vars .offcanvas-body {
   padding-top: 0.25rem !important;
 }
 
@@ -8120,7 +8125,7 @@ textarea.form-control-lg {
   padding-right: 3rem !important;
 }
 
-.pb-0 {
+.pb-0, .offcanvas-vars .offcanvas-header {
   padding-bottom: 0 !important;
 }
 
@@ -8365,7 +8370,7 @@ textarea.form-control-lg {
 }
 
 /* rtl:begin:remove */
-.text-break {
+.text-break, .obs-accordion-header .obs-accordion-header-span .accordion-header-title {
   word-wrap: break-word !important;
   word-break: break-word !important;
 }
@@ -8666,7 +8671,7 @@ textarea.form-control-lg {
   --bs-link-underline-opacity: 1;
 }
 
-.bg-primary {
+.bg-primary, .js-plotly-plot .plotly .modebar .modebar-group {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
 }
@@ -11874,7 +11879,7 @@ textarea.form-control-lg {
   height: 20px;
   margin-right: 10px;
 }
-.obs-accordion-header .obs-accordion-header-title {
+.obs-accordion-header .obs-accordion-header-span {
   font-size: 1rem;
   width: 100%;
   display: flex;
@@ -11890,7 +11895,7 @@ textarea.form-control-lg {
 }
 
 .list-group.cherita-list .virtualized-list-wrapper {
-  padding: 0 0.25rem 0.25rem 0.25rem;
+  padding: 0 0.25rem 0.25rem;
 }
 .list-group.cherita-list .list-group-item.unstyled {
   background-color: transparent;
@@ -11903,7 +11908,6 @@ textarea.form-control-lg {
   color: var(--bs-body-color);
   background-color: var(--bs-tertiary-bg);
   border-radius: var(--bs-border-radius);
-  cursor: pointer;
 }
 .list-group.cherita-list .list-group-item.active {
   background-color: var(--bs-secondary-bg);
@@ -11911,7 +11915,7 @@ textarea.form-control-lg {
 
 .obs-statistics {
   border: 0;
-  margin: 0 0.25rem 0.25rem 0.25rem;
+  margin: 0 0.25rem 0.25rem;
   padding: 0.375rem 0.75rem;
   line-height: 1.5;
   color: var(--bs-body-color);
@@ -11925,10 +11929,16 @@ textarea.form-control-lg {
   padding-left: 0.35rem;
 }
 
-.cherita-app {
-  position: relative;
+.search-results .cherita-list.list-group .list-group-item {
+  cursor: pointer;
 }
 
+.cherita-app {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
 .cherita-app .cherita-navbar {
   position: absolute;
   z-index: 11;
@@ -11937,42 +11947,30 @@ textarea.form-control-lg {
   right: 0;
   border-radius: 0.25rem;
 }
-@media (min-width: 992px) and (max-width: 1199px) {
+@media (width >= 992px) and (width <= 1199px) {
   .cherita-app .cherita-navbar {
-    margin-left: calc(33.33333333% + 1rem) !important;
+    margin-left: calc(33.3333% + 1rem) !important;
   }
 }
 
-.cherita-app-canvas {
-  position: relative;
-}
-
 .cherita-app-obs {
   overflow-y: auto;
 }
 
 .cherita-app-sidebar {
+  height: 100%;
   width: 20%;
   position: relative;
 }
 .cherita-app-sidebar .card {
   width: 100%;
+  height: 100%;
 }
 .cherita-app-sidebar .card-body {
   overflow-y: hidden;
-}
-.cherita-app-sidebar .sidebar-pseudospatial {
-  padding: 10px;
-  border-bottom: 1px solid #dee2e6;
-}
-.cherita-app-sidebar .sidebar-pseudospatial .cherita-legend {
-  margin: 0 auto;
-}
-.cherita-app-sidebar .sidebar-features {
-  padding: 10px;
-  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
   height: 100%;
-  overflow-y: auto;
 }
 .cherita-app-sidebar .accordion-header-wrapper {
   cursor: pointer;
@@ -11986,7 +11984,7 @@ textarea.form-control-lg {
   align-items: center;
   width: 100%;
 }
-.cherita-app-sidebar .accordion-header-wrapper:after {
+.cherita-app-sidebar .accordion-header-wrapper::after {
   content: "";
   flex-shrink: 0;
   width: var(--geeks-accordion-btn-icon-width);
@@ -12001,53 +11999,126 @@ textarea.form-control-lg {
   color: var(--geeks-accordion-active-color);
   background-color: var(--geeks-accordion-active-bg);
 }
-.cherita-app-sidebar .accordion-header-wrapper:not(.collapsed):after {
+.cherita-app-sidebar .accordion-header-wrapper:not(.collapsed)::after {
   background-image: var(--geeks-accordion-btn-active-icon);
   transform: var(--geeks-accordion-btn-icon-transform);
 }
 
+.sidebar-pseudospatial {
+  padding: 10px;
+  border-bottom: 1px solid #dee2e6;
+}
+.sidebar-pseudospatial .cherita-legend {
+  margin: 0 auto;
+}
+
+.sidebar-features {
+  padding: 10px;
+  margin-bottom: 10px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+}
+.sidebar-features .sidebar-features-list {
+  position: relative;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.offcanvas-vars .offcanvas-body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 .search-modal-info {
   overflow-y: auto;
   border-left: 1px solid #dee2e6;
 }
 
-.ps-xs-1 {
-  padding-left: 0.15rem !important;
+.cherita-app-canvas {
+  position: relative;
+}
+.cherita-app-canvas .cherita-plot {
+  position: relative;
+  height: 100%;
+  min-height: 400px;
+}
+
+.cherita-app-container {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+}
+.cherita-app-container .cherita-app-obs {
+  flex: 0 0 auto;
+  min-width: 350px;
+  max-width: 20%;
+  overflow-y: auto;
+}
+.cherita-app-container .cherita-app-canvas {
+  flex: 1 1 auto;
+  min-width: 375px;
+  position: relative;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.cherita-app-container .cherita-app-canvas .cherita-navbar {
+  position: relative;
+}
+.cherita-app-container .cherita-app-sidebar {
+  flex: 0 0 auto;
+  min-width: 350px;
+  max-width: 20%;
+  position: relative;
+}
+@media (width <= 1400px) {
+  .cherita-app-container .cherita-app-obs,
+  .cherita-app-container .cherita-app-sidebar {
+    max-width: 25%;
+  }
 }
 
 .js-plotly-plot .plotly .modebar {
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, 0.6);
-  padding: 0 4px !important;
+  top: 16px;
+  right: 0;
 }
 .js-plotly-plot .plotly .modebar .modebar-group {
-  margin: 0 !important;
-  padding: 0 !important;
-  background-color: transparent !important;
+  border-radius: 5px;
+  padding: 4px !important;
 }
 .js-plotly-plot .plotly .modebar .modebar-group .modebar-btn {
-  fill: white !important; /* Ensures white icons */
-  color: white !important; /* Ensures text/icons are visible */
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
-  font-size: 16px;
-  padding: 4px;
+  font-size: 1.25rem;
+  padding: 0.25rem;
   height: auto;
   cursor: pointer;
   line-height: normal;
 }
 .js-plotly-plot .plotly .modebar .modebar-group .modebar-btn svg {
   position: relative;
-  top: auto;
-  bottom: auto;
-  left: auto;
-  right: auto;
+  top: 1px;
+}
+.js-plotly-plot .plotly .modebar .modebar-group .modebar-btn svg path {
+  fill: white !important;
+  color: white !important;
+}
+.js-plotly-plot .plotly .modebar--hover > :not(.watermark) {
+  opacity: 1;
+  transition: opacity 0.3s;
 }
 
 .cherita-spatial-controls {
   position: absolute;
-  z-index: 10;
   top: 1rem;
   left: 1rem;
+  z-index: 10;
   width: 3rem;
 }
 .cherita-spatial-controls .btn {
@@ -12055,6 +12126,15 @@ textarea.form-control-lg {
   padding-right: 0;
 }
 
+.plotselector {
+  padding: 0 10px;
+  border-bottom: 1px solid #dee2e6;
+}
+.plotselector .plotselector-icon {
+  padding: 6px;
+  cursor: pointer;
+}
+
 .modern-scrollbars::-webkit-scrollbar {
   width: 20px;
 }
@@ -12085,6 +12165,10 @@ textarea.form-control-lg {
   align-items: center;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .cherita-container {
   margin: 40px auto;
   background-color: #fff;
@@ -12118,7 +12202,6 @@ textarea.form-control-lg {
 
 /* End scrollbar styling */
 .cherita-container-plot {
-  margin-top: 76px;
   padding: 20px;
   position: relative;
   min-height: 400px;
@@ -12184,7 +12267,7 @@ textarea.form-control-lg {
   display: inline-block;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .cherita-spatial-footer {
     flex-direction: column;
     align-items: center;
@@ -12210,6 +12293,12 @@ textarea.form-control-lg {
   word-break: auto-phrase;
   overflow-wrap: anywhere;
 }
+.obs-value-list-check .form-check-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
 
 .grad-step {
   display: inline-block;
@@ -12279,13 +12368,13 @@ textarea.form-control-lg {
 }
 
 .value-count-badge {
-  color: #000000 !important;
+  color: #000 !important;
   background-color: #dedede !important;
   font-weight: lighter;
 }
 
 .filtered-value-count-badge {
-  color: #ffffff !important;
+  color: #fff !important;
   font-weight: normal;
 }
 
@@ -12316,23 +12405,26 @@ textarea.form-control-lg {
   background-color: #dedede;
 }
 
+.feature-histogram-tooltip td > p {
+  font-size: 0.85rem !important;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
 .feature-histogram-tooltip .MuiChartsTooltip-markCell,
 .MuiChartsTooltip-labelCell {
   display: none;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .feature-histogram-tooltip .MuiChartsTooltip-valueCell {
   padding: 0.5rem !important;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .feature-histogram-tooltip .MuiChartsTooltip-valueCell > p {
   font-size: 0.85rem !important;
 }
 
-.feature-histogram-tooltip td > p {
-  font-size: 0.85rem !important;
-}
-
 .feature-disease-info-list {
   max-height: 300px;
   overflow-y: auto;
@@ -12383,6 +12475,7 @@ textarea.form-control-lg {
 
 .cherita-pseudospatial {
   width: 100%;
+  position: relative;
 }
 
 .cherita-pseudospatial-plot {
@@ -12444,4 +12537,34 @@ textarea.form-control-lg {
   text-overflow: ellipsis;
 }
 
+.var-item-name {
+  padding-right: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+input[type=checkbox] {
+  cursor: pointer;
+}
+
+.ps-xs-1 {
+  padding-left: 0.15rem !important;
+}
+
+.resampled-tooltip-container {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 10;
+  width: max-content;
+}
+@media (width >= 991px) {
+  .resampled-tooltip-container {
+    top: 16px;
+    left: 16px;
+    bottom: auto;
+  }
+}
+
 /*# sourceMappingURL=cherita.css.map */