@weng-lab/genomebrowser-ui 0.1.1

package/src/TrackSelect/TreeView/treeViewHelpers.tsx

@@ -0,0 +1,428 @@
+import Folder from "@mui/icons-material/Folder";
+import IndeterminateCheckBoxRoundedIcon from "@mui/icons-material/IndeterminateCheckBoxRounded";
+import { Box, Typography, Stack } from "@mui/material";
+import Collapse from "@mui/material/Collapse";
+import { alpha, styled } from "@mui/material/styles";
+import { TreeViewBaseItem } from "@mui/x-tree-view";
+import {
+  TreeItemCheckbox,
+  TreeItemIconContainer,
+  TreeItemLabel,
+} from "@mui/x-tree-view/TreeItem";
+import { TreeItemIcon } from "@mui/x-tree-view/TreeItemIcon";
+import { TreeItemProvider } from "@mui/x-tree-view/TreeItemProvider";
+import { useTreeItemModel } from "@mui/x-tree-view/hooks";
+import { useTreeItem } from "@mui/x-tree-view/useTreeItem";
+import React from "react";
+import {
+  CustomLabelProps,
+  CustomTreeItemProps,
+  ExtendedTreeItemProps,
+  RowInfo,
+} from "../types";
+import Fuse, { FuseResult } from "fuse.js";
+import { SearchTracksProps } from "../types";
+import { assayTypes, ontologyTypes } from "../consts";
+
+
+/**
+ * Builds tree in the sorted by assay view
+ * @param selectedIds: list of ids (from useSelectionStore)
+ * @param root: Root TreeViewBaseItem
+ * @param rowById: Mapping between an id (experimentAccession) and its RowInfo object
+ * @returns all of the items for the RichTreeView in TreeViewWrapper
+ */
+export function buildSortedAssayTreeView(
+  selectedIds: string[],
+  root: TreeViewBaseItem<ExtendedTreeItemProps>,
+  rowById: Map<string, RowInfo>,
+): TreeViewBaseItem<ExtendedTreeItemProps>[] {
+  const assayMap = new Map<string, TreeViewBaseItem<ExtendedTreeItemProps>>(); // keep track of top level nodes
+  const ontologyMap = new Map<
+    string,
+    TreeViewBaseItem<ExtendedTreeItemProps>
+  >();
+  const sampleAssayMap = new Map<
+    string,
+    TreeViewBaseItem<ExtendedTreeItemProps>
+  >();
+  let idx = 1;
+
+  const selectedRows = selectedIds.reduce<RowInfo[]>((acc, id) => {
+    const row = rowById.get(id);
+    if (row) acc.push(row);
+    return acc;
+  }, []);
+
+  selectedRows.forEach((row) => {
+    let assayNode = assayMap.get(row.assay);
+    if (!assayNode) {
+      assayNode = {
+        id: row.assay,
+        isAssayItem: true,
+        label: row.assay,
+        icon: "removeable",
+        children: [],
+        allExpAccessions: [],
+      };
+      assayMap.set(row.assay, assayNode);
+      root.children!.push(assayNode);
+    }
+
+    let ontologyNode = ontologyMap.get(row.ontology + row.assay);
+    if (!ontologyNode) {
+      ontologyNode = {
+        id: row.ontology + "_" + idx++,
+        isAssayItem: false,
+        label: row.ontology,
+        icon: "removeable",
+        children: [],
+        allExpAccessions: [],
+      };
+      assayNode.children!.push(ontologyNode);
+      ontologyMap.set(row.ontology + row.assay, ontologyNode);
+    }
+
+    const displayNameNode: TreeViewBaseItem<ExtendedTreeItemProps> = {
+      id: row.displayname + "_" + idx++,
+      isAssayItem: false,
+      label: row.displayname,
+      icon: "removeable",
+      children: [],
+      allExpAccessions: [],
+    };
+    ontologyNode.children!.push(displayNameNode);
+
+    let expNode = sampleAssayMap.get(row.displayname + row.experimentAccession);
+    if (!expNode) {
+      expNode = {
+        id: row.experimentAccession,
+        isAssayItem: false,
+        label: row.experimentAccession,
+        icon: row.assay,
+        children: [],
+      };
+      sampleAssayMap.set(row.displayname + row.assay, expNode);
+      displayNameNode.children!.push(expNode);
+    }
+    assayNode.allExpAccessions!.push(row.experimentAccession);
+    ontologyNode.allExpAccessions!.push(row.experimentAccession);
+    displayNameNode.allExpAccessions!.push(row.experimentAccession);
+    root.allRowInfo!.push(row);
+  });
+  // standardize the order of the assay folders everytime one is added
+  root.children!.sort((a, b): number => {
+    return assayTypes.indexOf(a.id) - assayTypes.indexOf(b.id);
+  });
+  return [root];
+}
+
+/**
+ * Builds tree in the sorted by assay view
+ * @param selectedIds: list of ids (from useSelectionStore)
+ * @param root: Root TreeViewBaseItem
+ * @param rowById: Mapping between an id (experimentAccession) and its RowInfo object
+ * @returns all of the items for the RichTreeView in TreeViewWrapper
+ */
+export function buildTreeView(
+  selectedIds: string[],
+  root: TreeViewBaseItem<ExtendedTreeItemProps>,
+  rowById: Map<string, RowInfo>,
+): TreeViewBaseItem<ExtendedTreeItemProps>[] {
+  const ontologyMap = new Map<
+    string,
+    TreeViewBaseItem<ExtendedTreeItemProps>
+  >(); // keep track of top level nodes
+  const displayNameMap = new Map<
+    string,
+    TreeViewBaseItem<ExtendedTreeItemProps>
+  >();
+  const sampleAssayMap = new Map<
+    string,
+    TreeViewBaseItem<ExtendedTreeItemProps>
+  >();
+
+  const selectedRows = selectedIds.reduce<RowInfo[]>((acc, id) => {
+    const row = rowById.get(id);
+    if (row) acc.push(row);
+    return acc;
+  }, []);
+
+  selectedRows.forEach((row) => {
+    if (!row) {
+      return;
+    }
+    let ontologyNode = ontologyMap.get(row.ontology);
+    if (!ontologyNode) {
+      ontologyNode = {
+        id: row.ontology,
+        label: row.ontology,
+        icon: "removeable",
+        children: [],
+        allExpAccessions: [],
+      };
+      ontologyMap.set(row.ontology, ontologyNode);
+      root.children!.push(ontologyNode);
+    }
+
+    let displayNameNode = displayNameMap.get(row.displayname);
+    if (!displayNameNode) {
+      displayNameNode = {
+        id: row.displayname,
+        label: row.displayname,
+        icon: "removeable",
+        children: [],
+        allExpAccessions: [],
+      };
+      ontologyNode.children!.push(displayNameNode);
+      displayNameMap.set(row.displayname, displayNameNode);
+    }
+
+    let expNode = sampleAssayMap.get(row.displayname + row.assay);
+    if (!expNode) {
+      expNode = {
+        id: row.experimentAccession,
+        label: row.experimentAccession,
+        icon: row.assay,
+        children: [],
+      };
+      sampleAssayMap.set(row.displayname + row.assay, expNode);
+      displayNameNode.children!.push(expNode);
+    }
+    ontologyNode.allExpAccessions!.push(row.experimentAccession);
+    displayNameNode.allExpAccessions!.push(row.experimentAccession);
+    root.allRowInfo!.push(row);
+  });
+  // standardize the order of the assay folders everytime one is added
+  root.children!.sort((a, b): number => {
+    return ontologyTypes.indexOf(a.id) - ontologyTypes.indexOf(b.id);
+  });
+  return [root];
+}
+
+/**
+ * Fuzzy search of active tracks.
+ *
+ * @param treeItems - TreeBaseViewItems from the tree.
+ * @param query - The search query string.
+ * @param keyWeightMap - Array of keys to search within each track object.
+ * Can look like ["name", "author"] or if weighted, [
+    {
+      name: 'title',
+      weight: 0.3
+    },
+    {
+      name: 'author',
+      weight: 0.7
+    }
+  ].
+ * @param threshold - (Optional) Threshold for the fuzzy search (default is 0.5).
+ *                    Smaller = stricter match, larger = fuzzier since 0 is perfect match and 1 is worst match.
+ * @param limit - (Optional) Maximum number of results to return (default is 10).
+ * @returns FuseResult object containing the search results.
+ */
+export function searchTreeItems({
+  treeItems,
+  query,
+  keyWeightMap,
+  threshold,
+  limit = 10
+}: SearchTracksProps): FuseResult<RowInfo>[] {
+  const data = treeItems![0].allRowInfo ?? [];
+  const fuse = new Fuse(data, {
+    includeScore: true,
+    shouldSort: true,
+    threshold: threshold,
+    keys: keyWeightMap,
+  });
+  return fuse.search(query, { limit: limit });
+}
+
+/**
+ * Creates the assay icon for DataGrid and RichTreeView
+ * @param type: assay type
+ * @returns an icon of the assay's respective color
+ */
+export function AssayIcon(type: string) {
+  const colorMap: { [key: string]: string } = {
+    DNase: "#06da93",
+    ATAC: "#02c7b9",
+    H3K4me3: "#ff2020",
+    ChromHMM: "#0097a7",
+    H3K27ac: "#fdc401",
+    CTCF: "#01a6f1",
+  };
+  const color = colorMap[type];
+  return (
+    <Box
+      sx={{
+        width: 12,
+        height: 12,
+        borderRadius: "20%",
+        bgcolor: color,
+      }}
+    />
+  );
+}
+
+// Everything below is styling for the custom directory look of the tree view
+const TreeItemRoot = styled("li")(({ theme }) => ({
+  listStyle: "none",
+  margin: 0,
+  padding: 0,
+  outline: 4,
+  color: theme.palette.grey[400],
+  ...theme.applyStyles("light", {
+    color: theme.palette.grey[600], // controls colors of the MUI icons
+  }),
+}));
+
+const TreeItemLabelText = styled(Typography)({
+  color: "black",
+  fontFamily: "inherit",
+});
+
+function CustomLabel({ icon: Icon, children, ...other }: CustomLabelProps) {
+  const variant = other.isAssayItem ? "subtitle2" : "body2";
+  const fontWeight = other.isAssayItem ? "bold" : 500;
+  return (
+    <TreeItemLabel
+      {...other}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      {Icon && React.isValidElement(Icon) ? (
+        <Box className="labelIcon" sx={{ mr: 1 }}>
+          {Icon}
+        </Box>
+      ) : (
+        <Box
+          component={Icon as React.ElementType}
+          className="labelIcon"
+          color="inherit"
+          sx={{ mr: 1, fontSize: "1.2rem" }}
+        />
+      )}
+      <Stack direction="row" spacing={2} alignItems="center">
+        { other.isAssayItem && AssayIcon(other.id) }
+        <TreeItemLabelText fontWeight={fontWeight} variant={variant}>{children}</TreeItemLabelText>
+      </Stack>
+    </TreeItemLabel>
+  );
+}
+
+const TreeItemContent = styled("div")(({ theme }) => ({
+  padding: theme.spacing(0.5),
+  paddingRight: theme.spacing(2),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
+  width: "100%",
+  boxSizing: "border-box", // prevent width + padding to overflow
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  cursor: "pointer",
+  WebkitTapHighlightColor: "transparent",
+  flexDirection: "row-reverse",
+  borderRadius: theme.spacing(0.7),
+  marginBottom: theme.spacing(0.5),
+  marginTop: theme.spacing(0.5),
+  fontWeight: 500,
+  [`&[data-focused], &[data-selected]`]: {
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.primary.main,
+    }),
+  },
+  "&:not([data-focused], [data-selected]):hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.1),
+    color: "white",
+    ...theme.applyStyles("light", {
+      color: theme.palette.primary.main,
+    }),
+  },
+}));
+
+const getIconFromTreeItemType = (itemType: string) => {
+  switch (itemType) {
+    case "folder":
+      return Folder;
+    case "removeable":
+      return IndeterminateCheckBoxRoundedIcon;
+    default:
+      return AssayIcon(itemType);
+  }
+};
+
+export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+  props: CustomTreeItemProps,
+  ref: React.Ref<HTMLLIElement>,
+) {
+  const { id, itemId, label, disabled, children, onRemove, ...other } = props;
+
+  const {
+    getContextProviderProps,
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getCheckboxProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    status,
+  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
+
+  const item = useTreeItemModel<ExtendedTreeItemProps>(itemId)!;
+  const icon = getIconFromTreeItemType(item.icon);
+
+  const handleRemoveIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation(); // prevent item expand/select
+    onRemove?.(item);
+  };
+
+  return (
+    <TreeItemProvider {...getContextProviderProps()}>
+      <TreeItemRoot {...getRootProps(other)}>
+        <TreeItemContent {...getContentProps()}>
+          <TreeItemIconContainer {...getIconContainerProps()}>
+            <TreeItemIcon status={status} />
+          </TreeItemIconContainer>
+          <TreeItemCheckbox {...getCheckboxProps()} />
+          <CustomLabel
+            {...getLabelProps({
+              icon:
+                item.icon === "removeable" ? (
+                  <Box
+                    onClick={handleRemoveIconClick}
+                    sx={{
+                      width: 20,
+                      height: 20,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      mr: 1,
+                      "&:hover": {
+                        backgroundColor: "rgba(0,0,0,0.1)",
+                      },
+                    }}
+                  >
+                    <IndeterminateCheckBoxRoundedIcon fontSize="small" />
+                  </Box>
+                ) : (
+                  icon
+                ),
+              expandable: (status.expandable && status.expanded).toString(),
+              isAssayItem: item.isAssayItem,
+              id: item.id
+            })}
+          />
+        </TreeItemContent>
+        {children && <Collapse {...getGroupTransitionProps()} />}
+      </TreeItemRoot>
+    </TreeItemProvider>
+  );
+});

