@weng-lab/genomebrowser-ui 0.1.1

package/src/TrackSelect/DataGrid/CustomToolbar.tsx

@@ -0,0 +1,160 @@
+import * as React from "react";
+import {
+  Toolbar,
+  ToolbarButton,
+  ColumnsPanelTrigger,
+  FilterPanelTrigger,
+  ExportCsv,
+  ExportPrint,
+  GridToolbarProps,
+  ToolbarPropsOverrides,
+  ExportExcel,
+} from "@mui/x-data-grid-premium";
+import Tooltip from "@mui/material/Tooltip";
+import Menu from "@mui/material/Menu";
+import Badge from "@mui/material/Badge";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
+import MenuItem from "@mui/material/MenuItem";
+import Divider from "@mui/material/Divider";
+import Typography from "@mui/material/Typography";
+import { DataGridProps } from "../types";
+import { InfoOutline } from "@mui/icons-material";
+
+type CustomToolbarProps = {
+  label: DataGridProps["label"];
+  downloadFileName: DataGridProps["downloadFileName"];
+  labelTooltip: DataGridProps["labelTooltip"];
+  toolbarSlot?: DataGridProps["toolbarSlot"];
+  toolbarStyle?: DataGridProps["toolbarStyle"];
+  toolbarIconColor?: DataGridProps["toolbarIconColor"];
+} & GridToolbarProps &
+  ToolbarPropsOverrides;
+
+export function CustomToolbar({
+  label,
+  downloadFileName,
+  labelTooltip,
+  toolbarSlot,
+  toolbarStyle,
+  toolbarIconColor,
+  ...restToolbarProps
+}: CustomToolbarProps) {
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef<HTMLButtonElement>(null);
+
+  const iconColor = toolbarIconColor ?? "inherit";
+
+  return (
+    <Toolbar style={{ ...toolbarStyle }}>
+      {typeof label !== "string" && label}
+      <Typography
+        fontWeight="medium"
+        sx={{ flex: 1, mx: 0.5, display: "flex", alignItems: "center", gap: 1 }}
+      >
+        {typeof label === "string" && label}
+        {/* ReactNode can be more than just an element, string, or number but not accounting for that for simplicity */}
+        {labelTooltip &&
+        (typeof labelTooltip === "string" ||
+          typeof labelTooltip === "number") ? (
+          <Tooltip title={labelTooltip}>
+            <InfoOutline fontSize="inherit" color="primary" />
+          </Tooltip>
+        ) : (
+          labelTooltip
+        )}
+      </Typography>
+      {toolbarSlot && (
+        <>
+          {toolbarSlot}
+          <Divider
+            orientation="vertical"
+            variant="middle"
+            flexItem
+            sx={{ mx: 0.5 }}
+          />
+        </>
+      )}
+
+      <Tooltip title="Columns">
+        <ColumnsPanelTrigger render={<ToolbarButton />}>
+          <ViewColumnIcon fontSize="small" htmlColor={iconColor} />
+        </ColumnsPanelTrigger>
+      </Tooltip>
+
+      <Tooltip title="Filters">
+        <FilterPanelTrigger
+          render={(props, state) => (
+            <ToolbarButton {...props} color="default">
+              <Badge
+                badgeContent={state.filterCount}
+                color="primary"
+                variant="dot"
+              >
+                <FilterListIcon fontSize="small" htmlColor={iconColor} />
+              </Badge>
+            </ToolbarButton>
+          )}
+        />
+      </Tooltip>
+      <Divider
+        orientation="vertical"
+        variant="middle"
+        flexItem
+        sx={{ mx: 0.5 }}
+      />
+      <Tooltip title="Export">
+        <ToolbarButton
+          ref={exportMenuTriggerRef}
+          id="export-menu-trigger"
+          aria-controls="export-menu"
+          aria-haspopup="true"
+          aria-expanded={exportMenuOpen ? "true" : undefined}
+          onClick={() => setExportMenuOpen(true)}
+        >
+          <FileDownloadIcon fontSize="small" htmlColor={iconColor} />
+        </ToolbarButton>
+      </Tooltip>
+
+      <Menu
+        id="export-menu"
+        anchorEl={exportMenuTriggerRef.current}
+        open={exportMenuOpen}
+        onClose={() => setExportMenuOpen(false)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "right" }}
+        slotProps={{
+          list: {
+            "aria-labelledby": "export-menu-trigger",
+          },
+        }}
+      >
+        <ExportPrint
+          options={{ ...restToolbarProps.printOptions }}
+          render={<MenuItem />}
+          onClick={() => setExportMenuOpen(false)}
+        >
+          Print
+        </ExportPrint>
+        <ExportCsv
+          options={{
+            fileName: typeof label === "string" ? label : downloadFileName,
+            ...restToolbarProps.csvOptions,
+          }}
+          render={<MenuItem />}
+          onClick={() => setExportMenuOpen(false)}
+        >
+          Download as CSV
+        </ExportCsv>
+        <ExportExcel
+          options={{ ...restToolbarProps.excelOptions }}
+          render={<MenuItem />}
+          onClick={() => setExportMenuOpen(false)}
+        >
+          Download as Excel
+        </ExportExcel>
+      </Menu>
+    </Toolbar>
+  );
+}

