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

package/dist/components/scatterplot/Scatterplot.js

@@ -14,7 +14,6 @@ var _layers2 = require("@nebula.gl/layers");
 var _turf = require("@turf/turf");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _Legend = require("./Legend");
 var _SpatialControls = require("./SpatialControls");
 var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
@@ -22,9 +21,10 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
 var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
-var _zarrHelper = require("../../helpers/zarr-helper");
+var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _string = require("../../utils/string");
+var _zarrData = require("../../utils/zarrData");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -39,14 +39,6 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 const EPSILON = 1e-6;
-const meanData = (_i, data) => {
-  return _lodash.default.zipWith(...data, function () {
-    for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
-      values[_key] = arguments[_key];
-    }
-    return _lodash.default.mean(values);
-  });
-};
 function Scatterplot(_ref) {
   let {
     radius = 30
@@ -74,83 +66,10 @@ function Scatterplot(_ref) {
     features: []
   });
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = (0, _react.useState)([]);
-  const [obsmParams, setObsmParams] = (0, _react.useState)({
-    url: dataset.url,
-    path: "obsm/" + dataset.selectedObsm
-  });
-  const [xParams, setXParams] = (0, _react.useState)(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
-    url: dataset.url,
-    path: "X",
-    s: [null, dataset.selectedVar?.matrix_index]
-  }] : _lodash.default.map(dataset.selectedVar?.vars, v => {
-    return {
-      url: dataset.url,
-      path: "X",
-      s: [null, v.matrix_index]
-    };
-  }));
-  const [obsParams, setObsParams] = (0, _react.useState)({
-    url: dataset.url,
-    path: "obs/" + dataset.selectedObs?.name + (dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
-  });
-  const [labelObsParams, setLabelObsParams] = (0, _react.useState)([]);
-  const obsmData = (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
-  const xData = (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, meanData);
-  const obsData = (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
-  const labelObsData = (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS);
-  (0, _react.useEffect)(() => {
-    setObsmParams(p => {
-      return {
-        ...p,
-        path: "obsm/" + dataset.selectedObsm
-      };
-    });
-  }, [dataset.selectedObsm]);
-  (0, _react.useEffect)(() => {
-    setXParams(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
-      url: dataset.url,
-      path: "X",
-      s: [null, dataset.selectedVar?.matrix_index]
-    }] : _lodash.default.map(dataset.selectedVar?.vars, v => {
-      return {
-        url: dataset.url,
-        path: "X",
-        s: [null, v.matrix_index]
-      };
-    }));
-  }, [dataset.selectedVar, dataset.url]);
-  (0, _react.useEffect)(() => {
-    setObsParams(p => {
-      return {
-        ...p,
-        path: "obs/" + dataset.selectedObs?.name + (dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
-      };
-    });
-  }, [dataset.selectedObs]);
-  (0, _react.useEffect)(() => {
-    setLabelObsParams(_lodash.default.map(dataset.labelObs, obs => {
-      return {
-        url: dataset.url,
-        path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
-        key: obs.name
-      };
-    }));
-  }, [dataset.labelObs, dataset.url]);
-  (0, _react.useEffect)(() => {
-    setObsmParams(p => {
-      return {
-        ...p,
-        url: dataset.url
-      };
-    });
-    setObsParams(p => {
-      return {
-        ...p,
-        url: dataset.url
-      };
-    });
-  }, [dataset.url]);
-
+  const obsmData = (0, _zarrData.useObsmData)();
+  const xData = (0, _zarrData.useXData)();
+  const obsData = (0, _zarrData.useObsData)();
+  const labelObsData = (0, _zarrData.useLabelObsData)();
   // @TODO: assert length of obsmData, xData, obsData is equal
 
   (0, _react.useEffect)(() => {
@@ -299,6 +218,8 @@ function Scatterplot(_ref) {
     }
     return inSlice;
   }, [dataset.colorEncoding, dataset.selectedObs?.bins?.binEdges, dataset.selectedObs?.omit, dataset.selectedObs?.type, dataset.sliceBy.obs, dataset.sliceBy.polygons, features.features, isCategorical]);
+
+  // @TODO: abstract filtering out of this component, maybe in FilterContext ?
   const {
     filteredIndices,
     valueMin,
@@ -379,8 +300,21 @@ function Scatterplot(_ref) {
       index
     } = _ref2;
     const grayOut = filteredIndices && !filteredIndices.has(index);
-    return getColor((data.values[index] - min) / (max - min), isCategorical, grayOut);
+    return getColor({
+      value: (data.values[index] - min) / (max - min),
+      categorical: isCategorical,
+      grayOut: grayOut
+    });
   }, [data.values, filteredIndices, getColor, isCategorical, max, min]);
+
+  // @TODO: add support for pseudospatial hover to reflect in radius
+  const getRadius = (0, _react.useCallback)((_d, _ref3) => {
+    let {
+      index
+    } = _ref3;
+    const grayOut = filteredIndices && !filteredIndices.has(index);
+    return grayOut ? 1 : 3;
+  }, [filteredIndices]);
   const memoizedLayers = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
       id: "cherita-layer-scatterplot",
@@ -390,21 +324,22 @@ function Scatterplot(_ref) {
       radiusMinPixels: 1,
       getPosition: d => d,
       getFillColor: getFillColor,
-      getRadius: 1,
+      getRadius: getRadius,
       updateTriggers: {
-        getFillColor: getFillColor
+        getFillColor: getFillColor,
+        getRadius: getRadius
       }
     }), new _layers2.EditableGeoJsonLayer({
       id: "cherita-layer-draw",
       data: features,
       mode: mode,
       selectedFeatureIndexes,
-      onEdit: _ref3 => {
+      onEdit: _ref4 => {
         let {
           updatedData,
           editType,
           editContext
-        } = _ref3;
+        } = _ref4;
         setFeatures(updatedData);
         let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
         if (editType === "addFeature") {
@@ -428,7 +363,7 @@ function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, mode, radius, selectedFeatureIndexes]);
+  }, [data.positions, features, getFillColor, getRadius, mode, radius, selectedFeatureIndexes]);
   const layers = (0, _react.useDeferredValue)(mode === _editModes.ViewMode ? memoizedLayers.reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
 
   (0, _react.useEffect)(() => {
@@ -453,11 +388,11 @@ function Scatterplot(_ref) {
       return `${o.name}: ${o.codesMap[v]}`;
     }
   };
-  const getTooltip = _ref4 => {
+  const getTooltip = _ref5 => {
     let {
       object,
       index
-    } = _ref4;
+    } = _ref5;
     if (!object) return;
     const text = [];
     if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs && !_lodash.default.some(dataset.labelObs, {
@@ -475,70 +410,82 @@ function Scatterplot(_ref) {
       }));
     }
     if (!text.length) return;
+    const grayOut = filteredIndices && !filteredIndices.has(index);
     return {
-      text: text.length ? _lodash.default.compact(text).join("\n") : null
+      text: text.length ? _lodash.default.compact(text).join("\n") : null,
+      className: grayOut ? "tooltip-grayout" : "deck-tooltip",
+      style: !grayOut ? {
+        "border-left": `3px solid ${(0, _colorHelper.rgbToHex)(getFillColor(null, {
+          index
+        }))}`
+      } : {
+        "border-left": "none"
+      }
     };
   };
   const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
   const error = dataset.selectedObsm && obsmData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && xData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && obsData.serverError?.length || dataset.labelObs.lengh && labelObsData.serverError?.length;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "cherita-scatterplot",
-    children: [obsmData.isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {
-      disableShrink: true
-    }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.DeckGL, {
-      viewState: viewState,
-      onViewStateChange: e => setViewState(e.viewState),
-      controller: {
-        doubleClickZoom: mode === _editModes.ViewMode
-      },
-      layers: layers,
-      onClick: onLayerClick,
-      getTooltip: getTooltip,
-      onAfterRender: () => {
-        setIsRendering(false);
-      },
-      useDevicePixels: false,
-      getCursor: _ref5 => {
-        let {
-          isDragging
-        } = _ref5;
-        return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
-      },
-      ref: deckRef
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
-      mode: mode,
-      setMode: setMode,
-      features: features,
-      setFeatures: setFeatures,
-      selectedFeatureIndexes: selectedFeatureIndexes,
-      resetBounds: () => setViewState(getBounds()),
-      increaseZoom: () => setViewState(v => ({
-        ...v,
-        zoom: v.zoom + 1
-      })),
-      decreaseZoom: () => setViewState(v => ({
-        ...v,
-        zoom: v.zoom - 1
-      }))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "cherita-spatial-footer",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "cherita-toolbox-footer",
-        children: [error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
-          variant: "danger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faTriangleExclamation
-          }), "\xA0Error loading data"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
-          mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
-          obsLength: parseInt(obsmData.data?.length),
-          slicedLength: parseInt(slicedLength)
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "cherita-container-scatterplot",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "cherita-scatterplot",
+      children: [obsmData.isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {
+        disableShrink: true
+      }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.DeckGL, {
+        viewState: viewState,
+        onViewStateChange: e => setViewState(e.viewState),
+        controller: {
+          doubleClickZoom: mode === _editModes.ViewMode
+        },
+        layers: layers,
+        onClick: onLayerClick,
+        getTooltip: getTooltip,
+        onAfterRender: () => {
+          setIsRendering(false);
+        },
+        useDevicePixels: false,
+        getCursor: _ref6 => {
+          let {
+            isDragging
+          } = _ref6;
+          return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
+        },
+        ref: deckRef
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
+        mode: mode,
+        setMode: setMode,
+        features: features,
+        setFeatures: setFeatures,
+        selectedFeatureIndexes: selectedFeatureIndexes,
+        resetBounds: () => setViewState(getBounds()),
+        increaseZoom: () => setViewState(v => ({
+          ...v,
+          zoom: v.zoom + 1
+        })),
+        decreaseZoom: () => setViewState(v => ({
+          ...v,
+          zoom: v.zoom - 1
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "cherita-spatial-footer",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "cherita-toolbox-footer",
+          children: [error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+            variant: "danger",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faTriangleExclamation
+            }), "\xA0Error loading data"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
+            mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
+            obsLength: parseInt(obsmData.data?.length),
+            slicedLength: parseInt(slicedLength)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+          isCategorical: isCategorical,
+          min: min,
+          max: max
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
-        isCategorical: isCategorical,
-        min: min,
-        max: max
       })]
-    })]
+    })
   });
 }

