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

package/test/main.tsx

@@ -1,19 +1,19 @@
+/// <reference types="vite/client" />
+
 // react
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 
+// license
+import { LicenseInfo } from "@mui/x-license";
+const muiLicenseKey = import.meta.env.VITE_MUI_X_LICENSE_KEY;
+if (muiLicenseKey) {
+  LicenseInfo.setLicenseKey(muiLicenseKey);
+}
+
 // mui
 import EditIcon from "@mui/icons-material/Edit";
-import CloseIcon from "@mui/icons-material/Close";
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Typography,
-} from "@mui/material";
+import { Button } from "@mui/material";
 
 // weng lab
 import {
@@ -32,7 +32,9 @@ import {
 } from "@weng-lab/genomebrowser";
 
 // local
-import { createSelectionStore, TrackSelect, RowInfo } from "../src/lib";
+import { foldersByAssembly, TrackSelect } from "../src/lib";
+import type { BiosampleRowInfo } from "../src/TrackSelect/Folders/biosamples/shared/types";
+import type { GeneRowInfo } from "../src/TrackSelect/Folders/genes/shared/types";
 import { Exon } from "@weng-lab/genomebrowser/dist/components/tracks/transcript/types";
 
 interface Transcript {
@@ -44,10 +46,7 @@ interface Transcript {
   color?: string;
 }
 
-const enum Assembly {
-  human = "GRCh38",
-  mouse = "mm10",
-}
+type Assembly = "GRCh38" | "mm10";
 
 // Callback types for track interactions (using any to avoid type conflicts with library types)
 interface TrackCallbacks {
@@ -78,25 +77,9 @@ function injectCallbacks(track: Track, callbacks: TrackCallbacks): Track {
   return track;
 }
 
-function getLocalStorage(assembly: Assembly): Set<string> | null {
-  if (typeof window === "undefined" || !window.sessionStorage) return null;
-
-  const selectedIds = sessionStorage.getItem(assembly + "-selected-tracks");
-  if (!selectedIds) return null;
-  const idsArray = JSON.parse(selectedIds) as string[];
-  return new Set(idsArray);
-}
-
-function setLocalStorage(trackIds: Set<string>, assembly: Assembly) {
-  sessionStorage.setItem(
-    assembly + "-selected-tracks",
-    JSON.stringify([...trackIds]),
-  );
-}
-
 function Main() {
   const [open, setOpen] = useState(false);
-  const currentAssembly = Assembly.mouse;
+  const currentAssembly: Assembly = "mm10";
 
   const browserStore = createBrowserStoreMemo({
     // chr12:53,380,176-53,416,446
@@ -151,67 +134,78 @@ function Main() {
   const insertTrack = trackStore((s) => s.insertTrack);
   const removeTrack = trackStore((s) => s.removeTrack);
 
-  const selectionStore = useMemo(() => {
-    const localIds = getLocalStorage(currentAssembly);
-    const ids = localIds != null ? localIds : new Set<string>();
-    return createSelectionStore(currentAssembly, ids);
-  }, [currentAssembly]);
+  const folders = useMemo(
+    () => foldersByAssembly[currentAssembly],
+    [currentAssembly],
+  );
 
-  const rowById = selectionStore((s) => s.rowById);
+  const storageKey = `${currentAssembly}-selected-tracks`;
 
-  // Handle submit: sync tracks to browser and save to localStorage
+  const initialSelection = useMemo(
+    () =>
+      (currentAssembly as Assembly) === "GRCh38"
+        ? defaultHumanSelections
+        : defaultMouseSelections,
+    [currentAssembly],
+  );
+
+  // sync tracks to browser and save to localStorage
   const handleSubmit = useCallback(
-    (newTrackIds: Set<string>) => {
+    (selectedByFolder: Map<string, Set<string>>) => {
       const currentIds = new Set(tracks.map((t) => t.id));
+      const selectedIds = new Set<string>();
+      const tracksToAdd: Array<{ row: unknown; folderId: string }> = [];
+
+      for (const folder of folders) {
+        const folderSelection =
+          selectedByFolder.get(folder.id) ?? new Set<string>();
+        folderSelection.forEach((id) => {
+          selectedIds.add(id);
+          if (currentIds.has(id)) {
+            return;
+          }
+          const row = folder.rowById.get(id);
+          if (row) {
+            tracksToAdd.push({ row, folderId: folder.id });
+          }
+        });
+      }
 
-      // Build tracks to add from newTrackIds + rowById lookup
-      const tracksToAdd = Array.from(newTrackIds)
-        .filter((id) => !currentIds.has(id)) // not in current track list
-        .map((id) => rowById.get(id)) // get RowInfo object
-        .filter((track): track is RowInfo => track !== undefined); // filter out undefined
-
-      const tracksToRemove = tracks.filter((t) => {
-        return !t.id.includes("ignore") && !newTrackIds.has(t.id);
-      });
-
-      console.log("removing", tracksToRemove);
+      const tracksToRemove = tracks.filter((t) => !selectedIds.has(t.id));
       for (const t of tracksToRemove) {
         removeTrack(t.id);
       }
 
-      for (const s of tracksToAdd) {
-        const track = generateTrack(s, callbacks);
+      for (const { row, folderId } of tracksToAdd) {
+        const track = generateTrack(
+          row as BiosampleRowInfo | GeneRowInfo,
+          folderId,
+          currentAssembly,
+          callbacks,
+        );
         if (track === null) continue;
         insertTrack(track);
       }
-
-      // Save the track IDs (not the auto-generated group IDs)
-      setLocalStorage(newTrackIds, currentAssembly);
-      // Close the dialog
-      setOpen(false);
     },
-    [tracks, removeTrack, insertTrack, callbacks],
+    [tracks, removeTrack, insertTrack, callbacks, folders, currentAssembly],
   );
 
-  const handleCancel = () => {
-    setOpen(false);
-  };
-
-  // Handle reset: clear selections and remove non-default tracks
-  const handleReset = () => {
-    // Clear the selection store
-    selectionStore.getState().clear();
-
-    // Remove all non-default tracks from the browser
-    const tracksToRemove = tracks.filter((t) => !t.id.includes("ignore"));
-    for (const t of tracksToRemove) {
+  // clear selections and remove all tracks
+  const handleClear = () => {
+    for (const t of tracks) {
       removeTrack(t.id);
     }
-
-    // Clear localStorage for selected tracks
-    setLocalStorage(new Set(), currentAssembly);
   };
 
+  // On first load, if no stored selection exists, apply initial selection
+  useEffect(() => {
+    const stored = sessionStorage.getItem(storageKey);
+    if (!stored) {
+      handleSubmit(initialSelection);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <Button
@@ -222,38 +216,17 @@ function Main() {
       >
         Select Tracks
       </Button>
-      <Dialog
+      <TrackSelect
+        folders={folders}
+        storageKey={storageKey}
+        initialSelection={initialSelection}
+        onSubmit={handleSubmit}
+        onClear={handleClear}
+        maxTracks={30}
         open={open}
         onClose={() => setOpen(false)}
-        maxWidth="lg"
-        fullWidth
-      >
-        <DialogTitle
-          bgcolor="#0c184a"
-          color="white"
-          display={"flex"}
-          justifyContent={"space-between"}
-          alignItems={"center"}
-          fontWeight={"bold"}
-        >
-          Biosample Tracks
-          <IconButton
-            size="large"
-            onClick={() => setOpen(false)}
-            sx={{ color: "white", padding: 0 }}
-          >
-            <CloseIcon fontSize="large" />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent sx={{ marginTop: "5px" }}>
-          <TrackSelect
-            store={selectionStore}
-            onSubmit={handleSubmit}
-            onCancel={handleCancel}
-            onReset={handleReset}
-          />
-        </DialogContent>
-      </Dialog>
+        title="Biosample Tracks"
+      />
       <GQLWrapper>
         <Browser browserStore={browserStore} trackStore={trackStore} />
       </GQLWrapper>
@@ -271,29 +244,40 @@ const ASSAY_COLORS: Record<string, string> = {
   atac: "#02c7b9",
   rnaseq: "#00aa00",
   chromhmm: "#00ff00",
-  ccre: "#0c184a",
+  ccre: "#000000",
 };
 
-function generateTrack(sel: RowInfo, callbacks?: TrackCallbacks): Track {
+function generateTrack(
+  row: BiosampleRowInfo | GeneRowInfo,
+  folderId: string,
+  assembly: Assembly,
+  callbacks?: TrackCallbacks,
+): Track | null {
+  // Handle gene folders
+  if (folderId.includes("genes")) {
+    const geneRow = row as GeneRowInfo;
+    const track: Track = {
+      ...defaultTranscript,
+      id: geneRow.id,
+      assembly,
+      version: geneRow.versions[geneRow.versions.length - 1], // latest version
+    };
+    return callbacks ? injectCallbacks(track, callbacks) : track;
+  }
+
+  // Handle biosample folders
+  const sel = row as BiosampleRowInfo;
   const color = ASSAY_COLORS[sel.assay.toLowerCase()] || "#000000";
   let track: Track;
 
   switch (sel.assay.toLowerCase()) {
     case "chromhmm":
-      track = {
-        ...defaultBigBed,
-        id: sel.id,
-        url: sel.url,
-        title: sel.displayname,
-        color,
-      };
-      break;
     case "ccre":
       track = {
         ...defaultBigBed,
         id: sel.id,
         url: sel.url,
-        title: sel.displayname,
+        title: sel.displayName,
         color,
       };
       break;
@@ -302,7 +286,7 @@ function generateTrack(sel: RowInfo, callbacks?: TrackCallbacks): Track {
         ...defaultBigWig,
         id: sel.id,
         url: sel.url,
-        title: sel.displayname,
+        title: sel.displayName,
         color,
       };
   }
@@ -341,11 +325,8 @@ export const defaultTranscript: Omit<
 export function useLocalTracks(assembly: string, callbacks?: TrackCallbacks) {
   const localTracks = getLocalTracks(assembly);
 
-  const defaultTracks =
-    assembly === "GRCh38" ? defaultHumanTracks : defaultMouseTracks;
-
-  // Get base tracks (from storage or defaults)
-  let initialTracks = localTracks || defaultTracks;
+  // Start empty if no stored tracks - TrackSelect will populate defaults
+  let initialTracks: Track[] = localTracks || [];
 
   // Inject callbacks if provided (callbacks are lost on JSON serialization)
   if (callbacks) {
@@ -366,7 +347,7 @@ export function useLocalTracks(assembly: string, callbacks?: TrackCallbacks) {
 export function getLocalTracks(assembly: string): Track[] | null {
   if (typeof window === "undefined" || !window.sessionStorage) return null;
 
-  const localTracks = sessionStorage.getItem(assembly + "-" + "tracks");
+  const localTracks = sessionStorage.getItem(assembly + "-tracks");
   if (!localTracks) return null;
   const localTracksJson = JSON.parse(localTracks) as Track[];
   return localTracksJson;
@@ -376,50 +357,13 @@ export function setLocalTracks(tracks: Track[], assembly: string) {
   sessionStorage.setItem(assembly + "-tracks", JSON.stringify(tracks));
 }
 
-const defaultHumanTracks = [
-  {
-    ...defaultTranscript,
-    color: ASSAY_COLORS.ccre,
-    id: "human-genes-ignore",
-    assembly: "GRCh38",
-    version: 40,
-  },
-  {
-    ...defaultBigBed,
-    color: ASSAY_COLORS.ccre,
-    id: "human-ccre-ignore",
-    title: "All cCREs colored by group",
-    url: "https://downloads.wenglab.org/GRCh38-cCREs.DCC.bigBed",
-  },
-  {
-    ...defaultBigWig,
-    color: ASSAY_COLORS.dnase,
-    id: "human-dnase-aggregate-ignore",
-    title: "Aggregated DNase signal, all ENCODE biosamples",
-    url: "https://downloads.wenglab.org/DNAse_All_ENCODE_MAR20_2024_merged.bw",
-  },
-];
-
-const defaultMouseTracks = [
-  {
-    ...defaultTranscript,
-    color: ASSAY_COLORS.ccre,
-    id: "mouse-genes-ignore",
-    assembly: "mm10",
-    version: 21,
-  },
-  {
-    ...defaultBigBed,
-    color: ASSAY_COLORS.ccre,
-    id: "mouse-ccre-ignore",
-    title: "All cCREs colored by group",
-    url: "https://downloads.wenglab.org/mm10-cCREs.DCC.bigBed",
-  },
-  {
-    ...defaultBigWig,
-    color: ASSAY_COLORS.dnase,
-    id: "mouse-dnase-aggregate-ignore",
-    title: "Aggregated DNase signal, all ENCODE biosamples",
-    url: "https://downloads.wenglab.org/DNase_MM10_ENCODE_DEC2024_merged_nanrm.bigWig",
-  },
-];
+// Default selections for TrackSelect UI (uses folder row IDs)
+const defaultHumanSelections = new Map<string, Set<string>>([
+  ["human-genes", new Set(["genocode-basic"])],
+  ["human-biosamples", new Set(["ccre-aggregate", "dnase-aggregate"])],
+]);
+
+const defaultMouseSelections = new Map<string, Set<string>>([
+  ["mouse-genes", new Set(["genocode-basic"])],
+  ["mouse-biosamples", new Set(["ccre-aggregate", "dnase-aggregate"])],
+]);

package/.claude/settings.local.json

@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(grep:*)"
-    ]
-  }
-}

package/dist/TrackSelect/DataGrid/CustomToolbar.d.ts

@@ -1,12 +0,0 @@
-import { GridToolbarProps, ToolbarPropsOverrides } from '@mui/x-data-grid-premium';
-import { DataGridProps } from '../types';
-type CustomToolbarProps = {
-    label: DataGridProps["label"];
-    downloadFileName: DataGridProps["downloadFileName"];
-    labelTooltip: DataGridProps["labelTooltip"];
-    toolbarSlot?: DataGridProps["toolbarSlot"];
-    toolbarStyle?: DataGridProps["toolbarStyle"];
-    toolbarIconColor?: DataGridProps["toolbarIconColor"];
-} & GridToolbarProps & ToolbarPropsOverrides;
-export declare function CustomToolbar({ label, downloadFileName, labelTooltip, toolbarSlot, toolbarStyle, toolbarIconColor, ...restToolbarProps }: CustomToolbarProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/TrackSelect/DataGrid/GroupingCell.d.ts

@@ -1,2 +0,0 @@
-import { GridRenderCellParams } from '@mui/x-data-grid-premium';
-export default function GroupingCell(params: GridRenderCellParams): import("react/jsx-runtime").JSX.Element;

package/dist/TrackSelect/DataGrid/columns.d.ts

@@ -1,4 +0,0 @@
-import { GridColDef } from '@mui/x-data-grid-premium';
-import { RowInfo } from '../types';
-export declare const sortedByAssayColumns: GridColDef<RowInfo>[];
-export declare const defaultColumns: GridColDef<RowInfo>[];

package/dist/TrackSelect/DataGrid/dataGridHelpers.d.ts

@@ -1,49 +0,0 @@
-import { FuseResult } from 'fuse.js';
-import { RowInfo, SearchTracksProps, TrackInfo } from '../types';
-import { Assembly } from '../consts';
-export declare function getTracksData(assembly: Assembly): {
-    tracks: {
-        name: string;
-        ontology: string;
-        lifeStage: string;
-        sampleType: string;
-        displayname: string;
-        assays: {
-            id: string;
-            assay: string;
-            url: string;
-            experimentAccession: string;
-            fileAccession: string;
-        }[];
-    }[];
-};
-export declare function getTracksByAssayAndOntology(assay: string, ontology: string, tracksData: ReturnType<typeof getTracksData>): TrackInfo[];
-/** Flatten TrackInfo into RowInfo objects for DataGrid display.
- * @param track TrackInfo object containing information from JSON file
- * @returns Array of flattened RowInfo objects, one per assay
- */
-export declare function flattenIntoRows(track: TrackInfo): RowInfo[];
-/**
- * Fuzzy search in tracks stored in a JSON file.
- *
- * @param jsonStructure - Dot-separated path to the data array in the JSON structure.
- * @param query - The search query string.
- * @param keyWeightMap - Array of keys to search within each track object.
- * Can look like ["name", "author"] or if weighted, [
-    {
-      name: 'title',
-      weight: 0.3
-    },
-    {
-      name: 'author',
-      weight: 0.7
-    }
-  ].
- * @param threshold - (Optional) Threshold for the fuzzy search (default is 0.5).
- *                    Smaller = stricter match, larger = fuzzier since 0 is perfect match and 1 is worst match.
- * @param limit - (Optional) Maximum number of results to return (default is 10).
- * @returns FuseResult object containing the search results.
- */
-export declare function searchTracks({ jsonStructure, query, keyWeightMap, threshold, tracksData, }: SearchTracksProps & {
-    tracksData: ReturnType<typeof getTracksData>;
-}): FuseResult<TrackInfo>[];

package/dist/TrackSelect/TreeView/treeViewHelpers.d.ts

@@ -1,49 +0,0 @@
-import { TreeViewBaseItem } from '@mui/x-tree-view';
-import { default as React } from 'react';
-import { CustomTreeItemProps, ExtendedTreeItemProps, RowInfo, SearchTracksProps } from '../types';
-import { FuseResult } from 'fuse.js';
-/**
- * Builds tree in the sorted by assay view
- * @param selectedIds: list of ids (from useSelectionStore)
- * @param root: Root TreeViewBaseItem
- * @param rowById: Mapping between an id (experimentAccession) and its RowInfo object
- * @returns all of the items for the RichTreeView in TreeViewWrapper
- */
-export declare function buildSortedAssayTreeView(selectedIds: string[], root: TreeViewBaseItem<ExtendedTreeItemProps>, rowById: Map<string, RowInfo>): TreeViewBaseItem<ExtendedTreeItemProps>[];
-/**
- * Builds tree in the sorted by assay view
- * @param selectedIds: list of ids (from useSelectionStore)
- * @param root: Root TreeViewBaseItem
- * @param rowById: Mapping between an id (experimentAccession) and its RowInfo object
- * @returns all of the items for the RichTreeView in TreeViewWrapper
- */
-export declare function buildTreeView(selectedIds: string[], root: TreeViewBaseItem<ExtendedTreeItemProps>, rowById: Map<string, RowInfo>): TreeViewBaseItem<ExtendedTreeItemProps>[];
-/**
- * Fuzzy search of active tracks.
- *
- * @param treeItems - TreeBaseViewItems from the tree.
- * @param query - The search query string.
- * @param keyWeightMap - Array of keys to search within each track object.
- * Can look like ["name", "author"] or if weighted, [
-    {
-      name: 'title',
-      weight: 0.3
-    },
-    {
-      name: 'author',
-      weight: 0.7
-    }
-  ].
- * @param threshold - (Optional) Threshold for the fuzzy search (default is 0.5).
- *                    Smaller = stricter match, larger = fuzzier since 0 is perfect match and 1 is worst match.
- * @param limit - (Optional) Maximum number of results to return (default is 10).
- * @returns FuseResult object containing the search results.
- */
-export declare function searchTreeItems({ treeItems, query, keyWeightMap, threshold, limit, }: SearchTracksProps): FuseResult<RowInfo>[];
-/**
- * Creates the assay icon for DataGrid and RichTreeView
- * @param type: assay type
- * @returns an icon of the assay's respective color
- */
-export declare function AssayIcon(type: string): import("react/jsx-runtime").JSX.Element;
-export declare const CustomTreeItem: React.ForwardRefExoticComponent<CustomTreeItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/TrackSelect/consts.d.ts

@@ -1,11 +0,0 @@
-import { RowInfo } from './types';
-export type Assembly = "GRCh38" | "mm10";
-export declare const assayTypes: string[];
-export declare const ontologyTypes: string[];
-/**
- * Build rows and rowById for a specific assembly
- */
-export declare function buildRowsForAssembly(assembly: Assembly): {
-    rows: RowInfo[];
-    rowById: Map<string, RowInfo>;
-};

package/src/TrackSelect/DataGrid/CustomToolbar.tsx

@@ -1,152 +0,0 @@
-import * as React from "react";
-import {
-  Toolbar,
-  ToolbarButton,
-  FilterPanelTrigger,
-  ExportCsv,
-  ExportPrint,
-  GridToolbarProps,
-  ToolbarPropsOverrides,
-  ExportExcel,
-} from "@mui/x-data-grid-premium";
-import Tooltip from "@mui/material/Tooltip";
-import Menu from "@mui/material/Menu";
-import Badge from "@mui/material/Badge";
-import FilterListIcon from "@mui/icons-material/FilterList";
-import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import MenuItem from "@mui/material/MenuItem";
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import { DataGridProps } from "../types";
-import { InfoOutline } from "@mui/icons-material";
-
-type CustomToolbarProps = {
-  label: DataGridProps["label"];
-  downloadFileName: DataGridProps["downloadFileName"];
-  labelTooltip: DataGridProps["labelTooltip"];
-  toolbarSlot?: DataGridProps["toolbarSlot"];
-  toolbarStyle?: DataGridProps["toolbarStyle"];
-  toolbarIconColor?: DataGridProps["toolbarIconColor"];
-} & GridToolbarProps &
-  ToolbarPropsOverrides;
-
-export function CustomToolbar({
-  label,
-  downloadFileName,
-  labelTooltip,
-  toolbarSlot,
-  toolbarStyle,
-  toolbarIconColor,
-  ...restToolbarProps
-}: CustomToolbarProps) {
-  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
-  const exportMenuTriggerRef = React.useRef<HTMLButtonElement>(null);
-
-  const iconColor = toolbarIconColor ?? "inherit";
-
-  return (
-    <Toolbar style={{ ...toolbarStyle }}>
-      {typeof label !== "string" && label}
-      <Typography
-        fontWeight="medium"
-        sx={{ flex: 1, mx: 0.5, display: "flex", alignItems: "center", gap: 1 }}
-      >
-        {typeof label === "string" && label}
-        {/* ReactNode can be more than just an element, string, or number but not accounting for that for simplicity */}
-        {labelTooltip &&
-        (typeof labelTooltip === "string" ||
-          typeof labelTooltip === "number") ? (
-          <Tooltip title={labelTooltip}>
-            <InfoOutline fontSize="inherit" color="primary" />
-          </Tooltip>
-        ) : (
-          labelTooltip
-        )}
-      </Typography>
-      {toolbarSlot && (
-        <>
-          {toolbarSlot}
-          <Divider
-            orientation="vertical"
-            variant="middle"
-            flexItem
-            sx={{ mx: 0.5 }}
-          />
-        </>
-      )}
-
-      <Tooltip title="Filters">
-        <FilterPanelTrigger
-          render={(props, state) => (
-            <ToolbarButton {...props} color="default">
-              <Badge
-                badgeContent={state.filterCount}
-                color="primary"
-                variant="dot"
-              >
-                <FilterListIcon fontSize="small" htmlColor={iconColor} />
-              </Badge>
-            </ToolbarButton>
-          )}
-        />
-      </Tooltip>
-      <Divider
-        orientation="vertical"
-        variant="middle"
-        flexItem
-        sx={{ mx: 0.5 }}
-      />
-      <Tooltip title="Export">
-        <ToolbarButton
-          ref={exportMenuTriggerRef}
-          id="export-menu-trigger"
-          aria-controls="export-menu"
-          aria-haspopup="true"
-          aria-expanded={exportMenuOpen ? "true" : undefined}
-          onClick={() => setExportMenuOpen(true)}
-        >
-          <FileDownloadIcon fontSize="small" htmlColor={iconColor} />
-        </ToolbarButton>
-      </Tooltip>
-
-      <Menu
-        id="export-menu"
-        anchorEl={exportMenuTriggerRef.current}
-        open={exportMenuOpen}
-        onClose={() => setExportMenuOpen(false)}
-        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-        transformOrigin={{ vertical: "top", horizontal: "right" }}
-        slotProps={{
-          list: {
-            "aria-labelledby": "export-menu-trigger",
-          },
-        }}
-      >
-        <ExportPrint
-          options={{ ...restToolbarProps.printOptions }}
-          render={<MenuItem />}
-          onClick={() => setExportMenuOpen(false)}
-        >
-          Print
-        </ExportPrint>
-        <ExportCsv
-          options={{
-            fileName: typeof label === "string" ? label : downloadFileName,
-            ...restToolbarProps.csvOptions,
-          }}
-          render={<MenuItem />}
-          onClick={() => setExportMenuOpen(false)}
-        >
-          Download as CSV
-        </ExportCsv>
-        <ExportExcel
-          options={{ ...restToolbarProps.excelOptions }}
-          render={<MenuItem />}
-          onClick={() => setExportMenuOpen(false)}
-        >
-          Download as Excel
-        </ExportExcel>
-      </Menu>
-    </Toolbar>
-  );
-}