@haniffalab/cherita-react 1.3.0 → 1.3.1-dev.2025-10-29.def77f5f

package/dist/esm/components/var-list/VarList.js

@@ -3,31 +3,37 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { useEffect, useState } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { Alert, Button, ListGroup } from "react-bootstrap";
-import ButtonGroup from "react-bootstrap/ButtonGroup";
-import { VarItem } from "./VarItem";
-import { VarListToolbar } from "./VarListToolbar";
-import { VarSet } from "./VarSet";
-import { SELECTION_MODES, VAR_SORT } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { LoadingSpinner } from "../../utils/LoadingIndicators";
-import { useFetch } from "../../utils/requests";
-const useVarMean = function (varKeys) {
+import { useEffect, useState } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { Alert, Button, ListGroup } from 'react-bootstrap';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import { VarItem } from './VarItem';
+import { VarListToolbar } from './VarListToolbar';
+import { VarSet } from './VarSet';
+import { SELECTION_MODES, VAR_SORT } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { LoadingSpinner } from '../../utils/LoadingIndicators';
+import { useFetch } from '../../utils/requests';
+import { useSelectedMultiVar, useSelectedVar, useSettingsVars } from '../../utils/Resolver';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const useVarMean = function (varKeys) {
   let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const ENDPOINT = "matrix/mean";
+  const ENDPOINT = 'matrix/mean';
   const dataset = useDataset();
+  const {
+    obsIndices
+  } = useFilteredData();
   const [params, setParams] = useState({
     url: dataset.url,
     varKeys: _.map(varKeys, v => v.isSet ? {
       name: v.name,
-      indices: v.vars.map(v => v.index)
+      indices: v.vars.map(vv => vv.index)
     } : v.index),
-    // obsIndices:
+    obsIndices: obsIndices,
     varNamesCol: dataset.varNamesCol
   });
   useEffect(() => {
@@ -35,11 +41,12 @@ const useVarMean = function (varKeys) {
       return _objectSpread(_objectSpread({}, p), {}, {
         varKeys: _.map(varKeys, v => v.isSet ? {
           name: v.name,
-          indices: v.vars.map(v => v.index)
-        } : v.index)
+          indices: v.vars.map(vv => vv.index)
+        } : v.index),
+        obsIndices: obsIndices
       });
     });
-  }, [varKeys]);
+  }, [obsIndices, varKeys]);
   return useFetch(ENDPOINT, params, {
     enabled: enabled,
     refetchOnMount: false
@@ -47,63 +54,64 @@ const useVarMean = function (varKeys) {
 };
 
 // ensure nulls are lowest values
-const sortMeans = (i, means) => {
+export const sortMeans = (i, means) => {
   return means[i.name] || _.min(_.values(means)) - 1;
 };
 export function VarNamesList(_ref) {
-  var _settings$selectedVar, _settings$selectedVar2;
   let {
     mode = SELECTION_MODES.SINGLE,
-    displayName = "genes"
+    displayName = 'genes'
   } = _ref;
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
-  const [active, setActive] = useState(mode === SELECTION_MODES.SINGLE ? ((_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.matrix_index) || ((_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.name) : settings.selectedMultiVar.map(i => i.matrix_index || i.name));
+  const selectedVar = useSelectedVar();
+  const selectedMultiVar = useSelectedMultiVar();
+  const settingsVars = useSettingsVars();
+  const [active, setActive] = useState(mode === SELECTION_MODES.SINGLE ? (selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.matrix_index) || (selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name) : selectedMultiVar.map(i => i.matrix_index || i.name));
   const [sortedVars, setSortedVars] = useState([]);
   useEffect(() => {
     if (mode === SELECTION_MODES.SINGLE) {
-      var _settings$selectedVar3, _settings$selectedVar4;
-      setActive(((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.matrix_index) || ((_settings$selectedVar4 = settings.selectedVar) === null || _settings$selectedVar4 === void 0 ? void 0 : _settings$selectedVar4.name));
+      setActive((selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.matrix_index) || (selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name));
     }
-  }, [mode, settings.selectedVar]);
+  }, [mode, selectedVar]);
   useEffect(() => {
     if (mode === SELECTION_MODES.MULTIPLE) {
-      setActive(settings.selectedMultiVar.map(i => i.matrix_index || i.name));
+      setActive(selectedMultiVar.map(i => i.matrix_index || i.name));
     }
-  }, [mode, settings.selectedMultiVar]);
-  const varMeans = useVarMean(settings.vars, settings.varSort.var.sort === VAR_SORT.MATRIX);
+  }, [mode, selectedMultiVar]);
+  const varMeans = useVarMean(settingsVars, settings.varSort.var.sort === VAR_SORT.MATRIX);
 
   // @TODO: deferr sortedVars ?
   useEffect(() => {
     if (settings.varSort.var.sort === VAR_SORT.MATRIX) {
       if (!varMeans.isPending && !varMeans.serverError && varMeans.fetchedData) {
-        setSortedVars(_.orderBy(settings.vars, o => {
+        setSortedVars(_.orderBy(settingsVars, o => {
           return sortMeans(o, varMeans.fetchedData);
         }, settings.varSort.var.sortOrder));
       }
     } else if (settings.varSort.var.sort === VAR_SORT.NAME) {
-      setSortedVars(_.orderBy(settings.vars, "name", settings.varSort.var.sortOrder));
+      setSortedVars(_.orderBy(settingsVars, 'name', settings.varSort.var.sortOrder));
     } else {
-      setSortedVars(settings.vars);
+      setSortedVars(settingsVars);
     }
-  }, [settings.varSort.var.sort, settings.varSort.var.sortOrder, varMeans.isPending, varMeans.serverError, varMeans.fetchedData, settings.vars]);
+  }, [settings.varSort.var.sort, settings.varSort.var.sortOrder, varMeans.isPending, varMeans.serverError, varMeans.fetchedData, settingsVars]);
   const makeListItem = item => {
-    return /*#__PURE__*/React.createElement(ListGroup.Item, {
-      key: item.matrix_index
-    }, /*#__PURE__*/React.createElement(VarItem, {
-      item: item,
-      active: active,
-      mode: mode
-    }));
+    return /*#__PURE__*/_jsx(ListGroup.Item, {
+      children: /*#__PURE__*/_jsx(VarItem, {
+        item: item,
+        active: active,
+        mode: mode
+      })
+    }, item.matrix_index);
   };
   const makeSetListItem = set => {
-    return /*#__PURE__*/React.createElement(ListGroup.Item, {
-      key: set.name
-    }, /*#__PURE__*/React.createElement(VarSet, {
-      set: set,
-      active: active,
-      mode: mode
-    }));
+    return /*#__PURE__*/_jsx(ListGroup.Item, {
+      children: /*#__PURE__*/_jsx(VarSet, {
+        set: set,
+        active: active,
+        mode: mode
+      })
+    }, set.name);
   };
   const varList = _.map(sortedVars, item => {
     if (item.isSet) {
@@ -125,43 +133,55 @@ export function VarNamesList(_ref) {
     return setName;
   };
   const isPending = varMeans.isPending && settings.varSort.var.sort === VAR_SORT.MATRIX;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "position-relative"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "overflow-auto mt-3"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between mb-2"
-  }, /*#__PURE__*/React.createElement("h5", null, _.capitalize(displayName)), /*#__PURE__*/React.createElement(ButtonGroup, {
-    "aria-label": "Feature options",
-    size: "sm"
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "info",
-    onClick: () => {
-      dispatch({
-        type: "add.var",
-        var: {
-          name: newSetName(),
-          vars: [],
-          isSet: true
-        }
-      });
-    }
-  }, "New set"), /*#__PURE__*/React.createElement(Button, {
-    variant: "info",
-    onClick: () => {
-      dispatch({
-        type: "reset.vars"
-      });
-    }
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTimes,
-    className: "me-1"
-  }), "Clear"))), /*#__PURE__*/React.createElement(React.Fragment, null, !varList.length ? /*#__PURE__*/React.createElement(Alert, {
-    variant: "light"
-  }, "Search for a feature.") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VarListToolbar, null), /*#__PURE__*/React.createElement("div", {
-    className: "position-relative"
-  }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(ListGroup, {
-    variant: "flush",
-    className: "cherita-list"
-  }, varList))))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "mt-3 d-flex flex-column h-100",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "d-flex justify-content-between mb-2",
+      children: [/*#__PURE__*/_jsx("h5", {
+        children: _.capitalize(displayName)
+      }), /*#__PURE__*/_jsxs(ButtonGroup, {
+        "aria-label": "Feature options",
+        size: "sm",
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "info",
+          onClick: () => {
+            dispatch({
+              type: 'add.var',
+              var: {
+                name: newSetName(),
+                vars: [],
+                isSet: true
+              }
+            });
+          },
+          children: "New set"
+        }), /*#__PURE__*/_jsxs(Button, {
+          variant: "info",
+          onClick: () => {
+            dispatch({
+              type: 'reset.vars'
+            });
+          },
+          children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faTimes,
+            className: "me-1"
+          }), "Clear"]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(_Fragment, {
+      children: !varList.length ? /*#__PURE__*/_jsx(Alert, {
+        variant: "light",
+        children: "Search for a feature."
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(VarListToolbar, {}), /*#__PURE__*/_jsxs("div", {
+          className: "overflow-auto flex-grow-1 modern-scrollbars",
+          children: [isPending && /*#__PURE__*/_jsx(LoadingSpinner, {}), /*#__PURE__*/_jsx(ListGroup, {
+            variant: "flush",
+            className: "cherita-list",
+            children: varList
+          })]
+        })]
+      })
+    })]
+  });
 }

