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

package/src/TrackSelect/TreeView/CustomTreeItem.tsx

@@ -0,0 +1,217 @@
+import Folder from "@mui/icons-material/Folder";
+import IndeterminateCheckBoxRoundedIcon from "@mui/icons-material/IndeterminateCheckBoxRounded";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import Collapse from "@mui/material/Collapse";
+import { alpha, styled } from "@mui/material/styles";
+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, { ReactNode } from "react";
+import {
+  CustomLabelProps,
+  CustomTreeItemProps,
+  ExtendedTreeItemProps,
+} from "../types";
+
+// 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",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+function CustomLabel({
+  icon: Icon,
+  children,
+  isAssayItem,
+  assayName,
+  renderIcon,
+  ...other
+}: CustomLabelProps) {
+  const variant = isAssayItem ? "subtitle2" : "body2";
+  const fontWeight = isAssayItem ? "bold" : 500;
+  const labelText = typeof children === "string" ? children : "";
+  return (
+    <TreeItemLabel
+      {...other}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        minWidth: 0,
+        overflow: "hidden",
+        flex: 1,
+      }}
+    >
+      {Icon && React.isValidElement(Icon) ? (
+        <Box className="labelIcon" sx={{ mr: 1, flexShrink: 0 }}>
+          {Icon}
+        </Box>
+      ) : (
+        <Box
+          component={Icon as React.ElementType}
+          className="labelIcon"
+          color="inherit"
+          sx={{ mr: 1, fontSize: "1.2rem", flexShrink: 0 }}
+        />
+      )}
+      <Stack
+        direction="row"
+        spacing={1}
+        alignItems="center"
+        sx={{ minWidth: 0, overflow: "hidden", flex: 1 }}
+      >
+        {isAssayItem && renderIcon && (
+          <Box sx={{ flexShrink: 0 }}>{renderIcon(other.id)}</Box>
+        )}
+        {assayName && renderIcon && (
+          <Box sx={{ flexShrink: 0 }}>{renderIcon(assayName)}</Box>
+        )}
+        <Tooltip title={labelText} enterDelay={500} placement="top">
+          <TreeItemLabelText fontWeight={fontWeight} variant={variant}>
+            {labelText}
+          </TreeItemLabelText>
+        </Tooltip>
+      </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,
+  renderIcon?: (name: string) => ReactNode,
+) => {
+  switch (itemType) {
+    case "folder":
+      return Folder;
+    case "removeable":
+      return IndeterminateCheckBoxRoundedIcon;
+    default:
+      return renderIcon ? renderIcon(itemType) : Folder;
+  }
+};
+
+export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+  props: CustomTreeItemProps,
+  ref: React.Ref<HTMLLIElement>,
+) {
+  const {
+    id,
+    itemId,
+    label,
+    disabled,
+    children,
+    onRemove,
+    renderIcon,
+    ...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, renderIcon);
+
+  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,
+              renderIcon,
+            })}
+          />
+        </TreeItemContent>
+        {children && <Collapse {...getGroupTransitionProps()} />}
+      </TreeItemRoot>
+    </TreeItemProvider>
+  );
+});

package/src/TrackSelect/TreeView/TreeViewWrapper.tsx

@@ -1,50 +1,61 @@
-import { Box, Paper, Typography } from "@mui/material";
+import { Avatar, Box, Paper, Typography } from "@mui/material";
 import { RichTreeView, TreeViewBaseItem } from "@mui/x-tree-view";
+import { useEffect, useMemo, useState } from "react";
 import {
   CustomTreeItemProps,
   ExtendedTreeItemProps,
   TreeViewWrapperProps,
 } from "../types";
