Perform expensive transformation for csv data at time of request

ui/src/shared/components/AutoRefresh.tsx

@@ -4,7 +4,6 @@ import _ from 'lodash'
 import {fetchTimeSeries} from 'src/shared/apis/query'
 import {DEFAULT_TIME_SERIES} from 'src/shared/constants/series'
 import {TimeSeriesServerResponse, TimeSeriesResponse} from 'src/types/series'
-import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers'
 
 interface Axes {
   bounds: {
@@ -131,8 +130,7 @@ const AutoRefresh = (
         })
 
         if (grabDataForDownload) {
-          const {data} = timeSeriesToTableGraph(newSeries)
+          grabDataForDownload(newSeries)
-          grabDataForDownload(data)
         }
       } catch (err) {
         console.error(err)

ui/src/shared/components/Layout.js

@@ -23,11 +23,11 @@ const getSource = (cell, source, sources, defaultSource) => {
 @ErrorHandling
 class LayoutState extends Component {
   state = {
-    celldata: [[]],
+    cellData: [],
   }
 
-  grabDataForDownload = celldata => {
+  grabDataForDownload = cellData => {
-    this.setState({celldata})
+    this.setState({cellData})
   }
 
   render() {
@@ -59,7 +59,7 @@ const Layout = (
     source,
     sources,
     onZoom,
-    celldata,
+    cellData,
     templates,
     timeRange,
     isEditable,
@@ -79,7 +79,7 @@ const Layout = (
 ) => (
   <LayoutCell
     cell={cell}
-    celldata={celldata}
+    cellData={cellData}
     isEditable={isEditable}
     onEditCell={onEditCell}
     onCloneCell={onCloneCell}
@@ -122,7 +122,7 @@ const Layout = (
   </LayoutCell>
 )
 
-const {array, arrayOf, bool, func, number, shape, string} = PropTypes
+const {arrayOf, bool, func, number, shape, string} = PropTypes
 
 Layout.contextTypes = {
   source: shape(),
@@ -200,7 +200,7 @@ LayoutState.propTypes = {...propTypes}
 Layout.propTypes = {
   ...propTypes,
   grabDataForDownload: func,
-  celldata: arrayOf(array),
+  cellData: arrayOf(shape({})),
 }
 
 export default LayoutState

ui/src/shared/components/LayoutCell.js

@@ -11,6 +11,7 @@ import {notifyCSVDownloadFailed} from 'src/shared/copy/notifications'
 import download from 'src/external/download.js'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {dataToCSV} from 'src/shared/parsing/dataToCSV'
+import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers'
 
 @ErrorHandling
 class LayoutCell extends Component {
@@ -24,9 +25,11 @@ class LayoutCell extends Component {
 
   handleCSVDownload = cell => () => {
     const joinedName = cell.name.split(' ').join('_')
-    const {celldata} = this.props
+    const {cellData} = this.props
+    const {data} = timeSeriesToTableGraph(cellData)
+
     try {
-      download(dataToCSV(celldata), `${joinedName}.csv`, 'text/plain')
+      download(dataToCSV(data), `${joinedName}.csv`, 'text/plain')
     } catch (error) {
       notify(notifyCSVDownloadFailed())
       console.error(error)
@@ -34,7 +37,7 @@ class LayoutCell extends Component {
   }
 
   render() {
-    const {cell, children, isEditable, celldata, onCloneCell} = this.props
+    const {cell, children, isEditable, cellData, onCloneCell} = this.props
 
     const queries = _.get(cell, ['queries'], [])
 
@@ -49,7 +52,7 @@ class LayoutCell extends Component {
           <LayoutCellMenu
             cell={cell}
             queries={queries}
-            dataExists={!!celldata.length}
+            dataExists={!!cellData.length}
             isEditable={isEditable}
             onDelete={this.handleDeleteCell}
             onEdit={this.handleSummonOverlay}
@@ -79,7 +82,7 @@ class LayoutCell extends Component {
   }
 }
 
-const {array, arrayOf, bool, func, node, number, shape, string} = PropTypes
+const {arrayOf, bool, func, node, number, shape, string} = PropTypes
 
 LayoutCell.propTypes = {
   cell: shape({
@@ -96,7 +99,7 @@ LayoutCell.propTypes = {
   onSummonOverlayTechnologies: func,
   isEditable: bool,
   onCancelEditCell: func,
-  celldata: arrayOf(array),
+  cellData: arrayOf(shape({})),
 }
 
 export default LayoutCell