@haniffalab/cherita-react 1.0.0 → 1.1.0

package/dist/esm/components/search-bar/SearchBar.js

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef, useState } from "react";
+import SearchIcon from "@mui/icons-material/Search";
+import _ from "lodash";
+import { Dropdown, Form, FormGroup, InputGroup } from "react-bootstrap";
+import { DiseasesSearchResults, VarSearchResults } from "./SearchResults";
+function onVarSelect(dispatch, item) {
+  dispatch({
+    type: "select.var",
+    var: item
+  });
+  dispatch({
+    type: "select.multivar",
+    var: item
+  });
+  dispatch({
+    type: "set.colorEncoding",
+    value: "var"
+  });
+}
+export function SearchBar(_ref) {
+  let {
+    searchVar = true,
+    searchDiseases = false,
+    handleSelect = onVarSelect
+  } = _ref;
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [text, setText] = useState("");
+  const inputRef = useRef(null);
+  const displayText = [...(searchVar ? ["features"] : []), ...(searchDiseases ? ["diseases"] : [])].join(" and ");
+  useEffect(() => {
+    if (text.length > 0) {
+      setShowSuggestions(true);
+    }
+  }, [text]);
+
+  //@TODO: Abstract styles
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
+    onSubmit: e => {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Form.Control, {
+    ref: inputRef,
+    onFocus: () => {
+      setShowSuggestions(text.length > 0);
+    },
+    onBlur: () => {
+      _.delay(() => {
+        setShowSuggestions(false);
+      }, 150);
+    },
+    type: "text",
+    placeholder: "Search " + displayText,
+    value: text,
+    onChange: e => {
+      setText(e.target.value);
+    },
+    style: {
+      paddingLeft: "2.5rem",
+      borderRadius: "5px"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: "10px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      pointerEvents: "none",
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement(SearchIcon, null))), /*#__PURE__*/React.createElement(Dropdown, {
+    show: showSuggestions,
+    onMouseDown: e => {
+      e.preventDefault();
+    },
+    onSelect: () => {
+      inputRef.current.blur();
+    }
+  }, /*#__PURE__*/React.createElement(Dropdown.Menu, {
+    style: {
+      width: "90%"
+    }
+  }, searchVar && /*#__PURE__*/React.createElement(VarSearchResults, {
+    text: text,
+    setShowSuggestions: setShowSuggestions,
+    handleSelect: handleSelect
+  }), searchVar && searchDiseases && /*#__PURE__*/React.createElement(Dropdown.Divider, null), searchDiseases && /*#__PURE__*/React.createElement(DiseasesSearchResults, {
+    text: text,
+    setShowSuggestions: setShowSuggestions
+  }))))));
+}

package/dist/esm/components/search-bar/SearchResults.js