-import { CustomTreeItem } from "./treeViewHelpers";
-import { Avatar } from "@mui/material";
+import { CustomTreeItem } from "./CustomTreeItem";
+
+/**
+ * Recursively collects all item IDs that have children (expandable items)
+ */
+function getAllExpandableItemIds(
+  items: TreeViewBaseItem<ExtendedTreeItemProps>[],
+): string[] {
+  const ids: string[] = [];
+  for (const item of items) {
+    if (item.children && item.children.length > 0) {
+      ids.push(item.id);
+      ids.push(...getAllExpandableItemIds(item.children));
+    }
+  }
+  return ids;
+}
 
 export function TreeViewWrapper({
-  store,
   items,
-  trackIds,
-  isSearchResult,
+  selectedCount,
+  onRemove,
+  TreeItemComponent,
 }: TreeViewWrapperProps) {
-  const removeIds = store((s) => s.removeIds);
-  const rowById = store((s) => s.rowById);
+  const allExpandableIds = useMemo(
+    () => getAllExpandableItemIds(items),
+    [items],
+  );
+  const [expandedItems, setExpandedItems] =
+    useState<string[]>(allExpandableIds);
+
+  // Auto-expand new items when they're added
+  useEffect(() => {
+    setExpandedItems((prev) => {
+      const newIds = allExpandableIds.filter((id) => !prev.includes(id));
+      if (newIds.length > 0) {
+        return [...prev, ...newIds];
+      }
+      return prev;
+    });
+  }, [allExpandableIds]);
 
   const handleRemoveTreeItem = (
     item: TreeViewBaseItem<ExtendedTreeItemProps>,
   ) => {
-    const removedIds = item.allExpAccessions;
-    if (removedIds && removedIds.length) {
-      const idsToRemove = new Set(removedIds);
-
-      // Also remove any auto-generated group IDs that contain these tracks
-      removedIds.forEach((id) => {
-        const row = rowById.get(id);
-        if (row) {
-          // Add the auto-generated group IDs for this track's grouping hierarchy
-          // Default view: ontology -> displayname
-          idsToRemove.add(`auto-generated-row-ontology/${row.ontology}`);
-          idsToRemove.add(
-            `auto-generated-row-ontology/${row.ontology}-displayname/${row.displayname}`,
-          );
-          // Sorted by assay view: assay -> ontology -> displayname
-          idsToRemove.add(`auto-generated-row-assay/${row.assay}`);
-          idsToRemove.add(
-            `auto-generated-row-assay/${row.assay}-ontology/${row.ontology}`,
-          );
-        }
-      });
-      removeIds(idsToRemove);
-    }
+    onRemove(item);
   };
 
+  const TreeItem = TreeItemComponent ?? CustomTreeItem;
+
   return (
     <Paper
       sx={{
@@ -78,16 +89,9 @@ export function TreeViewWrapper({
             color: "text.primary",
           }}
         >
-          {trackIds.size}
+          {selectedCount}
         </Avatar>
-        <Typography fontWeight="bold">
-          Active Tracks
-          {isSearchResult && (
-            <Typography component="span" color="text.secondary" sx={{ ml: 1 }}>
-              ({items[0].allRowInfo!.length} search results)
-            </Typography>
-          )}
-        </Typography>
+        <Typography fontWeight="bold">Active Tracks</Typography>
       </Box>
       <Box
         sx={{
@@ -97,8 +101,9 @@ export function TreeViewWrapper({
       >
         <RichTreeView
           items={items}
-          defaultExpandedItems={["1"]}
-          slots={{ item: CustomTreeItem }}
+          expandedItems={expandedItems}
+          onExpandedItemsChange={(_event, ids) => setExpandedItems(ids)}
+          slots={{ item: TreeItem }}
           slotProps={{
             item: {
               onRemove: handleRemoveTreeItem,

package/src/TrackSelect/store.ts

@@ -1,60 +1,117 @@
 import { create, StoreApi, UseBoundStore } from "zustand";
-import { buildRowsForAssembly, Assembly } from "./consts";
-import { RowInfo, SelectionAction, SelectionState } from "./types";
+import { SelectionAction, SelectionState } from "./types";
 
 export type SelectionStoreInstance = UseBoundStore<
   StoreApi<SelectionState & SelectionAction>
 >;
 
-// Helper to check if an ID is auto-generated by DataGrid grouping
-// const isAutoGeneratedId = (id: string) => id.startsWith("auto-generated-row-");
+const DEFAULT_STORAGE_KEY = "trackSelect_selection";
+
+type SerializedSelection = Record<string, string[]>;
+
+const serializeSelection = (
+  selection: Map<string, Set<string>>,
+): SerializedSelection => {
+  const obj: SerializedSelection = {};
+  selection.forEach((ids, folderId) => {
+    obj[folderId] = Array.from(ids);
+  });
+  return obj;
+};
+
+const deserializeSelection = (
+  data: SerializedSelection,
+): Map<string, Set<string>> => {
+  const map = new Map<string, Set<string>>();
+  Object.entries(data).forEach(([folderId, ids]) => {
+    map.set(folderId, new Set(ids));
+  });
+  return map;
+};
+
+const loadFromStorage = (
+  storageKey: string,
+): Map<string, Set<string>> | undefined => {
+  try {
+    const stored = sessionStorage.getItem(storageKey);
+    if (stored) {
+      const parsed = JSON.parse(stored) as SerializedSelection;
+      return deserializeSelection(parsed);
+    }
+  } catch {
+    // Ignore storage errors
+  }
+  return undefined;
+};
+
+const saveToStorage = (
+  selection: Map<string, Set<string>>,
+  storageKey: string,
+) => {
+  try {
+    const serialized = serializeSelection(selection);
+    sessionStorage.setItem(storageKey, JSON.stringify(serialized));
+  } catch {
+    // Ignore storage errors
+  }
+};
+
+const buildSelectionMap = (
+  folderIds: string[],
+  initialSelection?: Map<string, Set<string>>,
+) => {
+  const map = new Map<string, Set<string>>();
+  folderIds.forEach((folderId) => {
+    const initial = initialSelection?.get(folderId);
+    map.set(folderId, initial ? new Set(initial) : new Set<string>());
+  });
+  return map;
+};
 
 export function createSelectionStore(
-  assembly: Assembly,
-  initialIds?: Set<string>,
+  folderIds: string[],
+  storageKey: string = DEFAULT_STORAGE_KEY,
+  initialSelection?: Map<string, Set<string>>,
 ) {
-  const { rows, rowById } = buildRowsForAssembly(assembly);
-
-  return create<SelectionState & SelectionAction>((set, get) => ({
-    maxTracks: 30,
-    assembly,
-    rows,
-    rowById,
-    // Stores ALL selected IDs, including auto-generated group IDs
-    selectedIds: initialIds ? new Set(initialIds) : new Set<string>(),
-    // Returns only real track IDs (filters out auto-generated group IDs)
-    getTrackIds: () => {
-      const all = get().selectedIds;
-      const storeRowById = get().rowById;
-      return new Set([...all].filter((id) => storeRowById.has(id)));
-    },
-    // Returns a Map of track IDs to RowInfo (no auto-generated IDs)
-    getTrackMap: () => {
-      const all = get().selectedIds;
-      const storeRowById = get().rowById;
-      const map = new Map<string, RowInfo>();
-      all.forEach((id) => {
-        if (storeRowById.has(id)) {
-          const row = storeRowById.get(id);
-          if (row) {
-            map.set(id, row);
-          }
-        }
-      });
-      return map;
-    },
-    setSelected: (ids: Set<string>) =>
-      set(() => ({
-        selectedIds: new Set(ids),
-      })),
-    removeIds: (removedIds: Set<string>) =>
+  const storedSelection = loadFromStorage(storageKey);
+  // Storage wins: use stored if exists, else fall back to initialSelection
+  const selectedByFolder = buildSelectionMap(
+    folderIds,
+    storedSelection ?? initialSelection,
+  );
+  const activeFolderId = folderIds[0] ?? "";
+
+  const store = create<SelectionState & SelectionAction>((set) => ({
+    selectedByFolder,
+    activeFolderId,
+    clear: (folderId?: string) =>
       set((state) => {
-        const next = new Set(state.selectedIds);
-        removedIds.forEach((id) => {
-          next.delete(id);
+        if (folderId) {
+          const next = new Map(state.selectedByFolder);
+          next.set(folderId, new Set<string>());
+          return { selectedByFolder: next };
+        }
+
+        const next = new Map<string, Set<string>>();
+        state.selectedByFolder.forEach((_value, id) => {
+          next.set(id, new Set<string>());
         });
-        return { selectedIds: next };
+        return { selectedByFolder: next };
+      }),
+    setActiveFolder: (folderId: string) =>
+      set(() => ({ activeFolderId: folderId })),
+    setSelection: (folderId: string, ids: Set<string>) =>
+      set((state) => {
+        const next = new Map(state.selectedByFolder);
+        next.set(folderId, new Set(ids));
+        return { selectedByFolder: next };
       }),
-    clear: () => set(() => ({ selectedIds: new Set<string>() })),
   }));
+
+  // Subscribe to changes and persist to storage
+  store.subscribe((state) => {
+    saveToStorage(state.selectedByFolder, storageKey);
+  });
+
+  return store;
 }

package/src/TrackSelect/types.ts

@@ -1,57 +1,12 @@
-import { FuseOptionKey } from "fuse.js";
 import { UseTreeItemParameters } from "@mui/x-tree-view/useTreeItem";
 import { TreeViewBaseItem } from "@mui/x-tree-view";
 import {
   DataGridPremiumProps,
-  GridRowSelectionModel,
+  GridColDef,
+  GridRenderCellParams,
 } 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 = {
-  id: string;
-  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 = {
-  id: string;
-  ontology: string;
-  lifeStage: string;
-  sampleType: string;
-  displayname: string;
-  assay: string;
-  experimentAccession: string;
-  fileAccession: string;
-  url: string;
-};
 
 /**
  * Custom Tree Props for RichTreeView Panel
@@ -60,6 +15,7 @@ export type ExtendedTreeItemProps = {
   id: string;
   label: string;
   icon: string;
+  folderId?: string;
   isAssayItem?: boolean;
   /**
    * The assay name for leaf nodes (experiment accession items)
@@ -70,15 +26,16 @@ export type ExtendedTreeItemProps = {
    * 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>[];
-  trackIds: Set<string>; // real track IDs only (no auto-generated)
-  isSearchResult: boolean;
+  selectedCount: number;
+  onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
+  /** Optional custom TreeItem component */
+  TreeItemComponent?: React.ForwardRefExoticComponent<
+    CustomTreeItemProps & React.RefAttributes<HTMLLIElement>
+  >;
 };
 
 export interface CustomLabelProps {
@@ -86,38 +43,31 @@ export interface CustomLabelProps {
   children: React.ReactNode;
   isAssayItem?: boolean;
   assayName?: string;
-  icon: React.ElementType | React.ReactElement;
+  icon?: React.ElementType | React.ReactElement | ReactNode;
+  /** Optional function to render custom icons for assay items */
+  renderIcon?: (name: string) => ReactNode;
 }
 
 export interface CustomTreeItemProps
   extends Omit<UseTreeItemParameters, "rootRef">,
     Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {
   onRemove?: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
+  /** Optional function to render custom icons for assay items */
+  renderIcon?: (name: string) => ReactNode;
 }
 
 /**
  * Types for useSelectionStore to keep track of selected DataGrid rows/tracks
  */
 export type SelectionState = {
-  maxTracks: number;
-  // Assembly determines which JSON data to use
-  assembly: string;
-  // All available rows for the current assembly
-  rows: RowInfo[];
-  // Map of id -> RowInfo for fast lookup
-  rowById: Map<string, RowInfo>;
-  // All selected IDs including auto-generated group IDs from DataGrid
-  selectedIds: Set<string>;
+  selectedByFolder: Map<string, Set<string>>;
+  activeFolderId: string;
 };
 
 export type SelectionAction = {
-  // Returns only real track IDs (filters out auto-generated group IDs)
-  getTrackIds: () => Set<string>;
-  // Returns a Map of track IDs to RowInfo (no auto-generated IDs)
-  getTrackMap: () => Map<string, RowInfo>;
-  setSelected: (ids: Set<string>) => void;
-  removeIds: (removedIds: Set<string>) => void;
-  clear: () => void;
+  clear: (folderId?: string) => void;
+  setActiveFolder: (folderId: string) => void;
+  setSelection: (folderId: string, ids: Set<string>) => void;
 };
 
 /**
@@ -140,11 +90,15 @@ interface BaseTableProps extends Omit<DataGridPremiumProps, "columns"> {
   toolbarIconColor?: SvgIconOwnProps["htmlColor"];
 }
 
-type DataGridWrapperProps = {
-  rows: RowInfo[];
-  selectedIds: Set<string>; // all IDs including auto-generated group IDs
-  handleSelection: (newSelection: GridRowSelectionModel) => void;
-  sortedAssay: boolean;
+export type DataGridWrapperProps = {
+  rows: any[];
+  columns: GridColDef[];
+  groupingModel: string[];
+  leafField: string;
+  selectedIds: Set<string>;
+  onSelectionChange: (ids: Set<string>) => void;
+  /** Optional custom component for rendering grouping cells */
+  GroupingCellComponent?: React.FC<GridRenderCellParams>;
 };
 
 //This enforces that a downloadFileName is specified if a ReactElement is used as the label (no default )

package/src/lib.ts

@@ -7,5 +7,5 @@ import {
 } from "./TrackSelect/store.ts";
 export { createSelectionStore, SelectionStoreInstance };
 
-import type { RowInfo } from "./TrackSelect/types.ts";
-export { RowInfo };
+import { foldersByAssembly } from "./TrackSelect/Folders/index.ts";
+export { foldersByAssembly };