parent b9de9b05
...@@ -4,12 +4,12 @@ import { connect } from 'react-redux'; ...@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs.js'; import { setBreadCrumbs } from '../actions/breadcrumbs.js';
import { ReactiveBase, RangeInput, DateRange, MultiList, CategorySearch, ResultCard, SingleDropdownList } from '@appbaseio/reactivesearch'; import { ReactiveBase, RangeInput, DateRange, MultiList, CategorySearch, ResultCard, SingleDropdownList } from '@appbaseio/reactivesearch';
import moment from 'moment'; import moment from 'moment';
import { Label, Grid, Row, Col } from 'react-bootstrap'; import { Label, Grid, Row, Col, Table } from 'react-bootstrap';
import { getFileByEventId } from '../api/icat/icatPlus.js'; import { getFileByEventId } from '../api/icat/icatPlus.js';
import noimage from '../images/noimage.png'; import noimage from '../images/noimage.png';
import TECHNIQUES from '../config/techniques/techniques.js'; import TECHNIQUES from '../config/techniques/techniques.js';
import _ from 'lodash'; import _ from 'lodash';
import { stringifyBytesSize } from '../components/Helpers.js';
class SearchContainer extends Component { class SearchContainer extends Component {
componentDidMount(){ componentDidMount(){
this.props.setBreadCrumbs([{ name: 'Search', link: '/search' }]); this.props.setBreadCrumbs([{ name: 'Search', link: '/search' }]);
...@@ -27,7 +27,7 @@ class SearchContainer extends Component { ...@@ -27,7 +27,7 @@ class SearchContainer extends Component {
} }
getDatasetImageURL(data){ getDatasetImageURL(data){
/**Getting the image */ /**Getting the image */
var url = noimage; var url = null;
if (data.ResourcesGallery){ if (data.ResourcesGallery){
var images = data.ResourcesGallery.split(" "); var images = data.ResourcesGallery.split(" ");
if (images){ if (images){
...@@ -38,55 +38,171 @@ class SearchContainer extends Component { ...@@ -38,55 +38,171 @@ class SearchContainer extends Component {
} }
return url; return url;
} }
getTitle(data){
var styleTechnique = {
backgroundColor : this.getTechniqueColor(data.definition),
fontSize : "10px"
}
var redirect = "/investigation/" + data.investigationId +"/datasets";
return <div>
<Grid fluid>
<Row>
<Col sm={4}><Label style={styleTechnique}> {data.definition} </Label></Col>
<Col sm={4}></Col>
<Col sm={4} style={{ fontSize : "12px"}}><Label bsStyle="primary"> DATASET </Label></Col>
</Row>
<Row style={{marginTop:'10px'}}>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Name</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}><a href={redirect}>{data.name}</a></Col>
</Row>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Sample</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.sampleName}</Col>
</Row>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Proposal</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.investigationName}</Col>
</Row>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Date</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{moment(data.startDate).format('DD/MM/YYYY')}</Col>
</Row>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Beamline</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.investigationVisitId}</Col>
</Row>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Files</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.fileCount}</Col>
</Row>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Volume</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{stringifyBytesSize(data.volume)}</Col>
</Row>
renderDataset(data){
var styleTechnique = { </Grid>
backgroundColor : this.getTechniqueColor(data.definition), <br />
fontSize : "10px" <br />
} <br />
var redirect = "/investigation/" + data.investigationId +"/datasets"; <br />
<br />
<br />
<br />
<br />
<br />
</div>;
}
return { getFullTitle(data){
title: ( var styleTechnique = {
backgroundColor : this.getTechniqueColor(data.definition),
<Grid fluid > fontSize : "10px"
}
var redirect = "/investigation/" + data.investigationId +"/datasets";
return <div>
<Grid fluid>
<Row> <Row>
<Col sm={4}><Label style={styleTechnique}> {data.definition} </Label></Col> <Col sm={4}><Label style={styleTechnique}> {data.definition} </Label></Col>
<Col sm={4}></Col> <Col sm={4}></Col>
<Col sm={4} style={{ fontSize : "13px"}}><Label bsStyle="primary"> DATASET </Label></Col> <Col sm={4} style={{ fontSize : "12px"}}><Label bsStyle="primary"> DATASET </Label></Col>
</Row>
<Row style={{marginTop:'10px'}}>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Name</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}><a href={redirect}>{data.name}</a></Col>
</Row> </Row>
<br />
<Row> <Row>
<Col sm={12} style={{textAlign:'center', fontSize : "11px"}}><a href={redirect}>{data.name}</a></Col> <Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Sample</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.sampleName}</Col>
</Row> </Row>
<Row> <Row>
<Col sm={12} style={{textAlign:'center', fontWeight:'bold', fontSize : "14px"}}>{data.Sample_name}</Col> <Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Proposal</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.investigationName}</Col>
</Row> </Row>
<Row> <Row>
<Col sm={12} style={{textAlign:'center', color:'gray', fontSize : "10px"}}>{moment(data.startDate).format('DD/MM/YYYY')}</Col> <Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Date</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{moment(data.startDate).format('DD/MM/YYYY')}</Col>
</Row> </Row>
<Row> <Row>
<Col sm={8}><span style={{fontWeight:'bold'}}>{data.investigationVisitId.toUpperCase()}</span></Col> <Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Beamline</Col>
<Col sm={4}></Col> <Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.investigationVisitId}</Col>
</Row> </Row>
<br /> <Row>
<br /> <Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Files</Col>
</Grid> <Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.fileCount}</Col>
</Row>
), <Row>
image : this.getDatasetImageURL(data), <Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Volume</Col>
description: ( <Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{stringifyBytesSize(data.volume)}</Col>
</Row>
<div className="flex column justify-space-between text-center"> <Row>
<div> <Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Mode</Col>
<div> <Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.InstrumentSource_mode}</Col>
<span className="authors-list"><a href={redirect}>{data.investigationSummary}</a></span> </Row>
</div>
</div> <Row>
</div> <Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Type</Col>
) <Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.InstrumentMonochromatorCrystal_type}</Col>
</Row>
}; <Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Reflection</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.InstrumentMonochromatorCrystal_reflection}</Col>
</Row>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Usage</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.InstrumentMonochromatorCrystal_usage}</Col>
</Row>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Energy</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.InstrumentMonochromator_energy}</Col>
</Row>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Wavelength</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.InstrumentMonochromator_wavelength}</Col>
</Row>
</Grid>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>;
}
getDescription(data){
var redirect = "/investigation/" + data.investigationId +"/datasets";
return <div style={{marginTop:'15px'}} className="flex column justify-space-between text-center">
<div>
<div>
<span className="authors-list"><a href={redirect}>{data.investigationSummary}</a></span>
</div>
<br />
</div>
</div>;
}
renderDataset(data){
var image = this.getDatasetImageURL(data);
if (image){
return {
title: this.getTitle(data),
image : image,
description: this.getDescription(data)
};
}
else{
return {
title: this.getFullTitle(data),
description: this.getDescription(data)
};
}
} }
render() { render() {
...@@ -140,7 +256,7 @@ class SearchContainer extends Component { ...@@ -140,7 +256,7 @@ class SearchContainer extends Component {
/> />
</Col> </Col>
<Col sm={8}> <Col sm={10}>
<ResultCard <ResultCard
componentId="result" componentId="result"
title="Results" title="Results"
...@@ -155,7 +271,7 @@ class SearchContainer extends Component { ...@@ -155,7 +271,7 @@ class SearchContainer extends Component {
//and: ["SingleDropdownListUsage", "RangeSliderSensorWavelength", "searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor", "RangeSliderSensor", "SingleDropdownListReflection"] //and: ["SingleDropdownListUsage", "RangeSliderSensorWavelength", "searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor", "RangeSliderSensor", "SingleDropdownListReflection"]
//and: ["searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor"] //and: ["searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor"]
//and: ["searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor", "SingleDropdownListUsage", "SingleDropdownListType", "SingleDropdownListReflection", "RangeSliderSensorEnergy", "RangeSliderSensorWavelength"] //and: ["searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor", "SingleDropdownListUsage", "SingleDropdownListType", "SingleDropdownListReflection", "RangeSliderSensorEnergy", "RangeSliderSensorWavelength"]
and: ["searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor", "SingleDropdownListUsage", "SingleDropdownListType", "SingleDropdownListReflection"] and: ["searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor"]
}} }}
onData={(res) => { onData={(res) => {
return this.renderDataset(res); return this.renderDataset(res);
...@@ -163,29 +279,7 @@ class SearchContainer extends Component { ...@@ -163,29 +279,7 @@ class SearchContainer extends Component {
/> />
</Col> </Col>
<Col sm={2}>
<br />
<SingleDropdownList
componentId="SingleDropdownListType"
dataField="InstrumentMonochromatorCrystal_type.keyword"
title="Crystal Type"
/>
<br />
<SingleDropdownList
componentId="SingleDropdownListReflection"
dataField="InstrumentMonochromatorCrystal_reflection.keyword"
title="Crystal Reflection"
/>
<br />
<SingleDropdownList
componentId="SingleDropdownListUsage"
dataField="InstrumentMonochromatorCrystal_usage.keyword"
title="Crystal Usage"
/>
</Col>
</Row> </Row>
</Grid> </Grid>
</ReactiveBase> </ReactiveBase>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment