feat: use n-tags in project detail page side column (#3759) (#3792)

* feat: use n-tags instead of `stringifyValues` (#3759)

* feat: use `stringifyValues` for paired end on project detail (#3759)

Author: hunterckx

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

@@ -20,13 +20,21 @@ const {
   DIAGNOSIS,
   DISEASE_DONOR,
   DISEASE_INDICATION,
+  DISEASE_STATUS_DONOR,
+  DISEASE_STATUS_SPECIMEN,
+  FILE_FORMAT,
   FOCUS_DISEASE,
   LIBRARY_CONSTRUCTION_APPROACH,
   LIBRARY_PREPARATION,
+  MODEL_ORGAN,
+  NUCLEIC_ACID_SOURCE,
+  ORGAN_PART,
   ORGANISM_TYPE,
   PHENOTYPIC_SEX,
   PLATFORM,
   REPORTED_ETHNICITY,
+  SAMPLE_TYPE,
+  SELECTED_CELL_TYPE,
   STUDY,
   STUDY_DESIGN,
   WORKSPACE_NAME,
@@ -75,13 +83,21 @@ export const PLURALIZED_METADATA_LABEL = {
   [DIAGNOSIS]: "diagnoses",
   [DISEASE_DONOR]: "diseases",
   [DISEASE_INDICATION]: "diseases",
+  [DISEASE_STATUS_DONOR]: "disease statuses",
+  [DISEASE_STATUS_SPECIMEN]: "disease statuses",
+  [FILE_FORMAT]: "file formats",
   [FOCUS_DISEASE]: "focuses / diseases",
   [LIBRARY_CONSTRUCTION_APPROACH]: "library construction methods",
   [LIBRARY_PREPARATION]: "library preparations",
+  [MODEL_ORGAN]: "model organs",
+  [NUCLEIC_ACID_SOURCE]: "nucleic acid sources",
   [ORGANISM_TYPE]: "organism types",
+  [ORGAN_PART]: "organ parts",
   [PHENOTYPIC_SEX]: "phenotypic sexes",
   [PLATFORM]: "platforms",
   [REPORTED_ETHNICITY]: "reported ethnicities",
+  [SAMPLE_TYPE]: "sample types",
+  [SELECTED_CELL_TYPE]: "cell types",
   [STUDY]: "studies",
   [STUDY_DESIGN]: "study designs",
   [METADATA_KEY.SPECIES]: "species",

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

@@ -14,13 +14,21 @@ export enum METADATA_KEY {
   DIAGNOSIS = "DIAGNOSIS",
   DISEASE_DONOR = "DISEASE_DONOR",
   DISEASE_INDICATION = "DISEASE_INDICATION",
+  DISEASE_STATUS_DONOR = "DISEASE_STATUS_DONOR",
+  DISEASE_STATUS_SPECIMEN = "DISEASE_STATUS_SPECIMEN",
+  FILE_FORMAT = "FILE_FORMAT",
   FOCUS_DISEASE = "FOCUS_DISEASE",
   LIBRARY_CONSTRUCTION_APPROACH = "LIBRARY_CONSTRUCTION_APPROACH",
   LIBRARY_PREPARATION = "LIBRARY_PREPARATION",
+  MODEL_ORGAN = "MODEL_ORGAN",
+  NUCLEIC_ACID_SOURCE = "NUCLEIC_ACID_SOURCE",
+  ORGAN_PART = "ORGAN_PART",
   ORGANISM_TYPE = "ORGANISM_TYPE",
   PHENOTYPIC_SEX = "PHENOTYPIC_SEX",
   PLATFORM = "PLATFORM",
   REPORTED_ETHNICITY = "REPORTED_ETHNICITY",
+  SAMPLE_TYPE = "SAMPLE_TYPE",
+  SELECTED_CELL_TYPE = "SELECTED_CELL_TYPE",
   SPECIES = "SPECIES",
   STUDY = "STUDY",
   STUDY_DESIGN = "STUDY_DESIGN",

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

@@ -1,9 +1,12 @@
 import { LABEL } from "@clevercanary/data-explorer-ui/lib/apis/azul/common/entities";
 import { stringifyValues } from "@clevercanary/data-explorer-ui/lib/common/utils";
 import { Value } from "@clevercanary/data-explorer-ui/lib/components/common/KeyValuePairs/keyValuePairs";
+import { NTagCell } from "@clevercanary/data-explorer-ui/lib/components/Index/components/NTagCell/nTagCell";
 import { ANCHOR_TARGET } from "@clevercanary/data-explorer-ui/lib/components/Links/common/entities";
 import { Links } from "@clevercanary/data-explorer-ui/lib/components/Links/links";
 import { formatCountSize } from "@clevercanary/data-explorer-ui/lib/utils/formatCountSize";
+import { METADATA_KEY } from "app/components/Index/common/entities";
+import { getPluralizedMetadataLabel } from "app/components/Index/common/indexTransformer";
 import { HCA_DCP_CATEGORY_KEY } from "../../../../../../site-config/hca-dcp/category";
 import {
   processAggregatedBooleanOrArrayValue,
@@ -149,42 +152,101 @@ export function mapProjectDataSummary(
     HCA_DCP_CATEGORY_KEY.WORKFLOW
   );
   details.set(DATA_SUMMARY.PROJECT_SHORTNAME, projectShortname);
-  details.set(DATA_SUMMARY.GENUS_SPECIES, stringifyValues(genusSpecies));
+  details.set(
+    DATA_SUMMARY.GENUS_SPECIES,
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.SPECIES),
+      values: genusSpecies,
+    })
+  );
   details.set(
     DATA_SUMMARY.SAMPLE_ENTITY_TYPE,
-    stringifyValues(sampleEntityType)
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.SAMPLE_TYPE),
+      values: sampleEntityType,
+    })
   ); // Sample Type
-  details.set(DATA_SUMMARY.ORGAN, stringifyValues(organ)); // Anatomical Entity
-  details.set(DATA_SUMMARY.ORGAN_PART, stringifyValues(organPart)); // Organ Part
+  details.set(
+    DATA_SUMMARY.ORGAN,
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.ANATOMICAL_ENTITY),
+      values: organ,
+    })
+  ); // Anatomical Entity
+  details.set(
+    DATA_SUMMARY.ORGAN_PART,
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.ORGAN_PART),
+      values: organPart,
+    })
+  ); // Organ Part
   details.set(
     DATA_SUMMARY.SELECTED_CELL_TYPE,
-    stringifyValues(selectedCellType)
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.SELECTED_CELL_TYPE),
+      values: selectedCellType,
+    })
   ); // Selected Cell Types
   // Model organ should only display a value when sampleEntityType is cellLines or organoids i.e. "modelOrgan" will
   // not display if the sampleEntityType is "specimens".
   if (!isSampleEntityTypeSpecimens(sampleEntityType)) {
-    details.set(DATA_SUMMARY.MODEL_ORGAN, stringifyValues(modelOrgan)); // Model Organ
+    details.set(
+      DATA_SUMMARY.MODEL_ORGAN,
+      NTagCell({
+        label: getPluralizedMetadataLabel(METADATA_KEY.MODEL_ORGAN),
+        values: modelOrgan,
+      })
+    ); // Model Organ
   }
