npm - @weng-lab/genomebrowser-ui - Versions diffs - 0.2.1 → 0.2.2 - Mend

@weng-lab/genomebrowser-ui 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/.env.local +1 -1
package/dist/TrackSelect/Dialogs/ClearDialog.d.ts +9 -0
package/dist/TrackSelect/Dialogs/LimitDialog.d.ts +7 -0
package/dist/TrackSelect/Dialogs/ResetDialog.d.ts +7 -0
package/dist/TrackSelect/Folders/biosamples/data/human.json.d.ts +57141 -57141
package/dist/TrackSelect/Folders/biosamples/data/mouse.json.d.ts +10394 -10394
package/dist/TrackSelect/Folders/genes/data/human.json.d.ts +7 -7
package/dist/TrackSelect/Folders/genes/data/mouse.json.d.ts +7 -7
package/dist/genomebrowser-ui.es.js +729 -645
package/dist/genomebrowser-ui.es.js.map +1 -1
package/eslint.config.js +30 -30
package/index.html +14 -14
package/package.json +2 -1
package/src/TrackSelect/DataGrid/DataGridWrapper.tsx +137 -137
package/src/TrackSelect/DataGrid/DefaultGroupingCell.tsx +64 -64
package/src/TrackSelect/Dialogs/ClearDialog.tsx +63 -0
package/src/TrackSelect/Dialogs/LimitDialog.tsx +33 -0
package/src/TrackSelect/Dialogs/ResetDialog.tsx +43 -0
package/src/TrackSelect/FolderList/Breadcrumb.tsx +38 -38
package/src/TrackSelect/FolderList/FolderCard.tsx +51 -51
package/src/TrackSelect/FolderList/FolderList.tsx +47 -47
package/src/TrackSelect/Folders/NEW.md +929 -929
package/src/TrackSelect/Folders/biosamples/data/formatBiosamples.go +254 -254
package/src/TrackSelect/Folders/biosamples/data/human.json +57141 -57141
package/src/TrackSelect/Folders/biosamples/data/mouse.json +10394 -10394
package/src/TrackSelect/Folders/biosamples/human.ts +17 -17
package/src/TrackSelect/Folders/biosamples/mouse.ts +17 -17
package/src/TrackSelect/Folders/biosamples/shared/AssayToggle.tsx +78 -78
package/src/TrackSelect/Folders/biosamples/shared/BiosampleGroupingCell.tsx +146 -146
package/src/TrackSelect/Folders/biosamples/shared/BiosampleTreeItem.tsx +15 -15
package/src/TrackSelect/Folders/biosamples/shared/columns.tsx +165 -165
package/src/TrackSelect/Folders/biosamples/shared/constants.tsx +116 -116
package/src/TrackSelect/Folders/biosamples/shared/createFolder.ts +116 -116
package/src/TrackSelect/Folders/biosamples/shared/treeBuilder.ts +224 -224
package/src/TrackSelect/Folders/biosamples/shared/types.ts +48 -48
package/src/TrackSelect/Folders/genes/data/human.json +7 -7
package/src/TrackSelect/Folders/genes/data/mouse.json +7 -7
package/src/TrackSelect/Folders/genes/human.ts +16 -16
package/src/TrackSelect/Folders/genes/mouse.ts +16 -16
package/src/TrackSelect/Folders/genes/shared/columns.tsx +42 -42
package/src/TrackSelect/Folders/genes/shared/createFolder.ts +68 -68
package/src/TrackSelect/Folders/genes/shared/treeBuilder.ts +45 -45
package/src/TrackSelect/Folders/genes/shared/types.ts +29 -29
package/src/TrackSelect/Folders/index.ts +30 -30
package/src/TrackSelect/Folders/types.ts +106 -106
package/src/TrackSelect/TrackSelect.tsx +82 -74
package/src/TrackSelect/TreeView/CustomTreeItem.tsx +214 -214
package/src/TrackSelect/TreeView/TreeViewWrapper.tsx +145 -145
package/src/TrackSelect/store.ts +117 -117
package/src/TrackSelect/types.ts +121 -121
package/src/lib.ts +13 -13
package/src/vite-env.d.ts +1 -1
package/test/main.tsx +369 -369
package/tsconfig.app.json +25 -25
package/tsconfig.json +7 -7
package/tsconfig.node.json +25 -25
package/vite.config.ts +66 -66

package/eslint.config.js CHANGED Viewed

