@weng-lab/genomebrowser-ui 0.2.2 → 0.2.3
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.
- package/.env.local +1 -1
- 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 +9 -5
- package/dist/genomebrowser-ui.es.js.map +1 -1
- package/eslint.config.js +30 -30
- package/index.html +14 -14
- package/package.json +1 -1
- package/src/TrackSelect/DataGrid/DataGridWrapper.tsx +137 -137
- package/src/TrackSelect/DataGrid/DefaultGroupingCell.tsx +64 -64
- package/src/TrackSelect/Dialogs/ClearDialog.tsx +63 -63
- package/src/TrackSelect/Dialogs/LimitDialog.tsx +33 -33
- package/src/TrackSelect/Dialogs/ResetDialog.tsx +43 -43
- 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 +11 -7
- 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/src/TrackSelect/types.ts
CHANGED
|
@@ -1,121 +1,121 @@
|
|
|
1
|
-
import { UseTreeItemParameters } from "@mui/x-tree-view/useTreeItem";
|
|
2
|
-
import { TreeViewBaseItem } from "@mui/x-tree-view";
|
|
3
|
-
import {
|
|
4
|
-
DataGridPremiumProps,
|
|
5
|
-
GridColDef,
|
|
6
|
-
GridRenderCellParams,
|
|
7
|
-
} from "@mui/x-data-grid-premium";
|
|
8
|
-
import { ReactElement, ReactNode } from "react";
|
|
9
|
-
import { SvgIconOwnProps } from "@mui/material";
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Custom Tree Props for RichTreeView Panel
|
|
13
|
-
*/
|
|
14
|
-
export type ExtendedTreeItemProps = {
|
|
15
|
-
id: string;
|
|
16
|
-
label: string;
|
|
17
|
-
icon: string;
|
|
18
|
-
folderId?: string;
|
|
19
|
-
isAssayItem?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* The assay name for leaf nodes (experiment accession items)
|
|
22
|
-
*/
|
|
23
|
-
assayName?: string;
|
|
24
|
-
/**
|
|
25
|
-
* list of all the experimentAccession values in the children/grandchildren of the item, or the accession of the item itself
|
|
26
|
-
* this is used in updating the rowSelectionModel when removing items from the Tree View panel
|
|
27
|
-
*/
|
|
28
|
-
allExpAccessions?: string[];
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Configuration for a single folder's tree in the TreeViewWrapper.
|
|
33
|
-
* Each folder gets its own tree with its own TreeItemComponent.
|
|
34
|
-
*/
|
|
35
|
-
export type FolderTreeConfig = {
|
|
36
|
-
folderId: string;
|
|
37
|
-
items: TreeViewBaseItem<ExtendedTreeItemProps>[];
|
|
38
|
-
/** Optional custom TreeItem component for this folder */
|
|
39
|
-
TreeItemComponent?: React.ForwardRefExoticComponent<
|
|
40
|
-
CustomTreeItemProps & React.RefAttributes<HTMLLIElement>
|
|
41
|
-
>;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export type TreeViewWrapperProps = {
|
|
45
|
-
/** Array of folder tree configurations, one per folder with selections */
|
|
46
|
-
folderTrees: FolderTreeConfig[];
|
|
47
|
-
selectedCount: number;
|
|
48
|
-
onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export interface CustomLabelProps {
|
|
52
|
-
id: string;
|
|
53
|
-
children: React.ReactNode;
|
|
54
|
-
isAssayItem?: boolean;
|
|
55
|
-
assayName?: string;
|
|
56
|
-
icon?: React.ElementType | React.ReactElement | ReactNode;
|
|
57
|
-
/** Optional function to render custom icons for assay items */
|
|
58
|
-
renderIcon?: (name: string) => ReactNode;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export interface CustomTreeItemProps
|
|
62
|
-
extends Omit<UseTreeItemParameters, "rootRef">,
|
|
63
|
-
Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {
|
|
64
|
-
onRemove?: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
|
|
65
|
-
/** Optional function to render custom icons for assay items */
|
|
66
|
-
renderIcon?: (name: string) => ReactNode;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Types for useSelectionStore to keep track of selected DataGrid rows/tracks
|
|
71
|
-
*/
|
|
72
|
-
export type SelectionState = {
|
|
73
|
-
selectedByFolder: Map<string, Set<string>>;
|
|
74
|
-
activeFolderId: string;
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
export type SelectionAction = {
|
|
78
|
-
clear: (folderId?: string) => void;
|
|
79
|
-
setActiveFolder: (folderId: string) => void;
|
|
80
|
-
setSelection: (folderId: string, ids: Set<string>) => void;
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* DataGrid Props
|
|
85
|
-
*/
|
|
86
|
-
interface BaseTableProps extends Omit<DataGridPremiumProps, "columns"> {
|
|
87
|
-
toolbarSlot?: ReactNode;
|
|
88
|
-
/**
|
|
89
|
-
* If anything besides an element, renders tooltip icon to the right of the table label with specified string as tooltip contents.
|
|
90
|
-
* If an element, renders the element to the right of the table label.
|
|
91
|
-
*/
|
|
92
|
-
labelTooltip?: ReactNode;
|
|
93
|
-
/**
|
|
94
|
-
* Styling object for the toolbar
|
|
95
|
-
*/
|
|
96
|
-
toolbarStyle?: React.CSSProperties;
|
|
97
|
-
/**
|
|
98
|
-
* Color passed as `htmlColor` to columns, filter, download and search icons
|
|
99
|
-
*/
|
|
100
|
-
toolbarIconColor?: SvgIconOwnProps["htmlColor"];
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
export type DataGridWrapperProps = {
|
|
104
|
-
rows: any[];
|
|
105
|
-
columns: GridColDef[];
|
|
106
|
-
groupingModel: string[];
|
|
107
|
-
leafField: string;
|
|
108
|
-
selectedIds: Set<string>;
|
|
109
|
-
onSelectionChange: (ids: Set<string>) => void;
|
|
110
|
-
/** Optional custom component for rendering grouping cells */
|
|
111
|
-
GroupingCellComponent?: React.FC<GridRenderCellParams>;
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
//This enforces that a downloadFileName is specified if a ReactElement is used as the label (no default )
|
|
115
|
-
export type DataGridProps = DataGridWrapperProps &
|
|
116
|
-
BaseTableProps &
|
|
117
|
-
(
|
|
118
|
-
| { label?: string; downloadFileName?: string }
|
|
119
|
-
| { label: ReactElement; downloadFileName: string }
|
|
120
|
-
| { label?: undefined; downloadFileName?: string }
|
|
121
|
-
);
|
|
1
|
+
import { UseTreeItemParameters } from "@mui/x-tree-view/useTreeItem";
|
|
2
|
+
import { TreeViewBaseItem } from "@mui/x-tree-view";
|
|
3
|
+
import {
|
|
4
|
+
DataGridPremiumProps,
|
|
5
|
+
GridColDef,
|
|
6
|
+
GridRenderCellParams,
|
|
7
|
+
} from "@mui/x-data-grid-premium";
|
|
8
|
+
import { ReactElement, ReactNode } from "react";
|
|
9
|
+
import { SvgIconOwnProps } from "@mui/material";
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Custom Tree Props for RichTreeView Panel
|
|
13
|
+
*/
|
|
14
|
+
export type ExtendedTreeItemProps = {
|
|
15
|
+
id: string;
|
|
16
|
+
label: string;
|
|
17
|
+
icon: string;
|
|
18
|
+
folderId?: string;
|
|
19
|
+
isAssayItem?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* The assay name for leaf nodes (experiment accession items)
|
|
22
|
+
*/
|
|
23
|
+
assayName?: string;
|
|
24
|
+
/**
|
|
25
|
+
* list of all the experimentAccession values in the children/grandchildren of the item, or the accession of the item itself
|
|
26
|
+
* this is used in updating the rowSelectionModel when removing items from the Tree View panel
|
|
27
|
+
*/
|
|
28
|
+
allExpAccessions?: string[];
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Configuration for a single folder's tree in the TreeViewWrapper.
|
|
33
|
+
* Each folder gets its own tree with its own TreeItemComponent.
|
|
34
|
+
*/
|
|
35
|
+
export type FolderTreeConfig = {
|
|
36
|
+
folderId: string;
|
|
37
|
+
items: TreeViewBaseItem<ExtendedTreeItemProps>[];
|
|
38
|
+
/** Optional custom TreeItem component for this folder */
|
|
39
|
+
TreeItemComponent?: React.ForwardRefExoticComponent<
|
|
40
|
+
CustomTreeItemProps & React.RefAttributes<HTMLLIElement>
|
|
41
|
+
>;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export type TreeViewWrapperProps = {
|
|
45
|
+
/** Array of folder tree configurations, one per folder with selections */
|
|
46
|
+
folderTrees: FolderTreeConfig[];
|
|
47
|
+
selectedCount: number;
|
|
48
|
+
onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export interface CustomLabelProps {
|
|
52
|
+
id: string;
|
|
53
|
+
children: React.ReactNode;
|
|
54
|
+
isAssayItem?: boolean;
|
|
55
|
+
assayName?: string;
|
|
56
|
+
icon?: React.ElementType | React.ReactElement | ReactNode;
|
|
57
|
+
/** Optional function to render custom icons for assay items */
|
|
58
|
+
renderIcon?: (name: string) => ReactNode;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export interface CustomTreeItemProps
|
|
62
|
+
extends Omit<UseTreeItemParameters, "rootRef">,
|
|
63
|
+
Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {
|
|
64
|
+
onRemove?: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
|
|
65
|
+
/** Optional function to render custom icons for assay items */
|
|
66
|
+
renderIcon?: (name: string) => ReactNode;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Types for useSelectionStore to keep track of selected DataGrid rows/tracks
|
|
71
|
+
*/
|
|
72
|
+
export type SelectionState = {
|
|
73
|
+
selectedByFolder: Map<string, Set<string>>;
|
|
74
|
+
activeFolderId: string;
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export type SelectionAction = {
|
|
78
|
+
clear: (folderId?: string) => void;
|
|
79
|
+
setActiveFolder: (folderId: string) => void;
|
|
80
|
+
setSelection: (folderId: string, ids: Set<string>) => void;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* DataGrid Props
|
|
85
|
+
*/
|
|
86
|
+
interface BaseTableProps extends Omit<DataGridPremiumProps, "columns"> {
|
|
87
|
+
toolbarSlot?: ReactNode;
|
|
88
|
+
/**
|
|
89
|
+
* If anything besides an element, renders tooltip icon to the right of the table label with specified string as tooltip contents.
|
|
90
|
+
* If an element, renders the element to the right of the table label.
|
|
91
|
+
*/
|
|
92
|
+
labelTooltip?: ReactNode;
|
|
93
|
+
/**
|
|
94
|
+
* Styling object for the toolbar
|
|
95
|
+
*/
|
|
96
|
+
toolbarStyle?: React.CSSProperties;
|
|
97
|
+
/**
|
|
98
|
+
* Color passed as `htmlColor` to columns, filter, download and search icons
|
|
99
|
+
*/
|
|
100
|
+
toolbarIconColor?: SvgIconOwnProps["htmlColor"];
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export type DataGridWrapperProps = {
|
|
104
|
+
rows: any[];
|
|
105
|
+
columns: GridColDef[];
|
|
106
|
+
groupingModel: string[];
|
|
107
|
+
leafField: string;
|
|
108
|
+
selectedIds: Set<string>;
|
|
109
|
+
onSelectionChange: (ids: Set<string>) => void;
|
|
110
|
+
/** Optional custom component for rendering grouping cells */
|
|
111
|
+
GroupingCellComponent?: React.FC<GridRenderCellParams>;
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
//This enforces that a downloadFileName is specified if a ReactElement is used as the label (no default )
|
|
115
|
+
export type DataGridProps = DataGridWrapperProps &
|
|
116
|
+
BaseTableProps &
|
|
117
|
+
(
|
|
118
|
+
| { label?: string; downloadFileName?: string }
|
|
119
|
+
| { label: ReactElement; downloadFileName: string }
|
|
120
|
+
| { label?: undefined; downloadFileName?: string }
|
|
121
|
+
);
|
package/src/lib.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import TrackSelect, { type TrackSelectProps } from "./TrackSelect/TrackSelect";
|
|
2
|
-
export { TrackSelect, TrackSelectProps };
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
createSelectionStore,
|
|
6
|
-
type SelectionStoreInstance,
|
|
7
|
-
} from "./TrackSelect/store.ts";
|
|
8
|
-
export { createSelectionStore, SelectionStoreInstance };
|
|
9
|
-
|
|
10
|
-
import { foldersByAssembly } from "./TrackSelect/Folders/index.ts";
|
|
11
|
-
export { foldersByAssembly };
|
|
12
|
-
|
|
13
|
-
export type { BiosampleRowInfo, GeneRowInfo } from "./TrackSelect/Folders";
|
|
1
|
+
import TrackSelect, { type TrackSelectProps } from "./TrackSelect/TrackSelect";
|
|
2
|
+
export { TrackSelect, TrackSelectProps };
|
|
3
|
+
|
|
4
|
+
import {
|
|
5
|
+
createSelectionStore,
|
|
6
|
+
type SelectionStoreInstance,
|
|
7
|
+
} from "./TrackSelect/store.ts";
|
|
8
|
+
export { createSelectionStore, SelectionStoreInstance };
|
|
9
|
+
|
|
10
|
+
import { foldersByAssembly } from "./TrackSelect/Folders/index.ts";
|
|
11
|
+
export { foldersByAssembly };
|
|
12
|
+
|
|
13
|
+
export type { BiosampleRowInfo, GeneRowInfo } from "./TrackSelect/Folders";
|
package/src/vite-env.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/// <reference types="vite/client" />
|
|
1
|
+
/// <reference types="vite/client" />
|