@weng-lab/genomebrowser-ui 0.2.0 → 0.2.2

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

@@ -1,165 +1,165 @@
-import { GridColDef } from "@mui/x-data-grid-premium";
-import { Stack, capitalize } from "@mui/material";
-import { AssayIcon, ontologyTypes, assayTypes } from "./constants";
-import { BiosampleRowInfo } from "./types";
-
-const displayNameCol: GridColDef<BiosampleRowInfo> = {
-  field: "displayName",
-  headerName: "Name",
-  valueFormatter: (value) => value && capitalize(value),
-  maxWidth: 300,
-};
-
-const sortedByAssayOntologyCol: GridColDef<BiosampleRowInfo> = {
-  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<BiosampleRowInfo> = {
-  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<BiosampleRowInfo> = {
-  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<BiosampleRowInfo> = {
-  field: "assay",
-  headerName: "Assay",
-  valueOptions: assayTypes,
-  renderCell: (params) => {
-    if (params.value === undefined) {
-      return null;
-    }
-    const val = params.value;
-    return (
-      <Stack direction="row" spacing={2} alignItems="center" sx={{ ml: 6 }}>
-        {AssayIcon(val)}
-        <div>{val}</div>
-      </Stack>
-    );
-  },
-};
-
-const sampleTypeCol: GridColDef<BiosampleRowInfo> = {
-  field: "sampleType",
-  headerName: "Sample Type",
-  type: "singleSelect",
-  valueOptions: [
-    "aggregate",
-    "tissue",
-    "primary cell",
-    "cell line",
-    "in vitro differentiated cells",
-    "organoid",
-  ],
-  valueFormatter: (value) => value && capitalize(value),
-};
-
-const lifeStageCol: GridColDef<BiosampleRowInfo> = {
-  field: "lifeStage",
-  headerName: "Life Stage",
-  type: "singleSelect",
-  valueOptions: ["adult", "embryonic", "N/A"],
-  valueFormatter: (value) => value && capitalize(value),
-};
-
-const experimentCol: GridColDef<BiosampleRowInfo> = {
-  field: "experimentAccession",
-  headerName: "Experiment Accession",
-};
-
-const fileCol: GridColDef<BiosampleRowInfo> = {
-  field: "fileAccession",
-  headerName: "File Accession",
-};
-
-const idCol: GridColDef<BiosampleRowInfo> = {
-  field: "id",
-  headerName: "ID",
-};
-
-/** Columns for sorted-by-assay view (assay as top-level grouping) */
-export const sortedByAssayColumns: GridColDef<BiosampleRowInfo>[] = [
-  displayNameCol,
-  sortedByAssayOntologyCol,
-  sampleTypeCol,
-  lifeStageCol,
-  sortedByAssayAssayCol,
-  experimentCol,
-  fileCol,
-  idCol,
-];
-
-/** Default columns (ontology as top-level grouping) */
-export const defaultColumns: GridColDef<BiosampleRowInfo>[] = [
-  defaultAssayCol,
-  sampleTypeCol,
-  lifeStageCol,
-  defaultOntologyCol,
-  displayNameCol,
-  experimentCol,
-  fileCol,
-  idCol,
-];
-
-/** Grouping model for sorted-by-assay view */
-export const sortedByAssayGroupingModel = ["assay", "ontology"];
-
-/** Default grouping model (ontology-based) */
-export const defaultGroupingModel = ["ontology", "displayName"];
-
-/** Leaf field for sorted-by-assay view */
-export const sortedByAssayLeafField = "displayName";
-
-/** Default leaf field */
-export const defaultLeafField = "assay";
+import { GridColDef } from "@mui/x-data-grid-premium";
+import { Stack, capitalize } from "@mui/material";
+import { AssayIcon, ontologyTypes, assayTypes } from "./constants";
+import { BiosampleRowInfo } from "./types";
+
+const displayNameCol: GridColDef<BiosampleRowInfo> = {
+  field: "displayName",
+  headerName: "Name",
+  valueFormatter: (value) => value && capitalize(value),
+  maxWidth: 300,
+};
+
+const sortedByAssayOntologyCol: GridColDef<BiosampleRowInfo> = {
+  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<BiosampleRowInfo> = {
+  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<BiosampleRowInfo> = {
+  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<BiosampleRowInfo> = {
+  field: "assay",
+  headerName: "Assay",
+  valueOptions: assayTypes,
+  renderCell: (params) => {
+    if (params.value === undefined) {
+      return null;
+    }
+    const val = params.value;
+    return (
+      <Stack direction="row" spacing={2} alignItems="center" sx={{ ml: 6 }}>
+        {AssayIcon(val)}
+        <div>{val}</div>
+      </Stack>
+    );
+  },
+};
+
+const sampleTypeCol: GridColDef<BiosampleRowInfo> = {
+  field: "sampleType",
+  headerName: "Sample Type",
+  type: "singleSelect",
+  valueOptions: [
+    "Aggregate",
+    "Tissue",
+    "Primary cell",
+    "Cell line",
+    "In vitro differentiated cells",
+    "Organoid",
+  ],
+  valueFormatter: (value) => value && capitalize(value),
+};
+
+const lifeStageCol: GridColDef<BiosampleRowInfo> = {
+  field: "lifeStage",
+  headerName: "Life Stage",
+  type: "singleSelect",
+  valueOptions: ["Adult", "Embryonic", "N/A"],
+  valueFormatter: (value) => value && capitalize(value),
+};
+
+const experimentCol: GridColDef<BiosampleRowInfo> = {
+  field: "experimentAccession",
+  headerName: "Experiment Accession",
+};
+
+const fileCol: GridColDef<BiosampleRowInfo> = {
+  field: "fileAccession",
+  headerName: "File Accession",
+};
+
+const idCol: GridColDef<BiosampleRowInfo> = {
+  field: "id",
+  headerName: "ID",
+};
+
+/** Columns for sorted-by-assay view (assay as top-level grouping) */
+export const sortedByAssayColumns: GridColDef<BiosampleRowInfo>[] = [
+  displayNameCol,
+  sortedByAssayOntologyCol,
+  sampleTypeCol,
+  lifeStageCol,
+  sortedByAssayAssayCol,
+  experimentCol,
+  fileCol,
+  idCol,
+];
+
+/** Default columns (ontology as top-level grouping) */
+export const defaultColumns: GridColDef<BiosampleRowInfo>[] = [
+  defaultAssayCol,
+  sampleTypeCol,
+  lifeStageCol,
+  defaultOntologyCol,
+  displayNameCol,
+  experimentCol,
+  fileCol,
+  idCol,
+];
+
+/** Grouping model for sorted-by-assay view */
+export const sortedByAssayGroupingModel = ["assay", "ontology"];
+
+/** Default grouping model (ontology-based) */
+export const defaultGroupingModel = ["ontology", "displayName"];
+
+/** Leaf field for sorted-by-assay view */
+export const sortedByAssayLeafField = "displayName";
+
+/** Default leaf field */
+export const defaultLeafField = "assay";

package/src/TrackSelect/Folders/biosamples/shared/constants.tsx

@@ -1,116 +1,116 @@
-import { Box } from "@mui/material";
-import type { Assembly } from "../../types";
-
-export type { Assembly };
-
-export const assayTypes = [
-  "cCRE",
-  "DNase",
-  "H3K4me3",
-  "H3K27ac",
-  "ATAC",
-  "CTCF",
-  "RNA-seq",
-  "ChromHMM",
-];
-
-export const ontologyTypes = [
-  "Aggregate",
-  "Adipose",
-  "Adrenal gland",
-  "Blood",
-  "Blood vessel",
-  "Bone",
-  "Bone marrow",
-  "Brain",
-  "Breast",
-  "Connective tissue",
-  "Embryo",
-  "Epithelium",
-  "Esophagus",
-  "Eye",
-  "Fallopian Tube",
-  "Gallbladder",
-  "Heart",
-  "Kidney",
-  "Large Intestine",
-  "Limb",
-  "Liver",
-  "Lung",
-  "Lymphoid Tissue",
-  "Muscle",
-  "Mouth",
-  "Nerve",
-  "Nose",
-  "Pancreas",
-  "Parathyroid Gland",
-  "Ovary",
-  "Penis",
-  "Placenta",
-  "Prostate",
-  "Skin",
-  "Small Intestine",
-  "Spinal Cord",
-  "Spleen",
-  "Stomach",
-  "Testis",
-  "Thymus",
-  "Thyroid",
-  "Urinary Bladder",
-  "Uterus",
-  "Vagina",
-];
-
-/** Color mapping for assay types */
-export const assayColorMap: { [key: string]: string } = {
-  DNase: "#06da93",
-  ATAC: "#02c7b9",
-  H3K4me3: "#ff2020",
-  ChromHMM: "#0097a7",
-  H3K27ac: "#fdc401",
-  CTCF: "#01a6f1",
-  cCRE: "#000000",
-  "RNA-seq": "#00aa00",
-};
-
-/**
- * Creates the assay icon for DataGrid and RichTreeView
- * @param type - assay type
- * @returns an icon of the assay's respective color
- */
-export function AssayIcon(type: string) {
-  const color = assayColorMap[type];
-  return (
-    <Box
-      sx={{
-        width: 12,
-        height: 12,
-        borderRadius: "20%",
-        bgcolor: color,
-      }}
-    />
-  );
-}
-
-/**
- * Mapping from JSON assay keys to display names.
- * This is the single source of truth for assay name formatting.
- */
-const assayJsonToDisplay: Record<string, string> = {
-  dnase: "DNase",
-  atac: "ATAC",
-  h3k4me3: "H3K4me3",
-  h3k27ac: "H3K27ac",
-  ctcf: "CTCF",
-  chromhmm: "ChromHMM",
-  ccre: "cCRE",
-  rnaseq: "RNA-seq",
-};
-
-/**
- * Convert JSON assay key to display name.
- * Used only during data loading to normalize assay names.
- */
-export function formatAssayType(jsonKey: string): string {
-  return assayJsonToDisplay[jsonKey.toLowerCase()] ?? jsonKey;
-}
+import { Box } from "@mui/material";
+import type { Assembly } from "../../types";
+
+export type { Assembly };
+
+export const assayTypes = [
+  "cCRE",
+  "DNase",
+  "H3K4me3",
+  "H3K27ac",
+  "ATAC",
+  "CTCF",
+  "RNA-seq",
+  "ChromHMM",
+];
+
+export const ontologyTypes = [
+  "Aggregate",
+  "Adipose",
+  "Adrenal gland",
+  "Blood",
+  "Blood vessel",
+  "Bone",
+  "Bone marrow",
+  "Brain",
+  "Breast",
+  "Connective tissue",
+  "Embryo",
+  "Epithelium",
+  "Esophagus",
+  "Eye",
+  "Fallopian Tube",
+  "Gallbladder",
+  "Heart",
+  "Kidney",
+  "Large Intestine",
+  "Limb",
+  "Liver",
+  "Lung",
+  "Lymphoid Tissue",
+  "Muscle",
+  "Mouth",
+  "Nerve",
+  "Nose",
+  "Pancreas",
+  "Parathyroid Gland",
+  "Ovary",
+  "Penis",
+  "Placenta",
+  "Prostate",
+  "Skin",
+  "Small Intestine",
+  "Spinal Cord",
+  "Spleen",
+  "Stomach",
+  "Testis",
+  "Thymus",
+  "Thyroid",
+  "Urinary Bladder",
+  "Uterus",
+  "Vagina",
+];
+
+/** Color mapping for assay types */
+export const assayColorMap: { [key: string]: string } = {
+  DNase: "#06da93",
+  ATAC: "#02c7b9",
+  H3K4me3: "#ff2020",
+  ChromHMM: "#0097a7",
+  H3K27ac: "#fdc401",
+  CTCF: "#01a6f1",
+  cCRE: "#000000",
+  "RNA-seq": "#00aa00",
+};
+
+/**
+ * Creates the assay icon for DataGrid and RichTreeView
+ * @param type - assay type
+ * @returns an icon of the assay's respective color
+ */
+export function AssayIcon(type: string) {
+  const color = assayColorMap[type];
+  return (
+    <Box
+      sx={{
+        width: 12,
+        height: 12,
+        borderRadius: "20%",
+        bgcolor: color,
+      }}
+    />
+  );
+}
+
+/**
+ * Mapping from JSON assay keys to display names.
+ * This is the single source of truth for assay name formatting.
+ */
+const assayJsonToDisplay: Record<string, string> = {
+  dnase: "DNase",
+  atac: "ATAC",
+  h3k4me3: "H3K4me3",
+  h3k27ac: "H3K27ac",
+  ctcf: "CTCF",
+  chromhmm: "ChromHMM",
+  ccre: "cCRE",
+  rnaseq: "RNA-seq",
+};
+
+/**
+ * Convert JSON assay key to display name.
+ * Used only during data loading to normalize assay names.
+ */
+export function formatAssayType(jsonKey: string): string {
+  return assayJsonToDisplay[jsonKey.toLowerCase()] ?? jsonKey;
+}