@weng-lab/genomebrowser-ui 0.4.0-beta.2 → 0.4.1

package/src/TrackSelect/Folders/psychscreen/human.ts

@@ -0,0 +1,10 @@
+import { createPsychscreenFolder } from "./shared/createFolder";
+import humanData from "./data/human.json";
+import { PsychscreenDataFile } from "./shared/types";
+
+export const humanPsychscreenFolder = createPsychscreenFolder({
+  id: "human-psychscreen",
+  label: "PsychSCREEN",
+  description: "PsychSCREEN browser tracks",
+  data: humanData as PsychscreenDataFile,
+});

package/src/TrackSelect/Folders/psychscreen/shared/PsychscreenGroupingCell.tsx

@@ -0,0 +1,78 @@
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Box, IconButton, Tooltip } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import {
+  GridGroupNode,
+  GridRenderCellParams,
+  useGridApiContext,
+} from "@mui/x-data-grid-premium";
+import { getPsychscreenCategoryColor } from "./columns";
+
+export function PsychscreenGroupingCell(params: GridRenderCellParams) {
+  const apiRef = useGridApiContext();
+  const isGroup = params.rowNode.type === "group";
+  const groupNode = params.rowNode as GridGroupNode;
+  const isExpanded = isGroup ? groupNode.childrenExpanded : false;
+  const groupingField = isGroup ? groupNode.groupingField : null;
+  const isCategoryGroup = groupingField === "category";
+  const color = getPsychscreenCategoryColor(
+    isCategoryGroup ? String(params.value ?? "") : params.row.category,
+  );
+  const label = String(params.formattedValue ?? params.value ?? "");
+  const depth = params.rowNode.depth ?? 0;
+
+  const handleExpandClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    apiRef.current.setRowChildrenExpansion(params.id, !isExpanded);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        gap: 1,
+        ml: depth * 2,
+      }}
+    >
+      {isGroup && (
+        <IconButton size="small" onClick={handleExpandClick} sx={{ mr: 0.25 }}>
+          {isExpanded ? (
+            <ExpandMoreIcon fontSize="small" />
+          ) : (
+            <ChevronRightIcon fontSize="small" />
+          )}
+        </IconButton>
+      )}
+      {isCategoryGroup && (
+        <Box
+          sx={{
+            width: 9,
+            height: 9,
+            borderRadius: "50%",
+            bgcolor: alpha(color, 0.65),
+            flexShrink: 0,
+          }}
+        />
+      )}
+      <Tooltip title={label} placement="top-start" enterDelay={500}>
+        <Box
+          sx={{
+            bgcolor: isCategoryGroup ? alpha(color, 0.06) : undefined,
+            borderRadius: isCategoryGroup ? 1 : undefined,
+            px: isCategoryGroup ? 0.75 : 0,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            flex: 1,
+            fontWeight: isGroup ? 700 : undefined,
+          }}
+        >
+          {label}
+        </Box>
+      </Tooltip>
+    </Box>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { GridColDef } from "@mui/x-data-grid-premium";
+import { PsychscreenTrackInfo } from "./types";
+
+export const psychscreenCategoryColors: Record<string, string> = {
+  "Epigenetic Tracks": "#9479bc",
+  "Deep Learned Models": "#758c7b",
+  "Pseudo bulk ATAC": "#cd8c66",
+  "Evolutionary Conservation": "#c0a9e2",
+  "ATAC Seq Peaks": "#9479bc",
+};
+
+export function getPsychscreenCategoryColor(category: string) {
+  return psychscreenCategoryColors[category] ?? "#000000";
+}
+
+const titleCol: GridColDef<PsychscreenTrackInfo> = {
+  field: "title",
+  headerName: "Title",
+  flex: 1,
+  minWidth: 240,
+};
+
+const categoryCol: GridColDef<PsychscreenTrackInfo> = {
+  field: "category",
+  headerName: "Category",
+  flex: 1,
+  minWidth: 180,
+};
+
+const subcategoryCol: GridColDef<PsychscreenTrackInfo> = {
+  field: "subcategory",
+  headerName: "Subcategory",
+  flex: 1,
+  minWidth: 240,
+};
+
+const trackTypeCol: GridColDef<PsychscreenTrackInfo> = {
+  field: "trackType",
+  headerName: "Track Type",
+  width: 120,
+};
+
+export const defaultColumns: GridColDef<PsychscreenTrackInfo>[] = [
+  titleCol,
+  categoryCol,
+  subcategoryCol,
+  trackTypeCol,
+];
+
+export const defaultGroupingModel = ["category", "subcategory"];
+
+export const defaultLeafField = "title";

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

