@weng-lab/genomebrowser-ui 0.1.5 → 0.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.1.5",
+  "version": "0.1.7",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -22,7 +22,7 @@
     "@mui/x-data-grid-premium": "^8.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@weng-lab/genomebrowser": "1.7.2-beta.2"
+    "@weng-lab/genomebrowser": "1.7.2-beta.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",

package/src/TrackSelect/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__Ref__ref_read_url"
+    ]
+  }
+}

package/src/TrackSelect/DataGrid/CustomToolbar.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import {
   Toolbar,
   ToolbarButton,
-  ColumnsPanelTrigger,
   FilterPanelTrigger,
   ExportCsv,
   ExportPrint,
@@ -13,7 +12,6 @@ import {
 import Tooltip from "@mui/material/Tooltip";
 import Menu from "@mui/material/Menu";
 import Badge from "@mui/material/Badge";
-import ViewColumnIcon from "@mui/icons-material/ViewColumn";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import MenuItem from "@mui/material/MenuItem";
@@ -77,12 +75,6 @@ export function CustomToolbar({
         </>
       )}
 
-      <Tooltip title="Columns">
-        <ColumnsPanelTrigger render={<ToolbarButton />}>
-          <ViewColumnIcon fontSize="small" htmlColor={iconColor} />
-        </ColumnsPanelTrigger>
-      </Tooltip>
-
       <Tooltip title="Filters">
         <FilterPanelTrigger
           render={(props, state) => (

package/src/TrackSelect/DataGrid/DataGridWrapper.tsx

@@ -1,17 +1,15 @@
 import { Box, Paper } from "@mui/material";
 import {
   DataGridPremium,
-  GridToolbarProps,
-  ToolbarPropsOverrides,
+  FilterColumnsArgs,
   GridAutosizeOptions,
-  useGridApiRef,
   GridColDef,
-  FilterColumnsArgs
+  GridColumnVisibilityModel,
+  useGridApiRef,
 } from "@mui/x-data-grid-premium";
+import { useEffect, useState } from "react";
 import { DataGridProps } from "../types";
-import { CustomToolbar } from "./CustomToolbar";
-import { useEffect, useMemo } from "react";
-import { sortedByAssayColumns, defaultColumns } from "./columns";
+import { defaultColumns, sortedByAssayColumns } from "./columns";
 
 const autosizeOptions: GridAutosizeOptions = {
   expand: true,
@@ -21,63 +19,58 @@ const autosizeOptions: GridAutosizeOptions = {
 
 // TODO: figure out where mui stores the number of rows in a row grouping so that can be bolded too
 export function DataGridWrapper(props: DataGridProps) {
-  const {
-    label,
-    labelTooltip,
-    downloadFileName,
-    toolbarSlot,
-    toolbarStyle,
-    toolbarIconColor,
-    sortedAssay,
-    handleSelection,
-    rows,
-    selectedTracks
-  } = props;
-
-  const CustomToolbarWrapper = useMemo(() => {
-    const customToolbarProps = {
-      label,
-      downloadFileName,
-      labelTooltip,
-      toolbarSlot,
-      toolbarStyle,
-      toolbarIconColor,
-    };
-    return (props: GridToolbarProps & ToolbarPropsOverrides) => <CustomToolbar {...props} {...customToolbarProps} />;
-  }, [label, labelTooltip, toolbarSlot]);
+  const { sortedAssay, handleSelection, rows, selectedIds } = props;
 
   const apiRef = useGridApiRef();
-  const groupingModel = sortedAssay ? ["assay", "ontology"] : ["ontology", "assay"];
+
+  // Resize columns when toggling between sort modes
+  useEffect(() => {
+    if (apiRef.current && apiRef.current.autosizeColumns) {
+      apiRef.current.autosizeColumns(autosizeOptions);
+    }
+  }, [sortedAssay]);
+
+  const groupingModel = sortedAssay
+    ? ["assay", "ontology"]
+    : ["ontology", "displayname"];
   const columnModel = sortedAssay ? sortedByAssayColumns : defaultColumns;
+  const leafField = sortedAssay ? "displayname" : "assay";
+
+  // Hide columns that are used in grouping or as leaf field
+  const baseVisibility: GridColumnVisibilityModel = sortedAssay
+    ? { assay: false, ontology: false, displayname: false } // sort by assay: assay & ontology are grouping, displayname is leaf
+    : { ontology: false, displayname: false, assay: false }; // default: ontology & displayname are grouping, assay is leaf
 
-  // functions to customize the column and filter panel in the toolbar 
+  const [columnVisibilityModel, setColumnVisibilityModel] =
+    useState<GridColumnVisibilityModel>(baseVisibility);
+
+  // Update visibility when sort mode changes
+  useEffect(() => {
+    setColumnVisibilityModel(baseVisibility);
+  }, [sortedAssay]);
+
+  // functions to customize the column and filter panel in the toolbar
   const filterColumns = ({ columns }: FilterColumnsArgs) => {
-    return columns.filter((column) => column.type !== 'custom').map((column) => column.field);
+    return columns
+      .filter((column) => column.type !== "custom")
+      .map((column) => column.field);
   };
 
   const getTogglableColumns = (columns: GridColDef[]) => {
-    return columns.filter((column) => column.type !== 'custom').map((column) => column.field);
+    return columns
+      .filter((column) => column.type !== "custom")
+      .map((column) => column.field);
   };
 
-  const handleResizeCols = () => {
-    // need to check .autosizeColumns since the current was being set with an empty object
-    if (!apiRef.current?.autosizeColumns) return;
-    apiRef.current.autosizeColumns(autosizeOptions);
-  };
-
-  // trigger resize when rows or columns change so that rows/columns don't need to be memoized outisde of this component
-  // otherwise sometimes would snap back to default widths when rows/columns change
-  useEffect(() => {
-    handleResizeCols();
-  }, [rows, defaultColumns, sortedByAssayColumns, handleResizeCols]);
-
   return (
     <Paper sx={{ width: "100%" }}>
-      <Box sx={{
-        height: 500,
-        width: "100%",
-        overflow: "auto",
-      }}>
+      <Box
+        sx={{
+          height: 500,
+          width: "100%",
+          overflow: "auto",
+        }}
+      >
         <DataGridPremium
           apiRef={apiRef}
           rows={rows}
@@ -85,13 +78,15 @@ export function DataGridWrapper(props: DataGridProps) {
           getRowId={(row) => row.experimentAccession}
           autosizeOptions={autosizeOptions}
           rowGroupingModel={groupingModel}
-          groupingColDef={{ leafField: "displayname", display: "flex" }}
-          columnVisibilityModel={{ displayname: false }} // so you don't see a second name column
+          groupingColDef={{ leafField, display: "flex" }}
+          columnVisibilityModel={columnVisibilityModel}
+          onColumnVisibilityModelChange={setColumnVisibilityModel}
           onRowSelectionModelChange={handleSelection}
-          rowSelectionPropagation={{ descendants: true }}
-          rowSelectionModel={{ type: "include", ids: new Set(selectedTracks.keys()) }}
-          slots={{
-            toolbar: CustomToolbarWrapper,
+          rowSelectionPropagation={{ descendants: true, parents: true }}
+          disableRowGrouping={false}
+          rowSelectionModel={{
+            type: "include",
+            ids: selectedIds,
           }}
           slotProps={{
             filterPanel: {

package/src/TrackSelect/DataGrid/columns.tsx

@@ -12,123 +12,133 @@ const displayNameCol: GridColDef<RowInfo> = {
 };
 
 const sortedByAssayOntologyCol: GridColDef<RowInfo> = {
-    field: "ontology",
-    headerName: "Ontology",
-    type: "singleSelect",
-    valueOptions: ontologyTypes,
-    renderCell: (params) => {
-      if (params.rowNode.type === "group") {
-        if (params.value === undefined) {
-          return null;
-        }
-        const val = params.value;
-        return (
-          <div><b>{val}</b></div>
-        )
+  field: "ontology",
+  headerName: "Ontology",
+  type: "singleSelect",
+  valueOptions: ontologyTypes,
+  renderCell: (params) => {
+    if (params.rowNode.type === "group") {
+      if (params.value === undefined) {
+        return null;
       }
-    },
+      const val = params.value;
+      return (
+        <div>
+          <b>{val}</b>
+        </div>
+      );
+    }
+  },
 };
 
-const sortedByAssayAssayCol : GridColDef<RowInfo> = { 
-    field: "assay", 
-    headerName: "Assay",
-    valueOptions: assayTypes, 
-    renderCell: (params) => {
-        if (params.rowNode.type === "group") {
-            if (params.value === undefined) {
-                return null;
-            }
-            const val = params.value;
-            return (
-            <Stack direction="row" spacing={2} alignItems="center">
-                {AssayIcon(val)}
-                <div><b>{val}</b></div>
-            </Stack>
-            )
-        }
+const sortedByAssayAssayCol: GridColDef<RowInfo> = {
+  field: "assay",
+  headerName: "Assay",
+  valueOptions: assayTypes,
+  renderCell: (params) => {
+    if (params.rowNode.type === "group") {
+      if (params.value === undefined) {
+        return null;
+      }
+      const val = params.value;
+      return (
+        <Stack direction="row" spacing={2} alignItems="center">
+          {AssayIcon(val)}
+          <div>
+            <b>{val}</b>
+          </div>
+        </Stack>
+      );
     }
-}
+  },
+};
 
 const defaultOntologyCol: GridColDef<RowInfo> = {
-    field: "ontology",
-    headerName: "Ontology",
-    type: "singleSelect",
-    valueOptions: ontologyTypes,
-    renderCell: (params) => {
-        if (params.rowNode.type === "group") {
-            if (params.value === undefined) {
-            return null;
-            }
-            const val = params.value;
-            return (
-            <div><b>{val}</b></div>
-            )
-        }
+  field: "ontology",
+  headerName: "Ontology",
+  type: "singleSelect",
+  valueOptions: ontologyTypes,
+  renderCell: (params) => {
+    if (params.rowNode.type === "group") {
+      if (params.value === undefined) {
+        return null;
+      }
+      const val = params.value;
+      return (
+        <div>
+          <b>{val}</b>
+        </div>
+      );
     }
+  },
 };
 
-const defaultAssayCol: GridColDef<RowInfo> = { 
-    field: "assay", 
-    headerName: "Assay",
-    valueOptions: assayTypes,
-    renderCell: (params) => {
-        if (params.rowNode.type === "group") {
-            if (params.value === undefined) {
-                return null;
-            }
-            const val = params.value;
-            return (
-            <Stack direction="row" spacing={2} alignItems="center">
-                {AssayIcon(val)}
-                <div>{val}</div>
-            </Stack>
-            )
-        }
+const defaultAssayCol: GridColDef<RowInfo> = {
+  field: "assay",
+  headerName: "Assay",
+  valueOptions: assayTypes,
+  renderCell: (params) => {
+    if (params.value === undefined) {
+      return null;
     }
-}
+    const val = params.value;
+    return (
+      <Stack direction="row" spacing={2} alignItems="center" sx={{ ml: 6 }}>
+        {AssayIcon(val)}
+        <div>{val}</div>
+      </Stack>
+    );
+  },
+};
 
 const sampleTypeCol: GridColDef<RowInfo> = {
-    field: "sampleType",
-    headerName: "Sample Type",
-    type: "singleSelect",
-    valueOptions: ["tissue", "primary cell", "cell line", "in vitro differentiated cells", "organoid"],
-    valueFormatter: (value) => value && capitalize(value),
+  field: "sampleType",
+  headerName: "Sample Type",
+  type: "singleSelect",
+  valueOptions: [
+    "tissue",
+    "primary cell",
+    "cell line",
+    "in vitro differentiated cells",
+    "organoid",
+  ],
+  valueFormatter: (value) => value && capitalize(value),
 };
 
 const lifeStageCol: GridColDef<RowInfo> = {
-    field: "lifeStage",
-    headerName: "Life Stage",
-    type: "singleSelect",
-    valueOptions: ["adult", "embryonic"],
-    valueFormatter: (value) => value && capitalize(value),
+  field: "lifeStage",
+  headerName: "Life Stage",
+  type: "singleSelect",
+  valueOptions: ["adult", "embryonic"],
+  valueFormatter: (value) => value && capitalize(value),
 };
 
-const experimentCol: GridColDef<RowInfo> = { 
-    field: "experimentAccession", 
-    headerName: "Experiment Accession" 
-}
+const experimentCol: GridColDef<RowInfo> = {
+  field: "experimentAccession",
+  headerName: "Experiment Accession",
+};
 
 const fileCol: GridColDef<RowInfo> = {
-    field: "fileAccession", 
-    headerName: "File Accession"
-}
+  field: "fileAccession",
+  headerName: "File Accession",
+};
 
 export const sortedByAssayColumns: GridColDef<RowInfo>[] = [
-    displayNameCol,
-    sortedByAssayOntologyCol,
-    sampleTypeCol,
-    lifeStageCol,
-    sortedByAssayAssayCol,
-    experimentCol,
-    fileCol
-]
+  displayNameCol,
+  sortedByAssayOntologyCol,
+  sampleTypeCol,
+  lifeStageCol,
+  sortedByAssayAssayCol,
+  experimentCol,
+  fileCol,
+];
 
 export const defaultColumns: GridColDef<RowInfo>[] = [
-    displayNameCol,
-    sampleTypeCol,
-    lifeStageCol,
-    defaultOntologyCol,
-    defaultAssayCol,
-    experimentCol,
-    fileCol
-]
+  defaultAssayCol,
+  sampleTypeCol,
+  lifeStageCol,
+  defaultOntologyCol,
+  displayNameCol,
+  experimentCol,
+  fileCol,
+];