@@ -1,30 +1,30 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from "eslint-plugin-storybook";
-import js from "@eslint/js";
-import globals from "globals";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import tseslint from "typescript-eslint";
-export default tseslint.config(
-  { ignores: ["dist"] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ["**/*.{ts,tsx}"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      "react-hooks": reactHooks,
-      "react-refresh": reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      "@typescript-eslint/no-explicit-any": "warn",
-      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
-    },
-  },
-  storybook.configs["flat/recommended"]
-);
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "@typescript-eslint/no-explicit-any": "warn",
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    },
+  },
+  storybook.configs["flat/recommended"]
+);

package/index.html CHANGED Viewed

@@ -1,14 +1,14 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Genomebrowser-UI Test Page</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
-    <script type="module" src="/test/main.tsx"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Genomebrowser-UI Test Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
+    <script type="module" src="/test/main.tsx"></script>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -33,6 +33,7 @@
     "eslint": "^9.34.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "typescript": "^5.7.3",
     "typescript-eslint": "^8.42.0",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4"

package/src/TrackSelect/DataGrid/DataGridWrapper.tsx CHANGED Viewed

@@ -1,137 +1,137 @@
-import { Box, Paper } from "@mui/material";
-import {
-  DataGridPremium,
-  FilterColumnsArgs,
-  GridAutosizeOptions,
-  GridColDef,
-  GridColumnVisibilityModel,
-  useGridApiRef,
-} from "@mui/x-data-grid-premium";
-import { useEffect, useMemo, useState } from "react";
-import { DataGridProps } from "../types";
-import { DefaultGroupingCell } from "./DefaultGroupingCell";
-const autosizeOptions: GridAutosizeOptions = {
-  expand: true,
-  includeHeaders: true,
-  outliersFactor: 1.5,
-};
-export function DataGridWrapper(props: DataGridProps) {
-  const {
-    columns,
-    groupingModel,
-    leafField,
-    onSelectionChange,
-    rows,
-    selectedIds,
-    GroupingCellComponent,
-  } = props;
-  const GroupingCell = GroupingCellComponent ?? DefaultGroupingCell;
-  const apiRef = useGridApiRef();
-  useEffect(() => {
-    if (apiRef.current && apiRef.current.autosizeColumns) {
-      apiRef.current.autosizeColumns(autosizeOptions);
-    }
-  }, [columns, groupingModel, leafField]);
-  const baseVisibility = useMemo(() => {
-    const visibility: GridColumnVisibilityModel = {
-      id: false,
-    };
-    // Only hide leafField if we have grouping (it shows in grouping column)
-    if (groupingModel.length > 0) {
-      visibility[leafField] = false;
-    }
-    groupingModel.forEach((field) => {
-      visibility[field] = false;
-    });
-    return visibility;
-  }, [groupingModel, leafField]);
-  const [columnVisibilityModel, setColumnVisibilityModel] =
-    useState<GridColumnVisibilityModel>(baseVisibility);
-  useEffect(() => {
-    setColumnVisibilityModel(baseVisibility);
-  }, [baseVisibility]);
-  // 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);
-  };
-  const getTogglableColumns = (columns: GridColDef[]) => {
-    return columns
-      .filter((column) => column.type !== "custom")
-      .map((column) => column.field);
-  };
-  return (
-    <Paper sx={{ width: "100%" }}>
-      <Box
-        sx={{
-          height: 500,
-          width: "100%",
-          overflow: "auto",
-        }}
-      >
-        <DataGridPremium
-          apiRef={apiRef}
-          rows={rows}
-          columns={columns}
-          getRowId={(row) => row.id}
-          autosizeOptions={autosizeOptions}
-          rowGroupingModel={groupingModel}
-          groupingColDef={{
-            leafField,
-            display: "flex",
-            minWidth: 300,
-            maxWidth: 500,
-            flex: 2,
-            renderCell: (params) => <GroupingCell {...params} />,
-          }}
-          columnVisibilityModel={columnVisibilityModel}
-          onColumnVisibilityModelChange={setColumnVisibilityModel}
-          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",
-            ids: selectedIds,
-          }}
-          slotProps={{
-            filterPanel: {
-              filterFormProps: {
-                filterColumns,
-              },
-            },
-            columnsManagement: {
-              getTogglableColumns,
-            },
-          }}
-          keepNonExistentRowsSelected
-          showToolbar
-          disableAggregation
-          disableRowSelectionExcludeModel
-          disablePivoting
-          checkboxSelection
-          autosizeOnMount
-          pagination
-          hideFooterSelectedRowCount
-        />
-      </Box>
-    </Paper>
-  );
-}
+import { Box, Paper } from "@mui/material";
+import {
+  DataGridPremium,
+  FilterColumnsArgs,
+  GridAutosizeOptions,
+  GridColDef,
+  GridColumnVisibilityModel,
+  useGridApiRef,
+} from "@mui/x-data-grid-premium";
+import { useEffect, useMemo, useState } from "react";
+import { DataGridProps } from "../types";
+import { DefaultGroupingCell } from "./DefaultGroupingCell";
+const autosizeOptions: GridAutosizeOptions = {
+  expand: true,
+  includeHeaders: true,
+  outliersFactor: 1.5,
+};
+export function DataGridWrapper(props: DataGridProps) {
+  const {
+    columns,
+    groupingModel,
+    leafField,
+    onSelectionChange,
+    rows,
+    selectedIds,
+    GroupingCellComponent,
+  } = props;
+  const GroupingCell = GroupingCellComponent ?? DefaultGroupingCell;
+  const apiRef = useGridApiRef();
+  useEffect(() => {
+    if (apiRef.current && apiRef.current.autosizeColumns) {
+      apiRef.current.autosizeColumns(autosizeOptions);
+    }
+  }, [columns, groupingModel, leafField]);
+  const baseVisibility = useMemo(() => {
+    const visibility: GridColumnVisibilityModel = {
+      id: false,
+    };
+    // Only hide leafField if we have grouping (it shows in grouping column)
+    if (groupingModel.length > 0) {
+      visibility[leafField] = false;
+    }
+    groupingModel.forEach((field) => {
+      visibility[field] = false;
+    });
+    return visibility;
+  }, [groupingModel, leafField]);
+  const [columnVisibilityModel, setColumnVisibilityModel] =
+    useState<GridColumnVisibilityModel>(baseVisibility);
+  useEffect(() => {
+    setColumnVisibilityModel(baseVisibility);
+  }, [baseVisibility]);
+  // 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);
+  };
+  const getTogglableColumns = (columns: GridColDef[]) => {
+    return columns
+      .filter((column) => column.type !== "custom")
+      .map((column) => column.field);
+  };
+  return (
+    <Paper sx={{ width: "100%" }}>
+      <Box
+        sx={{
+          height: 500,
+          width: "100%",
+          overflow: "auto",
+        }}
+      >
+        <DataGridPremium
+          apiRef={apiRef}
+          rows={rows}
+          columns={columns}
+          getRowId={(row) => row.id}
+          autosizeOptions={autosizeOptions}
+          rowGroupingModel={groupingModel}
+          groupingColDef={{
+            leafField,
+            display: "flex",
+            minWidth: 300,
+            maxWidth: 500,
+            flex: 2,
+            renderCell: (params) => <GroupingCell {...params} />,
+          }}
+          columnVisibilityModel={columnVisibilityModel}
+          onColumnVisibilityModelChange={setColumnVisibilityModel}
+          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",
+            ids: selectedIds,
+          }}
+          slotProps={{
+            filterPanel: {
+              filterFormProps: {
+                filterColumns,
+              },
+            },
+            columnsManagement: {
+              getTogglableColumns,
+            },
+          }}
+          keepNonExistentRowsSelected
+          showToolbar
+          disableAggregation
+          disableRowSelectionExcludeModel
+          disablePivoting
+          checkboxSelection
+          autosizeOnMount
+          pagination
+          hideFooterSelectedRowCount
+        />
+      </Box>
+    </Paper>
+  );
+}

package/src/TrackSelect/DataGrid/DefaultGroupingCell.tsx CHANGED Viewed

@@ -1,64 +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>
-  );
-}
+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/Dialogs/ClearDialog.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+interface ClearDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  folderLabel: string;
+  clearAll: boolean;
+}
+export function ClearDialog({
+  open,
+  onClose,
+  onConfirm,
+  folderLabel,
+  clearAll,
+}: ClearDialogProps) {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle
+        sx={{
+          bgcolor: "#0c184a",
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {clearAll ? "Clear All Folders" : `Clear ${folderLabel}`}
+      </DialogTitle>
+      <DialogContent sx={{ mt: 2 }}>
+        <DialogContentText>
+          {clearAll ? (
+            "Are you sure you want to clear all selections?"
+          ) : (
+            <>
+              Are you sure you want to clear the selection for{" "}
+              <strong>{folderLabel}</strong>?
+            </>
+          )}
+        </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}>
+          Clear
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/TrackSelect/Dialogs/LimitDialog.tsx ADDED Viewed

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

package/src/TrackSelect/Dialogs/ResetDialog.tsx ADDED Viewed

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