From e81eb752cba5aee3479eee9c8739614d6981e73e Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 23 Mar 2018 12:40:31 -0700
Subject: [PATCH] fix bug with fieldNames not updating in time for calculating
 column size

---
 ui/src/dashboards/components/TableOptions.tsx |  2 --
 ui/src/shared/components/LineGraph.js         | 11 ++++------
 ui/src/shared/components/TableGraph.js        | 20 ++++++++++---------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 01b75cf7a..3bc50a5f5 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -140,8 +140,6 @@ export class TableOptions extends PureComponent<Props, {}> {
     return tableOptionsDifferent || dataLabelsDifferent
   }
 
-  public handleToggleTextWrapping = () => {}
-
   public render() {
     const {
       tableOptions: {timeFormat, fieldNames, verticalTimeAxis, fixFirstColumn},
diff --git a/ui/src/shared/components/LineGraph.js b/ui/src/shared/components/LineGraph.js
index a7cabea3a..8238da7ab 100644
--- a/ui/src/shared/components/LineGraph.js
+++ b/ui/src/shared/components/LineGraph.js
@@ -122,7 +122,7 @@ class LineGraph extends Component {
           staticLegend={staticLegend}
           isGraphFilled={showSingleStat ? false : isGraphFilled}
         >
-          {showSingleStat && (
+          {showSingleStat &&
             <SingleStat
               prefix={prefix}
               suffix={suffix}
@@ -130,27 +130,24 @@ class LineGraph extends Component {
               lineGraph={true}
               colors={colors}
               cellHeight={cellHeight}
-            />
-          )}
+            />}
         </Dygraph>
       </div>
     )
   }
 }
 
-const GraphLoadingDots = () => (
+const GraphLoadingDots = () =>
   <div className="graph-panel__refreshing">
     <div />
     <div />
     <div />
   </div>
-)
 
-const GraphSpinner = () => (
+const GraphSpinner = () =>
   <div className="graph-fetching">
     <div className="graph-spinner" />
   </div>
-)
 
 const {array, arrayOf, bool, func, number, shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 8e5c113e6..c590b57af 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -195,10 +195,14 @@ class TableGraph extends Component {
   calculateColumnWidth = columnSizerWidth => column => {
     const {index} = column
     const {tableOptions: {verticalTimeAxis, fieldNames}} = this.props
-    const {timeColumnWidth} = this.state
+    const {timeColumnWidth, processedData} = this.state
 
-    if (fieldNames.length > 0) {
-      return verticalTimeAxis && fieldNames[index].internalName === 'time'
+    const labels = verticalTimeAxis
+      ? _.unzip(processedData)[0]
+      : processedData[0]
+
+    if (labels.length > 0) {
+      return verticalTimeAxis && labels[index] === 'time'
         ? timeColumnWidth
         : columnSizerWidth
     }
@@ -342,14 +346,14 @@ class TableGraph extends Component {
         ref={gridContainer => (this.gridContainer = gridContainer)}
         onMouseOut={this.handleMouseOut}
       >
-        {rowCount > 0 && (
+        {rowCount > 0 &&
           <ColumnSizer
             columnCount={columnCount}
             columnMaxWidth={COLUMN_MAX_WIDTH}
             columnMinWidth={COLUMN_MIN_WIDTH}
             width={tableWidth}
           >
-            {({getColumnWidth, registerChild}) => (
+            {({getColumnWidth, registerChild}) =>
               <MultiGrid
                 ref={registerChild}
                 columnCount={columnCount}
@@ -373,10 +377,8 @@ class TableGraph extends Component {
                 colors={colors}
                 tableOptions={tableOptions}
                 classNameBottomRightGrid="table-graph--scroll-window"
-              />
-            )}
-          </ColumnSizer>
-        )}
+              />}
+          </ColumnSizer>}
       </div>
     )
   }