package/dist/esm/components/var-list/VarListToolbar.js

@@ -1,14 +1,15 @@
-import React, { useState } from "react";
-import { faArrowDown19, faArrowDownAZ, faArrowUp91, faArrowUpZA, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";
-import { VAR_SORT, VAR_SORT_ORDER } from "../../constants/constants";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
+import { useState } from 'react';
+import { faArrowDown19, faArrowDownAZ, faArrowUp91, faArrowUpZA, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
+import { VAR_SORT, VAR_SORT_ORDER } from '../../constants/constants';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
 
 // @TODO: set option for "var" and "disease"
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function VarListToolbar(_ref) {
   let {
-    varType = "var"
+    varType = 'var'
   } = _ref;
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
@@ -19,7 +20,7 @@ export function VarListToolbar(_ref) {
     if (sort !== sortValue) {
       setSort(sortValue);
       dispatch({
-        type: "set.varSort",
+        type: 'set.varSort',
         var: varType,
         sort: sortValue,
         sortOrder: sortOrder
@@ -28,60 +29,65 @@ export function VarListToolbar(_ref) {
       const newSortOrder = sortOrder === VAR_SORT_ORDER.ASC ? VAR_SORT_ORDER.DESC : VAR_SORT_ORDER.ASC;
       setSortOrder(newSortOrder);
       dispatch({
-        type: "set.varSort",
+        type: 'set.varSort',
         var: varType,
         sort: sortValue,
         sortOrder: newSortOrder
       });
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-end align-items-center mb-2"
-  }, /*#__PURE__*/React.createElement(ToggleButtonGroup, {
-    name: "sortfeatures",
-    "aria-label": "Sort features by",
-    size: "sm",
-    type: "radio"
-  }, /*#__PURE__*/React.createElement(ToggleButton, {
-    id: VAR_SORT.NAME,
-    value: VAR_SORT.NAME,
-    "aria-label": "alphabetical",
-    title: "Sort alphabetically",
-    selected: sort === VAR_SORT.NAME,
-    onChange: () => {
-      handleSort(VAR_SORT.NAME, nameSortOrder, setNameSortOrder);
-    }
-  }, nameSortOrder === VAR_SORT_ORDER.ASC ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faArrowDownAZ
-  }) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faArrowUpZA
-  })), /*#__PURE__*/React.createElement(ToggleButton, {
-    id: VAR_SORT.MATRIX,
-    value: VAR_SORT.MATRIX,
-    "aria-label": "matrix value",
-    title: "Sort by matrix value",
-    selected: sort === VAR_SORT.MATRIX,
-    onChange: () => {
-      handleSort(VAR_SORT.MATRIX, matrixSortOrder, setMatrixSortOrder);
-    }
-  }, matrixSortOrder === VAR_SORT_ORDER.ASC ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faArrowDown19
-  }) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faArrowUp91
-  })), /*#__PURE__*/React.createElement(ToggleButton, {
-    id: "none",
-    value: "none",
-    "aria-label": "none",
-    title: "No sorting",
-    onClick: () => {
-      setSort(VAR_SORT.NONE);
-      dispatch({
-        type: "set.varSort.sort",
-        var: varType,
-        sort: VAR_SORT.NONE
-      });
-    }
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faXmark
-  }))));
+  return /*#__PURE__*/_jsx("div", {
+    className: "d-flex justify-content-end align-items-center mb-2",
+    children: /*#__PURE__*/_jsxs(ToggleButtonGroup, {
+      name: "sortfeatures",
+      "aria-label": "Sort features by",
+      size: "sm",
+      type: "radio",
+      children: [/*#__PURE__*/_jsx(ToggleButton, {
+        id: VAR_SORT.NAME,
+        value: VAR_SORT.NAME,
+        "aria-label": "alphabetical",
+        title: "Sort alphabetically",
+        selected: sort === VAR_SORT.NAME,
+        onChange: () => {
+          handleSort(VAR_SORT.NAME, nameSortOrder, setNameSortOrder);
+        },
+        children: nameSortOrder === VAR_SORT_ORDER.ASC ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faArrowDownAZ
+        }) : /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faArrowUpZA
+        })
+      }), /*#__PURE__*/_jsx(ToggleButton, {
+        id: VAR_SORT.MATRIX,
+        value: VAR_SORT.MATRIX,
+        "aria-label": "matrix value",
+        title: "Sort by matrix value",
+        selected: sort === VAR_SORT.MATRIX,
+        onChange: () => {
+          handleSort(VAR_SORT.MATRIX, matrixSortOrder, setMatrixSortOrder);
+        },
+        children: matrixSortOrder === VAR_SORT_ORDER.ASC ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faArrowDown19
+        }) : /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faArrowUp91
+        })
+      }), /*#__PURE__*/_jsx(ToggleButton, {
+        id: "none",
+        value: "none",
+        "aria-label": "none",
+        title: "No sorting",
+        onClick: () => {
+          setSort(VAR_SORT.NONE);
+          dispatch({
+            type: 'set.varSort.sort',
+            var: varType,
+            sort: VAR_SORT.NONE
+          });
+        },
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faXmark
+        })
+      })]
+    })
+  });
 }