💄 Updates to File Entity Page for First Release (#2090)

* Update labels, add new fields, and connect pre-existing fields to new API values
icgc-argo · Dec 14, 2021 · aba7356 · aba7356
1 parent 6a2c790
commit aba7356
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 40 deletions.
diff --git a/components/pages/file-entity/AssociatedDonors/index.tsx b/components/pages/file-entity/AssociatedDonors/index.tsx
@@ -36,11 +36,12 @@ export default ({ donors }: { donors: Array<DonorRecord> }) => {
 
   const formatDonorInfo = (donorInfo: DonorRecord) => {
     return {
-      'Donor ID': <Link href="">{donorInfo.donorId}</Link>,
+      'Donor ID': donorInfo.donorId,
       'Submitter Donor ID': donorInfo.submitterDonorId,
-      'Primary Site': donorInfo.primarySite,
-      'Cancer Type': donorInfo.cancerType,
-      'Age at Diagnosis': donorInfo.ageAtDiagnosis,
+      // Hiding Clinical fields for now as per: https://github.com/icgc-argo/platform-ui/issues/2090
+      // 'Primary Site': donorInfo.primarySite,
+      // 'Cancer Type': donorInfo.cancerType,
+      // 'Age at Diagnosis': donorInfo.ageAtDiagnosis,
     };
   };
 
@@ -62,7 +63,8 @@ export default ({ donors }: { donors: Array<DonorRecord> }) => {
             border: 1px solid ${theme.colors.grey_2};
           `}
         >
-          <div
+          {/* TODO: restore donor tabs once files are associated with multiple donors */}
+          {/* <div
             css={css`
               width: 170px;
               max-width: 170px;
@@ -85,7 +87,7 @@ export default ({ donors }: { donors: Array<DonorRecord> }) => {
                 </VerticalTabs.Item>
               ))}
             </VerticalTabs>
-          </div>
+          </div> */}
           <Col style={{ position: 'relative', overflow: 'hidden' }}>
             <Row
               css={css`
@@ -117,40 +119,38 @@ export default ({ donors }: { donors: Array<DonorRecord> }) => {
                     `}
                   >
                     <div>
-                      Submitter Specimen ID:{' '}
-                      <Link href="" bold>
-                        {selectedDonor.associations.specimenId}
-                      </Link>
+                      Submitter Specimen ID: <b>{selectedDonor.associations.specimenId}</b>
                     </div>
 
                     <div>
                       Tumour Normal Designation:{' '}
                       <b>{selectedDonor.associations.tumourNormalDesignation}</b>
                     </div>
-                  </PaddedDiv>
-                  <PaddedDiv
-                    css={css`
-                      border-bottom: 1px ${theme.colors.grey_2} solid;
-                    `}
-                  >
-                    <div>
-                      Submitter Sample ID:{' '}
-                      <Link href="" bold>
-                        {selectedDonor.associations.sampleId}
-                      </Link>
-                    </div>
+
                     <div>
-                      Sample Type: <b>{selectedDonor.associations.sampleType}</b>
+                      Specimen Type: <b>{selectedDonor.associations.specimenType}</b>
                     </div>
                   </PaddedDiv>
                   <PaddedDiv>
                     <div>
-                      Matched Normal Submitter Sample ID:{' '}
-                      <Link bold href="">
-                        {selectedDonor.associations.matchedNormalSampleId}
-                      </Link>
+                      Submitter Sample ID: <b>{selectedDonor.associations.sampleId}</b>
+                    </div>
+                    <div>
+                      Sample Type: <b>{selectedDonor.associations.sampleType}</b>
                     </div>
                   </PaddedDiv>
+                  {selectedDonor.associations.tumourNormalDesignation !== 'Normal' && (
+                    <PaddedDiv
+                      css={css`
+                        border-top: 1px ${theme.colors.grey_2} solid;
+                      `}
+                    >
+                      <div>
+                        Matched Normal Submitter Sample ID:{' '}
+                        <b>{selectedDonor.associations.matchedNormalSampleId}</b>
+                      </div>
+                    </PaddedDiv>
+                  )}
                 </Typography>
               </PaddedCol>
             </Row>

