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

package/dist/esm/utils/zarrData.js

@@ -1,10 +1,11 @@
-import { useMemo } from "react";
-import _ from "lodash";
-import { slice } from "zarr";
-import { OBS_TYPES } from "../constants/constants";
-import { useDataset } from "../context/DatasetContext";
-import { useSettings } from "../context/SettingsContext";
-import { GET_OPTIONS, useZarr, useMultipleZarr } from "../helpers/zarr-helper";
+import { useMemo } from 'react';
+import _ from 'lodash';
+import { slice } from 'zarr';
+import { useSelectedObs, useSelectedVar } from './Resolver';
+import { OBS_TYPES } from '../constants/constants';
+import { useDataset } from '../context/DatasetContext';
+import { useSettings } from '../context/SettingsContext';
+import { GET_OPTIONS, useZarr, useMultipleZarr } from '../helpers/zarr-helper';
 
 // @TODO: support specifying slice to load from context
 export const useObsmData = function () {
@@ -14,7 +15,7 @@ export const useObsmData = function () {
   obsm = obsm || settings.selectedObsm;
   const obsmParams = useMemo(() => ({
     url: dataset.url,
-    path: "obsm/" + obsm,
+    path: 'obsm/' + obsm,
     s: [null, slice(null, 2)] // load only [:, :2]
   }), [dataset.url, obsm]);
   return useZarr(obsmParams, GET_OPTIONS, {
@@ -32,21 +33,18 @@ const meanData = (_i, data) => {
 export const useXData = function () {
   let agg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : meanData;
   const dataset = useDataset();
-  const settings = useSettings();
-  const xParams = 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 = useSelectedVar();
+  const xParams = 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]
+  }] : _.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]
-    }] : _.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 useMultipleZarr(xParams, GET_OPTIONS, {
     enabled: !!xParams.length
   }, agg);