@@ -0,0 +1,45 @@
+import { FolderDefinition } from "../../types";
+import { PsychscreenDataFile, PsychscreenTrackInfo } from "./types";
+import {
+  defaultColumns,
+  defaultGroupingModel,
+  defaultLeafField,
+} from "./columns";
+import { PsychscreenGroupingCell } from "./PsychscreenGroupingCell";
+import { createPsychscreenTrack } from "./toTrack";
+
+function transformData(
+  folderId: string,
+  data: PsychscreenDataFile,
+): PsychscreenTrackInfo[] {
+  return data.map((row) => ({
+    ...row,
+    sourceId: row.id,
+    id: `${folderId}/${row.id}`,
+  }));
+}
+
+export interface CreatePsychscreenFolderOptions {
+  id: string;
+  label: string;
+  description?: string;
+  data: PsychscreenDataFile;
+}
+
+export function createPsychscreenFolder(
+  options: CreatePsychscreenFolderOptions,
+): FolderDefinition<PsychscreenTrackInfo> {
+  const { id, label, description, data } = options;
+
+  return {
+    id,
+    label,
+    description,
+    rows: transformData(id, data),
+    columns: defaultColumns,
+    groupingModel: defaultGroupingModel,
+    leafField: defaultLeafField,
+    createTrack: createPsychscreenTrack,
+    GroupingCellComponent: PsychscreenGroupingCell,
+  };
+}

package/src/TrackSelect/Folders/psychscreen/shared/toTrack.ts

@@ -0,0 +1,48 @@
+import {
+  BigBedConfig,
+  BigWigConfig,
+  DisplayMode,
+  Track,
+  TrackType,
+} from "@weng-lab/genomebrowser";
+import { CreateTrackOptions } from "../../types";
+import { PsychscreenTrackInfo } from "./types";
+
+export type PsychscreenTrackContext = {};
+
+const defaultBigWig: Omit<BigWigConfig, "id" | "title" | "url"> = {
+  trackType: TrackType.BigWig,
+  height: 50,
+  displayMode: DisplayMode.Full,
+  titleSize: 12,
+};
+
+const defaultBigBed: Omit<BigBedConfig, "id" | "title" | "url"> = {
+  trackType: TrackType.BigBed,
+  height: 30,
+  displayMode: DisplayMode.Dense,
+  titleSize: 12,
+};
+
+export function createPsychscreenTrack(
+  row: PsychscreenTrackInfo,
+  _options: CreateTrackOptions,
+): Track {
+  if (row.trackType === "bigbed") {
+    return {
+      ...defaultBigBed,
+      id: row.id,
+      title: row.title,
+      url: row.url,
+      color: row.color ?? "#000000",
+    };
+  }
+
+  return {
+    ...defaultBigWig,
+    id: row.id,
+    title: row.title,
+    url: row.url,
+    color: row.color ?? "#000000",
+  };
+}

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

@@ -0,0 +1,14 @@
+export type PsychscreenTrackType = "bigwig" | "bigbed";
+
+export type PsychscreenTrackInfo = {
+  id: string;
+  sourceId?: string;
+  category: string;
+  subcategory: string;
+  title: string;
+  url: string;
+  trackType: PsychscreenTrackType;
+  color?: string;
+};
+
+export type PsychscreenDataFile = PsychscreenTrackInfo[];

package/src/TrackSelect/TreeView/CustomTreeItem.tsx

@@ -155,10 +155,18 @@ export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
     getLabelProps,
     getGroupTransitionProps,
     status,
-  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
+  } = useTreeItem({
+    id,
+    itemId,
+    children,
+    label,
+    disabled,
+    rootRef: ref as never,
+  });
 
   const item = useTreeItemModel<ExtendedTreeItemProps>(itemId)!;
   const icon = getIconFromTreeItemType(item.icon, renderIcon);
+  const rootProps = getRootProps(other) as React.ComponentPropsWithoutRef<"li">;
 
   const handleRemoveIconClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -167,7 +175,7 @@ export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
 
   return (
     <TreeItemProvider {...getContextProviderProps()}>
-      <TreeItemRoot {...getRootProps(other)}>
+      <TreeItemRoot {...rootProps}>
         <TreeItemContent {...getContentProps()}>
           <TreeItemIconContainer {...getIconContainerProps()}>
             <TreeItemIcon status={status} />

package/src/TrackSelect/TreeView/TreeViewWrapper.tsx

@@ -101,7 +101,10 @@ function FolderTree({
     <RichTreeView
       items={items}
       expandedItems={expandedItems}
-      onExpandedItemsChange={(_event, ids) => setExpandedItems(ids)}
+      onExpandedItemsChange={(
+        _event: React.SyntheticEvent | null,
+        ids: string[],
+      ) => setExpandedItems(ids)}
       slots={{ item: TreeItem }}
       slotProps={{
         item: {

package/src/TrackSelect/trackContext.ts

@@ -2,8 +2,10 @@ import type { BiosampleTrackContext } from "./Folders/biosamples/shared/toTrack"
 import type { GeneTrackContext } from "./Folders/genes/shared/toTrack";
 import type { MohdTrackContext } from "./Folders/mohd/shared/toTrack";
 import type { OtherTracksTrackContext } from "./Folders/other-tracks/shared/toTrack";
+import type { PsychscreenTrackContext } from "./Folders/psychscreen/shared/toTrack";
 
 export type TrackSelectTrackContext = GeneTrackContext &
   BiosampleTrackContext &
   MohdTrackContext &
+  PsychscreenTrackContext &
   OtherTracksTrackContext;

package/src/TrackSelect/types.ts

@@ -50,7 +50,7 @@ export interface CustomLabelProps {
 export interface CustomTreeItemProps
   extends
     Omit<UseTreeItemParameters, "rootRef">,
-    Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {
+    Omit<React.HTMLAttributes<HTMLLIElement>, "children" | "onFocus"> {
   onRemove?: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
   renderIcon?: (name: string) => ReactNode;
 }