-  details.set(DATA_SUMMARY.DISEASE, stringifyValues(disease)); // Disease Status (Specimen)
-  details.set(DATA_SUMMARY.DONOR_DISEASE, stringifyValues(donorDisease)); // Disease Status (Donor)
+  details.set(
+    DATA_SUMMARY.DISEASE,
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.DISEASE_STATUS_SPECIMEN),
+      values: disease,
+    })
+  ); // Disease Status (Specimen)
+  details.set(
+    DATA_SUMMARY.DONOR_DISEASE,
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.DISEASE_STATUS_DONOR),
+      values: donorDisease,
+    })
+  ); // Disease Status (Donor)
   details.set(
     DATA_SUMMARY.DEVELOPMENT_STAGE,
-    stringifyValues(developmentStage)
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.DEVELOPMENT_STAGE),
+      values: developmentStage,
+    })
   ); // Development Stage
   details.set(
     DATA_SUMMARY.LIBRARY_CONSTRUCTION_APPROACH,
-    stringifyValues(libraryConstructionApproach)
+    NTagCell({
+      label: getPluralizedMetadataLabel(
+        METADATA_KEY.LIBRARY_CONSTRUCTION_APPROACH
+      ),
+      values: libraryConstructionApproach,
+    })
   ); // Library Construction Method
   details.set(
     DATA_SUMMARY.NUCLEIC_ACID_SOURCE,
-    stringifyValues(nucleicAcidSource)
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.NUCLEIC_ACID_SOURCE),
+      values: nucleicAcidSource,
+    })
   ); // Nucleic Acid Source
   details.set(DATA_SUMMARY.PAIRED_END, stringifyValues(pairedEnd)); // Paired End
   // Workflow will not display if "Unspecified".
   if (isWorkflowSpecified(workflow)) {
     details.set(DATA_SUMMARY.WORKFLOW, getWorkflowValue(workflow)); // Analysis Protocol
   }
-  details.set(DATA_SUMMARY.FILE_FORMAT, stringifyValues(fileFormat)); // File Format
+  details.set(
+    DATA_SUMMARY.FILE_FORMAT,
+    NTagCell({
+      label: getPluralizedMetadataLabel(METADATA_KEY.FILE_FORMAT),
+      values: fileFormat,
+    })
+  ); // File Format
   details.set(DATA_SUMMARY.TOTAL_CELLS, totalCells); // Cell Count Estimate
   details.set(DATA_SUMMARY.DONOR_COUNT, formatCountSize(donorCount)); // Donor Count
   return details;