@@ -55,13 +53,13 @@ export const useObsData = function () {
   var _obs3, _obs4;
   let obs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   const dataset = useDataset();
-  const settings = useSettings();
-  obs = obs || settings.selectedObs;
+  const selectedObs = useSelectedObs();
+  obs = obs || selectedObs;
   const obsParams = 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) === 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) === 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 useZarr(obsParams, GET_OPTIONS, {
@@ -71,13 +69,14 @@ export const useObsData = function () {
 export const useLabelObsData = () => {
   const dataset = useDataset();
   const settings = useSettings();
-  const labelObsParams = useMemo(() => _.map(settings.labelObs, obs => {
+  const labelObsParams = useMemo(() => _.map(settings.labelObs, obsName => {
+    const obs = settings.data.obs[obsName] || null;
     return {
       url: dataset.url,
-      path: "obs/" + obs.name + (obs.type === OBS_TYPES.CATEGORICAL ? "/codes" : ""),
+      path: 'obs/' + obs.name + (obs.type === OBS_TYPES.CATEGORICAL ? '/codes' : ''),
       key: obs.name
     };
-  }), [dataset.url, settings.labelObs]);
+  }), [dataset.url, settings.data.obs, settings.labelObs]);
   return useMultipleZarr(labelObsParams, GET_OPTIONS, {
     enabled: !!labelObsParams.length
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.3.0",
+  "version": "1.3.1-dev.2025-10-29.6de4119f",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -64,25 +64,37 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.6",
+    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/release-notes-generator": "^14.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "babel-jest": "^29.7.0",
+    "babel-plugin-transform-define": "^2.1.4",
     "cpx": "^1.5.0",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint-config-prettier": "^8.10.2",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-unused-imports": "^4.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "1.77.6",
+    "semantic-release": "^24.2.9",
     "stylelint": "^16.10.0",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-standard-scss": "^13.1.0"
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.3"
   },
   "scripts": {
     "build:esm": "babel src/lib --out-dir dist/esm --copy-files --env-name esm",
@@ -90,8 +102,9 @@
     "build:babel": "npm run build:esm && npm run build:cjs",
     "build:scss": "sass --load-path=node_modules src/scss/cherita-bootstrap.scss dist/css/cherita.css",
     "copy:scss": "cpx 'src/scss/**/*' 'scss'",
-    "build": "npm run build:babel && npm run build:scss && npm run copy:scss",
-    "test": "jest --watchAll",
+    "copy:assets": "cpx 'src/assets/**/*' 'dist/assets'",
+    "build": "npm run build:babel && npm run build:scss && npm run copy:scss && npm run copy:assets",
+    "test": "jest",
     "test:ci": "jest --coverage --ci --no-watch",
     "lint:scss": "stylelint 'src/**/*.scss' --fix",
     "lint:js": "eslint 'src/**/*.js' --fix",
@@ -125,5 +138,6 @@
   "bugs": {
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
-  "homepage": "https://github.com/haniffalab/cherita-react#readme"
-}
+  "homepage": "https://github.com/haniffalab/cherita-react#readme",
+  "prereleaseSha": "6de4119f78f1a4b4e402b157c62c4119daab028f"
+}

package/scss/cherita-bootstrap.scss

@@ -1,2 +1,2 @@
-@use "bootstrap/scss/bootstrap";
-@import "cherita";
+@use 'bootstrap/scss/bootstrap';
+@import 'cherita';

package/scss/cherita.scss

@@ -1,12 +1,12 @@
 // Define $prefix only if it hasn't been set already
-$prefix: "bs-" !default;
+$prefix: 'bs-' !default;
 
-@import "components/accordions";
-@import "components/lists";
-@import "components/layouts";
-@import "components/plotly";
-@import "components/plots";
-@import "components/scrollbars";
+@import 'components/accordions';
+@import 'components/lists';
+@import 'components/layouts';
+@import 'components/plotly';
+@import 'components/plots';
+@import 'components/scrollbars';
 
 .loading-spinner {
   @extend .bg-light;
@@ -21,6 +21,10 @@ $prefix: "bs-" !default;
   align-items: center;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .cherita-container {
   margin: 40px auto;
   background-color: #fff;
@@ -58,7 +62,6 @@ $prefix: "bs-" !default;
 /* End scrollbar styling */
 
 .cherita-container-plot {
-  margin-top: 76px;
   padding: 20px;
   position: relative;
   min-height: 400px;
@@ -116,6 +119,7 @@ $prefix: "bs-" !default;
   white-space: nowrap;
   text-overflow: ellipsis;
   pointer-events: auto;
+
   .legend-text {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -125,7 +129,7 @@ $prefix: "bs-" !default;
   }
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .cherita-spatial-footer {
     flex-direction: column;
     align-items: center;
@@ -152,6 +156,13 @@ $prefix: "bs-" !default;
   padding-right: 1rem;
   word-break: auto-phrase;
   overflow-wrap: anywhere;
+
+  .form-check-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
 }
 
 .grad-step {
@@ -222,13 +233,14 @@ $prefix: "bs-" !default;
 }
 
 .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;
+
   // background-color: $alt-color !important;
   font-weight: normal;
 }
@@ -259,28 +271,32 @@ $gauge-padding: 0.15rem;
 
 .feature-histogram {
   @extend .feature-histogram-container;
-  border-radius: 5px;
 
+  border-radius: 5px;
   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,
+/* stylelint-disable-next-line selector-class-pattern */
 .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;
@@ -344,6 +360,7 @@ $gauge-padding: 0.15rem;
 
 .cherita-pseudospatial {
   width: 100%;
+  position: relative;
 }
 
 .cherita-pseudospatial-plot {
@@ -405,4 +422,35 @@ $gauge-padding: 0.15rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}
+
+.var-item-name {
+  @extend .me-auto;
+
+  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) {
+    top: 16px;
+    left: 16px;
+    bottom: auto;
+  }
+}

package/scss/components/accordions.scss

@@ -19,13 +19,25 @@
     height: 20px;
     margin-right: 10px;
   }
-  .obs-accordion-header-title {
+
+  .obs-accordion-header-span {
     font-size: 1rem;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    .accordion-header-title {
+      @extend .text-break;
+      @extend .me-1;
+    }
+
+    .accordion-header-toolbar {
+      @extend .d-flex;
+      @extend .flex-nowrap;
+    }
   }
+
   .active-icon {
     color: #0c63e4;
   }
@@ -33,5 +45,6 @@
 
 .obs-group-accordion-body {
   @extend .accordion-flush;
+
   padding: 0;
-}
+}

package/scss/components/layouts.scss

@@ -1,8 +1,9 @@
 .cherita-app {
-  position: relative;
-}
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
 
-.cherita-app {
   .cherita-navbar {
     @extend .m-3;
     @extend .d-block;
@@ -14,16 +15,13 @@
     left: 0;
     right: 0;
     border-radius: 0.25rem;
-    @media (min-width: 992px) and (max-width: 1199px) {
-      margin-left: calc(33.33333333% + 1rem) !important;
+
+    @media (width >= 992px) and (width <= 1199px) {
+      margin-left: calc(33.3333% + 1rem) !important;
     }
   }
 }
 
-.cherita-app-canvas {
-  position: relative;
-}
-
 .cherita-app-obs {
   @extend .col;
   @extend .d-none;
@@ -39,31 +37,22 @@
   @extend .d-none;
   @extend .d-xl-flex;
 
+  height: 100%;
   width: 20%;
   position: relative;
 
   .card {
     width: 100%;
+    height: 100%;
   }
 
   .card-body {
-    overflow-y: hidden;
-  }
-
-  .sidebar-pseudospatial {
-    padding: 10px;
-    border-bottom: 1px solid #dee2e6;
-
-    .cherita-legend {
-      margin: 0 auto;
-    }
-  }
+    @extend .p-0;
 
-  .sidebar-features {
-    padding: 10px;
-    margin-bottom: 10px;
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    overflow-y: auto;
   }
 
   .accordion-header-wrapper {
@@ -79,8 +68,8 @@
     align-items: center;
     width: 100%;
 
-    &:after {
-      content: "";
+    &::after {
+      content: '';
       flex-shrink: 0;
       width: var(--geeks-accordion-btn-icon-width);
       height: var(--geeks-accordion-btn-icon-width);
@@ -96,18 +85,115 @@
     color: var(--geeks-accordion-active-color);
     background-color: var(--geeks-accordion-active-bg);
 
-    &:after {
+    &::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;
+
+  .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-list {
+    position: relative;
+    flex-grow: 1;
+    min-height: 0;
+  }
+}
+
+.offcanvas-vars {
+  .offcanvas-header {
+    @extend .pb-0;
+  }
+
+  .offcanvas-body {
+    @extend .pt-1;
+
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .sidebar-features {
+      @extend .px-0;
+    }
+  }
+}
+
 .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-plot {
+    position: relative;
+    height: 100%;
+    min-height: 400px;
+  }
+}
+
+.cherita-app-container {
+  @extend .p-0;
+
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+
+  .cherita-app-obs {
+    flex: 0 0 auto;
+    min-width: 350px;
+    max-width: 20%;
+    overflow-y: auto;
+  }
+
+  .cherita-app-canvas {
+    @extend .p-0;
+
+    flex: 1 1 auto;
+    min-width: 375px;
+    position: relative;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .cherita-navbar {
+      @extend .m-0;
+      @extend .d-block;
+
+      position: relative;
+    }
+  }
+
+  .cherita-app-sidebar {
+    flex: 0 0 auto;
+    min-width: 350px;
+    max-width: 20%;
+    position: relative;
+  }
+
+  @media (width <= 1400px) {
+    .cherita-app-obs,
+    .cherita-app-sidebar {
+      max-width: 25%;
+    }
+  }
+}

package/scss/components/lists.scss

@@ -1,11 +1,13 @@
 .list-group.cherita-list {
   .virtualized-list-wrapper {
-    padding: 0 0.25rem 0.25rem 0.25rem;
+    padding: 0 0.25rem 0.25rem;
   }
+
   .list-group-item.unstyled {
     background-color: transparent;
     padding-left: 1rem;
   }
+
   .list-group-item {
     border: 0;
     padding: 0.375rem 0.75rem;
@@ -13,15 +15,16 @@
     color: var(--#{$prefix}body-color);
     background-color: var(--#{$prefix}tertiary-bg);
     border-radius: var(--#{$prefix}border-radius);
-    cursor: pointer;
   }
+
   .list-group-item.active {
     background-color: var(--#{$prefix}secondary-bg);
   }
 }
+
 .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(--#{$prefix}body-color);
@@ -30,7 +33,15 @@
 }
 
 .cherita-list.var-set-list > .list-group-item {
-  filter: brightness(0.95); // darken background
+  filter: brightness(0.95);
   padding-right: 0;
   padding-left: 0.35rem;
-}
+}
+
+.search-results {
+  .cherita-list.list-group {
+    .list-group-item {
+      cursor: pointer;
+    }
+  }
+}

package/scss/components/plotly.scss

@@ -1,29 +1,46 @@
-.js-plotly-plot .plotly .modebar {
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, 0.6);
-  padding: 0 4px !important;
+// Plotly modebar customisation
+.js-plotly-plot {
+  .plotly {
+    .modebar {
+      top: 16px;
+      right: 0;
 
-  .modebar-group {
-    margin: 0 !important;
-    padding: 0 !important;
-    background-color: transparent !important;
+      // Each button group in the modebar
+      .modebar-group {
+        @extend .bg-primary;
+        @extend .mx-1;
 
-    .modebar-btn {
-      fill: white !important; /* Ensures white icons */
-      color: white !important; /* Ensures text/icons are visible */
-      position: relative;
-      font-size: 16px;
-      padding: 4px;
-      height: auto;
-      cursor: pointer;
-      line-height: normal;
+        border-radius: 5px;
+        padding: 4px !important;
 
-      svg {
-        position: relative;
-        top: auto;
-        bottom: auto;
-        left: auto;
-        right: auto;
+        // Individual buttons
+        .modebar-btn {
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          font-size: 1.25rem;
+          padding: 0.25rem;
+          height: auto;
+          cursor: pointer;
+          line-height: normal;
+
+          svg {
+            position: relative;
+            top: 1px;
+
+            path {
+              fill: white !important;
+              color: white !important;
+            }
+          }
+        }
+      }
+
+      // Hover effect for modebar buttons except watermark
+      &--hover > :not(.watermark) {
+        opacity: 1;
+        transition: opacity 0.3s;
       }
     }
   }