parent b9de9b05
......@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs.js';
import { ReactiveBase, RangeInput, DateRange, MultiList, CategorySearch, ResultCard, SingleDropdownList } from '@appbaseio/reactivesearch';
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 noimage from '../images/noimage.png';
import TECHNIQUES from '../config/techniques/techniques.js';
import _ from 'lodash';
import { stringifyBytesSize } from '../components/Helpers.js';
class SearchContainer extends Component {
componentDidMount(){
this.props.setBreadCrumbs([{ name: 'Search', link: '/search' }]);
......@@ -27,7 +27,7 @@ class SearchContainer extends Component {
}
getDatasetImageURL(data){
/**Getting the image */
var url = noimage;
var url = null;
if (data.ResourcesGallery){
var images = data.ResourcesGallery.split(" ");
if (images){
......@@ -38,55 +38,171 @@ class SearchContainer extends Component {
}
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 = {
backgroundColor : this.getTechniqueColor(data.definition),
fontSize : "10px"
}
var redirect = "/investigation/" + data.investigationId +"/datasets";
</Grid>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>;
}
return {
title: (
<Grid fluid >
getFullTitle(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 : "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>
<br />
<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>
<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>
<Col sm={12} style={{textAlign:'center', color:'gray', fontSize : "10px"}}>{moment(data.startDate).format('DD/MM/YYYY')}</Col>
<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={8}><span style={{fontWeight:'bold'}}>{data.investigationVisitId.toUpperCase()}</span></Col>
<Col sm={4}></Col>
<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>
<br />
<br />
</Grid>
),
image : this.getDatasetImageURL(data),
description: (
<div className="flex column justify-space-between text-center">
<div>
<div>
<span className="authors-list"><a href={redirect}>{data.investigationSummary}</a></span>
</div>
</div>
</div>
)
};
<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>
<Row>
<Col sm={3} style={{textAlign:'left', color:'gray', fontSize : "11px"}}>Mode</Col>
<Col sm={9} style={{textAlign:'left', fontSize : "11px"}}>{data.InstrumentSource_mode}</Col>
</Row>
<Row>
<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() {
......@@ -140,7 +256,7 @@ class SearchContainer extends Component {
/>
</Col>
<Col sm={8}>
<Col sm={10}>
<ResultCard
componentId="result"
title="Results"
......@@ -155,7 +271,7 @@ class SearchContainer extends Component {
//and: ["SingleDropdownListUsage", "RangeSliderSensorWavelength", "searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor", "RangeSliderSensor", "SingleDropdownListReflection"]
//and: ["searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor"]
//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) => {
return this.renderDataset(res);
......@@ -163,29 +279,7 @@ class SearchContainer extends Component {
/>
</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>
</Grid>
</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