feat: add biological network to project detail page rhs (#4145)

explorer/app/apis/azul/hca-dcp/common/entities.ts

@@ -96,6 +96,7 @@ export interface ProjectResponse {
   projectTitle: string;
   publications: PublicationResponse[];
   supplementaryLinks: (string | null)[];
+  tissueAtlas: TissueAtlasResponse[];
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO - revisit nested Azul structure.
@@ -153,3 +154,11 @@ export interface SampleResponse {
 export interface SamplesEntityResponse {
   samples: SampleResponse[];
 }
+
+/**
+ * Model of tissueAtlas value in the response from index/projects API endpoint.
+ */
+export interface TissueAtlasResponse {
+  atlas: string | null;
+  version: string;
+}

explorer/app/components/Detail/components/Section/components/AtlasSection/atlasSection.styles.ts

@@ -0,0 +1,9 @@
+import { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
+import styled from "@emotion/styled";
+
+export const StyledSection = styled(GridPaperSection)`
+  img {
+    box-sizing: content-box;
+    padding: 4px;
+  }
+`;

explorer/app/components/Detail/components/Section/components/AtlasSection/atlasSection.tsx

@@ -0,0 +1,33 @@
+import { SectionTitle } from "@databiosphere/findable-ui/lib/components/common/Section/components/SectionTitle/sectionTitle";
+import { TEXT_BODY_400 } from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { Grid2, Typography } from "@mui/material";
+import { NetworkIcon } from "../../../../../common/NetworkIcon/networkIcon";
+import { StyledSection } from "./atlasSection.styles";
+import { GRID_PROPS } from "./constants";
+import { Atlas } from "./types";
+
+interface AtlasProps {
+  atlases: Atlas[];
+}
+
+export const AtlasSection = ({ atlases }: AtlasProps): JSX.Element => {
+  return (
+    <StyledSection>
+      <Grid2 {...GRID_PROPS.COLUMN} spacing={4}>
+        <SectionTitle title="Atlas" />
+        <Grid2 {...GRID_PROPS.COLUMN} spacing={2}>
+          {atlases.length > 0 ? (
+            atlases.map(({ atlasName, networkKey }, i) => (
+              <Grid2 key={i} alignItems="center" container spacing={2}>
+                <NetworkIcon networkKey={networkKey} />
+                <Typography variant={TEXT_BODY_400}>{atlasName}</Typography>
+              </Grid2>
+            ))
+          ) : (
+            <Typography variant={TEXT_BODY_400}>None</Typography>
+          )}
+        </Grid2>
+      </Grid2>
+    </StyledSection>
+  );
+};

explorer/app/components/Detail/components/Section/components/AtlasSection/constants.ts

@@ -0,0 +1,8 @@
+import { Grid2Props } from "@mui/material";
+
+export const GRID_PROPS: Record<
+  string,
+  Partial<Omit<Grid2Props, "component">>
+> = {
+  COLUMN: { container: true, direction: "column" },
+};

explorer/app/components/Detail/components/Section/components/AtlasSection/types.ts

@@ -0,0 +1,6 @@
+import { NetworkKey } from "../../../../../Index/common/entities";
+
+export interface Atlas {
+  atlasName: string;
+  networkKey: NetworkKey;
+}

explorer/app/components/Index/common/utils.ts

@@ -1,6 +1,8 @@
 import { AzulSummaryResponse } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
 import { FileFormat } from "../../../apis/azul/anvil-cmg/common/entities";
 import { ProjectSummary } from "../../../apis/azul/hca-dcp/common/entities";
+import { NETWORK_KEYS } from "./constants";
+import { NetworkKey } from "./entities";
 
 /**
  * Calculates the summary file format count using count values returned for each file format in the summary response.
@@ -59,3 +61,13 @@ export function getSummaryCount(
 ): number {
   return summaryResponse[summaryKey] as number;
 }
+
+/**
+ * Type guard for NetworkKey.
+ * @param value - Value.
+ * @returns true if value is a NetworkKey.
+ */
+export function isNetworkKey(value: unknown): value is NetworkKey {
+  if (typeof value !== "string") return false;
+  return (NETWORK_KEYS as readonly string[]).includes(value);
+}

explorer/app/components/index.tsx

@@ -92,6 +92,7 @@ export { FileLocationCopy } from "./Detail/components/GeneratedMatricesTables/co
 export { FileLocationDownload } from "./Detail/components/GeneratedMatricesTables/components/FileLocationDownload/fileLocationDownload";
 export { FileNameCell } from "./Detail/components/GeneratedMatricesTables/components/FileNameCell/fileNameCell";
 export { GeneratedMatricesTables } from "./Detail/components/GeneratedMatricesTables/generatedMatricesTables";
+export { AtlasSection } from "./Detail/components/Section/components/AtlasSection/atlasSection";
 export { ManifestDownloadEntity as AnVILManifestDownloadEntity } from "./Export/components/AnVILExplorer/components/ManifestDownload/components/ManifestDownloadEntity/manifestDownloadEntity";
 export { BioNetworkCell } from "./Index/components/BioNetworkCell/bioNetworkCell";
 export { ConsentCodesCell } from "./Index/components/ConsentCodesCell/consentCodesCell";

explorer/app/viewModelBuilders/azul/hca-dcp/common/projectMapper/projectMapper.ts

@@ -11,6 +11,8 @@ import {
   ProjectResponse,
   PublicationResponse,
 } from "../../../../../apis/azul/hca-dcp/common/entities";
+import { Atlas } from "../../../../../components/Detail/components/Section/components/AtlasSection/types";
+import { isNetworkKey } from "../../../../../components/Index/common/utils";
 import { CONTRIBUTOR_ROLE } from "./constants";
 import { AnalysisPortal, ProjectEdit } from "./projectEdits/entities";
 import { projectEdits } from "./projectEdits/projectEdits";
@@ -30,6 +32,23 @@ export function mapProjectAnalysisPortals(
   return analysisPortals;
 }
 
+/**
+ * Maps project tissue atlases from the project response to network key and corresponding atlas name.
+ * @param projectResponse - Response model return from project API.
+ * @returns list of atlas with network key and atlas name.
+ */
+export function mapProjectAtlas(projectResponse?: ProjectResponse): Atlas[] {
+  if (!projectResponse) return [];
+  return projectResponse.tissueAtlas.reduce((acc, { atlas, version }, i) => {
+    if (!atlas) return acc;
+    const networkKey = projectResponse.bionetworkName[i];
+    if (isNetworkKey(networkKey)) {
+      acc.push({ atlasName: `${atlas} ${version}`, networkKey });
+    }
+    return acc;
+  }, [] as Atlas[]);
+}
+
 /**
  * Maps project collaborating organizations from the given projects response.
  * @param projectResponse - Response model return from projects API.

explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts

@@ -95,6 +95,7 @@ import { mapProjectDataSummary } from "./dataSummaryMapper/dataSummaryMapper";
 import { AnalysisPortal } from "./projectMapper/projectEdits/entities";
 import {
   mapProjectAnalysisPortals,
+  mapProjectAtlas,
   mapProjectCollaboratingOrganizations,
   mapProjectContacts,
   mapProjectContributors,
@@ -527,6 +528,20 @@ export const buildAnalysisPortals = (
   };
 };
 
+/**
+ * Build props for atlas section from the given projects response.
+ * @param projectsResponse - Response model return from projects API.
+ * @returns model to be used as props for the AtlasSection component.
+ */
+export const buildAtlasSection = (
+  projectsResponse: ProjectsResponse
+): React.ComponentProps<typeof C.AtlasSection> => {
+  const project = getProjectResponse(projectsResponse);
+  return {
+    atlases: mapProjectAtlas(project),
+  };
+};
+
 /**
  * Build props for the data normalization and batch correction FluidAlert component.
  * @returns model to be used as props for the FluidAlert component.

explorer/site-config/hca-dcp/dev/detail/project/overviewSideColumn.ts

@@ -4,6 +4,10 @@ import * as C from "../../../../../app/components";
 import * as V from "../../../../../app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders";
 
 export const sideColumn = [
+  {
+    component: C.AtlasSection,
+    viewBuilder: V.buildAtlasSection,
+  } as ComponentConfig<typeof C.AtlasSection, ProjectsResponse>,
   {
     children: [
       {