package/src/TrackSelect/DataGrid/DataGridWrapper.tsx

@@ -0,0 +1,119 @@
+import { Box, Paper } from "@mui/material";
+import {
+  DataGridPremium,
+  GridToolbarProps,
+  ToolbarPropsOverrides,
+  GridAutosizeOptions,
+  useGridApiRef,
+  GridColDef,
+  FilterColumnsArgs
+} from "@mui/x-data-grid-premium";
+import { DataGridProps } from "../types";
+import { CustomToolbar } from "./CustomToolbar";
+import { useEffect, useMemo } from "react";
+import { sortedByAssayColumns, defaultColumns } from "./columns";
+
+const autosizeOptions: GridAutosizeOptions = {
+  expand: true,
+  includeHeaders: true,
+  outliersFactor: 1.5,
+};
+
+// TODO: figure out where mui stores the number of rows in a row grouping so that can be bolded too
+export function DataGridWrapper(props: DataGridProps) {
+  const {
+    label,
+    labelTooltip,
+    downloadFileName,
+    toolbarSlot,
+    toolbarStyle,
+    toolbarIconColor,
+    sortedAssay,
+    handleSelection,
+    rows,
+    selectedIds
+  } = props;
+
+  const CustomToolbarWrapper = useMemo(() => {
+    const customToolbarProps = {
+      label,
+      downloadFileName,
+      labelTooltip,
+      toolbarSlot,
+      toolbarStyle,
+      toolbarIconColor,
+    };
+    return (props: GridToolbarProps & ToolbarPropsOverrides) => <CustomToolbar {...props} {...customToolbarProps} />;
+  }, [label, labelTooltip, toolbarSlot]);
+
+  const apiRef = useGridApiRef();
+  const groupingModel = sortedAssay ? ["assay", "ontology"] : ["ontology", "assay"];
+  const columnModel = sortedAssay ? sortedByAssayColumns : defaultColumns;
+
+  // 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);
+  };
+
+  const handleResizeCols = () => {
+    // need to check .autosizeColumns since the current was being set with an empty object
+    if (!apiRef.current?.autosizeColumns) return;
+    apiRef.current.autosizeColumns(autosizeOptions);
+  };
+
+  // trigger resize when rows or columns change so that rows/columns don't need to be memoized outisde of this component
+  // otherwise sometimes would snap back to default widths when rows/columns change
+  useEffect(() => {
+    handleResizeCols();
+  }, [rows, defaultColumns, sortedByAssayColumns, handleResizeCols]);
+
+  return (
+    <Paper sx={{ width: "100%" }}>
+      <Box sx={{
+        height: 500,
+        width: "100%",
+        overflow: "auto",
+      }}>
+        <DataGridPremium
+          apiRef={apiRef}
+          rows={rows}
+          columns={columnModel}
+          getRowId={(row) => row.experimentAccession}
+          autosizeOptions={autosizeOptions}
+          rowGroupingModel={groupingModel}
+          groupingColDef={{ leafField: "displayname", display: "flex" }}
+          columnVisibilityModel={{ displayname: false }} // so you don't see a second name column
+          onRowSelectionModelChange={handleSelection}
+          rowSelectionPropagation={{ descendants: true }}
+          rowSelectionModel={{ type: "include", ids: new Set(selectedIds) }}
+          slots={{
+            toolbar: CustomToolbarWrapper,
+          }}
+          slotProps={{
+            filterPanel: {
+              filterFormProps: {
+                filterColumns,
+              },
+            },
+            columnsManagement: {
+              getTogglableColumns,
+            },
+          }}
+          keepNonExistentRowsSelected
+          showToolbar
+          disableAggregation
+          disableRowSelectionExcludeModel
+          disablePivoting
+          checkboxSelection
+          autosizeOnMount
+          pagination
+          hideFooterSelectedRowCount
+        />
+      </Box>
+    </Paper>
+  );
+}