package/src/TrackSelect/bug.md

@@ -0,0 +1,4 @@
+# Known Bugs/Issues
+
+1. There's a lag in the rendering of the search results + the words in the search bar.
+2. Upon reaching the limit of added tracks, you're unable to remove tracks from the DataGrid and repeatedly triggers the dialog to pop up whenever you try to unselect tracks from the DataGrid.

package/src/TrackSelect/consts.ts

@@ -0,0 +1,92 @@
+import {
+  getTracksByAssayAndOntology,
+  flattenIntoRow,
+} from "./DataGrid/dataGridHelpers";
+import { RowInfo, TrackInfo } from "./types";
+
+export const assayTypes = [
+  "DNase",
+  "H3K4me3",
+  "H3K27ac",
+  "ATAC",
+  "CTCF",
+  "ChromHMM",
+];
+
+export const ontologyTypes = [
+  "Adipose",
+  "Adrenal gland",
+  "Blood",
+  "Blood vessel",
+  "Bone",
+  "Bone marrow",
+  "Brain",
+  "Breast",
+  "Connective tissue",
+  "Embryo",
+  "Epithelium",
+  "Esophagus",
+  "Eye",
+  "Fallopian Tube",
+  "Gallbladder",
+  "Heart",
+  "Kidney",
+  "Large Intestine",
+  "Limb",
+  "Liver",
+  "Lung",
+  "Lymphoid Tissue",
+  "Muscle",
+  "Mouth",
+  "Nerve",
+  "Nose",
+  "Pancreas",
+  "Parathyroid Gland",
+  "Ovary",
+  "Penis",
+  "Placenta",
+  "Prostate",
+  "Skin",
+  "Small Intestine",
+  "Spinal Cord",
+  "Spleen",
+  "Stomach",
+  "Testis",
+  "Thymus",
+  "Thyroid",
+  "Urinary Bladder",
+  "Uterus",
+  "Vagina",
+];
+
+export const rows = ontologyTypes.flatMap((ontology) =>
+  assayTypes.flatMap((assay) =>
+    getTracksByAssayAndOntology(
+      assay.toLowerCase(),
+      ontology.toLowerCase(),
+    ).map((r: TrackInfo) => {
+      const flat = flattenIntoRow(r);
+      return {
+        ...flat,
+        assay,
+        ontology,
+      };
+    }),
+  ),
+);
+
+// map of experimentAccession -> rowInfo for faster row lookup
+export const rowById = new Map<string, RowInfo>(
+  rows.map((r) => [r.experimentAccession, r]),
+);
+
+/**
+ * Check if an ID is a real track (exists in rowById) vs an auto-generated group ID
+ */
+export const isTrackId = (id: string): boolean => rowById.has(id);
+
+/**
+ * Filter a set of IDs to return only real track IDs (no auto-generated group IDs)
+ */
+export const getActiveTracks = (selectedIds: Set<string>): Set<string> =>
+  new Set(Array.from(selectedIds).filter(isTrackId));

