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

package/dist/utils/Filter.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFilter = void 0;
+var _react = require("react");
+var _turf = require("@turf/turf");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _constants = require("../constants/constants");
+var _DatasetContext = require("../context/DatasetContext");
+var _FilterContext = require("../context/FilterContext");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const EPSILON = 1e-6;
+
+// @TODO: polish hook
+const useFilter = (data, features) => {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const filterDataDispatch = (0, _FilterContext.useFilteredDataDispatch)();
+  const isInBins = (v, binEdges, indices) => {
+    const lastEdge = _lodash.default.last(binEdges);
+    const allButLastEdges = _lodash.default.initial(binEdges);
+    // add epsilon to last edge to include the last value
+    const modifiedBinEdges = [...allButLastEdges, [lastEdge[0], lastEdge[1] + EPSILON]];
+    const binIndices = _lodash.default.difference(_lodash.default.range(binEdges.length), indices);
+    const ranges = _lodash.default.at(modifiedBinEdges, binIndices);
+    return _lodash.default.some(ranges, range => _lodash.default.inRange(v, ...range));
+  };
+  const isCategorical = (0, _react.useMemo)(() => {
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+      return dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN;
+    } else {
+      return false;
+    }
+  }, [dataset.colorEncoding, dataset.selectedObs?.type]);
+  const isInSlice = (0, _react.useCallback)((index, values, positions) => {
+    let inSlice = true;
+    if (isCategorical && values) {
+      inSlice &= !_lodash.default.includes(dataset.selectedObs?.omit, values[index]);
+    } else if ((dataset.sliceBy.obs || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS) && !!dataset.selectedObs?.omit.length && values) {
+      if (dataset.selectedObs.type === _constants.OBS_TYPES.CATEGORICAL) {
+        inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, values[index]);
+      } else if (dataset.selectedObs.type === _constants.OBS_TYPES.CONTINUOUS) {
+        if (isNaN(values[index])) {
+          inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, -1);
+        } else {
+          inSlice &= isInBins(values[index], dataset.selectedObs.bins.binEdges, _lodash.default.without(dataset.selectedObs.omit, -1));
+        }
+      }
+    }
+    if (dataset.sliceBy.polygons && positions) {
+      inSlice &= _lodash.default.some(features?.features, (_f, i) => {
+        return (0, _turf.booleanPointInPolygon)((0, _turf.point)([positions[index][0], positions[index][1]]), features.features[i]);
+      });
+    }
+    return inSlice;
+  }, [dataset.colorEncoding, dataset.selectedObs?.bins?.binEdges, dataset.selectedObs?.omit, dataset.selectedObs?.type, dataset.sliceBy.obs, dataset.sliceBy.polygons, features?.features, isCategorical]);
+  const {
+    filteredIndices,
+    valueMin,
+    valueMax,
+    slicedLength
+  } = (0, _react.useMemo)(() => {
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
+      const {
+        filtered,
+        filteredIndices
+      } = _lodash.default.reduce(data.values, (acc, v, i) => {
+        if (isInSlice(i, data.sliceValues, data.positions)) {
+          acc.filtered.push(v);
+          acc.filteredIndices.add(i);
+        }
+        return acc;
+      }, {
+        filtered: [],
+        filteredIndices: new Set()
+      });
+      return {
+        filteredIndices: filteredIndices,
+        valueMin: _lodash.default.min(filtered),
+        valueMax: _lodash.default.max(filtered),
+        slicedLength: filtered.length
+      };
+    } else if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+      const isContinuous = dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS;
+      const {
+        filtered,
+        filteredIndices
+      } = _lodash.default.reduce(data.values, (acc, v, i) => {
+        if (isInSlice(i, data.values, data.positions)) {
+          acc.filtered.push(v);
+          acc.filteredIndices.add(i);
+        }
+        return acc;
+      }, {
+        filtered: [],
+        filteredIndices: new Set()
+      });
+      return {
+        filteredIndices: filteredIndices,
+        valueMin: _lodash.default.min(isContinuous ? filtered : data.values),
+        valueMax: _lodash.default.max(isContinuous ? filtered : data.values),
+        slicedLength: filtered.length
+      };
+    } else {
+      return {
+        filteredIndices: null,
+        valueMin: _lodash.default.min(data.values),
+        valueMax: _lodash.default.max(data.values),
+        slicedLength: data.values.length
+      };
+    }
+  }, [data.positions, data.sliceValues, data.values, dataset.colorEncoding, dataset.selectedObs?.type, isInSlice]);
+
+  // @TODO: consider moving dispatch outside of hook, only return values
+  (0, _react.useEffect)(() => {
+    filterDataDispatch({
+      type: "set.obs.indices",
+      indices: dataset.sliceBy.obs || dataset.sliceBy.polygons ? filteredIndices : null
+    });
+  }, [dataset.sliceBy.obs, dataset.sliceBy.polygons, filterDataDispatch, filteredIndices]);
+  return {
+    filteredIndices,
+    valueMin,
+    valueMax,
+    slicedLength
+  };
+};
+exports.useFilter = useFilter;

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/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 = {
@@ -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.f02cfae4",
+  "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": "f02cfae47749a5aeba88d12aefa8cee0367f9ddc"
+  "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 {