Commit ed7e0195 authored by Matija Obreza's avatar Matija Obreza
Browse files

Converted `applyClimateFilters` to action

parent 57d0f703
...@@ -15,6 +15,7 @@ import { RECEIVE_ACCESSIONS, RECEIVE_ACCESSION, RECEIVE_ACCESSION_OVERVIEW, APPE ...@@ -15,6 +15,7 @@ import { RECEIVE_ACCESSIONS, RECEIVE_ACCESSION, RECEIVE_ACCESSION_OVERVIEW, APPE
import AccessionService from 'service/genesys/AccessionService'; import AccessionService from 'service/genesys/AccessionService';
import { showSnackbar } from 'actions/snackbar'; import { showSnackbar } from 'actions/snackbar';
import Page from 'model/Page'; import Page from 'model/Page';
import TileClimate from 'model/genesys/TileClimate';
const receiveAccessions = (paged: FilteredPage<Accession>, error = null) => ({ const receiveAccessions = (paged: FilteredPage<Accession>, error = null) => ({
type: RECEIVE_ACCESSIONS, type: RECEIVE_ACCESSIONS,
...@@ -207,6 +208,68 @@ const receiveTileLayerInfo = (tileLayer: MapLayer) => ({ ...@@ -207,6 +208,68 @@ const receiveTileLayerInfo = (tileLayer: MapLayer) => ({
payload: {tileLayer}, payload: {tileLayer},
}); });
export const updateTileLayerInfo = (tileLayer: MapLayer) => (dispatch) => { export const updateTileLayerInfo = (tileLayer: MapLayer) => (dispatch) => {
return dispatch(receiveTileLayerInfo(tileLayer)); return dispatch(receiveTileLayerInfo(tileLayer));
}; };
const makeRange = (variable: number, diff: number) => {
return {
ge: Math.round(variable - diff),
le: Math.round(variable + diff),
};
};
export const applyClimateFilters = (climate: TileClimate, extraFilters?: any) => (dispatch) => {
// BIO1 = Annual Mean Temperature !!
// BIO2 = Mean Diurnal Range (Mean of monthly (max temp - min temp))
// BIO3 = Isothermality (BIO2/BIO7) (* 100)
// BIO4 = Temperature Seasonality (standard deviation *100)
// BIO5 = Max Temperature of Warmest Month
// BIO6 = Min Temperature of Coldest Month
// BIO7 = Temperature Annual Range (BIO5-BIO6)
// BIO8 = Mean Temperature of Wettest Quarter
// BIO9 = Mean Temperature of Driest Quarter
// BIO10 = Mean Temperature of Warmest Quarter
// BIO11 = Mean Temperature of Coldest Quarter
// BIO12 = Annual Precipitation
// BIO13 = Precipitation of Wettest Month
// BIO14 = Precipitation of Driest Month
// BIO15 = Precipitation Seasonality (Coefficient of Variation)
// BIO16 = Precipitation of Wettest Quarter
// BIO17 = Precipitation of Driest Quarter
// BIO18 = Precipitation of Warmest Quarter !!
// BIO19 = Precipitation of Coldest Quarter !!
const tempDiff = 2;
const filter = {
// taxa: {
// genus: [ accession.taxonomy.genus ],
// // species: [ accession.taxonomy.species ],
// },
geo: {
climate: {
// temperature
bio1: makeRange(climate.bio1, tempDiff),
// bio2: makeRange(climate.bio2, tempDiff),
bio4: makeRange(climate.bio4, climate.bio4 * .50),
// bio7: makeRange(climate.bio7, tempDiff),
// bio8: makeRange(climate.bio8, tempDiff),
// bio9: makeRange(climate.bio9, tempDiff),
// bio10: makeRange(climate.bio10, tempDiff),
// bio11: makeRange(climate.bio11, tempDiff),
// precipitation
bio12: makeRange(climate.bio12, climate.bio12 * .25),
// bio13: makeRange(climate.bio13, precDif),
// bio14: makeRange(climate.bio14, precDif),
// bio15: makeRange(climate.bio15, climate.bio15 * .25),
bio18: makeRange(climate.bio18, climate.bio18 * .25),
bio19: makeRange(climate.bio19, climate.bio19 * .25),
},
},
...extraFilters,
};
dispatch(applyFilters(filter));
};
import * as React from 'react'; import * as React from 'react';
import {connect} from 'react-redux'; import { connect } from 'react-redux';
import {bindActionCreators} from 'redux'; import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
// Actions // Actions
import { loadAccession, applyFilters, loadAccessionAuditLog } from 'accessions/actions/public'; import { loadAccession, applyFilters, loadAccessionAuditLog } from 'accessions/actions/public';
import {addAccessionToMyList, removeAccessionFromMyList} from 'list/actions/public'; import { addAccessionToMyList, removeAccessionFromMyList } from 'list/actions/public';
import navigateTo from 'actions/navigation'; import navigateTo from 'actions/navigation';
// Constants // Constants
...@@ -41,7 +41,6 @@ import AuditedInfo from 'ui/common/AuditedInfo'; ...@@ -41,7 +41,6 @@ import AuditedInfo from 'ui/common/AuditedInfo';
import Authorize from 'ui/common/authorized/Authorize'; import Authorize from 'ui/common/authorized/Authorize';
import BioClimateDisplay from 'accessions/ui/c/BioClimateDisplay'; import BioClimateDisplay from 'accessions/ui/c/BioClimateDisplay';
import PageTitle from 'ui/common/PageTitle'; import PageTitle from 'ui/common/PageTitle';
import ActionButton from 'ui/common/buttons/ActionButton';
const styles = (theme) => ({ const styles = (theme) => ({
pageSection: { pageSection: {
...@@ -135,66 +134,6 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> { ...@@ -135,66 +134,6 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
applyFilters(filter); applyFilters(filter);
} }
private makeRange = (variable: number, diff: number) => {
return {
ge: Math.round(variable - diff),
le: Math.round(variable + diff),
};
}
private applyClimateFilters = () => {
const { accession: {details: accession}, applyFilters } = this.props;
// BIO1 = Annual Mean Temperature !!
// BIO2 = Mean Diurnal Range (Mean of monthly (max temp - min temp))
// BIO3 = Isothermality (BIO2/BIO7) (* 100)
// BIO4 = Temperature Seasonality (standard deviation *100)
// BIO5 = Max Temperature of Warmest Month
// BIO6 = Min Temperature of Coldest Month
// BIO7 = Temperature Annual Range (BIO5-BIO6)
// BIO8 = Mean Temperature of Wettest Quarter
// BIO9 = Mean Temperature of Driest Quarter
// BIO10 = Mean Temperature of Warmest Quarter
// BIO11 = Mean Temperature of Coldest Quarter
// BIO12 = Annual Precipitation
// BIO13 = Precipitation of Wettest Month
// BIO14 = Precipitation of Driest Month
// BIO15 = Precipitation Seasonality (Coefficient of Variation)
// BIO16 = Precipitation of Wettest Quarter
// BIO17 = Precipitation of Driest Quarter
// BIO18 = Precipitation of Warmest Quarter !!
// BIO19 = Precipitation of Coldest Quarter !!
const tempDiff = 2;
const filter = {
taxa: {
genus: [ accession.taxonomy.genus ],
// species: [ accession.taxonomy.species ],
},
geo: {
climate: {
// temperature
bio1: this.makeRange(accession.geo.climate.bio1, tempDiff),
// bio2: this.makeRange(accession.geo.climate.bio2, tempDiff),
bio4: this.makeRange(accession.geo.climate.bio4, accession.geo.climate.bio4 * .50),
// bio7: this.makeRange(accession.geo.climate.bio7, tempDiff),
// bio8: this.makeRange(accession.geo.climate.bio8, tempDiff),
// bio9: this.makeRange(accession.geo.climate.bio9, tempDiff),
// bio10: this.makeRange(accession.geo.climate.bio10, tempDiff),
// bio11: this.makeRange(accession.geo.climate.bio11, tempDiff),
// precipitation
bio12: this.makeRange(accession.geo.climate.bio12, accession.geo.climate.bio12 * .25),
// bio13: this.makeRange(accession.geo.climate.bio13, precDif),
// bio14: this.makeRange(accession.geo.climate.bio14, precDif),
// bio15: this.makeRange(accession.geo.climate.bio15, accession.geo.climate.bio15 * .25),
bio18: this.makeRange(accession.geo.climate.bio18, accession.geo.climate.bio18 * .25),
bio19: this.makeRange(accession.geo.climate.bio19, accession.geo.climate.bio19 * .25),
},
},
};
applyFilters(filter);
}
public render() { public render() {
const { t, error, uuid, doi, accessions, auditLog, classes } = this.props; const { t, error, uuid, doi, accessions, auditLog, classes } = this.props;
...@@ -403,28 +342,13 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> { ...@@ -403,28 +342,13 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</Properties> </Properties>
{ hasLatLon && { hasLatLon &&
<LocationMap locations={ [{ id: accession.geo.id, lat: accession.geo.latitude, lng: accession.geo.longitude }] }/> <LocationMap locations={ [{ id: accession.geo.id, lat: accession.geo.latitude, lng: accession.geo.longitude }] } />
} }
</PageSection> </PageSection>
} }
{ accession.geo && accession.geo.climate && { accession.geo && accession.geo.climate &&
<BioClimateDisplay climateData={ accession.geo.climate }/> <BioClimateDisplay climateData={ accession.geo.climate } extraFilters={ { taxa: { genus: [ accession.taxonomy.genus ] } } } />
}
{ accession.geo && accession.geo.climate &&
<PageSection title={ t('accessions.public.p.display.additionalInfo') }>
<Properties>
{ [...Array(19).keys()].map((i) => (
<PropertiesItem md numeric key={ `month-${i}` } title={ t(`accessions.climate.bio${i + 1}`) }>
{ accession.geo.climate[`bio${i + 1}`] && Number(accession.geo.climate[`bio${i + 1}`]).toFixed(1) }
</PropertiesItem>
)) }
</Properties>
<div>
<ActionButton action={ this.applyClimateFilters } title="View accessions with similar climate" />
</div>
</PageSection>
} }
{ accession.remarks && accession.remarks.length > 0 && <PageSection title={ t('accessions.public.p.display.remarks') }> { accession.remarks && accession.remarks.length > 0 && <PageSection title={ t('accessions.public.p.display.remarks') }>
......
import * as React from 'react'; import * as React from 'react';
import {translate} from 'react-i18next'; import { translate } from 'react-i18next';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { applyClimateFilters } from 'accessions/actions/public';
// model // model
import TileClimate from 'model/genesys/TileClimate'; import TileClimate from 'model/genesys/TileClimate';
// ui // ui
...@@ -8,17 +13,44 @@ import GridContainer from 'ui/layout/GridContainer'; ...@@ -8,17 +13,44 @@ import GridContainer from 'ui/layout/GridContainer';
import ClimateTable from 'accessions/ui/c/ClimateTable'; import ClimateTable from 'accessions/ui/c/ClimateTable';
import PrecipitationChart from 'accessions/ui/c/PrecipitationChart'; import PrecipitationChart from 'accessions/ui/c/PrecipitationChart';
import TemperatureChart from 'accessions/ui/c/TemperatureChart'; import TemperatureChart from 'accessions/ui/c/TemperatureChart';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import ActionButton from 'ui/common/buttons/ActionButton';
const BioClimateDisplay = ({climateData, t, extraFilters, applyClimateFilters, ...rest}: {climateData: TileClimate, t: any, extraFilters?: any, applyClimateFilters: any}) => {
const doFilters = () => {
console.log(`Applying climate filters`, climateData, extraFilters);
applyClimateFilters(climateData, extraFilters);
};
const BioClimateDisplay = ({climateData, t, ...rest}: {climateData: TileClimate, t: any}) => ( return (
<PageSection title={ t('accessions.public.p.display.climateAtCollection') } { ...rest }>
<GridContainer className="container-spacing-vertical">
<TemperatureChart halfWidth climate={ climateData }/>
<PrecipitationChart halfWidth climate={ climateData }/>
</GridContainer>
<div> <div>
<ClimateTable climate={ climateData }/> <PageSection title={ t('accessions.public.p.display.climateAtCollection') } { ...rest }>
<GridContainer className="container-spacing-vertical">
<TemperatureChart halfWidth climate={ climateData }/>
<PrecipitationChart halfWidth climate={ climateData }/>
</GridContainer>
<div>
<ClimateTable climate={ climateData }/>
</div>
</PageSection>
<PageSection title={ t('accessions.public.p.display.additionalInfo') }>
<Properties>
{ [...Array(19).keys()].map((i) => (
<PropertiesItem md numeric key={ `month-${i}` } title={ t(`accessions.climate.bio${i + 1}`) }>
{ climateData[`bio${i + 1}`] && Number(climateData[`bio${i + 1}`]).toFixed(1) }
</PropertiesItem>
)) }
</Properties>
<div>
<ActionButton action={ doFilters } title="View accessions with similar climate" />
</div> </div>
</PageSection> </PageSection>
); </div>
);
};
const mapDispatchToProps = (dispatch) => bindActionCreators({
applyClimateFilters,
}, dispatch);
export default translate()(BioClimateDisplay); export default connect(null, mapDispatchToProps)(translate()(BioClimateDisplay));
...@@ -10,35 +10,35 @@ import ClimateFilter from 'model/genesys/ClimateFilter'; ...@@ -10,35 +10,35 @@ import ClimateFilter from 'model/genesys/ClimateFilter';
* Defined in Swagger as '#/definitions/AccessionFilter' * Defined in Swagger as '#/definitions/AccessionFilter'
*/ */
class AccessionFilter { class AccessionFilter {
public acceNumb: StringFilter; public acceNumb?: StringFilter;
public active: boolean; public active?: boolean;
public available: boolean; public available?: boolean;
public createdBy: number[]; public createdBy?: number[];
public createdDate: DateFilter; public createdDate?: DateFilter;
public crop?: string[]; public crop?: string[];
public cropName: string; public cropName?: string;
public doi: string[]; public doi?: string[];
public elevation: NumberFilter; public elevation?: NumberFilter;
public geo: { latitude: NumberFilter, longitude: NumberFilter, climate?: ClimateFilter }; public geo?: { latitude?: NumberFilter, longitude?: NumberFilter, climate?: ClimateFilter };
public historic: boolean; public historic?: boolean;
public holder: InstituteFilter; public holder?: InstituteFilter;
public id: number[]; public id?: number[];
public lastModifiedBy: number[]; public lastModifiedBy?: number[];
public lastModifiedDate: DateFilter; public lastModifiedDate?: DateFilter;
public latitude: NumberFilter; public latitude?: NumberFilter;
public longitude: NumberFilter; public longitude?: NumberFilter;
public mlsStatus: boolean; public mlsStatus?: boolean;
public origin: CountryFilter; public origin?: CountryFilter;
public sampStat: number[]; public sampStat?: number[];
public seqNo: NumberFilter; public seqNo?: NumberFilter;
public taxa: TaxonomyFilter; public taxa?: TaxonomyFilter;
public uuid: string[]; public uuid?: string[];
public version: number[]; public version?: number[];
public sgsv: boolean; public sgsv?: boolean;
public storage: number[]; public storage?: number[];
public images: boolean; public images?: boolean;
public NOT: AccessionFilter; public NOT?: AccessionFilter;
} }
export default AccessionFilter; export default AccessionFilter;
...@@ -23,6 +23,10 @@ class ClimateFilter { ...@@ -23,6 +23,10 @@ class ClimateFilter {
public bio13?: NumberFilter; public bio13?: NumberFilter;
public bio14?: NumberFilter; public bio14?: NumberFilter;
public bio15?: NumberFilter; public bio15?: NumberFilter;
public bio16?: NumberFilter;
public bio17?: NumberFilter;
public bio18?: NumberFilter;
public bio19?: NumberFilter;
public prec1?: NumberFilter; public prec1?: NumberFilter;
public prec2?: NumberFilter; public prec2?: NumberFilter;
......
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