@weng-lab/genomebrowser-ui 0.2.0-beta.2 → 0.2.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.3",
   "license": "MIT",
   "type": "module",
   "publishConfig": {

package/src/TrackSelect/Folders/biosamples/shared/AssayToggle.tsx

@@ -1,5 +1,4 @@
 import { FormControlLabel, Switch } from "@mui/material";
-import { useState } from "react";
 import { FolderRuntimeConfig } from "../../types";
 import {
   defaultColumns,
@@ -9,9 +8,13 @@ import {
   sortedByAssayGroupingModel,
   sortedByAssayLeafField,
 } from "./columns";
+import { buildTreeView, buildSortedAssayTreeView } from "./treeBuilder";
 
 export interface AssayToggleProps {
   updateConfig: (partial: Partial<FolderRuntimeConfig>) => void;
+  folderId: string;
+  label: string;
+  config: FolderRuntimeConfig;
 }
 
 /**
@@ -20,15 +23,21 @@ export interface AssayToggleProps {
  *
  * When toggled, it updates the folder's runtime config to switch:
  * - columns: Different column definitions for each view
- * - groupingModel: ["ontology", "displayName"] vs ["assay", "ontology", "displayName"]
- * - leafField: "assay" vs "id"
+ * - groupingModel: ["ontology", "displayName"] vs ["assay", "ontology"]
+ * - leafField: "assay" vs "displayName"
+ * - buildTree: Different tree builder function
  */
-export function AssayToggle({ updateConfig }: AssayToggleProps) {
-  const [sortedByAssay, setSortedByAssay] = useState(false);
+export function AssayToggle({
+  updateConfig,
+  folderId,
+  label,
+  config,
+}: AssayToggleProps) {
+  // Derive toggle state from current config's leafField
+  const sortedByAssay = config.leafField === sortedByAssayLeafField;
 
   const handleToggle = () => {
     const newValue = !sortedByAssay;
-    setSortedByAssay(newValue);
 
     if (newValue) {
       // Switch to assay-grouped view
@@ -36,6 +45,8 @@ export function AssayToggle({ updateConfig }: AssayToggleProps) {
         columns: sortedByAssayColumns,
         groupingModel: sortedByAssayGroupingModel,
         leafField: sortedByAssayLeafField,
+        buildTree: (selectedIds, rowById) =>
+          buildSortedAssayTreeView(selectedIds, rowById, label, folderId),
       });
     } else {
       // Switch back to default (sample-grouped) view
@@ -43,6 +54,8 @@ export function AssayToggle({ updateConfig }: AssayToggleProps) {
         columns: defaultColumns,
         groupingModel: defaultGroupingModel,
         leafField: defaultLeafField,
+        buildTree: (selectedIds, rowById) =>
+          buildTreeView(selectedIds, rowById, label, folderId),
       });
     }
   };

package/src/TrackSelect/Folders/biosamples/shared/columns.tsx

@@ -153,13 +153,13 @@ export const defaultColumns: GridColDef<BiosampleRowInfo>[] = [
 ];
 
 /** Grouping model for sorted-by-assay view */
-export const sortedByAssayGroupingModel = ["assay", "ontology", "displayName"];
+export const sortedByAssayGroupingModel = ["assay", "ontology"];
 
 /** Default grouping model (ontology-based) */
 export const defaultGroupingModel = ["ontology", "displayName"];
 
 /** Leaf field for sorted-by-assay view */
-export const sortedByAssayLeafField = "id";
+export const sortedByAssayLeafField = "displayName";
 
 /** Default leaf field */
 export const defaultLeafField = "assay";

package/src/TrackSelect/Folders/biosamples/shared/treeBuilder.ts

@@ -35,7 +35,10 @@ function createRootNode(
 
 /**
  * Builds tree in the sorted by assay view
- * Hierarchy: Assay -> Ontology -> DisplayName -> Experiment
+ * Hierarchy: Assay -> Ontology -> DisplayName (leaf)
+ *
+ * This is the reverse of the default view - instead of grouping by sample first,
+ * we group by assay first, making displayName the leaf node.
  *
  * @param selectedIds - list of selected row IDs
  * @param rowById - Mapping between an id and its BiosampleRowInfo object
@@ -55,6 +58,8 @@ export function buildSortedAssayTreeView(
     string,
     TreeViewBaseItem<ExtendedTreeItemProps>
   >();
+  // Track which displayName nodes exist per assay+ontology combination
+  // and which experiment IDs they contain
   const displayNameMap = new Map<
     string,
     TreeViewBaseItem<ExtendedTreeItemProps>
@@ -75,6 +80,7 @@ export function buildSortedAssayTreeView(
         isAssayItem: true,
         label: row.assay,
         icon: "removeable",
+        assayName: row.assay, // Add assayName so the icon renders correctly
         children: [],
         allExpAccessions: [],
       };
@@ -97,6 +103,7 @@ export function buildSortedAssayTreeView(
       ontologyMap.set(ontologyKey, ontologyNode);
     }
 
+    // DisplayName is now the leaf node (no children, no assay icon)
     const displayNameKey = `${folderId}::${row.assay}-${row.ontology}-${row.displayName}`;
     let displayNameNode = displayNameMap.get(displayNameKey);
     if (!displayNameNode) {
@@ -112,17 +119,7 @@ export function buildSortedAssayTreeView(
       displayNameMap.set(displayNameKey, displayNameNode);
     }
 
-    const expNode: TreeViewBaseItem<ExtendedTreeItemProps> = {
-      id: row.id,
-      isAssayItem: false,
-      label: formatIdLabel(row.id),
-      icon: "removeable",
-      assayName: row.assay,
-      children: [],
-      allExpAccessions: [row.id],
-    };
-    displayNameNode.children!.push(expNode);
-
+    // Add this experiment ID to all parent nodes' allExpAccessions
     assayNode.allExpAccessions!.push(row.id);
     ontologyNode.allExpAccessions!.push(row.id);
     displayNameNode.allExpAccessions!.push(row.id);

package/src/TrackSelect/Folders/types.ts

@@ -7,12 +7,17 @@ export type Assembly = "GRCh38" | "mm10";
 /**
  * Runtime configuration that can be modified by ToolbarExtras components.
  * This allows folder-specific UI (like AssayToggle) to dynamically update
- * how the DataGrid displays data.
+ * how the DataGrid and TreeView display data.
  */
 export interface FolderRuntimeConfig {
   columns: GridColDef[];
   groupingModel: string[];
   leafField: string;
+  /** Optional override for the tree builder function */
+  buildTree?: (
+    selectedIds: string[],
+    rowById: Map<string, any>,
+  ) => TreeViewBaseItem<ExtendedTreeItemProps>[];
 }
 
 /**
@@ -74,9 +79,15 @@ export interface FolderDefinition<TRow = any> {
    * that switches between sample-grouped and assay-grouped views.
    *
    * @param updateConfig - Callback to update the folder's runtime config
+   * @param folderId - The folder's unique identifier
+   * @param label - The folder's display label
+   * @param config - The current runtime config for this folder
    */
   ToolbarExtras?: React.FC<{
     updateConfig: (partial: Partial<FolderRuntimeConfig>) => void;
+    folderId: string;
+    label: string;
+    config: FolderRuntimeConfig;
   }>;
 
   /**

package/src/TrackSelect/TrackSelect.tsx

@@ -167,23 +167,29 @@ export default function TrackSelect({
     return Array.from(activeFolder.rowById.values());
   }, [activeFolder]);
 
-  const treeItems = useMemo(() => {
-    if (!activeFolder) return [];
+  const folderTrees = useMemo(() => {
     return folders
       .filter((folder) => {
         const selected = selectedByFolder.get(folder.id);
         return selected && selected.size > 0;
       })
-      .flatMap((folder) =>
-        attachFolderId(
-          folder.buildTree(
-            Array.from(selectedByFolder.get(folder.id) ?? []),
-            folder.rowById,
+      .map((folder) => {
+        const config = runtimeConfigByFolder.get(folder.id);
+        const buildTree = config?.buildTree ?? folder.buildTree;
+
+        return {
+          folderId: folder.id,
+          items: attachFolderId(
+            buildTree(
+              Array.from(selectedByFolder.get(folder.id) ?? []),
+              folder.rowById,
+            ),
+            folder.id,
           ),
-          folder.id,
-        ),
-      );
-  }, [folders, selectedByFolder, activeFolder]);
+          TreeItemComponent: folder.TreeItemComponent,
+        };
+      });
+  }, [folders, selectedByFolder, runtimeConfigByFolder]);
 
   const updateActiveFolderConfig = useCallback(
     (partial: Partial<FolderRuntimeConfig>) => {
@@ -335,9 +341,16 @@ export default function TrackSelect({
                 ) : (
                   <Box />
                 )}
-                {currentView === "folder-detail" && ToolbarExtras && (
-                  <ToolbarExtras updateConfig={updateActiveFolderConfig} />
-                )}
+                {currentView === "folder-detail" &&
+                  ToolbarExtras &&
+                  activeConfig && (
+                    <ToolbarExtras
+                      updateConfig={updateActiveFolderConfig}
+                      folderId={activeFolder.id}
+                      label={activeFolder.label}
+                      config={activeConfig}
+                    />
+                  )}
               </Box>
             )}
 
@@ -365,10 +378,9 @@ export default function TrackSelect({
               {/* Right panel - always visible */}
               <Box sx={{ flex: 2, minWidth: 0 }}>
                 <TreeViewWrapper
-                  items={treeItems}
+                  folderTrees={folderTrees}
                   selectedCount={selectedCount}
                   onRemove={handleRemoveTreeItem}
-                  TreeItemComponent={activeFolder.TreeItemComponent}
                 />
               </Box>
             </Stack>

package/src/TrackSelect/TreeView/CustomTreeItem.tsx

@@ -47,8 +47,8 @@ function CustomLabel({
   renderIcon,
   ...other
 }: CustomLabelProps) {
-  const variant = isAssayItem ? "subtitle2" : "body2";
-  const fontWeight = isAssayItem ? "bold" : 500;
+  const variant = "body2";
+  const fontWeight = 500;
   const labelText = typeof children === "string" ? children : "";
   return (
     <TreeItemLabel
@@ -79,9 +79,6 @@ function CustomLabel({
         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>
         )}

package/src/TrackSelect/TreeView/TreeViewWrapper.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import {
   CustomTreeItemProps,
   ExtendedTreeItemProps,
+  FolderTreeConfig,
   TreeViewWrapperProps,
 } from "../types";
 import { CustomTreeItem } from "./CustomTreeItem";
@@ -24,12 +25,18 @@ function getAllExpandableItemIds(
   return ids;
 }
 
-export function TreeViewWrapper({
+/**
+ * Internal component that renders a single folder's tree with its own expanded state.
+ */
+function FolderTree({
   items,
-  selectedCount,
-  onRemove,
   TreeItemComponent,
-}: TreeViewWrapperProps) {
+  onRemove,
+}: {
+  items: FolderTreeConfig["items"];
+  TreeItemComponent: FolderTreeConfig["TreeItemComponent"];
+  onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
+}) {
   const allExpandableIds = useMemo(
     () => getAllExpandableItemIds(items),
     [items],
@@ -56,6 +63,31 @@ export function TreeViewWrapper({
 
   const TreeItem = TreeItemComponent ?? CustomTreeItem;
 
+  return (
+    <RichTreeView
+      items={items}
+      expandedItems={expandedItems}
+      onExpandedItemsChange={(_event, ids) => setExpandedItems(ids)}
+      slots={{ item: TreeItem }}
+      slotProps={{
+        item: {
+          onRemove: handleRemoveTreeItem,
+        } as Partial<CustomTreeItemProps>,
+      }}
+      sx={{
+        ml: 1,
+        mr: 1,
+      }}
+      itemChildrenIndentation={0}
+    />
+  );
+}
+
+export function TreeViewWrapper({
+  folderTrees,
+  selectedCount,
+  onRemove,
+}: TreeViewWrapperProps) {
   return (
     <Paper
       sx={{
@@ -99,23 +131,14 @@ export function TreeViewWrapper({
           overflow: "auto",
         }}
       >
-        <RichTreeView
-          items={items}
-          expandedItems={expandedItems}
-          onExpandedItemsChange={(_event, ids) => setExpandedItems(ids)}
-          slots={{ item: TreeItem }}
-          slotProps={{
-            item: {
-              onRemove: handleRemoveTreeItem,
-            } as Partial<CustomTreeItemProps>,
-          }}
-          sx={{
-            ml: 1,
-            mr: 1,
-            height: "100%",
-          }}
-          itemChildrenIndentation={0}
-        />
+        {folderTrees.map((folderTree) => (
+          <FolderTree
+            key={folderTree.folderId}
+            items={folderTree.items}
+            TreeItemComponent={folderTree.TreeItemComponent}
+            onRemove={onRemove}
+          />
+        ))}
       </Box>
     </Paper>
   );

package/src/TrackSelect/types.ts

@@ -28,16 +28,26 @@ export type ExtendedTreeItemProps = {
   allExpAccessions?: string[];
 };
 
-export type TreeViewWrapperProps = {
+/**
+ * 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>[];
-  selectedCount: number;
-  onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
-  /** Optional custom TreeItem component */
+  /** 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[];
+  selectedCount: number;
+  onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
+};
+
 export interface CustomLabelProps {
   id: string;
   children: React.ReactNode;

package/test/main.tsx

@@ -82,8 +82,8 @@ function Main() {
   const currentAssembly: Assembly = "mm10";
 
   const browserStore = createBrowserStoreMemo({
-    // chr12:53,380,176-53,416,446
-    domain: { chromosome: "chr12", start: 53380176, end: 53416446 },
+    // chr7:19,695,494-19,699,803
+    domain: { chromosome: "chr7", start: 19695494, end: 19699803 },
     marginWidth: 100,
     trackWidth: 1400,
     multiplier: 3,