@haniffalab/cherita-react 1.0.0 → 1.1.0

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

@@ -0,0 +1,291 @@
+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 { SELECTION_MODES, VAR_SORT } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { LoadingSpinner } from "../../utils/LoadingIndicators";
+import { useFetch } from "../../utils/requests";
+import { VarItem } from "./VarItem";
+import { VarListToolbar } from "./VarListToolbar";
+import { VarSet } from "./VarSet";
+const useVarMean = function (varKeys) {
+  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const ENDPOINT = "matrix/mean";
+  const dataset = useDataset();
+  const [params, setParams] = useState({
+    url: dataset.url,
+    varKeys: _.map(varKeys, v => v.isSet ? {
+      name: v.name,
+      indices: v.vars.map(v => v.index)
+    } : v.index),
+    // obsIndices:
+    varNamesCol: dataset.varNamesCol
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        varKeys: _.map(varKeys, v => v.isSet ? {
+          name: v.name,
+          indices: v.vars.map(v => v.index)
+        } : v.index)
+      };
+    });
+  }, [varKeys]);
+  return useFetch(ENDPOINT, params, {
+    enabled: enabled,
+    refetchOnMount: false
+  });
+};
+
+// ensure nulls are lowest values
+const sortMeans = (i, means) => {
+  return means[i.name] || _.min(_.values(means)) - 1;
+};
+
+// @TODO: display where disease data comes from
+// add to disease dataset metadata
+function DiseaseVarList(_ref) {
+  let {
+    makeListItem
+  } = _ref;
+  const ENDPOINT = "disease/genes";
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [diseaseVars, setDiseaseVars] = useState([]);
+  const [sortedDiseaseVars, setSortedDiseaseVars] = useState([]);
+  const [params, setParams] = useState({
+    url: dataset.url,
+    col: dataset.varNamesCol,
+    diseaseId: dataset.selectedDisease?.id,
+    diseaseDatasets: dataset.diseaseDatasets
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        diseaseId: dataset.selectedDisease?.id
+      };
+    });
+  }, [dataset.selectedDisease]);
+  const diseaseData = useFetch(ENDPOINT, params, {
+    enabled: !!params.diseaseId,
+    refetchOnMount: false
+  });
+  useEffect(() => {
+    if (!diseaseData.isPending && !diseaseData.serverError) {
+      setDiseaseVars(diseaseData.fetchedData);
+    }
+  }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
+  const varMeans = useVarMean(diseaseVars, !!diseaseVars?.length && dataset.varSort.disease.sort === VAR_SORT.MATRIX);
+  useEffect(() => {
+    if (dataset.varSort.disease.sort === VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError) {
+        setSortedDiseaseVars(_.orderBy(diseaseVars, o => {
+          return sortMeans(o, varMeans.fetchedData);
+        }, dataset.varSort.disease.sortOrder));
+      }
+    } else if (dataset.varSort.disease.sort === VAR_SORT.NAME) {
+      setSortedDiseaseVars(_.orderBy(diseaseVars, "name", dataset.varSort.disease.sortOrder));
+    } else {
+      setSortedDiseaseVars(diseaseVars);
+    }
+  }, [dataset.varSort.disease.sort, dataset.varSort.disease.sortOrder, diseaseVars, varMeans.fetchedData, varMeans.isPending, varMeans.serverError]);
+  const diseaseVarList = _.map(sortedDiseaseVars, item => {
+    return makeListItem(item, true);
+  });
+  const isPending = diseaseData.isPending || varMeans.isPending && dataset.varSort.disease.sort === VAR_SORT.MATRIX;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, dataset.selectedDisease && (!isPending && !diseaseVars?.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between mt-3"
+  }, /*#__PURE__*/React.createElement("h5", null, "Disease genes")), /*#__PURE__*/React.createElement(Alert, {
+    variant: "light"
+  }, "No disease genes found.")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between my-2"
+  }, /*#__PURE__*/React.createElement("h5", null, "Disease genes"), /*#__PURE__*/React.createElement(ButtonGroup, {
+    "aria-label": "Feature options",
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "info",
+    onClick: () => {
+      dispatch({
+        type: "reset.disease"
+      });
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTimes,
+    className: "me-1"
+  }), "Clear"))), /*#__PURE__*/React.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/React.createElement(VarListToolbar, {
+    varType: "disease"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "position-relative"
+  }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, diseaseVarList)))));
+}
+export function VarNamesList(_ref2) {
+  let {
+    mode = SELECTION_MODES.SINGLE,
+    displayName = "genes",
+    showDiseaseVarList = true
+  } = _ref2;
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [varButtons, setVarButtons] = useState(mode === SELECTION_MODES.SINGLE ? dataset.selectedVar ? _.unionWith([dataset.selectedVar], dataset.varSets, _.isEqual) : [...dataset.varSets] : [...dataset.selectedMultiVar, ...dataset.varSets]);
+  const [active, setActive] = useState(mode === SELECTION_MODES.SINGLE ? dataset.selectedVar?.matrix_index || dataset.selectedVar?.name : dataset.selectedMultiVar.map(i => i.matrix_index || i.name));
+  const [sortedVarButtons, setSortedVarButtons] = useState([]);
+  useEffect(() => {
+    if (mode === SELECTION_MODES.SINGLE) {
+      setVarButtons(v => {
+        if (dataset.selectedVar) {
+          return _.unionWith(v, [dataset.selectedVar], _.isEqual);
+        } else {
+          return v;
+        }
+      });
+      setActive(dataset.selectedVar?.matrix_index || dataset.selectedVar?.name);
+    }
+  }, [mode, dataset.selectedVar]);
+  useEffect(() => {
+    if (mode === SELECTION_MODES.MULTIPLE) {
+      setVarButtons(v => {
+        if (dataset.selectedMultiVar.length) {
+          return _.unionWith(v, dataset.selectedMultiVar, _.isEqual);
+        } else {
+          return v;
+        }
+      });
+      setActive(dataset.selectedMultiVar.map(i => i.matrix_index || i.name));
+    }
+  }, [mode, dataset.selectedMultiVar]);
+  useEffect(() => {
+    setVarButtons(v => {
+      const updated = _.compact(_.map(v, i => {
+        if (i.isSet) {
+          return dataset.varSets.find(s => s.name === i.name);
+        } else return i;
+      }));
+      const newSets = _.difference(dataset.varSets, updated);
+      return [...updated, ...newSets];
+    });
+    if (mode === SELECTION_MODES.SINGLE) {
+      if (dataset.selectedVar?.isSet) {
+        const selectedSet = dataset.varSets.find(s => s.name === dataset.selectedVar.name);
+        dispatch({
+          type: "select.var",
+          var: selectedSet
+        });
+      }
+    } else {
+      dispatch({
+        type: "update.multivar",
+        vars: dataset.varSets
+      });
+    }
+  }, [mode, dataset.varSets, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dispatch]);
+  const varMeans = useVarMean(varButtons, dataset.varSort.var.sort === VAR_SORT.MATRIX);
+
+  // @TODO: deferr sortedVarButtons ?
+  useEffect(() => {
+    if (dataset.varSort.var.sort === VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError && varMeans.fetchedData) {
+        setSortedVarButtons(_.orderBy(varButtons, o => {
+          return sortMeans(o, varMeans.fetchedData);
+        }, dataset.varSort.var.sortOrder));
+      }
+    } else if (dataset.varSort.var.sort === VAR_SORT.NAME) {
+      setSortedVarButtons(_.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__*/React.createElement(ListGroup.Item, {
+      key: item.matrix_index
+    }, /*#__PURE__*/React.createElement(VarItem, {
+      item: item,
+      active: active,
+      setVarButtons: setVarButtons,
+      mode: mode,
+      isDiseaseGene: isDiseaseGene
+    }));
+  };
+  const makeSetListItem = set => {
+    return /*#__PURE__*/React.createElement(ListGroup.Item, {
+      key: set.name
+    }, /*#__PURE__*/React.createElement(VarSet, {
+      set: set,
+      active: active,
+      mode: mode
+    }));
+  };
+  const varList = _.map(sortedVarButtons, item => {
+    if (item.isSet) {
+      return makeSetListItem(item);
+    } else {
+      return makeListItem(item);
+    }
+  });
+  const newSetName = () => {
+    let n = 1;
+    let setName = `Set ${n}`;
+    const setNameExists = name => {
+      return dataset.varSets.some(set => set.name === name);
+    };
+    while (setNameExists(setName)) {
+      n++;
+      setName = `Set ${n}`;
+    }
+    return setName;
+  };
+  const isPending = varMeans.isPending && dataset.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.varSet",
+        varSet: {
+          name: newSetName(),
+          vars: [],
+          isSet: true
+        }
+      });
+    }
+  }, "New set"), /*#__PURE__*/React.createElement(Button, {
+    variant: "info",
+    onClick: () => {
+      setVarButtons([]);
+      dispatch({
+        type: mode === SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
+      });
+      dispatch({
+        type: "reset.varSets"
+      });
+    }
+  }, /*#__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)))), /*#__PURE__*/React.createElement(React.Fragment, null, showDiseaseVarList && /*#__PURE__*/React.createElement(DiseaseVarList, {
+    makeListItem: makeListItem
+  }))));
+}

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

