@weng-lab/genomebrowser-ui 0.2.0 → 0.2.2

package/src/TrackSelect/TrackSelect.tsx

@@ -3,17 +3,18 @@ import {
   Box,
   Button,
   Dialog,
-  DialogActions,
   DialogContent,
-  DialogContentText,
   DialogTitle,
   IconButton,
   Stack,
 } from "@mui/material";
 import { TreeViewBaseItem } from "@mui/x-tree-view";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Breadcrumb } from "./FolderList/Breadcrumb";
 import { DataGridWrapper } from "./DataGrid/DataGridWrapper";
+import { ClearDialog } from "./Dialogs/ClearDialog";
+import { LimitDialog } from "./Dialogs/LimitDialog";
+import { ResetDialog } from "./Dialogs/ResetDialog";
+import { Breadcrumb } from "./FolderList/Breadcrumb";
 import { FolderList } from "./FolderList/FolderList";
 import { FolderDefinition, FolderRuntimeConfig } from "./Folders/types";
 import { createSelectionStore, SelectionStoreInstance } from "./store";
@@ -87,6 +88,7 @@ export default function TrackSelect({
 }: TrackSelectProps) {
   const [limitDialogOpen, setLimitDialogOpen] = useState(false);
   const [clearDialogOpen, setClearDialogOpen] = useState(false);
+  const [resetDialogOpen, setResetDialogOpen] = useState(false);
   const [runtimeConfigByFolder, setRuntimeConfigByFolder] = useState(() =>
     buildRuntimeConfigMap(folders),
   );
@@ -273,6 +275,30 @@ export default function TrackSelect({
     setClearDialogOpen(true);
   };
 
+  const handleReset = () => {
+    setResetDialogOpen(true);
+  };
+
+  const confirmReset = () => {
+    setResetDialogOpen(false);
+    if (!initialSelection) return;
+
+    // Reset to initial selection
+    initialSelection.forEach((ids, folderId) => {
+      setSelection(folderId, new Set(ids));
+    });
+    // Clear any folders not in initialSelection
+    folderIds.forEach((folderId) => {
+      if (!initialSelection.has(folderId)) {
+        setSelection(folderId, new Set<string>());
+      }
+    });
+
+    const newSnapshot = cloneSelectionMap(initialSelection);
+    setCommittedSnapshot(newSnapshot);
+    onSubmit(newSnapshot);
+  };
+
   const confirmClear = () => {
     setClearDialogOpen(false);
     let newSnapshot: Map<string, Set<string>>;
@@ -322,7 +348,7 @@ export default function TrackSelect({
           <Box sx={{ p: 2 }}>No folders available.</Box>
         ) : (
           <Box sx={{ flex: 1, pt: 1 }}>
-            {/* Toolbar row - breadcrumb on left, extras on right */}
+            {/* Toolbar row */}
             {(folders.length > 1 ||
               (currentView === "folder-detail" && ToolbarExtras)) && (
               <Box
@@ -354,9 +380,19 @@ export default function TrackSelect({
               </Box>
             )}
 
-            <Stack direction="row" spacing={2} sx={{ width: "100%" }}>
-              {/* Left panel - swaps between FolderList and DataGrid */}
-              <Box sx={{ flex: 3, minWidth: 0 }}>
+            <Stack
+              direction={{ xs: "column", md: "row" }}
+              spacing={2}
+              sx={{ width: "100%" }}
+            >
+              {/* Left panel */}
+              <Box
+                sx={{
+                  flex: { xs: "none", md: 3 },
+                  minWidth: 0,
+                  width: { xs: "100%", md: "auto" },
+                }}
+              >
                 {currentView === "folder-list" ? (
                   <FolderList
                     folders={folders}
@@ -375,8 +411,14 @@ export default function TrackSelect({
                   />
                 )}
               </Box>
-              {/* Right panel - always visible */}
-              <Box sx={{ flex: 2, minWidth: 0 }}>
+              {/* Right panel */}
+              <Box
+                sx={{
+                  flex: { xs: "none", md: 2 },
+                  minWidth: 0,
+                  width: { xs: "100%", md: "auto" },
+                }}
+              >
                 <TreeViewWrapper
                   folderTrees={folderTrees}
                   selectedCount={selectedCount}
@@ -392,13 +434,24 @@ export default function TrackSelect({
                 gap: 2,
               }}
             >
-              <Button
-                variant="outlined"
-                color="secondary"
-                onClick={handleClear}
-              >
-                Clear
-              </Button>
+              <Box sx={{ display: "flex", gap: 2 }}>
+                <Button
+                  variant="outlined"
+                  color="secondary"
+                  onClick={handleClear}
+                >
+                  Clear
+                </Button>
+                {initialSelection && (
+                  <Button
+                    variant="outlined"
+                    color="secondary"
+                    onClick={handleReset}
+                  >
+                    Reset to Default
+                  </Button>
+                )}
+              </Box>
               <Box sx={{ display: "flex", gap: 2 }}>
                 <Button variant="outlined" onClick={handleCancel}>
                   Cancel
@@ -412,68 +465,23 @@ export default function TrackSelect({
                 </Button>
               </Box>
             </Box>
-            <Dialog
+            <LimitDialog
               open={limitDialogOpen}
               onClose={() => setLimitDialogOpen(false)}
-            >
-              <DialogTitle>Track Limit Reached</DialogTitle>
-              <DialogContent>
-                <DialogContentText>
-                  You can select up to {maxTracksLimit} tracks at a time. Please
-                  remove a track before adding another.
-                </DialogContentText>
-              </DialogContent>
-              <DialogActions>
-                <Button onClick={() => setLimitDialogOpen(false)} autoFocus>
-                  OK
-                </Button>
-              </DialogActions>
-            </Dialog>
-            <Dialog
+              maxTracks={maxTracksLimit}
+            />
+            <ClearDialog
               open={clearDialogOpen}
               onClose={() => setClearDialogOpen(false)}
-            >
-              <DialogTitle
-                sx={{
-                  bgcolor: "#0c184a",
-                  color: "white",
-                  fontWeight: "bold",
-                }}
-              >
-                {currentView === "folder-detail"
-                  ? `Clear ${activeFolder.label}`
-                  : "Clear All Folders"}
-              </DialogTitle>
-              <DialogContent sx={{ mt: 2 }}>
-                <DialogContentText>
-                  {currentView === "folder-detail" ? (
-                    <>
-                      Are you sure you want to clear the selection for{" "}
-                      <strong>{activeFolder.label}</strong>?
-                    </>
-                  ) : (
-                    "Are you sure you want to clear all selections?"
-                  )}
-                </DialogContentText>
-              </DialogContent>
-              <DialogActions sx={{ justifyContent: "center", gap: 2, pb: 2 }}>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  onClick={() => setClearDialogOpen(false)}
-                  autoFocus
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="outlined"
-                  color="secondary"
-                  onClick={confirmClear}
-                >
-                  Clear
-                </Button>
-              </DialogActions>
-            </Dialog>
+              onConfirm={confirmClear}
+              folderLabel={activeFolder.label}
+              clearAll={currentView === "folder-list"}
+            />
+            <ResetDialog
+              open={resetDialogOpen}
+              onClose={() => setResetDialogOpen(false)}
+              onConfirm={confirmReset}
+            />
           </Box>
         )}
       </DialogContent>

package/src/TrackSelect/TreeView/CustomTreeItem.tsx

@@ -1,214 +1,214 @@
-import Folder from "@mui/icons-material/Folder";
-import IndeterminateCheckBoxRoundedIcon from "@mui/icons-material/IndeterminateCheckBoxRounded";
-import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import Collapse from "@mui/material/Collapse";
-import { alpha, styled } from "@mui/material/styles";
-import {
-  TreeItemCheckbox,
-  TreeItemIconContainer,
-  TreeItemLabel,
-} from "@mui/x-tree-view/TreeItem";
-import { TreeItemIcon } from "@mui/x-tree-view/TreeItemIcon";
-import { TreeItemProvider } from "@mui/x-tree-view/TreeItemProvider";
-import { useTreeItemModel } from "@mui/x-tree-view/hooks";
-import { useTreeItem } from "@mui/x-tree-view/useTreeItem";
-import React, { ReactNode } from "react";
-import {
-  CustomLabelProps,
-  CustomTreeItemProps,
-  ExtendedTreeItemProps,
-} from "../types";
-
-// Everything below is styling for the custom directory look of the tree view
-const TreeItemRoot = styled("li")(({ theme }) => ({
-  listStyle: "none",
-  margin: 0,
-  padding: 0,
-  outline: 4,
-  color: theme.palette.grey[400],
-  ...theme.applyStyles("light", {
-    color: theme.palette.grey[600], // controls colors of the MUI icons
-  }),
-}));
-
-const TreeItemLabelText = styled(Typography)({
-  color: "black",
-  fontFamily: "inherit",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-function CustomLabel({
-  icon: Icon,
-  children,
-  isAssayItem,
-  assayName,
-  renderIcon,
-  ...other
-}: CustomLabelProps) {
-  const variant = "body2";
-  const fontWeight = 500;
-  const labelText = typeof children === "string" ? children : "";
-  return (
-    <TreeItemLabel
-      {...other}
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        minWidth: 0,
-        overflow: "hidden",
-        flex: 1,
-      }}
-    >
-      {Icon && React.isValidElement(Icon) ? (
-        <Box className="labelIcon" sx={{ mr: 1, flexShrink: 0 }}>
-          {Icon}
-        </Box>
-      ) : (
-        <Box
-          component={Icon as React.ElementType}
-          className="labelIcon"
-          color="inherit"
-          sx={{ mr: 1, fontSize: "1.2rem", flexShrink: 0 }}
-        />
-      )}
-      <Stack
-        direction="row"
-        spacing={1}
-        alignItems="center"
-        sx={{ minWidth: 0, overflow: "hidden", flex: 1 }}
-      >
-        {assayName && renderIcon && (
-          <Box sx={{ flexShrink: 0 }}>{renderIcon(assayName)}</Box>
-        )}
-        <Tooltip title={labelText} enterDelay={500} placement="top">
-          <TreeItemLabelText fontWeight={fontWeight} variant={variant}>
-            {labelText}
-          </TreeItemLabelText>
-        </Tooltip>
-      </Stack>
-    </TreeItemLabel>
-  );
-}
-
-const TreeItemContent = styled("div")(({ theme }) => ({
-  padding: theme.spacing(0.5),
-  paddingRight: theme.spacing(2),
-  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
-  width: "100%",
-  boxSizing: "border-box", // prevent width + padding to overflow
-  position: "relative",
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  cursor: "pointer",
-  WebkitTapHighlightColor: "transparent",
-  flexDirection: "row-reverse",
-  borderRadius: theme.spacing(0.7),
-  marginBottom: theme.spacing(0.5),
-  marginTop: theme.spacing(0.5),
-  fontWeight: 500,
-  "&:hover": {
-    backgroundColor: alpha(theme.palette.primary.main, 0.1),
-    color: "white",
-    ...theme.applyStyles("light", {
-      color: theme.palette.primary.main,
-    }),
-  },
-}));
-
-const getIconFromTreeItemType = (
-  itemType: string,
-  renderIcon?: (name: string) => ReactNode,
-) => {
-  switch (itemType) {
-    case "folder":
-      return Folder;
-    case "removeable":
-      return IndeterminateCheckBoxRoundedIcon;
-    default:
-      return renderIcon ? renderIcon(itemType) : Folder;
-  }
-};
-
-export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
-  props: CustomTreeItemProps,
-  ref: React.Ref<HTMLLIElement>,
-) {
-  const {
-    id,
-    itemId,
-    label,
-    disabled,
-    children,
-    onRemove,
-    renderIcon,
-    ...other
-  } = props;
-
-  const {
-    getContextProviderProps,
-    getRootProps,
-    getContentProps,
-    getIconContainerProps,
-    getCheckboxProps,
-    getLabelProps,
-    getGroupTransitionProps,
-    status,
-  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
-
-  const item = useTreeItemModel<ExtendedTreeItemProps>(itemId)!;
-  const icon = getIconFromTreeItemType(item.icon, renderIcon);
-
-  const handleRemoveIconClick = (e: React.MouseEvent) => {
-    e.stopPropagation(); // prevent item expand/select
-    onRemove?.(item);
-  };
-
-  return (
-    <TreeItemProvider {...getContextProviderProps()}>
-      <TreeItemRoot {...getRootProps(other)}>
-        <TreeItemContent {...getContentProps()}>
-          <TreeItemIconContainer {...getIconContainerProps()}>
-            <TreeItemIcon status={status} />
-          </TreeItemIconContainer>
-          <TreeItemCheckbox {...getCheckboxProps()} />
-          <CustomLabel
-            {...getLabelProps({
-              icon:
-                item.icon === "removeable" ? (
-                  <Box
-                    onClick={handleRemoveIconClick}
-                    sx={{
-                      width: 20,
-                      height: 20,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "4px",
-                      cursor: "pointer",
-                      mr: 1,
-                      "&:hover": {
-                        backgroundColor: "rgba(0,0,0,0.1)",
-                      },
-                    }}
-                  >
-                    <IndeterminateCheckBoxRoundedIcon fontSize="small" />
-                  </Box>
-                ) : (
-                  icon
-                ),
-              expandable: (status.expandable && status.expanded).toString(),
-              isAssayItem: item.isAssayItem,
-              assayName: item.assayName,
-              id: item.id,
-              renderIcon,
-            })}
-          />
-        </TreeItemContent>
-        {children && <Collapse {...getGroupTransitionProps()} />}
-      </TreeItemRoot>
-    </TreeItemProvider>
-  );
-});
+import Folder from "@mui/icons-material/Folder";
+import IndeterminateCheckBoxRoundedIcon from "@mui/icons-material/IndeterminateCheckBoxRounded";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import Collapse from "@mui/material/Collapse";
+import { alpha, styled } from "@mui/material/styles";
+import {
+  TreeItemCheckbox,
+  TreeItemIconContainer,
+  TreeItemLabel,
+} from "@mui/x-tree-view/TreeItem";
+import { TreeItemIcon } from "@mui/x-tree-view/TreeItemIcon";
+import { TreeItemProvider } from "@mui/x-tree-view/TreeItemProvider";
+import { useTreeItemModel } from "@mui/x-tree-view/hooks";
+import { useTreeItem } from "@mui/x-tree-view/useTreeItem";
+import React, { ReactNode } from "react";
+import {
+  CustomLabelProps,
+  CustomTreeItemProps,
+  ExtendedTreeItemProps,
+} from "../types";
+
+// Everything below is styling for the custom directory look of the tree view
+const TreeItemRoot = styled("li")(({ theme }) => ({
+  listStyle: "none",
+  margin: 0,
+  padding: 0,
+  outline: 4,
+  color: theme.palette.grey[400],
+  ...theme.applyStyles("light", {
+    color: theme.palette.grey[600], // controls colors of the MUI icons
+  }),
+}));
+
+const TreeItemLabelText = styled(Typography)({
+  color: "black",
+  fontFamily: "inherit",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+function CustomLabel({
+  icon: Icon,
+  children,
+  isAssayItem,
+  assayName,
+  renderIcon,
+  ...other
+}: CustomLabelProps) {
+  const variant = "body2";
+  const fontWeight = 500;
+  const labelText = typeof children === "string" ? children : "";
+  return (
+    <TreeItemLabel
+      {...other}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        minWidth: 0,
+        overflow: "hidden",
+        flex: 1,
+      }}
+    >
+      {Icon && React.isValidElement(Icon) ? (
+        <Box className="labelIcon" sx={{ mr: 1, flexShrink: 0 }}>
+          {Icon}
+        </Box>
+      ) : (
+        <Box
+          component={Icon as React.ElementType}
+          className="labelIcon"
+          color="inherit"
+          sx={{ mr: 1, fontSize: "1.2rem", flexShrink: 0 }}
+        />
+      )}
+      <Stack
+        direction="row"
+        spacing={1}
+        alignItems="center"
+        sx={{ minWidth: 0, overflow: "hidden", flex: 1 }}
+      >
+        {assayName && renderIcon && (
+          <Box sx={{ flexShrink: 0 }}>{renderIcon(assayName)}</Box>
+        )}
+        <Tooltip title={labelText} enterDelay={500} placement="top">
+          <TreeItemLabelText fontWeight={fontWeight} variant={variant}>
+            {labelText}
+          </TreeItemLabelText>
+        </Tooltip>
+      </Stack>
+    </TreeItemLabel>
+  );
+}
+
+const TreeItemContent = styled("div")(({ theme }) => ({
+  padding: theme.spacing(0.5),
+  paddingRight: theme.spacing(2),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
+  width: "100%",
+  boxSizing: "border-box", // prevent width + padding to overflow
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  cursor: "pointer",
+  WebkitTapHighlightColor: "transparent",
+  flexDirection: "row-reverse",
+  borderRadius: theme.spacing(0.7),
+  marginBottom: theme.spacing(0.5),
+  marginTop: theme.spacing(0.5),
+  fontWeight: 500,
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.1),
+    color: "white",
+    ...theme.applyStyles("light", {
+      color: theme.palette.primary.main,
+    }),
+  },
+}));
+
+const getIconFromTreeItemType = (
+  itemType: string,
+  renderIcon?: (name: string) => ReactNode,
+) => {
+  switch (itemType) {
+    case "folder":
+      return Folder;
+    case "removeable":
+      return IndeterminateCheckBoxRoundedIcon;
+    default:
+      return renderIcon ? renderIcon(itemType) : Folder;
+  }
+};
+
+export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+  props: CustomTreeItemProps,
+  ref: React.Ref<HTMLLIElement>,
+) {
+  const {
+    id,
+    itemId,
+    label,
+    disabled,
+    children,
+    onRemove,
+    renderIcon,
+    ...other
+  } = props;
+
+  const {
+    getContextProviderProps,
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getCheckboxProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    status,
+  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
+
+  const item = useTreeItemModel<ExtendedTreeItemProps>(itemId)!;
+  const icon = getIconFromTreeItemType(item.icon, renderIcon);
+
+  const handleRemoveIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation(); // prevent item expand/select
+    onRemove?.(item);
+  };
+
+  return (
+    <TreeItemProvider {...getContextProviderProps()}>
+      <TreeItemRoot {...getRootProps(other)}>
+        <TreeItemContent {...getContentProps()}>
+          <TreeItemIconContainer {...getIconContainerProps()}>
+            <TreeItemIcon status={status} />
+          </TreeItemIconContainer>
+          <TreeItemCheckbox {...getCheckboxProps()} />
+          <CustomLabel
+            {...getLabelProps({
+              icon:
+                item.icon === "removeable" ? (
+                  <Box
+                    onClick={handleRemoveIconClick}
+                    sx={{
+                      width: 20,
+                      height: 20,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      mr: 1,
+                      "&:hover": {
+                        backgroundColor: "rgba(0,0,0,0.1)",
+                      },
+                    }}
+                  >
+                    <IndeterminateCheckBoxRoundedIcon fontSize="small" />
+                  </Box>
+                ) : (
+                  icon
+                ),
+              expandable: (status.expandable && status.expanded).toString(),
+              isAssayItem: item.isAssayItem,
+              assayName: item.assayName,
+              id: item.id,
+              renderIcon,
+            })}
+          />
+        </TreeItemContent>
+        {children && <Collapse {...getGroupTransitionProps()} />}
+      </TreeItemRoot>
+    </TreeItemProvider>
+  );
+});