@haniffalab/cherita-react 1.0.0 → 1.1.0

package/dist/esm/components/obs-list/ObsList.js

@@ -0,0 +1,338 @@
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import CommentIcon from "@mui/icons-material/Comment";
+import JoinInnerIcon from "@mui/icons-material/JoinInner";
+import WaterDropIcon from "@mui/icons-material/WaterDrop";
+import _ from "lodash";
+import { Alert } from "react-bootstrap";
+import Accordion from "react-bootstrap/Accordion";
+import { useAccordionButton } from "react-bootstrap/AccordionButton";
+import AccordionContext from "react-bootstrap/AccordionContext";
+import { COLOR_ENCODINGS, DEFAULT_OBS_GROUP, OBS_TYPES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { LoadingSpinner } from "../../utils/LoadingIndicators";
+import { useFetch } from "../../utils/requests";
+import { CategoricalObs, ContinuousObs } from "./ObsItem";
+
+// @TODO: integrate ObsAccordionToggle with ObsColsList active, expandedItems, etc. to avoid duplication
+
+const ObsAccordionToggle = _ref => {
+  let {
+    children,
+    eventKey,
+    handleAccordionToggle
+  } = _ref;
+  const {
+    activeEventKey
+  } = useContext(AccordionContext);
+  const decoratedOnClick = useAccordionButton(eventKey, () => {
+    handleAccordionToggle(eventKey);
+  });
+  const isCurrentEventKey = Array.isArray(activeEventKey) ? activeEventKey.includes(eventKey) : activeEventKey === eventKey;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `obs-accordion-header ${isCurrentEventKey ? "active" : ""}`,
+    onClick: decoratedOnClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "obs-accordion-header-chevron"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: isCurrentEventKey ? faChevronDown : faChevronRight
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "obs-accordion-header-title"
+  }, children));
+};
+export function ObsColsList(_ref2) {
+  let {
+    showColor = true,
+    enableObsGroups = true
+  } = _ref2;
+  const ENDPOINT = "obs/cols";
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [enableGroups, setEnableGroups] = useState(enableObsGroups);
+  const [obsCols, setObsCols] = useState(null);
+  const [active, setActive] = useState(dataset.selectedObs?.name);
+  const [expandedItems, setExpandedItems] = useState({});
+  const [params, setParams] = useState({
+    url: dataset.url
+  });
+  const obsGroups = useMemo(() => ({
+    default: _.union(DEFAULT_OBS_GROUP, dataset.obsGroups?.default),
+    ..._.omit(dataset.obsGroups, "default")
+  }), [dataset.obsGroups]);
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+  }, [dataset.url]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  useEffect(() => {
+    if (!isPending && !serverError && fetchedData) {
+      let filteredData = fetchedData;
+
+      // filter to only obs within an obsGroup
+      if (enableGroups) {
+        const groupFiltered = _.filter(filteredData, d => {
+          return _.some(obsGroups, g => _.includes(g, d.name));
+        });
+        if (!!filteredData.length && !groupFiltered.length) {
+          setEnableGroups(false);
+          console.warn(`No obs found in obsGroups ${JSON.stringify(obsGroups)}, disabling obsGroups`);
+        } else {
+          filteredData = groupFiltered;
+        }
+      }
+
+      // filter out discrete obs
+      filteredData = _.filter(filteredData, d => {
+        return d.type !== OBS_TYPES.DISCRETE;
+      });
+      setObsCols(_.keyBy(_.map(filteredData, d => {
+        return {
+          ...d,
+          codesMap: _.invert(d.codes),
+          omit: []
+        };
+      }), "name"));
+    }
+  }, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
+  useEffect(() => {
+    if (obsCols && Object.keys(expandedItems).length === 0) {
+      const initialExpanded = Object.keys(obsCols).reduce((acc, key) => {
+        acc[key] = false;
+        return acc;
+      }, {});
+      if (active && obsCols[active]) {
+        initialExpanded[active] = true;
+      }
+      setExpandedItems(initialExpanded);
+    }
+  }, [obsCols, expandedItems, active]);
+
+  // @TODO: fix re-rendering performance issue
+  useEffect(() => {
+    if (obsCols) {
+      if (obsCols[dataset.selectedObs?.name]) {
+        setActive(dataset.selectedObs?.name);
+      } else {
+        setActive(null);
+        dispatch({
+          type: "select.obs",
+          obs: null
+        });
+      }
+    }
+  }, [dataset.selectedObs, dispatch, obsCols]);
+  const updateObs = updatedObs => {
+    setObsCols(o => {
+      return {
+        ...o,
+        [updatedObs.name]: updatedObs
+      };
+    });
+  };
+  const handleAccordionToggle = itemName => {
+    _.delay(
+    // to avoid contents of accordion disappearing while closing
+    () => {
+      setExpandedItems(prev => {
+        return {
+          ...prev,
+          [itemName]: !prev[itemName]
+        };
+      });
+    }, expandedItems[itemName] ? 250 : 0);
+  };
+  const toggleAll = item => {
+    const omit = item.omit.length ? [] : _.map(item.values, v => item.codes[v]);
+    setObsCols(o => {
+      return {
+        ...o,
+        [item.name]: {
+          ...item,
+          omit: omit
+        }
+      };
+    });
+    if (active === item.name) {
+      dispatch({
+        type: "select.obs",
+        obs: {
+          ...item,
+          omit: omit
+        }
+      });
+    }
+  };
+  const toggleLabel = item => {
+    const inLabelObs = _.some(dataset.labelObs, i => i.name === item.name);
+    if (inLabelObs) {
+      dispatch({
+        type: "remove.label.obs",
+        obsName: item.name
+      });
+    } else {
+      dispatch({
+        type: "add.label.obs",
+        obs: {
+          name: item.name,
+          type: item.type,
+          codesMap: item.codesMap
+        }
+      });
+    }
+  };
+  const toggleSlice = item => {
+    dispatch({
+      type: "toggle.slice.obs",
+      obs: item
+    });
+  };
+  const toggleColor = item => {
+    dispatch({
+      type: "select.obs",
+      obs: item
+    });
+    dispatch({
+      type: "set.colorEncoding",
+      value: COLOR_ENCODINGS.OBS
+    });
+  };
+  const toggleObs = (item, value) => {
+    let omit;
+    if (_.includes(item.omit, item.codes[value])) {
+      omit = item.omit.filter(i => i !== item.codes[value]);
+    } else {
+      omit = [...item.omit, item.codes[value]];
+    }
+    setObsCols(o => {
+      return {
+        ...o,
+        [item.name]: {
+          ...item,
+          omit: omit
+        }
+      };
+    });
+    if (active === item.name) {
+      dispatch({
+        type: "select.obs",
+        obs: {
+          ...item,
+          omit: omit
+        }
+      });
+    }
+  };
+  const obsItem = item => {
+    if (!item) {
+      return null;
+    }
+    if (item.type === OBS_TYPES.DISCRETE) {
+      return null;
+    }
+    const inLabelObs = _.some(dataset.labelObs, i => i.name === item.name);
+    const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
+    const isColorEncoding = dataset.colorEncoding === COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "accordion-item",
+      key: item.name
+    }, /*#__PURE__*/React.createElement(ObsAccordionToggle, {
+      eventKey: item.name,
+      handleAccordionToggle: handleAccordionToggle
+    }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `mx-1 cursor-pointer ${inLabelObs ? "active-icon" : "text-muted opacity-50"}`,
+      onClick: event => {
+        event.stopPropagation();
+        toggleLabel(item);
+      },
+      title: "Add to tooltip"
+    }, /*#__PURE__*/React.createElement(CommentIcon, null)), /*#__PURE__*/React.createElement("span", {
+      className: `mx-1 cursor-pointer ${inSliceObs ? "active-icon" : "text-muted opacity-50"}`,
+      onClick: event => {
+        event.stopPropagation();
+        toggleSlice(item);
+      },
+      title: "Filter applied"
+    }, /*#__PURE__*/React.createElement(JoinInnerIcon, null)), /*#__PURE__*/React.createElement("span", {
+      className: `mx-1 cursor-pointer ${isColorEncoding ? "active-icon" : "text-muted opacity-50"}`,
+      onClick: event => {
+        event.stopPropagation();
+        toggleColor(item);
+      },
+      title: "Is color encoding"
+    }, /*#__PURE__*/React.createElement(WaterDropIcon, null)))), /*#__PURE__*/React.createElement(Accordion.Collapse, {
+      eventKey: item.name
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "obs-accordion-body"
+    }, expandedItems[item.name] && (item.type === OBS_TYPES.CATEGORICAL || item.type === OBS_TYPES.BOOLEAN ? /*#__PURE__*/React.createElement(CategoricalObs, {
+      key: item.name,
+      obs: item,
+      updateObs: updateObs,
+      toggleAll: () => toggleAll(item),
+      toggleObs: value => toggleObs(item, value),
+      toggleLabel: () => toggleLabel(item),
+      toggleSlice: () => toggleSlice(item),
+      toggleColor: () => toggleColor(item),
+      showColor: showColor
+    }) : /*#__PURE__*/React.createElement(ContinuousObs, {
+      key: item.name,
+      obs: item,
+      updateObs: updateObs,
+      toggleAll: () => toggleAll(item),
+      toggleObs: value => toggleObs(item, value),
+      toggleLabel: () => toggleLabel(item),
+      toggleSlice: () => toggleSlice(item),
+      toggleColor: () => toggleColor(item)
+    })))));
+  };
+  const groupList = _.map(_.keys(obsGroups), group => {
+    const key = `group-${group}`;
+    const groupItems = _.compact(_.map(_.sortBy(obsGroups[group], o => _.lowerCase(o.name)), item => {
+      return obsItem(obsCols?.[item]);
+    }));
+    if (group === "default") {
+      return groupItems;
+    } else {
+      return /*#__PURE__*/React.createElement(Accordion.Item, {
+        key: key,
+        eventKey: key,
+        className: "obs-group-accordion-item"
+      }, /*#__PURE__*/React.createElement(Accordion.Header, {
+        className: "obs-group-accordion-header"
+      }, group), /*#__PURE__*/React.createElement(Accordion.Body, {
+        className: "obs-group-accordion-body"
+      }, groupItems));
+    }
+  });
+  const obsList = enableGroups ? /*#__PURE__*/React.createElement(Accordion, {
+    className: "obs-group-accordion",
+    flush: true,
+    alwaysOpen: true
+  }, groupList) : _.map(_.sortBy(obsCols, o => _.lowerCase(o.name)), item => obsItem(item));
+  if (!serverError) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "position-relative h-100"
+    }, isPending ? /*#__PURE__*/React.createElement(LoadingSpinner, null) : !!obsCols && !_.size(obsCols) ? /*#__PURE__*/React.createElement(Alert, {
+      variant: "danger"
+    }, "No observations found.") : /*#__PURE__*/React.createElement(Accordion, {
+      flush: true,
+      defaultActiveKey: [active],
+      alwaysOpen: true,
+      className: "obs-accordion"
+    }, obsList));
+  } else {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
+      variant: "danger"
+    }, serverError.message));
+  }
+}

