-
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.
Merge pull request #68 from bhklab/mb-development
Added radiomics dataset tab and search functionality, adjusted footer
- Loading branch information
Showing
15 changed files
with
407 additions
and
4 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
.png){kind=link}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
55 changes: 55 additions & 0 deletions
55
client/src/components/SearchRequest/RadiomicSet/RadiomicSetFilter.js
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,55 @@ | ||
| import React, {useState, useEffect, useContext} from 'react'; | ||
| import SearchReqContext from '../SearchReqContext'; | ||
| import axios from 'axios'; | ||
| import {Filter} from '../SearchReqStyle'; | ||
| import FilterInputSwitch from '../../Shared/FilterInputSwitch'; | ||
| import CustomSelect from '../../Shared/CustomSelect'; | ||
| import {dataTypes} from '../../Shared/Enums'; | ||
|
|
||
| const RadiomicSetFilter = () => { | ||
| const context = useContext(SearchReqContext); | ||
|
|
||
| const [datasetSelect, setDatasetSelect] = useState({selected: [], options: [], hidden: false}); | ||
| const [ready, setReady] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const initialize = async () => { | ||
| const res = await axios.get('/api/view/data-object-filter', {params: {datasetType: dataTypes.radiomics}}); | ||
| setDatasetSelect({...datasetSelect, options: res.data.dataset}); | ||
| setReady(true); | ||
| } | ||
| initialize(); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| return( | ||
| <React.Fragment> | ||
| { | ||
| ready&& | ||
| <Filter> | ||
| <h2>Radiomic Set Parameters</h2> | ||
| <FilterInputSwitch | ||
| label='Request Radiomic Set:' | ||
| checked={context.isRequest} | ||
| tooltip='Currently unavailable' | ||
| disabled={true} | ||
| /> | ||
| <CustomSelect | ||
| id='dataset' | ||
| hidden={false} | ||
| label='Dataset:' | ||
| selectOne={context.isRequest} | ||
| options={datasetSelect.options} | ||
| selected={datasetSelect.selected} | ||
| onChange={(e) => { | ||
| setDatasetSelect({...datasetSelect, selected: e.value}); | ||
| context.setParameters(prev => ({...prev, dataset: e.value, search: true})); | ||
| }} | ||
| /> | ||
| </Filter> | ||
| } | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| export default RadiomicSetFilter; |
118 changes: 118 additions & 0 deletions
118
client/src/components/SearchRequest/RadiomicSet/RadiomicSetSearch.js
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,118 @@ | ||
| import React, {useState, useEffect, useContext} from 'react'; | ||
| import {Messages} from 'primereact/messages'; | ||
| import { AuthContext } from '../../../hooks/Context'; | ||
| import useDatasetSearch from '../../../hooks/useDatasetSearch'; | ||
| import SearchReqContext from '../SearchReqContext'; | ||
| import SaveDatasetButton from '../../Shared/Buttons/SaveDatasetButton'; | ||
|
|
||
| import { SearchReqWrapper, MainPanel, SearchReqPanel } from '../SearchReqStyle'; | ||
| import SearchTableLoader from '../SearchTableLoader'; | ||
| import SearchSummary from '../SearchSummary'; | ||
| import RadiomicSetFilter from './RadiomicSetFilter'; | ||
| import RadiomicSetTable from './RadiomicSetTable'; | ||
| import {dataTypes} from '../../Shared/Enums'; | ||
| import StyledPage from '../../../styles/StyledPage'; | ||
|
|
||
| const RadiomicSetSearch = () => { | ||
|
|
||
| const auth = useContext(AuthContext); | ||
| const { searchAll, search } = useDatasetSearch(dataTypes.radiomics); | ||
|
|
||
| const [datasets, setDatasets] = useState([]); | ||
| const [selectedDatasets, setSelectedDatasets] = useState([]); | ||
| const [isRequest, setIsRequest] = useState(false); | ||
|
|
||
| const [parameters, setParameters] = useState({ | ||
| dataset: [], | ||
| search: false | ||
| }); | ||
|
|
||
| const [ready, setReady] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const initializeView = async () => { | ||
| const res = await search({...parameters, status: 'complete', private: false}); | ||
| console.log(res) | ||
| setDatasets(res); | ||
| setReady(true); | ||
| } | ||
| initializeView(); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| async function searchRadiomicSet() { | ||
| console.log(parameters); | ||
| let copy = JSON.parse(JSON.stringify(parameters)); | ||
| copy.dataset = copy.dataset.map(item => item.name); | ||
| const result = await search({...copy, status: 'complete', private: false}); | ||
| setDatasets(result); | ||
| } | ||
|
|
||
| if(parameters.search){ | ||
| searchRadiomicSet(); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [parameters]); | ||
|
|
||
| const showMessage = (status, data) => { | ||
| let severity = status ? 'success' : 'error'; | ||
| RadiomicSetSearch.messages.show({severity: severity, summary: data.summary, detail: data.message, sticky: true}); | ||
| setSelectedDatasets([]); | ||
| } | ||
|
|
||
| return( | ||
| <SearchReqContext.Provider | ||
| value={{ | ||
| parameters: parameters, | ||
| setParameters: setParameters, | ||
| isRequest: isRequest, | ||
| setIsRequest: setIsRequest | ||
| }} | ||
| > | ||
| <StyledPage> | ||
| <div className='page-title'>ORCESTRA for Radiomics</div> | ||
| <SearchReqWrapper> | ||
| <RadiomicSetFilter /> | ||
| <MainPanel> | ||
| <Messages ref={(el) => RadiomicSetSearch.messages = el} /> | ||
| <SearchReqPanel> | ||
| <div> | ||
| <SearchSummary | ||
| title='Explore multimodal Radiomic Datasets (Radiomic Sets)' | ||
| searchAll={searchAll} | ||
| matchNum={datasets.length} | ||
| /> | ||
| { | ||
| auth.user ? | ||
| <SaveDatasetButton | ||
| selectedDatasets={selectedDatasets} | ||
| disabled={selectedDatasets.length > 0 ? false : true} | ||
| onSaveComplete={showMessage} | ||
| /> | ||
| : | ||
| '*Login or register to save existing Radiomic Sets to your profile.' | ||
| } | ||
| </div> | ||
| </SearchReqPanel> | ||
| { | ||
| ready ? | ||
| <RadiomicSetTable | ||
| datasets={datasets} | ||
| selectedDatasets={selectedDatasets} | ||
| updateDatasetSelection={(e) => {setSelectedDatasets(e.value)}} | ||
| scrollHeight='600px' | ||
| authenticated={auth.user ? true : false} | ||
| download={true} | ||
| /> | ||
| : | ||
| <SearchTableLoader /> | ||
| } | ||
| </MainPanel> | ||
| </SearchReqWrapper> | ||
| </StyledPage> | ||
| </SearchReqContext.Provider> | ||
| ); | ||
| } | ||
|
|
||
| export default RadiomicSetSearch; |
51 changes: 51 additions & 0 deletions
51
client/src/components/SearchRequest/RadiomicSet/RadiomicSetTable.js
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,51 @@ | ||
| import React, {useState, useEffect} from 'react'; | ||
| import {DataTable} from 'primereact/datatable'; | ||
| import {Column} from 'primereact/column'; | ||
| import {dataTypes} from '../../Shared/Enums'; | ||
| import useDataTable from '../../../hooks/useDataTable'; | ||
|
|
||
| const RadiomicSetTable = (props) => { | ||
|
|
||
| const [state, setState] = useState({ | ||
| rows: 10, | ||
| first: 0, | ||
| start: 0, | ||
| end: 10, | ||
| totalRecords: 0, | ||
| loading: true | ||
| }); | ||
|
|
||
| const { | ||
| nameColumnTemplate, | ||
| downloadTemplate, | ||
| canonicalTemplate, | ||
| dataTypeTemplate, | ||
| } = useDataTable(dataTypes.radiomics); | ||
|
|
||
| useEffect(()=>{ | ||
| setState({...state, loading: false}); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| return( | ||
| <DataTable | ||
| value={props.datasets} | ||
| selection={props.selectedDatasets} | ||
| onSelectionChange={props.updateDatasetSelection} | ||
| paginator={props.datasets.length > 10} rows={state.rows} | ||
| resizableColumns={true} columnResizeMode="fit" | ||
| scrollable={true} scrollHeight={props.scrollHeight } | ||
| > | ||
| {props.authenticated && <Column selectionMode="multiple" style={{width: '30px', textAlign: 'center'}} />} | ||
| <Column className='textField' field='name' header='Name' style={{width:'150px'}} body={nameColumnTemplate} sortable={true} /> | ||
| <Column className='textField' field='dataset.name' header='Dataset' style={{width:'100px'}} sortable={true} /> | ||
| <Column field='availableDatatypes' body={dataTypeTemplate} style={{width:'100px'}} header='Image Modality' /> | ||
| <Column field='canonical' body={canonicalTemplate} style={{width:'90px', textAlign: 'center'}} header='Canonical' /> | ||
| <Column field='info.numDownload' style={{width:'100px', textAlign: 'center'}} header='Number of Downloads' sortable={true} /> | ||
| {props.download && <Column field='downloadLink' body={downloadTemplate} style={{width:'60px', textAlign: 'center'}} header='Download' /> } | ||
| </DataTable> | ||
| ); | ||
|
|
||
| } | ||
|
|
||
| export default RadiomicSetTable; |
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
31 changes: 31 additions & 0 deletions
31
client/src/components/SingleDataset/RadiomicSet/RadiomicSet.js
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,31 @@ | ||
| import React from 'react'; | ||
| import { TabView,TabPanel } from 'primereact/tabview'; | ||
| import DisclaimerTabContent from '../PSet/TabContents/DisclaimerTabContent'; | ||
| import DatasetTabContent from './TabContents/DatasetTabContent'; | ||
| import SnakemakePipelineTabContent from "../SubComponents/SnakemakePipelineTabContent"; | ||
| import ReleaseNoteTabContent from './TabContents/ReleaseNoteTabContent'; | ||
| import { TabContainer } from '../SingleDatasetStyle'; | ||
|
|
||
| const RadiomicSet = (props) => { | ||
| const { dataset } = props; | ||
| return( | ||
| <React.Fragment> | ||
| <TabContainer> | ||
| <TabView renderActiveOnly={false}> | ||
| { | ||
| dataset.tabData.map(td => ( | ||
| <TabPanel key={Math.random()} header={td.header}> | ||
| {td.header === 'Disclaimer' && <DisclaimerTabContent notes={td.data} />} | ||
| {td.header === 'Dataset' && <DatasetTabContent metadata={td.data} />} | ||
| {td.header === 'Pipeline' && <SnakemakePipelineTabContent data={td.data} />} | ||
| {td.header === 'Release Notes' && <ReleaseNoteTabContent data={td.data} />} | ||
| </TabPanel> | ||
| )) | ||
| } | ||
| </TabView> | ||
| </TabContainer> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| export default RadiomicSet; |
55 changes: 55 additions & 0 deletions
55
client/src/components/SingleDataset/RadiomicSet/TabContents/DatasetTabContent.js
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,55 @@ | ||
| import React from 'react'; | ||
| import { TabHeader, TabContent, TabContentSection} from '../../SingleDatasetStyle'; | ||
|
|
||
| const DatasetTabContent = (props) => { | ||
| const { metadata } = props; | ||
| const publication = ( | ||
| <div> | ||
| {metadata.dataset.publications.length ? | ||
| metadata.dataset.publications.map((item) => | ||
| <li key={item.link} className='pubList'> | ||
| <div className='subContent'>{item.citation}</div> | ||
| <br /> | ||
| <div className='subContent'><a href={item.link}>{item.link}</a></div> | ||
| </li> | ||
| ) | ||
| : | ||
| <div className="subContent"> | ||
| Not available. | ||
| </div> | ||
| } | ||
| </div> | ||
| ); | ||
|
|
||
| return( | ||
| <React.Fragment> | ||
| <TabHeader>Dataset: {metadata.dataset.label}</TabHeader> | ||
| <TabContent> | ||
| <TabContentSection> | ||
| <h3>Imaging Data</h3> | ||
| <h4 className='subContent'>{'Source: '} | ||
| { | ||
| metadata.dataset.sensitivity ? | ||
| <a href={metadata.dataset.sensitivity.source}>{metadata.dataset.sensitivity.source}</a> | ||
| : 'Not available' | ||
| } | ||
| </h4> | ||
| <h4 className='subContent'>Version: {metadata.dataset.sensitivity.version}</h4> | ||
| </TabContentSection> | ||
|
|
||
| <TabContentSection> | ||
| <h3>Publication: </h3> | ||
| <ul> | ||
| {publication} | ||
| </ul> | ||
| </TabContentSection> | ||
|
|
||
| <TabContentSection> | ||
|
|
||
| </TabContentSection> | ||
| </TabContent> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| export default DatasetTabContent; |
Oops, something went wrong.