Skip to content
Snippets Groups Projects
Commit 67133950 authored by Alejandro De Maria Antolinos's avatar Alejandro De Maria Antolinos
Browse files

Merge branch '#546' into 'master'

It fixes #546

Closes #546

See merge request !566
parents 480149b3 b5c8907a
No related branches found
No related tags found
1 merge request!566It fixes icat/E-DataPortal#546
Pipeline #59902 passed
import axios from 'axios';
import React from 'react';
import { Glyphicon } from 'react-bootstrap';
import { Glyphicon, Grid, Row, Col, Button, Panel } from 'react-bootstrap';
import {
getFilesByDatasetId,
getDownloadURLByDatafileId,
} from '../../api/icat-plus/catalogue';
import { stringifyBytesSize } from '../../helpers';
import ResponsiveTable from '../Table/ResponsiveTable';
import Loader from '../Loader';
class DatasetFileTree extends React.Component {
constructor(props) {
......@@ -15,28 +16,49 @@ class DatasetFileTree extends React.Component {
this.downloadFormatter = this.downloadFormatter.bind(this);
this.locationFormatter = this.locationFormatter.bind(this);
this.getURLViewer = this.getURLViewer.bind(this);
this.displayViewerButton = this.displayViewerButton.bind(this);
this.selectDatafile = this.selectDatafile.bind(this);
this.state = {
files: [],
fetched: false,
fetching: false,
username: this.props.username,
sessionId: this.props.sessionId,
h5viewerURL: this.props.h5viewerURL,
isAdministrator: this.props.isAdministrator,
datafileSelected: null,
iframeURL: null,
};
}
componentDidMount() {
this.setState({ fetching: true });
axios
.get(getFilesByDatasetId(this.props.sessionId, this.props.dataset.id))
.then((res) => {
this.setState({
files: res.data.map((row) => row.Datafile),
fetching: true,
fetching: false,
fetched: true,
});
});
}
displayViewerButton(_, dataFile) {
if (dataFile.name.endsWith('.h5') && this.props.isAdministrator) {
return (
<Button
onClick={() => {
this.selectDatafile(dataFile);
}}
>
<Glyphicon glyph="eye-open" />
</Button>
);
}
}
downloadFormatter(_, dataFile) {
return (
<a href={getDownloadURLByDatafileId(this.props.sessionId, dataFile.id)}>
......@@ -50,56 +72,93 @@ class DatasetFileTree extends React.Component {
}
locationFormatter(_, dataFile) {
if (dataFile.name.endsWith('.h5') && this.props.isAdministrator) {
return (
<a
href={this.getURLViewer(
this.props.h5viewerURL,
this.props.sessionId,
dataFile.id,
dataFile.name
)}
>
{dataFile.name}
</a>
);
}
return <>{dataFile.name}</>;
return dataFile.name;
}
selectDatafile(dataFile) {
this.setState({
datafileSelected: dataFile,
iframeURL: this.getURLViewer(
this.props.h5viewerURL,
this.props.sessionId,
dataFile.id,
dataFile.name
),
});
}
render() {
if (this.state.fetching) {
return <Loader message="Loading files..." spacedOut />;
}
return (
<div style={{ marginTop: 20 }}>
<ResponsiveTable
data={this.state.files}
columns={[
{ dataField: 'id', text: '', hidden: true },
{
dataField: 'download',
text: '',
formatter: this.downloadFormatter,
headerStyle: { width: '40px' },
},
{
dataField: 'name',
text: 'Location',
formatter: this.locationFormatter,
},
{
dataField: 'fileSize',
text: 'Size',
formatter: stringifyBytesSize,
headerStyle: { width: '10%' },
},
]}
pageOptions={{
paginationSize: 20,
sizePerPage: 20,
showTotal: true,
hidePageListOnlyOnePage: true,
}}
/>
</div>
<Grid fluid>
<Row style={{ margin: 10 }}>
<Col xs={12} md={6}>
<ResponsiveTable
data={this.state.files}
columns={[
{ dataField: 'id', text: '', hidden: true },
{
dataField: 'download',
text: '',
formatter: this.downloadFormatter,
headerStyle: { width: '40px' },
},
{
dataField: 'name',
text: 'Location',
formatter: this.locationFormatter,
},
{
dataField: 'fileSize',
text: 'Size',
formatter: stringifyBytesSize,
headerStyle: { width: '10%' },
},
{
dataField: 'Preview',
text: 'Preview',
formatter: this.displayViewerButton,
headerStyle: { width: '10%' },
},
]}
pageOptions={{
paginationSize: 20,
sizePerPage: 20,
showTotal: true,
hidePageListOnlyOnePage: true,
}}
/>
</Col>
<Col xs={12} md={6}>
{this.state.iframeURL && (
<Panel bsStyle="primary">
<Panel.Heading>
<Panel.Title componentClass="h3">
{this.state.datafileSelected.name}
</Panel.Title>
</Panel.Heading>
<Panel.Body>
<iframe
title="HDF5 Viewer"
style={{
marginTop: '50px',
width: '100%',
height: '600px',
}}
src={this.state.iframeURL}
></iframe>
<Button target="_blank" href={this.state.iframeURL}>
<Glyphicon glyph="share-alt" style={{ margin: 5 }} />
Open viewer
</Button>
</Panel.Body>
</Panel>
)}
</Col>
</Row>
</Grid>
);
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment