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

package/dist/lib.d.ts

@@ -1,6 +1,6 @@
 import { default as TrackSelect, TrackSelectProps } from './TrackSelect/TrackSelect';
 import { createSelectionStore, SelectionStoreInstance } from './TrackSelect/store.ts';
-import { RowInfo } from './TrackSelect/types.ts';
+import { foldersByAssembly } from './TrackSelect/Folders/index.ts';
 export { TrackSelect, TrackSelectProps };
 export { createSelectionStore, SelectionStoreInstance };
-export { RowInfo };
+export { foldersByAssembly };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.1.11",
+  "version": "0.2.0-beta.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -10,6 +10,7 @@
   "module": "dist/genomebrowser-ui.es.js",
   "types": "dist/lib.d.ts",
   "dependencies": {
+    "@mui/x-license": "^8.25.0",
     "fuse.js": "^7.1.0",
     "zustand": "^5.0.8"
   },
@@ -18,11 +19,10 @@
     "@emotion/styled": "^11.0.0",
     "@mui/icons-material": "^7.3.6",
     "@mui/material": "^7.0.0",
-    "@mui/x-data-grid": "^8.19.0",
     "@mui/x-data-grid-premium": "^8.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@weng-lab/genomebrowser": "1.7.3"
+    "@weng-lab/genomebrowser": "1.7.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",

package/src/TrackSelect/DataGrid/DataGridWrapper.tsx

@@ -7,10 +7,9 @@ import {
   GridColumnVisibilityModel,
   useGridApiRef,
 } from "@mui/x-data-grid-premium";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { DataGridProps } from "../types";
-import { defaultColumns, sortedByAssayColumns } from "./columns";
-import GroupingCell from "./GroupingCell";
+import { DefaultGroupingCell } from "./DefaultGroupingCell";
 
 const autosizeOptions: GridAutosizeOptions = {
   expand: true,
@@ -19,35 +18,49 @@ const autosizeOptions: GridAutosizeOptions = {
 };
 
 export function DataGridWrapper(props: DataGridProps) {
-  const { sortedAssay, handleSelection, rows, selectedIds } = props;
+  const {
+    columns,
+    groupingModel,
+    leafField,
+    onSelectionChange,
+    rows,
+    selectedIds,
+    GroupingCellComponent,
+  } = props;
+
+  const GroupingCell = GroupingCellComponent ?? DefaultGroupingCell;
 
   const apiRef = useGridApiRef();
 
-  // Resize columns when toggling between sort modes
   useEffect(() => {
     if (apiRef.current && apiRef.current.autosizeColumns) {
       apiRef.current.autosizeColumns(autosizeOptions);
     }
-  }, [sortedAssay]);
+  }, [columns, groupingModel, leafField]);
+
+  const baseVisibility = useMemo(() => {
+    const visibility: GridColumnVisibilityModel = {
+      id: false,
+    };
 
-  const groupingModel = sortedAssay
-    ? ["assay", "ontology"]
-    : ["ontology", "displayname"];
-  const columnModel = sortedAssay ? sortedByAssayColumns : defaultColumns;
-  const leafField = sortedAssay ? "displayname" : "assay";
+    // Only hide leafField if we have grouping (it shows in grouping column)
+    if (groupingModel.length > 0) {
+      visibility[leafField] = false;
+    }
 
-  // Hide columns that are used in grouping or as leaf field, plus ID column
-  const baseVisibility: GridColumnVisibilityModel = sortedAssay
-    ? { assay: false, ontology: false, displayname: false, id: false } // sort by assay: assay & ontology are grouping, displayname is leaf
-    : { ontology: false, displayname: false, assay: false, id: false }; // default: ontology & displayname are grouping, assay is leaf
+    groupingModel.forEach((field) => {
+      visibility[field] = false;
+    });
+
+    return visibility;
+  }, [groupingModel, leafField]);
 
   const [columnVisibilityModel, setColumnVisibilityModel] =
     useState<GridColumnVisibilityModel>(baseVisibility);
 
