Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DUOS-2845][risk=no] Fix dac datasets modal bug #2422

Merged
merged 3 commits into from
Dec 14, 2023
Merged

[DUOS-2845][risk=no] Fix dac datasets modal bug #2422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da1f3cf
refactor dac datasets modal
rushtong Dec 13, 2023
ab7628c
convert to jsx
rushtong Dec 13, 2023
6b75968
fix shorten logic
rushtong Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 106 additions & 96 deletions src/components/modals/DacDatasetsModal.js
View file
Open in desktop
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
Open in desktop
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
Loading