package/src/TrackSelect/store.ts

@@ -0,0 +1,26 @@
+import { create, StoreApi, UseBoundStore } from "zustand";
+import { SelectionState, SelectionAction } from "./types";
+
+export type SelectionStoreInstance = UseBoundStore<
+  StoreApi<SelectionState & SelectionAction>
+>;
+
+export function createSelectionStore() {
+  return create<SelectionState & SelectionAction>((set) => ({
+    maxTracks: 30,
+    selectedIds: new Set<string>(),
+    setSelected: (ids: Set<string>) =>
+      set(() => ({
+        selectedIds: new Set(ids),
+      })),
+    removeIds: (removedIds: Set<string>) =>
+      set((state) => {
+        const next = new Set(state.selectedIds);
+        removedIds.forEach((id) => {
+          next.delete(id);
+        });
+        return { selectedIds: next };
+      }),
+    clear: () => set(() => ({ selectedIds: new Set<string>() })),
+  }));
+}

package/src/TrackSelect/types.ts

@@ -0,0 +1,139 @@
+import { FuseOptionKey } from "fuse.js";
+import { UseTreeItemParameters } from "@mui/x-tree-view/useTreeItem";
+import { TreeViewBaseItem } from "@mui/x-tree-view";
+import {
+  DataGridPremiumProps,
+  GridRowSelectionModel,
+} from "@mui/x-data-grid-premium";
+import { ReactElement, ReactNode } from "react";
+import { SvgIconOwnProps } from "@mui/material";
+import { SelectionStoreInstance } from "./store";
+
+export interface SearchTracksProps {
+  query: string;
+  keyWeightMap: FuseOptionKey<any>[];
+  jsonStructure?: string;
+  treeItems?: TreeViewBaseItem<ExtendedTreeItemProps>[];
+  threshold?: number;
+  limit?: number;
+}
+
+/**
+ * Types for the JSON-formatted tracks fomr modifiedHumanTracks.json
+ */
+export type AssayInfo = {
+  assay: string;
+  url: string;
+  experimentAccession: string;
+  fileAccession: string;
+};
+
+export type TrackInfo = {
+  name: string;
+  ontology: string;
+  lifeStage: string;
+  sampleType: string;
+  displayname: string;
+  assays: AssayInfo[];
+};
+
+/**
+ *  Row format for DataGrid
+ */
+export type RowInfo = {
+  ontology: string;
+  lifeStage: string;
+  sampleType: string;
+  displayname: string;
+  assay: string;
+  experimentAccession: string;
+  fileAccession: string;
+};
+
+/**
+ * Custom Tree Props for RichTreeView Panel
+ */
+export type ExtendedTreeItemProps = {
+  id: string;
+  label: string;
+  icon: string;
+  isAssayItem?: boolean;
+  /**
+   * list of all the experimentAccession values in the children/grandchildren of the item, or the accession of the item itself
+   * this is used in updating the rowSelectionModel when removing items from the Tree View panel
+   */
+  allExpAccessions?: string[];
+  // list to allow search functionality in the treeview
+  allRowInfo?: RowInfo[];
+};
+
+export type TreeViewWrapperProps = {
+  store: SelectionStoreInstance;
+  items: TreeViewBaseItem<ExtendedTreeItemProps>[];
+  selectedIds: Set<string>;
+  activeTracks: Set<string>; // doesn't have the autogenerated row groupings to provide accurate number of tracks
+  isSearchResult: boolean;
+};
+
+export interface CustomLabelProps {
+  id: string;
+  children: React.ReactNode;
+  isAssayItem?: boolean;
+  icon: React.ElementType | React.ReactElement;
+}
+
+export interface CustomTreeItemProps
+  extends Omit<UseTreeItemParameters, "rootRef">,
+    Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {
+  onRemove?: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
+}
+
+/**
+ * Types for useSelectionStore to keep track of selected DataGrid row ids/tracks
+ */
+export type SelectionState = {
+  maxTracks: number;
+  selectedIds: Set<string>;
+};
+
+export type SelectionAction = {
+  setSelected: (ids: Set<string>) => void;
+  removeIds: (removedIds: Set<string>) => void;
+  clear: () => void;
+};
+
+/**
+ * DataGrid Props
+ */
+interface BaseTableProps extends Omit<DataGridPremiumProps, "columns"> {
+  toolbarSlot?: ReactNode;
+  /**
+   * If anything besides an element, renders tooltip icon to the right of the table label with specified string as tooltip contents.
+   * If an element, renders the element to the right of the table label.
+   */
+  labelTooltip?: ReactNode;
+  /**
+   * Styling object for the toolbar
+   */
+  toolbarStyle?: React.CSSProperties;
+  /**
+   * Color passed as `htmlColor` to columns, filter, download and search icons
+   */
+  toolbarIconColor?: SvgIconOwnProps["htmlColor"];
+}
+
+type DataGridWrapperProps = {
+  rows: RowInfo[];
+  selectedIds: Set<string>;
+  handleSelection: (newSelection: GridRowSelectionModel) => void;
+  sortedAssay: boolean;
+};
+
+//This enforces that a downloadFileName is specified if a ReactElement is used as the label (no default )
+export type DataGridProps = DataGridWrapperProps &
+  BaseTableProps &
+  (
+    | { label?: string; downloadFileName?: string }
+    | { label: ReactElement; downloadFileName: string }
+    | { label?: undefined; downloadFileName?: string }
+  );

package/src/lib.ts

@@ -0,0 +1,8 @@
+import TrackSelect, { type TrackSelectProps } from "./TrackSelect/TrackSelect";
+export { TrackSelect, TrackSelectProps };
+
+import {
+  createSelectionStore,
+  type SelectionStoreInstance,
+} from "./TrackSelect/store.ts";
+export { createSelectionStore, SelectionStoreInstance };