@haniffalab/cherita-react 0.2.0-dev.2024-12-16.ab9c5057 → 0.2.0-dev.2024-12-16.67617f27

package/dist/utils/Histogram.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Histogram = Histogram;
+var _react = _interopRequireDefault(require("react"));
+var _xCharts = require("@mui/x-charts");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _LoadingIndicators = require("./LoadingIndicators");
+var _string = require("./string");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Histogram(_ref) {
+  let {
+    data,
+    isPending,
+    altColor = false
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "feature-histogram-container",
+    children: isPending ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}) : data ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "feature-histogram m-1",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.SparkLineChart, {
+        plotType: "bar",
+        data: data.log10,
+        margin: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        colors: altColor ? _xCharts.mangoFusionPalette : _xCharts.blueberryTwilightPalette,
+        showHighlight: true,
+        showTooltip: true,
+        valueFormatter: (v, _ref2) => {
+          let {
+            dataIndex
+          } = _ref2;
+          return `${(0, _string.formatNumerical)(data.hist[dataIndex])}`;
+        },
+        xAxis: {
+          data: _lodash.default.range(data.bin_edges?.length) || null,
+          valueFormatter: v => `Bin [${(0, _string.formatNumerical)(data.bin_edges[v][0], _string.FORMATS.EXPONENTIAL)}, ${(0, _string.formatNumerical)(data.bin_edges[v][1], _string.FORMATS.EXPONENTIAL)}${v === data.bin_edges.length - 1 ? "]" : ")"}`
+        },
+        slotProps: {
+          popper: {
+            className: "feature-histogram-tooltip"
+          }
+        }
+      })
+    }) : null
+  });
+}

package/dist/utils/ImageViewer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageViewer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrap = require("react-bootstrap");
+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; }
+const ImageViewer = _ref => {
+  let {
+    src,
+    alt,
+    className = "img-fluid"
+  } = _ref;
+  const [error, setError] = (0, _react.useState)(false);
+  const handleError = () => {
+    console.error("Error loading image from src:", src);
+    setError(true);
+  };
+  if (!error) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: src,
+      alt: alt,
+      className: className,
+      loading: "lazy",
+      onError: handleError
+    });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "danger",
+        children: "Failed to load image"
+      })
+    });
+  }
+};
+exports.ImageViewer = ImageViewer;

package/dist/{components/scatterplot → utils}/Legend.js

@@ -6,17 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.Legend = Legend;
 var _react = require("react");
 var _lodash = _interopRequireDefault(require("lodash"));
-var _constants = require("../../constants/constants");
-var _DatasetContext = require("../../context/DatasetContext");
-var _colorHelper = require("../../helpers/color-helper");
-var _string = require("../../utils/string");
+var _string = require("./string");
+var _constants = require("../constants/constants");
+var _DatasetContext = require("../context/DatasetContext");
+var _colorHelper = require("../helpers/color-helper");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Legend(_ref) {
   let {
     isCategorical = false,
     min = 0,
-    max = 1
+    max = 1,
+    colorscale = null
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const {
@@ -24,7 +25,11 @@ function Legend(_ref) {
   } = (0, _colorHelper.useColor)();
   const spanList = (0, _react.useMemo)(() => {
     return _lodash.default.range(100).map(i => {
-      var color = (0, _colorHelper.rgbToHex)(getColor(i / 100, isCategorical));
+      var color = (0, _colorHelper.rgbToHex)(getColor({
+        value: i / 100,
+        categorical: isCategorical,
+        colorscale: colorscale
+      }));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "grad-step",
         style: {
@@ -32,7 +37,7 @@ function Legend(_ref) {
         }
       }, i);
     });
-  }, [getColor, isCategorical]);
+  }, [colorscale, getColor, isCategorical]);
   if (dataset.colorEncoding && !isCategorical) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "cherita-legend",

package/dist/utils/VirtualizedList.js

