Add table icon and move toplevel up (#162)

Signed-off-by: Courtney Gosselin <[email protected]>
CanDIG · Jun 19, 2024 · 9a5fe07 · 9a5fe07
1 parent 18670e0
commit 9a5fe07
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 10 deletions.
diff --git a/src/views/clinicalGenomic/clinicalPatientView.js b/src/views/clinicalGenomic/clinicalPatientView.js
@@ -12,15 +12,14 @@ import Timeline from './widgets/timeline';
 
 const StyledTopLevelBox = styled(Box)(({ theme }) => ({
     border: `1px solid ${theme.palette.primary.main}`,
-    marginTop: '1em',
+    marginBottom: '1em',
     padding: '1em',
-    borderBottomLeftRadius: '10px',
-    borderBottomRightRadius: '10px',
+    borderTopLeftRadius: '10px',
+    borderTopRightRadius: '10px',
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: '1em',
-    boxShadow: '5px 5px 10px rgba(0, 0, 0, 0.2)'
+    gap: '1em'
 }));
 
 const TimelineContainer = styled(Box)(({ theme }) => ({
@@ -74,9 +73,6 @@ function ClinicalPatientView() {
             <Typography pb={1} variant="h6">
                 {patientId}
             </Typography>
-            <div style={{ width: '100%', height: '68vh' }}>
-                <DataGrid rows={rows} columns={columns} pageSize={10} rowsPerPageOptions={[10]} hideFooterSelectedRowCount />
-            </div>
             <StyledTopLevelBox>
                 {Object.entries(topLevel).map(([key, value]) => (
                     <div
@@ -92,6 +88,9 @@ function ClinicalPatientView() {
                     </div>
                 ))}
             </StyledTopLevelBox>
+            <div style={{ width: '100%', height: '68vh' }}>
+                <DataGrid rows={rows} columns={columns} pageSize={10} rowsPerPageOptions={[10]} hideFooterSelectedRowCount />
+            </div>
             {dateOfBirth && (
                 <TimelineContainer>
                     <Timeline data={data} onEventClick={handleEventClick} />

diff --git a/src/views/clinicalGenomic/widgets/clinicalData.js b/src/views/clinicalGenomic/widgets/clinicalData.js
@@ -4,7 +4,8 @@ import * as React from 'react';
 import { useTheme } from '@mui/system';
 import { DataGrid } from '@mui/x-data-grid';
 import { Box, Typography } from '@mui/material';
-
+import Tooltip from '@mui/material/Tooltip';
+import { IconTableShare } from '@tabler/icons-react';
 // REDUX
 
 // project imports
@@ -99,7 +100,37 @@ function ClinicalView() {
 
     // JSON on bottom now const screenWidth = desktopResolution ? '48%' : '100%';
     const columns = [
-        { field: 'submitter_donor_id', headerName: 'Donor ID', minWidth: 220, sortable: false },
+        {
+            field: 'submitter_donor_id',
+            headerName: 'Donor ID',
+            minWidth: 220,
+            sortable: false,
+            renderCell: (params) => (
+                <Tooltip title="Open Patient View" placement="right">
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            '&:hover': {
+                                color: theme.palette.primary.main
+                            }
+                        }}
+                    >
+                        <Box
+                            component="span"
+                            sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginRight: '1em'
+                            }}
+                        >
+                            <IconTableShare stroke={1.5} size="1.3rem" />
+                        </Box>
+                        <Typography>{params.value}</Typography>
+                    </Box>
+                </Tooltip>
+            )
+        },
         { field: 'location', headerName: 'Location', minWidth: 220, sortable: false },
         { field: 'program_id', headerName: 'Program ID', minWidth: 220, sortable: false },
         { field: 'sex_at_birth', headerName: 'Sex At Birth', minWidth: 170, sortable: false },