feat: add drs_uri for to the files tab (#3646) (#3661)

Co-authored-by: Fran McDade <[email protected]>

Author: frano-m

explorer/app/apis/azul/anvil-cmg/common/entities.ts

@@ -90,6 +90,7 @@ export interface FileEntity {
   data_modality: string[];
   date_created: string;
   document_id: string;
+  drs_uri: string;
   file_format: string;
   file_id: string;
   file_name: string;

explorer/app/components/Index/components/CopyCell/copyCell.styles.ts

@@ -0,0 +1,14 @@
+import { CopyToClipboard as DXCopyToClipboard } from "@clevercanary/data-explorer-ui/lib/components/common/CopyToClipboard/copyToClipboard";
+import styled from "@emotion/styled";
+
+export const Cell = styled("span")`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const CopyToClipboard = styled(DXCopyToClipboard)`
+  bottom: 2px;
+  margin-left: 4px;
+  position: relative;
+`;

explorer/app/components/Index/components/CopyCell/copyCell.tsx

@@ -0,0 +1,14 @@
+import { Cell, CopyToClipboard } from "./copyCell.styles";
+
+interface CopyCellProps {
+  value: string;
+}
+
+export const CopyCell = ({ value }: CopyCellProps): JSX.Element => {
+  return (
+    <>
+      <Cell>{value}</Cell>
+      <CopyToClipboard copyStr={value} />
+    </>
+  );
+};

explorer/app/components/index.tsx

@@ -72,3 +72,4 @@ export { FileLocationDownload } from "./Detail/components/GeneratedMatricesTable
 export { FileNameCell } from "./Detail/components/GeneratedMatricesTables/components/FileNameCell/fileNameCell";
 export { GeneratedMatricesTables } from "./Detail/components/GeneratedMatricesTables/generatedMatricesTables";
 export { ConsentCodesCell } from "./Index/components/ConsentCodesCell/consentCodesCell";
+export { CopyCell } from "./Index/components/CopyCell/copyCell";

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

@@ -375,6 +375,19 @@ export const buildDocumentId = (
   };
 };
 
+/**
+ * Build props for DRS URI CopyCell component from the given files response.
+ * @param filesResponse - Response model return from index/files API endpoint.
+ * @returns model to be used as props for the CopyCell component.
+ */
+export const buildDRSURI = (
+  filesResponse: FilesResponse
+): React.ComponentProps<typeof C.CopyCell> => {
+  return {
+    value: processEntityValue(filesResponse.files, "drs_uri"),
+  };
+};
+
 /**
  * Build props for ExportCurrentQuery component.
  * @param _ - Unused.

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

@@ -49,7 +49,7 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
         } as ComponentConfig<typeof C.Cell>,
         header: ANVIL_CMG_CATEGORY_LABEL.FILE_FILE_NAME,
         id: ANVIL_CMG_CATEGORY_KEY.FILE_FILE_NAME,
-        width: { max: "1fr", min: "120px" },
+        width: { max: "1fr", min: "240px" },
       },
       {
         componentConfig: {
@@ -58,7 +58,7 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
         } as ComponentConfig<typeof C.Cell>,
         header: ANVIL_CMG_CATEGORY_LABEL.FILE_FILE_FORMAT, // "Format"
         id: ANVIL_CMG_CATEGORY_KEY.FILE_FILE_FORMAT,
-        width: { max: "1fr", min: "120px" },
+        width: { max: "auto", min: "120px" },
       },
       {
         componentConfig: {
@@ -67,6 +67,16 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
         } as ComponentConfig<typeof C.Cell>,
         header: ANVIL_CMG_CATEGORY_LABEL.FILE_FILE_SIZE,
         id: ANVIL_CMG_CATEGORY_KEY.FILE_FILE_SIZE,
+        width: { max: "auto", min: "120px" },
+      },
+      {
+        componentConfig: {
+          component: C.CopyCell,
+          viewBuilder: V.buildDRSURI,
+        } as ComponentConfig<typeof C.CopyCell>,
+        disableSorting: true,
+        header: "DRS URI",
+        id: "drs_uri",
         width: { max: "1fr", min: "120px" },
       },
       {
@@ -76,7 +86,7 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
         } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.ACTIVITY_DATA_MODALITY,
         id: ANVIL_CMG_CATEGORY_KEY.ACTIVITY_DATA_MODALITY,
-        width: { max: "1fr", min: "240px" },
+        width: { max: "1fr", min: "140px" },
       },
       {
         componentConfig: {
@@ -85,7 +95,7 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
         } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.DONOR_ORGANISM_TYPE,
         id: ANVIL_CMG_CATEGORY_KEY.DONOR_ORGANISM_TYPE,
-        width: { max: "1fr", min: "200px" },
+        width: { max: "1fr", min: "140px" },
       },
       {
         columnVisible: false,
@@ -124,7 +134,7 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
         } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.DATASET_TITLE,
         id: ANVIL_CMG_CATEGORY_KEY.DATASET_TITLE,
-        width: { max: "2fr", min: "240px" },
+        width: { max: "1fr", min: "240px" },
       },
     ],
     defaultSort: {