Converted `applyClimateFilters` to action

src/accessions/actions/public.ts

@@ -15,6 +15,7 @@ import { RECEIVE_ACCESSIONS, RECEIVE_ACCESSION, RECEIVE_ACCESSION_OVERVIEW, APPE
 import AccessionService from 'service/genesys/AccessionService';
 import { showSnackbar } from 'actions/snackbar';
 import Page from 'model/Page';
+import TileClimate from 'model/genesys/TileClimate';
 
 const receiveAccessions = (paged: FilteredPage<Accession>, error = null) => ({
   type: RECEIVE_ACCESSIONS,
@@ -207,6 +208,68 @@ const receiveTileLayerInfo = (tileLayer: MapLayer) => ({
   payload: {tileLayer},
 });
 
-export const  updateTileLayerInfo = (tileLayer: MapLayer) => (dispatch) => {
+export const updateTileLayerInfo = (tileLayer: MapLayer) => (dispatch) => {
   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));
+};
+

src/accessions/ui/DisplayPage.tsx

 import * as React from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import { translate } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
 
 // Actions
 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';
 
 // Constants
@@ -41,7 +41,6 @@ import AuditedInfo from 'ui/common/AuditedInfo';
 import Authorize from 'ui/common/authorized/Authorize';
 import BioClimateDisplay from 'accessions/ui/c/BioClimateDisplay';
 import PageTitle from 'ui/common/PageTitle';
-import ActionButton from 'ui/common/buttons/ActionButton';
 
 const styles = (theme) => ({
   pageSection: {
@@ -135,66 +134,6 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
     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() {
     const { t, error, uuid, doi, accessions, auditLog, classes } = this.props;
 
@@ -403,28 +342,13 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                     </Properties>
 
                     { 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>
                 }
 
                 { accession.geo && accession.geo.climate &&
-                 <BioClimateDisplay climateData={ accession.geo.climate }/>
-                }
-
-                { 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>
+                 <BioClimateDisplay climateData={ accession.geo.climate } extraFilters={ { taxa: { genus: [ accession.taxonomy.genus ] } } } />
                 }
 
                 { accession.remarks && accession.remarks.length > 0 && <PageSection title={ t('accessions.public.p.display.remarks') }>

src/accessions/ui/c/BioClimateDisplay.tsx

 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
 import TileClimate from 'model/genesys/TileClimate';
 // ui
@@ -8,17 +13,44 @@ import GridContainer from 'ui/layout/GridContainer';
 import ClimateTable from 'accessions/ui/c/ClimateTable';
 import PrecipitationChart from 'accessions/ui/c/PrecipitationChart';
 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}) => (
-  <PageSection title={ t('accessions.public.p.display.climateAtCollection') } { ...rest }>
-    <GridContainer className="container-spacing-vertical">
-      <TemperatureChart halfWidth climate={ climateData }/>
-      <PrecipitationChart halfWidth climate={ climateData }/>
-    </GridContainer>
+    return (
     <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>
   </PageSection>
-);
+  </div>
+  );
+};
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+  applyClimateFilters,
+}, dispatch);
 
-export default translate()(BioClimateDisplay);
+export default connect(null, mapDispatchToProps)(translate()(BioClimateDisplay));

src/model/accession/AccessionFilter.ts

@@ -10,35 +10,35 @@ import ClimateFilter from 'model/genesys/ClimateFilter';
 * Defined in Swagger as '#/definitions/AccessionFilter'
 */
 class AccessionFilter {
-  public acceNumb: StringFilter;
-  public active: boolean;
-  public available: boolean;
-  public createdBy: number[];
-  public createdDate: DateFilter;
+  public acceNumb?: StringFilter;
+  public active?: boolean;
+  public available?: boolean;
+  public createdBy?: number[];
+  public createdDate?: DateFilter;
   public crop?: string[];
-  public cropName: string;
-  public doi: string[];
-  public elevation: NumberFilter;
-  public geo: { latitude: NumberFilter, longitude: NumberFilter, climate?: ClimateFilter };
-  public historic: boolean;
-  public holder: InstituteFilter;
-  public id: number[];
-  public lastModifiedBy: number[];
-  public lastModifiedDate: DateFilter;
-  public latitude: NumberFilter;
-  public longitude: NumberFilter;
-  public mlsStatus: boolean;
-  public origin: CountryFilter;
-  public sampStat: number[];
-  public seqNo: NumberFilter;
-  public taxa: TaxonomyFilter;
-  public uuid: string[];
-  public version: number[];
-  public sgsv: boolean;
-  public storage: number[];
-  public images: boolean;
+  public cropName?: string;
+  public doi?: string[];
+  public elevation?: NumberFilter;
+  public geo?: { latitude?: NumberFilter, longitude?: NumberFilter, climate?: ClimateFilter };
+  public historic?: boolean;
+  public holder?: InstituteFilter;
+  public id?: number[];
+  public lastModifiedBy?: number[];
+  public lastModifiedDate?: DateFilter;
+  public latitude?: NumberFilter;
+  public longitude?: NumberFilter;
+  public mlsStatus?: boolean;
+  public origin?: CountryFilter;
+  public sampStat?: number[];
+  public seqNo?: NumberFilter;
+  public taxa?: TaxonomyFilter;
+  public uuid?: string[];
+  public version?: number[];
+  public sgsv?: boolean;
+  public storage?: number[];
+  public images?: boolean;
 
-  public NOT: AccessionFilter;
+  public NOT?: AccessionFilter;
 }
 
 export default AccessionFilter;

src/model/genesys/ClimateFilter.ts

@@ -23,6 +23,10 @@ class ClimateFilter {
   public bio13?: NumberFilter;
   public bio14?: NumberFilter;
   public bio15?: NumberFilter;
+  public bio16?: NumberFilter;
+  public bio17?: NumberFilter;
+  public bio18?: NumberFilter;
+  public bio19?: NumberFilter;
 
   public prec1?: NumberFilter;
   public prec2?: NumberFilter;