Skip to content

Commit

Permalink
feat: add conditionals around applying for access.
Browse files Browse the repository at this point in the history
  • Loading branch information
@rushtong
rushtong committed Nov 7, 2024
1 parent 19c11fa commit 7cc675f
Showing 1 changed file with 72 additions and 47 deletions.
119 changes: 72 additions & 47 deletions src/pages/DatasetStatistics.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
import React from 'react';
import { useCallback, useState, useEffect } from 'react';
import { DatasetMetrics } from '../libs/ajax/DatasetMetrics';
import { DataSet } from '../libs/ajax/DataSet';
import { DAR } from '../libs/ajax/DAR';
import { Notifications } from '../libs/utils';
import { Styles, Theme } from '../libs/theme';
import { find } from 'lodash/fp';
import { ReadMore } from '../components/ReadMore';
import { formatDate } from '../libs/utils';
import { Button } from '@mui/material';
import {useCallback, useState, useEffect} from 'react';
import {DatasetMetrics} from '../libs/ajax/DatasetMetrics';
import {DataSet} from '../libs/ajax/DataSet';
import {DAR} from '../libs/ajax/DAR';
import {Notifications} from '../libs/utils';
import {Styles, Theme} from '../libs/theme';
import {find} from 'lodash/fp';
import {ReadMore} from '../components/ReadMore';
import {formatDate} from '../libs/utils';
import {Button} from '@mui/material';

const LINE = <div style={{ borderTop: '1px solid #BABEC1', height: 0 }} />;
const LINE = <div style={{borderTop: '1px solid #BABEC1', height: 0}}/>;

export default function DatasetStatistics(props) {
const { history, match: { params: { datasetIdentifier }} } = props;
const {history, match: {params: {datasetIdentifier}}} = props;
const [datasetId, setDatasetId] = useState();
const [dataset, setDataset] = useState();
const [dars, setDars] = useState();
const [isLoading, setIsLoading] = useState(true);

const applyForAccess = async () => {
try {
const draftResponse = await DAR.postDarDraft({ datasetId: [datasetId] });
const draftResponse = await DAR.postDarDraft({datasetId: [datasetId]});
if (draftResponse.referenceId) {
history.push(`/dar_application/${draftResponse.referenceId}`);
} else if (draftResponse.message) {
Notifications.showError({ text: draftResponse.message + ' Please contact customer support for help.' });
Notifications.showError({text: draftResponse.message + ' Please contact customer support for help.'});
} else {
Notifications.showError({ text: 'Error: Unable to create a Draft Data Access Request' });
Notifications.showError({text: 'Error: Unable to create a Draft Data Access Request'});
}
} catch (error) {
Notifications.showError({ text: 'Error: Unable to create a Draft Data Access Request' });
Notifications.showError({text: 'Error: Unable to create a Draft Data Access Request'});
}
};

useEffect(() => {
DataSet.getDatasetByDatasetIdentifier(datasetIdentifier).then((dataset) => {
setData(dataset.datasetId);
}).catch(() => {
Notifications.showError({ text: 'Error: Unable to retrieve dataset from server' });
Notifications.showError({text: 'Error: Unable to retrieve dataset from server'});
});
}, [datasetIdentifier]);

const extract = useCallback((propertyName) => {
const property = find({ propertyName })(dataset.properties);
const property = find({propertyName})(dataset.properties);
return property?.propertyValue;
}, [dataset]);

Expand All @@ -57,57 +57,82 @@ export default function DatasetStatistics(props) {
setDars(metrics.dars);
setIsLoading(false);
} catch (error) {
Notifications.showError({ text: 'Error: Unable to retrieve dataset statistics from server' });
Notifications.showError({text: 'Error: Unable to retrieve dataset statistics from server'});
setIsLoading(false);
}
};

const accessButton = () => {
const accessManagement = extract('Access Management').toLowerCase();
if (accessManagement === 'controlled') {
return <Button variant='contained' onClick={applyForAccess} sx={{transform: 'scale(1.5)'}}>
Apply for Access
</Button>;
}
const locationUrl = extract('URL');
if (accessManagement === 'open') {
return <span>
This dataset is open access, does not require an access request
{locationUrl &&
<span>, and can be accessed directly through this <a href={locationUrl}>link</a>.</span>
}
</span>;
}
if (accessManagement === 'external') {
return <span>
This dataset is externally managed. Requests cannot be made via DUOS
{locationUrl &&
<span>, but must be made directly through the <a href={locationUrl}>dataset&apos;s host repository</a>.</span>
}
</span>;
}
return <div/>;
};

