@weng-lab/genomebrowser-ui 0.4.0-beta.0 → 0.4.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.4.0-beta.0",
+  "version": "0.4.0-beta.1",
   "license": "MIT",
   "type": "module",
   "publishConfig": {

package/src/TrackSelect/Dialogs/ClearDialog.tsx

@@ -26,8 +26,8 @@ export function ClearDialog({
     <Dialog open={open} onClose={onClose}>
       <DialogTitle
         sx={{
-          bgcolor: "#0c184a",
-          color: "white",
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
           fontWeight: "bold",
         }}
       >
@@ -46,12 +46,7 @@ export function ClearDialog({
         </DialogContentText>
       </DialogContent>
       <DialogActions sx={{ justifyContent: "center", gap: 2, pb: 2 }}>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={onClose}
-          autoFocus
-        >
+        <Button variant="contained" color="primary" onClick={onClose} autoFocus>
           Cancel
         </Button>
         <Button variant="outlined" color="secondary" onClick={onConfirm}>

package/src/TrackSelect/Dialogs/ResetDialog.tsx

@@ -18,8 +18,8 @@ export function ResetDialog({ open, onClose, onConfirm }: ResetDialogProps) {
     <Dialog open={open} onClose={onClose}>
       <DialogTitle
         sx={{
-          bgcolor: "#0c184a",
-          color: "white",
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
           fontWeight: "bold",
         }}
       >

package/src/TrackSelect/Folders/genes/shared/columns.tsx

@@ -37,6 +37,6 @@ export const defaultColumns: GridColDef<GeneRowInfo>[] = [
 export const defaultGroupingModel: string[] = [];
 
 /**
- * Leaf field - the unique identifier
+ * Leaf field - the raw track ID (without folder prefix) used as the tree view leaf label
  */
-export const defaultLeafField = "id";
+export const defaultLeafField = "trackId";

package/src/TrackSelect/Folders/genes/shared/createFolder.ts

@@ -11,6 +11,7 @@ import { createGeneTrack } from "./toTrack";
 function trackToRow(folderId: string, track: GeneTrackInfo): GeneRowInfo {
   return {
     id: `${folderId}/${track.id}`,
+    trackId: track.id,
     displayName: track.displayName,
     versions: track.versions,
   };

package/src/TrackSelect/Folders/genes/shared/types.ts

@@ -19,6 +19,8 @@ export type GeneTrackInfo = {
  */
 export type GeneRowInfo = {
   id: string;
+  /** The raw track ID without the folder prefix, used as the tree view leaf label */
+  trackId: string;
   displayName: string;
   versions: number[];
 };

package/src/TrackSelect/TrackSelect.tsx

@@ -376,8 +376,8 @@ export default function TrackSelect({
     <Dialog open={open} onClose={handleCancel} maxWidth="lg" fullWidth>
       <DialogTitle
         sx={{
-          bgcolor: "#0c184a",
-          color: "white",
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
@@ -388,7 +388,7 @@ export default function TrackSelect({
         <IconButton
           size="large"
           onClick={handleCancel}
-          sx={{ color: "white", p: 0 }}
+          sx={{ color: "primary.contrastText", p: 0 }}
         >
           <CloseIcon fontSize="large" />
         </IconButton>

package/src/TrackSelect/TreeView/CustomTreeItem.tsx

@@ -30,13 +30,13 @@ const TreeItemRoot = styled("li")(({ theme }) => ({
   }),
 }));
 
-const TreeItemLabelText = styled(Typography)({
-  color: "black",
+const TreeItemLabelText = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
   fontFamily: "inherit",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
-});
+}));
 
 function CustomLabel({
   icon: Icon,