-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Ingest menu button * Basic ingest page tab navigation * Update package-lock.json * Ingest page code style fixes * Remove permissions tab * Add navigation button * Basic clinical ingest page skeleton * Basic genomic ingest page skeleton * File upload only accept JSON * Persistent file dialogs * Validate JSON upload * Rework clinical&genomic data to work with the new query microservice * Sidebar merging, table, topLevel * Patient info Htsget call, dyanmic sidebar, dynamic table and parent ID, folders * Fix parent ID addition in the table * Katsu UUID changes, minor styling adjustment * ESlint fixes, pullout functions, PR review changes * Eslint and empty object fix * Fix up the datarow componnent * Quick fix to a warning that's been bugging me for forever * styling and develop fixing * Selection highlight in sidebar * Sidebar height matching * Update package-lock.json * Prettier linter changes * ESlint fixes * Top level json fix * prettier fix --------- Signed-off-by: Courtney Gosselin <[email protected]> Co-authored-by: Justin <[email protected]> Co-authored-by: fnguyen <[email protected]>
- Loading branch information
3 people
authored
Jan 17, 2024
1 parent
0432dfa
commit f701116
Showing
10 changed files
with
468 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { useState, useEffect } from 'react'; | ||
| import { styled } from '@mui/system'; | ||
| import { Box, Typography } from '@mui/material'; | ||
| import { DataGrid } from '@mui/x-data-grid'; | ||
| import { useSelector } from 'react-redux'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| import MainCard from 'ui-component/cards/MainCard'; | ||
| import useClinicalPatientData from './useClinicalPatientData'; | ||
| import { formatKey } from '../../utils/utils'; | ||
|
|
||
| const StyledTopLevelBox = styled(Box)(({ theme }) => ({ | ||
| border: `1px solid ${theme.palette.primary.main}`, | ||
| marginTop: '1em', | ||
| padding: '1em', | ||
| borderBottomLeftRadius: '10px', | ||
| borderBottomRightRadius: '10px', | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| flexWrap: 'wrap', | ||
| gap: '1em', | ||
| boxShadow: '5px 5px 10px rgba(0, 0, 0, 0.2)' | ||
| })); | ||
|
|
||
| function ClinicalPatientView() { | ||
| const { customization } = useSelector((state) => state); | ||
|
|
||
| const [patientId, setPatientId] = useState(''); | ||
| const [programId, setProgramId] = useState(''); | ||
| const { rows, columns, title, topLevel } = useClinicalPatientData(patientId, programId); | ||
|
|
||
| useEffect(() => { | ||
| // Extract patientId from URL parameters | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const initialPatientId = urlParams.get('patientId'); | ||
| const intitalProgramId = urlParams.get('programId'); | ||
|
|
||
| setPatientId(initialPatientId || ''); | ||
| setProgramId(intitalProgramId || ''); | ||
| }, []); | ||
|
|
||
| const additionalClass = 'your-additional-class'; // Replace with your actual class | ||
|
|
||
| return ( | ||
| <MainCard sx={{ borderRadius: customization.borderRadius * 0.25, margin: 0 }}> | ||
| <Typography pb={1} variant="h5" style={{ fontWeight: 'bold' }}> | ||
| {title} | ||
| </Typography> | ||
| <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 className={clsx(additionalClass)}> | ||
| {Object.entries(topLevel).map(([key, value]) => ( | ||
| <div | ||
| key={key} | ||
| style={{ | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| gap: '0.5em' | ||
| }} | ||
| > | ||
| <p style={{ fontWeight: 'bold', margin: 0 }}>{formatKey(key)}:</p> | ||
| <p style={{ margin: 0 }}>{String(value)}</p> | ||
| </div> | ||
| ))} | ||
| </StyledTopLevelBox> | ||
| </MainCard> | ||
| ); | ||
| } | ||
|
|
||
| export default ClinicalPatientView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { useEffect, useState } from 'react'; | ||
| import { useSidebarWriterContext } from '../../layout/MainLayout/Sidebar/SidebarContext'; | ||
| import { fetchFederation } from '../../store/api'; | ||
| import PatientSidebar from './widgets/patientSidebar'; | ||
|
|
||
| /* | ||
| * Custom hook to fetch and manage clinical patient data. | ||
| * @param {string} patientId - The ID of the patient. | ||
| * @param {string} programId - The ID of the program. | ||
| * @returns {Object} - An object containing data, rows, columns, title, and topLevel. | ||
| */ | ||
| function useClinicalPatientData(patientId, programId) { | ||
| // Access the SidebarContext to update the sidebar with patient information | ||
| const sidebarWriter = useSidebarWriterContext(); | ||
|
|
||
| // State variables to store fetched data, table rows, columns, title, and topLevel data | ||
| const [data, setData] = useState({}); | ||
| const [rows, setRows] = useState([]); | ||
| const [columns, setColumns] = useState([]); | ||
| const [title, setTitle] = useState(''); | ||
| const [topLevel, setTopLevel] = useState({}); | ||
|
|
||
| function filterNestedObject(obj) { | ||
| return Object.fromEntries( | ||
| Object.entries(obj).filter( | ||
| ([key, value]) => | ||
| value !== null && | ||
| !( | ||
| (Array.isArray(value) && value.length === 0) || // Exclude empty arrays | ||
| typeof value === 'object' || // Exclude all objects | ||
| value === '' || | ||
| key === '' | ||
| ) | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| // useEffect to fetch data when patientId, programId, or sidebarWriter changes | ||
| useEffect(() => { | ||
| // Asynchronous function to fetch data | ||
| const fetchData = async () => { | ||
| try { | ||
| // Construct the API URL based on the provided parameters | ||
| if (programId && patientId) { | ||
| const url = `v2/authorized/donor_with_clinical_data/program/${programId}/donor/${patientId}`; | ||
|
|
||
| const result = await fetchFederation(url, 'katsu'); | ||
| // Extract patientData from the fetched result or use an empty object | ||
| const patientData = result[0].results || {}; | ||
|
|
||
| // Update the sidebar with patientData using the PatientSidebar component | ||
| sidebarWriter(<PatientSidebar sidebar={patientData} setRows={setRows} setColumns={setColumns} setTitle={setTitle} />); | ||
| // Filter patientData to create topLevel data excluding arrays, objects, and empty values | ||
| const filteredData = filterNestedObject(patientData); | ||
| setTopLevel(filteredData); | ||
| setData(patientData); | ||
| } | ||
| } catch (error) { | ||
| console.error('Error fetching clinical patient data:', error); | ||
| } | ||
| }; | ||
|
|
||
| fetchData(); | ||
| }, [patientId, programId, sidebarWriter]); | ||
|
|
||
| return { data, rows, columns, title, topLevel }; | ||
| } | ||
|
|
||
| export default useClinicalPatientData; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.