Skip to content

Commit

Permalink
[DUOS-2845][risk=no] Fix dac datasets modal bug (#2422)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rushtong
rushtong authored Dec 14, 2023
1 parent 7962d92 commit 8a14196
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 97 deletions.
202 changes: 106 additions & 96 deletions src/components/modals/DacDatasetsModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,130 @@
import find from 'lodash/find';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { Component } from 'react';
import { a, div, hh, span, table, tbody, td, th, thead, tr } from 'react-hyperscript-helpers';
import { BaseModal } from '../BaseModal';
import { ReadMore } from '../ReadMore';
import { DataUseTranslation } from '../../libs/dataUseTranslation';
import React, {useEffect, useState} from 'react';
import {BaseModal} from '../BaseModal';
import {DataUseTranslation} from '../../libs/dataUseTranslation';

export const DacDatasetsModal = hh(class DacDatasetsModal extends Component {
// @ts-ignore
const DacDatasetsModal = (props) => {

constructor() {
super();
this.state = {
translatedDataUse: [],
getStructuredUseRestrictionLink: this.getStructuredUseRestrictionLink.bind(this)
const {showModal, onCloseRequest, datasets, dac} = props;
const [translatedDatasetRestrictions, setTranslatedDatasetRestrictions] = useState([]);

useEffect(() => {
const init = async () => {
// @ts-ignore
let translationPromises = datasets.map((dataset) =>
DataUseTranslation.translateDataUseRestrictions(dataset.dataUse));
const datasetTranslations = await Promise.all(translationPromises);
// @ts-ignore
setTranslatedDatasetRestrictions(datasetTranslations);
};
}

async componentDidMount() {
let translationPromises = this.props.datasets.map((dataset) =>
DataUseTranslation.translateDataUseRestrictions(dataset.dataUse));
const datasetTranslations = await Promise.all(translationPromises);
this.setState(prev => {
prev.translatedDatasetRestrictions = datasetTranslations;
return prev;
});
}
init();
}, [datasets]);

getProperty = (properties, propName) => {
return find(properties, p => { return p.propertyName.toLowerCase() === propName.toLowerCase(); });
// @ts-ignore
const getProperty = (properties, propName) => {
return find(properties, p => {
return p.propertyName.toLowerCase() === propName.toLowerCase();
});
};

getPropertyValue = (properties, propName, defaultValue) => {
const prop = this.getProperty(properties, propName);
// @ts-ignore
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;
};

getDbGapLinkValue = (properties) => {
const href = this.getPropertyValue(properties, 'dbGAP', '');
// @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>;
};

getStructuredUseRestrictionLink = (index) => {
if(this.state.translatedDatasetRestrictions && this.state.translatedDatasetRestrictions[index]) {
const translatedDataUse = this.state.translatedDatasetRestrictions[index]
// @ts-ignore
const getStructuredUseRestrictionLink = (index) => {
if (translatedDatasetRestrictions[index]) {
const translatedDataUse = translatedDatasetRestrictions[index]
// @ts-ignore
.map((translations) => translations.description)
.join('\n');
const shortenedDataUse = translatedDataUse.length >= 75 ?
translatedDataUse.slice(0, 75) + '...' :
translatedDataUse;
if (isEmpty(translatedDataUse)) {
return span({ className: 'disabled' }, ['---']);
return <span className={'disabled'}>---</span>;
}
return ReadMore({
content: translatedDataUse,
className: 'row no-margin',
style: { whiteSpace: 'pre-line' },
charLimit: 30,
inline: true
});
return <span title={translatedDataUse}>{shortenedDataUse}</span>;
}
};

render() {
return (BaseModal({
id: 'dacDatasetsModal',
showModal: this.props.showModal,
onRequestClose: this.props.onCloseRequest,
color: 'common',
type: 'informative',
iconSize: 'none',
customStyles: { width: '80%' },
title: 'DAC Datasets associated with DAC: ' + this.props.dac.name,
action: { label: 'Close', handler: this.props.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({}, [
this.props.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' }, [this.getDbGapLinkValue(dataset.properties)]),
td({ className: 'table-items cell-size' }, [this.getStructuredUseRestrictionLink(index)]),
td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Data Type', '---')]),
td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Phenotype/Indication', '---')]),
td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Principal Investigator(PI)', '---')]),
td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, '# of participants', '---')]),
td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Description', '---')]),
td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Species', '---')]),
td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Data Depositor', '---')]),
td({ className: 'table-items cell-size' }, [dataset.consentId]),
td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Sample Collection ID', '---')])
]);
// @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={'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;
2 changes: 1 addition & 1 deletion src/pages/manage_dac/ManageDac.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {contains, filter, map} from 'lodash/fp';
import {Storage} from '../../libs/storage';
import {Notifications} from '../../libs/utils';
import {AddDacModal} from './AddDacModal';
import {DacDatasetsModal} from '../../components/modals/DacDatasetsModal';
import DacDatasetsModal from '../../components/modals/DacDatasetsModal';
import {DacMembersModal} from './DacMembersModal';
import ConfirmationModal from '../../components/modals/ConfirmationModal';

Expand Down

0 comments on commit 8a14196

Please sign in to comment.