package/dist/components/var-list/VarItem.js

@@ -34,14 +34,14 @@ function VarHistogram(_ref) {
   const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    var_index: item.matrix_index,
-    obs_indices: isSliced && Array.from(filteredData.obsIndices || [])
+    varKey: item.matrix_index,
+    obsIndices: isSliced && Array.from(filteredData.obsIndices || [])
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
         ...p,
-        obs_indices: isSliced && Array.from(filteredData.obsIndices || [])
+        obsIndices: isSliced && Array.from(filteredData.obsIndices || [])
       };
     });
   }, [filteredData.obsIndices, isSliced]);
@@ -88,10 +88,22 @@ function VarHistogram(_ref) {
   });
 }
 function VarDiseaseInfoItem(item) {
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
     className: "feature-disease-info",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      children: [item.disease_name, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: "btn btn-link",
+        onClick: () => {
+          dispatch({
+            type: "select.disease",
+            id: item.disease_id,
+            name: item.disease_name
+          });
+        },
+        children: item.disease_name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
         striped: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
@@ -120,7 +132,7 @@ function VarDiseaseInfoItem(item) {
         })
       })]
     })
-  });
+  }, item.disease_name);
 }
 function VarDiseaseInfo(_ref3) {
   let {
@@ -131,8 +143,8 @@ function VarDiseaseInfo(_ref3) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.VirtualizedList, {
         getDataAtIndex: index => data[index],
         count: data.length,
-        estimateSize: 70,
-        maxHeight: "40vh",
+        estimateSize: 140,
+        maxHeight: "100%",
         ItemComponent: VarDiseaseInfoItem
       })
     })
