feat: added bionetworks column and filter (#3342) (#4141)

* feat: added bionetworks column and filter (#3342)

* feat: made suggested corrections to the bionetworks cell (#3342)

Author: Jonah Paten

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

@@ -1,3 +1,5 @@
+import { NetworkKey } from "app/components/Index/common/entities";
+
 /**
  * Model of accession value in the response from index/projects API endpoints.
  */
@@ -82,6 +84,7 @@ export interface ProjectMatrixFileResponse {
 export interface ProjectResponse {
   accessible: boolean;
   accessions: AccessionResponse[];
+  bionetworkName: (NetworkKey | null)[];
   contributedAnalyses: ProjectResponseContributedAnalyses;
   contributors: ContributorResponse[];
   estimatedCellCount: number | null;

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

@@ -1,5 +1,5 @@
 import { AzulSummaryResponse } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
-import { METADATA_KEY, SUMMARY } from "./entities";
+import { METADATA_KEY, NetworkKey, SUMMARY } from "./entities";
 import {
   calculateSummaryFileFormatsCount,
   calculateSummaryTotalCellCount,
@@ -9,6 +9,7 @@ import {
 // Template constants
 const {
   ANATOMICAL_ENTITY,
+  BIONETWORK_NAME,
   BIOSAMPLE_TYPE,
   CONSENT_CODE,
   CONTENT_DESCRIPTION,
@@ -71,11 +72,54 @@ export const BIND_SUMMARY_RESPONSE = {
     getSummaryCount(r, SUMMARY_KEY.SPECIMENS),
 };
 
+export const NETWORK_KEYS = [
+  "Adipose",
+  "Breast",
+  "Development",
+  "Eye",
+  "Genetic-diversity",
+  "Gut",
+  "Heart",
+  "Immune",
+  "Kidney",
+  "Liver",
+  "Lung",
+  "Musculoskeletal",
+  "Nervous-system",
+  "Oral",
+  "Organoid",
+  "Pancreas",
+  "Reproduction",
+  "Skin",
+] as const;
+
+export const NETWORK_ICONS: { [key in NetworkKey]: string } = {
+  Adipose: "/images/icons/hca-bio-networks/adipose.png",
+  Breast: "/images/icons/hca-bio-networks/breast.png",
+  Development: "/images/icons/hca-bio-networks/development.png",
+  Eye: "/images/icons/hca-bio-networks/eye.png",
+  "Genetic-diversity": "/images/icons/hca-bio-networks/genetic-diversity.png",
+  Gut: "/images/icons/hca-bio-networks/gut.png",
+  Heart: "/images/icons/hca-bio-networks/heart.png",
+  Immune: "/images/icons/hca-bio-networks/immune.png",
+  Kidney: "/images/icons/hca-bio-networks/kidney.png",
+  Liver: "/images/icons/hca-bio-networks/liver.png",
+  Lung: "/images/icons/hca-bio-networks/lung.png",
+  Musculoskeletal: "/images/icons/hca-bio-networks/musculoskeletal.png",
+  "Nervous-system": "/images/icons/hca-bio-networks/nervous-system.png",
+  Oral: "/images/icons/hca-bio-networks/oral-and-craniofacial.png",
+  Organoid: "/images/icons/hca-bio-networks/organoid.png",
+  Pancreas: "/images/icons/hca-bio-networks/pancreas.png",
+  Reproduction: "/images/icons/hca-bio-networks/reproduction.png",
+  Skin: "/images/icons/hca-bio-networks/skin.png",
+};
+
 /**
  * Value for displaying pluralized metadata labels, for example, "tissues" or "diseases".
  */
 export const PLURALIZED_METADATA_LABEL = {
   [ANATOMICAL_ENTITY]: "anatomical entities",
+  [BIONETWORK_NAME]: "networks",
   [BIOSAMPLE_TYPE]: "biosample types",
   [CONSENT_CODE]: "consent codes",
   [CONTENT_DESCRIPTION]: "content descriptions",

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

@@ -1,8 +1,11 @@
+import { NETWORK_KEYS } from "./constants";
+
 /**
  * Set of possible metadata keys.
  */
 export enum METADATA_KEY {
   ANATOMICAL_ENTITY = "ANATOMICAL_ENTITY",
+  BIONETWORK_NAME = "BIONETWORK_NAME",
   BIOSAMPLE_TYPE = "BIOSAMPLE_TYPE",
   CONSENT_CODE = "CONSENT_CODE",
   CONTENT_DESCRIPTION = "CONTENT_DESCRIPTION",
@@ -39,6 +42,8 @@ export enum METADATA_KEY {
   WORKSPACE_NAME = "WORKSPACE_NAME",
 }
 
+export type NetworkKey = (typeof NETWORK_KEYS)[number];
+
 /**
  * Set of possible summary counts and other summary values as part of summary response.
  */

explorer/app/components/Index/components/BioNetworkCell/bioNetworkCell.styles.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+
+export const Cell = styled.div`
+  align-content: center;
+  display: grid;
+  gap: 8px;
+`;
+
+export const Network = styled(Typography)`
+  align-items: center;
+  display: grid;
+  gap: 8px;
+  grid-auto-flow: column;
+  justify-content: flex-start;
+
+  img {
+    margin: 0;
+  }
+` as typeof Typography;

explorer/app/components/Index/components/BioNetworkCell/bioNetworkCell.tsx

@@ -0,0 +1,45 @@
+import { LABEL } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
+import { TypographyProps } from "@databiosphere/findable-ui/lib/components/common/Typography/common/entities";
+import { NTagCell } from "../../../../components/index";
+import { NetworkIcon } from "../../../common/NetworkIcon/networkIcon";
+import { NetworkKey } from "../../common/entities";
+import { Cell, Network } from "./bioNetworkCell.styles";
+
+const MAX_DISPLAYABLE_VALUES = 1;
+
+export interface BioNetworkCellProps {
+  label: string;
+  networkKeys: NetworkKey[];
+  TypographyProps?: TypographyProps;
+}
+
+export const BioNetworkCell = ({
+  label,
+  networkKeys,
+  TypographyProps,
+}: BioNetworkCellProps): JSX.Element => {
+  const showNTag = networkKeys.length > MAX_DISPLAYABLE_VALUES;
+  if (networkKeys.length === 0) {
+    return <span>{LABEL.UNSPECIFIED}</span>;
+  }
+  return (
+    <>
+      {showNTag ? (
+        <NTagCell
+          label={label}
+          TypographyProps={TypographyProps}
+          values={networkKeys}
+        />
+      ) : (
+        <Cell>
+          {networkKeys.map((networkKey) => (
+            <Network component="div" key={networkKey} {...TypographyProps}>
+              <NetworkIcon networkKey={networkKey} />
+              <div>{networkKey}</div>
+            </Network>
+          ))}
+        </Cell>
+      )}
+    </>
+  );
+};

explorer/app/components/common/NetworkIcon/networkIcon.tsx

@@ -0,0 +1,26 @@
+import {
+  StaticImage,
+  StaticImageProps,
+} from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
+import { NETWORK_ICONS } from "../../Index/common/constants";
+import { NetworkKey } from "../../Index/common/entities";
+
+export interface NetworkIconProps
+  extends Pick<StaticImageProps, "height" | "width"> {
+  networkKey: NetworkKey;
+}
+
+export const NetworkIcon = ({
+  height = 24,
+  networkKey,
+  ...props
+}: NetworkIconProps): JSX.Element => {
+  return (
+    <StaticImage
+      alt={networkKey}
+      height={height}
+      src={NETWORK_ICONS[networkKey]}
+      {...props}
+    />
+  );
+};

explorer/app/components/index.tsx

@@ -92,6 +92,7 @@ export { FileLocationDownload } from "./Detail/components/GeneratedMatricesTable
 export { FileNameCell } from "./Detail/components/GeneratedMatricesTables/components/FileNameCell/fileNameCell";
 export { GeneratedMatricesTables } from "./Detail/components/GeneratedMatricesTables/generatedMatricesTables";
 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";
 export { CopyCell } from "./Index/components/CopyCell/copyCell";
 export { ANVILBranding } from "./Layout/components/Footer/components/Branding/components/ANVILBranding/anvilBranding";

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

@@ -50,6 +50,7 @@ import {
   FadeProps as MFadeProps,
 } from "@mui/material";
 import { ColumnDef } from "@tanstack/react-table";
+import { NETWORK_KEYS } from "app/components/Index/common/constants";
 import React, { ElementType, Fragment, ReactElement } from "react";
 import {
   HCA_DCP_CATEGORY_KEY,
@@ -79,7 +80,10 @@ import {
 } from "../../../../apis/azul/hca-dcp/common/responses";
 import * as C from "../../../../components";
 import * as MDX from "../../../../components/common/MDXContent/hca-dcp";
-import { METADATA_KEY } from "../../../../components/Index/common/entities";
+import {
+  METADATA_KEY,
+  NetworkKey,
+} from "../../../../components/Index/common/entities";
 import { getPluralizedMetadataLabel } from "../../../../components/Index/common/indexTransformer";
 import { humanFileSize } from "../../../../utils/fileSize";
 import { DATE_TIME_FORMAT_OPTIONS } from "../../../common/contants";
@@ -537,6 +541,22 @@ export const buildBatchCorrectionWarning = (): React.ComponentProps<
   };
 };
 
+/**
+ * Build props for the bio network cell component.
+ * @param projectsResponse - Response model return from projects API.
+ * @returns model to be used as props to be used for the BionetworkCell component.
+ */
+export const buildBioNetwork = (
+  projectsResponse: ProjectsResponse
+): React.ComponentProps<typeof C.BioNetworkCell> => {
+  const project = getProjectResponse(projectsResponse);
+  const networkKeys = filterBioNetworks(project.bionetworkName ?? []);
+  return {
+    label: getPluralizedMetadataLabel(METADATA_KEY.BIONETWORK_NAME),
+    networkKeys: networkKeys,
+  };
+};
+
 /**
  * Build props for project Citation component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
@@ -1453,6 +1473,17 @@ function calculateEstimatedCellCount(
   return rollUpTotalCells(projectsResponse);
 }
 
+/**
+ * Returns an array of bionetworks with null values and non-bionetworks filtered out.
+ * @param responseValues - an array containing bionetworks and null values
+ * @returns a filtered array containing only bionetworks
+ */
+export function filterBioNetworks(
+  responseValues: (NetworkKey | null)[]
+): NetworkKey[] {
+  return responseValues.filter(isBioNetwork);
+}
+
 /**
  * Returns age and age unit object values.
  * @param donorOrganisms - Donor organisms.
@@ -2183,6 +2214,15 @@ function isAccessibleTransitionIn(projectsResponse: ProjectsResponse): boolean {
   return isAccessible || isReady;
 }
 
+/**
+ * Returns true if the given value is a bionetwork, otherwise returns false.
+ * @param value - a value that may or may not be a bionetwork
+ * @returns a boolean indicating whether the value is a bionetwork
+ */
+export function isBioNetwork(value: unknown): value is NetworkKey {
+  return NETWORK_KEYS.includes(value as NetworkKey);
+}
+
 /**
  * Returns true if the "accessible" file facet has a term value of "true".
  * @param fileManifestState - File manifest state.

explorer/public/images/icons/hca-bio-networks/adipose.png

@@ -6,6 +6,7 @@ export const HCA_DCP_CATEGORY_KEY = {
   ANATOMICAL_ENTITY: "specimenOrgan",
   AZUL_FILE_DOWNLOAD: "azulFileDownload",
   BIOLOGICAL_SEX: "biologicalSex",
+  BIONETWORK_NAME: "bionetworkName",
   CELL_COUNT: "cellCount",
   CONTACT_NAME: "contactName",
   CONTENT_DESCRIPTION: "contentDescription",
@@ -52,6 +53,7 @@ export const HCA_DCP_CATEGORY_LABEL = {
   ANATOMICAL_ENTITY: "Anatomical Entity",
   AZUL_FILE_DOWNLOAD: " ",
   BIOLOGICAL_SEX: "Biological Sex",
+  BIONETWORK_NAME: "Biological Network",
   CELL_COUNT: "Cell Count Estimate",
   CONTACT_NAME: "Contributor Name",
   CONTENT_DESCRIPTION: "Content Description",

explorer/public/images/icons/hca-bio-networks/breast.png

@@ -65,6 +65,10 @@ export function makeConfig(
               key: HCA_DCP_CATEGORY_KEY.INSTITUTION,
               label: HCA_DCP_CATEGORY_LABEL.INSTITUTION,
             },
+            {
+              key: HCA_DCP_CATEGORY_KEY.BIONETWORK_NAME,
+              label: HCA_DCP_CATEGORY_LABEL.BIONETWORK_NAME,
+            },
           ],
           label: "Project",
         },

explorer/public/images/icons/hca-bio-networks/development.png

@@ -90,6 +90,15 @@ export const projectsEntityConfig: EntityConfig = {
         id: HCA_DCP_CATEGORY_KEY.PROJECT_TITLE,
         width: { max: "2fr", min: "374px" },
       },
+      {
+        componentConfig: {
+          component: C.BioNetworkCell,
+          viewBuilder: V.buildBioNetwork,
+        } as ComponentConfig<typeof C.BioNetworkCell, ProjectsResponse>,
+        header: HCA_DCP_CATEGORY_LABEL.BIONETWORK_NAME,
+        id: HCA_DCP_CATEGORY_KEY.BIONETWORK_NAME,
+        width: { max: "1fr", min: "126px" },
+      },
       {
         componentConfig: {
           component: C.NTagCell,