@@ -0,0 +1,87 @@
+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 { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+
+// @TODO: set option for "var" and "disease"
+export function VarListToolbar(_ref) {
+  let {
+    varType = "var"
+  } = _ref;
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [sort, setSort] = useState(dataset.varSort.var.sort);
+  const [nameSortOrder, setNameSortOrder] = useState(dataset.varSort.var.sortOrder);
+  const [matrixSortOrder, setMatrixSortOrder] = useState(dataset.varSort.var.sortOrder);
+  const handleSort = (sortValue, sortOrder, setSortOrder) => {
+    if (sort !== sortValue) {
+      setSort(sortValue);
+      dispatch({
+        type: "set.varSort",
+        var: varType,
+        sort: sortValue,
+        sortOrder: sortOrder
+      });
+    } else {
+      const newSortOrder = sortOrder === VAR_SORT_ORDER.ASC ? VAR_SORT_ORDER.DESC : VAR_SORT_ORDER.ASC;
+      setSortOrder(newSortOrder);
+      dispatch({
+        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
+  }))));
+}

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

@@ -0,0 +1,194 @@
+import React, { useState } from "react";
+import { faCircleInfo, faDroplet, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { List } from "@mui/icons-material";
+import _ from "lodash";
+import { Button, Collapse, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { SearchBar } from "../search-bar/SearchBar";
+import { SingleSelectionItem } from "./VarItem";
+
+// @TODO: add button to score genes and plot
+
+const addVarToSet = (dispatch, set, v) => {
+  dispatch({
+    type: "add.varSet.var",
+    varSet: set,
+    var: v
+  });
+};
+function SingleSelectionSet(_ref) {
+  let {
+    set,
+    isActive,
+    selectSet,
+    removeSet,
+    removeSetVar,
+    showSearchBar = true
+  } = _ref;
+  const [openSet, setOpenSet] = useState(false);
+  const varList = set.vars.length ? _.map(set.vars, v => {
+    return /*#__PURE__*/React.createElement(ListGroup.Item, {
+      key: v.name
+    }, /*#__PURE__*/React.createElement(SingleSelectionItem, {
+      item: v,
+      showSetColorEncoding: false,
+      removeVar: () => removeSetVar(v)
+    }));
+  }) : /*#__PURE__*/React.createElement(ListGroup.Item, null, /*#__PURE__*/React.createElement("div", {
+    className: "text-muted"
+  }, "No features in this set"));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between cursor-pointer",
+    onClick: () => {
+      setOpenSet(o => !o);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/React.createElement("div", null, set.name), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, /*#__PURE__*/React.createElement(OverlayTrigger, {
+    placement: "top",
+    overlay: /*#__PURE__*/React.createElement(Tooltip, null, "This set represents the mean value of its features")
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faCircleInfo
+  })), /*#__PURE__*/React.createElement(List, null), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    key: set.name,
+    variant: isActive ? "primary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: e => {
+      e.stopPropagation();
+      selectSet();
+    },
+    disabled: !set.vars.length,
+    title: "Set as color encoding"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faDroplet
+  })), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Remove from list",
+    onClick: e => {
+      e.stopPropagation();
+      removeSet();
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTrash
+  }))))), /*#__PURE__*/React.createElement(Collapse, {
+    in: openSet
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt-2"
+  }, showSearchBar &&
+  /*#__PURE__*/
+  // @TODO: fix how results are displayed, should be placed on top of parent components
+  React.createElement(SearchBar, {
+    handleSelect: (d, i) => addVarToSet(d, set, i)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "mx-2"
+  }, /*#__PURE__*/React.createElement(ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, varList)))));
+}
+function MultipleSelectionSet(_ref2) {
+  let {
+    set,
+    isActive,
+    toggleSet
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    key: set.name,
+    variant: isActive ? "primary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: toggleSet,
+    title: set.name
+  }, set.name))));
+}
+export function VarSet(_ref3) {
+  let {
+    set,
+    active,
+    mode = SELECTION_MODES.SINGLE
+  } = _ref3;
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const selectSet = () => {
+    if (mode === SELECTION_MODES.SINGLE) {
+      dispatch({
+        type: "select.var",
+        var: set
+      });
+      dispatch({
+        type: "set.colorEncoding",
+        value: "var"
+      });
+    } else if (mode === SELECTION_MODES.MULTIPLE) {
+      dispatch({
+        type: "select.multivar",
+        var: set
+      });
+    }
+  };
+  const removeSet = () => {
+    if (mode === SELECTION_MODES.SINGLE) {
+      if (active === set.name) {
+        dispatch({
+          type: "reset.var"
+        });
+      }
+    } else if (mode === SELECTION_MODES.MULTIPLE) {
+      if (active.includes(set.name)) {
+        dispatch({
+          type: "deselect.multivar",
+          var: set
+        });
+      }
+    }
+    dispatch({
+      type: "remove.varSet",
+      varSet: set
+    });
+  };
+  const removeSetVar = v => {
+    dispatch({
+      type: "remove.varSet.var",
+      varSet: set,
+      var: v
+    });
+  };
+  const toggleSet = () => {
+    if (active.includes(set.name)) {
+      dispatch({
+        type: "deselect.multivar",
+        var: set
+      });
+    } else {
+      selectSet();
+    }
+  };
+  if (set && mode === SELECTION_MODES.SINGLE) {
+    return /*#__PURE__*/React.createElement(SingleSelectionSet, {
+      set: set,
+      isActive: dataset.colorEncoding === COLOR_ENCODINGS.VAR && active === set.name,
+      selectSet: selectSet,
+      removeSet: removeSet,
+      removeSetVar: v => removeSetVar(v)
+    });
+  } else if (mode === SELECTION_MODES.MULTIPLE) {
+    return /*#__PURE__*/React.createElement(MultipleSelectionSet, {
+      set: set,
+      isActive: _.includes(active, set.name),
+      toggleSet: () => toggleSet(set)
+    });
+  } else {
+    return null;
+  }
+}