@weng-lab/genomebrowser-ui 0.1.11 → 0.2.0-beta.0

package/src/TrackSelect/DataGrid/dataGridHelpers.tsx

@@ -1,155 +0,0 @@
-import { capitalize } from "@mui/material";
-import Fuse, { FuseResult } from "fuse.js";
-import humanTracksData from "../Data/humanBiosamples.json";
-import mouseTracksData from "../Data/mouseBiosamples.json";
-import { AssayInfo, RowInfo, SearchTracksProps, TrackInfo } from "../types";
-import { Assembly } from "../consts";
-
-const tracksDataByAssembly: Record<Assembly, typeof humanTracksData> = {
-  GRCh38: humanTracksData,
-  mm10: mouseTracksData,
-};
-
-export function getTracksData(assembly: Assembly) {
-  return tracksDataByAssembly[assembly];
-}
-
-function formatAssayType(assay: string): string {
-  switch (assay) {
-    case "dnase":
-      return "DNase";
-    case "atac":
-      return "ATAC";
-    case "h3k4me3":
-      return "H3K4me3";
-    case "h3k27ac":
-      return "H3K27ac";
-    case "ctcf":
-      return "CTCF";
-    case "chromhmm":
-      return "ChromHMM";
-    case "ccre":
-      return "cCRE";
-    case "rnaseq":
-      return "RNA-seq";
-    default:
-      return assay;
-  }
-}
-
-/** Convert display assay name to JSON format */
-function toJsonAssayType(displayName: string): string {
-  switch (displayName.toLowerCase()) {
-    case "dnase":
-      return "dnase";
-    case "atac":
-      return "atac";
-    case "h3k4me3":
-      return "h3k4me3";
-    case "h3k27ac":
-      return "h3k27ac";
-    case "ctcf":
-      return "ctcf";
-    case "chromhmm":
-      return "chromhmm";
-    case "ccre":
-      return "ccre";
-    case "rna-seq":
-      return "rnaseq";
-    default:
-      return displayName.toLowerCase();
-  }
-}
-
-// use to get nested data in JSON file
-function getNestedValue(obj: any, path: string): any {
-  return path.split(".").reduce((acc, key) => acc && acc[key], obj);
-}
-
-export function getTracksByAssayAndOntology(
-  assay: string,
-  ontology: string,
-  tracksData: ReturnType<typeof getTracksData>,
-): TrackInfo[] {
-  let res: TrackInfo[] = [];
-  const data = getNestedValue(tracksData, "tracks");
-  const jsonAssay = toJsonAssayType(assay);
-
-  data.forEach((track: TrackInfo) => {
-    const filteredAssays =
-      track.assays?.filter((e: AssayInfo) => e.assay === jsonAssay) || [];
-    if (
-      filteredAssays.length > 0 &&
-      track.ontology === ontology.toLowerCase()
-    ) {
-      res.push({
-        ...track,
-        assays: filteredAssays,
-      });
-    }
-  });
-  return res;
-}
-
-/** Flatten TrackInfo into RowInfo objects for DataGrid display.
- * @param track TrackInfo object containing information from JSON file
- * @returns Array of flattened RowInfo objects, one per assay
- */
-export function flattenIntoRows(track: TrackInfo): RowInfo[] {
-  const { ontology, lifeStage, sampleType, displayname } = track;
-
-  return track.assays.map(
-    ({ id, assay, experimentAccession, fileAccession, url }) => ({
-      id,
-      ontology: capitalize(ontology),
-      lifeStage: capitalize(lifeStage),
-      sampleType: capitalize(sampleType),
-      displayname: capitalize(displayname),
-      assay: formatAssayType(assay),
-      experimentAccession,
-      fileAccession,
-      url,
-    }),
-  );
-}
-
-/**
- * Fuzzy search in tracks stored in a JSON file.
- *
- * @param jsonStructure - Dot-separated path to the data array in the JSON structure.
- * @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 searchTracks({
-  jsonStructure,
-  query,
-  keyWeightMap,
-  threshold = 0.75,
-  tracksData,
-}: SearchTracksProps & {
-  tracksData: ReturnType<typeof getTracksData>;
-}): FuseResult<TrackInfo>[] {
-  const data = getNestedValue(tracksData, jsonStructure ?? "");
-
-  const fuse = new Fuse(data, {
-    includeScore: true,
-    shouldSort: true,
-    threshold: threshold,
-    keys: keyWeightMap,
-  });
-  return fuse.search(query);
-}

package/src/TrackSelect/TreeView/treeViewHelpers.tsx

@@ -1,475 +0,0 @@
-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";
-
-/** Format an ID like "h3k27ac-ENCFF922YMQ" to "H3K27ac - ENCFF922YMQ" */
-function formatIdLabel(id: string): string {
-  const hyphenIndex = id.indexOf("-");
-  if (hyphenIndex === -1) return id;
-
-  const assayPart = id.substring(0, hyphenIndex);
-  let accessionPart = id.substring(hyphenIndex + 1);
-
-  // Truncate accession parts to 15 characters
-  if (accessionPart.length > 25)
-    accessionPart = accessionPart.substring(0, 15) + "…";
-
-  const formattedAssay = formatAssayName(assayPart);
-  return `${formattedAssay} - ${accessionPart}`;
-}
-
-function formatAssayName(assay: string): string {
-  switch (assay.toLowerCase()) {
-    case "dnase":
-      return "DNase";
-    case "atac":
-      return "ATAC";
-    case "h3k4me3":
-      return "H3K4me3";
-    case "h3k27ac":
-      return "H3K27ac";
-    case "ctcf":
-      return "CTCF";
-    case "chromhmm":
-      return "ChromHMM";
-    case "ccre":
-      return "cCRE";
-    case "rnaseq":
-      return "RNA-seq";
-    default:
-      return assay;
-  }
-}
-
-/**
- * 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.id);
-    if (!expNode) {
-      expNode = {
-        id: row.id,
-        isAssayItem: false,
-        label: formatIdLabel(row.id),
-        icon: "removeable",
-        assayName: row.assay,
-        children: [],
-        allExpAccessions: [row.id],
-      };
-      sampleAssayMap.set(row.displayname + row.assay, expNode);
-      displayNameNode.children!.push(expNode);
-    }
-    assayNode.allExpAccessions!.push(row.id);
-    ontologyNode.allExpAccessions!.push(row.id);
-    displayNameNode.allExpAccessions!.push(row.id);
-    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.id,
-        label: formatIdLabel(row.id),
-        icon: "removeable",
-        assayName: row.assay,
-        children: [],
-        allExpAccessions: [row.id],
-      };
-      sampleAssayMap.set(row.displayname + row.assay, expNode);
-      displayNameNode.children!.push(expNode);
-    }
-    ontologyNode.allExpAccessions!.push(row.id);
-    displayNameNode.allExpAccessions!.push(row.id);
-    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",
-    cCRE: "#8b5cf6",
-    "RNA-seq": "#f97316",
-  };
-  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,
-  isAssayItem,
-  assayName,
-  ...other
-}: CustomLabelProps) {
-  const variant = isAssayItem ? "subtitle2" : "body2";
-  const fontWeight = 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={1} alignItems="center">
-        {isAssayItem && AssayIcon(other.id)}
-        {assayName && AssayIcon(assayName)}
-        <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,
-  "&: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,
-              assayName: item.assayName,
-              id: item.id,
-            })}
-          />
-        </TreeItemContent>
-        {children && <Collapse {...getGroupTransitionProps()} />}
-      </TreeItemRoot>
-    </TreeItemProvider>
-  );
-});

package/src/TrackSelect/consts.ts

@@ -1,92 +0,0 @@
-import {
-  getTracksByAssayAndOntology,
-  flattenIntoRows,
-  getTracksData,
-} from "./DataGrid/dataGridHelpers";
-import { RowInfo, TrackInfo } from "./types";
-
-export type Assembly = "GRCh38" | "mm10";
-
-export const assayTypes = [
-  "cCRE",
-  "DNase",
-  "H3K4me3",
-  "H3K27ac",
-  "ATAC",
-  "CTCF",
-  "RNA-seq",
-  "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",
-];
-
-/**
- * Build rows and rowById for a specific assembly
- */
-export function buildRowsForAssembly(assembly: Assembly): {
-  rows: RowInfo[];
-  rowById: Map<string, RowInfo>;
-} {
-  const tracksData = getTracksData(assembly);
-  const rows = ontologyTypes.flatMap((ontology) =>
-    assayTypes.flatMap((assay) =>
-      getTracksByAssayAndOntology(
-        assay.toLowerCase(),
-        ontology.toLowerCase(),
-        tracksData,
-      ).flatMap((r: TrackInfo) =>
-        flattenIntoRows(r).map((flat) => ({
-          ...flat,
-          assay,
-          ontology,
-        })),
-      ),
-    ),
-  );
-  const rowById = new Map<string, RowInfo>(rows.map((r) => [r.id, r]));
-  return { rows, rowById };
-}