flexible selector fields; fix bug with WillMount

selector fields in filter bar now have selections based on keys in
corresponding summaryData object; fixed issue with render happening
before WillMount that breaks everything, render Loading.js until
summaryData is ready (facebook/react#7048)

client/scripts/components/Explore.js

@@ -14,6 +14,7 @@ import Header from './Header';
 import ExploreFilters from './ExploreFilters';
 import ExploreTable from './ExploreTable';
 import ExploreSummaryStats from './ExploreSummaryStats';
+import Loading from './Loading';
 
 
 // Firebase setup
@@ -60,16 +61,18 @@ var Explore = React.createClass({
     }],
       'rules':[],
       'discoveryId':null,
-      "summaryData":[]
+      "summaryData":[],
+      "loaded":false
     }
   },
 
   componentWillMount : function() {
     var self = this;
-
     apiRequest.get("/datasets/summary")
     .then(function (response) {
-      self.setState({"summaryData": response.data.summary,});
+      self.setState({"summaryData": response.data.summary,
+        "loaded":true
+      });
     })
     this.state.activeData = this.state.fullData;
     this.setState({ 'activeData' : this.state.fullData});
@@ -80,6 +83,7 @@ var Explore = React.createClass({
 
   applyRules : function(rules) {
     // I think this should be changed so that a SearchDatasetsSummary api call is made, updating the summaryData
+    //if this.state.summaryData.totalDatasets < threshold, can send fullData
     if (rules) {
       var tableData = this.state.fullData;
       for (var i = 0;i < rules.length;i++) {
@@ -104,19 +108,15 @@ var Explore = React.createClass({
   addRule(rule,key) {
   //update our state
   const rules = {...this.state.rules}; //make copy existing state
-  console.log('old',rules)
   //add in our new rule
   rules[key] = rule;
-  console.log(rules)
   //set state
   this.setState({"rules": rules})
   },
 
   removeRule(key) {
   const rules = {...this.state.rules}; //make copy existing state
-  console.log('old',rules)
   rules[key] = null;
-  console.log('new', rules)
   //set state
   this.setState({"rules": rules})
   },
@@ -136,6 +136,7 @@ var Explore = React.createClass({
   },
 
   render : function() {
+    if (!this.state.loaded) return <Loading/>;
     console.log(this.state);
     return (
       <div>
@@ -144,7 +145,7 @@ var Explore = React.createClass({
           <MuiThemeProvider>
             <div>
               <Paper style={{'width':'80%','margin':'25px auto','padding':25}}>
-                <ExploreFilters applyRules={this.applyRules} addRule={this.addRule} removeRule={this.removeRule}/>
+                <ExploreFilters applyRules={this.applyRules} addRule={this.addRule} removeRule={this.removeRule} summaryData={this.state.summaryData}/>
                 <RaisedButton
                   style={{'margin':'12px 12px 0 12px'}}
                   onClick={this.submitDiscovery}

client/scripts/components/ExploreFilters.js

@@ -54,17 +54,14 @@ var ExploreFilters = React.createClass({
               <MenuItem value={"OTHER"} primaryText="Other" />
             </SelectField>
 
-            <h4>Choose Database</h4>
-            <SelectField value={this.state.database} onChange={this.handleSelectChange.bind(this,'database')}>
-              <MenuItem value={"All"} primaryText="All" />
-              <MenuItem value={"EBI"} primaryText="EBI" />
-              <MenuItem value={"Genbank"} primaryText="GenBank" />
-            </SelectField>
-            <h4>Choose Environment Package</h4>
+            <h4>Choose Environmental Package</h4>
             <SelectField value={this.state.env_package} onChange={this.handleSelectChange.bind(this,'env_package')}>
               <MenuItem value={"All"} primaryText="All" />
-              <MenuItem value={"sediment"} primaryText="sediment" />
-              <MenuItem value={"soil"} primaryText="soil" />
+              {
+                Object
+                .keys(this.props.summaryData.env_package_summary)
+                .map(key => <MenuItem key={key} value={{key}} primaryText={key} />)
+              }
             </SelectField>
             //<h4> Latitude </h4>
             //<LatFilter/>

client/scripts/components/Loading.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+var Loading = React.createClass({
+  getInitialState : function() {
+    return {}
+  },
+
+  render : function() {
+    return (
+      <h2>Loading the best webpage ever! Please stand by.</h2>
+    )
+  }
+});
+
+export default Loading;

server/app.py

@@ -259,15 +259,23 @@ def get(self):
 
         #investigation_type
         investigation_summary = dict(db.session.query(Dataset.investigation_type, func.count(Dataset.investigation_type)).group_by(Dataset.investigation_type).all())
+        if None in investigation_summary.keys():
+            del investigation_summary[None]
 
         #counts of each category in library_source (for histograms)
         lib_source_summary = dict(db.session.query(Dataset.library_source, func.count(Dataset.library_source)).group_by(Dataset.library_source).all())
+        if None in lib_source_summary.keys():
+            del lib_source_summary[None]
 
         #env_package
         env_pkg_summary = dict(db.session.query(Dataset.env_package, func.count(Dataset.env_package)).group_by(Dataset.env_package).all())
+        if None in env_pkg_summary.keys():
+            del env_pkg_summary[None]
 
         #collection_date - keep just year for summary for now (might want month for e.g. season searches later on, but default date is 03-13 00:00:00 and need to deal with that)
         year_summary = dict(db.session.query(func.date_format(Dataset.collection_date, '%Y'),func.count(func.date_format(Dataset.collection_date, '%Y'))).group_by(func.date_format(Dataset.collection_date, '%Y')).all())
+        if None in year_summary.keys():
+            del year_summary[None]
 
         #latitude
         lat_summary = dict(db.session.query(Dataset.latitude, func.count(Dataset.latitude)).group_by(Dataset.latitude).all())