@@ -207,7 +219,7 @@ function SingleSelectionItem(_ref4) {
     }), hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Collapse, {
       in: openInfo,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "mt-2",
+        className: "mt-2 var-disease-info-collapse",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VarDiseaseInfo, {
           data: fetchedData
         })

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

@@ -9,14 +9,47 @@ var _iconsMaterial = require("@mui/icons-material");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _VarItem = require("./VarItem");
+var _VarListToolbar = require("./VarListToolbar");
 var _VarSet = require("./VarSet");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
+// @TODO: optimize
+const useVarMean = function (varKeys) {
+  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const ENDPOINT = "matrix/mean";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
+      name: v.name,
+      indices: v.vars.map(v => v.index)
+    } : v.index),
+    varNamesCol: dataset.varNamesCol
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return {
+        ...p,
+        varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
+          name: v.name,
+          indices: v.vars.map(v => v.index)
+        } : v.index)
+      };
+    });
+  }, [varKeys]);
+  return (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: enabled
+  });
+};
+
+// @TODO: display where disease data comes from
+// add to disease dataset metadata
 function DiseaseVarList(_ref) {
   let {
     makeListItem
@@ -25,6 +58,7 @@ function DiseaseVarList(_ref) {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [diseaseVars, setDiseaseVars] = (0, _react.useState)([]);
+  const [sortedDiseaseVars, setSortedDiseaseVars] = (0, _react.useState)([]);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     col: dataset.varNamesCol,
@@ -39,25 +73,43 @@ function DiseaseVarList(_ref) {
       };
     });
   }, [dataset.selectedDisease]);
