From 60e04ab9358aba5dbed6a3779d8fca5b4424360c Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 18 Oct 2018 16:56:08 -0700
Subject: [PATCH 01/19] Create StatisticalSummaryTable component

---
 .../StatisticalSummaryTable.css               |   0
 .../StatisticalSummaryTable.js                | 235 ++++++++++++++++++
 .../__tests__/smoke.js                        |  12 +
 .../StatisticalSummaryTable/package.json      |   6 +
 4 files changed, 253 insertions(+)
 create mode 100644 src/components/StatisticalSummaryTable/StatisticalSummaryTable.css
 create mode 100644 src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
 create mode 100644 src/components/StatisticalSummaryTable/__tests__/smoke.js
 create mode 100644 src/components/StatisticalSummaryTable/package.json

diff --git a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.css b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
new file mode 100644
index 00000000..94929919
--- /dev/null
+++ b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
@@ -0,0 +1,235 @@
+// Statistical Summary Table: Panel containing a Data Table viewer component
+// showing statistical information for each climatology period or timeseries.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Row, Col, Panel } from 'react-bootstrap';
+
+import _ from 'underscore';
+
+import DataTable from '../DataTable/DataTable';
+import TimeOfYearSelector from '../Selector/TimeOfYearSelector';
+import ExportButtons from '../graphs/ExportButtons';
+import { statsTableLabel } from '../guidance-content/info/InformationItems';
+import { MEVSummary } from '../data-presentation/MEVSummary';
+
+import styles from './StatisticalSummaryTable.css';
+import { getStats } from '../../data-services/ce-backend';
+import {
+  parseBootstrapTableData, resolutionIndexToTimeKey, timeKeyToResolutionIndex,
+  validateStatsData
+} from '../../core/util';
+import { displayError, multiYearMeanSelected } from '../graphs/graph-helpers';
+import { exportDataToWorksheet } from '../../core/export';
+
+
+export default class StatisticalSummaryTable extends React.Component {
+  static propTypes = {
+    model_id: PropTypes.string,
+    variable_id: PropTypes.string,
+    experiment: PropTypes.string,
+    area: PropTypes.string,
+    meta: PropTypes.array,
+    contextMeta: PropTypes.array,
+    ensemble_name: PropTypes.string,  // TODO: Why is this declared? Remove?
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dataTableTimeOfYear: 0,
+      dataTableTimeScale: 'monthly',
+      statsData: undefined,
+    };
+  }
+  
+  /*
+   * Called when SingleDataController is first loaded. Selects and fetches
+   * arbitrary initial data to display in the graphs and stats table.
+   * Monthly time resolution, January, on the first run returned by the API.
+   */
+  getData(props) {
+    //if the selected dataset is a multi-year mean, load annual cycle
+    //and long term average graphs, otherwise load a timeseries graph
+    if (multiYearMeanSelected(props)) {
+      this.loadDataTable(props);
+    }
+    else {
+      this.loadDataTable(props, { timeidx: 0, timescale: 'yearly' });
+    }
+  }
+
+  //Removes all data from the Stats Table and displays a message
+  setStatsTableNoDataMessage(message) {
+    this.setState({
+      statsTableOptions: { noDataText: message },
+      statsData: [],
+    });
+  }
+
+  /*
+   * Called when the user selects a time of year to display on the stats
+   * table. Fetches new data, records the new time index and resolution
+   * in state, and updates the table.
+   */
+  updateDataTableTimeOfYear = (timeidx) => {
+    this.loadDataTable(this.props, timeKeyToResolutionIndex(timeidx));
+  }
+
+  /*
+   * This function fetches and loads data for the Stats Table.
+   * If passed a time of year(resolution and index), it will load
+   * data for that time of year. Otherwise, it defaults to January
+   * (resolution: "monthly", index 0).
+   */
+  loadDataTable(props, time) {
+    var timeidx = time ? time.timeidx : this.state.dataTableTimeOfYear;
+    var timeres = time ? time.timescale : this.state.dataTableTimeScale;
+
+    //load stats table
+    this.setStatsTableNoDataMessage('Loading Data');
+    var myStatsPromise = getStats(props, timeidx, timeres).then(validateStatsData);
+
+    myStatsPromise.then(response => {
+      if (_.allKeys(response.data).length > 0) {
+        this.setState({
+          dataTableTimeOfYear: timeidx,
+          dataTableTimeScale: timeres,
+          statsData: parseBootstrapTableData(
+            this.injectRunIntoStats(response.data), props.meta),
+        });
+      }
+      else {
+        this.setState({
+          dataTableTimeOfYear: timeidx,
+          dataTableTimeScale: timeres,
+        });
+        this.setStatsTableNoDataMessage('Statistics unavailable for this time period.');
+      }
+    }).catch(error => {
+      displayError(error, this.setStatsTableNoDataMessage);
+    });
+  }
+
+  // Originally in DataControllerMixin. No mixins in _my_ components!
+  // TODO: Extract to a module and import here.
+
+  verifyParams(props) {
+    var stringPropList = _.values(_.pick(props, 'ensemble_name', 'meta', 'model_id', 'variable_id', 'experiment'));
+    return (stringPropList.length > 0) && stringPropList.every(Boolean);
+  }
+
+  componentDidMount() {
+    if (this.verifyParams(this.props)) {
+      this.getData(this.props);
+    }
+  }
+
+
+  componentWillReceiveProps(nextProps) {
+    if (this.verifyParams(nextProps) && nextProps.meta.length > 0) {
+      this.getData(nextProps);
+    }
+    else { //Didn't receive any valid data.
+      //Most likely cause in production would be the user selecting
+      //parameters (rcp, model, variable) for which no datasets have been
+      //added to the database yet.
+      //In development, could be API or ensemble misconfiguration, database down.
+      //Display an error message on each viewer in use by this datacontroller.
+      var text = "No data matching selected parameters available";
+      var viewerMessageDisplays = [this.setStatsTableNoDataMessage];
+      _.each(viewerMessageDisplays, function(display) {
+        if(typeof display == 'function') {
+          display(text);
+        }
+      });
+    }
+  }
+
+  exportDataTable(format) {
+    exportDataToWorksheet(
+      'stats', this.props, this.state.statsData, format,
+      { timeidx: this.state.dataTableTimeOfYear,
+        timeres: this.state.dataTableTimeScale }
+    );
+  }
+
+  injectRunIntoStats(data) {
+    // Injects model run information into object returned by stats call
+    _.map(data, function (val, key) {
+      var selected = this.props.meta.filter(function (el) {
+        return el.unique_id === key;
+      });
+      _.extend(val, { run: selected[0].ensemble_member });
+    }.bind(this));
+    return data;
+  }
+
+  //Returns the metadata object that corresponds to a unique_id
+  getMetadata(id, meta = this.props.meta) {
+    return _.find(meta, function(m) {return m.unique_id === id;} );
+  }
+
+  // End DataControllerMixin transplants
+
+  shouldComponentUpdate(nextProps, nextState) {
+    // This guards against re-rendering before calls to the data sever alter the
+    // state
+    // TODO: Consider making shallow comparisons. Deep ones are expensive.
+    // If immutable data objects are used (or functionally equivalently,
+    // new data objects each time), then shallow comparison works.
+    return !(
+      _.isEqual(nextState.statsData, this.state.statsData) &&
+      _.isEqual(nextProps.meta, this.props.meta) &&
+      _.isEqual(nextState.statsTableOptions, this.state.statsTableOptions) &&
+      _.isEqual(nextProps.area, this.props.area)
+    );
+  }
+
+  render() {
+    const statsData =
+      // this.state.statsData ? this.state.statsData : this.blankStatsData;
+      this.state.statsData ? this.state.statsData : [];
+
+    const dataTableSelected = resolutionIndexToTimeKey(
+      this.state.dataTableTimeScale,
+      this.state.dataTableTimeOfYear
+    );
+
+    return (
+      <Panel>
+        <Panel.Heading>
+          <Panel.Title>
+            <Row>
+              <Col lg={4}>
+                {statsTableLabel}
+              </Col>
+              <Col lg={8}>
+                <MEVSummary className={styles.mevSummary} {...this.props} />
+              </Col>
+            </Row>
+          </Panel.Title>
+        </Panel.Heading>
+        <Panel.Body className={styles.data_panel}>
+          <Row>
+            <Col lg={6} md={6} sm={6}>
+              <TimeOfYearSelector
+                onChange={this.updateDataTableTimeOfYear}
+                value={dataTableSelected}
+                inlineLabel
+              />
+            </Col>
+            <Col lg={6} md={6} sm={6}>
+              <ExportButtons
+                onExportXlsx={this.exportDataTable.bind(this, 'xlsx')}
+                onExportCsv={this.exportDataTable.bind(this, 'csv')}
+              />
+            </Col>
+          </Row>
+          <DataTable data={statsData} options={this.state.statsTableOptions}/>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
diff --git a/src/components/StatisticalSummaryTable/__tests__/smoke.js b/src/components/StatisticalSummaryTable/__tests__/smoke.js
new file mode 100644
index 00000000..4ae60b6c
--- /dev/null
+++ b/src/components/StatisticalSummaryTable/__tests__/smoke.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Template from '../StatisticalSummaryTable';
+import { noop } from 'underscore';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <Template/>,
+    div
+  );
+});
diff --git a/src/components/StatisticalSummaryTable/package.json b/src/components/StatisticalSummaryTable/package.json
new file mode 100644
index 00000000..210aa4d1
--- /dev/null
+++ b/src/components/StatisticalSummaryTable/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "StatisticalSummaryTable",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./StatisticalSummaryTable.js"
+}

