ES6 Plato on Github
Report Home
Summary Display
containers/SearchContainer.js
Maintainability
71.46
Lines of code
188
Difficulty
21.28
Estimated Errors
1.07
Function weight
By Complexity
By SLOC
import React, { Component } from 'react'; import ICATPLUS from '../config/icat/icatPlus.js'; import { connect } from 'react-redux'; import { setBreadCrumbs } from '../actions/breadcrumbs.js'; import { ReactiveBase, DateRange, MultiList, SingleRange, CategorySearch, ResultCard } from '@appbaseio/reactivesearch'; import moment from 'moment'; import { Label, Badge, Image, Grid, Row, Col, FormControl, ButtonToolbar, ToggleButtonGroup, ToggleButton } 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'; class SearchContainer extends Component { componentDidMount(){ this.props.setBreadCrumbs([{ name: 'Search', link: '/search' }]); } getTechniqueColor(definition){ if (definition){ if (TECHNIQUES){ var technique = _.find(TECHNIQUES, function(technique){ return technique.shortname == definition}); if (technique){ return technique.color; } } } return "white"; } getDatasetImageURL(data){ /**Getting the image */ var url = noimage; if (data.ResourcesGallery){ var images = data.ResourcesGallery.split(" "); if (images){ if (images.length > 0){ url = getFileByEventId(this.props.user.sessionId, data.investigationId, images[0] ); } } } return url; } renderDataset(data){ var styleTechnique = { backgroundColor : this.getTechniqueColor(data.definition), fontSize : "10px" } var redirect = "/investigation/" + data.investigationId +"/datasets"; return { title: ( <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> </Row> <br /> <Row> <Col sm={12} style={{textAlign:'center', fontSize : "11px"}}><a href={redirect}>{data.name}</a></Col> </Row> <Row> <Col sm={12} style={{textAlign:'center', fontWeight:'bold', fontSize : "14px"}}>{data.Sample_name}</Col> </Row> <Row> <Col sm={12} style={{textAlign:'center', color:'gray', fontSize : "10px"}}>{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> <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> ) }; } render() { if ((!this.props.user) || (!this.props.user.sessionId) ) { return null; } var url = ICATPLUS.server + "/elasticsearch/" + this.props.user.sessionId + "/"; return (<div> <ReactiveBase app="datasets" url = {url} themePreset="light"> <Grid fluid > <Row> <Col sm={2}></Col> <Col xs={10}> <CategorySearch componentId="searchbox" dataField={["investigationName", "investigationSummary","name", "definition"]} categoryField="investigationName.keyword" placeholder="Search by dataset name, sample name or investigation title" /> </Col> </Row> <Row> <Col sm={2}> <br /> <DateRange componentId="DateSensor" dataField="startDate" title="Filter by date" /> <br /> <MultiList componentId="BeamlineSensor" dataField="investigationVisitId.keyword" title="Beamlines" /> <br /> <MultiList componentId="DefinitionSensor" dataField="definition.keyword" title="Technique" /> </Col> <Col sm={10}> <ResultCard componentId="result" title="Results" dataField="investigationName" from={0} size={20} paginationAt="top" pagination={false} stream={true} showResultStats={true} react={{ and: ["searchbox", "DateSensor", "BeamlineSensor", "DefinitionSensor"] }} onData={(res) => { return this.renderDataset(res); }} /> </Col> </Row> </Grid> </ReactiveBase> </div>); } } function mapStateToProps(state) { return { user: state.user }; } function mapDispatchToProps(dispatch) { return { setBreadCrumbs: breadcrumbs => dispatch(setBreadCrumbs(breadcrumbs)) }; } export default connect( mapStateToProps, mapDispatchToProps )(SearchContainer);