@weng-lab/genomebrowser-ui 0.2.2 → 0.2.3

package/src/TrackSelect/Dialogs/LimitDialog.tsx

@@ -1,33 +1,33 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from "@mui/material";
-
-interface LimitDialogProps {
-  open: boolean;
-  onClose: () => void;
-  maxTracks: number;
-}
-
-export function LimitDialog({ open, onClose, maxTracks }: LimitDialogProps) {
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle>Track Limit Reached</DialogTitle>
-      <DialogContent>
-        <DialogContentText>
-          You can select up to {maxTracks} tracks at a time. Please remove a
-          track before adding another.
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose} autoFocus>
-          OK
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+
+interface LimitDialogProps {
+  open: boolean;
+  onClose: () => void;
+  maxTracks: number;
+}
+
+export function LimitDialog({ open, onClose, maxTracks }: LimitDialogProps) {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Track Limit Reached</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          You can select up to {maxTracks} tracks at a time. Please remove a
+          track before adding another.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} autoFocus>
+          OK
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/TrackSelect/Dialogs/ResetDialog.tsx

@@ -1,43 +1,43 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from "@mui/material";
-
-interface ResetDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-}
-
-export function ResetDialog({ open, onClose, onConfirm }: ResetDialogProps) {
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle
-        sx={{
-          bgcolor: "#0c184a",
-          color: "white",
-          fontWeight: "bold",
-        }}
-      >
-        Reset to Default
-      </DialogTitle>
-      <DialogContent sx={{ mt: 2 }}>
-        <DialogContentText>
-          Are you sure you want to reset all selections to the default?
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions sx={{ justifyContent: "center", gap: 2, pb: 2 }}>
-        <Button variant="contained" color="primary" onClick={onClose} autoFocus>
-          Cancel
-        </Button>
-        <Button variant="outlined" color="secondary" onClick={onConfirm}>
-          Reset
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+
+interface ResetDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function ResetDialog({ open, onClose, onConfirm }: ResetDialogProps) {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle
+        sx={{
+          bgcolor: "#0c184a",
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        Reset to Default
+      </DialogTitle>
+      <DialogContent sx={{ mt: 2 }}>
+        <DialogContentText>
+          Are you sure you want to reset all selections to the default?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ justifyContent: "center", gap: 2, pb: 2 }}>
+        <Button variant="contained" color="primary" onClick={onClose} autoFocus>
+          Cancel
+        </Button>
+        <Button variant="outlined" color="secondary" onClick={onConfirm}>
+          Reset
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/TrackSelect/FolderList/Breadcrumb.tsx

@@ -1,38 +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>
-  );
-}
+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

@@ -1,51 +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>
-  );
-}
+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

@@ -1,47 +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>
-  );
-}
+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>
+  );
+}