if (!isLoading) {
return (
<div style={{ ...Styles.PAGE, color: Theme.palette.primary }}>
<div style={{ justifyContent: 'space-between' }}>
<div style={{ marginTop: '25px' }}>
<div style={{...Styles.PAGE, color: Theme.palette.primary}}>
<div style={{justifyContent: 'space-between'}}>
<div style={{marginTop: '25px'}}>
<div style={Styles.TITLE}>Dataset Statistics</div>
<div style={Styles.MEDIUM_ROW}>
<div style={{ fontWeight: '500', marginRight: '5px' }}>Dataset ID: </div>
<div style={{fontWeight: '500', marginRight: '5px'}}>Dataset ID:</div>
<div>{dataset?.alias}</div>
</div>
<div style={Styles.MEDIUM_ROW}>
<div style={{ fontWeight: '500', marginRight: '5px' }}>Dataset Name: </div>
<div style={{fontWeight: '500', marginRight: '5px'}}>Dataset Name:</div>
<div>
{extract('Dataset Name') || dataset?.name}
</div>
</div>
<div style={{ paddingTop: '20px', paddingLeft: '30px' }}>
<Button variant='contained' onClick={applyForAccess} sx={{ transform: 'scale(1.5)' }} >
Apply for Access
</Button>
<div style={{paddingTop: '20px', paddingLeft: '30px'}}>
{accessButton()}
</div>
</div>
<div style={Styles.SUB_HEADER}>Dataset Information</div>
<div style={{ display: 'flex' }}>
<div style={{display: 'flex'}}>
<div style={Styles.DESCRIPTION_BOX}>
<div style={{ ...Styles.MINOR_HEADER, paddingLeft: '10px' }}>Dataset Description:</div>
<div style={{...Styles.MINOR_HEADER, paddingLeft: '10px'}}>Dataset Description:</div>
{LINE}
<div style={{ fontSize: Theme.font.size.small, padding: '1rem' }}>
{extract('Dataset Description') || dataset?.description || dataset?.study?.description || 'N/A' }
<div style={{fontSize: Theme.font.size.small, padding: '1rem'}}>
{extract('Dataset Description') || dataset?.description || dataset?.study?.description || 'N/A'}
</div>
</div>
<div>
<div style={{ display: 'flex' }}>
<div style={Styles.SMALL_BOLD}>Number of Participants: </div>
<div style={{display: 'flex'}}>
<div style={Styles.SMALL_BOLD}>Number of Participants:</div>
<div style={Styles.SMALL_BOLD}>
{extract('# of participants')}
</div>
</div>
{(extract('Principal Investigator(PI)') || dataset?.study?.piName) && <div style={{ display: 'flex' }}>
<div style={Styles.SMALL_BOLD}>Principal Investigator: </div>
{(extract('Principal Investigator(PI)') || dataset?.study?.piName) && <div style={{display: 'flex'}}>
<div style={Styles.SMALL_BOLD}>Principal Investigator:</div>
<div style={Styles.SMALL_BOLD}>
{extract('Principal Investigator(PI)') || dataset?.study?.piName}
</div>
</div>}
{(extract('Data Depositor') || dataset?.createUser?.displayName) && <div style={{ display: 'flex' }}>
<div style={Styles.SMALL_BOLD}>Data Custodian: </div>
{(extract('Data Depositor') || dataset?.createUser?.displayName) && <div style={{display: 'flex'}}>
<div style={Styles.SMALL_BOLD}>Data Custodian:</div>
<div style={Styles.SMALL_BOLD}>
{extract('Data Depositor') || dataset?.createUser?.displayName}
</div>
Expand All @@ -121,24 +146,24 @@ export default function DatasetStatistics(props) {
props={props}
readLessText='Show less'
readMoreText='Show More'
readStyle={{ fontWeight: 500, margin: '20px', height: 0 }}
readStyle={{fontWeight: 500, margin: '20px', height: 0}}
content={[
<div key='dar' style={{ display: 'flex' }}>
<div style={{ ...Styles.MEDIUM, width: '12%', margin: '15px' }}>{dar.darCode}</div>
<div style={{ ...Styles.MEDIUM, margin: '15px' }}>{dar.projectTitle}</div>
<div key='dar' style={{display: 'flex'}}>
<div style={{...Styles.MEDIUM, width: '12%', margin: '15px'}}>{dar.darCode}</div>
<div style={{...Styles.MEDIUM, margin: '15px'}}>{dar.projectTitle}</div>
</div>,
LINE
]}
moreContent={[
<div key='updated' style={{ display: 'flex', backgroundColor: 'white' }}>
<div style={{ display: 'flex', paddingRight: '2rem' }}>
<div style={Styles.SMALL_BOLD}>Last Updated: </div>
<div key='updated' style={{display: 'flex', backgroundColor: 'white'}}>
<div style={{display: 'flex', paddingRight: '2rem'}}>
<div style={Styles.SMALL_BOLD}>Last Updated:</div>
<div style={Styles.SMALL_BOLD}>{formatDate(dar.updateDate)}</div>
</div>
</div>,
<div key='summary' style={{ backgroundColor: 'white' }}>
<div key='summary' style={{backgroundColor: 'white'}}>
<div style={Styles.SMALL_BOLD}>NonTechnical Summary:</div>
<div style={{ fontSize: Theme.font.size.small, padding: '0 1rem 1rem 1rem' }}>
<div style={{fontSize: Theme.font.size.small, padding: '0 1rem 1rem 1rem'}}>
{dar.nonTechRus}
</div>
</div>,
Expand Down

0 comments on commit 7cc675f

Please sign in to comment.