package/dist/esm/components/obs-list/ObsToolbar.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+export function ObsToolbar(_ref) {
+  let {
+    item,
+    showToggleAllObs = true,
+    onToggleAllObs
+  } = _ref;
+  const allToggledOn = !item.omit.length;
+  return showToggleAllObs && /*#__PURE__*/React.createElement(Form.Check, {
+    type: "switch",
+    id: "custom-switch",
+    label: "Toggle all",
+    checked: allToggledOn,
+    onChange: onToggleAllObs
+  });
+}

package/dist/esm/components/obsm-list/ObsmList.js

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+import { Button, ButtonGroup, Dropdown, DropdownButton, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFetch } from "../../utils/requests";
+import { ObsmKeysListBtn } from "../../utils/Skeleton";
+export function ObsmKeysList() {
+  const ENDPOINT = "obsm/keys";
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [obsmKeysList, setObsmKeysList] = useState([]);
+  const [active, setActive] = useState(null);
+  const [params, setParams] = useState({
+    url: dataset.url
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+  }, [dataset.url]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  useEffect(() => {
+    if (!isPending && !serverError && fetchedData) {
+      setObsmKeysList(fetchedData);
+    }
+  }, [fetchedData, isPending, serverError]);
+  useEffect(() => {
+    if (dataset.selectedObsm) {
+      setActive(dataset.selectedObsm);
+    }
+  }, [dataset.selectedObsm]);
+  const obsmList = obsmKeysList.map(item => {
+    return /*#__PURE__*/React.createElement(Dropdown.Item, {
+      key: item,
+      className: `custom ${active === item && "active"}`,
+      onClick: () => {
+        dispatch({
+          type: "select.obsm",
+          obsm: item
+        });
+      }
+    }, item);
+  });
+  if (!serverError) {
+    if (isPending) {
+      return /*#__PURE__*/React.createElement(ObsmKeysListBtn, null);
+    }
+    return /*#__PURE__*/React.createElement(DropdownButton, {
+      as: ButtonGroup,
+      title: dataset.selectedObsm || "Select an embedding",
+      variant: dataset.selectedObsm ? "primary" : "warning",
+      id: "bg-nested-dropdown",
+      size: "sm"
+    }, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Embeddings"), obsmList);
+  } else {
+    return /*#__PURE__*/React.createElement(OverlayTrigger, {
+      placement: "top",
+      delay: {
+        show: 100,
+        hide: 200
+      },
+      overlay: /*#__PURE__*/React.createElement(Tooltip, null, serverError.message)
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "danger"
+    }, "Error"));
+  }
+}

package/dist/esm/components/offcanvas/index.js

@@ -0,0 +1,67 @@
+import React from "react";
+import Offcanvas from "react-bootstrap/Offcanvas";
+import { SELECTION_MODES } from "../../constants/constants";
+import { ObsColsList } from "../obs-list/ObsList";
+import { ObsmKeysList } from "../obsm-list/ObsmList";
+import { SearchBar } from "../search-bar/SearchBar";
+import { VarNamesList } from "../var-list/VarList";
+export function OffcanvasObs(_ref) {
+  let {
+    show,
+    handleClose,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    show: show,
+    onHide: handleClose,
+    scroll: true,
+    backdrop: false
+  }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
+    closeButton: true
+  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Categories")), /*#__PURE__*/React.createElement(Offcanvas.Body, {
+    className: "p-0"
+  }, /*#__PURE__*/React.createElement(ObsColsList, props)));
+}
+export function OffcanvasObsm(_ref2) {
+  let {
+    show,
+    handleClose
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    show: show,
+    onHide: handleClose
+  }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
+    closeButton: true
+  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Embedding space")), /*#__PURE__*/React.createElement(Offcanvas.Body, null, /*#__PURE__*/React.createElement(ObsmKeysList, null)));
+}
+export function OffcanvasVars(_ref3) {
+  let {
+    show,
+    handleClose,
+    mode = SELECTION_MODES.MULTIPLE
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    show: show,
+    onHide: handleClose
+  }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
+    closeButton: true
+  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Features")), /*#__PURE__*/React.createElement(Offcanvas.Body, null, /*#__PURE__*/React.createElement(SearchBar, {
+    searchDiseases: true
+  }), /*#__PURE__*/React.createElement(VarNamesList, {
+    mode: mode
+  })));
+}
+export function OffcanvasControls(_ref4) {
+  let {
+    show,
+    handleClose,
+    Controls,
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    show: show,
+    onHide: handleClose
+  }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
+    closeButton: true
+  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Controls")), /*#__PURE__*/React.createElement(Offcanvas.Body, null, /*#__PURE__*/React.createElement(Controls, props)));
+}