@weng-lab/genomebrowser-ui 0.3.6 → 0.4.0-beta.1

package/src/TrackSelect/TreeView/CustomTreeItem.tsx

@@ -30,19 +30,19 @@ const TreeItemRoot = styled("li")(({ theme }) => ({
   }),
 }));
 
-const TreeItemLabelText = styled(Typography)({
-  color: "black",
+const TreeItemLabelText = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
   fontFamily: "inherit",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
-});
+}));
 
 function CustomLabel({
   icon: Icon,
   children,
-  isAssayItem,
-  assayName,
+  isHighlightedItem,
+  highlightName,
   renderIcon,
   ...other
 }: CustomLabelProps) {
@@ -78,8 +78,8 @@ function CustomLabel({
         alignItems="center"
         sx={{ minWidth: 0, overflow: "hidden", flex: 1 }}
       >
-        {assayName && renderIcon && (
-          <Box sx={{ flexShrink: 0 }}>{renderIcon(assayName)}</Box>
+        {isHighlightedItem && highlightName && renderIcon && (
+          <Box sx={{ flexShrink: 0 }}>{renderIcon(highlightName)}</Box>
         )}
         <Tooltip title={labelText} enterDelay={500} placement="top">
           <TreeItemLabelText fontWeight={fontWeight} variant={variant}>
@@ -199,8 +199,8 @@ export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
                   icon
                 ),
               expandable: (status.expandable && status.expanded).toString(),
-              isAssayItem: item.isAssayItem,
-              assayName: item.assayName,
+              isHighlightedItem: item.isHighlightedItem,
+              highlightName: item.highlightName,
               id: item.id,
               renderIcon,
             })}

package/src/TrackSelect/TreeView/TreeViewWrapper.tsx

@@ -1,14 +1,29 @@
 import { Avatar, Box, Paper, Typography } from "@mui/material";
 import { RichTreeView, TreeViewBaseItem } from "@mui/x-tree-view";
-import { useEffect, useMemo, useState } from "react";
+import { useTreeItemModel } from "@mui/x-tree-view/hooks";
+import React, { useEffect, useMemo, useState } from "react";
+import { buildSelectedTree } from "../buildSelectedTree";
 import {
   CustomTreeItemProps,
   ExtendedTreeItemProps,
-  FolderTreeConfig,
   TreeViewWrapperProps,
 } from "../types";
+import { resolveFolderView } from "../resolveFolderView";
 import { CustomTreeItem } from "./CustomTreeItem";
 
+const attachFolderId = (
+  items: TreeViewBaseItem<ExtendedTreeItemProps>[],
+  folderId: string,
+): TreeViewBaseItem<ExtendedTreeItemProps>[] => {
+  return items.map((item) => ({
+    ...item,
+    folderId,
+    children: item.children
+      ? attachFolderId(item.children, folderId)
+      : undefined,
+  }));
+};
+
 function getAllExpandableItemIds(
   items: TreeViewBaseItem<ExtendedTreeItemProps>[],
 ): string[] {
@@ -24,11 +39,17 @@ function getAllExpandableItemIds(
 
 function FolderTree({
   items,
+  LeafTreeItemComponent,
   TreeItemComponent,
   onRemove,
 }: {
-  items: FolderTreeConfig["items"];
-  TreeItemComponent: FolderTreeConfig["TreeItemComponent"];
+  items: TreeViewBaseItem<ExtendedTreeItemProps>[];
+  LeafTreeItemComponent?: React.ForwardRefExoticComponent<
+    CustomTreeItemProps & React.RefAttributes<HTMLLIElement>
+  >;
+  TreeItemComponent?: React.ForwardRefExoticComponent<
+    CustomTreeItemProps & React.RefAttributes<HTMLLIElement>
+  >;
   onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
 }) {
   const allExpandableIds = useMemo(
@@ -54,7 +75,27 @@ function FolderTree({
     onRemove(item);
   };
 
-  const TreeItem = TreeItemComponent ?? CustomTreeItem;
+  const TreeItem = useMemo(
+    () =>
+      TreeItemComponent || LeafTreeItemComponent
+        ? React.forwardRef<HTMLLIElement, CustomTreeItemProps>(
+            function TreeItem(props, ref) {
+              const item = useTreeItemModel<ExtendedTreeItemProps>(
+                props.itemId,
+              );
+              const Component =
+                item?.kind === "leaf"
+                  ? (LeafTreeItemComponent ??
+                    TreeItemComponent ??
+                    CustomTreeItem)
+                  : (TreeItemComponent ?? CustomTreeItem);
+
+              return <Component {...props} ref={ref} />;
+            },
+          )
+        : CustomTreeItem,
+    [LeafTreeItemComponent, TreeItemComponent],
+  );
 
   return (
     <RichTreeView
@@ -80,10 +121,46 @@ function FolderTree({
 }
 
 export function TreeViewWrapper({
-  folderTrees,
+  folders,
+  selectedByFolder,
+  activeViewIdByFolder,
   selectedCount,
   onRemove,
 }: TreeViewWrapperProps) {
+  const folderTrees = useMemo(
+    () =>
+      folders.flatMap((folder) => {
+        const folderSelectedIds = selectedByFolder.get(folder.id);
+        if (!folderSelectedIds || folderSelectedIds.size === 0) {
+          return [];
+        }
+
+        const activeView = resolveFolderView(folder, activeViewIdByFolder);
+        const selectedRows = folder.rows.filter((row) =>
+          folderSelectedIds.has(row.id),
+        );
+
+        return [
+          {
+            folderId: folder.id,
+            items: attachFolderId(
+              buildSelectedTree({
+                folderId: folder.id,
+                rootLabel: folder.label,
+                selectedRows,
+                groupingModel: activeView.groupingModel,
+                leafField: activeView.leafField,
+              }),
+              folder.id,
+            ),
+            TreeItemComponent: folder.TreeItemComponent,
+            LeafTreeItemComponent: folder.LeafTreeItemComponent,
+          },
+        ];
+      }),
+    [activeViewIdByFolder, folders, selectedByFolder],
+  );
+
   return (
     <Paper
       sx={{
@@ -131,6 +208,7 @@ export function TreeViewWrapper({
           <FolderTree
             key={folderTree.folderId}
             items={folderTree.items}
+            LeafTreeItemComponent={folderTree.LeafTreeItemComponent}
             TreeItemComponent={folderTree.TreeItemComponent}
             onRemove={onRemove}
           />

package/src/TrackSelect/buildSelectedTree.ts

@@ -0,0 +1,145 @@
+import { TreeViewBaseItem } from "@mui/x-tree-view";
+import { ExtendedTreeItemProps } from "./types";
+
+type TreeRow = {
+  id: string;
+  [key: string]: unknown;
+};
+
+type BuildSelectedTreeOptions = {
+  folderId: string;
+  rootLabel: string;
+  selectedRows: TreeRow[];
+  groupingModel: string[];
+  leafField: string;
+};
+
+const toLabel = (value: unknown, fallback: string) => {
+  if (value === null || value === undefined || value === "") {
+    return fallback;
+  }
+
+  return String(value);
+};
+
+const isHighlightedField = (field: string) => {
+  return field === "assay" || field === "ome";
+};
+
+const createRootNode = (
+  folderId: string,
+  rootLabel: string,
+): TreeViewBaseItem<ExtendedTreeItemProps> => ({
+  id: `${folderId}::root`,
+  kind: "root",
+  label: rootLabel,
+  icon: "folder",
+  children: [],
+  allExpAccessions: [],
+});
+
+const createLeafNode = (
+  row: TreeRow,
+  leafField: string,
+): TreeViewBaseItem<ExtendedTreeItemProps> => {
+  const value = row[leafField];
+  const label = toLabel(value, row.id);
+
+  return {
+    id: row.id,
+    kind: "leaf",
+    field: leafField,
+    value: label,
+    rowId: row.id,
+    label,
+    icon: "removeable",
+    highlightName: isHighlightedField(leafField) ? label : undefined,
+    isHighlightedItem: isHighlightedField(leafField),
+    children: [],
+    allExpAccessions: [row.id],
+  };
+};
+
+const appendGroupedRows = (
+  parent: TreeViewBaseItem<ExtendedTreeItemProps>,
+  rows: TreeRow[],
+  groupingModel: string[],
+  depth: number,
+  folderId: string,
+  leafField: string,
+  path: string[],
+) => {
+  if (depth >= groupingModel.length) {
+    rows.forEach((row) => {
+      const leafNode = createLeafNode(row, leafField);
+      parent.children!.push(leafNode);
+      parent.allExpAccessions!.push(row.id);
+    });
+    return;
+  }
+
+  const field = groupingModel[depth];
+  const groupedRows = new Map<string, TreeRow[]>();
+
+  rows.forEach((row) => {
+    const value = toLabel(row[field], row.id);
+    const groupRows = groupedRows.get(value);
+    if (groupRows) {
+      groupRows.push(row);
+      return;
+    }
+
+    groupedRows.set(value, [row]);
+  });
+
+  groupedRows.forEach((groupRows, value) => {
+    const nodeId = `${folderId}::${[...path, `${field}=${encodeURIComponent(value)}`].join("::")}`;
+    const groupNode: TreeViewBaseItem<ExtendedTreeItemProps> = {
+      id: nodeId,
+      kind: "group",
+      field,
+      value,
+      label: value,
+      icon: "removeable",
+      highlightName: isHighlightedField(field) ? value : undefined,
+      isHighlightedItem: isHighlightedField(field),
+      children: [],
+      allExpAccessions: [],
+    };
+
+    appendGroupedRows(
+      groupNode,
+      groupRows,
+      groupingModel,
+      depth + 1,
+      folderId,
+      leafField,
+      [...path, `${field}=${encodeURIComponent(value)}`],
+    );
+
+    parent.children!.push(groupNode);
+    parent.allExpAccessions!.push(...groupNode.allExpAccessions!);
+  });
+};
+
+export const buildSelectedTree = ({
+  folderId,
+  rootLabel,
+  selectedRows,
+  groupingModel,
+  leafField,
+}: BuildSelectedTreeOptions): TreeViewBaseItem<ExtendedTreeItemProps>[] => {
+  const root = createRootNode(folderId, rootLabel);
+
+  appendGroupedRows(
+    root,
+    selectedRows,
+    groupingModel,
+    0,
+    folderId,
+    leafField,
+    [],
+  );
+
+  return [root];
+};

package/src/TrackSelect/managedTracks.ts

@@ -0,0 +1,92 @@
+import { Track } from "@weng-lab/genomebrowser";
+import { Assembly, FolderDefinition } from "./Folders/types";
+import type { TrackSelectTrackContext } from "./trackContext";
+
+const buildManagedTrack = ({
+  assembly,
+  folder,
+  id,
+  trackContext,
+}: {
+  assembly: Assembly;
+  folder: FolderDefinition;
+  id: string;
+  trackContext?: TrackSelectTrackContext;
+}) => {
+  const row = folder.rows.find((candidate) => candidate.id === id);
+  if (!row) {
+    return null;
+  }
+
+  const track = folder.createTrack(row, { assembly, trackContext });
+  if (!track) {
+    return null;
+  }
+
+  return track;
+};
+
+export const diffManagedTracks = ({
+  assembly,
+  currentTracks,
+  folders,
+  selectedByFolder,
+  trackContext,
+}: {
+  assembly: Assembly;
+  currentTracks: Track[];
+  folders: FolderDefinition[];
+  selectedByFolder: Map<string, Set<string>>;
+  trackContext?: TrackSelectTrackContext;
+}) => {
+  const nextManagedIds = new Set<string>();
+  const currentManagedIds = new Set<string>();
+  const idsToRemove: string[] = [];
+  const tracksToAdd: Track[] = [];
+
+  currentTracks.forEach((track) => {
+    if (folders.some((folder) => track.id.startsWith(`${folder.id}/`))) {
+      currentManagedIds.add(track.id);
+    }
+  });
+
+  folders.forEach((folder) => {
+    const selectedIds = selectedByFolder.get(folder.id) ?? new Set<string>();
+
+    selectedIds.forEach((id) => {
+      nextManagedIds.add(id);
+    });
+  });
+
+  currentManagedIds.forEach((id) => {
+    if (!nextManagedIds.has(id)) {
+      idsToRemove.push(id);
+    }
+  });
+
+  folders.forEach((folder) => {
+    const selectedIds = selectedByFolder.get(folder.id) ?? new Set<string>();
+
+    selectedIds.forEach((id) => {
+      if (currentManagedIds.has(id)) {
+        return;
+      }
+
+      const track = buildManagedTrack({
+        assembly,
+        folder,
+        id,
+        trackContext,
+      });
+
+      if (track) {
+        tracksToAdd.push(track);
+      }
+    });
+  });
+
+  return {
+    idsToRemove,
+    tracksToAdd,
+  };
+};

package/src/TrackSelect/resolveFolderView.ts

@@ -0,0 +1,20 @@
+import { FolderDefinition, FolderView } from "./Folders/types";
+
+export const resolveFolderView = (
+  folder: FolderDefinition,
+  activeViewIdByFolder: Map<string, string>,
+): FolderView => {
+  const activeViewId = activeViewIdByFolder.get(folder.id);
+  const activeView = folder.views?.find((view) => view.id === activeViewId);
+
+  return (
+    activeView ??
+    folder.views?.[0] ?? {
+      id: "default",
+      label: folder.label,
+      columns: folder.columns,
+      groupingModel: folder.groupingModel,
+      leafField: folder.leafField,
+    }
+  );
+};

package/src/TrackSelect/trackContext.ts

@@ -0,0 +1,9 @@
+import type { BiosampleTrackContext } from "./Folders/biosamples/shared/toTrack";
+import type { GeneTrackContext } from "./Folders/genes/shared/toTrack";
+import type { MohdTrackContext } from "./Folders/mohd/shared/toTrack";
+import type { OtherTracksTrackContext } from "./Folders/other-tracks/shared/toTrack";
+
+export type TrackSelectTrackContext = GeneTrackContext &
+  BiosampleTrackContext &
+  MohdTrackContext &
+  OtherTracksTrackContext;

package/src/TrackSelect/types.ts

@@ -7,6 +7,7 @@ import {
 } from "@mui/x-data-grid-premium";
 import { ReactElement, ReactNode } from "react";
 import { SvgIconOwnProps } from "@mui/material";
+import { FolderDefinition } from "./Folders/types";
 
 /**
  * Custom Tree Props for RichTreeView Panel
@@ -15,12 +16,13 @@ export type ExtendedTreeItemProps = {
   id: string;
   label: string;
   icon: string;
+  kind?: "root" | "group" | "leaf";
+  field?: string;
+  value?: string;
+  rowId?: string;
   folderId?: string;
-  isAssayItem?: boolean;
-  /**
-   * The assay name for leaf nodes (experiment accession items)
-   */
-  assayName?: string;
+  isHighlightedItem?: boolean;
+  highlightName?: string;
   /**
    * 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
@@ -28,22 +30,10 @@ export type ExtendedTreeItemProps = {
   allExpAccessions?: string[];
 };
 
-/**
- * Configuration for a single folder's tree in the TreeViewWrapper.
- * Each folder gets its own tree with its own TreeItemComponent.
- */
-export type FolderTreeConfig = {
-  folderId: string;
-  items: TreeViewBaseItem<ExtendedTreeItemProps>[];
-  /** Optional custom TreeItem component for this folder */
-  TreeItemComponent?: React.ForwardRefExoticComponent<
-    CustomTreeItemProps & React.RefAttributes<HTMLLIElement>
-  >;
-};
-
 export type TreeViewWrapperProps = {
-  /** Array of folder tree configurations, one per folder with selections */
-  folderTrees: FolderTreeConfig[];
+  folders: FolderDefinition[];
+  selectedByFolder: Map<string, Set<string>>;
+  activeViewIdByFolder: Map<string, string>;
   selectedCount: number;
   onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
 };
@@ -51,35 +41,20 @@ export type TreeViewWrapperProps = {
 export interface CustomLabelProps {
   id: string;
   children: React.ReactNode;
-  isAssayItem?: boolean;
-  assayName?: string;
+  isHighlightedItem?: boolean;
+  highlightName?: string;
   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">,
+  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 = {
-  selectedByFolder: Map<string, Set<string>>;
-  activeFolderId: string;
-};
-
-export type SelectionAction = {
-  clear: (folderId?: string) => void;
-  setActiveFolder: (folderId: string) => void;
-  setSelection: (folderId: string, ids: Set<string>) => void;
-};
-
 /**
  * DataGrid Props
  */

package/src/lib.ts

@@ -1,19 +1,25 @@
-import TrackSelect, { type TrackSelectProps } from "./TrackSelect/TrackSelect";
-export { TrackSelect, TrackSelectProps };
+import "./muiLicense";
 
-import {
-  createSelectionStore,
-  type SelectionStoreInstance,
-} from "./TrackSelect/store.ts";
-export { createSelectionStore, SelectionStoreInstance };
+import TrackSelect, {
+  type InitialSelectedIdsByAssembly,
+  type TrackSelectProps,
+} from "./TrackSelect/TrackSelect";
+export { TrackSelect, TrackSelectProps };
+export type { TrackSelectTrackContext } from "./TrackSelect/trackContext";
+export type { InitialSelectedIdsByAssembly };
 
 import { foldersByAssembly } from "./TrackSelect/Folders/index.ts";
 export { foldersByAssembly };
 
 export type {
   BiosampleRowInfo,
+  BiosampleTrackContext,
   GeneRowInfo,
+  GeneTrackContext,
+  MohdRowInfo,
+  MohdTrackContext,
   OtherTrackInfo,
+  OtherTracksTrackContext,
 } from "./TrackSelect/Folders";
 
 import { tfPeaksTrack } from "./TrackSelect/Custom/TfPeaks.tsx";

package/src/muiLicense.ts

@@ -0,0 +1,9 @@
+import { LicenseInfo } from "@mui/x-license";
+
+const muiLicenseKey =
+  import.meta.env.NEXT_PUBLIC_MUI_X_LICENSE_KEY ??
+  import.meta.env.VITE_MUI_X_LICENSE_KEY;
+
+if (muiLicenseKey) {
+  LicenseInfo.setLicenseKey(muiLicenseKey);
+}

package/src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly NEXT_PUBLIC_MUI_X_LICENSE_KEY?: string;
+  readonly VITE_MUI_X_LICENSE_KEY?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}