@@ -14,7 +14,7 @@ function VirtualizedList(_ref) {
     getDataAtIndex,
     count,
     ItemComponent,
-    estimateSize = 44,
+    estimateSize = 45,
     overscan = 25,
     maxHeight = "80vh",
     ...props
@@ -32,7 +32,7 @@ function VirtualizedList(_ref) {
   const virtualItems = itemVirtualizer.getVirtualItems();
   (0, _react.useEffect)(() => {
     itemVirtualizer.measure();
-  }, [itemVirtualizer, parentNode?.clientHeight]);
+  }, [itemVirtualizer, parentNode?.clientHeight, getDataAtIndex]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: refCallback,
     style: {

package/dist/utils/requests.js

@@ -42,7 +42,10 @@ async function fetchData(endpoint, params) {
   return await response.json();
 }
 const useFetch = function (endpoint, params) {
-  let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    refetchOnMount: false,
+    refetchOnWindowFocus: false
+  };
   let apiUrl = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   const {
     enabled = true
@@ -74,7 +77,10 @@ const useFetch = function (endpoint, params) {
 exports.useFetch = useFetch;
 const useDebouncedFetch = function (endpoint, params) {
   let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 500;
-  let opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  let opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
+    refetchOnMount: false,
+    refetchOnWindowFocus: false
+  };
   let apiUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
   const {
     enabled = true

package/dist/utils/search.js

@@ -16,7 +16,8 @@ const useDiseaseSearch = () => {
     text: ""
   });
   const data = (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: !!params.text.length
+    enabled: !!params.text.length,
+    refetchOnMount: true
   });
   return {
     params,
@@ -34,7 +35,8 @@ const useVarSearch = () => {
     text: ""
   });
   const data = (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: !!params.text.length
+    enabled: !!params.text.length,
+    refetchOnMount: true
   });
   return {
     params,

package/dist/utils/string.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FORMATS = void 0;
 exports.formatNumerical = formatNumerical;
+exports.formatString = formatString;
 var _numbro = _interopRequireDefault(require("numbro"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FORMATS = exports.FORMATS = {
@@ -39,10 +40,10 @@ function formatAbbreviation(n) {
 function formatNumerical(n) {
   let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FORMATS.THOUSAND;
   let precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3;
-  if (isNaN(n)) {
-    return "NaN";
-  } else if (n === 0) {
+  if (n === 0) {
     return "0";
+  } else if (!n || n === undefined || isNaN(n)) {
+    return "NaN";
   }
   switch (format) {
     case FORMATS.EXPONENTIAL:
@@ -61,4 +62,7 @@ function formatNumerical(n) {
     default:
       return formatThousand(n, precision);
   }
+}
+function formatString(s) {
+  return s.trim().replace(/_/g, " ");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-12-16.ab9c5057",
+  "version": "0.2.0-dev.2024-12-16.67617f27",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -101,5 +101,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "ab9c5057639276863637b6dd046ba3dcbc3b6804"
+  "prereleaseSha": "67617f278b24035c633eed30a5b4d0136e3f77bb"
 }

package/scss/cherita.scss

@@ -128,6 +128,10 @@
   background-color: #cce3ed;
 }
 
+.obs-item {
+  box-sizing: border-box;
+}
+
 .obs-value-list-check {
   padding-right: 1rem;
   word-break: auto-phrase;
@@ -268,6 +272,7 @@
   @extend .col-xxl-6;
 
   position: relative;
+  max-height: 100%;
 }
 
 .cherita-app-obs {
@@ -308,3 +313,42 @@
 .caret-off .dropdown-toggle::after {
   display: none;
 }
+
+.cherita-pseudospatial {
+  width: 100%;
+}
+
+.cherita-pseudospatial-plot {
+  width: 100%;
+  height: 100%;
+}
+
+.cherita-pseudospatial-toolbar {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Add a bottom border to the last item in the Accordion */
+.accordion-flush .accordion-item:last-child {
+  border-bottom: 1px solid #dee2e6; /* Adjust the color and width as needed */
+}
+
+.var-disease-info-collapse {
+  max-height: 40vh;
+  overflow-y: auto;
+}
+
+.cherita-scatterplot #deckgl-wrapper {
+  z-index: 1 !important;
+}
+
+.tooltip-grayout {
+  color: #a0a7b4 !important;
+  background-color: #3a424b !important;
+  opacity: 0.8;
+  z-index: 100 !important;
+}
+
+.deck-tooltip {
+  z-index: 100 !important;
+}

package/dist/App.scss

@@ -1,270 +0,0 @@
-// Theme CSS
-$accordion-button-active-bg: #e7edf0;
-
-@import "bootstrap/scss/bootstrap";
-
-input[type="checkbox"], .cursor-pointer {
-    cursor: pointer;
-}
-
-.loading-spinner {
-    @extend .bg-light;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    z-index: 1;
-    opacity: 75%;
-    position: absolute;
-    justify-content: center;
-    align-items: center;
-}
-
-.cherita-container {
-    margin: 40px auto;
-    background-color: #fff;
-    border-radius: 0.25rem;
-    box-shadow: 0 0.5em 1em 0.3em rgba(10, 10, 10, .15), 0 0 0 1px rgba(10, 10, 10, .02);
-    color: #4a4a4a;
-    max-width: 100%;
-    position: relative;
-    overflow: hidden;
-}
-
-.cherita-navbar {
-    @extend .mx-1;
-    @extend .my-2;
-    position: absolute;
-    z-index: 11;
-    top: 0;
-    left: 0;
-    right: 0;
-    border-radius: 0.25rem;
-}
-
-.cherita-container .cherita-navbar-item>.dropdown-menu {
-    height: var(--dropdown-height);
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-
-/* Scrollbar styling */
-
-/* Works on Firefox */
-.cherita-container * {
-    scrollbar-width: thin;
-    scrollbar-color: rgb(70, 70, 70) auto;
-}
-
-/* Works on Chrome, Edge, and Safari */
-.cherita-container *::-webkit-scrollbar {
-    width: 7px;
-}
-
-.cherita-container *::-webkit-scrollbar-track {
-    background: #212529;
-}
-
-.cherita-container *::-webkit-scrollbar-thumb {
-    background-color: rgb(70, 70, 70);
-}
-
-/* End scrollbar styling*/
-
-.cherita-container-plot {
-    margin-top: 76px;
-    padding: 20px;
-    position: relative;
-    min-height: 500px;
-}
-
-.cherita-container-scatterplot {
-    position: relative;
-    min-height: 500px;
-    height: 100%;
-}
-
-.cherita-spatial-controls {
-    position: absolute;
-    z-index: 10;
-    top: 1rem;
-    left: 1rem;
-    width: 3rem;
-}
-
-.cherita-spatial-footer {
-    position: absolute;
-    z-index: 10;
-    bottom: 1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    flex-wrap: wrap;
-    width: 100%;
-    padding-left: 2rem;
-    padding-right: 2rem;
-    padding-bottom: 1rem;
-    pointer-events: none;
-    > * { 
-        pointer-events: auto;
-    }
-}
-
-.cherita-toolbox-footer {
-    display: flex;
-    flex-direction: column;
-}
-
-.cherita-toolbox-footer .alert {
-    width: fit-content;
-}
-
-.cherita-toolbox {
-    order: 1;
-}
-
-.cherita-legend {
-    order: 2;
-    width: 12rem;
-}
-
-@include media-breakpoint-down(xl) {
-    .cherita-spatial-controls {
-        top: 100px;
-    }
-  }
-
-.cherita-accordion-active .accordion-button {
-    background-color: rgb(204, 227, 237)
-}
-
-.obs-value-list-check {
-    padding-right: 1rem;
-    word-break: auto-phrase;
-    overflow-wrap: anywhere;
-}
-
-.grad-step {
-    display: inline-block;
-    height: 20px;
-    width: 1%;
-}
-.gradient {
-    width: 100%;
-    white-space: nowrap;
-    position: relative;
-    display: inline-block;
-    top: 4px;
-    padding-bottom: 15px;
-}
-
-.gradient .domain-min {
-    position: absolute;
-    left: 0;
-    font-size: 11px;
-    bottom: 3px;
-}
-.gradient .domain-med {
-    position: absolute;
-    right: 25%;
-    left: 25%;
-    text-align: center;
-    font-size: 11px;
-    bottom: 3px;
-}
-.gradient .domain-max {
-    position: absolute;
-    right: 0;
-    font-size: 11px;
-    bottom: 3px;
-}
-
-.cm-string {
-    padding: 0px 4px;
-    display: inline-block;
-    min-width: 13px;
-    min-height: 13px;
-    border-radius: 3px;
-    box-sizing: border-box;
-    position: relative;
-    vertical-align: middle;
-    margin-left: 2px;
-    margin-bottom: 2px;
-    position: relative;
-    top: 1px;
-}
-.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;
-}
-
-.var-list-toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 3rem;
-}
-
-.var-list-toolbar .svg-inline--fa {
-    height: 1.2rem;
-}