-  const {
-    fetchedData,
-    isPending,
-    serverError
-  } = (0, _requests.useFetch)(ENDPOINT, params, {
+  const diseaseData = (0, _requests.useFetch)(ENDPOINT, params, {
     enabled: !!params.diseaseId
   });
   (0, _react.useEffect)(() => {
-    if (!isPending && !serverError) {
-      setDiseaseVars(fetchedData);
+    if (!diseaseData.isPending && !diseaseData.serverError) {
+      setDiseaseVars(diseaseData.fetchedData);
+    }
+  }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
+  const varMeans = useVarMean(diseaseVars, diseaseVars && dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
+  (0, _react.useEffect)(() => {
+    if (dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError) {
+        setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, o => {
+          return varMeans.fetchedData[o.name];
+        }, dataset.varSort.disease.sortOrder));
+      }
+    } else if (dataset.varSort.disease.sort === _constants.VAR_SORT.NAME) {
+      setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, "name", dataset.varSort.disease.sortOrder));
+    } else {
+      setSortedDiseaseVars(diseaseVars);
     }
-  }, [fetchedData, isPending, serverError]);
-  const diseaseVarList = _lodash.default.map(diseaseVars, item => {
+  }, [dataset.varSort.disease.sort, dataset.varSort.disease.sortOrder, diseaseVars, varMeans.fetchedData, varMeans.isPending, varMeans.serverError]);
+  const diseaseVarList = _lodash.default.map(sortedDiseaseVars, item => {
     return makeListItem(item, true);
   });
+  const isPending = diseaseData.isPending || varMeans.isPending && dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: dataset.selectedDisease && (!diseaseVars.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-      variant: "light",
-      children: "No disease genes found."
+    children: dataset.selectedDisease && (!isPending && !diseaseVars?.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "d-flex justify-content-between mt-3",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+          children: "Disease genes"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "light",
+        children: "No disease genes found."
+      })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "d-flex justify-content-between mt-3",
@@ -74,8 +126,13 @@ function DiseaseVarList(_ref) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: dataset.selectedDisease?.name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-        children: diseaseVarList
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarListToolbar.VarListToolbar, {
+        varType: "disease"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "position-relative",
+        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+          children: diseaseVarList
+        })]
       })]
     }))
   });
@@ -90,6 +147,7 @@ function VarNamesList(_ref2) {
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar ? _lodash.default.unionWith([dataset.selectedVar], dataset.varSets, _lodash.default.isEqual) : [...dataset.varSets] : [...dataset.selectedMultiVar, ...dataset.varSets]);
   const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar?.matrix_index || dataset.selectedVar?.name : dataset.selectedMultiVar.map(i => i.matrix_index || i.name));
+  const [sortedVarButtons, setSortedVarButtons] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
     if (mode === _constants.SELECTION_MODES.SINGLE) {
       setVarButtons(v => {
@@ -139,6 +197,22 @@ function VarNamesList(_ref2) {
       });
     }
   }, [mode, dataset.varSets, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dispatch]);
+  const varMeans = useVarMean(varButtons, dataset.varSort.var.sort === _constants.VAR_SORT.MATRIX);
+
+  // @TODO: deferr sortedVarButtons ?
+  (0, _react.useEffect)(() => {
+    if (dataset.varSort.var.sort === _constants.VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError) {
+        setSortedVarButtons(_lodash.default.orderBy(varButtons, o => {
+          return varMeans.fetchedData[o.name];
+        }, dataset.varSort.var.sortOrder));
+      }
+    } else if (dataset.varSort.var.sort === _constants.VAR_SORT.NAME) {
+      setSortedVarButtons(_lodash.default.orderBy(varButtons, "name", dataset.varSort.var.sortOrder));
+    } else {
+      setSortedVarButtons(varButtons);
+    }
+  }, [dataset.varSort.var.sort, dataset.varSort.var.sortOrder, varButtons, varMeans.isPending, varMeans.serverError, varMeans.fetchedData]);
   const makeListItem = function (item) {
     let isDiseaseGene = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
@@ -160,7 +234,7 @@ function VarNamesList(_ref2) {
       })
     }, set.name);
   };
-  const varList = _lodash.default.map(varButtons, item => {
+  const varList = _lodash.default.map(sortedVarButtons, item => {
     if (item.isSet) {
       return makeSetListItem(item);
     } else {
@@ -179,6 +253,7 @@ function VarNamesList(_ref2) {
     }
     return setName;
   };
+  const isPending = varMeans.isPending && dataset.varSort.var.sort === _constants.VAR_SORT.MATRIX;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "position-relative",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -216,13 +291,22 @@ function VarNamesList(_ref2) {
             children: "clear"
           })]
         })]
-      }), !varList.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "light",
-        children: "Search for a feature."
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-        children: varList
-      }), showDiseaseVarList && /*#__PURE__*/(0, _jsxRuntime.jsx)(DiseaseVarList, {
-        makeListItem: makeListItem
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: !varList.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+          variant: "light",
+          children: "Search for a feature."
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VarListToolbar.VarListToolbar, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "position-relative",
+            children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+              children: varList
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: showDiseaseVarList && /*#__PURE__*/(0, _jsxRuntime.jsx)(DiseaseVarList, {
+          makeListItem: makeListItem
+        })
       })]
     })
   });