Merge pull request #445 from bcgsc/feat/DEVSU-2193-print-report-styling

DEVSU-2193 Print Report Styling

Author: bnguyen-bcgsc

app/components/SummaryPrintTable/index.tsx

@@ -1,6 +1,7 @@
 import {
   Table, TableCell, TableRow, Typography,
 } from '@mui/material';
+import { Dictionary } from 'lodash';
 import React from 'react';
 
 type SummaryPrintTableProps = {
@@ -11,6 +12,15 @@ type SummaryPrintTableProps = {
   renderValue?: (value: any) => unknown;
 };
 
+const variantTypes = ['cnv', 'smallMutation', 'structuralVariant', 'expression'];
+
+const variantToStrings: Dictionary<string> = {
+  cnv: 'CNV',
+  smallMutation: 'Small Mutation',
+  structuralVariant: 'Structural Variant',
+  expression: 'Expression',
+};
+
 const SummaryPrintTable = ({
   data,
   labelKey,
@@ -20,7 +30,9 @@ const SummaryPrintTable = ({
   <Table padding="none" size="small">
     {data.filter((key) => (key.value !== null && key.value !== '')).map(({ [labelKey]: label, [valueKey]: value }) => (
       <TableRow>
-        <TableCell><Typography variant="body2" fontWeight="bold">{label}</Typography></TableCell>
+        <TableCell>
+          <Typography variant="body2" fontWeight="bold">{variantTypes.includes(String(label)) ? variantToStrings[String(label)] : label}</Typography>
+        </TableCell>
         <TableCell sx={{ paddingLeft: 1 }}>
           {renderValue ? renderValue(value) : value}
         </TableCell>

app/components/TumourSummaryEdit/index.tsx

@@ -391,7 +391,7 @@ const TumourSummaryEdit = ({
         return (
           <TextField
             className="tumour-dialog__text-field"
-            label="Captiv 8 Score"
+            label="CAPTIV-8 Score"
             value={newReportData.captiv8Score}
             name="captiv8Score"
             onChange={handleReportChange}

app/components/VariantEditDialog/index.scss

@@ -1,6 +1,6 @@
 .variant-edit-dialog {
-    &__form-control {
-      min-width: 160px;
-      margin: 0 0 16px;
-    }
-  }
+  &__form-control {
+    min-width: 160px;
+    margin: 0 0 16px;
+  }
+}

app/views/PrintView/components/RunningCenter/index.tsx

@@ -11,7 +11,7 @@ const RunningCenter = ({
   className,
 }: RunningCenterProps): JSX.Element => (
   <Typography className={className} variant="caption">
-    BCCA Confidential - For Research Purposes Only
+    BC Cancer Confidential - For Research Purposes Only
   </Typography>
 );
 

app/views/PrintView/index.scss

@@ -46,6 +46,7 @@
   &__header-left {
     display: flex;
     align-items: center;
+    padding-left: 20px;
   }
 
   &__header-right {

app/views/PrintView/index.tsx

@@ -94,7 +94,7 @@ const PrintTitleBar = ({
           )}
         </div>
         <div className="printbeta__header-right">
-          <Typography variant="body2">{`${title ? `${title} Report: ` : ''} ${subtitle}${subtitleSuffix ? ` - ${subtitleSuffix}` : ''}`}</Typography>
+          <Typography variant="h2">{`${title ? `${title} Report: ` : ''} ${subtitle}${subtitleSuffix ? ` - ${subtitleSuffix}` : ''}`}</Typography>
           <Typography variant="body2">{biopsyText}</Typography>
         </div>
       </div>

app/views/ReportView/components/GenomicSummary/components/KeyAlterations/index.tsx

@@ -204,10 +204,13 @@ const KeyAlterations = ({
               data={categorizedDataArray}
               labelKey="key"
               valueKey="value"
-              renderValue={(val) => val.map(({ geneVariant }) => (
-                <Box sx={{ paddingLeft: 0.75, display: 'inline-block' }}>
-                  <Typography variant="caption">{geneVariant}</Typography>
-                </Box>
+              renderValue={(val) => val.map(({ geneVariant }, index, arr) => (
+                <>
+                  <Box sx={{ paddingLeft: 0.75, display: 'inline-block' }}>
+                    <Typography variant="caption">{geneVariant}</Typography>
+                  </Box>
+                  {(index < arr.length - 1 ? ', ' : '')}
+                </>
               ))}
             />
           </div>

app/views/ReportView/components/GenomicSummary/index.tsx

@@ -279,7 +279,7 @@ const GenomicSummary = ({
           value: msiStatus ?? null,
         },
         {
-          term: 'Captiv 8 Score',
+          term: 'CAPTIV-8 Score',
           value: report.captiv8Score !== null
             ? `${report.captiv8Score}`
             : null,