diff --git a/components/pages/file-entity/DataAndAnalysis/index.tsx b/components/pages/file-entity/DataAndAnalysis/index.tsx
@@ -28,11 +28,13 @@ function getWorkflowTypeDisplay(workflowType: DataAnalysisWorkflowType): string
 export default ({ data }: { data: DataAnalysisInfo }) => {
   const tableData = {
     'Experimental Strategy': data.experimentalStrategy,
+    'Data Category': data.dataCategory,
     'Data Type': data.dataType,
     Platform: data.platform,
     'Genome Build': data.genomeBuild,
-    'Workflow Type': getWorkflowTypeDisplay(data.workflowType),
-    Software: data.software,
+    'Genome Annotation': 'N/A',
+    'Workflow Name': getWorkflowTypeDisplay(data.workflowType),
+    'Analysis Tools': data.software,
   };
 
   return (

diff --git a/components/pages/file-entity/FILE_ENTITY_QUERY.gql b/components/pages/file-entity/FILE_ENTITY_QUERY.gql
@@ -24,10 +24,13 @@ query FILE_ENTITY_QUERY($filters: JSON) {
       edges {
         node {
           object_id
+          file_id
+          data_category
           data_type
           file_type
           file_access
           study_id
+          analysis_tools
 
           file {
             size

diff --git a/components/pages/file-entity/FileSummary/index.tsx b/components/pages/file-entity/FileSummary/index.tsx
@@ -29,9 +29,9 @@ export default ({ data }: { data: FileSummaryInfo }) => {
   const tableData = {
     'File ID': data.fileId,
     'Object ID': data.objectId,
-    'File Format': data.fileFormat,
-    Size: fileSize(data.size),
-    Access: (
+    'File Type': data.fileFormat,
+    'File Size': fileSize(data.size),
+    'File Access': (
       <div
         css={css`
           display: flex;

diff --git a/components/pages/file-entity/FileTitleBar.tsx b/components/pages/file-entity/FileTitleBar.tsx
@@ -60,7 +60,8 @@ export const FileTitleBar: React.ComponentType<{
           flex-direction: row;
         `}
       >
-        <Tooltip
+        {/* TODO: Move download into Legend component once available: https://github.com/icgc-argo/platform-ui/issues/2108 */}
+        {/* <Tooltip
           disabled={isDownloadEnabled}
           unmountHTMLWhenHide
           position="left"
@@ -80,7 +81,7 @@ export const FileTitleBar: React.ComponentType<{
             <DownloadIcon />
             FILE
           </Button>
-        </Tooltip>
+        </Tooltip> */}
 
         <Button
           onClick={() => {

diff --git a/components/pages/file-entity/common.tsx b/components/pages/file-entity/common.tsx
@@ -74,11 +74,28 @@ export const getAccessIcon = (state: string) =>
         fill="primary_2"
         name="lock"
         css={css`
-          margin-right: 5px;
-          margin-top: -5px;
+          margin-right: 2px;
         `}
       />
     ),
+    [FileAccessState.OPEN]: (
+      // TODO: move icon to uikit once it is separated https://github.com/icgc-argo/platform-ui/issues/2136
+      <svg
+        height="16"
+        viewBox="0 0 14 21"
+        width="18"
+        xmlns="http://www.w3.org/2000/svg"
+        css={css`
+          margin-right: 2px;
+        `}
+      >
+        <path
+          d="m3.99032061 8.05561848h7.97709919c.5984733 0 2.0325802.2269104 1.9974555 2.00184182v8.0184177c0 .5009209-.1280108 1.8161584-1.9974555 2.0018417h-9.9694656c-.49872774 0-2.15755636-.5075054-1.99745547-2.0018417v-8.0184177c-.15954967-1.95860758 1.88646804-2.00184182 2.38519577-2.00184182v-2.80515696c-.14495658-2.98592705 1.50388311-4.90902469 4.09826479-5.20957722 2.99236641-.30055253 5.15321911 1.7976801 5.15321911 5.00920886 0 .6011051-.3149567 1.01275684-.8136844 1.01275684-.4987278 0-.8182166-.41321836-.84844056-1.01275684-.14120926-2.80110024-1.50943921-3.55666469-3.38399089-3.43916002-1.49618321.2704839-2.79657937 1.76145475-2.60074194 3.5393442zm3.9309071 8.14145572v-2.2383891c.43098374-.2935282.71429217-.7865292.71429217-1.3454953 0-.8992062-.73267236-1.6289235-1.63520303-1.6289235-.90316446 0-1.63520303.7290861-1.63520303 1.6289235 0 .5592817.28330843 1.0522828.71429218 1.3454953v2.2383891c0 .5062572.41228665.916881.92091085.916881.5089411 0 .92091086-.4106238.92091086-.916881z"
+          fill="#a1a4b1"
+          fill-rule="evenodd"
+        />
+      </svg>
+    ),
   }[state]);
 
 export const DownloadIcon = () => (

diff --git a/components/pages/file-entity/dummyData.tsx b/components/pages/file-entity/dummyData.tsx
@@ -39,6 +39,7 @@ export const dummyFileSummaryInfo: FileSummaryInfo = {
 
 export const dummyDataAnalysisInfo: DataAnalysisInfo = {
   experimentalStrategy: 'WGS',
+  dataCategory: 'Sequencing Reads',
   dataType: 'Aligned Reads',
   platform: 'Illumina',
   genomeBuild: 'GRCh38',
@@ -55,6 +56,7 @@ export const dummyAssociatedDonorsInfo: Array<DonorRecord> = [
     ageAtDiagnosis: '67 years',
     associations: {
       specimenId: 'SP9991',
+      specimenType: 'Primary tumour',
       tumourNormalDesignation: 'Tumour',
       sampleId: 'SA9991',
       sampleType: 'Total DNA',
@@ -69,6 +71,7 @@ export const dummyAssociatedDonorsInfo: Array<DonorRecord> = [
     ageAtDiagnosis: '58 years',
     associations: {
       specimenId: 'SP9996',
+      specimenType: 'Primary tumour',
       tumourNormalDesignation: 'Normal',
       sampleId: 'SA9996',
       sampleType: 'Total DNA',

diff --git a/components/pages/file-entity/index.tsx b/components/pages/file-entity/index.tsx
@@ -68,7 +68,7 @@ const FileEntity = ({ fileId }) => {
               <ContentHeader>
                 <FileTitleBar
                   programShortName={programShortName}
-                  fileId={fileId}
+                  fileId={data.summary.fileId}
                   isDownloadEnabled={isDownloadEnabled}
                 />
               </ContentHeader>

diff --git a/components/pages/file-entity/types.tsx b/components/pages/file-entity/types.tsx
@@ -41,6 +41,7 @@ export type DataAnalysisWorkflowType = {
 
 export type DataAnalysisInfo = {
   experimentalStrategy: string;
+  dataCategory: string;
   dataType: string;
   platform: string;
   genomeBuild: string;
@@ -59,6 +60,7 @@ export type DonorRecord = {
 
 export type Associations = {
   specimenId: string;
+  specimenType: string;
   tumourNormalDesignation: string;
   sampleId: string;
   sampleType: string;

diff --git a/components/pages/file-entity/useEntityData.tsx b/components/pages/file-entity/useEntityData.tsx
@@ -75,10 +75,11 @@ const useEntityData = ({ fileId }: { fileId: string }): EntityData => {
 
     const dataAnalysis: DataAnalysisInfo = {
       experimentalStrategy: get(entity, 'analysis.experiment.experimental_strategy'),
-      dataType: null,
+      dataCategory: entity.data_category,
+      dataType: entity.data_type,
       platform: get(entity, 'analysis.experiment.platform'),
       genomeBuild: null,
-      software: null,
+      software: entity.analysis_tools,
       workflowType: get(entity, 'analysis.workflow'),
     };
 
@@ -90,12 +91,13 @@ const useEntityData = ({ fileId }: { fileId: string }): EntityData => {
 
       return {
         donorId: donor.donor_id,
-        submitterDonorId: donor.submitter_id,
+        submitterDonorId: donor.submitter_donor_id,
         primarySite: null,
         cancerType: null,
         ageAtDiagnosis: null,
         associations: {
           specimenId: specimen.specimen_id,
+          specimenType: specimen.specimen_type,
           tumourNormalDesignation: specimen.tumour_normal_designation,
           sampleId: sample.sample_id,
           sampleType: sample.sample_type,