@@ -0,0 +1,139 @@
+import React, { useState, useEffect, useMemo, useDeferredValue } from "react";
+import _ from "lodash";
+import { Dropdown } from "react-bootstrap";
+import { useDatasetDispatch } from "../../context/DatasetContext";
+import { useDiseaseSearch, useVarSearch } from "../../utils/search";
+export function VarSearchResults(_ref) {
+  let {
+    text,
+    setShowSuggestions,
+    handleSelect
+  } = _ref;
+  const [suggestions, setSuggestions] = useState([]);
+  const dispatch = useDatasetDispatch();
+  const {
+    setParams,
+    data: {
+      fetchedData = [],
+      isPending,
+      serverError
+    }
+  } = useVarSearch();
+  const deferredData = useDeferredValue(suggestions);
+  const isStale = deferredData !== fetchedData;
+  const updateParams = useMemo(() => {
+    const setData = text => {
+      if (text.length) {
+        setParams(p => {
+          return {
+            ...p,
+            text: text
+          };
+        });
+      } else {
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+    };
+    return _.debounce(setData, 300);
+  }, [setParams, setShowSuggestions]);
+  useEffect(() => {
+    updateParams(text);
+  }, [text, updateParams]);
+  useEffect(() => {
+    if (!isPending && !serverError) {
+      setSuggestions(fetchedData);
+      setShowSuggestions(true);
+    }
+  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  const suggestionsList = useMemo(() => {
+    return deferredData?.map(item => {
+      return /*#__PURE__*/React.createElement(Dropdown.Item, {
+        key: item.name,
+        as: "button",
+        disabled: isStale,
+        onClick: () => {
+          handleSelect(dispatch, item);
+          _.delay(() => {
+            setShowSuggestions(false);
+          }, 150);
+        }
+      }, item.name);
+    });
+  }, [deferredData, dispatch, handleSelect, isStale, setShowSuggestions]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Features"), /*#__PURE__*/React.createElement("div", {
+    className: "search-results"
+  }, deferredData?.length ? suggestionsList : /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: "empty",
+    as: "button",
+    disabled: true
+  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
+}
+export function DiseasesSearchResults(_ref2) {
+  let {
+    text,
+    setShowSuggestions
+  } = _ref2;
+  const [suggestions, setSuggestions] = useState([]);
+  const dispatch = useDatasetDispatch();
+  const {
+    setParams,
+    data: {
+      fetchedData = [],
+      isPending,
+      serverError
+    }
+  } = useDiseaseSearch();
+  const deferredData = useDeferredValue(suggestions);
+  const isStale = deferredData !== fetchedData;
+  const updateParams = useMemo(() => {
+    const setData = text => {
+      if (text.length) {
+        setParams(p => {
+          return {
+            ...p,
+            text: text
+          };
+        });
+      } else {
+        setSuggestions([]);
+      }
+    };
+    return _.debounce(setData, 300);
+  }, [setParams]);
+  useEffect(() => {
+    updateParams(text);
+  }, [text, updateParams]);
+  useEffect(() => {
+    if (!isPending && !serverError) {
+      setSuggestions(fetchedData);
+      setShowSuggestions(true);
+    }
+  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  const suggestionsList = useMemo(() => {
+    return deferredData?.map(item => {
+      return /*#__PURE__*/React.createElement(Dropdown.Item, {
+        key: item.id,
+        as: "button",
+        disabled: isStale,
+        onClick: () => {
+          dispatch({
+            type: "select.disease",
+            id: item.disease_id,
+            name: item.disease_name
+          });
+          _.delay(() => {
+            setShowSuggestions(false);
+          }, 150);
+        }
+      }, item.disease_name);
+    });
+  }, [deferredData, dispatch, isStale, setShowSuggestions]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Diseases"), /*#__PURE__*/React.createElement("div", {
+    className: "search-results"
+  }, deferredData?.length ? suggestionsList : /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: "empty",
+    as: "button",
+    disabled: true
+  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
+}

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

@@ -0,0 +1,254 @@
+import React, { useEffect, useState } from "react";
+import { faDroplet, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { MoreVert } from "@mui/icons-material";
+import _ from "lodash";
+import { Button, Collapse, ListGroup, Table } from "react-bootstrap";
+import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
+import { Histogram } from "../../utils/Histogram";
+import { useFetch, useDebouncedFetch } from "../../utils/requests";
+import { VirtualizedList } from "../../utils/VirtualizedList";
+function VarHistogram(_ref) {
+  let {
+    item
+  } = _ref;
+  const ENDPOINT = "var/histograms";
+  const dataset = useDataset();
+  const {
+    obsIndices
+  } = useFilteredData();
+  // @TODO: consider using Filter's isSliced; would trigger more re-renders/requests
+  // const { obsIndices, isSliced } = useFilteredData();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const [params, setParams] = useState({
+    url: dataset.url,
+    varKey: item.matrix_index,
+    obsIndices: isSliced ? [...(obsIndices || [])] : null
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        obsIndices: isSliced ? [...(obsIndices || [])] : null
+      };
+    });
+  }, [obsIndices, isSliced]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useDebouncedFetch(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  return !serverError && /*#__PURE__*/React.createElement(Histogram, {
+    data: fetchedData,
+    isPending: isPending,
+    altColor: isSliced
+  });
+}
+function VarDiseaseInfoItem(item) {
+  const dispatch = useDatasetDispatch();
+  return /*#__PURE__*/React.createElement(ListGroup.Item, {
+    key: item.disease_name,
+    className: "feature-disease-info"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "btn btn-link",
+    onClick: () => {
+      dispatch({
+        type: "select.disease",
+        id: item.disease_id,
+        name: item.disease_name
+      });
+    }
+  }, item.disease_name), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Table, {
+    striped: true
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Confidence"), /*#__PURE__*/React.createElement("td", null, item.confidence || "unknown")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Organ", item.organs.length > 1 ? "s" : ""), /*#__PURE__*/React.createElement("td", null, item.organs.map(o => o.name).join(", "))), !_.isEmpty(item.metadata) && _.map(item.metadata, (value, key) => {
+    if (value !== null && value !== undefined) {
+      return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, key), /*#__PURE__*/React.createElement("td", null, value));
+    }
+  })))));
+}
+function VarDiseaseInfo(_ref2) {
+  let {
+    data
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListGroup, null, /*#__PURE__*/React.createElement(VirtualizedList, {
+    getDataAtIndex: index => data[index],
+    count: data.length,
+    estimateSize: 140,
+    maxHeight: "100%",
+    ItemComponent: VarDiseaseInfoItem
+  })));
+}
+export function SingleSelectionItem(_ref3) {
+  let {
+    item,
+    isActive,
+    selectVar,
+    removeVar,
+    isDiseaseGene = false,
+    showSetColorEncoding = true,
+    showRemove = true
+  } = _ref3;
+  const ENDPOINT = "disease/gene";
+  const [openInfo, setOpenInfo] = useState(false);
+  const dataset = useDataset();
+  const params = {
+    geneName: item.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  };
+  const isNotInData = item.matrix_index === -1;
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false,
+    enabled: !!dataset.diseaseDatasets.length
+  });
+  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData?.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `d-flex justify-content-between ${hasDiseaseInfo ? "cursor-pointer" : ""}`,
+    onClick: () => {
+      setOpenInfo(o => !o);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, hasDiseaseInfo && /*#__PURE__*/React.createElement(MoreVert, null), !isDiseaseGene && /*#__PURE__*/React.createElement(VarHistogram, {
+    item: item
+  }), showSetColorEncoding && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    key: item.matrix_index,
+    variant: isActive ? "primary" : isNotInData ? "outline-secondary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: e => {
+      e.stopPropagation();
+      selectVar();
+    },
+    disabled: isNotInData,
+    title: isNotInData ? "Not present in data" : "Set as color encoding"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faDroplet
+  })), (!isDiseaseGene || !showRemove) && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Remove from list",
+    onClick: e => {
+      e.stopPropagation();
+      removeVar();
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTrash
+  }))))), hasDiseaseInfo && /*#__PURE__*/React.createElement(Collapse, {
+    in: openInfo
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt-2 var-disease-info-collapse"
+  }, /*#__PURE__*/React.createElement(VarDiseaseInfo, {
+    data: fetchedData
+  }))));
+}
+function MultipleSelectionItem(_ref4) {
+  let {
+    item,
+    isActive,
+    toggleVar
+  } = _ref4;
+  const isNotInData = item.matrix_index === -1;
+  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: item.matrix_index,
+    variant: isActive ? "primary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: toggleVar,
+    disabled: isNotInData,
+    title: isNotInData ? "Not present in data" : item.name
+  }, item.name))));
+}
+export function VarItem(_ref5) {
+  let {
+    item,
+    active,
+    setVarButtons,
+    mode = SELECTION_MODES.SINGLE,
+    isDiseaseGene = false
+  } = _ref5;
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const selectVar = () => {
+    if (mode === SELECTION_MODES.SINGLE) {
+      dispatch({
+        type: "select.var",
+        var: item
+      });
+      dispatch({
+        type: "set.colorEncoding",
+        value: COLOR_ENCODINGS.VAR
+      });
+    } else if (mode === SELECTION_MODES.MULTIPLE) {
+      dispatch({
+        type: "select.multivar",
+        var: item
+      });
+      dispatch({
+        type: "set.colorEncoding",
+        value: COLOR_ENCODINGS.VAR
+      });
+    }
+  };
+  const removeVar = () => {
+    setVarButtons(b => {
+      return b.filter(i => i.name !== item.name);
+    });
+    if (mode === SELECTION_MODES.SINGLE) {
+      if (active === item.matrix_index) {
+        dispatch({
+          type: "reset.var"
+        });
+      }
+    } else if (mode === SELECTION_MODES.MULTIPLE) {
+      if (active.includes(item.matrix_index)) {
+        dispatch({
+          type: "deselect.multivar",
+          var: item
+        });
+      }
+    }
+  };
+  const toggleVar = () => {
+    if (active.includes(item.matrix_index)) {
+      dispatch({
+        type: "deselect.multivar",
+        var: item
+      });
+    } else {
+      selectVar(item);
+    }
+  };
+  if (item && mode === SELECTION_MODES.SINGLE) {
+    return /*#__PURE__*/React.createElement(SingleSelectionItem, {
+      item: item,
+      isActive: dataset.colorEncoding === COLOR_ENCODINGS.VAR && active === item.matrix_index,
+      selectVar: selectVar,
+      removeVar: removeVar,
+      isDiseaseGene: isDiseaseGene
+    });
+  } else if (mode === SELECTION_MODES.MULTIPLE) {
+    return /*#__PURE__*/React.createElement(MultipleSelectionItem, {
+      item: item,
+      isActive: item.matrix_index !== -1 && _.includes(active, item.matrix_index),
+      toggleVar: toggleVar
+    });
+  } else {
+    return null;
+  }
+}