From 5c75f7f99865a0a84879b8d7894882034f325461 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 18 Oct 2018 16:59:25 -0700
Subject: [PATCH 02/19] Use StatisticalSummaryTable in SingleDataController

---
 .../SingleDataController.js                   | 144 ++----------------
 1 file changed, 9 insertions(+), 135 deletions(-)

diff --git a/src/components/data-controllers/SingleDataController/SingleDataController.js b/src/components/data-controllers/SingleDataController/SingleDataController.js
index 3ed21c60..5b527b17 100644
--- a/src/components/data-controllers/SingleDataController/SingleDataController.js
+++ b/src/components/data-controllers/SingleDataController/SingleDataController.js
@@ -37,33 +37,24 @@ import createReactClass from 'create-react-class';
 import { Row, Col, Panel } from 'react-bootstrap';
 import _ from 'underscore';
 
-import { parseBootstrapTableData,
-         timeKeyToResolutionIndex,
-         resolutionIndexToTimeKey,
-         validateStatsData } from '../../../core/util';
-import DataTable from '../../DataTable/DataTable';
-import TimeOfYearSelector from '../../Selector/TimeOfYearSelector';
-import DataControllerMixin from '../../DataControllerMixin';
-import { displayError, multiYearMeanSelected } from '../../graphs/graph-helpers';
 import SingleAnnualCycleGraph from '../../graphs/SingleAnnualCycleGraph';
 import SingleLongTermAveragesGraph from '../../graphs/SingleLongTermAveragesGraph';
 import SingleContextGraph from '../../graphs/SingleContextGraph';
 import SingleTimeSeriesGraph from '../../graphs/SingleTimeSeriesGraph';
-import { getStats } from '../../../data-services/ce-backend';
 import AnomalyAnnualCycleGraph from '../../graphs/AnomalyAnnualCycleGraph';
 import SingleTimeSliceGraph from '../../graphs/SingleTimeSliceGraph';
 import {
   singleAnnualCycleTabLabel, changeFromBaselineTabLabel,
   singleLtaTabLabel, modelContextTabLabel, snapshotTabLabel,
-  timeSeriesTabLabel, statsTableLabel,
+  timeSeriesTabLabel,
   graphsPanelLabel,
 } from '../../guidance-content/info/InformationItems';
 
 import styles from '../DataController.css';
 import { MEVSummary } from '../../data-presentation/MEVSummary';
-import ExportButtons from '../../graphs/ExportButtons';
 import FlowArrow from '../../data-presentation/FlowArrow';
 import GraphTabs from '../GraphTabs';
+import StatisticalSummaryTable from '../../StatisticalSummaryTable';
 
 
 // TODO: Remove DataControllerMixin and convert to class extension style when 
