feat: extract retina atlas changes back into their own pr (#2480) (#2481

) * feat: update network constant (#2480) * feat: add retina (#2480) * feat: updated retina description (#2480) --------- Co-authored-by: Fran McDade <[email protected]>
DataBiosphere · Oct 17, 2024 · 515a0ac · 515a0ac
1 parent 8d93def
commit 515a0ac
Show file tree

Hide file tree

Showing 20 changed files with 350 additions and 55 deletions.
diff --git a/next/@types/network.ts b/next/@types/network.ts
@@ -16,6 +16,7 @@ export interface Contact {
  */
 export enum ANALYSIS_PORTAL {
   CZ_CELLXGENE = "CZ_CELLXGENE",
+  UCSC_CELL_BROWSER = "CELL_BROWSER",
 }
 
 export interface AnalysisPortal {
@@ -34,8 +35,10 @@ export interface Publication {
 
 export interface Atlas {
   code?: Pick<LinkProps, "label" | "url">[];
+  componentAtlases?: IntegratedAtlas[]; // "external" integrated atlases.
   contact: Contact;
   coordinators: Coordinator[];
+  cxgDataPortal?: Pick<LinkProps, "label" | "url">[];
   cxgId: string;
   datasets: Dataset[];
   externalDatasets: ProjectsResponse[];
@@ -56,7 +59,7 @@ export interface AtlasesRow extends AtlasRow {
   summaryCellCount?: number;
 }
 
-export type AtlasRow = Omit<IntegratedAtlas, "cxgId" | "cxgURL" | "name">;
+export type AtlasRow = Omit<IntegratedAtlas, "name">;
 
 export interface CXGAssay {
   label: string;
@@ -99,7 +102,7 @@ export interface CXGTissue {
 }
 
 export type IntegratedAtlasRow = AtlasRow &
-  Pick<IntegratedAtlas, "cxgId" | "cxgURL" | "datasetAssets" | "name">;
+  Pick<IntegratedAtlas, "datasetAssets" | "name">;
 
 export interface DatasetAsset {
   downloadURL: string;
@@ -110,10 +113,9 @@ export interface DatasetAsset {
 export type DatasetQueryOrgan = string;
 
 export interface IntegratedAtlas {
+  analysisPortals: AnalysisPortal[];
   assay: string[];
   cellCount: number;
-  cxgId: string;
-  cxgURL: string;
   datasetAssets: DatasetAsset[];
   disease: string[];
   name: string;
@@ -149,7 +151,7 @@ export interface NetworkContext {
 
 export interface AtlasModule {
   Description: ElementType;
-  Inclusion: ElementType;
+  Inclusion?: ElementType;
 }
 
 export interface NetworkModule {
@@ -177,7 +179,11 @@ export type NetworkKey =
   | "reproduction"
   | "skin";
 
-export type AtlasKey = "brain-v1-0" | "cortex-v1-0" | "lung-v1-0";
+export type AtlasKey =
+  | "brain-v1-0"
+  | "cortex-v1-0"
+  | "lung-v1-0"
+  | "retina-v1-0";
 
 export interface BICCNPublication {
   authors: string[];

diff --git a/...nents/Overview/components/MainColumn/components/AnalysisPortalCell/analysisPortalCell.tsx b/...nents/Overview/components/MainColumn/components/AnalysisPortalCell/analysisPortalCell.tsx
@@ -0,0 +1,19 @@
+import { Fragment } from "react";
+import { AnalysisPortal } from "../../../../../../../../../../@types/network";
+import { IconLink } from "../../../../../../../../../common/IconLink/iconLink";
+
+interface AnalysisPortalCellProps {
+  analysisPortals: AnalysisPortal[];
+}
+
+export const AnalysisPortalCell = ({
+  analysisPortals,
+}: AnalysisPortalCellProps): JSX.Element => {
+  return (
+    <Fragment>
+      {analysisPortals.map((analysisPortal, i) => (
+        <IconLink key={i} height={20} {...analysisPortal} />
+      ))}
+    </Fragment>
+  );
+};
diff --git a/...nts/HCABioNetworks/Network/Atlas/components/Overview/components/MainColumn/mainColumn.tsx b/...nts/HCABioNetworks/Network/Atlas/components/Overview/components/MainColumn/mainColumn.tsx
@@ -20,7 +20,7 @@ import { Table, Toolbar } from "../../../../../../../common/Table/table.styles";
 import { SectionText } from "../../../../../../components/Section/section.styles";
 
 export const MainColumn = (): JSX.Element => {
-  const { Description } = useAtlasContent();
+  const { Description } = useAtlasContent() || {};
   const { atlas } = useAtlas();
   const { integratedAtlases } = atlas;
   return (
@@ -31,7 +31,11 @@ export const MainColumn = (): JSX.Element => {
           <SectionContent>
             <SectionTitle title="Atlas Description" />
             <SectionText>
-              <Description />
+              {Description ? (
+                <Description />
+              ) : (
+                "No atlas description available."
+              )}
             </SectionText>
           </SectionContent>
         </Section>
@@ -47,7 +51,7 @@ export const MainColumn = (): JSX.Element => {
           {integratedAtlases.length > 0 ? (
             <Table
               columns={getIntegratedAtlasesTableColumns()}
-              gridTemplateColumns="minmax(220px, 1fr) minmax(112px, 0.6fr) minmax(120px, 0.6fr) max-content max-content auto"
+              gridTemplateColumns="minmax(208px, 1fr) minmax(112px, 0.6fr) minmax(112px, 0.6fr) max-content max-content auto"
               items={integratedAtlases}
             />
           ) : (

diff --git a/...nts/HCABioNetworks/Network/Atlas/components/Overview/components/SideColumn/sideColumn.tsx b/...nts/HCABioNetworks/Network/Atlas/components/Overview/components/SideColumn/sideColumn.tsx
@@ -13,6 +13,7 @@ export const SideColumn = (): JSX.Element => {
     code,
     contact: atlasContact,
     coordinators: atlasCoordinators,
+    cxgDataPortal,
     publications,
   } = atlas;
   const { contact: networkContact, coordinators: networkCoordinators } =
@@ -26,6 +27,10 @@ export const SideColumn = (): JSX.Element => {
         <Publications publications={publications} />
         {/* Code */}
         {code && <References links={code} title="Code" />}
+        {/* CELLxGENE Collection */}
+        {cxgDataPortal && (
+          <References links={cxgDataPortal} title="CZ CELLxGENE Collection" />
+        )}
         {/* Atlas Coordinators */}
         <Coordinators
           coordinators={atlasCoordinators}

diff --git a/next/components/common/Section/components/References/references.styles.ts b/next/components/common/Section/components/References/references.styles.ts
@@ -0,0 +1,12 @@
+import { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
+import styled from "@emotion/styled";
+
+export const Section = styled(GridPaperSection)`
+  min-width: 0;
+
+  .MuiLink-root {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
diff --git a/next/components/common/Section/components/References/references.tsx b/next/components/common/Section/components/References/references.tsx
@@ -1,11 +1,11 @@
 import { SectionTitle } from "@databiosphere/findable-ui/lib/components/common/Section/components/SectionTitle/sectionTitle";
-import { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
 import {
   Link,
   LinkProps,
 } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 import React from "react";
 import { SectionContent } from "../../section.styles";
+import { Section } from "./references.styles";
 
 export interface ReferencesProps {
   links: Pick<LinkProps, "label" | "url">[];
@@ -14,7 +14,7 @@ export interface ReferencesProps {
 
 export const References = ({ links, title }: ReferencesProps): JSX.Element => {
   return (
-    <GridPaperSection>
+    <Section>
       <SectionContent>
         <SectionTitle title={title} />
         {links.length > 0
@@ -23,6 +23,6 @@ export const References = ({ links, title }: ReferencesProps): JSX.Element => {
             ))
           : "None"}
       </SectionContent>
-    </GridPaperSection>
+    </Section>
   );
 };
diff --git a/next/components/common/Table/components/Cell/components/CXGDownloadCell/cxgDownloadCell.tsx b/next/components/common/Table/components/Cell/components/CXGDownloadCell/cxgDownloadCell.tsx
@@ -16,13 +16,15 @@ export const CXGDownloadCell = ({
   const [open, setOpen] = useState<boolean>(false);
   return (
     <>
-      <IconButton
-        color="primary"
-        disabled={datasetAssets.length === 0}
-        Icon={DownloadIcon}
-        onClick={(): void => setOpen(true)}
-        size="medium"
-      />
+      {datasetAssets.length > 0 && (
+        <IconButton
+          color="primary"
+          disabled={datasetAssets.length === 0}
+          Icon={DownloadIcon}
+          onClick={(): void => setOpen(true)}
+          size="medium"
+        />
+      )}
       <CXGDownloadDialog
         datasetAssets={datasetAssets}
         onClose={(): void => setOpen(false)}

diff --git a/next/components/index.tsx b/next/components/index.tsx
@@ -27,4 +27,5 @@ export { IconLink } from "./common/IconLink/iconLink";
 export { PinnedNTagCell } from "./common/NTagCell/components/PinnedNTagCell/pinnedNTagCell";
 export { BioNetworkCell } from "./common/Table/components/Cell/components/BioNetworkCell/bioNetworkCell";
 export { CXGDownloadCell } from "./common/Table/components/Cell/components/CXGDownloadCell/cxgDownloadCell";
+export { AnalysisPortalCell } from "./HCABioNetworks/Network/Atlas/components/Overview/components/MainColumn/components/AnalysisPortalCell/analysisPortalCell";
 export { Content } from "./Layout/components/Content/content";
diff --git a/next/constants/analysisPortals.ts b/next/constants/analysisPortals.ts
@@ -8,3 +8,12 @@ export const CZ_CELLXGENE: Omit<AnalysisPortal, "url"> = {
   label: "CZ CELLxGENE",
   name: ANALYSIS_PORTAL.CZ_CELLXGENE,
 };
+
+/**
+ * UCSC Cell Browser analysis portal.
+ */
+export const UCSC_CELL_BROWSER: Omit<AnalysisPortal, "url"> = {
+  icon: "/hca-bio-networks/network/atlas/icons/ucsc-cell.svg",
+  label: "UCSC Cell Browser",
+  name: ANALYSIS_PORTAL.UCSC_CELL_BROWSER,
+};
diff --git a/next/constants/componentAtlases.ts b/next/constants/componentAtlases.ts
@@ -0,0 +1,42 @@
+import { IntegratedAtlasRow } from "../@types/network";
+import { buildAtlas } from "../utils/atlases";
+import { UCSC_CELL_BROWSER } from "./analysisPortals";
+
+const NORMAL = "normal";
+const TODO = "TODO";
+
+export const COMPONENT_ATLASES: Record<string, IntegratedAtlasRow[]> = {
+  adipose: [],
+  breast: [],
+  development: [],
+  "eye-retina": [
+    buildAtlas(
+      [
+        {
+          url: "https://cells.ucsc.edu/?ds=retina+hrca+atac",
+          ...UCSC_CELL_BROWSER,
+        },
+      ],
+      ["10x ATAC"],
+      354776,
+      [NORMAL],
+      "snATAC-seq of human retina",
+      [TODO],
+      [TODO]
+    ),
+  ],
+  "genetic-diversity": [],
+  gut: [],
+  heart: [],
+  immune: [],
+  kidney: [],
+  liver: [],
+  lung: [],
+  musculoskeletal: [],
+  "nervous-system": [],
+  oral: [],
+  organoid: [],
+  pancreas: [],
+  reproduction: [],
+  skin: [],
+};
diff --git a/next/constants/datasets.ts b/next/constants/datasets.ts
@@ -1,10 +1,46 @@
 import { buildDataset } from "../utils/datasets";
 
+const NORMAL = "normal";
+const TODO = "--";
+
 export const DATASETS = {
   adipose: [],
   breast: [],
   development: [],
-  eye: [],
+  "eye-retina": [
+    // Chen (2023) Research Square.
+    buildDataset(
+      [TODO],
+      2999939,
+      [TODO],
+      ["10x Genomics Single Cell 3' v3"],
+      [TODO],
+      "Integrated multi-omics single cell atlas of the human retina",
+      {
+        doi: "10.21203/rs.3.rs-3471275/v1",
+        officialHcaPublication: null,
+        publicationTitle:
+          "Integrated multi-omics single cell atlas of the human retina",
+        publicationUrl: "https://www.researchsquare.com/article/rs-3471275/v1",
+      }
+    ),
+    // Hahn (2023) Nature.
+    buildDataset(
+      [TODO],
+      0,
+      [TODO],
+      [TODO],
+      [TODO],
+      "Evolution of neuronal cell classes and types in the vertebrate retina",
+      {
+        doi: "10.1038/s41586-023-06638-9",
+        officialHcaPublication: null,
+        publicationTitle:
+          "Evolution of neuronal cell classes and types in the vertebrate retina",
+        publicationUrl: "https://www.nature.com/articles/s41586-023-06638-9",
+      }
+    ),
+  ],
   "genetic-diversity": [],
   gut: [],
   heart: [],
@@ -14,11 +50,11 @@ export const DATASETS = {
   lung: [
     // Study name: Jain_Misharin_2021.
     buildDataset(
-      ["Normal"],
+      [NORMAL],
       45557,
-      ["TODO"],
+      [TODO],
       ["10X 5' v1", "v2"],
-      ["TODO"],
+      [TODO],
       "Expansion of profibrotic monocyte-derived alveolar macrophages in patients with persistent respiratory symptoms and radiographic abnormalities after COVID-19",
       {
         doi: "10.1101/2023.07.30.551145",
@@ -33,36 +69,36 @@ export const DATASETS = {
     buildDataset(
       ["IPF"],
       100211,
-      ["TODO"],
+      [TODO],
       ["10X 3' v3"],
-      ["TODO"],
+      [TODO],
       "Barbry_unpubl"
     ),
     // Study name:Duong_lungMAP_unpubl.
     buildDataset(
-      ["Normal"],
+      [NORMAL],
       53904,
-      ["TODO"],
+      [TODO],
       ["10X 3' v3"],
-      ["TODO"],
+      [TODO],
       "Duong_lungMAP_unpubl"
     ),
     // Study name: Schiller_2021.
     buildDataset(
       ["Cancer (non-cancerous tissue used for samples)"],
       35984,
-      ["TODO"],
+      [TODO],
       ["10X 3' v3"],
-      ["TODO"],
+      [TODO],
       "Schiller_2021"
     ),
     // Study name: Schultze_unpubl.
     buildDataset(
       ["Cancer (non-cancerous tissue used for samples)"],
       8016,
-      ["TODO"],
+      [TODO],
       ["Seq-Well"],
-      ["TODO"],
+      [TODO],
       "Schultze_unpubl"
     ),
   ],