package/src/TrackSelect/DataGrid/columns.tsx

@@ -0,0 +1,134 @@
+import { GridColDef } from "@mui/x-data-grid-premium";
+import { RowInfo } from "../types";
+import { Stack, capitalize } from "@mui/material";
+import { AssayIcon } from "../TreeView/treeViewHelpers";
+import { ontologyTypes, assayTypes } from "../consts";
+
+const displayNameCol: GridColDef<RowInfo> = {
+  field: "displayname",
+  headerName: "Name",
+  valueFormatter: (value) => value && capitalize(value),
+  maxWidth: 300,
+};
+
+const sortedByAssayOntologyCol: GridColDef<RowInfo> = {
+    field: "ontology",
+    headerName: "Ontology",
+    type: "singleSelect",
+    valueOptions: ontologyTypes,
+    renderCell: (params) => {
+      if (params.rowNode.type === "group") {
+        if (params.value === undefined) {
+          return null;
+        }
+        const val = params.value;
+        return (
+          <div><b>{val}</b></div>
+        )
+      }
+    },
+};
+
+const sortedByAssayAssayCol : GridColDef<RowInfo> = { 
+    field: "assay", 
+    headerName: "Assay",
+    valueOptions: assayTypes, 
+    renderCell: (params) => {
+        if (params.rowNode.type === "group") {
+            if (params.value === undefined) {
+                return null;
+            }
+            const val = params.value;
+            return (
+            <Stack direction="row" spacing={2} alignItems="center">
+                {AssayIcon(val)}
+                <div><b>{val}</b></div>
+            </Stack>
+            )
+        }
+    }
+}
+
+const defaultOntologyCol: GridColDef<RowInfo> = {
+    field: "ontology",
+    headerName: "Ontology",
+    type: "singleSelect",
+    valueOptions: ontologyTypes,
+    renderCell: (params) => {
+        if (params.rowNode.type === "group") {
+            if (params.value === undefined) {
+            return null;
+            }
+            const val = params.value;
+            return (
+            <div><b>{val}</b></div>
+            )
+        }
+    }
+};
+
+const defaultAssayCol: GridColDef<RowInfo> = { 
+    field: "assay", 
+    headerName: "Assay",
+    valueOptions: assayTypes,
+    renderCell: (params) => {
+        if (params.rowNode.type === "group") {
+            if (params.value === undefined) {
+                return null;
+            }
+            const val = params.value;
+            return (
+            <Stack direction="row" spacing={2} alignItems="center">
+                {AssayIcon(val)}
+                <div>{val}</div>
+            </Stack>
+            )
+        }
+    }
+}
+
+const sampleTypeCol: GridColDef<RowInfo> = {
+    field: "sampleType",
+    headerName: "Sample Type",
+    type: "singleSelect",
+    valueOptions: ["tissue", "primary cell", "cell line", "in vitro differentiated cells", "organoid"],
+    valueFormatter: (value) => value && capitalize(value),
+};
+
+const lifeStageCol: GridColDef<RowInfo> = {
+    field: "lifeStage",
+    headerName: "Life Stage",
+    type: "singleSelect",
+    valueOptions: ["adult", "embryonic"],
+    valueFormatter: (value) => value && capitalize(value),
+};
+
+const experimentCol: GridColDef<RowInfo> = { 
+    field: "experimentAccession", 
+    headerName: "Experiment Accession" 
+}
+
+const fileCol: GridColDef<RowInfo> = {
+    field: "fileAccession", 
+    headerName: "File Accession"
+}
+
+export const sortedByAssayColumns: GridColDef<RowInfo>[] = [
+    displayNameCol,
+    sortedByAssayOntologyCol,
+    sampleTypeCol,
+    lifeStageCol,
+    sortedByAssayAssayCol,
+    experimentCol,
+    fileCol
+]
+
+export const defaultColumns: GridColDef<RowInfo>[] = [
+    displayNameCol,
+    sampleTypeCol,
+    lifeStageCol,
+    defaultOntologyCol,
+    defaultAssayCol,
+    experimentCol,
+    fileCol
+]