@@ -78,43 +69,10 @@ export default createReactClass({
     area: PropTypes.string,
     meta: PropTypes.array,
     contextMeta: PropTypes.array,
-    ensemble_name: PropTypes.string,
-  },
-
-  mixins: [DataControllerMixin],
-
-  getInitialState: function () {
-    return {
-      dataTableTimeOfYear: 0,
-      dataTableTimeScale: 'monthly',
-      statsData: undefined,
-    };
-  },
-
-  /*
-   * Called when SingleDataController is first loaded. Selects and fetches 
-   * arbitrary initial data to display in the graphs and stats table. 
-   * Monthly time resolution, January, on the first run returned by the API.
-   */
-  getData: function (props) {
-    //if the selected dataset is a multi-year mean, load annual cycle
-    //and long term average graphs, otherwise load a timeseries graph
-    if (multiYearMeanSelected(props)) {
-      this.loadDataTable(props);
-    }
-    else {
-      this.loadDataTable(props, { timeidx: 0, timescale: "yearly" });
-    }
-  },
-
-  //Removes all data from the Stats Table and displays a message
-  setStatsTableNoDataMessage: function (message) {
-    this.setState({
-      statsTableOptions: { noDataText: message },
-      statsData: [],
-    });
+    ensemble_name: PropTypes.string,  // TODO: Why is this declared? Remove?
   },
 
+  // TODO: Is this necessary?
   shouldComponentUpdate: function (nextProps, nextState) {
     // This guards against re-rendering before calls to the data sever alter the
     // state
@@ -122,57 +80,14 @@ export default createReactClass({
     // If immutable data objects are used (or functionally equivalently,
     // new data objects each time), then shallow comparison works.
     return !(
-      _.isEqual(nextState.statsData, this.state.statsData) &&
       _.isEqual(nextProps.meta, this.props.meta) &&
-      _.isEqual(nextState.statsTableOptions, this.state.statsTableOptions) &&
       _.isEqual(nextProps.area, this.props.area)
      );
   },
 
-  /*
-   * Called when the user selects a time of year to display on the stats
-   * table. Fetches new data, records the new time index and resolution
-   * in state, and updates the table.
-   */
-  updateDataTableTimeOfYear: function (timeidx) {
-    this.loadDataTable(this.props, timeKeyToResolutionIndex(timeidx));
-  },
-
-  /*
-   * This function fetches and loads data for the Stats Table. 
-   * If passed a time of year(resolution and index), it will load
-   * data for that time of year. Otherwise, it defaults to January 
-   * (resolution: "monthly", index 0). 
-   */
-  loadDataTable: function (props, time) {
-    
-    var timeidx = time ? time.timeidx : this.state.dataTableTimeOfYear;
-    var timeres = time ? time.timescale : this.state.dataTableTimeScale;
-
-    //load stats table
-    this.setStatsTableNoDataMessage('Loading Data');
-    var myStatsPromise = getStats(props, timeidx, timeres).then(validateStatsData);
-
-    myStatsPromise.then(response => {
-      if (_.allKeys(response.data).length > 0) {
-        this.setState({
-          dataTableTimeOfYear: timeidx,
-          dataTableTimeScale: timeres,
-          statsData: parseBootstrapTableData(this.injectRunIntoStats(response.data), props.meta),
-        });
-      }
-      else {
-        this.setState({
-          dataTableTimeOfYear: timeidx,
-          dataTableTimeScale: timeres,
-        });
-        this.setStatsTableNoDataMessage('Statistics unavailable for this time period.');
-      }
-    }).catch(error => {
-      displayError(error, this.setStatsTableNoDataMessage);
-    });
-  },
-
+  // Spec for generating tabs containing various graphs.
+  // Property names indicate whether the dataset is a multi-year mean or not.
+  // TODO: Pull this out into new component SingleVariableGraphs
   graphTabsSpecs: {
     mym: [
       { title: singleAnnualCycleTabLabel, graph: SingleAnnualCycleGraph },
@@ -187,15 +102,6 @@ export default createReactClass({
   },
 
   render: function () {
-    const statsData = this.state.statsData ? this.state.statsData : this.blankStatsData;
-
-    const dataTableSelected = resolutionIndexToTimeKey(
-      this.state.dataTableTimeScale,
-      this.state.dataTableTimeOfYear
-    );
-
-    // Spec for generating tabs containing various graphs.
-    // Property names indicate whether the dataset is a multi-year mean or not.
     return (
       <div>
         <Panel>
@@ -223,40 +129,8 @@ export default createReactClass({
 
         <FlowArrow>filtered datasets</FlowArrow>
 
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              <Row>
-                <Col lg={4}>
-                  {statsTableLabel}
-                </Col>
-                <Col lg={8}>
-                  <MEVSummary
-                    className={styles.mevSummary} {...this.props}
-                  />
-                </Col>
-              </Row>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body className={styles.data_panel}>
-            <Row>
-              <Col lg={6} md={6} sm={6}>
-                <TimeOfYearSelector
-                  onChange={this.updateDataTableTimeOfYear}
-                  value={dataTableSelected}
-                  inlineLabel
-                />
-              </Col>
-              <Col lg={6} md={6} sm={6}>
-                <ExportButtons
-                  onExportXlsx={this.exportDataTable.bind(this, 'xlsx')}
-                  onExportCsv={this.exportDataTable.bind(this, 'csv')}
-                />
-              </Col>
-            </Row>
-            <DataTable data={statsData} options={this.state.statsTableOptions}/>
-          </Panel.Body>
-        </Panel>
+        <StatisticalSummaryTable {...this.props} />
+
       </div>
     );
   },

From 4148b9129b3537ab1d1cd6bac85f5919b9ca246c Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 18 Oct 2018 17:10:41 -0700
Subject: [PATCH 03/19] Conver SingleDataController to native class extension
 style

---
 .../SingleDataController.js                   | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/data-controllers/SingleDataController/SingleDataController.js b/src/components/data-controllers/SingleDataController/SingleDataController.js
index 5b527b17..a6ac2cff 100644
--- a/src/components/data-controllers/SingleDataController/SingleDataController.js
+++ b/src/components/data-controllers/SingleDataController/SingleDataController.js
@@ -33,7 +33,6 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import { Row, Col, Panel } from 'react-bootstrap';
 import _ from 'underscore';
 
@@ -57,12 +56,8 @@ import GraphTabs from '../GraphTabs';
 import StatisticalSummaryTable from '../../StatisticalSummaryTable';
 
 
-// TODO: Remove DataControllerMixin and convert to class extension style when 
-// no more dependencies on DataControllerMixin remain
-export default createReactClass({
-  displayName: 'SingleDataController',
-
-  propTypes: {
+export default class SingleDataController extends React.Component {
+  static propTypes = {
     model_id: PropTypes.string,
     variable_id: PropTypes.string,
     experiment: PropTypes.string,
@@ -70,10 +65,10 @@ export default createReactClass({
     meta: PropTypes.array,
     contextMeta: PropTypes.array,
     ensemble_name: PropTypes.string,  // TODO: Why is this declared? Remove?
-  },
+  };
 
   // TODO: Is this necessary?
-  shouldComponentUpdate: function (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     // This guards against re-rendering before calls to the data sever alter the
     // state
     // TODO: Consider making shallow comparisons. Deep ones are expensive.
@@ -83,12 +78,12 @@ export default createReactClass({
       _.isEqual(nextProps.meta, this.props.meta) &&
       _.isEqual(nextProps.area, this.props.area)
      );
-  },
+  }
 
   // Spec for generating tabs containing various graphs.
   // Property names indicate whether the dataset is a multi-year mean or not.
   // TODO: Pull this out into new component SingleVariableGraphs
-  graphTabsSpecs: {
+  static graphTabsSpecs = {
     mym: [
       { title: singleAnnualCycleTabLabel, graph: SingleAnnualCycleGraph },
       { title: singleLtaTabLabel, graph: SingleLongTermAveragesGraph },
@@ -99,9 +94,9 @@ export default createReactClass({
     notMym: [
       { title: timeSeriesTabLabel, graph: SingleTimeSeriesGraph },
     ],
-  },
+  };
 
-  render: function () {
+  render() {
     return (
       <div>
         <Panel>
@@ -122,7 +117,7 @@ export default createReactClass({
           <Panel.Body className={styles.data_panel}>
             <GraphTabs
               {...this.props}
-              specs={this.graphTabsSpecs}
+              specs={SingleDataController.graphTabsSpecs}
             />
           </Panel.Body>
         </Panel>
@@ -133,5 +128,5 @@ export default createReactClass({
 
       </div>
     );
-  },
-});
+  }
+}

From 0246820093169e73522313afb729bdaaa7885ac5 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 18 Oct 2018 17:13:02 -0700
Subject: [PATCH 04/19] Add css for StatisticalSummaryTable

---
 .../StatisticalSummaryTable/StatisticalSummaryTable.css        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.css b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.css
index e69de29b..cf25ad0d 100644
--- a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.css
+++ b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.css
@@ -0,0 +1,3 @@
+.mevSummary {
+    text-align: right;
+}

From 3cd27b2afa0ebafe92c92cac00d9bf9418d822b2 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 18 Oct 2018 17:42:24 -0700
Subject: [PATCH 05/19] Remove unnecessary dependency on DataControllerMixin
 from DualDataController

---
 .../DualDataController/DualDataController.js          | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/components/data-controllers/DualDataController/DualDataController.js b/src/components/data-controllers/DualDataController/DualDataController.js
index f9ac44bf..2039c445 100644
--- a/src/components/data-controllers/DualDataController/DualDataController.js
+++ b/src/components/data-controllers/DualDataController/DualDataController.js
@@ -73,17 +73,6 @@ export default createReactClass({
     comparandMeta: PropTypes.array,
   },
 
-  mixins: [DataControllerMixin],
-
-  getInitialState: function () {
-    return {
-      statsData: undefined,
-    };
-  },
-
-  // TODO: Remove when DataControllerMixin is removed
-  getData: function (props) {/* Legacy: NOOP*/},
-
   shouldComponentUpdate: function (nextProps, nextState) {
     // This guards against re-rendering before calls to the data sever alter the
     // state

From 7e41fb88203aaa557826c19d93ccd0060cc0081f Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 18 Oct 2018 17:56:45 -0700
Subject: [PATCH 06/19] Convert DualDataController to native class extension
 style

---
 .../DualDataController/DualDataController.js  | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/components/data-controllers/DualDataController/DualDataController.js b/src/components/data-controllers/DualDataController/DualDataController.js
index 2039c445..57e4eb7f 100644
--- a/src/components/data-controllers/DualDataController/DualDataController.js
+++ b/src/components/data-controllers/DualDataController/DualDataController.js
@@ -37,13 +37,9 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import { Panel, Row, Col } from 'react-bootstrap';
 import _ from 'underscore';
 
-
-import DataControllerMixin from '../../DataControllerMixin';
-
 import DualAnnualCycleGraph from '../../graphs/DualAnnualCycleGraph';
 import DualLongTermAveragesGraph from '../../graphs/DualLongTermAveragesGraph';
 import DualTimeSeriesGraph from '../../graphs/DualTimeSeriesGraph';
@@ -59,10 +55,8 @@ import { MEVSummary } from '../../data-presentation/MEVSummary';
 import GraphTabs from '../GraphTabs';
 
 
-export default createReactClass({
-  displayName: 'DualDataController',
-
-  propTypes: {
+export default class DualDataController extends React.Component {
+  static propTypes = {
     ensemble_name: PropTypes.string,
     model_id: PropTypes.string,
     variable_id: PropTypes.string,
@@ -71,9 +65,9 @@ export default createReactClass({
     area: PropTypes.string,
     meta: PropTypes.array,
     comparandMeta: PropTypes.array,
-  },
+  };
 
-  shouldComponentUpdate: function (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     // This guards against re-rendering before calls to the data sever alter the
     // state
     // TODO: Consider making shallow comparisons. Deep ones are expensive.
@@ -83,9 +77,12 @@ export default createReactClass({
       _.isEqual(nextProps.meta, this.props.meta) &&
       _.isEqual(nextProps.comparandMeta, this.props.comparandMeta) &&
       _.isEqual(nextProps.area, this.props.area));
-  },
+  }
 
-  graphTabsSpecs: {
+  // Spec for generating tabs containing various graphs.
+  // Property names indicate whether the dataset is a multi-year mean or not.
+  // TODO: Pull this out into new component CompareVariablesGraphs
+  static graphTabsSpecs = {
     mym: [
       { title: dualAnnualCycleTabLabel, graph: DualAnnualCycleGraph },
       { title: singleLtaTabLabel, graph: DualLongTermAveragesGraph },
@@ -95,9 +92,9 @@ export default createReactClass({
       { title: timeSeriesTabLabel, graph: DualTimeSeriesGraph },
       { title: variableResponseTabLabel, graph: DualVariableResponseGraph },
     ],
-  },
+  };
 
-  render: function () {
+  render() {
     return (
       <Panel>
           <Panel.Heading>
@@ -117,10 +114,10 @@ export default createReactClass({
           <Panel.Body className={styles.data_panel}>
             <GraphTabs
               {...this.props}
-              specs={this.graphTabsSpecs}
+              specs={DualDataController.graphTabsSpecs}
             />
           </Panel.Body>
         </Panel>
     );
-  },
-});
+  }
+}

From 79c21511e33c0ad0437c5550f39b81edee0c5940 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 18 Oct 2018 18:15:49 -0700
Subject: [PATCH 07/19] Add deprecation notes to DataControllerMixin and
 MotiDataController

---
 .../DataControllerMixin/DataControllerMixin.js         |  9 +++++++++
 .../MotiDataController/MotiDataController.js           | 10 ++++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/components/DataControllerMixin/DataControllerMixin.js b/src/components/DataControllerMixin/DataControllerMixin.js
index 9760de32..26897f64 100644
--- a/src/components/DataControllerMixin/DataControllerMixin.js
+++ b/src/components/DataControllerMixin/DataControllerMixin.js
@@ -1,3 +1,12 @@
+// DEPRECATED: DO NOT MAINTAIN THIS MODULE. REMOVE WHEN SOLE REMAINING
+// DEPENDENCY IS REMOVED.
+//
+// We are moving away from mixins.
+// (see [Mixins Considered Harmful](https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html)
+// This mixin is no longer relevant, since it is only used in the deprecated
+// component MotiDataController. Dependence on it has been removed from all other
+// data controllers.
+
 /*********************************************************************
  * DataControllerMixin.js - shared functionality for data controllers
  * 
diff --git a/src/components/data-controllers/MotiDataController/MotiDataController.js b/src/components/data-controllers/MotiDataController/MotiDataController.js
index 94451569..2bfa12e6 100644
--- a/src/components/data-controllers/MotiDataController/MotiDataController.js
+++ b/src/components/data-controllers/MotiDataController/MotiDataController.js
@@ -1,3 +1,13 @@
+// DEPRECATED: DO NOT MAINTAIN THIS COMPONENT.
+//
+// This component is not currently in use and it has not been kept up to date
+// with changes made to other data controllers. This component is being kept
+// for the sole purpose of keeping a record of what it was intended to do.
+//
+// If and when a MotiDataController is actually needed, it should be created
+// by cloning/interbreeding/genetically modifying one or more of the other data
+// controllers, which are much better structured.
+
 /************************************************************************
  * MotiDataController.js - controller to display summarized numerical data 
  *

From 769f2861a1feb812ebe5ea3b64da44e5545979f3 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 18 Oct 2018 18:29:42 -0700
Subject: [PATCH 08/19] Clean up StatsTableSummary code

---
 .../StatisticalSummaryTable.js                | 45 +++++++------------
 1 file changed, 16 insertions(+), 29 deletions(-)

diff --git a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
index 94929919..aa80bc12 100644
--- a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
+++ b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
@@ -17,7 +17,7 @@ import styles from './StatisticalSummaryTable.css';
 import { getStats } from '../../data-services/ce-backend';
 import {
   parseBootstrapTableData, resolutionIndexToTimeKey, timeKeyToResolutionIndex,
-  validateStatsData
+  validateStatsData,
 } from '../../core/util';
 import { displayError, multiYearMeanSelected } from '../graphs/graph-helpers';
 import { exportDataToWorksheet } from '../../core/export';
@@ -54,8 +54,7 @@ export default class StatisticalSummaryTable extends React.Component {
     //and long term average graphs, otherwise load a timeseries graph
     if (multiYearMeanSelected(props)) {
       this.loadDataTable(props);
-    }
-    else {
+    } else {
       this.loadDataTable(props, { timeidx: 0, timescale: 'yearly' });
     }
   }
@@ -84,12 +83,12 @@ export default class StatisticalSummaryTable extends React.Component {
    * (resolution: "monthly", index 0).
    */
   loadDataTable(props, time) {
-    var timeidx = time ? time.timeidx : this.state.dataTableTimeOfYear;
-    var timeres = time ? time.timescale : this.state.dataTableTimeScale;
+    const timeidx = time ? time.timeidx : this.state.dataTableTimeOfYear;
+    const timeres = time ? time.timescale : this.state.dataTableTimeScale;
 
     //load stats table
     this.setStatsTableNoDataMessage('Loading Data');
-    var myStatsPromise = getStats(props, timeidx, timeres).then(validateStatsData);
+    const myStatsPromise = getStats(props, timeidx, timeres).then(validateStatsData);
 
     myStatsPromise.then(response => {
       if (_.allKeys(response.data).length > 0) {
@@ -99,8 +98,7 @@ export default class StatisticalSummaryTable extends React.Component {
           statsData: parseBootstrapTableData(
             this.injectRunIntoStats(response.data), props.meta),
         });
-      }
-      else {
+      } else {
         this.setState({
           dataTableTimeOfYear: timeidx,
           dataTableTimeScale: timeres,
@@ -112,11 +110,8 @@ export default class StatisticalSummaryTable extends React.Component {
     });
   }
 
-  // Originally in DataControllerMixin. No mixins in _my_ components!
-  // TODO: Extract to a module and import here.
-
   verifyParams(props) {
-    var stringPropList = _.values(_.pick(props, 'ensemble_name', 'meta', 'model_id', 'variable_id', 'experiment'));
+    const stringPropList = _.values(_.pick(props, 'ensemble_name', 'meta', 'model_id', 'variable_id', 'experiment'));
     return (stringPropList.length > 0) && stringPropList.every(Boolean);
   }
 
@@ -126,21 +121,19 @@ export default class StatisticalSummaryTable extends React.Component {
     }
   }
 
-
   componentWillReceiveProps(nextProps) {
     if (this.verifyParams(nextProps) && nextProps.meta.length > 0) {
       this.getData(nextProps);
-    }
-    else { //Didn't receive any valid data.
+    } else { //Didn't receive any valid data.
       //Most likely cause in production would be the user selecting
-      //parameters (rcp, model, variable) for which no datasets have been
+      //parameters (rcp, model, constiable) for which no datasets have been
       //added to the database yet.
       //In development, could be API or ensemble misconfiguration, database down.
       //Display an error message on each viewer in use by this datacontroller.
-      var text = "No data matching selected parameters available";
-      var viewerMessageDisplays = [this.setStatsTableNoDataMessage];
-      _.each(viewerMessageDisplays, function(display) {
-        if(typeof display == 'function') {
+      const text = 'No data matching selected parameters available';
+      const viewerMessageDisplays = [this.setStatsTableNoDataMessage];
+      _.each(viewerMessageDisplays, function (display) {
+        if (typeof display === 'function') {
           display(text);
         }
       });
@@ -158,9 +151,7 @@ export default class StatisticalSummaryTable extends React.Component {
   injectRunIntoStats(data) {
     // Injects model run information into object returned by stats call
     _.map(data, function (val, key) {
-      var selected = this.props.meta.filter(function (el) {
-        return el.unique_id === key;
-      });
+      const selected = this.props.meta.filter(el => el.unique_id === key);
       _.extend(val, { run: selected[0].ensemble_member });
     }.bind(this));
     return data;
@@ -168,11 +159,9 @@ export default class StatisticalSummaryTable extends React.Component {
 
   //Returns the metadata object that corresponds to a unique_id
   getMetadata(id, meta = this.props.meta) {
-    return _.find(meta, function(m) {return m.unique_id === id;} );
+    return _.find(meta, { unique_id: id });
   }
 
-  // End DataControllerMixin transplants
-
   shouldComponentUpdate(nextProps, nextState) {
     // This guards against re-rendering before calls to the data sever alter the
     // state
@@ -188,9 +177,7 @@ export default class StatisticalSummaryTable extends React.Component {
   }
 
   render() {
-    const statsData =
-      // this.state.statsData ? this.state.statsData : this.blankStatsData;
-      this.state.statsData ? this.state.statsData : [];
+    const statsData = this.state.statsData ? this.state.statsData : [];
 
     const dataTableSelected = resolutionIndexToTimeKey(
       this.state.dataTableTimeScale,

From 2e707219c7f869d1dff5cad4f06ec895553a68f1 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 11:51:03 -0800
Subject: [PATCH 09/19] Comment src/core/util

---
 src/core/util.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/core/util.js b/src/core/util.js
index e23433f9..7c156ec6 100644
--- a/src/core/util.js
+++ b/src/core/util.js
@@ -236,6 +236,10 @@ export function timeResolutionIndexToTimeOfYear(res, idx) {
 }
 
 export function timeResolutions(meta) {
+  // Given an array of (standard) metadata,
+  // return an object containing flags indicating whether each of the
+  // 3 standard timescales are present in the datasets described by
+  // the metadata.
   const timescales = _.pluck(meta, 'timescale');
   return {
     monthly: _.contains(timescales, 'monthly'),
@@ -245,6 +249,10 @@ export function timeResolutions(meta) {
 }
 
 export function defaultTimeOfYear({ monthly, seasonal, yearly }) {
+  // Given a set of flags indicating the timescales present,
+  // return an object giving the default timescale and time index.
+  // The default timescale is the highest-resolution one present;
+  // the default time index is the first item in the default timescale.
   if (monthly) {
     return 0;  // January
   }

From b2f8a359da1c5dcc3bdc5c70bece5afec7eea7e8 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 11:52:03 -0800
Subject: [PATCH 10/19] Make ce-backend function signatures uniform

---
 src/data-services/ce-backend.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/data-services/ce-backend.js b/src/data-services/ce-backend.js
index ca4976c8..43374e28 100644
--- a/src/data-services/ce-backend.js
+++ b/src/data-services/ce-backend.js
@@ -59,8 +59,9 @@ function getData(
   });
 }
 
+// TODO: getTimeseries, getData and getStats are almost identical. Factor.
 function getStats (
-    { ensemble_name, model_id, variable_id, experiment, area }, timeidx, timeres
+    { ensemble_name, model_id, variable_id, experiment, timescale, timeidx, area }
 ) {
   // Query the "multistats" API endpoint.
   // Gets an object from each qualifying dataset file with the following
@@ -78,18 +79,18 @@ function getStats (
   //      modtime (last time dataset was modified)
   //    }
   //  }
-  const emissionString = guessExperimentFormatFromVariable(variable_id, experiment);
+  const emission = guessExperimentFormatFromVariable(variable_id, experiment);
   return axios({
     baseURL: urljoin(CE_BACKEND_URL, 'multistats'),
     params: {
       ensemble_name: ensemble_name,
       model: model_id,
       variable: variable_id,
-      emission: emissionString,
-      area: area || null,
+      emission,
       time: timeidx,
-      timescale: timeres
-    }
+      timescale,
+      area: area || null,
+    },
   });
 }
 

From f27b052187c0cc09588e5842e04e307677b64e02 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 11:53:22 -0800
Subject: [PATCH 11/19] Refactor StatisticalSummaryTable to React 16+
 standards; fix ToY error

---
 .../StatisticalSummaryTable.js                | 229 +++++++++---------
 1 file changed, 111 insertions(+), 118 deletions(-)

diff --git a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
index aa80bc12..44edd91a 100644
--- a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
+++ b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
@@ -16,10 +16,17 @@ import { MEVSummary } from '../data-presentation/MEVSummary';
 import styles from './StatisticalSummaryTable.css';
 import { getStats } from '../../data-services/ce-backend';
 import {
-  parseBootstrapTableData, resolutionIndexToTimeKey, timeKeyToResolutionIndex,
+  defaultTimeOfYear,
+  parseBootstrapTableData,
+  timeKeyToResolutionIndex,
+  timeResolutions,
   validateStatsData,
 } from '../../core/util';
-import { displayError, multiYearMeanSelected } from '../graphs/graph-helpers';
+
+// TODO: Replace stub with import when new code integrated from LTA graph fix
+// import { errorMessage } from '../graphs/graph-helpers';
+const errorMessage = () => 'Error fetching data.';  // Temporary stub.
+
 import { exportDataToWorksheet } from '../../core/export';
 
 
@@ -34,121 +41,75 @@ export default class StatisticalSummaryTable extends React.Component {
     ensemble_name: PropTypes.string,  // TODO: Why is this declared? Remove?
   };
 
+  // Lifecycle hooks
+  // Follows React 16+ lifecycle API and recommendations.
+  // See https://reactjs.org/blog/2018/03/29/react-v-16-3.html
+  // See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
+  // See https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
+
   constructor(props) {
     super(props);
 
     this.state = {
-      dataTableTimeOfYear: 0,
-      dataTableTimeScale: 'monthly',
-      statsData: undefined,
+      prevMeta: null,
+      prevArea: null,
+      timeOfYear: defaultTimeOfYear(timeResolutions(this.props.meta)),
+      data: null,
+      dataError: null,
     };
   }
-  
-  /*
-   * Called when SingleDataController is first loaded. Selects and fetches
-   * arbitrary initial data to display in the graphs and stats table.
-   * Monthly time resolution, January, on the first run returned by the API.
-   */
-  getData(props) {
-    //if the selected dataset is a multi-year mean, load annual cycle
-    //and long term average graphs, otherwise load a timeseries graph
-    if (multiYearMeanSelected(props)) {
-      this.loadDataTable(props);
-    } else {
-      this.loadDataTable(props, { timeidx: 0, timescale: 'yearly' });
-    }
-  }
 
-  //Removes all data from the Stats Table and displays a message
-  setStatsTableNoDataMessage(message) {
-    this.setState({
-      statsTableOptions: { noDataText: message },
-      statsData: [],
-    });
-  }
+  static getDerivedStateFromProps(props, state) {
+    if (
+      props.meta !== state.prevMeta ||
+      props.area !== state.prevArea
+    ) {
+      return {
+        prevMeta: props.meta,
+        prevArea: props.area,
+        timeOfYear: defaultTimeOfYear(timeResolutions(props.meta)),
+        data: null,  // Signal that data fetch is required
+        dataError: null,
+      };
+    }
 
-  /*
-   * Called when the user selects a time of year to display on the stats
-   * table. Fetches new data, records the new time index and resolution
-   * in state, and updates the table.
-   */
-  updateDataTableTimeOfYear = (timeidx) => {
-    this.loadDataTable(this.props, timeKeyToResolutionIndex(timeidx));
+    // No state update necessary.
+    return null;
   }
 
-  /*
-   * This function fetches and loads data for the Stats Table.
-   * If passed a time of year(resolution and index), it will load
-   * data for that time of year. Otherwise, it defaults to January
-   * (resolution: "monthly", index 0).
-   */
-  loadDataTable(props, time) {
-    const timeidx = time ? time.timeidx : this.state.dataTableTimeOfYear;
-    const timeres = time ? time.timescale : this.state.dataTableTimeScale;
-
-    //load stats table
-    this.setStatsTableNoDataMessage('Loading Data');
-    const myStatsPromise = getStats(props, timeidx, timeres).then(validateStatsData);
-
-    myStatsPromise.then(response => {
-      if (_.allKeys(response.data).length > 0) {
-        this.setState({
-          dataTableTimeOfYear: timeidx,
-          dataTableTimeScale: timeres,
-          statsData: parseBootstrapTableData(
-            this.injectRunIntoStats(response.data), props.meta),
-        });
-      } else {
-        this.setState({
-          dataTableTimeOfYear: timeidx,
-          dataTableTimeScale: timeres,
-        });
-        this.setStatsTableNoDataMessage('Statistics unavailable for this time period.');
-      }
-    }).catch(error => {
-      displayError(error, this.setStatsTableNoDataMessage);
-    });
-  }
-
-  verifyParams(props) {
-    const stringPropList = _.values(_.pick(props, 'ensemble_name', 'meta', 'model_id', 'variable_id', 'experiment'));
-    return (stringPropList.length > 0) && stringPropList.every(Boolean);
+  componentDidMount() {
+    this.fetchData();
   }
 
-  componentDidMount() {
-    if (this.verifyParams(this.props)) {
-      this.getData(this.props);
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      // props changed => data invalid
+      this.state.data === null ||
+      // user selected new time of year
+      this.state.timeOfYear !== prevState.timeOfYear
+    ) {
+      this.fetchData();
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.verifyParams(nextProps) && nextProps.meta.length > 0) {
-      this.getData(nextProps);
-    } else { //Didn't receive any valid data.
-      //Most likely cause in production would be the user selecting
-      //parameters (rcp, model, constiable) for which no datasets have been
-      //added to the database yet.
-      //In development, could be API or ensemble misconfiguration, database down.
-      //Display an error message on each viewer in use by this datacontroller.
-      const text = 'No data matching selected parameters available';
-      const viewerMessageDisplays = [this.setStatsTableNoDataMessage];
-      _.each(viewerMessageDisplays, function (display) {
-        if (typeof display === 'function') {
-          display(text);
-        }
-      });
+  componentWillUnmount() {
+    if (this.dataRequest) {
+      this.dataRequest.cancel();
     }
   }
 
-  exportDataTable(format) {
-    exportDataToWorksheet(
-      'stats', this.props, this.state.statsData, format,
-      { timeidx: this.state.dataTableTimeOfYear,
-        timeres: this.state.dataTableTimeScale }
+  // Data fetching
+
+  getAndValidateData(metadata) {
+    return (
+      getStats(metadata)
+      .then(validateStatsData)
+      .then(response => response.data)
     );
   }
 
   injectRunIntoStats(data) {
+    // TODO: Make this into a pure function
     // Injects model run information into object returned by stats call
     _.map(data, function (val, key) {
       const selected = this.props.meta.filter(el => el.unique_id === key);
@@ -157,33 +118,61 @@ export default class StatisticalSummaryTable extends React.Component {
     return data;
   }
 
-  //Returns the metadata object that corresponds to a unique_id
-  getMetadata(id, meta = this.props.meta) {
-    return _.find(meta, { unique_id: id });
+  fetchData() {
+    const metadata = {
+      ..._.pick(this.props,
+        'ensemble_name', 'model_id', 'variable_id', 'experiment', 'area'),
+      ...timeKeyToResolutionIndex(this.state.timeOfYear),
+    };
+    this.getAndValidateData(metadata)
+    .then(data => {
+      this.setState({
+        data: parseBootstrapTableData(
+          this.injectRunIntoStats(data), this.props.meta),
+        dataError: null,
+      });
+    }).catch(dataError => {
+      this.setState({
+        // Do we have to set data non-null here to prevent infinite update loop?
+        dataError,
+      });
+    });
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    // This guards against re-rendering before calls to the data sever alter the
-    // state
-    // TODO: Consider making shallow comparisons. Deep ones are expensive.
-    // If immutable data objects are used (or functionally equivalently,
-    // new data objects each time), then shallow comparison works.
-    return !(
-      _.isEqual(nextState.statsData, this.state.statsData) &&
-      _.isEqual(nextProps.meta, this.props.meta) &&
-      _.isEqual(nextState.statsTableOptions, this.state.statsTableOptions) &&
-      _.isEqual(nextProps.area, this.props.area)
+  // User event handlers
+
+  handleChangeTimeOfYear = (timeOfYear) => {
+    this.setState({ timeOfYear });
+  };
+
+  exportDataTable(format) {
+    exportDataToWorksheet(
+      'stats', this.props, this.state.data, format,
+      { timeidx: this.state.timeOfYear,
+        timeres: this.state.dataTableTimeScale }
     );
   }
 
-  render() {
-    const statsData = this.state.statsData ? this.state.statsData : [];
+  // render helpers
 
-    const dataTableSelected = resolutionIndexToTimeKey(
-      this.state.dataTableTimeScale,
-      this.state.dataTableTimeOfYear
-    );
+  dataTableOptions() {
+    // Return a data table options object appropriate to the current state.
 
+    // An error occurred
+    if (this.state.dataError) {
+      return { noDataText: errorMessage(this.state.dataError) };
+    }
+
+    // Waiting for data
+    if (this.state.data === null) {
+      return { noDataText: 'Loading data...' };
+    }
+
+    // We can haz data
+    return { noDataText: 'We have data and this message should not show' };
+  }
+
+  render() {
     return (
       <Panel>
         <Panel.Heading>
@@ -202,8 +191,9 @@ export default class StatisticalSummaryTable extends React.Component {
           <Row>
             <Col lg={6} md={6} sm={6}>
               <TimeOfYearSelector
-                onChange={this.updateDataTableTimeOfYear}
-                value={dataTableSelected}
+                value={this.state.timeOfYear}
+                onChange={this.handleChangeTimeOfYear}
+                {...timeResolutions(this.props.meta)}
                 inlineLabel
               />
             </Col>
@@ -214,7 +204,10 @@ export default class StatisticalSummaryTable extends React.Component {
               />
             </Col>
           </Row>
-          <DataTable data={statsData} options={this.state.statsTableOptions}/>
+          <DataTable
+            data={this.state.data || []}
+            options={this.dataTableOptions()}
+          />
         </Panel.Body>
       </Panel>
     );

From b39166ea71b2cca5741cfd2fa593800b742c596f Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 11:54:49 -0800
Subject: [PATCH 12/19] Modify DataControllerMixin; not sure why, but things
 work

---
 src/components/DataControllerMixin/DataControllerMixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DataControllerMixin/DataControllerMixin.js b/src/components/DataControllerMixin/DataControllerMixin.js
index 26897f64..a5e508c4 100644
--- a/src/components/DataControllerMixin/DataControllerMixin.js
+++ b/src/components/DataControllerMixin/DataControllerMixin.js
@@ -56,7 +56,7 @@ var ModalMixin = {
       //In development, could be API or ensemble misconfiguration, database down.
       //Display an error message on each viewer in use by this datacontroller.
       var text = "No data matching selected parameters available";
-      var viewerMessageDisplays = [this.setStatsTableNoDataMessage];
+      var viewerMessageDisplays = [this.displayNoDataMessage];
       _.each(viewerMessageDisplays, function(display) {
         if(typeof display == 'function') {
           display(text);

From 73b1a0798652b34c94fb285c8ded898c77edf966 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 12:05:49 -0800
Subject: [PATCH 13/19] Code cleanup

---
 .../StatisticalSummaryTable/StatisticalSummaryTable.js           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
index 44edd91a..05e5a3a9 100644
--- a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
+++ b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
@@ -38,7 +38,6 @@ export default class StatisticalSummaryTable extends React.Component {
     area: PropTypes.string,
     meta: PropTypes.array,
     contextMeta: PropTypes.array,
-    ensemble_name: PropTypes.string,  // TODO: Why is this declared? Remove?
   };
 
   // Lifecycle hooks

From d6722e9d934016f08dbb569c561e06001c3a9771 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 12:12:15 -0800
Subject: [PATCH 14/19] Add TODOs to data controllers

---
 .../data-controllers/DualDataController/DualDataController.js  | 3 ++-
 .../SingleDataController/SingleDataController.js               | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/data-controllers/DualDataController/DualDataController.js b/src/components/data-controllers/DualDataController/DualDataController.js
index 57e4eb7f..11533e22 100644
--- a/src/components/data-controllers/DualDataController/DualDataController.js
+++ b/src/components/data-controllers/DualDataController/DualDataController.js
@@ -57,7 +57,7 @@ import GraphTabs from '../GraphTabs';
 
 export default class DualDataController extends React.Component {
   static propTypes = {
-    ensemble_name: PropTypes.string,
+    ensemble_name: PropTypes.string,  // TODO: Why is this declared? Remove?
     model_id: PropTypes.string,
     variable_id: PropTypes.string,
     comparand_id: PropTypes.string,
@@ -96,6 +96,7 @@ export default class DualDataController extends React.Component {
 
   render() {
     return (
+      // TODO: https://github.com/pacificclimate/climate-explorer-frontend/issues/246
       <Panel>
           <Panel.Heading>
             <Panel.Title>
diff --git a/src/components/data-controllers/SingleDataController/SingleDataController.js b/src/components/data-controllers/SingleDataController/SingleDataController.js
index a6ac2cff..676d8fa1 100644
--- a/src/components/data-controllers/SingleDataController/SingleDataController.js
+++ b/src/components/data-controllers/SingleDataController/SingleDataController.js
@@ -99,6 +99,7 @@ export default class SingleDataController extends React.Component {
   render() {
     return (
       <div>
+        // TODO: https://github.com/pacificclimate/climate-explorer-frontend/issues/246
         <Panel>
           <Panel.Heading>
             <Panel.Title>

From 6cb9bc813cebe396281ee5bac7c5a64ecfa46071 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 13:54:41 -0800
Subject: [PATCH 15/19] Fix StatisticalSummaryTable smoke test

---
 .../StatisticalSummaryTable/__tests__/smoke.js         | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/StatisticalSummaryTable/__tests__/smoke.js b/src/components/StatisticalSummaryTable/__tests__/smoke.js
index 4ae60b6c..51e5d0d3 100644
--- a/src/components/StatisticalSummaryTable/__tests__/smoke.js
+++ b/src/components/StatisticalSummaryTable/__tests__/smoke.js
@@ -1,12 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Template from '../StatisticalSummaryTable';
+import StatisticalSummaryTable from '../StatisticalSummaryTable';
 import { noop } from 'underscore';
+import { meta } from '../../../test_support/data';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(
-    <Template/>,
+    <StatisticalSummaryTable
+      model_id={'GFDL-ESM2G'}
+      variable_id={'tasmax'}
+      experiment={'historical,rcp26'}
+      meta={meta}
+    />,
     div
   );
 });

From a434d4e40b44bf033e1f2bbe0b83cca5bdee1f4c Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 13:57:13 -0800
Subject: [PATCH 16/19] Clean up DataTable code

---
 src/components/DataTable/DataTable.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/DataTable/DataTable.js b/src/components/DataTable/DataTable.js
index 6ea47c2f..cf99d58f 100644
--- a/src/components/DataTable/DataTable.js
+++ b/src/components/DataTable/DataTable.js
@@ -5,12 +5,18 @@ import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
 class DataTable extends React.Component {
   static propTypes = {
     data: PropTypes.array,
+    options: PropTypes.object,
   };
 
   render() {
     return (
       <div id={'table'}>
-        <BootstrapTable data={this.props.data} options={this.props.options} striped hover >
+        <BootstrapTable
+          data={this.props.data}
+          options={this.props.options}
+          striped
+          hover
+        >
           <TableHeaderColumn
             dataField='run'
             dataAlign='center'

From d1f12a1080b2edbf9f305425f5305b37418e2ccf Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 14:59:49 -0800
Subject: [PATCH 17/19] Remove erroneous promise "cancel" when SST component
 unmounts

---
 .../StatisticalSummaryTable/StatisticalSummaryTable.js      | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
index 05e5a3a9..9e0f504c 100644
--- a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
+++ b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
@@ -91,12 +91,6 @@ export default class StatisticalSummaryTable extends React.Component {
     }
   }
 
-  componentWillUnmount() {
-    if (this.dataRequest) {
-      this.dataRequest.cancel();
-    }
-  }
-
   // Data fetching
 
   getAndValidateData(metadata) {

From 91a21cb062c2c6daeea7494d89ed7f8c23cca43d Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Thu, 6 Dec 2018 15:17:30 -0800
Subject: [PATCH 18/19] Fix stupid comment placement

---
 .../SingleDataController/SingleDataController.js                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/data-controllers/SingleDataController/SingleDataController.js b/src/components/data-controllers/SingleDataController/SingleDataController.js
index 676d8fa1..cb9fd9ce 100644
--- a/src/components/data-controllers/SingleDataController/SingleDataController.js
+++ b/src/components/data-controllers/SingleDataController/SingleDataController.js
@@ -98,8 +98,8 @@ export default class SingleDataController extends React.Component {
 
   render() {
     return (
+      // TODO: https://github.com/pacificclimate/climate-explorer-frontend/issues/246
       <div>
-        // TODO: https://github.com/pacificclimate/climate-explorer-frontend/issues/246
         <Panel>
           <Panel.Heading>
             <Panel.Title>

From c690e8ba9ee56334c1cfe7b2678cfc0005efbbd9 Mon Sep 17 00:00:00 2001
From: Rod Glover <rglover@uvic.ca>
Date: Fri, 7 Dec 2018 16:33:16 -0800
Subject: [PATCH 19/19] Use real errorMessage function

---
 .../StatisticalSummaryTable/StatisticalSummaryTable.js      | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
index 9e0f504c..53ee8b89 100644
--- a/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
+++ b/src/components/StatisticalSummaryTable/StatisticalSummaryTable.js
@@ -22,11 +22,7 @@ import {
   timeResolutions,
   validateStatsData,
 } from '../../core/util';
-
-// TODO: Replace stub with import when new code integrated from LTA graph fix
-// import { errorMessage } from '../graphs/graph-helpers';
-const errorMessage = () => 'Error fetching data.';  // Temporary stub.
-
+import { errorMessage } from '../graphs/graph-helpers';
 import { exportDataToWorksheet } from '../../core/export';