feat: anvil explorer - add files.data_modality to the facets and tables (#4618)

Author: frano-m

app/apis/azul/anvil-cmg/common/responses.ts

@@ -20,6 +20,16 @@ import {
   LibraryEntityResponse,
 } from "./entities";
 
+/**
+ * Model of response returned from /index/files or /index/samples or index/projects API endpoint.
+ */
+export type EntityResponse =
+  | ActivitiesResponse
+  | BioSamplesResponse
+  | DatasetsResponse
+  | DonorsResponse
+  | FilesResponse;
+
 /**
  * Model of response returned from the /index/activities API endpoint.
  */

app/apis/azul/anvil-cmg/common/transformers.ts

@@ -5,15 +5,13 @@ import {
   KeyValues,
   Value,
 } from "@databiosphere/findable-ui/lib/components/common/KeyValuePairs/keyValuePairs";
-import { MetadataValue } from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell";
 import { humanFileSize } from "../../../../utils/fileSize";
 import {
   processAggregatedOrArrayValue,
   processEntityValue,
   processNumberEntityValue,
 } from "../../common/utils";
 import {
-  AggregatedActivityResponse,
   AggregatedBioSampleResponse,
   AggregatedDatasetResponse,
   AggregatedDiagnosisResponse,
@@ -116,28 +114,6 @@ export function getDatasetDetails(
   return details;
 }
 
-/**
- * Maps data modality from index/activities API response.
- * @param response - Response model return from index/activities API.
- * @returns a list of data modalities.
- */
-export function getActivityDataModalities(
-  response: ActivityEntityResponse
-): MetadataValue[] {
-  return processAggregatedOrArrayValue(response.activities, "data_modality");
-}
-
-/**
- * Maps data modalities from aggregated activities values returned from endpoints other than index/activities.
- * @param response - Response model return from Azul that includes aggregated activities.
- * @returns Data modalities.
- */
-export function getAggregatedActivityDataModalities(
-  response: AggregatedActivityResponse
-): MetadataValue[] {
-  return processAggregatedOrArrayValue(response.activities, "data_modality");
-}
-
 /**
  * Maps dataset id from the core dataset entity returned from the index/datasets endpoint.
  * @param response - Response model return from datasets or dataset API endpoints.

app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.ts

@@ -65,11 +65,11 @@ import {
 } from "../../../../apis/azul/anvil-cmg/common/entities";
 import {
   DatasetsResponse,
+  EntityResponse,
   FilesResponse,
   SummaryResponse,
 } from "../../../../apis/azul/anvil-cmg/common/responses";
 import {
-  getActivityDataModalities,
   getActivityType,
   getAggregatedBioSampleTypes,
   getAggregatedDatasetIds,
@@ -97,6 +97,7 @@ import {
   getReportedEthnicities,
 } from "../../../../apis/azul/anvil-cmg/common/transformers";
 import {
+  processAggregatedOrArrayValue,
   processEntityArrayValue,
   processEntityValue,
 } from "../../../../apis/azul/common/utils";
@@ -124,6 +125,20 @@ export const buildActivityType = (
   };
 };
 
+/**
+ * Build props for aggregated data modality NTagCell component from the given response.
+ * @param response - Response model return from API.
+ * @returns model to be used as props for the NTagCell component.
+ */
+export const buildAggregatedDataModality = (
+  response: Exclude<EntityResponse, FilesResponse>
+): React.ComponentProps<typeof C.NTagCell> => {
+  return {
+    label: getPluralizedMetadataLabel(METADATA_KEY.DATA_MODALITY),
+    values: processAggregatedOrArrayValue(response.files, "data_modality"),
+  };
+};
+
 /**
  * Build props for dataset-related export warning Alert component.
  * @param _ - Unused.
@@ -267,16 +282,16 @@ export const buildConsentGroup = (
 };
 
 /**
- * Build props for data modality NTagCell component from the given activities response.
- * @param response - Response model return from index/activities API.
+ * Build props for data modality NTagCell component from the given response.
+ * @param response - Response model return from API.
  * @returns model to be used as props for the NTagCell component.
  */
 export const buildDataModality = (
-  response: ActivityEntityResponse
+  response: FilesResponse
 ): React.ComponentProps<typeof C.NTagCell> => {
   return {
     label: getPluralizedMetadataLabel(METADATA_KEY.DATA_MODALITY),
-    values: getActivityDataModalities(response),
+    values: processEntityArrayValue(response.files, "data_modality"),
   };
 };
 

site-config/anvil-cmg/category.ts

@@ -20,6 +20,7 @@ export const ANVIL_CMG_CATEGORY_KEY = {
   DONOR_PHENOTYPIC_SEX: "donors.phenotypic_sex",
   DONOR_REPORTED_ETHNICITY: "donors.reported_ethnicity",
   DRS_URI: "files.drs_uri",
+  FILE_DATA_MODALITY: "files.data_modality",
   FILE_FILE_FORMAT: "files.file_format",
   FILE_FILE_NAME: "files.file_name",
   FILE_FILE_SIZE: "files.file_size",
@@ -50,6 +51,7 @@ export const ANVIL_CMG_CATEGORY_LABEL = {
   DONOR_PHENOTYPIC_SEX: "Phenotypic Sex",
   DONOR_REPORTED_ETHNICITY: "Reported Ethnicity",
   DRS_URI: "DRS URI",
+  FILE_DATA_MODALITY: "Data Modality",
   FILE_FILE_FORMAT: "File Format",
   FILE_FILE_NAME: "Name",
   FILE_FILE_SIZE: "Size",

site-config/anvil-cmg/dev/config.ts

@@ -113,6 +113,10 @@ export function makeConfig(
               key: ANVIL_CMG_CATEGORY_KEY.FILE_FILE_FORMAT,
               label: ANVIL_CMG_CATEGORY_LABEL.FILE_FILE_FORMAT,
             },
+            {
+              key: ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY,
+              label: ANVIL_CMG_CATEGORY_LABEL.FILE_DATA_MODALITY,
+            },
           ],
           label: "File",
         },

site-config/anvil-cmg/dev/index/activitiesEntityConfig.ts

@@ -103,13 +103,23 @@ export const activitiesEntityConfig: EntityConfig<ActivitiesResponse> = {
         id: ANVIL_CMG_CATEGORY_KEY.DATASET_TITLE,
         width: { max: "1fr", min: "200px" },
       },
+      {
+        componentConfig: {
+          component: C.NTagCell,
+          viewBuilder: V.buildAggregatedDataModality,
+        } as ComponentConfig<typeof C.NTagCell>,
+        header: ANVIL_CMG_CATEGORY_LABEL.FILE_DATA_MODALITY,
+        id: ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY,
+        width: { max: "1fr", min: "200px" },
+      },
     ],
     tableOptions: {
       initialState: {
         columnVisibility: {
           [ANVIL_CMG_CATEGORY_LABEL.DONOR_PHENOTYPIC_SEX]: false,
           [ANVIL_CMG_CATEGORY_KEY.DONOR_REPORTED_ETHNICITY]: false,
           [ANVIL_CMG_CATEGORY_KEY.DIAGNOSE_DISEASE]: false,
+          [ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY]: false,
         },
         sorting: [
           {

site-config/anvil-cmg/dev/index/biosamplesEntityConfig.ts

@@ -103,12 +103,22 @@ export const biosamplesEntityConfig: EntityConfig<BioSamplesResponse> = {
         id: ANVIL_CMG_CATEGORY_KEY.DATASET_TITLE,
         width: { max: "1fr", min: "200px" },
       },
+      {
+        componentConfig: {
+          component: C.NTagCell,
+          viewBuilder: V.buildAggregatedDataModality,
+        } as ComponentConfig<typeof C.NTagCell>,
+        header: ANVIL_CMG_CATEGORY_LABEL.FILE_DATA_MODALITY,
+        id: ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY,
+        width: { max: "1fr", min: "200px" },
+      },
     ],
     tableOptions: {
       initialState: {
         columnVisibility: {
           [ANVIL_CMG_CATEGORY_KEY.DONOR_PHENOTYPIC_SEX]: false,
           [ANVIL_CMG_CATEGORY_KEY.DONOR_REPORTED_ETHNICITY]: false,
+          [ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY]: false,
         },
         sorting: [
           {

site-config/anvil-cmg/dev/index/datasetsEntityConfig.ts

@@ -121,12 +121,22 @@ export const datasetsEntityConfig: EntityConfig<DatasetsResponse> = {
         id: ANVIL_CMG_CATEGORY_KEY.DIAGNOSE_DISEASE,
         width: { max: "1fr", min: "200px" },
       },
+      {
+        componentConfig: {
+          component: C.NTagCell,
+          viewBuilder: V.buildAggregatedDataModality,
+        } as ComponentConfig<typeof C.NTagCell>,
+        header: ANVIL_CMG_CATEGORY_LABEL.FILE_DATA_MODALITY,
+        id: ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY,
+        width: { max: "1fr", min: "200px" },
+      },
     ],
     tableOptions: {
       initialState: {
         columnVisibility: {
           [ANVIL_CMG_CATEGORY_KEY.DONOR_PHENOTYPIC_SEX]: false,
           [ANVIL_CMG_CATEGORY_KEY.DONOR_REPORTED_ETHNICITY]: false,
+          [ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY]: false,
         },
         sorting: [
           {

site-config/anvil-cmg/dev/index/donorsEntityConfig.ts

@@ -85,6 +85,15 @@ export const donorsEntityConfig: EntityConfig<DonorsResponse> = {
         id: ANVIL_CMG_CATEGORY_KEY.DATASET_TITLE,
         width: { max: "1fr", min: "200px" },
       },
+      {
+        componentConfig: {
+          component: C.NTagCell,
+          viewBuilder: V.buildAggregatedDataModality,
+        } as ComponentConfig<typeof C.NTagCell>,
+        header: ANVIL_CMG_CATEGORY_LABEL.FILE_DATA_MODALITY,
+        id: ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY,
+        width: { max: "1fr", min: "200px" },
+      },
     ],
     tableOptions: {
       initialState: {

site-config/anvil-cmg/dev/index/filesEntityConfig.ts

@@ -128,6 +128,15 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
         id: ANVIL_CMG_CATEGORY_KEY.DATASET_TITLE,
         width: { max: "1fr", min: "240px" },
       },
+      {
+        componentConfig: {
+          component: C.NTagCell,
+          viewBuilder: V.buildDataModality,
+        } as ComponentConfig<typeof C.NTagCell>,
+        header: ANVIL_CMG_CATEGORY_LABEL.FILE_DATA_MODALITY,
+        id: ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY,
+        width: { max: "1fr", min: "200px" },
+      },
     ],
     tableOptions: {
       initialState: {
@@ -136,6 +145,7 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
           [ANVIL_CMG_CATEGORY_KEY.DONOR_PHENOTYPIC_SEX]: false,
           [ANVIL_CMG_CATEGORY_KEY.DONOR_REPORTED_ETHNICITY]: false,
           [ANVIL_CMG_CATEGORY_KEY.DIAGNOSE_DISEASE]: false,
+          [ANVIL_CMG_CATEGORY_KEY.FILE_DATA_MODALITY]: false,
         },
         sorting: [
           {