package/src/TrackSelect/DataGrid/dataGridHelpers.tsx

@@ -0,0 +1,114 @@
+import { capitalize } from "@mui/material";
+import Fuse, { FuseResult } from "fuse.js";
+import tracksData from "../Data/modifiedHumanTracks.json";
+import { 
+  AssayInfo, 
+  RowInfo, 
+  SearchTracksProps, 
+  TrackInfo
+} from "../types";
+
+function formatAssayType(assay: string): string {
+  switch (assay) {
+    case "dnase":
+      return "DNase";
+    case "atac":
+      return "ATAC";
+    case "h3k4me3":
+      return "H3K4me3";
+    case "h3k27ac":
+      return "H3K27ac";
+    case "ctcf":
+      return "CTCF";
+    case "chromhmm":
+      return "ChromHMM";
+    default:
+      return assay;
+  }
+}
+
+// use to get nested data in JSON file
+function getNestedValue(obj: any, path: string): any {
+  return path.split(".").reduce((acc, key) => acc && acc[key], obj);
+}
+
+export function getTracksByAssayAndOntology(
+  assay: string,
+  ontology: string,
+): TrackInfo[] {
+  let res: TrackInfo[] = [];
+  const data = getNestedValue(tracksData, "tracks");
+
+  data.forEach((track: TrackInfo) => {
+    const filteredAssays =
+      track.assays?.filter((e: AssayInfo) => e.assay === assay.toLowerCase()) ||
+      [];
+    if (
+      filteredAssays.length > 0 &&
+      track.ontology === ontology.toLowerCase()
+    ) {
+      res.push({
+        ...track,
+        assays: filteredAssays,
+      });
+    }
+  });
+  return res;
+}
+
+/** Flatten TrackInfo or FuseResult into RowInfo for DataGrid display.
+ * @param track TrackInfo object or FuseResult containing information from JSON file
+ * @returns Flattened RowInfo object
+ */
+export function flattenIntoRow(track: TrackInfo): RowInfo {
+  const { ontology, lifeStage, sampleType, displayname } = track;
+  const { assay, experimentAccession, fileAccession } = track.assays[0];
+
+  return {
+    ontology: capitalize(ontology),
+    lifeStage: capitalize(lifeStage),
+    sampleType: capitalize(sampleType),
+    displayname: capitalize(displayname),
+    assay: formatAssayType(assay),
+    experimentAccession,
+    fileAccession,
+  };
+}
+
+/**
+ * Fuzzy search in tracks stored in a JSON file.
+ *
+ * @param jsonStructure - Dot-separated path to the data array in the JSON structure.
+ * @param query - The search query string.
+ * @param keyWeightMap - Array of keys to search within each track object.
+ * Can look like ["name", "author"] or if weighted, [
+    {
+      name: 'title',
+      weight: 0.3
+    },
+    {
+      name: 'author',
+      weight: 0.7
+    }
+  ].
+ * @param threshold - (Optional) Threshold for the fuzzy search (default is 0.5).
+ *                    Smaller = stricter match, larger = fuzzier since 0 is perfect match and 1 is worst match.
+ * @param limit - (Optional) Maximum number of results to return (default is 10).
+ * @returns FuseResult object containing the search results.
+ */
+export function searchTracks({
+  jsonStructure,
+  query,
+  keyWeightMap,
+  threshold = 0.75,
+}: SearchTracksProps): FuseResult<TrackInfo>[] {
+  const data = getNestedValue(tracksData, jsonStructure ?? "");
+
+  const fuse = new Fuse(data, {
+    includeScore: true,
+    shouldSort: true,
+    threshold: threshold,
+    keys: keyWeightMap,
+  });
+  return fuse.search(query);
+}