Skip to content

Commit

Permalink
convert to jsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@rushtong
rushtong committed Dec 13, 2023
1 parent da1f3cf commit ab7628c
Showing 1 changed file with 65 additions and 60 deletions.
125 changes: 65 additions & 60 deletions src/components/modals/DacDatasetsModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import find from 'lodash/find';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import React, {useEffect, useState} from 'react';
import {a, div, span, table, tbody, td, th, thead, tr} from 'react-hyperscript-helpers';
import {BaseModal} from '../BaseModal';
import {DataUseTranslation} from '../../libs/dataUseTranslation';

Expand Down Expand Up @@ -36,21 +35,20 @@ const DacDatasetsModal = (props) => {
const getPropertyValue = (properties, propName, defaultValue) => {
const prop = getProperty(properties, propName);
const val = get(prop, 'propertyValue', '');
return isEmpty(val) ? span({className: 'disabled'}, [defaultValue]) : val;
return isEmpty(val) ? <span className={'disabled'}>{defaultValue}</span> : val;
};

// @ts-ignore
const getDbGapLinkValue = (properties) => {
const href = getPropertyValue(properties, 'dbGAP', '');
return href.length > 0 ?
a({name: 'link_dbGap', href: href, target: '_blank', className: 'enabled'}, ['Link']) :
span({name: 'link_dbGap', className: 'disabled'}, ['---']);
<a href={href} target={'_blank'} className={'enabled'} rel="noreferrer">Link</a> :
<span className={'disabled'}>---</span>;
};

// @ts-ignore
const getStructuredUseRestrictionLink = (index) => {
if (translatedDatasetRestrictions[index]) {
// @ts-ignore
const translatedDataUse = translatedDatasetRestrictions[index]
// @ts-ignore
.map((translations) => translations.description)
Expand All @@ -59,67 +57,74 @@ const DacDatasetsModal = (props) => {
translatedDataUse.slice(0, 75) + '...' :
translatedDataUse.slice(0, 75);
if (isEmpty(translatedDataUse)) {
return span({className: 'disabled'}, ['---']);
return <span className={'disabled'}>---</span>;
}
return <span title={translatedDataUse}>{shortenedDataUse}</span>;
}
};

return (BaseModal({
id: 'dacDatasetsModal',
showModal: showModal,
onRequestClose: onCloseRequest,
color: 'common',
type: 'informative',
iconSize: 'none',
customStyles: {width: '80%'},
title: 'DAC Datasets associated with DAC: ' + dac.name,
action: {label: 'Close', handler: onCloseRequest}
},
[
div({className: 'table-scroll', style: {margin: 0}}, [
table({className: 'table'}, [
thead({}, [
tr({}, [
th({className: 'table-titles dataset-color cell-size'}, ['Dataset Id']),
th({className: 'table-titles dataset-color cell-size'}, ['Dataset Name']),
th({className: 'table-titles dataset-color cell-size'}, ['dbGap']),
th({className: 'table-titles dataset-color cell-size'}, ['Structured Data Use Limitations']),
th({className: 'table-titles dataset-color cell-size'}, ['Data Type']),
th({className: 'table-titles dataset-color cell-size'}, ['Phenotype/Indication']),
th({className: 'table-titles dataset-color cell-size'}, ['Principal Investigator(PI)']),
th({className: 'table-titles dataset-color cell-size'}, ['# of participants']),
th({className: 'table-titles dataset-color cell-size'}, ['Description']),
th({className: 'table-titles dataset-color cell-size'}, ['Species']),
th({className: 'table-titles dataset-color cell-size'}, ['Data Depositor']),
th({className: 'table-titles dataset-color cell-size'}, ['Consent ID']),
th({className: 'table-titles dataset-color cell-size'}, ['SC-ID'])
])
]),
tbody({}, [
// @ts-ignore
return <BaseModal
key={'dac_datasets_modal'}
id={'dacDatasetsModal'}
showModal={showModal}
onRequestClose={onCloseRequest}
color={'common'}
type={'informative'}
iconSize={'none'}
customStyles={{width: '80%'}}
title={'DAC Datasets associated with DAC: ' + dac.name}
action={{label: 'Close', handler: onCloseRequest}}>
<div key={'dac_datasets'} className={'table-scroll'} style={{margin: 0}}>
<table key={'dac_datasets_table'} className={'table'}>
<thead key={'dac_datasets_table_head'}>
<tr key={'dac_datasets_table_head_row'}>
<th key={'1'} className={'table-titles dataset-color cell-size'}>Dataset Id</th>
<th key={'2'} className={'table-titles dataset-color cell-size'}>Dataset Name</th>
<th key={'3'} className={'table-titles dataset-color cell-size'}>dbGap</th>
<th key={'4'} className={'table-titles dataset-color cell-size'}>Structured Data Use Limitations</th>
<th key={'5'} className={'table-titles dataset-color cell-size'}>Data Type</th>
<th key={'6'} className={'table-titles dataset-color cell-size'}>Phenotype/Indication</th>
<th key={'7'} className={'table-titles dataset-color cell-size'}>Principal Investigator(PI)</th>
<th key={'8'} className={'table-titles dataset-color cell-size'}># of participants</th>
<th key={'9'} className={'table-titles dataset-color cell-size'}>Description</th>
<th key={'10'} className={'table-titles dataset-color cell-size'}>Species</th>
<th key={'11'} className={'table-titles dataset-color cell-size'}>Data Depositor</th>
</tr>
</thead>
<tbody key={'dac_datasets_table_body'}>
{
// @ts-ignore
datasets.map((dataset, index) => {
return tr({key: dataset.datasetIdentifier}, [
td({className: 'table-items cell-size', style: {position: 'relative'}}, [dataset.datasetIdentifier]),
td({className: 'table-items cell-size'}, [dataset.name]),
td({className: 'table-items cell-size'}, [getDbGapLinkValue(dataset.properties)]),
td({className: 'table-items cell-size'}, [getStructuredUseRestrictionLink(index)]),
td({className: 'table-items cell-size'}, [getPropertyValue(dataset.properties, 'Data Type', '---')]),
td({className: 'table-items cell-size'}, [getPropertyValue(dataset.properties, 'Phenotype/Indication', '---')]),
td({className: 'table-items cell-size'}, [getPropertyValue(dataset.properties, 'Principal Investigator(PI)', '---')]),
td({className: 'table-items cell-size'}, [getPropertyValue(dataset.properties, '# of participants', '---')]),
td({className: 'table-items cell-size'}, [getPropertyValue(dataset.properties, 'Description', '---')]),
td({className: 'table-items cell-size'}, [getPropertyValue(dataset.properties, 'Species', '---')]),
td({className: 'table-items cell-size'}, [getPropertyValue(dataset.properties, 'Data Depositor', '---')]),
td({className: 'table-items cell-size'}, [dataset.consentId]),
td({className: 'table-items cell-size'}, [getPropertyValue(dataset.properties, 'Sample Collection ID', '---')])
]);
})
])
])
])
]));

datasets.map((dataset, index) => {
return <tr key={'dac_datasets_table_row_' + index + '_' + dataset.datasetIdentifier}>
<td key={'1_' + dataset.datasetIdentifier} className={'table-items cell-size'}
style={{position: 'relative'}}>{dataset.datasetIdentifier}</td>
<td key={'2_' + dataset.datasetIdentifier} className={'table-items cell-size'}>{dataset.name}</td>
<td key={'3_' + dataset.datasetIdentifier}
className={'table-items cell-size'}>{getDbGapLinkValue(dataset.properties)}</td>
<td key={'4_' + dataset.datasetIdentifier}
className={'table-items cell-size'}>{getStructuredUseRestrictionLink(index)}</td>
<td key={'5_' + dataset.datasetIdentifier}
className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Data Type', '---')}</td>
<td key={'6_' + dataset.datasetIdentifier}
className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Phenotype/Indication', '---')}</td>
<td key={'7_' + dataset.datasetIdentifier}
className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Principal Investigator(PI)', '---')}</td>
<td key={'8_' + dataset.datasetIdentifier}
className={'table-items cell-size'}>{getPropertyValue(dataset.properties, '# of participants', '---')}</td>
<td key={'9_' + dataset.datasetIdentifier}
className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Description', '---')}</td>
<td key={'10_' + dataset.datasetIdentifier}
className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Species', '---')}</td>
<td key={'11_' + dataset.datasetIdentifier}
className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Data Depositor', '---')}</td>
</tr>;
})
}
</tbody>
</table>
</div>
</BaseModal>;
};

export default DacDatasetsModal;

0 comments on commit ab7628c

Please sign in to comment.