-  // Update visibility when sort mode changes
   useEffect(() => {
     setColumnVisibilityModel(baseVisibility);
-  }, [sortedAssay]);
+  }, [baseVisibility]);
 
   // functions to customize the column and filter panel in the toolbar
   const filterColumns = ({ columns }: FilterColumnsArgs) => {
@@ -74,7 +87,7 @@ export function DataGridWrapper(props: DataGridProps) {
         <DataGridPremium
           apiRef={apiRef}
           rows={rows}
-          columns={columnModel}
+          columns={columns}
           getRowId={(row) => row.id}
           autosizeOptions={autosizeOptions}
           rowGroupingModel={groupingModel}
@@ -88,8 +101,11 @@ export function DataGridWrapper(props: DataGridProps) {
           }}
           columnVisibilityModel={columnVisibilityModel}
           onColumnVisibilityModelChange={setColumnVisibilityModel}
-          onRowSelectionModelChange={handleSelection}
-          rowSelectionPropagation={{ descendants: true, parents: true }}
+          onRowSelectionModelChange={(selection) => {
+            const ids = (selection as any)?.ids ?? new Set<string>();
+            onSelectionChange(new Set(ids));
+          }}
+          rowSelectionPropagation={{ descendants: true, parents: false }}
           disableRowGrouping={false}
           rowSelectionModel={{
             type: "include",

package/src/TrackSelect/DataGrid/DefaultGroupingCell.tsx

@@ -0,0 +1,64 @@
+import { Tooltip, Box, IconButton } from "@mui/material";
+import {
+  GridRenderCellParams,
+  useGridApiContext,
+  GridGroupNode,
+} from "@mui/x-data-grid-premium";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+/**
+ * Default grouping cell that handles expand/collapse, truncation, and tooltips.
+ * This is a generic implementation without any folder-specific logic.
+ */
+export function DefaultGroupingCell(params: GridRenderCellParams) {
+  const apiRef = useGridApiContext();
+  const isGroup = params.rowNode.type === "group";
+  const groupNode = params.rowNode as GridGroupNode;
+  const isExpanded = isGroup ? groupNode.childrenExpanded : false;
+  const depth = params.rowNode.depth ?? 0;
+
+  const handleExpandClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    apiRef.current.setRowChildrenExpansion(params.id, !isExpanded);
+  };
+
+  const value = String(params.value ?? "");
+
+  // Indent based on depth (2 units per level)
+  const indentLevel = depth * 2;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        ml: indentLevel,
+      }}
+    >
+      {isGroup && (
+        <IconButton size="small" onClick={handleExpandClick} sx={{ mr: 0.5 }}>
+          {isExpanded ? (
+            <ExpandMoreIcon fontSize="small" />
+          ) : (
+            <ChevronRightIcon fontSize="small" />
+          )}
+        </IconButton>
+      )}
+      <Tooltip title={value} placement="top-start" enterDelay={500}>
+        <Box
+          sx={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            flex: 1,
+            fontWeight: isGroup ? "bold" : undefined,
+          }}
+        >
+          {params.formattedValue}
+        </Box>
+      </Tooltip>
+    </Box>
+  );
+}

package/src/TrackSelect/FolderList/Breadcrumb.tsx

@@ -0,0 +1,38 @@
+import { Breadcrumbs, Link, Typography } from "@mui/material";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import { FolderDefinition } from "../Folders/types";
+
+export interface BreadcrumbProps {
+  currentFolder: FolderDefinition | null;
+  onNavigateToRoot: () => void;
+}
+
+export function Breadcrumb({
+  currentFolder,
+  onNavigateToRoot,
+}: BreadcrumbProps) {
+  return (
+    <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
+      {currentFolder ? (
+        <Link
+          component="button"
+          variant="body1"
+          onClick={onNavigateToRoot}
+          underline="hover"
+          sx={{ cursor: "pointer" }}
+        >
+          All Folders
+        </Link>
+      ) : (
+        <Typography variant="body1" color="text.primary">
+          All Folders
+        </Typography>
+      )}
+      {currentFolder && (
+        <Typography variant="body1" color="text.primary">
+          {currentFolder.label}
+        </Typography>
+      )}
+    </Breadcrumbs>
+  );
+}

package/src/TrackSelect/FolderList/FolderCard.tsx

@@ -0,0 +1,51 @@
+import { Paper, Typography } from "@mui/material";
+import { FolderDefinition } from "../Folders/types";
+
+export interface FolderCardProps {
+  folder: FolderDefinition;
+  onClick: () => void;
+}
+
+export function FolderCard({ folder, onClick }: FolderCardProps) {
+  return (
+    <Paper
+      elevation={1}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+      role="button"
+      tabIndex={0}
+      sx={{
+        p: 3,
+        cursor: "pointer",
+        transition: "all 0.2s ease-in-out",
+        "&:hover": {
+          elevation: 3,
+          boxShadow: 3,
+          bgcolor: "action.hover",
+        },
+        "&:focus": {
+          outline: "2px solid",
+          outlineColor: "primary.main",
+          outlineOffset: 2,
+        },
+      }}
+    >
+      <Typography variant="h6" gutterBottom>
+        {folder.label}
+      </Typography>
+      {folder.description && (
+        <Typography variant="body2" color="text.secondary" gutterBottom>
+          {folder.description}
+        </Typography>
+      )}
+      <Typography variant="caption" color="text.secondary">
+        {folder.rowById.size.toLocaleString()} tracks available
+      </Typography>
+    </Paper>
+  );
+}

package/src/TrackSelect/FolderList/FolderList.tsx

@@ -0,0 +1,47 @@
+import { Paper, Stack, Typography } from "@mui/material";
+import { FolderDefinition } from "../Folders/types";
+import { FolderCard } from "./FolderCard";
+
+export interface FolderListProps {
+  folders: FolderDefinition[];
+  onFolderSelect: (folderId: string) => void;
+}
+
+export function FolderList({ folders, onFolderSelect }: FolderListProps) {
+  if (folders.length === 0) {
+    return (
+      <Paper
+        variant="outlined"
+        sx={{
+          height: 500,
+          borderWidth: 2,
+        }}
+      >
+        <Typography color="text.secondary" sx={{ p: 3 }}>
+          No folders available
+        </Typography>
+      </Paper>
+    );
+  }
+
+  return (
+    <Paper
+      variant="outlined"
+      sx={{
+        height: 500,
+        overflow: "auto",
+        borderWidth: 2,
+      }}
+    >
+      <Stack spacing={2} sx={{ p: 2 }}>
+        {folders.map((folder) => (
+          <FolderCard
+            key={folder.id}
+            folder={folder}
+            onClick={() => onFolderSelect(folder.id)}
+          />
+        ))}
+      </Stack>
+    </Paper>
+  );
+}