From cb80c8a5361820f46bd4711221145bde02312eab Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 15 Mar 2018 17:35:59 -0700
Subject: [PATCH 01/38] add visible to TableColumn in backend and fix tests
 accordingly

---
 bolt/internal/internal.go    |   4 +
 bolt/internal/internal.pb.go | 208 ++++++++++++++++++-----------------
 bolt/internal/internal.proto |   1 +
 chronograf.go                |   1 +
 integrations/server_test.go  |   7 +-
 server/cells_test.go         |   2 +-
 6 files changed, 120 insertions(+), 103 deletions(-)

diff --git a/bolt/internal/internal.go b/bolt/internal/internal.go
index 2c26c8a2d7..2539443fd4 100644
--- a/bolt/internal/internal.go
+++ b/bolt/internal/internal.go
@@ -268,6 +268,7 @@ func MarshalDashboard(d chronograf.Dashboard) ([]byte, error) {
 		sortBy := &TableColumn{
 			InternalName: c.TableOptions.SortBy.InternalName,
 			DisplayName:  c.TableOptions.SortBy.DisplayName,
+			Visible:      c.TableOptions.SortBy.Visible,
 		}
 
 		columnNames := make([]*TableColumn, len(c.TableOptions.ColumnNames))
@@ -275,6 +276,7 @@ func MarshalDashboard(d chronograf.Dashboard) ([]byte, error) {
 			columnNames[i] = &TableColumn{
 				InternalName: column.InternalName,
 				DisplayName:  column.DisplayName,
+				Visible:      column.Visible,
 			}
 		}
 
@@ -435,6 +437,7 @@ func UnmarshalDashboard(data []byte, d *chronograf.Dashboard) error {
 			if c.TableOptions.SortBy != nil {
 				sortBy.InternalName = c.TableOptions.SortBy.InternalName
 				sortBy.DisplayName = c.TableOptions.SortBy.DisplayName
+				sortBy.Visible = c.TableOptions.SortBy.Visible
 			}
 			tableOptions.SortBy = sortBy
 
@@ -443,6 +446,7 @@ func UnmarshalDashboard(data []byte, d *chronograf.Dashboard) error {
 				columnNames[i] = chronograf.TableColumn{}
 				columnNames[i].InternalName = column.InternalName
 				columnNames[i].DisplayName = column.DisplayName
+				columnNames[i].Visible = column.Visible
 			}
 			tableOptions.ColumnNames = columnNames
 			tableOptions.TimeFormat = c.TableOptions.TimeFormat
diff --git a/bolt/internal/internal.pb.go b/bolt/internal/internal.pb.go
index 478a3c9947..d3547db61e 100644
--- a/bolt/internal/internal.pb.go
+++ b/bolt/internal/internal.pb.go
@@ -374,6 +374,7 @@ func (m *TableOptions) GetFixFirstColumn() bool {
 type TableColumn struct {
 	InternalName string `protobuf:"bytes,1,opt,name=internalName,proto3" json:"internalName,omitempty"`
 	DisplayName  string `protobuf:"bytes,2,opt,name=displayName,proto3" json:"displayName,omitempty"`
+	Visible      bool   `protobuf:"varint,3,opt,name=visible,proto3" json:"visible,omitempty"`
 }
 
 func (m *TableColumn) Reset()                    { *m = TableColumn{} }
@@ -395,6 +396,13 @@ func (m *TableColumn) GetDisplayName() string {
 	return ""
 }
 
+func (m *TableColumn) GetVisible() bool {
+	if m != nil {
+		return m.Visible
+	}
+	return false
+}
+
 type Color struct {
 	ID    string `protobuf:"bytes,1,opt,name=ID,proto3" json:"ID,omitempty"`
 	Type  string `protobuf:"bytes,2,opt,name=Type,proto3" json:"Type,omitempty"`
@@ -1322,104 +1330,104 @@ func init() {
 func init() { proto.RegisterFile("internal.proto", fileDescriptorInternal) }
 
 var fileDescriptorInternal = []byte{
-	// 1573 bytes of a gzipped FileDescriptorProto
-	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0xbc, 0x57, 0x5f, 0x8f, 0xdb, 0x44,
-	0x10, 0x97, 0x93, 0x38, 0x89, 0x27, 0xd7, 0xe3, 0x64, 0x8e, 0xd6, 0x14, 0x09, 0x05, 0x8b, 0x3f,
-	0xe1, 0x4f, 0x0f, 0x94, 0x0a, 0x81, 0x2a, 0xa8, 0x94, 0xbb, 0xd0, 0x72, 0xf4, 0xda, 0xbb, 0x6e,
-	0xee, 0x8e, 0x27, 0x54, 0x6d, 0x92, 0x4d, 0x62, 0xd5, 0xb1, 0xcd, 0x7a, 0x7d, 0x17, 0xf3, 0x01,
-	0xf8, 0x18, 0x48, 0x48, 0xf0, 0x05, 0x10, 0x2f, 0x3c, 0xf1, 0xce, 0x07, 0xe1, 0x2b, 0xc0, 0x23,
-	0x9a, 0xdd, 0xb5, 0xb3, 0xb9, 0xa4, 0x55, 0x91, 0x10, 0x6f, 0xfb, 0x9b, 0x19, 0xcf, 0xce, 0xce,
-	0xcc, 0x6f, 0x76, 0x0d, 0xdb, 0x41, 0x24, 0x18, 0x8f, 0x68, 0xb8, 0x97, 0xf0, 0x58, 0xc4, 0x6e,
-	0xb3, 0xc0, 0xfe, 0x9f, 0x15, 0xa8, 0x0f, 0xe2, 0x8c, 0x8f, 0x98, 0xbb, 0x0d, 0x95, 0xc3, 0xbe,
-	0x67, 0xb5, 0xad, 0x4e, 0x95, 0x54, 0x0e, 0xfb, 0xae, 0x0b, 0xb5, 0x47, 0x74, 0xce, 0xbc, 0x4a,
-	0xdb, 0xea, 0x38, 0x44, 0xae, 0x51, 0x76, 0x9a, 0x27, 0xcc, 0xab, 0x2a, 0x19, 0xae, 0xdd, 0x9b,
-	0xd0, 0x3c, 0x4b, 0xd1, 0xdb, 0x9c, 0x79, 0x35, 0x29, 0x2f, 0x31, 0xea, 0x4e, 0x68, 0x9a, 0x5e,
-	0xc6, 0x7c, 0xec, 0xd9, 0x4a, 0x57, 0x60, 0x77, 0x07, 0xaa, 0x67, 0xe4, 0xc8, 0xab, 0x4b, 0x31,
-	0x2e, 0x5d, 0x0f, 0x1a, 0x7d, 0x36, 0xa1, 0x59, 0x28, 0xbc, 0x46, 0xdb, 0xea, 0x34, 0x49, 0x01,
-	0xd1, 0xcf, 0x29, 0x0b, 0xd9, 0x94, 0xd3, 0x89, 0xd7, 0x54, 0x7e, 0x0a, 0xec, 0xee, 0x81, 0x7b,
-	0x18, 0xa5, 0x6c, 0x94, 0x71, 0x36, 0x78, 0x1a, 0x24, 0xe7, 0x8c, 0x07, 0x93, 0xdc, 0x73, 0xa4,
-	0x83, 0x0d, 0x1a, 0xdc, 0xe5, 0x21, 0x13, 0x14, 0xf7, 0x06, 0xe9, 0xaa, 0x80, 0xae, 0x0f, 0x5b,
-	0x83, 0x19, 0xe5, 0x6c, 0x3c, 0x60, 0x23, 0xce, 0x84, 0xd7, 0x92, 0xea, 0x15, 0x19, 0xda, 0x1c,
-	0xf3, 0x29, 0x8d, 0x82, 0xef, 0xa8, 0x08, 0xe2, 0xc8, 0xdb, 0x52, 0x36, 0xa6, 0x0c, 0xb3, 0x44,
-	0xe2, 0x90, 0x79, 0xd7, 0x54, 0x96, 0x70, 0xed, 0xff, 0x6a, 0x81, 0xd3, 0xa7, 0xe9, 0x6c, 0x18,
-	0x53, 0x3e, 0x7e, 0xa1, 0x5c, 0xdf, 0x02, 0x7b, 0xc4, 0xc2, 0x30, 0xf5, 0xaa, 0xed, 0x6a, 0xa7,
-	0xd5, 0xbd, 0xb1, 0x57, 0x16, 0xb1, 0xf4, 0x73, 0xc0, 0xc2, 0x90, 0x28, 0x2b, 0xf7, 0x23, 0x70,
-	0x04, 0x9b, 0x27, 0x21, 0x15, 0x2c, 0xf5, 0x6a, 0xf2, 0x13, 0x77, 0xf9, 0xc9, 0xa9, 0x56, 0x91,
-	0xa5, 0xd1, 0xda, 0x51, 0xec, 0xf5, 0xa3, 0xf8, 0xbf, 0x55, 0xe1, 0xda, 0xca, 0x76, 0xee, 0x16,
-	0x58, 0x0b, 0x19, 0xb9, 0x4d, 0xac, 0x05, 0xa2, 0x5c, 0x46, 0x6d, 0x13, 0x2b, 0x47, 0x74, 0x29,
-	0x7b, 0xc3, 0x26, 0xd6, 0x25, 0xa2, 0x99, 0xec, 0x08, 0x9b, 0x58, 0x33, 0xf7, 0x5d, 0x68, 0x7c,
-	0x9b, 0x31, 0x1e, 0xb0, 0xd4, 0xb3, 0x65, 0x74, 0x2f, 0x2d, 0xa3, 0x7b, 0x9c, 0x31, 0x9e, 0x93,
-	0x42, 0x8f, 0xd9, 0x90, 0xdd, 0xa4, 0x5a, 0x43, 0xae, 0x51, 0x26, 0xb0, 0xf3, 0x1a, 0x4a, 0x86,
-	0x6b, 0x9d, 0x45, 0xd5, 0x0f, 0x98, 0xc5, 0x8f, 0xa1, 0x46, 0x17, 0x2c, 0xf5, 0x1c, 0xe9, 0xff,
-	0x8d, 0x67, 0x24, 0x6c, 0xaf, 0xb7, 0x60, 0xe9, 0x17, 0x91, 0xe0, 0x39, 0x91, 0xe6, 0xee, 0x3b,
-	0x50, 0x1f, 0xc5, 0x61, 0xcc, 0x53, 0x0f, 0xae, 0x06, 0x76, 0x80, 0x72, 0xa2, 0xd5, 0x6e, 0x07,
-	0xea, 0x21, 0x9b, 0xb2, 0x68, 0x2c, 0x3b, 0xa3, 0xd5, 0xdd, 0x59, 0x1a, 0x1e, 0x49, 0x39, 0xd1,
-	0x7a, 0xf7, 0x0e, 0x6c, 0x09, 0x3a, 0x0c, 0xd9, 0x71, 0x82, 0x59, 0x4c, 0x65, 0x97, 0xb4, 0xba,
-	0xd7, 0x8d, 0x7a, 0x18, 0x5a, 0xb2, 0x62, 0x7b, 0xf3, 0x3e, 0x38, 0x65, 0x84, 0x48, 0x92, 0xa7,
-	0x2c, 0x97, 0xf9, 0x76, 0x08, 0x2e, 0xdd, 0x37, 0xc1, 0xbe, 0xa0, 0x61, 0xa6, 0x7a, 0xa5, 0xd5,
-	0xdd, 0x5e, 0xfa, 0xec, 0x2d, 0x82, 0x94, 0x28, 0xe5, 0x9d, 0xca, 0xa7, 0x96, 0xff, 0x7d, 0x05,
-	0xb6, 0xcc, 0x7d, 0xdc, 0xd7, 0x01, 0x44, 0x30, 0x67, 0xf7, 0x62, 0x3e, 0xa7, 0x42, 0xfb, 0x34,
-	0x24, 0xee, 0x7b, 0xb0, 0x73, 0xc1, 0xb8, 0x08, 0x46, 0x34, 0x3c, 0x0d, 0xe6, 0x0c, 0xfd, 0xc9,
-	0x5d, 0x9a, 0x64, 0x4d, 0xee, 0xde, 0x82, 0x7a, 0x1a, 0x73, 0xb1, 0x9f, 0xcb, 0x7a, 0xb7, 0xba,
-	0xaf, 0x5c, 0x39, 0xdb, 0x41, 0x1c, 0x66, 0xf3, 0x88, 0x68, 0x23, 0x24, 0xf0, 0x25, 0xa7, 0x49,
-	0x12, 0x44, 0xd3, 0x62, 0x48, 0x14, 0xd8, 0xfd, 0x04, 0x5a, 0x23, 0x69, 0x8d, 0x6d, 0x5f, 0x74,
-	0xc7, 0x33, 0xfc, 0x99, 0x96, 0xee, 0xdb, 0xb0, 0x3d, 0x09, 0x16, 0xf7, 0x02, 0x9e, 0x0a, 0xa5,
-	0x96, 0x1d, 0xd3, 0x24, 0x57, 0xa4, 0xfe, 0x00, 0x5a, 0x86, 0x0f, 0xec, 0xfb, 0xc2, 0xb7, 0x24,
-	0x9d, 0x4a, 0xc4, 0x8a, 0xcc, 0x6d, 0x43, 0x6b, 0x1c, 0xa4, 0x49, 0x48, 0x73, 0x83, 0x97, 0xa6,
-	0xc8, 0x9f, 0x82, 0x2d, 0xbb, 0xc3, 0xe0, 0xb2, 0x53, 0x70, 0x59, 0xce, 0xc8, 0x8a, 0x31, 0x23,
-	0x77, 0xa0, 0xfa, 0x25, 0x5b, 0xe8, 0xb1, 0x89, 0xcb, 0x92, 0xf1, 0x35, 0x83, 0xf1, 0xbb, 0x60,
-	0x9f, 0xcb, 0xd2, 0x2a, 0x26, 0x2a, 0xe0, 0xdf, 0x85, 0xba, 0xea, 0xae, 0xd2, 0xb3, 0x65, 0x78,
-	0x6e, 0x43, 0xeb, 0x98, 0x07, 0x2c, 0x12, 0x8a, 0xc3, 0x3a, 0x50, 0x43, 0xe4, 0xff, 0x62, 0x41,
-	0x4d, 0x96, 0xcc, 0x87, 0xad, 0x90, 0x4d, 0xe9, 0x28, 0xdf, 0x8f, 0xb3, 0x68, 0x9c, 0x7a, 0x56,
-	0xbb, 0xda, 0xa9, 0x92, 0x15, 0x99, 0x7b, 0x1d, 0xea, 0x43, 0xa5, 0xad, 0xb4, 0xab, 0x1d, 0x87,
-	0x68, 0x84, 0xa1, 0x85, 0x74, 0xc8, 0x42, 0x7d, 0x04, 0x05, 0xd0, 0x3a, 0xe1, 0x6c, 0x12, 0x2c,
-	0xf4, 0x31, 0x34, 0x42, 0x79, 0x9a, 0x4d, 0x50, 0xae, 0x4e, 0xa2, 0x11, 0x1e, 0x60, 0x48, 0xd3,
-	0x92, 0xd8, 0xb8, 0x46, 0xcf, 0xe9, 0x88, 0x86, 0x05, 0xb3, 0x15, 0xf0, 0x7f, 0xb7, 0x70, 0xe2,
-	0xab, 0x49, 0xb5, 0x96, 0xe1, 0x57, 0xa1, 0x89, 0x53, 0xec, 0xc9, 0x05, 0xe5, 0xfa, 0xc0, 0x0d,
-	0xc4, 0xe7, 0x94, 0xbb, 0x1f, 0x42, 0x5d, 0x12, 0x60, 0xc3, 0xd4, 0x2c, 0xdc, 0xc9, 0xac, 0x12,
-	0x6d, 0x56, 0xce, 0x95, 0x9a, 0x31, 0x57, 0xca, 0xc3, 0xda, 0xe6, 0x61, 0x6f, 0x81, 0x8d, 0x03,
-	0x2a, 0x97, 0xd1, 0x6f, 0xf4, 0xac, 0xc6, 0x98, 0xb2, 0xf2, 0xcf, 0xe0, 0xda, 0xca, 0x8e, 0xe5,
-	0x4e, 0xd6, 0xea, 0x4e, 0x4b, 0x32, 0x3b, 0x9a, 0xbc, 0x48, 0x96, 0x94, 0x85, 0x6c, 0x24, 0xd8,
-	0x58, 0xe6, 0xbb, 0x49, 0x4a, 0xec, 0xff, 0x68, 0x2d, 0xfd, 0xca, 0xfd, 0xf0, 0x3e, 0x1b, 0xc5,
-	0xf3, 0x39, 0x8d, 0xc6, 0xda, 0x75, 0x01, 0x31, 0x6f, 0xe3, 0xa1, 0x76, 0x5d, 0x19, 0x0f, 0x11,
-	0xf3, 0x44, 0x57, 0xb0, 0xc2, 0x13, 0xec, 0x9d, 0x39, 0xa3, 0x69, 0xc6, 0xd9, 0x9c, 0x45, 0x42,
-	0xa7, 0xc0, 0x14, 0xb9, 0x37, 0xa0, 0x21, 0xe8, 0xf4, 0x09, 0x8e, 0x20, 0x5d, 0x49, 0x41, 0xa7,
-	0x0f, 0x58, 0xee, 0xbe, 0x06, 0xce, 0x24, 0x60, 0xe1, 0x58, 0xaa, 0x54, 0x39, 0x9b, 0x52, 0xf0,
-	0x80, 0xe5, 0xfe, 0xdf, 0x16, 0xd4, 0x07, 0x8c, 0x5f, 0x30, 0xfe, 0x42, 0x17, 0x9d, 0xf9, 0x80,
-	0xa8, 0x3e, 0xe7, 0x01, 0x51, 0xdb, 0xfc, 0x80, 0xb0, 0x97, 0x0f, 0x88, 0x5d, 0xb0, 0x07, 0x7c,
-	0x74, 0xd8, 0x97, 0x11, 0x55, 0x89, 0x02, 0xd8, 0x8d, 0xbd, 0x91, 0x08, 0x2e, 0x98, 0x7e, 0x55,
-	0x68, 0xb4, 0x76, 0xff, 0x35, 0x37, 0x5c, 0xe5, 0xff, 0xf2, 0x71, 0xe1, 0xff, 0x60, 0x41, 0xfd,
-	0x88, 0xe6, 0x71, 0x26, 0xd6, 0xba, 0xb6, 0x0d, 0xad, 0x5e, 0x92, 0x84, 0xc1, 0x68, 0x85, 0xa9,
-	0x86, 0x08, 0x2d, 0x1e, 0x1a, 0xf5, 0x50, 0xb9, 0x30, 0x45, 0x38, 0xfc, 0x0f, 0xe4, 0x9b, 0x40,
-	0x5d, 0xf0, 0xc6, 0xf0, 0x57, 0x4f, 0x01, 0xa9, 0xc4, 0xa4, 0xf5, 0x32, 0x11, 0x4f, 0xc2, 0xf8,
-	0x52, 0x66, 0xa7, 0x49, 0x4a, 0xec, 0xff, 0x51, 0x81, 0xda, 0xff, 0x75, 0x8f, 0x6f, 0x81, 0x15,
-	0xe8, 0xe6, 0xb0, 0x82, 0xf2, 0x56, 0x6f, 0x18, 0xb7, 0xba, 0x07, 0x8d, 0x9c, 0xd3, 0x68, 0xca,
-	0x52, 0xaf, 0x29, 0xa7, 0x51, 0x01, 0xa5, 0x46, 0xf2, 0x4e, 0x5d, 0xe7, 0x0e, 0x29, 0x60, 0xc9,
-	0x23, 0x30, 0x78, 0xf4, 0x81, 0xbe, 0xf9, 0x5b, 0x32, 0x22, 0x6f, 0x35, 0x2d, 0x57, 0x2f, 0xfc,
-	0xff, 0xee, 0x86, 0xfd, 0xcb, 0x02, 0xbb, 0x24, 0xe1, 0xc1, 0x2a, 0x09, 0x0f, 0x96, 0x24, 0xec,
-	0xef, 0x17, 0x24, 0xec, 0xef, 0x23, 0x26, 0x27, 0x05, 0x09, 0xc9, 0x09, 0x16, 0xeb, 0x3e, 0x8f,
-	0xb3, 0x64, 0x3f, 0x57, 0x55, 0x75, 0x48, 0x89, 0xb1, 0x73, 0xbf, 0x9e, 0x31, 0xae, 0x53, 0xed,
-	0x10, 0x8d, 0xb0, 0xcf, 0x8f, 0xe4, 0x80, 0x52, 0xc9, 0x55, 0xc0, 0x7d, 0x0b, 0x6c, 0x82, 0xc9,
-	0x93, 0x19, 0x5e, 0xa9, 0x8b, 0x14, 0x13, 0xa5, 0x45, 0xa7, 0xea, 0xc5, 0xaf, 0x1b, 0xbe, 0x78,
-	0xff, 0xbf, 0x0f, 0xf5, 0xc1, 0x2c, 0x98, 0x88, 0xe2, 0xfd, 0xf4, 0xb2, 0x31, 0xe0, 0x82, 0x39,
-	0x93, 0x3a, 0xa2, 0x4d, 0xfc, 0xc7, 0xe0, 0x94, 0xc2, 0x65, 0x38, 0x96, 0x19, 0x8e, 0x0b, 0xb5,
-	0xb3, 0x28, 0x10, 0x05, 0xd5, 0x71, 0x8d, 0x87, 0x7d, 0x9c, 0xd1, 0x48, 0x04, 0x22, 0x2f, 0xa8,
-	0x5e, 0x60, 0xff, 0xb6, 0x0e, 0x1f, 0xdd, 0x9d, 0x25, 0x09, 0xe3, 0x7a, 0x6c, 0x28, 0x20, 0x37,
-	0x89, 0x2f, 0x99, 0x9a, 0xf8, 0x55, 0xa2, 0x80, 0xff, 0x0d, 0x38, 0xbd, 0x90, 0x71, 0x41, 0xb2,
-	0x90, 0x6d, 0xba, 0x89, 0xbf, 0x1a, 0x1c, 0x3f, 0x2a, 0x22, 0xc0, 0xf5, 0x72, 0x44, 0x54, 0xaf,
-	0x8c, 0x88, 0x07, 0x34, 0xa1, 0x87, 0x7d, 0xd9, 0xe7, 0x55, 0xa2, 0x91, 0xff, 0x93, 0x05, 0x35,
-	0x9c, 0x45, 0x86, 0xeb, 0xda, 0xf3, 0xe6, 0xd8, 0x09, 0x8f, 0x2f, 0x82, 0x31, 0xe3, 0xc5, 0xe1,
-	0x0a, 0x2c, 0x93, 0x3e, 0x9a, 0xb1, 0xf2, 0xc2, 0xd7, 0x08, 0x7b, 0x0d, 0x7f, 0x0f, 0x0a, 0x2e,
-	0x19, 0xbd, 0x86, 0x62, 0xa2, 0x94, 0xf8, 0x70, 0x1b, 0x64, 0x09, 0xe3, 0xbd, 0xf1, 0x3c, 0x28,
-	0x1e, 0x39, 0x86, 0xc4, 0xbf, 0xab, 0x7e, 0x38, 0xd6, 0x26, 0x9a, 0xb5, 0xf9, 0xe7, 0xe4, 0x6a,
-	0xe4, 0xfe, 0xcf, 0x16, 0x34, 0x1e, 0xea, 0xd7, 0x98, 0x79, 0x0a, 0xeb, 0x99, 0xa7, 0xa8, 0xac,
-	0x9c, 0xa2, 0x0b, 0xbb, 0x85, 0xcd, 0xca, 0xfe, 0x2a, 0x0b, 0x1b, 0x75, 0x3a, 0xa3, 0xb5, 0xb2,
-	0x58, 0x2f, 0xf2, 0x37, 0x72, 0xba, 0x6a, 0xb3, 0xa9, 0xe0, 0x6b, 0x55, 0x69, 0x43, 0x4b, 0xff,
-	0x45, 0xca, 0x7f, 0x32, 0x3d, 0x54, 0x0d, 0x91, 0xdf, 0x85, 0xfa, 0x41, 0x1c, 0x4d, 0x82, 0xa9,
-	0xdb, 0x81, 0x5a, 0x2f, 0x13, 0x33, 0xe9, 0xb1, 0xd5, 0xdd, 0x35, 0x88, 0x9f, 0x89, 0x99, 0xb2,
-	0x21, 0xd2, 0xc2, 0xff, 0x0c, 0x60, 0x29, 0xc3, 0x5b, 0x62, 0x59, 0x8d, 0x47, 0xec, 0x12, 0x5b,
-	0x26, 0x95, 0x5e, 0x9a, 0x64, 0x83, 0xc6, 0xff, 0x1c, 0x9c, 0xfd, 0x2c, 0x08, 0xc7, 0x87, 0xd1,
-	0x24, 0xc6, 0xd1, 0x71, 0xce, 0x78, 0xba, 0xac, 0x57, 0x01, 0x31, 0xdd, 0x38, 0x45, 0x4a, 0x0e,
-	0x69, 0x34, 0xac, 0xcb, 0xbf, 0xf8, 0xdb, 0xff, 0x04, 0x00, 0x00, 0xff, 0xff, 0xc4, 0x7e, 0x5e,
-	0x7e, 0xd7, 0x0f, 0x00, 0x00,
+	// 1582 bytes of a gzipped FileDescriptorProto
+	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0xbc, 0x57, 0xdd, 0x8e, 0xdb, 0x44,
+	0x14, 0x96, 0x93, 0x38, 0x89, 0x4f, 0xb6, 0xcb, 0xca, 0x2c, 0xad, 0x29, 0x12, 0x0a, 0x16, 0x3f,
+	0xe1, 0xa7, 0x0b, 0x4a, 0x85, 0x40, 0x15, 0x54, 0xca, 0x6e, 0x68, 0x59, 0xba, 0xed, 0x6e, 0x27,
+	0xbb, 0xcb, 0x15, 0xaa, 0x26, 0xc9, 0x24, 0xb1, 0xea, 0xd8, 0x66, 0x6c, 0xef, 0xc6, 0x3c, 0x00,
+	0x8f, 0x81, 0x84, 0x04, 0x2f, 0x80, 0xb8, 0xe1, 0x8a, 0x7b, 0x1e, 0x84, 0x57, 0x80, 0x4b, 0x74,
+	0xe6, 0xc7, 0x99, 0x6c, 0xd2, 0xaa, 0x48, 0x88, 0xbb, 0xf9, 0xce, 0x39, 0x3e, 0x73, 0xfe, 0xcf,
+	0x18, 0xb6, 0x83, 0x28, 0x63, 0x3c, 0xa2, 0xe1, 0x5e, 0xc2, 0xe3, 0x2c, 0x76, 0x9b, 0x1a, 0xfb,
+	0x7f, 0x56, 0xa0, 0x3e, 0x88, 0x73, 0x3e, 0x62, 0xee, 0x36, 0x54, 0x0e, 0xfb, 0x9e, 0xd5, 0xb6,
+	0x3a, 0x55, 0x52, 0x39, 0xec, 0xbb, 0x2e, 0xd4, 0x1e, 0xd1, 0x39, 0xf3, 0x2a, 0x6d, 0xab, 0xe3,
+	0x10, 0x71, 0x46, 0xda, 0x69, 0x91, 0x30, 0xaf, 0x2a, 0x69, 0x78, 0x76, 0x6f, 0x42, 0xf3, 0x2c,
+	0x45, 0x6d, 0x73, 0xe6, 0xd5, 0x04, 0xbd, 0xc4, 0xc8, 0x3b, 0xa1, 0x69, 0x7a, 0x19, 0xf3, 0xb1,
+	0x67, 0x4b, 0x9e, 0xc6, 0xee, 0x0e, 0x54, 0xcf, 0xc8, 0x91, 0x57, 0x17, 0x64, 0x3c, 0xba, 0x1e,
+	0x34, 0xfa, 0x6c, 0x42, 0xf3, 0x30, 0xf3, 0x1a, 0x6d, 0xab, 0xd3, 0x24, 0x1a, 0xa2, 0x9e, 0x53,
+	0x16, 0xb2, 0x29, 0xa7, 0x13, 0xaf, 0x29, 0xf5, 0x68, 0xec, 0xee, 0x81, 0x7b, 0x18, 0xa5, 0x6c,
+	0x94, 0x73, 0x36, 0x78, 0x1a, 0x24, 0xe7, 0x8c, 0x07, 0x93, 0xc2, 0x73, 0x84, 0x82, 0x0d, 0x1c,
+	0xbc, 0xe5, 0x21, 0xcb, 0x28, 0xde, 0x0d, 0x42, 0x95, 0x86, 0xae, 0x0f, 0x5b, 0x83, 0x19, 0xe5,
+	0x6c, 0x3c, 0x60, 0x23, 0xce, 0x32, 0xaf, 0x25, 0xd8, 0x2b, 0x34, 0x94, 0x39, 0xe6, 0x53, 0x1a,
+	0x05, 0xdf, 0xd1, 0x2c, 0x88, 0x23, 0x6f, 0x4b, 0xca, 0x98, 0x34, 0x8c, 0x12, 0x89, 0x43, 0xe6,
+	0x5d, 0x93, 0x51, 0xc2, 0xb3, 0xff, 0xab, 0x05, 0x4e, 0x9f, 0xa6, 0xb3, 0x61, 0x4c, 0xf9, 0xf8,
+	0x85, 0x62, 0x7d, 0x0b, 0xec, 0x11, 0x0b, 0xc3, 0xd4, 0xab, 0xb6, 0xab, 0x9d, 0x56, 0xf7, 0xc6,
+	0x5e, 0x99, 0xc4, 0x52, 0xcf, 0x01, 0x0b, 0x43, 0x22, 0xa5, 0xdc, 0x8f, 0xc0, 0xc9, 0xd8, 0x3c,
+	0x09, 0x69, 0xc6, 0x52, 0xaf, 0x26, 0x3e, 0x71, 0x97, 0x9f, 0x9c, 0x2a, 0x16, 0x59, 0x0a, 0xad,
+	0xb9, 0x62, 0xaf, 0xbb, 0xe2, 0xff, 0x56, 0x85, 0x6b, 0x2b, 0xd7, 0xb9, 0x5b, 0x60, 0x2d, 0x84,
+	0xe5, 0x36, 0xb1, 0x16, 0x88, 0x0a, 0x61, 0xb5, 0x4d, 0xac, 0x02, 0xd1, 0xa5, 0xa8, 0x0d, 0x9b,
+	0x58, 0x97, 0x88, 0x66, 0xa2, 0x22, 0x6c, 0x62, 0xcd, 0xdc, 0x77, 0xa1, 0xf1, 0x6d, 0xce, 0x78,
+	0xc0, 0x52, 0xcf, 0x16, 0xd6, 0xbd, 0xb4, 0xb4, 0xee, 0x71, 0xce, 0x78, 0x41, 0x34, 0x1f, 0xa3,
+	0x21, 0xaa, 0x49, 0x96, 0x86, 0x38, 0x23, 0x2d, 0xc3, 0xca, 0x6b, 0x48, 0x1a, 0x9e, 0x55, 0x14,
+	0x65, 0x3d, 0x60, 0x14, 0x3f, 0x86, 0x1a, 0x5d, 0xb0, 0xd4, 0x73, 0x84, 0xfe, 0x37, 0x9e, 0x11,
+	0xb0, 0xbd, 0xde, 0x82, 0xa5, 0x5f, 0x44, 0x19, 0x2f, 0x88, 0x10, 0x77, 0xdf, 0x81, 0xfa, 0x28,
+	0x0e, 0x63, 0x9e, 0x7a, 0x70, 0xd5, 0xb0, 0x03, 0xa4, 0x13, 0xc5, 0x76, 0x3b, 0x50, 0x0f, 0xd9,
+	0x94, 0x45, 0x63, 0x51, 0x19, 0xad, 0xee, 0xce, 0x52, 0xf0, 0x48, 0xd0, 0x89, 0xe2, 0xbb, 0x77,
+	0x60, 0x2b, 0xa3, 0xc3, 0x90, 0x1d, 0x27, 0x18, 0xc5, 0x54, 0x54, 0x49, 0xab, 0x7b, 0xdd, 0xc8,
+	0x87, 0xc1, 0x25, 0x2b, 0xb2, 0x37, 0xef, 0x83, 0x53, 0x5a, 0x88, 0x4d, 0xf2, 0x94, 0x15, 0x22,
+	0xde, 0x0e, 0xc1, 0xa3, 0xfb, 0x26, 0xd8, 0x17, 0x34, 0xcc, 0x65, 0xad, 0xb4, 0xba, 0xdb, 0x4b,
+	0x9d, 0xbd, 0x45, 0x90, 0x12, 0xc9, 0xbc, 0x53, 0xf9, 0xd4, 0xf2, 0xbf, 0xaf, 0xc0, 0x96, 0x79,
+	0x8f, 0xfb, 0x3a, 0x40, 0x16, 0xcc, 0xd9, 0xbd, 0x98, 0xcf, 0x69, 0xa6, 0x74, 0x1a, 0x14, 0xf7,
+	0x3d, 0xd8, 0xb9, 0x60, 0x3c, 0x0b, 0x46, 0x34, 0x3c, 0x0d, 0xe6, 0x0c, 0xf5, 0x89, 0x5b, 0x9a,
+	0x64, 0x8d, 0xee, 0xde, 0x82, 0x7a, 0x1a, 0xf3, 0x6c, 0xbf, 0x10, 0xf9, 0x6e, 0x75, 0x5f, 0xb9,
+	0xe2, 0xdb, 0x41, 0x1c, 0xe6, 0xf3, 0x88, 0x28, 0x21, 0x6c, 0xe0, 0x4b, 0x4e, 0x93, 0x24, 0x88,
+	0xa6, 0x7a, 0x48, 0x68, 0xec, 0x7e, 0x02, 0xad, 0x91, 0x90, 0xc6, 0xb2, 0xd7, 0xd5, 0xf1, 0x0c,
+	0x7d, 0xa6, 0xa4, 0xfb, 0x36, 0x6c, 0x4f, 0x82, 0xc5, 0xbd, 0x80, 0xa7, 0x99, 0x64, 0x8b, 0x8a,
+	0x69, 0x92, 0x2b, 0x54, 0x7f, 0x0e, 0x2d, 0x43, 0x07, 0xd6, 0xbd, 0xd6, 0x2d, 0x9a, 0x4e, 0x06,
+	0x62, 0x85, 0xe6, 0xb6, 0xa1, 0x35, 0x0e, 0xd2, 0x24, 0xa4, 0x85, 0xd1, 0x97, 0x26, 0x09, 0xc7,
+	0xc8, 0x45, 0x90, 0x06, 0xc3, 0x50, 0x4e, 0xc3, 0x26, 0xd1, 0xd0, 0x9f, 0x82, 0x2d, 0xea, 0xc6,
+	0xe8, 0x72, 0x47, 0x77, 0xb9, 0x98, 0x9e, 0x15, 0x63, 0x7a, 0xee, 0x40, 0xf5, 0x4b, 0xb6, 0x50,
+	0x03, 0x15, 0x8f, 0xe5, 0x2c, 0xa8, 0x19, 0xb3, 0x60, 0x17, 0xec, 0x73, 0x91, 0x74, 0xd9, 0xa3,
+	0x12, 0xf8, 0x77, 0xa1, 0x2e, 0xeb, 0xae, 0xd4, 0x6c, 0x19, 0x9a, 0xdb, 0xd0, 0x3a, 0xe6, 0x01,
+	0x8b, 0x32, 0xd9, 0xdd, 0xca, 0x05, 0x83, 0xe4, 0xff, 0x62, 0x41, 0x4d, 0x24, 0xd3, 0x87, 0xad,
+	0x90, 0x4d, 0xe9, 0xa8, 0xd8, 0x8f, 0xf3, 0x68, 0x9c, 0x7a, 0x56, 0xbb, 0xda, 0xa9, 0x92, 0x15,
+	0x9a, 0x7b, 0x1d, 0xea, 0x43, 0xc9, 0xad, 0xb4, 0xab, 0x1d, 0x87, 0x28, 0x84, 0xa6, 0x85, 0x74,
+	0xc8, 0x42, 0xe5, 0x82, 0x04, 0x28, 0x9d, 0x70, 0x36, 0x09, 0x16, 0xca, 0x0d, 0x85, 0x90, 0x9e,
+	0xe6, 0x13, 0xa4, 0x4b, 0x4f, 0x14, 0x42, 0x07, 0x86, 0x34, 0x2d, 0x5b, 0x1e, 0xcf, 0xa8, 0x39,
+	0x1d, 0xd1, 0x50, 0xf7, 0xbc, 0x04, 0xfe, 0xef, 0x16, 0xee, 0x02, 0x39, 0xc3, 0xd6, 0x22, 0xfc,
+	0x2a, 0x34, 0x71, 0xbe, 0x3d, 0xb9, 0xa0, 0x5c, 0x39, 0xdc, 0x40, 0x7c, 0x4e, 0xb9, 0xfb, 0x21,
+	0xd4, 0x45, 0x6b, 0x6c, 0x98, 0xa7, 0x5a, 0x9d, 0x88, 0x2a, 0x51, 0x62, 0xe5, 0xc4, 0xa9, 0x19,
+	0x13, 0xa7, 0x74, 0xd6, 0x36, 0x9d, 0xbd, 0x05, 0x36, 0x8e, 0xae, 0x42, 0x58, 0xbf, 0x51, 0xb3,
+	0x1c, 0x70, 0x52, 0xca, 0x3f, 0x83, 0x6b, 0x2b, 0x37, 0x96, 0x37, 0x59, 0xab, 0x37, 0x2d, 0xdb,
+	0xdc, 0x51, 0x6d, 0x8d, 0x6d, 0x94, 0xb2, 0x90, 0x8d, 0x32, 0x36, 0x56, 0x55, 0x57, 0x62, 0xff,
+	0x47, 0x6b, 0xa9, 0x57, 0xdc, 0x87, 0x25, 0x3a, 0x8a, 0xe7, 0x73, 0x1a, 0x8d, 0x95, 0x6a, 0x0d,
+	0x31, 0x6e, 0xe3, 0xa1, 0x52, 0x5d, 0x19, 0x0f, 0x11, 0xf3, 0x44, 0x65, 0xb0, 0xc2, 0x13, 0xac,
+	0x9d, 0x39, 0xa3, 0x69, 0xce, 0xd9, 0x9c, 0x45, 0x99, 0x0a, 0x81, 0x49, 0x72, 0x6f, 0x40, 0x23,
+	0xa3, 0xd3, 0x27, 0x38, 0x9c, 0x54, 0x26, 0x33, 0x3a, 0x7d, 0xc0, 0x0a, 0xf7, 0x35, 0x70, 0x26,
+	0x01, 0x0b, 0xc7, 0x82, 0x25, 0xd3, 0xd9, 0x14, 0x84, 0x07, 0xac, 0xf0, 0xff, 0xb6, 0xa0, 0x3e,
+	0x60, 0xfc, 0x82, 0xf1, 0x17, 0x5a, 0x81, 0xe6, 0xd3, 0xa2, 0xfa, 0x9c, 0xa7, 0x45, 0x6d, 0xf3,
+	0xd3, 0xc2, 0x5e, 0x3e, 0x2d, 0x76, 0xc1, 0x1e, 0xf0, 0xd1, 0x61, 0x5f, 0x58, 0x54, 0x25, 0x12,
+	0x60, 0x35, 0xf6, 0x46, 0x59, 0x70, 0xc1, 0xd4, 0x7b, 0x43, 0xa1, 0xb5, 0xcd, 0xd8, 0xdc, 0xb0,
+	0xe4, 0xff, 0xe5, 0xb3, 0xc3, 0xff, 0xc1, 0x82, 0xfa, 0x11, 0x2d, 0xe2, 0x3c, 0x5b, 0xab, 0xda,
+	0x36, 0xb4, 0x7a, 0x49, 0x12, 0x06, 0xa3, 0x95, 0x4e, 0x35, 0x48, 0x28, 0xf1, 0xd0, 0xc8, 0x87,
+	0x8c, 0x85, 0x49, 0xc2, 0xb5, 0x70, 0x20, 0x5e, 0x0b, 0x72, 0xf5, 0x1b, 0x6b, 0x41, 0x3e, 0x12,
+	0x04, 0x13, 0x83, 0xd6, 0xcb, 0xb3, 0x78, 0x12, 0xc6, 0x97, 0x22, 0x3a, 0x4d, 0x52, 0x62, 0xff,
+	0x8f, 0x0a, 0xd4, 0xfe, 0xaf, 0x0d, 0xbf, 0x05, 0x56, 0xa0, 0x8a, 0xc3, 0x0a, 0xca, 0x7d, 0xdf,
+	0x30, 0xf6, 0xbd, 0x07, 0x8d, 0x82, 0xd3, 0x68, 0xca, 0x52, 0xaf, 0x29, 0xa6, 0x91, 0x86, 0x82,
+	0x23, 0xfa, 0x4e, 0x2e, 0x7a, 0x87, 0x68, 0x58, 0xf6, 0x11, 0x18, 0x7d, 0xf4, 0x81, 0x7a, 0x13,
+	0xb4, 0x84, 0x45, 0xde, 0x6a, 0x58, 0xae, 0x3e, 0x05, 0xfe, 0xbb, 0xdd, 0xfb, 0x97, 0x05, 0x76,
+	0xd9, 0x84, 0x07, 0xab, 0x4d, 0x78, 0xb0, 0x6c, 0xc2, 0xfe, 0xbe, 0x6e, 0xc2, 0xfe, 0x3e, 0x62,
+	0x72, 0xa2, 0x9b, 0x90, 0x9c, 0x60, 0xb2, 0xee, 0xf3, 0x38, 0x4f, 0xf6, 0x0b, 0x99, 0x55, 0x87,
+	0x94, 0x18, 0x2b, 0xf7, 0xeb, 0x19, 0xe3, 0x2a, 0xd4, 0x0e, 0x51, 0x08, 0xeb, 0xfc, 0x48, 0x0c,
+	0x28, 0x19, 0x5c, 0x09, 0xdc, 0xb7, 0xc0, 0x26, 0x18, 0x3c, 0x11, 0xe1, 0x95, 0xbc, 0x08, 0x32,
+	0x91, 0x5c, 0x54, 0x2a, 0xff, 0x05, 0x54, 0xc1, 0xeb, 0x3f, 0x83, 0xf7, 0xa1, 0x3e, 0x98, 0x05,
+	0x93, 0x4c, 0xbf, 0xac, 0x5e, 0x36, 0x06, 0x5c, 0x30, 0x67, 0x82, 0x47, 0x94, 0x88, 0xff, 0x18,
+	0x9c, 0x92, 0xb8, 0x34, 0xc7, 0x32, 0xcd, 0x71, 0xa1, 0x76, 0x16, 0x05, 0x99, 0x6e, 0x75, 0x3c,
+	0xa3, 0xb3, 0x8f, 0x73, 0x1a, 0x65, 0x41, 0x56, 0xe8, 0x56, 0xd7, 0xd8, 0xbf, 0xad, 0xcc, 0x47,
+	0x75, 0x67, 0x49, 0xc2, 0xb8, 0x1a, 0x1b, 0x12, 0x88, 0x4b, 0xe2, 0x4b, 0x26, 0x27, 0x7e, 0x95,
+	0x48, 0xe0, 0x7f, 0x03, 0x4e, 0x2f, 0x64, 0x3c, 0x23, 0x79, 0xc8, 0x36, 0x6d, 0xe2, 0xaf, 0x06,
+	0xc7, 0x8f, 0xb4, 0x05, 0x78, 0x5e, 0x8e, 0x88, 0xea, 0x95, 0x11, 0xf1, 0x80, 0x26, 0xf4, 0xb0,
+	0x2f, 0xea, 0xbc, 0x4a, 0x14, 0xf2, 0x7f, 0xb2, 0xa0, 0x86, 0xb3, 0xc8, 0x50, 0x5d, 0x7b, 0xde,
+	0x1c, 0x3b, 0xe1, 0xf1, 0x45, 0x30, 0x66, 0x5c, 0x3b, 0xa7, 0xb1, 0x08, 0xfa, 0x68, 0xc6, 0xca,
+	0x85, 0xaf, 0x10, 0xd6, 0x1a, 0xfe, 0x38, 0xe8, 0x5e, 0x32, 0x6a, 0x0d, 0xc9, 0x44, 0x32, 0xf1,
+	0x49, 0x37, 0xc8, 0x13, 0xc6, 0x7b, 0xe3, 0x79, 0xa0, 0x9f, 0x3f, 0x06, 0xc5, 0xbf, 0x2b, 0x7f,
+	0x45, 0xd6, 0x26, 0x9a, 0xb5, 0xf9, 0xb7, 0xe5, 0xaa, 0xe5, 0xfe, 0xcf, 0x16, 0x34, 0x1e, 0xaa,
+	0x77, 0x9a, 0xe9, 0x85, 0xf5, 0x4c, 0x2f, 0x2a, 0x2b, 0x5e, 0x74, 0x61, 0x57, 0xcb, 0xac, 0xdc,
+	0x2f, 0xa3, 0xb0, 0x91, 0xa7, 0x22, 0x5a, 0x2b, 0x93, 0xf5, 0x22, 0xff, 0x29, 0xa7, 0xab, 0x32,
+	0x9b, 0x12, 0xbe, 0x96, 0x95, 0x36, 0xb4, 0xd4, 0xff, 0xa5, 0xf8, 0x5b, 0x53, 0x43, 0xd5, 0x20,
+	0xf9, 0x5d, 0xa8, 0x1f, 0xc4, 0xd1, 0x24, 0x98, 0xba, 0x1d, 0xa8, 0xf5, 0xf2, 0x6c, 0x26, 0x34,
+	0xb6, 0xba, 0xbb, 0x46, 0xe3, 0xe7, 0xd9, 0x4c, 0xca, 0x10, 0x21, 0xe1, 0x7f, 0x06, 0xb0, 0xa4,
+	0xe1, 0x96, 0x58, 0x66, 0xe3, 0x11, 0xbb, 0xc4, 0x92, 0x49, 0x85, 0x96, 0x26, 0xd9, 0xc0, 0xf1,
+	0x3f, 0x07, 0x67, 0x3f, 0x0f, 0xc2, 0xf1, 0x61, 0x34, 0x89, 0x71, 0x74, 0x9c, 0x33, 0x9e, 0x2e,
+	0xf3, 0xa5, 0x21, 0x86, 0x1b, 0xa7, 0x48, 0xd9, 0x43, 0x0a, 0x0d, 0xeb, 0xe2, 0xff, 0xfe, 0xf6,
+	0x3f, 0x01, 0x00, 0x00, 0xff, 0xff, 0xf4, 0xe4, 0x20, 0x8a, 0xf1, 0x0f, 0x00, 0x00,
 }
diff --git a/bolt/internal/internal.proto b/bolt/internal/internal.proto
index 201fd5d628..86e8f30dea 100644
--- a/bolt/internal/internal.proto
+++ b/bolt/internal/internal.proto
@@ -52,6 +52,7 @@ message TableOptions {
 message TableColumn {
 	string internalName     = 1; // name of column
 	string displayName      = 2; // what column is renamed to
+	bool visible			= 3; // Represents whether TableColumn is visible
 }
 
 message Color {
diff --git a/chronograf.go b/chronograf.go
index e9de4b32d0..a1b2a205c8 100644
--- a/chronograf.go
+++ b/chronograf.go
@@ -564,6 +564,7 @@ type DashboardCell struct {
 type TableColumn struct {
 	InternalName string `json:"internalName"`
 	DisplayName  string `json:"displayName"`
+	Visible      bool   `json:"visible"`
 }
 
 // TableOptions is a type of options for a DashboardCell with type Table
diff --git a/integrations/server_test.go b/integrations/server_test.go
index 93381dea44..8077258960 100644
--- a/integrations/server_test.go
+++ b/integrations/server_test.go
@@ -548,7 +548,9 @@ func TestServer(t *testing.T) {
 				"verticalTimeAxis": false,
 				"sortBy":{
 					"internalName": "",
-					"displayName": ""},
+					"displayName": "",
+					"visible": false
+				},
 				"wrapping": "",
 				"columnNames": null,
 				"fixFirstColumn": false
@@ -797,7 +799,8 @@ func TestServer(t *testing.T) {
 						"verticalTimeAxis":false,
 						"sortBy":{
 							"internalName":"",
-							"displayName":""
+							"displayName":"",
+							"visible":false
 						},
 						"wrapping":"",
 						"columnNames":null,
diff --git a/server/cells_test.go b/server/cells_test.go
index a74f914c7b..a526fb3ac8 100644
--- a/server/cells_test.go
+++ b/server/cells_test.go
@@ -532,7 +532,7 @@ func TestService_ReplaceDashboardCell(t *testing.T) {
 					}
 				  }
 				  `))),
-			want: `{"i":"3c5c4102-fa40-4585-a8f9-917c77e37192","x":0,"y":0,"w":4,"h":4,"name":"Untitled Cell","queries":[{"query":"SELECT mean(\"usage_user\") AS \"mean_usage_user\" FROM \"telegraf\".\"autogen\".\"cpu\" WHERE time \u003e :dashboardTime: AND \"cpu\"=:cpu: GROUP BY :interval: FILL(null)","queryConfig":{"id":"3cd3eaa4-a4b8-44b3-b69e-0c7bf6b91d9e","database":"telegraf","measurement":"cpu","retentionPolicy":"autogen","fields":[{"value":"mean","type":"func","alias":"mean_usage_user","args":[{"value":"usage_user","type":"field","alias":""}]}],"tags":{"cpu":["ChristohersMBP2.lan"]},"groupBy":{"time":"2s","tags":[]},"areTagsAccepted":true,"fill":"null","rawText":"SELECT mean(\"usage_user\") AS \"mean_usage_user\" FROM \"telegraf\".\"autogen\".\"cpu\" WHERE time \u003e :dashboardTime: AND \"cpu\"=:cpu: GROUP BY :interval: FILL(null)","range":{"upper":"","lower":"now() - 15m"},"shifts":[]},"source":""}],"axes":{"x":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""},"y":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""},"y2":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""}},"type":"line","colors":[{"id":"0","type":"min","hex":"#00C9FF","name":"laser","value":"0"},{"id":"1","type":"max","hex":"#9394FF","name":"comet","value":"100"}],"legend":{},"tableOptions":{"timeFormat":"","verticalTimeAxis":false,"sortBy":{"internalName":"","displayName":""},"wrapping":"","columnNames":null,"fixFirstColumn":false},"links":{"self":"/chronograf/v1/dashboards/1/cells/3c5c4102-fa40-4585-a8f9-917c77e37192"}}
+			want: `{"i":"3c5c4102-fa40-4585-a8f9-917c77e37192","x":0,"y":0,"w":4,"h":4,"name":"Untitled Cell","queries":[{"query":"SELECT mean(\"usage_user\") AS \"mean_usage_user\" FROM \"telegraf\".\"autogen\".\"cpu\" WHERE time \u003e :dashboardTime: AND \"cpu\"=:cpu: GROUP BY :interval: FILL(null)","queryConfig":{"id":"3cd3eaa4-a4b8-44b3-b69e-0c7bf6b91d9e","database":"telegraf","measurement":"cpu","retentionPolicy":"autogen","fields":[{"value":"mean","type":"func","alias":"mean_usage_user","args":[{"value":"usage_user","type":"field","alias":""}]}],"tags":{"cpu":["ChristohersMBP2.lan"]},"groupBy":{"time":"2s","tags":[]},"areTagsAccepted":true,"fill":"null","rawText":"SELECT mean(\"usage_user\") AS \"mean_usage_user\" FROM \"telegraf\".\"autogen\".\"cpu\" WHERE time \u003e :dashboardTime: AND \"cpu\"=:cpu: GROUP BY :interval: FILL(null)","range":{"upper":"","lower":"now() - 15m"},"shifts":[]},"source":""}],"axes":{"x":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""},"y":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""},"y2":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""}},"type":"line","colors":[{"id":"0","type":"min","hex":"#00C9FF","name":"laser","value":"0"},{"id":"1","type":"max","hex":"#9394FF","name":"comet","value":"100"}],"legend":{},"tableOptions":{"timeFormat":"","verticalTimeAxis":false,"sortBy":{"internalName":"","displayName":"","visible":false},"wrapping":"","columnNames":null,"fixFirstColumn":false},"links":{"self":"/chronograf/v1/dashboards/1/cells/3c5c4102-fa40-4585-a8f9-917c77e37192"}}
 `,
 		},
 		{

From d23eb9337b918ce4042adee78f90d4673d17dbf5 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 15 Mar 2018 17:56:49 -0700
Subject: [PATCH 02/38] introduce visible as prop to CustomizableColumns and
 remove duplicate constants

---
 .../GraphOptionsCustomizableColumn.tsx        | 23 +++++++++++++++----
 .../GraphOptionsCustomizeColumns.tsx          |  2 ++
 .../dashboards/reducers/cellEditorOverlay.js  |  2 ++
 ui/src/shared/constants/tableGraph.js         |  6 ++++-
 ui/src/shared/constants/thresholds.js         | 12 ----------
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
index cfed2453a6..71e96ec647 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
@@ -5,11 +5,13 @@ import InputClickToEdit from 'src/shared/components/InputClickToEdit'
 type Column = {
   internalName: string
   displayName: string
+  visible: boolean
 }
 
 interface Props {
   internalName: string
   displayName: string
+  visible: boolean
   onColumnRename: (column: Column) => void
 }
 
@@ -18,19 +20,30 @@ class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
     super(props)
 
     this.handleColumnRename = this.handleColumnRename.bind(this)
+    this.handleToggleVisible = this.handleToggleVisible.bind(this)
   }
 
-  handleColumnRename(rename) {
-    const {onColumnRename, internalName} = this.props
-    onColumnRename({internalName, displayName: rename})
+  handleColumnRename(rename: string) {
+    const {onColumnRename, internalName, visible} = this.props
+    onColumnRename({internalName, displayName: rename, visible})
+  }
+
+  handleToggleVisible() {
+    const {onColumnRename, internalName, displayName, visible} = this.props
+    onColumnRename({internalName, displayName, visible: !visible})
   }
 
   render() {
-    const {internalName, displayName} = this.props
+    const {internalName, displayName, visible} = this.props
+    console.log('VISIBLE:', visible)
 
     return (
       <div className="column-controls--section">
-        <div className="column-controls--label">
+        <div
+          className="column-controls--label"
+          onClick={this.handleToggleVisible}
+        >
+          <span className="icon eye" />
           {internalName}
         </div>
         <InputClickToEdit
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx
index 3d4e447594..f14c05d25f 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx
@@ -6,6 +6,7 @@ import uuid from 'uuid'
 type Column = {
   internalName: string
   displayName: string
+  visible: boolean
 }
 
 interface Props {
@@ -26,6 +27,7 @@ const GraphOptionsCustomizeColumns: SFC<Props> = ({
             key={uuid.v4()}
             internalName={col.internalName}
             displayName={col.displayName}
+            visible={col.visible}
             onColumnRename={onColumnRename}
           />
         )
diff --git a/ui/src/dashboards/reducers/cellEditorOverlay.js b/ui/src/dashboards/reducers/cellEditorOverlay.js
index 4629e89750..402f488f64 100644
--- a/ui/src/dashboards/reducers/cellEditorOverlay.js
+++ b/ui/src/dashboards/reducers/cellEditorOverlay.js
@@ -11,6 +11,8 @@ import {
 
 import {initializeOptions} from 'src/dashboards/constants/cellEditor'
 
+import {initializeOptions} from 'src/shared/constants/tableGraph'
+
 export const initialState = {
   cell: null,
   thresholdsListType: THRESHOLD_TYPE_TEXT,
diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js
index 2f3c9d9444..83b439412c 100644
--- a/ui/src/shared/constants/tableGraph.js
+++ b/ui/src/shared/constants/tableGraph.js
@@ -6,7 +6,11 @@ export const NULL_HOVER_TIME = '0'
 export const TIME_FORMAT_DEFAULT = 'MM/DD/YYYY HH:mm:ss.ss'
 export const TIME_FORMAT_CUSTOM = 'Custom'
 
-export const TIME_COLUMN_DEFAULT = {internalName: 'time', displayName: ''}
+export const TIME_COLUMN_DEFAULT = {
+  internalName: 'time',
+  displayName: '',
+  visible: true,
+}
 
 export const FIX_FIRST_COLUMN_DEFAULT = true
 
diff --git a/ui/src/shared/constants/thresholds.js b/ui/src/shared/constants/thresholds.js
index 9941bef092..05409fe2eb 100644
--- a/ui/src/shared/constants/thresholds.js
+++ b/ui/src/shared/constants/thresholds.js
@@ -13,8 +13,6 @@ export const THRESHOLD_TYPE_TEXT = 'text'
 export const THRESHOLD_TYPE_BG = 'background'
 export const THRESHOLD_TYPE_BASE = 'base'
 
-export const TIME_FORMAT_DEFAULT = 'MM/DD/YYYY HH:mm:ss.ss'
-
 export const THRESHOLD_COLORS = [
   {
     hex: '#BF3D5E',
@@ -121,16 +119,6 @@ export const DEFAULT_THRESHOLDS_LIST_COLORS = [
   },
 ]
 
-export const DEFAULT_TABLE_COLORS = [
-  {
-    type: THRESHOLD_TYPE_BG,
-    hex: THRESHOLD_COLORS[18].hex,
-    id: THRESHOLD_TYPE_BASE,
-    name: THRESHOLD_COLORS[18].name,
-    value: 0,
-  },
-]
-
 export const validateThresholdsListColors = (colors, type) => {
   if (!colors || colors.length === 0) {
     return DEFAULT_THRESHOLDS_LIST_COLORS

From fede364f8853edc2b6925531a63e392a4f76754a Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 16 Mar 2018 14:49:16 -0700
Subject: [PATCH 03/38] connect tableOptions field visibility toggle to
 tableGraph

---
 .../GraphOptionsCustomizableColumn.tsx        | 19 +++----
 .../GraphOptionsCustomizeColumns.tsx          |  6 +--
 ui/src/dashboards/components/TableOptions.tsx | 13 +++--
 ui/src/shared/components/TableGraph.js        | 54 ++++++++++++++++---
 .../style/components/ceo-display-options.scss | 15 +++++-
 .../GraphOptionsCustomizableColumn.test.tsx   | 15 +++---
 .../GraphOptionsCustomizeColumns.test.tsx     |  2 +-
 7 files changed, 91 insertions(+), 33 deletions(-)

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
index 71e96ec647..8b452585be 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
@@ -12,7 +12,7 @@ interface Props {
   internalName: string
   displayName: string
   visible: boolean
-  onColumnRename: (column: Column) => void
+  onColumnUpdate: (column: Column) => void
 }
 
 class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
@@ -24,26 +24,26 @@ class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
   }
 
   handleColumnRename(rename: string) {
-    const {onColumnRename, internalName, visible} = this.props
-    onColumnRename({internalName, displayName: rename, visible})
+    const {onColumnUpdate, internalName, visible} = this.props
+    onColumnUpdate({internalName, displayName: rename, visible})
   }
 
   handleToggleVisible() {
-    const {onColumnRename, internalName, displayName, visible} = this.props
-    onColumnRename({internalName, displayName, visible: !visible})
+    const {onColumnUpdate, internalName, displayName, visible} = this.props
+    onColumnUpdate({internalName, displayName, visible: !visible})
   }
 
   render() {
     const {internalName, displayName, visible} = this.props
-    console.log('VISIBLE:', visible)
 
     return (
       <div className="column-controls--section">
         <div
-          className="column-controls--label"
-          onClick={this.handleToggleVisible}
+          className={
+            visible ? 'column-controls--label' : 'column-controls--label-hidden'
+          }
         >
-          <span className="icon eye" />
+          <span className="icon eye" onClick={this.handleToggleVisible} />
           {internalName}
         </div>
         <InputClickToEdit
@@ -52,6 +52,7 @@ class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
           onBlur={this.handleColumnRename}
           placeholder="Rename..."
           appearAsNormalInput={true}
+          disabled={!visible}
         />
       </div>
     )
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx
index f14c05d25f..2bae083327 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx
@@ -11,12 +11,12 @@ type Column = {
 
 interface Props {
   columns: Column[]
-  onColumnRename: (column: Column) => void
+  onColumnUpdate: (column: Column) => void
 }
 
 const GraphOptionsCustomizeColumns: SFC<Props> = ({
   columns,
-  onColumnRename,
+  onColumnUpdate,
 }) => {
   return (
     <div className="graph-options-group">
@@ -28,7 +28,7 @@ const GraphOptionsCustomizeColumns: SFC<Props> = ({
             internalName={col.internalName}
             displayName={col.displayName}
             visible={col.visible}
-            onColumnRename={onColumnRename}
+            onColumnUpdate={onColumnUpdate}
           />
         )
       })}
diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 5d9a8f7ab2..c27bb3041d 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -21,6 +21,7 @@ import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
 type TableColumn = {
   internalName: string
   displayName: string
+  visible: boolean
 }
 
 type Options = {
@@ -74,7 +75,7 @@ export class TableOptions extends PureComponent<Props, {}> {
           const existing = this.columnNames.find(
             c => c.internalName === internalName
           )
-          return existing || {internalName, displayName: ''}
+          return existing || {internalName, displayName: '', visible: true}
         })
       })
     )
@@ -92,7 +93,11 @@ export class TableOptions extends PureComponent<Props, {}> {
 
   handleChooseSortBy = option => {
     const {tableOptions, handleUpdateTableOptions} = this.props
-    const sortBy = {displayName: option.text, internalName: option.key}
+    const sortBy = {
+      displayName: option.text,
+      internalName: option.key,
+      visible: true,
+    }
 
     handleUpdateTableOptions({...tableOptions, sortBy})
   }
@@ -115,7 +120,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     handleUpdateTableOptions({...tableOptions, fixFirstColumn})
   }
 
-  handleColumnRename = column => {
+  handleColumnUpdate = column => {
     const {handleUpdateTableOptions, tableOptions} = this.props
     const {columnNames} = tableOptions
     const updatedColumns = columnNames.map(
@@ -173,7 +178,7 @@ export class TableOptions extends PureComponent<Props, {}> {
           </div>
           <GraphOptionsCustomizeColumns
             columns={columns}
-            onColumnRename={this.handleColumnRename}
+            onColumnUpdate={this.handleColumnUpdate}
           />
           <ThresholdsList showListHeading={true} onResetFocus={onResetFocus} />
           <div className="form-group-wrapper graph-options-group">
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 8ac5960d76..3e2eeae41a 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -24,26 +24,56 @@ class TableGraph extends Component {
     this.state = {
       data: [[]],
       unzippedData: [[]],
+      visibleData: [[]],
       hoveredColumnIndex: NULL_COLUMN_INDEX,
       hoveredRowIndex: NULL_ROW_INDEX,
       sortByColumnIndex: -1,
+      invisibleFieldIndices: [],
     }
   }
 
   componentWillReceiveProps(nextProps) {
     const {data, unzippedData} = timeSeriesToTableGraph(nextProps.data)
 
-    const {tableOptions: {sortBy: {internalName}}} = nextProps
+    const {
+      tableOptions: {sortBy: {internalName}, columnNames, verticalTimeAxis},
+    } = nextProps
     const sortByColumnIndex = _.indexOf(data[0], internalName)
 
-    const sortedData = _.sortBy(_.drop(data, 1), sortByColumnIndex)
+    const sortedData = [
+      data[0],
+      ..._.sortBy(_.drop(data, 1), sortByColumnIndex),
+    ]
+
+    if (verticalTimeAxis) {
+      const visibleColumns = {}
+      const filteredData = sortedData.map((row, i) => {
+        return row.filter((col, j) => {
+          if (i === 0) {
+            const foundColumn = columnNames.find(
+              column => column.internalName === col
+            )
+            visibleColumns[j] = foundColumn && foundColumn.visible
+          }
+          return visibleColumns[j]
+        })
+      })
+      const visibleData = filteredData[0].length ? filteredData : [[]]
+    }
+
     this.setState({
-      data: [data[0], ...sortedData],
+      data: sortedData,
+      visibleData,
       unzippedData,
       sortByColumnIndex,
     })
   }
 
+  componentWillMount() {
+    this._data = [[]]
+    this._visibleData = [[]]
+  }
+
   calcHoverTimeIndex = (data, hoverTime, verticalTimeAxis) => {
     if (isEmpty(data) || hoverTime === NULL_HOVER_TIME) {
       return undefined
@@ -101,11 +131,17 @@ class TableGraph extends Component {
       FIX_FIRST_COLUMN_DEFAULT
     )
 
+    const timeField = columnNames.find(
+      column => column.internalName === TIME_COLUMN_DEFAULT.internalName
+    )
+
     const isFixedRow = rowIndex === 0 && columnIndex > 0
     const isFixedColumn = fixFirstColumn && rowIndex > 0 && columnIndex === 0
-    const isTimeData = tableOptions.verticalTimeAxis
-      ? rowIndex > 0 && columnIndex === 0
-      : isFixedRow
+    const isTimeData =
+      timeField.visible &&
+      (tableOptions.verticalTimeAxis
+        ? rowIndex > 0 && columnIndex === 0
+        : isFixedRow)
     const isFixedCorner = rowIndex === 0 && columnIndex === 0
     const isLastRow = rowIndex === rowCount - 1
     const isLastColumn = columnIndex === columnCount - 1
@@ -168,7 +204,9 @@ class TableGraph extends Component {
 
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
 
-    const data = verticalTimeAxis ? this.state.data : this.state.unzippedData
+    const data = verticalTimeAxis
+      ? this.state.visibleData
+      : this.state.unzippedData
 
     const columnCount = _.get(data, ['0', 'length'], 0)
     const rowCount = data.length
@@ -193,7 +231,7 @@ class TableGraph extends Component {
         ref={gridContainer => (this.gridContainer = gridContainer)}
         onMouseOut={this.handleMouseOut}
       >
-        {!isEmpty(data) &&
+        {!isEmpty(visibleData) &&
           <MultiGrid
             columnCount={columnCount}
             columnWidth={COLUMN_WIDTH}
diff --git a/ui/src/style/components/ceo-display-options.scss b/ui/src/style/components/ceo-display-options.scss
index 8bfd67d9f4..25b9f0d202 100644
--- a/ui/src/style/components/ceo-display-options.scss
+++ b/ui/src/style/components/ceo-display-options.scss
@@ -257,17 +257,30 @@ button.btn.btn-primary.btn-sm.gauge-controls--add-threshold {
 }
 
 
-.column-controls--label {
+.column-controls--label, .column-controls--label-hidden {
   @extend %gauge-controls-label-styles;
   color: $g16-pearl;
   background-color: $g4-onyx;
   flex: 2 0 0;
+
+  > span {
+    padding-right: 5px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+.column-controls--label-hidden {
+  color: $g0-obsidian;
 }
 .column-controls-input {
   flex: 1 0 0;
   display: flex;
   align-items: center;
 }
+
+
 /*
   Cell Editor Overlay - Single-Stat Controls
   ------------------------------------------------------------------------------
diff --git a/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx
index 477807e29d..4e05b0c421 100644
--- a/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx
+++ b/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx
@@ -9,7 +9,8 @@ const setup = (override = {}) => {
   const props = {
     internalName: '',
     displayName: '',
-    onColumnRename: () => {},
+    visible: true,
+    onColumnUpdate: () => {},
     ...override,
   }
 
@@ -42,17 +43,17 @@ describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => {
   })
 
   describe('instance methods', () => {
-    describe('#handleColumnRename', () => {
-      it('calls onColumnRename once', () => {
-        const onColumnRename = jest.fn()
+    describe('#handleColumnUpdate', () => {
+      it('calls onColumnUpdate once', () => {
+        const onColumnUpdate = jest.fn()
         const internalName = 'test'
-        const {instance} = setup({onColumnRename, internalName})
+        const {instance} = setup({onColumnUpdate, internalName})
         const rename = 'TEST'
 
         instance.handleColumnRename(rename)
 
-        expect(onColumnRename).toHaveBeenCalledTimes(1)
-        expect(onColumnRename).toHaveBeenCalledWith({
+        expect(onColumnUpdate).toHaveBeenCalledTimes(1)
+        expect(onColumnUpdate).toHaveBeenCalledWith({
           internalName,
           displayName: rename,
         })
diff --git a/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx
index 23dee525e4..4fd67f34ee 100644
--- a/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx
+++ b/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx
@@ -9,7 +9,7 @@ import {shallow} from 'enzyme'
 const setup = (override = {}) => {
   const props = {
     columns: [],
-    onColumnRename: () => {},
+    onColumnUpdate: () => {},
     ...override,
   }
 

From d3198f2e453ddc9987ff60714256f3f26ec5baa0 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 16 Mar 2018 15:39:21 -0700
Subject: [PATCH 04/38] add filtering out invisible rows for horizontal time
 axis

---
 ui/src/shared/components/TableGraph.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 3e2eeae41a..dba80faac7 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -45,9 +45,10 @@ class TableGraph extends Component {
       ..._.sortBy(_.drop(data, 1), sortByColumnIndex),
     ]
 
+    let filteredData = [[]]
     if (verticalTimeAxis) {
       const visibleColumns = {}
-      const filteredData = sortedData.map((row, i) => {
+      filteredData = sortedData.map((row, i) => {
         return row.filter((col, j) => {
           if (i === 0) {
             const foundColumn = columnNames.find(
@@ -58,9 +59,17 @@ class TableGraph extends Component {
           return visibleColumns[j]
         })
       })
-      const visibleData = filteredData[0].length ? filteredData : [[]]
+    } else {
+      filteredData = data.filter(row => {
+        const foundField = columnNames.find(
+          column => column.internalName === row[0]
+        )
+        return foundField && foundField.visible
+      })
     }
 
+    const visibleData = filteredData[0].length ? filteredData : [[]]
+
     this.setState({
       data: sortedData,
       visibleData,

From 03e884e2d6e37718c3324bae6a6fe893fa2469f1 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 16 Mar 2018 16:04:01 -0700
Subject: [PATCH 05/38] update GraphOptionsCustomizableColumn.test with visible
 prop and toggling it

---
 .../GraphOptionsCustomizableColumn.test.tsx   | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx
index 4e05b0c421..ab5d7ce1b1 100644
--- a/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx
+++ b/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx
@@ -26,8 +26,10 @@ describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => {
       const {wrapper} = setup()
       const label = wrapper.find('div').last()
       const input = wrapper.find(InputClickToEdit)
+      const icon = wrapper.find('span')
 
       expect(label.exists()).toBe(true)
+      expect(icon.exists()).toBe(true)
       expect(input.exists()).toBe(true)
     })
 
@@ -36,18 +38,34 @@ describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => {
         const internalName = 'test'
         const {wrapper} = setup({internalName})
         const label = wrapper.find('div').last()
+        const icon = wrapper.find('span')
+
         expect(label.exists()).toBe(true)
         expect(label.children().contains(internalName)).toBe(true)
+        expect(icon.exists()).toBe(true)
+      })
+    })
+
+    describe('when visible is false', () => {
+      it('displays disabled inputClickToEdit', () => {
+        const visible = false
+        const {wrapper} = setup({visible})
+        const input = wrapper.find(InputClickToEdit)
+
+        expect(input.prop('disabled')).toBe(!visible)
       })
     })
   })
 
   describe('instance methods', () => {
     describe('#handleColumnUpdate', () => {
-      it('calls onColumnUpdate once', () => {
+      it('calls onColumnUpdate once with internalName, new name, and visible', () => {
         const onColumnUpdate = jest.fn()
         const internalName = 'test'
-        const {instance} = setup({onColumnUpdate, internalName})
+        const {instance, props: {visible}} = setup({
+          onColumnUpdate,
+          internalName,
+        })
         const rename = 'TEST'
 
         instance.handleColumnRename(rename)
@@ -56,6 +74,27 @@ describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => {
         expect(onColumnUpdate).toHaveBeenCalledWith({
           internalName,
           displayName: rename,
+          visible,
+        })
+      })
+    })
+
+    describe('#handleToggleVisible', () => {
+      it('calls onColumnUpdate once with !visible, internalName, and displayName', () => {
+        const onColumnUpdate = jest.fn()
+        const visible = true
+        const {instance, props: {internalName, displayName}} = setup({
+          visible,
+          onColumnUpdate,
+        })
+
+        instance.handleToggleVisible()
+
+        expect(onColumnUpdate).toHaveBeenCalledTimes(1)
+        expect(onColumnUpdate).toHaveBeenCalledWith({
+          internalName,
+          displayName,
+          visible: !visible,
         })
       })
     })

From cb9c6ac00d13311461f0f13447640c40db6f7f4b Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 16 Mar 2018 17:03:20 -0700
Subject: [PATCH 06/38] WIP change backend TableColumn to RenamableField and
 ColumnNames in TableOptions to FieldNames

---
 bolt/internal/internal.go      |  32 ++---
 bolt/internal/internal.pb.go   | 239 +++++++++++++++++----------------
 bolt/internal/internal.proto   |   8 +-
 bolt/internal/internal_test.go |  14 +-
 chronograf.go                  |  16 +--
 integrations/server_test.go    |   4 +-
 server/cells_test.go           |   2 +-
 7 files changed, 158 insertions(+), 157 deletions(-)

diff --git a/bolt/internal/internal.go b/bolt/internal/internal.go
index 2539443fd4..b151ebb339 100644
--- a/bolt/internal/internal.go
+++ b/bolt/internal/internal.go
@@ -265,18 +265,18 @@ func MarshalDashboard(d chronograf.Dashboard) ([]byte, error) {
 			}
 		}
 
-		sortBy := &TableColumn{
+		sortBy := &RenamableField{
 			InternalName: c.TableOptions.SortBy.InternalName,
 			DisplayName:  c.TableOptions.SortBy.DisplayName,
 			Visible:      c.TableOptions.SortBy.Visible,
 		}
 
-		columnNames := make([]*TableColumn, len(c.TableOptions.ColumnNames))
-		for i, column := range c.TableOptions.ColumnNames {
-			columnNames[i] = &TableColumn{
-				InternalName: column.InternalName,
-				DisplayName:  column.DisplayName,
-				Visible:      column.Visible,
+		fieldNames := make([]*RenamableField, len(c.TableOptions.FieldNames))
+		for i, field := range c.TableOptions.FieldNames {
+			fieldNames[i] = &RenamableField{
+				InternalName: field.InternalName,
+				DisplayName:  field.DisplayName,
+				Visible:      field.Visible,
 			}
 		}
 
@@ -285,7 +285,7 @@ func MarshalDashboard(d chronograf.Dashboard) ([]byte, error) {
 			VerticalTimeAxis: c.TableOptions.VerticalTimeAxis,
 			SortBy:           sortBy,
 			Wrapping:         c.TableOptions.Wrapping,
-			ColumnNames:      columnNames,
+			FieldNames:       fieldNames,
 			FixFirstColumn:   c.TableOptions.FixFirstColumn,
 		}
 
@@ -433,7 +433,7 @@ func UnmarshalDashboard(data []byte, d *chronograf.Dashboard) error {
 
 		tableOptions := chronograf.TableOptions{}
 		if c.TableOptions != nil {
-			sortBy := chronograf.TableColumn{}
+			sortBy := chronograf.RenamableField{}
 			if c.TableOptions.SortBy != nil {
 				sortBy.InternalName = c.TableOptions.SortBy.InternalName
 				sortBy.DisplayName = c.TableOptions.SortBy.DisplayName
@@ -441,14 +441,14 @@ func UnmarshalDashboard(data []byte, d *chronograf.Dashboard) error {
 			}
 			tableOptions.SortBy = sortBy
 
-			columnNames := make([]chronograf.TableColumn, len(c.TableOptions.ColumnNames))
-			for i, column := range c.TableOptions.ColumnNames {
-				columnNames[i] = chronograf.TableColumn{}
-				columnNames[i].InternalName = column.InternalName
-				columnNames[i].DisplayName = column.DisplayName
-				columnNames[i].Visible = column.Visible
+			fieldNames := make([]chronograf.RenamableField, len(c.TableOptions.FieldNames))
+			for i, field := range c.TableOptions.FieldNames {
+				fieldNames[i] = chronograf.RenamableField{}
+				fieldNames[i].InternalName = field.InternalName
+				fieldNames[i].DisplayName = field.DisplayName
+				fieldNames[i].Visible = field.Visible
 			}
-			tableOptions.ColumnNames = columnNames
+			tableOptions.FieldNames = fieldNames
 			tableOptions.TimeFormat = c.TableOptions.TimeFormat
 			tableOptions.VerticalTimeAxis = c.TableOptions.VerticalTimeAxis
 			tableOptions.Wrapping = c.TableOptions.Wrapping
diff --git a/bolt/internal/internal.pb.go b/bolt/internal/internal.pb.go
index d3547db61e..3e1d7ab2c2 100644
--- a/bolt/internal/internal.pb.go
+++ b/bolt/internal/internal.pb.go
@@ -12,7 +12,7 @@ It has these top-level messages:
 	Dashboard
 	DashboardCell
 	TableOptions
-	TableColumn
+	RenamableField
 	Color
 	Legend
 	Axis
@@ -316,12 +316,12 @@ func (m *DashboardCell) GetTableOptions() *TableOptions {
 }
 
 type TableOptions struct {
-	TimeFormat       string         `protobuf:"bytes,1,opt,name=timeFormat,proto3" json:"timeFormat,omitempty"`
-	VerticalTimeAxis bool           `protobuf:"varint,2,opt,name=verticalTimeAxis,proto3" json:"verticalTimeAxis,omitempty"`
-	SortBy           *TableColumn   `protobuf:"bytes,3,opt,name=sortBy" json:"sortBy,omitempty"`
-	Wrapping         string         `protobuf:"bytes,4,opt,name=wrapping,proto3" json:"wrapping,omitempty"`
-	ColumnNames      []*TableColumn `protobuf:"bytes,5,rep,name=columnNames" json:"columnNames,omitempty"`
-	FixFirstColumn   bool           `protobuf:"varint,6,opt,name=fixFirstColumn,proto3" json:"fixFirstColumn,omitempty"`
+	TimeFormat       string            `protobuf:"bytes,1,opt,name=timeFormat,proto3" json:"timeFormat,omitempty"`
+	VerticalTimeAxis bool              `protobuf:"varint,2,opt,name=verticalTimeAxis,proto3" json:"verticalTimeAxis,omitempty"`
+	SortBy           *RenamableField   `protobuf:"bytes,3,opt,name=sortBy" json:"sortBy,omitempty"`
+	Wrapping         string            `protobuf:"bytes,4,opt,name=wrapping,proto3" json:"wrapping,omitempty"`
+	FieldNames       []*RenamableField `protobuf:"bytes,5,rep,name=fieldNames" json:"fieldNames,omitempty"`
+	FixFirstColumn   bool              `protobuf:"varint,6,opt,name=fixFirstColumn,proto3" json:"fixFirstColumn,omitempty"`
 }
 
 func (m *TableOptions) Reset()                    { *m = TableOptions{} }
@@ -343,7 +343,7 @@ func (m *TableOptions) GetVerticalTimeAxis() bool {
 	return false
 }
 
-func (m *TableOptions) GetSortBy() *TableColumn {
+func (m *TableOptions) GetSortBy() *RenamableField {
 	if m != nil {
 		return m.SortBy
 	}
@@ -357,9 +357,9 @@ func (m *TableOptions) GetWrapping() string {
 	return ""
 }
 
-func (m *TableOptions) GetColumnNames() []*TableColumn {
+func (m *TableOptions) GetFieldNames() []*RenamableField {
 	if m != nil {
-		return m.ColumnNames
+		return m.FieldNames
 	}
 	return nil
 }
@@ -371,32 +371,32 @@ func (m *TableOptions) GetFixFirstColumn() bool {
 	return false
 }
 
-type TableColumn struct {
+type RenamableField struct {
 	InternalName string `protobuf:"bytes,1,opt,name=internalName,proto3" json:"internalName,omitempty"`
 	DisplayName  string `protobuf:"bytes,2,opt,name=displayName,proto3" json:"displayName,omitempty"`
 	Visible      bool   `protobuf:"varint,3,opt,name=visible,proto3" json:"visible,omitempty"`
 }
 
-func (m *TableColumn) Reset()                    { *m = TableColumn{} }
-func (m *TableColumn) String() string            { return proto.CompactTextString(m) }
-func (*TableColumn) ProtoMessage()               {}
-func (*TableColumn) Descriptor() ([]byte, []int) { return fileDescriptorInternal, []int{4} }
+func (m *RenamableField) Reset()                    { *m = RenamableField{} }
+func (m *RenamableField) String() string            { return proto.CompactTextString(m) }
+func (*RenamableField) ProtoMessage()               {}
+func (*RenamableField) Descriptor() ([]byte, []int) { return fileDescriptorInternal, []int{4} }
 
-func (m *TableColumn) GetInternalName() string {
+func (m *RenamableField) GetInternalName() string {
 	if m != nil {
 		return m.InternalName
 	}
 	return ""
 }
 
-func (m *TableColumn) GetDisplayName() string {
+func (m *RenamableField) GetDisplayName() string {
 	if m != nil {
 		return m.DisplayName
 	}
 	return ""
 }
 
-func (m *TableColumn) GetVisible() bool {
+func (m *RenamableField) GetVisible() bool {
 	if m != nil {
 		return m.Visible
 	}
@@ -1304,7 +1304,7 @@ func init() {
 	proto.RegisterType((*Dashboard)(nil), "internal.Dashboard")
 	proto.RegisterType((*DashboardCell)(nil), "internal.DashboardCell")
 	proto.RegisterType((*TableOptions)(nil), "internal.TableOptions")
-	proto.RegisterType((*TableColumn)(nil), "internal.TableColumn")
+	proto.RegisterType((*RenamableField)(nil), "internal.RenamableField")
 	proto.RegisterType((*Color)(nil), "internal.Color")
 	proto.RegisterType((*Legend)(nil), "internal.Legend")
 	proto.RegisterType((*Axis)(nil), "internal.Axis")
@@ -1330,104 +1330,105 @@ func init() {
 func init() { proto.RegisterFile("internal.proto", fileDescriptorInternal) }
 
 var fileDescriptorInternal = []byte{
-	// 1582 bytes of a gzipped FileDescriptorProto
-	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0xbc, 0x57, 0xdd, 0x8e, 0xdb, 0x44,
-	0x14, 0x96, 0x93, 0x38, 0x89, 0x4f, 0xb6, 0xcb, 0xca, 0x2c, 0xad, 0x29, 0x12, 0x0a, 0x16, 0x3f,
-	0xe1, 0xa7, 0x0b, 0x4a, 0x85, 0x40, 0x15, 0x54, 0xca, 0x6e, 0x68, 0x59, 0xba, 0xed, 0x6e, 0x27,
-	0xbb, 0xcb, 0x15, 0xaa, 0x26, 0xc9, 0x24, 0xb1, 0xea, 0xd8, 0x66, 0x6c, 0xef, 0xc6, 0x3c, 0x00,
-	0x8f, 0x81, 0x84, 0x04, 0x2f, 0x80, 0xb8, 0xe1, 0x8a, 0x7b, 0x1e, 0x84, 0x57, 0x80, 0x4b, 0x74,
-	0xe6, 0xc7, 0x99, 0x6c, 0xd2, 0xaa, 0x48, 0x88, 0xbb, 0xf9, 0xce, 0x39, 0x3e, 0x73, 0xfe, 0xcf,
-	0x18, 0xb6, 0x83, 0x28, 0x63, 0x3c, 0xa2, 0xe1, 0x5e, 0xc2, 0xe3, 0x2c, 0x76, 0x9b, 0x1a, 0xfb,
-	0x7f, 0x56, 0xa0, 0x3e, 0x88, 0x73, 0x3e, 0x62, 0xee, 0x36, 0x54, 0x0e, 0xfb, 0x9e, 0xd5, 0xb6,
-	0x3a, 0x55, 0x52, 0x39, 0xec, 0xbb, 0x2e, 0xd4, 0x1e, 0xd1, 0x39, 0xf3, 0x2a, 0x6d, 0xab, 0xe3,
-	0x10, 0x71, 0x46, 0xda, 0x69, 0x91, 0x30, 0xaf, 0x2a, 0x69, 0x78, 0x76, 0x6f, 0x42, 0xf3, 0x2c,
-	0x45, 0x6d, 0x73, 0xe6, 0xd5, 0x04, 0xbd, 0xc4, 0xc8, 0x3b, 0xa1, 0x69, 0x7a, 0x19, 0xf3, 0xb1,
-	0x67, 0x4b, 0x9e, 0xc6, 0xee, 0x0e, 0x54, 0xcf, 0xc8, 0x91, 0x57, 0x17, 0x64, 0x3c, 0xba, 0x1e,
-	0x34, 0xfa, 0x6c, 0x42, 0xf3, 0x30, 0xf3, 0x1a, 0x6d, 0xab, 0xd3, 0x24, 0x1a, 0xa2, 0x9e, 0x53,
-	0x16, 0xb2, 0x29, 0xa7, 0x13, 0xaf, 0x29, 0xf5, 0x68, 0xec, 0xee, 0x81, 0x7b, 0x18, 0xa5, 0x6c,
-	0x94, 0x73, 0x36, 0x78, 0x1a, 0x24, 0xe7, 0x8c, 0x07, 0x93, 0xc2, 0x73, 0x84, 0x82, 0x0d, 0x1c,
-	0xbc, 0xe5, 0x21, 0xcb, 0x28, 0xde, 0x0d, 0x42, 0x95, 0x86, 0xae, 0x0f, 0x5b, 0x83, 0x19, 0xe5,
-	0x6c, 0x3c, 0x60, 0x23, 0xce, 0x32, 0xaf, 0x25, 0xd8, 0x2b, 0x34, 0x94, 0x39, 0xe6, 0x53, 0x1a,
-	0x05, 0xdf, 0xd1, 0x2c, 0x88, 0x23, 0x6f, 0x4b, 0xca, 0x98, 0x34, 0x8c, 0x12, 0x89, 0x43, 0xe6,
-	0x5d, 0x93, 0x51, 0xc2, 0xb3, 0xff, 0xab, 0x05, 0x4e, 0x9f, 0xa6, 0xb3, 0x61, 0x4c, 0xf9, 0xf8,
-	0x85, 0x62, 0x7d, 0x0b, 0xec, 0x11, 0x0b, 0xc3, 0xd4, 0xab, 0xb6, 0xab, 0x9d, 0x56, 0xf7, 0xc6,
-	0x5e, 0x99, 0xc4, 0x52, 0xcf, 0x01, 0x0b, 0x43, 0x22, 0xa5, 0xdc, 0x8f, 0xc0, 0xc9, 0xd8, 0x3c,
-	0x09, 0x69, 0xc6, 0x52, 0xaf, 0x26, 0x3e, 0x71, 0x97, 0x9f, 0x9c, 0x2a, 0x16, 0x59, 0x0a, 0xad,
-	0xb9, 0x62, 0xaf, 0xbb, 0xe2, 0xff, 0x56, 0x85, 0x6b, 0x2b, 0xd7, 0xb9, 0x5b, 0x60, 0x2d, 0x84,
-	0xe5, 0x36, 0xb1, 0x16, 0x88, 0x0a, 0x61, 0xb5, 0x4d, 0xac, 0x02, 0xd1, 0xa5, 0xa8, 0x0d, 0x9b,
-	0x58, 0x97, 0x88, 0x66, 0xa2, 0x22, 0x6c, 0x62, 0xcd, 0xdc, 0x77, 0xa1, 0xf1, 0x6d, 0xce, 0x78,
-	0xc0, 0x52, 0xcf, 0x16, 0xd6, 0xbd, 0xb4, 0xb4, 0xee, 0x71, 0xce, 0x78, 0x41, 0x34, 0x1f, 0xa3,
-	0x21, 0xaa, 0x49, 0x96, 0x86, 0x38, 0x23, 0x2d, 0xc3, 0xca, 0x6b, 0x48, 0x1a, 0x9e, 0x55, 0x14,
-	0x65, 0x3d, 0x60, 0x14, 0x3f, 0x86, 0x1a, 0x5d, 0xb0, 0xd4, 0x73, 0x84, 0xfe, 0x37, 0x9e, 0x11,
-	0xb0, 0xbd, 0xde, 0x82, 0xa5, 0x5f, 0x44, 0x19, 0x2f, 0x88, 0x10, 0x77, 0xdf, 0x81, 0xfa, 0x28,
-	0x0e, 0x63, 0x9e, 0x7a, 0x70, 0xd5, 0xb0, 0x03, 0xa4, 0x13, 0xc5, 0x76, 0x3b, 0x50, 0x0f, 0xd9,
-	0x94, 0x45, 0x63, 0x51, 0x19, 0xad, 0xee, 0xce, 0x52, 0xf0, 0x48, 0xd0, 0x89, 0xe2, 0xbb, 0x77,
-	0x60, 0x2b, 0xa3, 0xc3, 0x90, 0x1d, 0x27, 0x18, 0xc5, 0x54, 0x54, 0x49, 0xab, 0x7b, 0xdd, 0xc8,
-	0x87, 0xc1, 0x25, 0x2b, 0xb2, 0x37, 0xef, 0x83, 0x53, 0x5a, 0x88, 0x4d, 0xf2, 0x94, 0x15, 0x22,
-	0xde, 0x0e, 0xc1, 0xa3, 0xfb, 0x26, 0xd8, 0x17, 0x34, 0xcc, 0x65, 0xad, 0xb4, 0xba, 0xdb, 0x4b,
-	0x9d, 0xbd, 0x45, 0x90, 0x12, 0xc9, 0xbc, 0x53, 0xf9, 0xd4, 0xf2, 0xbf, 0xaf, 0xc0, 0x96, 0x79,
-	0x8f, 0xfb, 0x3a, 0x40, 0x16, 0xcc, 0xd9, 0xbd, 0x98, 0xcf, 0x69, 0xa6, 0x74, 0x1a, 0x14, 0xf7,
-	0x3d, 0xd8, 0xb9, 0x60, 0x3c, 0x0b, 0x46, 0x34, 0x3c, 0x0d, 0xe6, 0x0c, 0xf5, 0x89, 0x5b, 0x9a,
-	0x64, 0x8d, 0xee, 0xde, 0x82, 0x7a, 0x1a, 0xf3, 0x6c, 0xbf, 0x10, 0xf9, 0x6e, 0x75, 0x5f, 0xb9,
-	0xe2, 0xdb, 0x41, 0x1c, 0xe6, 0xf3, 0x88, 0x28, 0x21, 0x6c, 0xe0, 0x4b, 0x4e, 0x93, 0x24, 0x88,
-	0xa6, 0x7a, 0x48, 0x68, 0xec, 0x7e, 0x02, 0xad, 0x91, 0x90, 0xc6, 0xb2, 0xd7, 0xd5, 0xf1, 0x0c,
-	0x7d, 0xa6, 0xa4, 0xfb, 0x36, 0x6c, 0x4f, 0x82, 0xc5, 0xbd, 0x80, 0xa7, 0x99, 0x64, 0x8b, 0x8a,
-	0x69, 0x92, 0x2b, 0x54, 0x7f, 0x0e, 0x2d, 0x43, 0x07, 0xd6, 0xbd, 0xd6, 0x2d, 0x9a, 0x4e, 0x06,
-	0x62, 0x85, 0xe6, 0xb6, 0xa1, 0x35, 0x0e, 0xd2, 0x24, 0xa4, 0x85, 0xd1, 0x97, 0x26, 0x09, 0xc7,
-	0xc8, 0x45, 0x90, 0x06, 0xc3, 0x50, 0x4e, 0xc3, 0x26, 0xd1, 0xd0, 0x9f, 0x82, 0x2d, 0xea, 0xc6,
-	0xe8, 0x72, 0x47, 0x77, 0xb9, 0x98, 0x9e, 0x15, 0x63, 0x7a, 0xee, 0x40, 0xf5, 0x4b, 0xb6, 0x50,
-	0x03, 0x15, 0x8f, 0xe5, 0x2c, 0xa8, 0x19, 0xb3, 0x60, 0x17, 0xec, 0x73, 0x91, 0x74, 0xd9, 0xa3,
-	0x12, 0xf8, 0x77, 0xa1, 0x2e, 0xeb, 0xae, 0xd4, 0x6c, 0x19, 0x9a, 0xdb, 0xd0, 0x3a, 0xe6, 0x01,
-	0x8b, 0x32, 0xd9, 0xdd, 0xca, 0x05, 0x83, 0xe4, 0xff, 0x62, 0x41, 0x4d, 0x24, 0xd3, 0x87, 0xad,
-	0x90, 0x4d, 0xe9, 0xa8, 0xd8, 0x8f, 0xf3, 0x68, 0x9c, 0x7a, 0x56, 0xbb, 0xda, 0xa9, 0x92, 0x15,
-	0x9a, 0x7b, 0x1d, 0xea, 0x43, 0xc9, 0xad, 0xb4, 0xab, 0x1d, 0x87, 0x28, 0x84, 0xa6, 0x85, 0x74,
-	0xc8, 0x42, 0xe5, 0x82, 0x04, 0x28, 0x9d, 0x70, 0x36, 0x09, 0x16, 0xca, 0x0d, 0x85, 0x90, 0x9e,
-	0xe6, 0x13, 0xa4, 0x4b, 0x4f, 0x14, 0x42, 0x07, 0x86, 0x34, 0x2d, 0x5b, 0x1e, 0xcf, 0xa8, 0x39,
-	0x1d, 0xd1, 0x50, 0xf7, 0xbc, 0x04, 0xfe, 0xef, 0x16, 0xee, 0x02, 0x39, 0xc3, 0xd6, 0x22, 0xfc,
-	0x2a, 0x34, 0x71, 0xbe, 0x3d, 0xb9, 0xa0, 0x5c, 0x39, 0xdc, 0x40, 0x7c, 0x4e, 0xb9, 0xfb, 0x21,
-	0xd4, 0x45, 0x6b, 0x6c, 0x98, 0xa7, 0x5a, 0x9d, 0x88, 0x2a, 0x51, 0x62, 0xe5, 0xc4, 0xa9, 0x19,
-	0x13, 0xa7, 0x74, 0xd6, 0x36, 0x9d, 0xbd, 0x05, 0x36, 0x8e, 0xae, 0x42, 0x58, 0xbf, 0x51, 0xb3,
-	0x1c, 0x70, 0x52, 0xca, 0x3f, 0x83, 0x6b, 0x2b, 0x37, 0x96, 0x37, 0x59, 0xab, 0x37, 0x2d, 0xdb,
-	0xdc, 0x51, 0x6d, 0x8d, 0x6d, 0x94, 0xb2, 0x90, 0x8d, 0x32, 0x36, 0x56, 0x55, 0x57, 0x62, 0xff,
-	0x47, 0x6b, 0xa9, 0x57, 0xdc, 0x87, 0x25, 0x3a, 0x8a, 0xe7, 0x73, 0x1a, 0x8d, 0x95, 0x6a, 0x0d,
-	0x31, 0x6e, 0xe3, 0xa1, 0x52, 0x5d, 0x19, 0x0f, 0x11, 0xf3, 0x44, 0x65, 0xb0, 0xc2, 0x13, 0xac,
-	0x9d, 0x39, 0xa3, 0x69, 0xce, 0xd9, 0x9c, 0x45, 0x99, 0x0a, 0x81, 0x49, 0x72, 0x6f, 0x40, 0x23,
-	0xa3, 0xd3, 0x27, 0x38, 0x9c, 0x54, 0x26, 0x33, 0x3a, 0x7d, 0xc0, 0x0a, 0xf7, 0x35, 0x70, 0x26,
-	0x01, 0x0b, 0xc7, 0x82, 0x25, 0xd3, 0xd9, 0x14, 0x84, 0x07, 0xac, 0xf0, 0xff, 0xb6, 0xa0, 0x3e,
-	0x60, 0xfc, 0x82, 0xf1, 0x17, 0x5a, 0x81, 0xe6, 0xd3, 0xa2, 0xfa, 0x9c, 0xa7, 0x45, 0x6d, 0xf3,
-	0xd3, 0xc2, 0x5e, 0x3e, 0x2d, 0x76, 0xc1, 0x1e, 0xf0, 0xd1, 0x61, 0x5f, 0x58, 0x54, 0x25, 0x12,
-	0x60, 0x35, 0xf6, 0x46, 0x59, 0x70, 0xc1, 0xd4, 0x7b, 0x43, 0xa1, 0xb5, 0xcd, 0xd8, 0xdc, 0xb0,
-	0xe4, 0xff, 0xe5, 0xb3, 0xc3, 0xff, 0xc1, 0x82, 0xfa, 0x11, 0x2d, 0xe2, 0x3c, 0x5b, 0xab, 0xda,
-	0x36, 0xb4, 0x7a, 0x49, 0x12, 0x06, 0xa3, 0x95, 0x4e, 0x35, 0x48, 0x28, 0xf1, 0xd0, 0xc8, 0x87,
-	0x8c, 0x85, 0x49, 0xc2, 0xb5, 0x70, 0x20, 0x5e, 0x0b, 0x72, 0xf5, 0x1b, 0x6b, 0x41, 0x3e, 0x12,
-	0x04, 0x13, 0x83, 0xd6, 0xcb, 0xb3, 0x78, 0x12, 0xc6, 0x97, 0x22, 0x3a, 0x4d, 0x52, 0x62, 0xff,
-	0x8f, 0x0a, 0xd4, 0xfe, 0xaf, 0x0d, 0xbf, 0x05, 0x56, 0xa0, 0x8a, 0xc3, 0x0a, 0xca, 0x7d, 0xdf,
-	0x30, 0xf6, 0xbd, 0x07, 0x8d, 0x82, 0xd3, 0x68, 0xca, 0x52, 0xaf, 0x29, 0xa6, 0x91, 0x86, 0x82,
-	0x23, 0xfa, 0x4e, 0x2e, 0x7a, 0x87, 0x68, 0x58, 0xf6, 0x11, 0x18, 0x7d, 0xf4, 0x81, 0x7a, 0x13,
-	0xb4, 0x84, 0x45, 0xde, 0x6a, 0x58, 0xae, 0x3e, 0x05, 0xfe, 0xbb, 0xdd, 0xfb, 0x97, 0x05, 0x76,
-	0xd9, 0x84, 0x07, 0xab, 0x4d, 0x78, 0xb0, 0x6c, 0xc2, 0xfe, 0xbe, 0x6e, 0xc2, 0xfe, 0x3e, 0x62,
-	0x72, 0xa2, 0x9b, 0x90, 0x9c, 0x60, 0xb2, 0xee, 0xf3, 0x38, 0x4f, 0xf6, 0x0b, 0x99, 0x55, 0x87,
-	0x94, 0x18, 0x2b, 0xf7, 0xeb, 0x19, 0xe3, 0x2a, 0xd4, 0x0e, 0x51, 0x08, 0xeb, 0xfc, 0x48, 0x0c,
-	0x28, 0x19, 0x5c, 0x09, 0xdc, 0xb7, 0xc0, 0x26, 0x18, 0x3c, 0x11, 0xe1, 0x95, 0xbc, 0x08, 0x32,
-	0x91, 0x5c, 0x54, 0x2a, 0xff, 0x05, 0x54, 0xc1, 0xeb, 0x3f, 0x83, 0xf7, 0xa1, 0x3e, 0x98, 0x05,
-	0x93, 0x4c, 0xbf, 0xac, 0x5e, 0x36, 0x06, 0x5c, 0x30, 0x67, 0x82, 0x47, 0x94, 0x88, 0xff, 0x18,
-	0x9c, 0x92, 0xb8, 0x34, 0xc7, 0x32, 0xcd, 0x71, 0xa1, 0x76, 0x16, 0x05, 0x99, 0x6e, 0x75, 0x3c,
-	0xa3, 0xb3, 0x8f, 0x73, 0x1a, 0x65, 0x41, 0x56, 0xe8, 0x56, 0xd7, 0xd8, 0xbf, 0xad, 0xcc, 0x47,
-	0x75, 0x67, 0x49, 0xc2, 0xb8, 0x1a, 0x1b, 0x12, 0x88, 0x4b, 0xe2, 0x4b, 0x26, 0x27, 0x7e, 0x95,
-	0x48, 0xe0, 0x7f, 0x03, 0x4e, 0x2f, 0x64, 0x3c, 0x23, 0x79, 0xc8, 0x36, 0x6d, 0xe2, 0xaf, 0x06,
-	0xc7, 0x8f, 0xb4, 0x05, 0x78, 0x5e, 0x8e, 0x88, 0xea, 0x95, 0x11, 0xf1, 0x80, 0x26, 0xf4, 0xb0,
-	0x2f, 0xea, 0xbc, 0x4a, 0x14, 0xf2, 0x7f, 0xb2, 0xa0, 0x86, 0xb3, 0xc8, 0x50, 0x5d, 0x7b, 0xde,
-	0x1c, 0x3b, 0xe1, 0xf1, 0x45, 0x30, 0x66, 0x5c, 0x3b, 0xa7, 0xb1, 0x08, 0xfa, 0x68, 0xc6, 0xca,
-	0x85, 0xaf, 0x10, 0xd6, 0x1a, 0xfe, 0x38, 0xe8, 0x5e, 0x32, 0x6a, 0x0d, 0xc9, 0x44, 0x32, 0xf1,
-	0x49, 0x37, 0xc8, 0x13, 0xc6, 0x7b, 0xe3, 0x79, 0xa0, 0x9f, 0x3f, 0x06, 0xc5, 0xbf, 0x2b, 0x7f,
-	0x45, 0xd6, 0x26, 0x9a, 0xb5, 0xf9, 0xb7, 0xe5, 0xaa, 0xe5, 0xfe, 0xcf, 0x16, 0x34, 0x1e, 0xaa,
-	0x77, 0x9a, 0xe9, 0x85, 0xf5, 0x4c, 0x2f, 0x2a, 0x2b, 0x5e, 0x74, 0x61, 0x57, 0xcb, 0xac, 0xdc,
-	0x2f, 0xa3, 0xb0, 0x91, 0xa7, 0x22, 0x5a, 0x2b, 0x93, 0xf5, 0x22, 0xff, 0x29, 0xa7, 0xab, 0x32,
-	0x9b, 0x12, 0xbe, 0x96, 0x95, 0x36, 0xb4, 0xd4, 0xff, 0xa5, 0xf8, 0x5b, 0x53, 0x43, 0xd5, 0x20,
-	0xf9, 0x5d, 0xa8, 0x1f, 0xc4, 0xd1, 0x24, 0x98, 0xba, 0x1d, 0xa8, 0xf5, 0xf2, 0x6c, 0x26, 0x34,
-	0xb6, 0xba, 0xbb, 0x46, 0xe3, 0xe7, 0xd9, 0x4c, 0xca, 0x10, 0x21, 0xe1, 0x7f, 0x06, 0xb0, 0xa4,
-	0xe1, 0x96, 0x58, 0x66, 0xe3, 0x11, 0xbb, 0xc4, 0x92, 0x49, 0x85, 0x96, 0x26, 0xd9, 0xc0, 0xf1,
-	0x3f, 0x07, 0x67, 0x3f, 0x0f, 0xc2, 0xf1, 0x61, 0x34, 0x89, 0x71, 0x74, 0x9c, 0x33, 0x9e, 0x2e,
-	0xf3, 0xa5, 0x21, 0x86, 0x1b, 0xa7, 0x48, 0xd9, 0x43, 0x0a, 0x0d, 0xeb, 0xe2, 0xff, 0xfe, 0xf6,
-	0x3f, 0x01, 0x00, 0x00, 0xff, 0xff, 0xf4, 0xe4, 0x20, 0x8a, 0xf1, 0x0f, 0x00, 0x00,
+	// 1586 bytes of a gzipped FileDescriptorProto
+	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0xbc, 0x57, 0x5f, 0x8f, 0xdb, 0x44,
+	0x10, 0x97, 0x93, 0x38, 0x89, 0x27, 0xd7, 0xe3, 0x64, 0x4e, 0xad, 0x29, 0x12, 0x0a, 0x16, 0x7f,
+	0xc2, 0x9f, 0x1e, 0x55, 0x2a, 0xa4, 0xaa, 0x82, 0x4a, 0xb9, 0x0b, 0x2d, 0x47, 0xaf, 0xbd, 0xeb,
+	0xe6, 0xee, 0x78, 0x42, 0xd5, 0x26, 0x99, 0x24, 0x56, 0x1d, 0xdb, 0xac, 0xed, 0xbb, 0x98, 0x8f,
+	0xc0, 0x87, 0x40, 0x42, 0x82, 0x2f, 0x80, 0x78, 0xe1, 0x89, 0x77, 0x3e, 0x08, 0x5f, 0x01, 0x1e,
+	0xd1, 0xec, 0xae, 0x1d, 0xe7, 0x92, 0x56, 0x45, 0x42, 0xbc, 0xed, 0x6f, 0x66, 0x3c, 0xbb, 0xf3,
+	0x7f, 0x0c, 0xdb, 0x5e, 0x90, 0xa0, 0x08, 0xb8, 0xbf, 0x17, 0x89, 0x30, 0x09, 0xed, 0x66, 0x8e,
+	0xdd, 0x3f, 0x2b, 0x50, 0x1f, 0x84, 0xa9, 0x18, 0xa1, 0xbd, 0x0d, 0x95, 0xc3, 0xbe, 0x63, 0xb4,
+	0x8d, 0x4e, 0x95, 0x55, 0x0e, 0xfb, 0xb6, 0x0d, 0xb5, 0x27, 0x7c, 0x8e, 0x4e, 0xa5, 0x6d, 0x74,
+	0x2c, 0x26, 0xcf, 0x44, 0x3b, 0xcd, 0x22, 0x74, 0xaa, 0x8a, 0x46, 0x67, 0xfb, 0x26, 0x34, 0xcf,
+	0x62, 0xd2, 0x36, 0x47, 0xa7, 0x26, 0xe9, 0x05, 0x26, 0xde, 0x09, 0x8f, 0xe3, 0xcb, 0x50, 0x8c,
+	0x1d, 0x53, 0xf1, 0x72, 0x6c, 0xef, 0x40, 0xf5, 0x8c, 0x1d, 0x39, 0x75, 0x49, 0xa6, 0xa3, 0xed,
+	0x40, 0xa3, 0x8f, 0x13, 0x9e, 0xfa, 0x89, 0xd3, 0x68, 0x1b, 0x9d, 0x26, 0xcb, 0x21, 0xe9, 0x39,
+	0x45, 0x1f, 0xa7, 0x82, 0x4f, 0x9c, 0xa6, 0xd2, 0x93, 0x63, 0x7b, 0x0f, 0xec, 0xc3, 0x20, 0xc6,
+	0x51, 0x2a, 0x70, 0xf0, 0xdc, 0x8b, 0xce, 0x51, 0x78, 0x93, 0xcc, 0xb1, 0xa4, 0x82, 0x0d, 0x1c,
+	0xba, 0xe5, 0x31, 0x26, 0x9c, 0xee, 0x06, 0xa9, 0x2a, 0x87, 0xb6, 0x0b, 0x5b, 0x83, 0x19, 0x17,
+	0x38, 0x1e, 0xe0, 0x48, 0x60, 0xe2, 0xb4, 0x24, 0x7b, 0x85, 0x46, 0x32, 0xc7, 0x62, 0xca, 0x03,
+	0xef, 0x3b, 0x9e, 0x78, 0x61, 0xe0, 0x6c, 0x29, 0x99, 0x32, 0x8d, 0xbc, 0xc4, 0x42, 0x1f, 0x9d,
+	0x6b, 0xca, 0x4b, 0x74, 0x76, 0x7f, 0x35, 0xc0, 0xea, 0xf3, 0x78, 0x36, 0x0c, 0xb9, 0x18, 0xbf,
+	0x92, 0xaf, 0x6f, 0x81, 0x39, 0x42, 0xdf, 0x8f, 0x9d, 0x6a, 0xbb, 0xda, 0x69, 0x75, 0x6f, 0xec,
+	0x15, 0x41, 0x2c, 0xf4, 0x1c, 0xa0, 0xef, 0x33, 0x25, 0x65, 0xdf, 0x06, 0x2b, 0xc1, 0x79, 0xe4,
+	0xf3, 0x04, 0x63, 0xa7, 0x26, 0x3f, 0xb1, 0x97, 0x9f, 0x9c, 0x6a, 0x16, 0x5b, 0x0a, 0xad, 0x99,
+	0x62, 0xae, 0x9b, 0xe2, 0xfe, 0x56, 0x85, 0x6b, 0x2b, 0xd7, 0xd9, 0x5b, 0x60, 0x2c, 0xe4, 0xcb,
+	0x4d, 0x66, 0x2c, 0x08, 0x65, 0xf2, 0xd5, 0x26, 0x33, 0x32, 0x42, 0x97, 0x32, 0x37, 0x4c, 0x66,
+	0x5c, 0x12, 0x9a, 0xc9, 0x8c, 0x30, 0x99, 0x31, 0xb3, 0x3f, 0x80, 0xc6, 0xb7, 0x29, 0x0a, 0x0f,
+	0x63, 0xc7, 0x94, 0xaf, 0x7b, 0x6d, 0xf9, 0xba, 0xa7, 0x29, 0x8a, 0x8c, 0xe5, 0x7c, 0xf2, 0x86,
+	0xcc, 0x26, 0x95, 0x1a, 0xf2, 0x4c, 0xb4, 0x84, 0x32, 0xaf, 0xa1, 0x68, 0x74, 0xd6, 0x5e, 0x54,
+	0xf9, 0x40, 0x5e, 0xfc, 0x14, 0x6a, 0x7c, 0x81, 0xb1, 0x63, 0x49, 0xfd, 0x6f, 0xbf, 0xc0, 0x61,
+	0x7b, 0xbd, 0x05, 0xc6, 0x5f, 0x04, 0x89, 0xc8, 0x98, 0x14, 0xb7, 0xdf, 0x87, 0xfa, 0x28, 0xf4,
+	0x43, 0x11, 0x3b, 0x70, 0xf5, 0x61, 0x07, 0x44, 0x67, 0x9a, 0x6d, 0x77, 0xa0, 0xee, 0xe3, 0x14,
+	0x83, 0xb1, 0xcc, 0x8c, 0x56, 0x77, 0x67, 0x29, 0x78, 0x24, 0xe9, 0x4c, 0xf3, 0xed, 0x7b, 0xb0,
+	0x95, 0xf0, 0xa1, 0x8f, 0xc7, 0x11, 0x79, 0x31, 0x96, 0x59, 0xd2, 0xea, 0x5e, 0x2f, 0xc5, 0xa3,
+	0xc4, 0x65, 0x2b, 0xb2, 0x37, 0x1f, 0x82, 0x55, 0xbc, 0x90, 0x8a, 0xe4, 0x39, 0x66, 0xd2, 0xdf,
+	0x16, 0xa3, 0xa3, 0xfd, 0x0e, 0x98, 0x17, 0xdc, 0x4f, 0x55, 0xae, 0xb4, 0xba, 0xdb, 0x4b, 0x9d,
+	0xbd, 0x85, 0x17, 0x33, 0xc5, 0xbc, 0x57, 0xb9, 0x6b, 0xb8, 0xdf, 0x57, 0x60, 0xab, 0x7c, 0x8f,
+	0xfd, 0x16, 0x40, 0xe2, 0xcd, 0xf1, 0x41, 0x28, 0xe6, 0x3c, 0xd1, 0x3a, 0x4b, 0x14, 0xfb, 0x43,
+	0xd8, 0xb9, 0x40, 0x91, 0x78, 0x23, 0xee, 0x9f, 0x7a, 0x73, 0x24, 0x7d, 0xf2, 0x96, 0x26, 0x5b,
+	0xa3, 0xdb, 0xb7, 0xa1, 0x1e, 0x87, 0x22, 0xd9, 0xcf, 0x64, 0xbc, 0x5b, 0x5d, 0x67, 0xf9, 0x0e,
+	0x86, 0x01, 0x9f, 0xd3, 0xbd, 0x0f, 0x3c, 0xf4, 0xc7, 0x4c, 0xcb, 0x51, 0x0d, 0x5f, 0x0a, 0x1e,
+	0x45, 0x5e, 0x30, 0xcd, 0xfb, 0x44, 0x8e, 0xed, 0xbb, 0x00, 0x13, 0x12, 0xa6, 0xc4, 0xcf, 0xf3,
+	0xe3, 0xc5, 0x1a, 0x4b, 0xb2, 0xf6, 0x7b, 0xb0, 0x3d, 0xf1, 0x16, 0x0f, 0x3c, 0x11, 0x27, 0x07,
+	0xa1, 0x9f, 0xce, 0x03, 0x99, 0x35, 0x4d, 0x76, 0x85, 0xea, 0x46, 0xb0, 0xbd, 0xaa, 0x85, 0xd2,
+	0x3f, 0xbf, 0x40, 0xd6, 0x9e, 0xf2, 0xc7, 0x0a, 0xcd, 0x6e, 0x43, 0x6b, 0xec, 0xc5, 0x91, 0xcf,
+	0xb3, 0x52, 0x79, 0x96, 0x49, 0xd4, 0x4d, 0x2e, 0xbc, 0xd8, 0x1b, 0xfa, 0xaa, 0x29, 0x36, 0x59,
+	0x0e, 0xdd, 0x29, 0x98, 0x32, 0x7d, 0x4a, 0xc5, 0x6e, 0xe5, 0xc5, 0x2e, 0x9b, 0x68, 0xa5, 0xd4,
+	0x44, 0x77, 0xa0, 0xfa, 0x25, 0x2e, 0x74, 0x5f, 0xa5, 0x63, 0xd1, 0x12, 0x6a, 0xa5, 0x96, 0xb0,
+	0x0b, 0xe6, 0xb9, 0x8c, 0xbd, 0x2a, 0x55, 0x05, 0xdc, 0xfb, 0x50, 0x57, 0xe9, 0x57, 0x68, 0x36,
+	0x4a, 0x9a, 0xdb, 0xd0, 0x3a, 0x16, 0x1e, 0x06, 0x89, 0x2a, 0x72, 0x6d, 0x42, 0x89, 0xe4, 0xfe,
+	0x62, 0x40, 0x4d, 0xc6, 0xd4, 0x85, 0x2d, 0x1f, 0xa7, 0x7c, 0x94, 0xed, 0x87, 0x69, 0x30, 0x8e,
+	0x1d, 0xa3, 0x5d, 0xed, 0x54, 0xd9, 0x0a, 0xcd, 0xbe, 0x0e, 0xf5, 0xa1, 0xe2, 0x56, 0xda, 0xd5,
+	0x8e, 0xc5, 0x34, 0xa2, 0xa7, 0xf9, 0x7c, 0x88, 0xbe, 0x36, 0x41, 0x01, 0x92, 0x8e, 0x04, 0x4e,
+	0xbc, 0x85, 0x36, 0x43, 0x23, 0xa2, 0xc7, 0xe9, 0x84, 0xe8, 0xca, 0x12, 0x8d, 0xc8, 0x80, 0x21,
+	0x8f, 0x8b, 0xca, 0xa7, 0x33, 0x69, 0x8e, 0x47, 0xdc, 0xcf, 0x4b, 0x5f, 0x01, 0xf7, 0x77, 0x83,
+	0x46, 0x82, 0x6a, 0x65, 0x6b, 0x1e, 0x7e, 0x03, 0x9a, 0xd4, 0xe6, 0x9e, 0x5d, 0x70, 0xa1, 0x0d,
+	0x6e, 0x10, 0x3e, 0xe7, 0xc2, 0xfe, 0x04, 0xea, 0xb2, 0x42, 0x36, 0xb4, 0xd5, 0x5c, 0x9d, 0xf4,
+	0x2a, 0xd3, 0x62, 0x45, 0xe3, 0xa9, 0x95, 0x1a, 0x4f, 0x61, 0xac, 0x59, 0x36, 0xf6, 0x16, 0x98,
+	0xd4, 0xc1, 0x32, 0xf9, 0xfa, 0x8d, 0x9a, 0x55, 0x9f, 0x53, 0x52, 0xee, 0x19, 0x5c, 0x5b, 0xb9,
+	0xb1, 0xb8, 0xc9, 0x58, 0xbd, 0x69, 0x59, 0xed, 0x96, 0xae, 0x6e, 0x2a, 0xa5, 0x18, 0x7d, 0x1c,
+	0x25, 0x38, 0xd6, 0x59, 0x57, 0x60, 0xf7, 0x47, 0x63, 0xa9, 0x57, 0xde, 0x47, 0x29, 0x3a, 0x0a,
+	0xe7, 0x73, 0x1e, 0x8c, 0xb5, 0xea, 0x1c, 0x92, 0xdf, 0xc6, 0x43, 0xad, 0xba, 0x32, 0x1e, 0x12,
+	0x16, 0x91, 0x8e, 0x60, 0x45, 0x44, 0x94, 0x3b, 0x73, 0xe4, 0x71, 0x2a, 0x70, 0x8e, 0x41, 0xa2,
+	0x5d, 0x50, 0x26, 0xd9, 0x37, 0xa0, 0x91, 0xf0, 0xe9, 0x33, 0xea, 0x51, 0x3a, 0x92, 0x09, 0x9f,
+	0x3e, 0xc2, 0xcc, 0x7e, 0x13, 0x2c, 0x59, 0xa5, 0x92, 0xa5, 0xc2, 0xd9, 0x94, 0x84, 0x47, 0x98,
+	0xb9, 0x7f, 0x1b, 0x50, 0x1f, 0xa0, 0xb8, 0x40, 0xf1, 0x4a, 0x93, 0xb0, 0xbc, 0x61, 0x54, 0x5f,
+	0xb2, 0x61, 0xd4, 0x36, 0x6f, 0x18, 0xe6, 0x72, 0xc3, 0xd8, 0x05, 0x73, 0x20, 0x46, 0x87, 0x7d,
+	0xf9, 0xa2, 0x2a, 0x53, 0x80, 0xb2, 0xb1, 0x37, 0x4a, 0xbc, 0x0b, 0xd4, 0x6b, 0x87, 0x46, 0x6b,
+	0x03, 0xb2, 0xb9, 0x61, 0xd6, 0xff, 0xcb, 0xed, 0xc3, 0xfd, 0xc1, 0x80, 0xfa, 0x11, 0xcf, 0xc2,
+	0x34, 0x59, 0xcb, 0xda, 0x36, 0xb4, 0x7a, 0x51, 0xe4, 0x7b, 0xa3, 0x95, 0x4a, 0x2d, 0x91, 0x48,
+	0xe2, 0x71, 0x29, 0x1e, 0xca, 0x17, 0x65, 0x12, 0x4d, 0x87, 0x03, 0xb9, 0x34, 0xa8, 0x0d, 0xa0,
+	0x34, 0x1d, 0xd4, 0xae, 0x20, 0x99, 0xe4, 0xb4, 0x5e, 0x9a, 0x84, 0x13, 0x3f, 0xbc, 0x94, 0xde,
+	0x69, 0xb2, 0x02, 0xbb, 0x7f, 0x54, 0xa0, 0xf6, 0x7f, 0x0d, 0xfa, 0x2d, 0x30, 0x3c, 0x9d, 0x1c,
+	0x86, 0x57, 0x8c, 0xfd, 0x46, 0x69, 0xec, 0x3b, 0xd0, 0xc8, 0x04, 0x0f, 0xa6, 0x18, 0x3b, 0x4d,
+	0xd9, 0x8d, 0x72, 0x28, 0x39, 0xb2, 0xee, 0xd4, 0xbc, 0xb7, 0x58, 0x0e, 0x8b, 0x3a, 0x82, 0x52,
+	0x1d, 0x7d, 0xac, 0x57, 0x83, 0xd6, 0xd5, 0xd1, 0xb2, 0x69, 0x23, 0xf8, 0xef, 0x46, 0xf0, 0x5f,
+	0x06, 0x98, 0x45, 0x11, 0x1e, 0xac, 0x16, 0xe1, 0xc1, 0xb2, 0x08, 0xfb, 0xfb, 0x79, 0x11, 0xf6,
+	0xf7, 0x09, 0xb3, 0x93, 0xbc, 0x08, 0xd9, 0x09, 0x05, 0xeb, 0xa1, 0x08, 0xd3, 0x68, 0x3f, 0x53,
+	0x51, 0xb5, 0x58, 0x81, 0x29, 0x73, 0xbf, 0x9e, 0xa1, 0xd0, 0xae, 0xb6, 0x98, 0x46, 0x94, 0xe7,
+	0x47, 0xb2, 0x41, 0x29, 0xe7, 0x2a, 0x60, 0xbf, 0x0b, 0x26, 0x23, 0xe7, 0x49, 0x0f, 0xaf, 0xc4,
+	0x45, 0x92, 0x99, 0xe2, 0x92, 0x52, 0xf5, 0x4b, 0xa0, 0x13, 0x3e, 0xff, 0x41, 0xf8, 0x08, 0xea,
+	0x83, 0x99, 0x37, 0x49, 0xf2, 0x05, 0xeb, 0xf5, 0x52, 0x83, 0xf3, 0xe6, 0x28, 0x79, 0x4c, 0x8b,
+	0xb8, 0x4f, 0xc1, 0x2a, 0x88, 0xcb, 0xe7, 0x18, 0xe5, 0xe7, 0xd8, 0x50, 0x3b, 0x0b, 0xbc, 0x24,
+	0x2f, 0x75, 0x3a, 0x93, 0xb1, 0x4f, 0x53, 0x1e, 0x24, 0x5e, 0x92, 0xe5, 0xa5, 0x9e, 0x63, 0xf7,
+	0x8e, 0x7e, 0x3e, 0xa9, 0x3b, 0x8b, 0x22, 0x14, 0xba, 0x6d, 0x28, 0x20, 0x2f, 0x09, 0x2f, 0x51,
+	0x75, 0xfc, 0x2a, 0x53, 0xc0, 0xfd, 0x06, 0xac, 0x9e, 0x8f, 0x22, 0x61, 0xa9, 0x8f, 0x9b, 0x26,
+	0xf1, 0x57, 0x83, 0xe3, 0x27, 0xf9, 0x0b, 0xe8, 0xbc, 0x6c, 0x11, 0xd5, 0x2b, 0x2d, 0xe2, 0x11,
+	0x8f, 0xf8, 0x61, 0x5f, 0xe6, 0x79, 0x95, 0x69, 0xe4, 0xfe, 0x64, 0x40, 0x8d, 0x7a, 0x51, 0x49,
+	0x75, 0xed, 0x65, 0x7d, 0xec, 0x44, 0x84, 0x17, 0xde, 0x18, 0x45, 0x6e, 0x5c, 0x8e, 0xa5, 0xd3,
+	0x47, 0x33, 0x2c, 0x06, 0xbe, 0x46, 0x94, 0x6b, 0xf4, 0xff, 0x90, 0xd7, 0x52, 0x29, 0xd7, 0x88,
+	0xcc, 0x14, 0x93, 0x36, 0xbb, 0x41, 0x1a, 0xa1, 0xe8, 0x8d, 0xe7, 0x5e, 0xbe, 0x01, 0x95, 0x28,
+	0xee, 0x7d, 0xf5, 0x47, 0xb2, 0xd6, 0xd1, 0x8c, 0xcd, 0x7f, 0x2f, 0x57, 0x5f, 0xee, 0xfe, 0x6c,
+	0x40, 0xe3, 0xb1, 0xde, 0xd5, 0xca, 0x56, 0x18, 0x2f, 0xb4, 0xa2, 0xb2, 0x62, 0x45, 0x17, 0x76,
+	0x73, 0x99, 0x95, 0xfb, 0x95, 0x17, 0x36, 0xf2, 0xb4, 0x47, 0x6b, 0x45, 0xb0, 0x5e, 0xe5, 0x77,
+	0xe5, 0x74, 0x55, 0x66, 0x53, 0xc0, 0xd7, 0xa2, 0xd2, 0x86, 0x96, 0xfe, 0xcd, 0x94, 0x3f, 0x6d,
+	0xba, 0xa9, 0x96, 0x48, 0x6e, 0x17, 0xea, 0x07, 0x61, 0x30, 0xf1, 0xa6, 0x76, 0x07, 0x6a, 0xbd,
+	0x34, 0x99, 0x49, 0x8d, 0xad, 0xee, 0x6e, 0xa9, 0xf0, 0xd3, 0x64, 0xa6, 0x64, 0x98, 0x94, 0x70,
+	0x3f, 0x03, 0x58, 0xd2, 0x68, 0x4a, 0x2c, 0xa3, 0xf1, 0x04, 0x2f, 0x29, 0x65, 0x62, 0xa9, 0xa5,
+	0xc9, 0x36, 0x70, 0xdc, 0xcf, 0xc1, 0xda, 0x4f, 0x3d, 0x7f, 0x7c, 0x18, 0x4c, 0x42, 0x6a, 0x1d,
+	0xe7, 0x28, 0xe2, 0x65, 0xbc, 0x72, 0x48, 0xee, 0xa6, 0x2e, 0x52, 0xd4, 0x90, 0x46, 0xc3, 0xba,
+	0xfc, 0xcd, 0xbf, 0xf3, 0x4f, 0x00, 0x00, 0x00, 0xff, 0xff, 0xda, 0x7c, 0x0d, 0xab, 0xf8, 0x0f,
+	0x00, 0x00,
 }
diff --git a/bolt/internal/internal.proto b/bolt/internal/internal.proto
index 86e8f30dea..eae027cdad 100644
--- a/bolt/internal/internal.proto
+++ b/bolt/internal/internal.proto
@@ -43,16 +43,16 @@ message DashboardCell {
 message TableOptions {
 	string timeFormat                   = 1; // format for time
 	bool verticalTimeAxis               = 2; // time axis should be a column not row
-	TableColumn sortBy                  = 3; // which column should a table be sorted by
+	RenamableField sortBy               = 3; // which column should a table be sorted by
 	string 	wrapping                    = 4; // option for text wrapping
-	repeated TableColumn columnNames    = 5; // names and renames for columns
+	repeated RenamableField fieldNames      = 5; // names and renames for column/row fields
 	bool fixFirstColumn                 = 6; // first column should be fixed/frozen
 }
 
-message TableColumn {
+message RenamableField {
 	string internalName     = 1; // name of column
 	string displayName      = 2; // what column is renamed to
-	bool visible			= 3; // Represents whether TableColumn is visible
+	bool visible			= 3; // Represents whether RenamableField is visible
 }
 
 message Color {
diff --git a/bolt/internal/internal_test.go b/bolt/internal/internal_test.go
index b8397d5d4e..75c87816f1 100644
--- a/bolt/internal/internal_test.go
+++ b/bolt/internal/internal_test.go
@@ -195,8 +195,8 @@ func Test_MarshalDashboard(t *testing.T) {
 					},
 				},
 				TableOptions: chronograf.TableOptions{
-					TimeFormat:  "",
-					ColumnNames: []chronograf.TableColumn{},
+					TimeFormat: "",
+					FieldNames: []chronograf.RenamableField{},
 				},
 			},
 		},
@@ -318,8 +318,8 @@ func Test_MarshalDashboard_WithLegacyBounds(t *testing.T) {
 					Orientation: "bottom",
 				},
 				TableOptions: chronograf.TableOptions{
-					TimeFormat:  "MM:DD:YYYY",
-					ColumnNames: []chronograf.TableColumn{},
+					TimeFormat: "MM:DD:YYYY",
+					FieldNames: []chronograf.RenamableField{},
 				},
 				Type: "line",
 			},
@@ -434,8 +434,8 @@ func Test_MarshalDashboard_WithEmptyLegacyBounds(t *testing.T) {
 					},
 				},
 				TableOptions: chronograf.TableOptions{
-					TimeFormat:  "MM:DD:YYYY",
-					ColumnNames: []chronograf.TableColumn{},
+					TimeFormat: "MM:DD:YYYY",
+					FieldNames: []chronograf.RenamableField{},
 				},
 				Type: "line",
 			},
@@ -474,7 +474,7 @@ func Test_MarshalDashboard_WithEmptyCellType(t *testing.T) {
 				Axes:       map[string]chronograf.Axis{},
 				CellColors: []chronograf.CellColor{},
 				TableOptions: chronograf.TableOptions{
-					ColumnNames: []chronograf.TableColumn{},
+					FieldNames: []chronograf.RenamableField{},
 				},
 			},
 		},
diff --git a/chronograf.go b/chronograf.go
index a1b2a205c8..16715ee6d3 100644
--- a/chronograf.go
+++ b/chronograf.go
@@ -560,8 +560,8 @@ type DashboardCell struct {
 	TableOptions TableOptions     `json:"tableOptions,omitempty"`
 }
 
-// TableColumn is a column in a DashboardCell of type Table
-type TableColumn struct {
+// RenamableField is a column/row field in a DashboardCell of type Table
+type RenamableField struct {
 	InternalName string `json:"internalName"`
 	DisplayName  string `json:"displayName"`
 	Visible      bool   `json:"visible"`
@@ -569,12 +569,12 @@ type TableColumn struct {
 
 // TableOptions is a type of options for a DashboardCell with type Table
 type TableOptions struct {
-	TimeFormat       string        `json:"timeFormat"`
-	VerticalTimeAxis bool          `json:"verticalTimeAxis"`
-	SortBy           TableColumn   `json:"sortBy"`
-	Wrapping         string        `json:"wrapping"`
-	ColumnNames      []TableColumn `json:"columnNames"`
-	FixFirstColumn   bool          `json:"fixFirstColumn"`
+	TimeFormat       string           `json:"timeFormat"`
+	VerticalTimeAxis bool             `json:"verticalTimeAxis"`
+	SortBy           RenamableField   `json:"sortBy"`
+	Wrapping         string           `json:"wrapping"`
+	FieldNames       []RenamableField `json:"fieldNames"`
+	FixFirstColumn   bool             `json:"fixFirstColumn"`
 }
 
 // DashboardsStore is the storage and retrieval of dashboards
diff --git a/integrations/server_test.go b/integrations/server_test.go
index 8077258960..d35f8fb6ed 100644
--- a/integrations/server_test.go
+++ b/integrations/server_test.go
@@ -552,7 +552,7 @@ func TestServer(t *testing.T) {
 					"visible": false
 				},
 				"wrapping": "",
-				"columnNames": null,
+				"fieldNames": null,
 				"fixFirstColumn": false
 			},
       "links": {
@@ -803,7 +803,7 @@ func TestServer(t *testing.T) {
 							"visible":false
 						},
 						"wrapping":"",
-						"columnNames":null,
+						"fieldNames":null,
 						"fixFirstColumn":false
 					},
           "legend":{
diff --git a/server/cells_test.go b/server/cells_test.go
index a526fb3ac8..38c2ef5c5e 100644
--- a/server/cells_test.go
+++ b/server/cells_test.go
@@ -532,7 +532,7 @@ func TestService_ReplaceDashboardCell(t *testing.T) {
 					}
 				  }
 				  `))),
-			want: `{"i":"3c5c4102-fa40-4585-a8f9-917c77e37192","x":0,"y":0,"w":4,"h":4,"name":"Untitled Cell","queries":[{"query":"SELECT mean(\"usage_user\") AS \"mean_usage_user\" FROM \"telegraf\".\"autogen\".\"cpu\" WHERE time \u003e :dashboardTime: AND \"cpu\"=:cpu: GROUP BY :interval: FILL(null)","queryConfig":{"id":"3cd3eaa4-a4b8-44b3-b69e-0c7bf6b91d9e","database":"telegraf","measurement":"cpu","retentionPolicy":"autogen","fields":[{"value":"mean","type":"func","alias":"mean_usage_user","args":[{"value":"usage_user","type":"field","alias":""}]}],"tags":{"cpu":["ChristohersMBP2.lan"]},"groupBy":{"time":"2s","tags":[]},"areTagsAccepted":true,"fill":"null","rawText":"SELECT mean(\"usage_user\") AS \"mean_usage_user\" FROM \"telegraf\".\"autogen\".\"cpu\" WHERE time \u003e :dashboardTime: AND \"cpu\"=:cpu: GROUP BY :interval: FILL(null)","range":{"upper":"","lower":"now() - 15m"},"shifts":[]},"source":""}],"axes":{"x":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""},"y":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""},"y2":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""}},"type":"line","colors":[{"id":"0","type":"min","hex":"#00C9FF","name":"laser","value":"0"},{"id":"1","type":"max","hex":"#9394FF","name":"comet","value":"100"}],"legend":{},"tableOptions":{"timeFormat":"","verticalTimeAxis":false,"sortBy":{"internalName":"","displayName":"","visible":false},"wrapping":"","columnNames":null,"fixFirstColumn":false},"links":{"self":"/chronograf/v1/dashboards/1/cells/3c5c4102-fa40-4585-a8f9-917c77e37192"}}
+			want: `{"i":"3c5c4102-fa40-4585-a8f9-917c77e37192","x":0,"y":0,"w":4,"h":4,"name":"Untitled Cell","queries":[{"query":"SELECT mean(\"usage_user\") AS \"mean_usage_user\" FROM \"telegraf\".\"autogen\".\"cpu\" WHERE time \u003e :dashboardTime: AND \"cpu\"=:cpu: GROUP BY :interval: FILL(null)","queryConfig":{"id":"3cd3eaa4-a4b8-44b3-b69e-0c7bf6b91d9e","database":"telegraf","measurement":"cpu","retentionPolicy":"autogen","fields":[{"value":"mean","type":"func","alias":"mean_usage_user","args":[{"value":"usage_user","type":"field","alias":""}]}],"tags":{"cpu":["ChristohersMBP2.lan"]},"groupBy":{"time":"2s","tags":[]},"areTagsAccepted":true,"fill":"null","rawText":"SELECT mean(\"usage_user\") AS \"mean_usage_user\" FROM \"telegraf\".\"autogen\".\"cpu\" WHERE time \u003e :dashboardTime: AND \"cpu\"=:cpu: GROUP BY :interval: FILL(null)","range":{"upper":"","lower":"now() - 15m"},"shifts":[]},"source":""}],"axes":{"x":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""},"y":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""},"y2":{"bounds":["",""],"label":"","prefix":"","suffix":"","base":"","scale":""}},"type":"line","colors":[{"id":"0","type":"min","hex":"#00C9FF","name":"laser","value":"0"},{"id":"1","type":"max","hex":"#9394FF","name":"comet","value":"100"}],"legend":{},"tableOptions":{"timeFormat":"","verticalTimeAxis":false,"sortBy":{"internalName":"","displayName":"","visible":false},"wrapping":"","fieldNames":null,"fixFirstColumn":false},"links":{"self":"/chronograf/v1/dashboards/1/cells/3c5c4102-fa40-4585-a8f9-917c77e37192"}}
 `,
 		},
 		{

From d8daddde8f0947b3892d0b268538e1660283e1d9 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 16 Mar 2018 17:58:32 -0700
Subject: [PATCH 07/38] update columnNames to fieldNames and columns to fields
 in front end for tablegraphs

---
 .../GraphOptionsCustomizableColumn.tsx        |  62 -----------
 .../GraphOptionsCustomizeColumns.tsx          |  39 -------
 .../components/GraphOptionsTimeFormat.tsx     |   4 +-
 ui/src/dashboards/components/TableOptions.tsx |  54 +++++-----
 ui/src/shared/components/TableGraph.js        |  86 ++++++++-------
 ui/src/shared/constants/tableGraph.js         |   6 +-
 .../style/components/ceo-display-options.scss |   8 +-
 .../GraphOptionsCustomizableColumn.test.tsx   | 102 ------------------
 .../GraphOptionsCustomizeColumns.test.tsx     |  34 ------
 .../components/TableOptions.test.tsx          |  14 +--
 10 files changed, 82 insertions(+), 327 deletions(-)
 delete mode 100644 ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
 delete mode 100644 ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx
 delete mode 100644 ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx
 delete mode 100644 ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
deleted file mode 100644
index 8b452585be..0000000000
--- a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, {PureComponent} from 'react'
-
-import InputClickToEdit from 'src/shared/components/InputClickToEdit'
-
-type Column = {
-  internalName: string
-  displayName: string
-  visible: boolean
-}
-
-interface Props {
-  internalName: string
-  displayName: string
-  visible: boolean
-  onColumnUpdate: (column: Column) => void
-}
-
-class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
-  constructor(props) {
-    super(props)
-
-    this.handleColumnRename = this.handleColumnRename.bind(this)
-    this.handleToggleVisible = this.handleToggleVisible.bind(this)
-  }
-
-  handleColumnRename(rename: string) {
-    const {onColumnUpdate, internalName, visible} = this.props
-    onColumnUpdate({internalName, displayName: rename, visible})
-  }
-
-  handleToggleVisible() {
-    const {onColumnUpdate, internalName, displayName, visible} = this.props
-    onColumnUpdate({internalName, displayName, visible: !visible})
-  }
-
-  render() {
-    const {internalName, displayName, visible} = this.props
-
-    return (
-      <div className="column-controls--section">
-        <div
-          className={
-            visible ? 'column-controls--label' : 'column-controls--label-hidden'
-          }
-        >
-          <span className="icon eye" onClick={this.handleToggleVisible} />
-          {internalName}
-        </div>
-        <InputClickToEdit
-          value={displayName}
-          wrapperClass="column-controls-input"
-          onBlur={this.handleColumnRename}
-          placeholder="Rename..."
-          appearAsNormalInput={true}
-          disabled={!visible}
-        />
-      </div>
-    )
-  }
-}
-
-export default GraphOptionsCustomizableColumn
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx
deleted file mode 100644
index 2bae083327..0000000000
--- a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, {SFC} from 'react'
-
-import GraphOptionsCustomizableColumn from 'src/dashboards/components/GraphOptionsCustomizableColumn'
-import uuid from 'uuid'
-
-type Column = {
-  internalName: string
-  displayName: string
-  visible: boolean
-}
-
-interface Props {
-  columns: Column[]
-  onColumnUpdate: (column: Column) => void
-}
-
-const GraphOptionsCustomizeColumns: SFC<Props> = ({
-  columns,
-  onColumnUpdate,
-}) => {
-  return (
-    <div className="graph-options-group">
-      <label className="form-label">Customize Columns</label>
-      {columns.map(col => {
-        return (
-          <GraphOptionsCustomizableColumn
-            key={uuid.v4()}
-            internalName={col.internalName}
-            displayName={col.displayName}
-            visible={col.visible}
-            onColumnUpdate={onColumnUpdate}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-export default GraphOptionsCustomizeColumns
diff --git a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
index b20cbec48f..cb794d4c48 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
+++ b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
@@ -72,9 +72,9 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
           onChoose={this.handleChooseFormat}
         />
         {showCustom &&
-          <div className="column-controls--section">
+          <div className="field-controls--section">
             <InputClickToEdit
-              wrapperClass="column-controls-input "
+              wrapperClass="field-controls-input "
               value={format}
               onBlur={onTimeFormatChange}
               onChange={onTimeFormatChange}
diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index c27bb3041d..233b3222ff 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -10,15 +10,15 @@ import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis
 import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
 import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsTextWrapping'
 import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
-import GraphOptionsCustomizeColumns from 'src/dashboards/components/GraphOptionsCustomizeColumns'
+import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 
 import ThresholdsList from 'src/shared/components/ThresholdsList'
 import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
 
-import {TIME_COLUMN_DEFAULT} from 'src/shared/constants/tableGraph'
+import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
 import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
 
-type TableColumn = {
+type RenamableField = {
   internalName: string
   displayName: string
   visible: boolean
@@ -27,9 +27,9 @@ type TableColumn = {
 type Options = {
   timeFormat: string
   verticalTimeAxis: boolean
-  sortBy: TableColumn
+  sortBy: RenamableField
   wrapping: string
-  columnNames: TableColumn[]
+  fieldNames: RenamableField[]
   fixFirstColumn: boolean
 }
 
@@ -53,27 +53,26 @@ export class TableOptions extends PureComponent<Props, {}> {
     super(props)
   }
 
-  get columnNames() {
-    const {tableOptions: {columnNames}} = this.props
-    return columnNames || []
+  get fieldNames() {
+    const {tableOptions: {fieldNames}} = this.props
+    return fieldNames || []
   }
 
   get timeColumn() {
     return (
-      this.columnNames.find(c => c.internalName === 'time') ||
-      TIME_COLUMN_DEFAULT
+      this.fieldNames.find(f => f.internalName === 'time') || TIME_FIELD_DEFAULT
     )
   }
 
-  get computedColumnNames() {
+  get computedFieldNames() {
     const {queryConfigs} = this.props
 
     const queryFields = _.flatten(
       queryConfigs.map(({measurement, fields}) => {
         return fields.map(({alias}) => {
           const internalName = `${measurement}.${alias}`
-          const existing = this.columnNames.find(
-            c => c.internalName === internalName
+          const existing = this.fieldNames.find(
+            f => f.internalName === internalName
           )
           return existing || {internalName, displayName: '', visible: true}
         })
@@ -87,7 +86,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     const {handleUpdateTableOptions, tableOptions} = this.props
     handleUpdateTableOptions({
       ...tableOptions,
-      columnNames: this.computedColumnNames,
+      fieldNames: this.computedFieldNames,
     })
   }
 
@@ -120,28 +119,23 @@ export class TableOptions extends PureComponent<Props, {}> {
     handleUpdateTableOptions({...tableOptions, fixFirstColumn})
   }
 
-  handleColumnUpdate = column => {
+  handleFieldUpdate = field => {
     const {handleUpdateTableOptions, tableOptions} = this.props
-    const {columnNames} = tableOptions
-    const updatedColumns = columnNames.map(
-      op => (op.internalName === column.internalName ? column : op)
+    const {fieldNames} = tableOptions
+    const updatedFields = fieldNames.map(
+      op => (op.internalName === field.internalName ? field : op)
     )
-    handleUpdateTableOptions({...tableOptions, columnNames: updatedColumns})
+    handleUpdateTableOptions({...tableOptions, fieldNames: updatedFields})
   }
 
   render() {
     const {
-      tableOptions: {
-        timeFormat,
-        columnNames: columns,
-        verticalTimeAxis,
-        fixFirstColumn,
-      },
+      tableOptions: {timeFormat, fieldNames, verticalTimeAxis, fixFirstColumn},
       onResetFocus,
       tableOptions,
     } = this.props
 
-    const tableSortByOptions = this.computedColumnNames.map(col => ({
+    const tableSortByOptions = this.computedFieldNames.map(col => ({
       text: col.displayName || col.internalName,
       key: col.internalName,
     }))
@@ -163,7 +157,7 @@ export class TableOptions extends PureComponent<Props, {}> {
               onToggleVerticalTimeAxis={this.onToggleVerticalTimeAxis}
             />
             <GraphOptionsSortBy
-              selected={tableOptions.sortBy || TIME_COLUMN_DEFAULT}
+              selected={tableOptions.sortBy || TIME_FIELD_DEFAULT}
               sortByOptions={tableSortByOptions}
               onChooseSortBy={this.handleChooseSortBy}
             />
@@ -176,9 +170,9 @@ export class TableOptions extends PureComponent<Props, {}> {
               onToggleFixFirstColumn={this.handleToggleFixFirstColumn}
             />
           </div>
-          <GraphOptionsCustomizeColumns
-            columns={columns}
-            onColumnUpdate={this.handleColumnUpdate}
+          <GraphOptionsCustomizeFields
+            fields={fieldNames}
+            onFieldUpdate={this.handleFieldUpdate}
           />
           <ThresholdsList showListHeading={true} onResetFocus={onResetFocus} />
           <div className="form-group-wrapper graph-options-group">
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index dba80faac7..b6a9e90cb5 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -13,11 +13,36 @@ import {
   NULL_ROW_INDEX,
   NULL_HOVER_TIME,
   TIME_FORMAT_DEFAULT,
-  TIME_COLUMN_DEFAULT,
+  TIME_FIELD_DEFAULT,
   FIX_FIRST_COLUMN_DEFAULT,
 } from 'src/shared/constants/tableGraph'
 import {generateThresholdsListHexs} from 'shared/constants/colorOperations'
 
+const filterInvisibleRows = (data, verticalTimeAxis, fieldNames) => {
+  let visibleData = [[]]
+  if (verticalTimeAxis) {
+    const visibleColumns = {}
+    visibleData = data.map((row, i) => {
+      return row.filter((col, j) => {
+        if (i === 0) {
+          const foundField = fieldNames.find(
+            field => field.internalName === col
+          )
+          visibleColumns[j] = foundField && foundField.visible
+        }
+        return visibleColumns[j]
+      })
+    })
+  } else {
+    visibleData = data.filter(row => {
+      const foundField = fieldNames.find(field => field.internalName === row[0])
+      return foundField && foundField.visible
+    })
+  }
+
+  return visibleData[0].length ? visibleData : [[]]
+}
+
 class TableGraph extends Component {
   constructor(props) {
     super(props)
@@ -36,7 +61,7 @@ class TableGraph extends Component {
     const {data, unzippedData} = timeSeriesToTableGraph(nextProps.data)
 
     const {
-      tableOptions: {sortBy: {internalName}, columnNames, verticalTimeAxis},
+      tableOptions: {sortBy: {internalName}, fieldNames, verticalTimeAxis},
     } = nextProps
     const sortByColumnIndex = _.indexOf(data[0], internalName)
 
@@ -45,30 +70,11 @@ class TableGraph extends Component {
       ..._.sortBy(_.drop(data, 1), sortByColumnIndex),
     ]
 
-    let filteredData = [[]]
-    if (verticalTimeAxis) {
-      const visibleColumns = {}
-      filteredData = sortedData.map((row, i) => {
-        return row.filter((col, j) => {
-          if (i === 0) {
-            const foundColumn = columnNames.find(
-              column => column.internalName === col
-            )
-            visibleColumns[j] = foundColumn && foundColumn.visible
-          }
-          return visibleColumns[j]
-        })
-      })
-    } else {
-      filteredData = data.filter(row => {
-        const foundField = columnNames.find(
-          column => column.internalName === row[0]
-        )
-        return foundField && foundField.visible
-      })
-    }
-
-    const visibleData = filteredData[0].length ? filteredData : [[]]
+    const visibleData = filterInvisibleRows(
+      sortedData,
+      verticalTimeAxis,
+      fieldNames
+    )
 
     this.setState({
       data: sortedData,
@@ -78,11 +84,6 @@ class TableGraph extends Component {
     })
   }
 
-  componentWillMount() {
-    this._data = [[]]
-    this._visibleData = [[]]
-  }
-
   calcHoverTimeIndex = (data, hoverTime, verticalTimeAxis) => {
     if (isEmpty(data) || hoverTime === NULL_HOVER_TIME) {
       return undefined
@@ -131,17 +132,15 @@ class TableGraph extends Component {
     const columnCount = _.get(data, ['0', 'length'], 0)
     const rowCount = data.length
     const timeFormat = _.get(tableOptions, 'timeFormat', TIME_FORMAT_DEFAULT)
-    const columnNames = _.get(tableOptions, 'columnNames', [
-      TIME_COLUMN_DEFAULT,
-    ])
+    const columnNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
     const fixFirstColumn = _.get(
       tableOptions,
       'fixFirstColumn',
       FIX_FIRST_COLUMN_DEFAULT
     )
 
-    const timeField = columnNames.find(
-      column => column.internalName === TIME_COLUMN_DEFAULT.internalName
+    const timeField = fieldNames.find(
+      field => field.internalName === TIME_FIELD_DEFAULT.internalName
     )
 
     const isFixedRow = rowIndex === 0 && columnIndex > 0
@@ -187,11 +186,10 @@ class TableGraph extends Component {
     })
 
     const cellData = data[rowIndex][columnIndex]
-    const foundColumn = columnNames.find(
-      column => column.internalName === cellData
-    )
-    const columnName =
-      foundColumn && (foundColumn.displayName || foundColumn.internalName)
+
+    const foundField = fieldNames.find(field => field.internalName === cellData)
+    const fieldName =
+      foundField && (foundField.displayName || foundField.internalName)
 
     return (
       <div
@@ -202,7 +200,7 @@ class TableGraph extends Component {
       >
         {isTimeData
           ? `${moment(cellData).format(timeFormat)}`
-          : columnName || `${cellData}`}
+          : fieldName || `${cellData}`}
       </div>
     )
   }
@@ -255,8 +253,8 @@ class TableGraph extends Component {
             timeFormat={
               tableOptions ? tableOptions.timeFormat : TIME_FORMAT_DEFAULT
             }
-            columnNames={
-              tableOptions ? tableOptions.columnNames : [TIME_COLUMN_DEFAULT]
+            fieldNames={
+              tableOptions ? tableOptions.fieldNames : [TIME_FIELD_DEFAULT]
             }
             scrollToRow={scrollToRow}
             scrollToColumn={scrollToColumn}
diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js
index 83b439412c..2407f0a96c 100644
--- a/ui/src/shared/constants/tableGraph.js
+++ b/ui/src/shared/constants/tableGraph.js
@@ -6,7 +6,7 @@ export const NULL_HOVER_TIME = '0'
 export const TIME_FORMAT_DEFAULT = 'MM/DD/YYYY HH:mm:ss.ss'
 export const TIME_FORMAT_CUSTOM = 'Custom'
 
-export const TIME_COLUMN_DEFAULT = {
+export const TIME_FIELD_DEFAULT = {
   internalName: 'time',
   displayName: '',
   visible: true,
@@ -29,8 +29,8 @@ export const FORMAT_OPTIONS = [
 export const DEFAULT_TABLE_OPTIONS = {
   verticalTimeAxis: true,
   timeFormat: TIME_FORMAT_DEFAULT,
-  sortBy: TIME_COLUMN_DEFAULT,
+  sortBy: TIME_FIELD_DEFAULT,
   wrapping: 'truncate',
-  columnNames: [TIME_COLUMN_DEFAULT],
+  fieldNames: [TIME_FIELD_DEFAULT],
   fixFirstColumn: FIX_FIRST_COLUMN_DEFAULT,
 }
diff --git a/ui/src/style/components/ceo-display-options.scss b/ui/src/style/components/ceo-display-options.scss
index 25b9f0d202..8212fd7413 100644
--- a/ui/src/style/components/ceo-display-options.scss
+++ b/ui/src/style/components/ceo-display-options.scss
@@ -207,7 +207,7 @@ $graph-type--gutter: 4px;
 }
 
 .gauge-controls--section,
-.column-controls--section {
+.field-controls--section {
   width: 100%;
   display: flex;
   flex-wrap: nowrap;
@@ -257,7 +257,7 @@ button.btn.btn-primary.btn-sm.gauge-controls--add-threshold {
 }
 
 
-.column-controls--label, .column-controls--label-hidden {
+.field-controls--label, .field-controls--label-hidden {
   @extend %gauge-controls-label-styles;
   color: $g16-pearl;
   background-color: $g4-onyx;
@@ -271,10 +271,10 @@ button.btn.btn-primary.btn-sm.gauge-controls--add-threshold {
     }
   }
 }
-.column-controls--label-hidden {
+.field-controls--label-hidden {
   color: $g0-obsidian;
 }
-.column-controls-input {
+.field-controls-input {
   flex: 1 0 0;
   display: flex;
   align-items: center;
diff --git a/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx
deleted file mode 100644
index ab5d7ce1b1..0000000000
--- a/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react'
-
-import GraphOptionsCustomizableColumn from 'src/dashboards/components/GraphOptionsCustomizableColumn'
-import InputClickToEdit from 'src/shared/components/InputClickToEdit'
-
-import {shallow} from 'enzyme'
-
-const setup = (override = {}) => {
-  const props = {
-    internalName: '',
-    displayName: '',
-    visible: true,
-    onColumnUpdate: () => {},
-    ...override,
-  }
-
-  const wrapper = shallow(<GraphOptionsCustomizableColumn {...props} />)
-  const instance = wrapper.instance() as GraphOptionsCustomizableColumn
-
-  return {wrapper, props, instance}
-}
-
-describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => {
-  describe('rendering', () => {
-    it('displays both label div and InputClickToEdit', () => {
-      const {wrapper} = setup()
-      const label = wrapper.find('div').last()
-      const input = wrapper.find(InputClickToEdit)
-      const icon = wrapper.find('span')
-
-      expect(label.exists()).toBe(true)
-      expect(icon.exists()).toBe(true)
-      expect(input.exists()).toBe(true)
-    })
-
-    describe('when there is an internalName', () => {
-      it('displays the value', () => {
-        const internalName = 'test'
-        const {wrapper} = setup({internalName})
-        const label = wrapper.find('div').last()
-        const icon = wrapper.find('span')
-
-        expect(label.exists()).toBe(true)
-        expect(label.children().contains(internalName)).toBe(true)
-        expect(icon.exists()).toBe(true)
-      })
-    })
-
-    describe('when visible is false', () => {
-      it('displays disabled inputClickToEdit', () => {
-        const visible = false
-        const {wrapper} = setup({visible})
-        const input = wrapper.find(InputClickToEdit)
-
-        expect(input.prop('disabled')).toBe(!visible)
-      })
-    })
-  })
-
-  describe('instance methods', () => {
-    describe('#handleColumnUpdate', () => {
-      it('calls onColumnUpdate once with internalName, new name, and visible', () => {
-        const onColumnUpdate = jest.fn()
-        const internalName = 'test'
-        const {instance, props: {visible}} = setup({
-          onColumnUpdate,
-          internalName,
-        })
-        const rename = 'TEST'
-
-        instance.handleColumnRename(rename)
-
-        expect(onColumnUpdate).toHaveBeenCalledTimes(1)
-        expect(onColumnUpdate).toHaveBeenCalledWith({
-          internalName,
-          displayName: rename,
-          visible,
-        })
-      })
-    })
-
-    describe('#handleToggleVisible', () => {
-      it('calls onColumnUpdate once with !visible, internalName, and displayName', () => {
-        const onColumnUpdate = jest.fn()
-        const visible = true
-        const {instance, props: {internalName, displayName}} = setup({
-          visible,
-          onColumnUpdate,
-        })
-
-        instance.handleToggleVisible()
-
-        expect(onColumnUpdate).toHaveBeenCalledTimes(1)
-        expect(onColumnUpdate).toHaveBeenCalledWith({
-          internalName,
-          displayName,
-          visible: !visible,
-        })
-      })
-    })
-  })
-})
diff --git a/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx
deleted file mode 100644
index 4fd67f34ee..0000000000
--- a/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-
-import GraphOptionsCustomizeColumns from 'src/dashboards/components/GraphOptionsCustomizeColumns'
-import GraphOptionsCustomizableColumn from 'src/dashboards/components/GraphOptionsCustomizableColumn'
-import {TIME_COLUMN_DEFAULT} from 'src/shared/constants/tableGraph'
-
-import {shallow} from 'enzyme'
-
-const setup = (override = {}) => {
-  const props = {
-    columns: [],
-    onColumnUpdate: () => {},
-    ...override,
-  }
-
-  const wrapper = shallow(<GraphOptionsCustomizeColumns {...props} />)
-
-  return {wrapper, props}
-}
-
-describe('Dashboards.Components.GraphOptionsCustomizeColumns', () => {
-  describe('rendering', () => {
-    it('displays label and all columns passed in', () => {
-      const columns = [TIME_COLUMN_DEFAULT]
-      const {wrapper} = setup({columns})
-      const label = wrapper.find('label')
-      const customizableColumns = wrapper.find(GraphOptionsCustomizableColumn)
-
-      expect(label.exists()).toBe(true)
-      expect(customizableColumns.exists()).toBe(true)
-      expect(customizableColumns.length).toBe(columns.length)
-    })
-  })
-})
diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx
index 79dbc59149..bf9618f857 100644
--- a/ui/test/dashboards/components/TableOptions.test.tsx
+++ b/ui/test/dashboards/components/TableOptions.test.tsx
@@ -7,7 +7,7 @@ import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFo
 import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis'
 import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
 import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsTextWrapping'
-import GraphOptionsCustomizeColumns from 'src/dashboards/components/GraphOptionsCustomizeColumns'
+import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 import ThresholdsList from 'src/shared/components/ThresholdsList'
 import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
 import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
@@ -49,9 +49,9 @@ const defaultProps = {
   tableOptions: {
     timeFormat: '',
     verticalTimeAxis: true,
-    sortBy: {internalName: '', displayName: ''},
+    sortBy: {internalName: '', displayName: '', visible: true},
     wrapping: '',
-    columnNames: [],
+    fieldNames: [],
     fixFirstColumn: true,
   },
   onResetFocus: () => {},
@@ -97,7 +97,7 @@ describe('Dashboards.Components.TableOptions', () => {
           },
         ]
 
-        expect(instance.computedColumnNames).toEqual(expected)
+        expect(instance.computedFieldNames).toEqual(expected)
       })
     })
   })
@@ -136,8 +136,8 @@ describe('Dashboards.Components.TableOptions', () => {
       const graphOptionsFixFirstColumn = wrapper.find(
         GraphOptionsFixFirstColumn
       )
-      const graphOptionsCustomizeColumns = wrapper.find(
-        GraphOptionsCustomizeColumns
+      const graphOptionsCustomizeFields = wrapper.find(
+        GraphOptionsCustomizeFields
       )
       const thresholdsList = wrapper.find(ThresholdsList)
       const thresholdsListTypeToggle = wrapper.find(ThresholdsListTypeToggle)
@@ -152,7 +152,7 @@ describe('Dashboards.Components.TableOptions', () => {
       expect(graphOptionsSortBy.exists()).toBe(true)
       expect(graphOptionsTextWrapping.exists()).toBe(true)
       expect(graphOptionsFixFirstColumn.exists()).toBe(true)
-      expect(graphOptionsCustomizeColumns.exists()).toBe(true)
+      expect(graphOptionsCustomizeFields.exists()).toBe(true)
       expect(thresholdsList.exists()).toBe(true)
       expect(thresholdsListTypeToggle.exists()).toBe(true)
     })

From c644c77364c76edaf261bdfa107bd4ea065e1730 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 16 Mar 2018 18:00:27 -0700
Subject: [PATCH 08/38] add renamed files from columnNames to fieldName changes

---
 .../GraphOptionsCustomizableField.tsx         |  62 +++++++++++
 .../GraphOptionsCustomizeFields.tsx           |  36 +++++++
 .../GraphOptionsCustomizableField.test.tsx    | 102 ++++++++++++++++++
 .../GraphOptionsCustomizeFields.test.tsx      |  34 ++++++
 4 files changed, 234 insertions(+)
 create mode 100644 ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
 create mode 100644 ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
 create mode 100644 ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx
 create mode 100644 ui/test/dashboards/components/GraphOptionsCustomizeFields.test.tsx

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
new file mode 100644
index 0000000000..829f05443e
--- /dev/null
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
@@ -0,0 +1,62 @@
+import React, {PureComponent} from 'react'
+
+import InputClickToEdit from 'src/shared/components/InputClickToEdit'
+
+type Field = {
+  internalName: string
+  displayName: string
+  visible: boolean
+}
+
+interface Props {
+  internalName: string
+  displayName: string
+  visible: boolean
+  onFieldUpdate: (field: Field) => void
+}
+
+class GraphOptionsCustomizableField extends PureComponent<Props, {}> {
+  constructor(props) {
+    super(props)
+
+    this.handleFieldRename = this.handleFieldRename.bind(this)
+    this.handleToggleVisible = this.handleToggleVisible.bind(this)
+  }
+
+  handleFieldRename(rename: string) {
+    const {onFieldUpdate, internalName, visible} = this.props
+    onFieldUpdate({internalName, displayName: rename, visible})
+  }
+
+  handleToggleVisible() {
+    const {onFieldUpdate, internalName, displayName, visible} = this.props
+    onFieldUpdate({internalName, displayName, visible: !visible})
+  }
+
+  render() {
+    const {internalName, displayName, visible} = this.props
+
+    return (
+      <div className="field-controls--section">
+        <div
+          className={
+            visible ? 'field-controls--label' : 'field-controls--label-hidden'
+          }
+        >
+          <span className="icon eye" onClick={this.handleToggleVisible} />
+          {internalName}
+        </div>
+        <InputClickToEdit
+          value={displayName}
+          wrapperClass="field-controls-input"
+          onBlur={this.handleFieldRename}
+          placeholder="Rename..."
+          appearAsNormalInput={true}
+          disabled={!visible}
+        />
+      </div>
+    )
+  }
+}
+
+export default GraphOptionsCustomizableField
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
new file mode 100644
index 0000000000..7683e329da
--- /dev/null
+++ b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
@@ -0,0 +1,36 @@
+import React, {SFC} from 'react'
+
+import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
+import uuid from 'uuid'
+
+type Field = {
+  internalName: string
+  displayName: string
+  visible: boolean
+}
+
+interface Props {
+  fields: Field[]
+  onFieldUpdate: (field: Field) => void
+}
+
+const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
+  return (
+    <div className="graph-options-group">
+      <label className="form-label">Customize Fields</label>
+      {fields.map(field => {
+        return (
+          <GraphOptionsCustomizableField
+            key={uuid.v4()}
+            internalName={field.internalName}
+            displayName={field.displayName}
+            visible={field.visible}
+            onFieldUpdate={onFieldUpdate}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default GraphOptionsCustomizeFields
diff --git a/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx
new file mode 100644
index 0000000000..cf41d10e35
--- /dev/null
+++ b/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx
@@ -0,0 +1,102 @@
+import React from 'react'
+
+import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
+import InputClickToEdit from 'src/shared/components/InputClickToEdit'
+
+import {shallow} from 'enzyme'
+
+const setup = (override = {}) => {
+  const props = {
+    internalName: '',
+    displayName: '',
+    visible: true,
+    onFieldUpdate: () => {},
+    ...override,
+  }
+
+  const wrapper = shallow(<GraphOptionsCustomizableField {...props} />)
+  const instance = wrapper.instance() as GraphOptionsCustomizableField
+
+  return {wrapper, props, instance}
+}
+
+describe('Dashboards.Components.GraphOptionsCustomizableField', () => {
+  describe('rendering', () => {
+    it('displays both label div and InputClickToEdit', () => {
+      const {wrapper} = setup()
+      const label = wrapper.find('div').last()
+      const input = wrapper.find(InputClickToEdit)
+      const icon = wrapper.find('span')
+
+      expect(label.exists()).toBe(true)
+      expect(icon.exists()).toBe(true)
+      expect(input.exists()).toBe(true)
+    })
+
+    describe('when there is an internalName', () => {
+      it('displays the value', () => {
+        const internalName = 'test'
+        const {wrapper} = setup({internalName})
+        const label = wrapper.find('div').last()
+        const icon = wrapper.find('span')
+
+        expect(label.exists()).toBe(true)
+        expect(label.children().contains(internalName)).toBe(true)
+        expect(icon.exists()).toBe(true)
+      })
+    })
+
+    describe('when visible is false', () => {
+      it('displays disabled inputClickToEdit', () => {
+        const visible = false
+        const {wrapper} = setup({visible})
+        const input = wrapper.find(InputClickToEdit)
+
+        expect(input.prop('disabled')).toBe(!visible)
+      })
+    })
+  })
+
+  describe('instance methods', () => {
+    describe('#handleFieldUpdate', () => {
+      it('calls onFieldUpdate once with internalName, new name, and visible', () => {
+        const onFieldUpdate = jest.fn()
+        const internalName = 'test'
+        const {instance, props: {visible}} = setup({
+          onFieldUpdate,
+          internalName,
+        })
+        const rename = 'TEST'
+
+        instance.handleFieldRename(rename)
+
+        expect(onFieldUpdate).toHaveBeenCalledTimes(1)
+        expect(onFieldUpdate).toHaveBeenCalledWith({
+          internalName,
+          displayName: rename,
+          visible,
+        })
+      })
+    })
+
+    describe('#handleToggleVisible', () => {
+      it('calls onFieldUpdate once with !visible, internalName, and displayName', () => {
+        const onFieldUpdate = jest.fn()
+        const visible = true
+        const {instance, props: {internalName, displayName}} = setup({
+          visible,
+          onFieldUpdate,
+        })
+
+        instance.handleToggleVisible()
+
+        expect(onFieldUpdate).toHaveBeenCalledTimes(1)
+        expect(onFieldUpdate).toHaveBeenCalledWith({
+          internalName,
+          displayName,
+          visible: !visible,
+        })
+      })
+    })
+  })
+})
diff --git a/ui/test/dashboards/components/GraphOptionsCustomizeFields.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizeFields.test.tsx
new file mode 100644
index 0000000000..107a191d72
--- /dev/null
+++ b/ui/test/dashboards/components/GraphOptionsCustomizeFields.test.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
+import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
+import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
+
+import {shallow} from 'enzyme'
+
+const setup = (override = {}) => {
+  const props = {
+    fields: [],
+    onFieldUpdate: () => {},
+    ...override,
+  }
+
+  const wrapper = shallow(<GraphOptionsCustomizeFields {...props} />)
+
+  return {wrapper, props}
+}
+
+describe('Dashboards.Components.GraphOptionsCustomizableField', () => {
+  describe('rendering', () => {
+    it('displays label and all fields passed in', () => {
+      const fields = [TIME_FIELD_DEFAULT]
+      const {wrapper} = setup({fields})
+      const label = wrapper.find('label')
+      const CustomizableFields = wrapper.find(GraphOptionsCustomizableField)
+
+      expect(label.exists()).toBe(true)
+      expect(CustomizableFields.exists()).toBe(true)
+      expect(CustomizableFields.length).toBe(fields.length)
+    })
+  })
+})

From fe47c672448ee5e53ab1056443e42af482505da8 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Mon, 19 Mar 2018 11:57:36 -0700
Subject: [PATCH 09/38] add scrolling to customizeFields when there are a lot
 of them in CEO options

---
 .../GraphOptionsCustomizableField.tsx         |  2 +-
 .../GraphOptionsCustomizeFields.tsx           | 24 ++++++++++---------
 ui/src/dashboards/components/TableOptions.tsx |  2 +-
 .../style/components/ceo-display-options.scss |  5 +++-
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
index 829f05443e..351ac1faf6 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
@@ -28,7 +28,7 @@ class GraphOptionsCustomizableField extends PureComponent<Props, {}> {
     onFieldUpdate({internalName, displayName: rename, visible})
   }
 
-  handleToggleVisible() {
+  handleToggleVisible(e) {
     const {onFieldUpdate, internalName, displayName, visible} = this.props
     onFieldUpdate({internalName, displayName, visible: !visible})
   }
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
index 7683e329da..788af1961b 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
@@ -18,17 +18,19 @@ const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
   return (
     <div className="graph-options-group">
       <label className="form-label">Customize Fields</label>
-      {fields.map(field => {
-        return (
-          <GraphOptionsCustomizableField
-            key={uuid.v4()}
-            internalName={field.internalName}
-            displayName={field.displayName}
-            visible={field.visible}
-            onFieldUpdate={onFieldUpdate}
-          />
-        )
-      })}
+      <div className="field-controls--group">
+        {fields.map(field => {
+          return (
+            <GraphOptionsCustomizableField
+              key={uuid.v4()}
+              internalName={field.internalName}
+              displayName={field.displayName}
+              visible={field.visible}
+              onFieldUpdate={onFieldUpdate}
+            />
+          )
+        })}
+      </div>
     </div>
   )
 }
diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 233b3222ff..bc904fb665 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -123,7 +123,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     const {handleUpdateTableOptions, tableOptions} = this.props
     const {fieldNames} = tableOptions
     const updatedFields = fieldNames.map(
-      op => (op.internalName === field.internalName ? field : op)
+      f => (f.internalName === field.internalName ? field : f)
     )
     handleUpdateTableOptions({...tableOptions, fieldNames: updatedFields})
   }
diff --git a/ui/src/style/components/ceo-display-options.scss b/ui/src/style/components/ceo-display-options.scss
index 8212fd7413..526c6a462c 100644
--- a/ui/src/style/components/ceo-display-options.scss
+++ b/ui/src/style/components/ceo-display-options.scss
@@ -256,7 +256,10 @@ button.btn.btn-primary.btn-sm.gauge-controls--add-threshold {
   flex: 1 0 0;
 }
 
-
+.field-controls--group {
+  max-height: 235px;
+  overflow-y: scroll;
+}
 .field-controls--label, .field-controls--label-hidden {
   @extend %gauge-controls-label-styles;
   color: $g16-pearl;

From 11d872f16ecc5a70c5410cf3faeb2cb4fe887e82 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 20 Mar 2018 12:57:02 -0700
Subject: [PATCH 10/38] rebase to master and fix bugs

---
 .../GraphOptionsCustomizableField.tsx         |  2 +-
 .../dashboards/reducers/cellEditorOverlay.js  |  2 -
 ui/src/shared/components/TableGraph.js        | 75 +++++++++----------
 3 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
index 351ac1faf6..829f05443e 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
@@ -28,7 +28,7 @@ class GraphOptionsCustomizableField extends PureComponent<Props, {}> {
     onFieldUpdate({internalName, displayName: rename, visible})
   }
 
-  handleToggleVisible(e) {
+  handleToggleVisible() {
     const {onFieldUpdate, internalName, displayName, visible} = this.props
     onFieldUpdate({internalName, displayName, visible: !visible})
   }
diff --git a/ui/src/dashboards/reducers/cellEditorOverlay.js b/ui/src/dashboards/reducers/cellEditorOverlay.js
index 402f488f64..4629e89750 100644
--- a/ui/src/dashboards/reducers/cellEditorOverlay.js
+++ b/ui/src/dashboards/reducers/cellEditorOverlay.js
@@ -11,8 +11,6 @@ import {
 
 import {initializeOptions} from 'src/dashboards/constants/cellEditor'
 
-import {initializeOptions} from 'src/shared/constants/tableGraph'
-
 export const initialState = {
   cell: null,
   thresholdsListType: THRESHOLD_TYPE_TEXT,
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index b6a9e90cb5..444516cc4a 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -18,27 +18,26 @@ import {
 } from 'src/shared/constants/tableGraph'
 import {generateThresholdsListHexs} from 'shared/constants/colorOperations'
 
-const filterInvisibleRows = (data, verticalTimeAxis, fieldNames) => {
-  let visibleData = [[]]
-  if (verticalTimeAxis) {
-    const visibleColumns = {}
-    visibleData = data.map((row, i) => {
-      return row.filter((col, j) => {
-        if (i === 0) {
-          const foundField = fieldNames.find(
-            field => field.internalName === col
-          )
-          visibleColumns[j] = foundField && foundField.visible
-        }
-        return visibleColumns[j]
-      })
+const filterInvisibleRows = (data, fieldNames) => {
+  const visibleData = data.filter(row => {
+    const foundField = fieldNames.find(field => field.internalName === row[0])
+    return foundField && foundField.visible
+  })
+
+  return visibleData.length ? visibleData : [[]]
+}
+
+const filterInvisibleColumns = (data, fieldNames) => {
+  const visibleColumns = {}
+  visibleData = data.map((row, i) => {
+    return row.filter((col, j) => {
+      if (i === 0) {
+        const foundField = fieldNames.find(field => field.internalName === col)
+        visibleColumns[j] = foundField && foundField.visible
+      }
+      return visibleColumns[j]
     })
-  } else {
-    visibleData = data.filter(row => {
-      const foundField = fieldNames.find(field => field.internalName === row[0])
-      return foundField && foundField.visible
-    })
-  }
+  })
 
   return visibleData[0].length ? visibleData : [[]]
 }
@@ -59,29 +58,29 @@ class TableGraph extends Component {
 
   componentWillReceiveProps(nextProps) {
     const {data, unzippedData} = timeSeriesToTableGraph(nextProps.data)
-
     const {
       tableOptions: {sortBy: {internalName}, fieldNames, verticalTimeAxis},
     } = nextProps
-    const sortByColumnIndex = _.indexOf(data[0], internalName)
 
-    const sortedData = [
-      data[0],
-      ..._.sortBy(_.drop(data, 1), sortByColumnIndex),
-    ]
+    if (!isEmpty(data[0])) {
+      const sortedData = [
+        data[0],
+        ..._.sortBy(_.drop(data, 1), sortByColumnIndex),
+      ]
 
-    const visibleData = filterInvisibleRows(
-      sortedData,
-      verticalTimeAxis,
-      fieldNames
-    )
+      const sortByColumnIndex = _.indexOf(data[0], internalName)
 
-    this.setState({
-      data: sortedData,
-      visibleData,
-      unzippedData,
-      sortByColumnIndex,
-    })
+      const visibleData = verticalTimeAxis
+        ? filterInvisibleColumns(sortedData, fieldNames)
+        : filterInvisibleRows(sortedData, fieldNames)
+
+      this.setState({
+        data: sortedData,
+        visibleData,
+        unzippedData,
+        sortByColumnIndex,
+      })
+    }
   }
 
   calcHoverTimeIndex = (data, hoverTime, verticalTimeAxis) => {
@@ -238,7 +237,7 @@ class TableGraph extends Component {
         ref={gridContainer => (this.gridContainer = gridContainer)}
         onMouseOut={this.handleMouseOut}
       >
-        {!isEmpty(visibleData) &&
+        {!isEmpty(data) &&
           <MultiGrid
             columnCount={columnCount}
             columnWidth={COLUMN_WIDTH}

From 668cf2175f93b793221fc278b2a9365595fd7984 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 20 Mar 2018 13:00:04 -0700
Subject: [PATCH 11/38] update tableoptions.test with visible

---
 ui/test/dashboards/components/TableOptions.test.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx
index bf9618f857..40bbdec134 100644
--- a/ui/test/dashboards/components/TableOptions.test.tsx
+++ b/ui/test/dashboards/components/TableOptions.test.tsx
@@ -78,22 +78,27 @@ describe('Dashboards.Components.TableOptions', () => {
           {
             displayName: '',
             internalName: 'time',
+            visible: true,
           },
           {
             displayName: '',
             internalName: 'dev.boom',
+            visible: true,
           },
           {
             displayName: '',
             internalName: 'dev.again',
+            visible: true,
           },
           {
             displayName: '',
             internalName: 'prod.boom',
+            visible: true,
           },
           {
             displayName: '',
             internalName: 'prod.again',
+            visible: true,
           },
         ]
 

From 25ab47c68968cfb69484c8b3d0a6c56b8fa7f159 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 20 Mar 2018 15:38:19 -0700
Subject: [PATCH 12/38] WIP get labels from tableGraph instead of building them
 in tableOptions

---
 .../components/CellEditorOverlay.js           |  8 +++++++
 .../dashboards/components/DisplayOptions.js   |  3 +++
 ui/src/dashboards/components/TableOptions.tsx | 21 +++++++------------
 ui/src/dashboards/components/Visualization.js |  3 +++
 ui/src/shared/components/RefreshingGraph.js   |  3 +++
 ui/src/shared/components/TableGraph.js        | 15 ++++++++-----
 ui/src/utils/timeSeriesToDygraph.js           |  1 +
 7 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index f866f61bb9..d096404c63 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -48,6 +48,7 @@ class CellEditorOverlay extends Component {
       activeQueryIndex: 0,
       isDisplayOptionsTabActive: false,
       staticLegend: IS_STATIC_LEGEND(legend),
+      dataLabels: [],
     }
   }
 
@@ -259,6 +260,10 @@ class CellEditorOverlay extends Component {
     this.overlayRef.focus()
   }
 
+  setDataLabels = dataLabels => {
+    this.setState({dataLabels})
+  }
+
   render() {
     const {
       onCancel,
@@ -273,6 +278,7 @@ class CellEditorOverlay extends Component {
       isDisplayOptionsTabActive,
       queriesWorkingDraft,
       staticLegend,
+      dataLabels,
     } = this.state
 
     const queryActions = {
@@ -305,6 +311,7 @@ class CellEditorOverlay extends Component {
             queryConfigs={queriesWorkingDraft}
             editQueryStatus={editQueryStatus}
             staticLegend={staticLegend}
+            setDataLabels={this.setDataLabels}
           />
           <CEOBottom>
             <OverlayControls
@@ -324,6 +331,7 @@ class CellEditorOverlay extends Component {
                   onToggleStaticLegend={this.handleToggleStaticLegend}
                   staticLegend={staticLegend}
                   onResetFocus={this.handleResetFocus}
+                  dataLabels={dataLabels}
                 />
               : <QueryMaker
                   source={this.getSource()}
diff --git a/ui/src/dashboards/components/DisplayOptions.js b/ui/src/dashboards/components/DisplayOptions.js
index 8c08f21eca..67270b6a68 100644
--- a/ui/src/dashboards/components/DisplayOptions.js
+++ b/ui/src/dashboards/components/DisplayOptions.js
@@ -43,6 +43,7 @@ class DisplayOptions extends Component {
       onToggleStaticLegend,
       onResetFocus,
       queryConfigs,
+      dataLabels,
     } = this.props
     switch (type) {
       case 'gauge':
@@ -54,6 +55,7 @@ class DisplayOptions extends Component {
           <TableOptions
             onResetFocus={onResetFocus}
             queryConfigs={queryConfigs}
+            dataLabels={dataLabels}
           />
         )
       default:
@@ -93,6 +95,7 @@ DisplayOptions.propTypes = {
   onToggleStaticLegend: func.isRequired,
   staticLegend: bool,
   onResetFocus: func.isRequired,
+  dataLabels: arrayOf(string),
 }
 
 const mapStateToProps = ({cellEditorOverlay: {cell, cell: {axes}}}) => ({
diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index bc904fb665..83fcb2aa14 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -46,6 +46,7 @@ interface Props {
   handleUpdateTableOptions: (options: Options) => void
   tableOptions: Options
   onResetFocus: () => void
+  dataLabels: string[]
 }
 
 export class TableOptions extends PureComponent<Props, {}> {
@@ -65,21 +66,12 @@ export class TableOptions extends PureComponent<Props, {}> {
   }
 
   get computedFieldNames() {
-    const {queryConfigs} = this.props
+    const {dataLabels} = this.props
 
-    const queryFields = _.flatten(
-      queryConfigs.map(({measurement, fields}) => {
-        return fields.map(({alias}) => {
-          const internalName = `${measurement}.${alias}`
-          const existing = this.fieldNames.find(
-            f => f.internalName === internalName
-          )
-          return existing || {internalName, displayName: '', visible: true}
-        })
-      })
-    )
-
-    return [this.timeColumn, ...queryFields]
+    return dataLabels.map(label => {
+      const existing = this.fieldNames.find(f => f.internalName === label)
+      return existing || {internalName: label, displayName: '', visible: true}
+    })
   }
 
   componentWillMount() {
@@ -133,6 +125,7 @@ export class TableOptions extends PureComponent<Props, {}> {
       tableOptions: {timeFormat, fieldNames, verticalTimeAxis, fixFirstColumn},
       onResetFocus,
       tableOptions,
+      dataLabels,
     } = this.props
 
     const tableSortByOptions = this.computedFieldNames.map(col => ({
diff --git a/ui/src/dashboards/components/Visualization.js b/ui/src/dashboards/components/Visualization.js
index a8b48313ce..d84a76ed06 100644
--- a/ui/src/dashboards/components/Visualization.js
+++ b/ui/src/dashboards/components/Visualization.js
@@ -22,6 +22,7 @@ const DashVisualization = (
     staticLegend,
     thresholdsListColors,
     tableOptions,
+    setDataLabels,
   },
   {source: {links: {proxy}}}
 ) => {
@@ -42,6 +43,7 @@ const DashVisualization = (
           editQueryStatus={editQueryStatus}
           resizerTopHeight={resizerTopHeight}
           staticLegend={staticLegend}
+          setDataLabels={setDataLabels}
         />
       </div>
     </div>
@@ -86,6 +88,7 @@ DashVisualization.propTypes = {
     }).isRequired
   ),
   staticLegend: bool,
+  setDataLabels: func,
 }
 
 DashVisualization.contextTypes = {
diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js
index 5d732a38ce..8a8399e1c2 100644
--- a/ui/src/shared/components/RefreshingGraph.js
+++ b/ui/src/shared/components/RefreshingGraph.js
@@ -23,6 +23,7 @@ const RefreshingGraph = ({
   cellID,
   queries,
   tableOptions,
+  setDataLabels,
   templates,
   timeRange,
   cellHeight,
@@ -100,6 +101,7 @@ const RefreshingGraph = ({
         hoverTime={hoverTime}
         onSetHoverTime={onSetHoverTime}
         inView={inView}
+        setDataLabels={setDataLabels}
       />
     )
   }
@@ -166,6 +168,7 @@ RefreshingGraph.propTypes = {
   cellID: string,
   inView: bool,
   tableOptions: shape({}),
+  setDataLabels: func,
 }
 
 RefreshingGraph.defaultProps = {
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 444516cc4a..c301b88992 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -29,7 +29,7 @@ const filterInvisibleRows = (data, fieldNames) => {
 
 const filterInvisibleColumns = (data, fieldNames) => {
   const visibleColumns = {}
-  visibleData = data.map((row, i) => {
+  const visibleData = data.map((row, i) => {
     return row.filter((col, j) => {
       if (i === 0) {
         const foundField = fieldNames.find(field => field.internalName === col)
@@ -57,19 +57,23 @@ class TableGraph extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const {data, unzippedData} = timeSeriesToTableGraph(nextProps.data)
+    const {labels, data, unzippedData} = timeSeriesToTableGraph(nextProps.data)
     const {
       tableOptions: {sortBy: {internalName}, fieldNames, verticalTimeAxis},
+      setDataLabels,
     } = nextProps
-
     if (!isEmpty(data[0])) {
+      if (setDataLabels) {
+        setDataLabels(labels)
+      }
+
+      const sortByColumnIndex = _.indexOf(data[0], internalName)
+
       const sortedData = [
         data[0],
         ..._.sortBy(_.drop(data, 1), sortByColumnIndex),
       ]
 
-      const sortByColumnIndex = _.indexOf(data[0], internalName)
-
       const visibleData = verticalTimeAxis
         ? filterInvisibleColumns(sortedData, fieldNames)
         : filterInvisibleRows(sortedData, fieldNames)
@@ -287,6 +291,7 @@ TableGraph.propTypes = {
       value: string.isRequired,
     }).isRequired
   ),
+  setDataLabels: func,
 }
 
 export default TableGraph
diff --git a/ui/src/utils/timeSeriesToDygraph.js b/ui/src/utils/timeSeriesToDygraph.js
index b5d18c3cc9..03e16dba0e 100644
--- a/ui/src/utils/timeSeriesToDygraph.js
+++ b/ui/src/utils/timeSeriesToDygraph.js
@@ -180,6 +180,7 @@ export const timeSeriesToTableGraph = raw => {
   const data = tableData.length ? [labels, ...tableData] : [[]]
   const unzippedData = _.unzip(data)
   return {
+    labels,
     data,
     unzippedData,
   }

From 599b5718dc972261632d92c0d70df0c3d32a4d5c Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 20 Mar 2018 17:29:19 -0700
Subject: [PATCH 13/38] rebase branch to master

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

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index c301b88992..fb4b66a2e7 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -135,7 +135,7 @@ class TableGraph extends Component {
     const columnCount = _.get(data, ['0', 'length'], 0)
     const rowCount = data.length
     const timeFormat = _.get(tableOptions, 'timeFormat', TIME_FORMAT_DEFAULT)
-    const columnNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
+    const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
     const fixFirstColumn = _.get(
       tableOptions,
       'fixFirstColumn',

From 59f05bb84c58f428d9b47e005cb5ea4809b39eed Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 20 Mar 2018 18:54:35 -0700
Subject: [PATCH 14/38] fix time formattin bug

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
---
 .../dashboards/components/GraphOptionsTimeFormat.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
index cb794d4c48..2db452f300 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
+++ b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
@@ -35,18 +35,22 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
     return this.props.onTimeFormatChange
   }
 
+  handleChangeFormat = format => {
+    this.onTimeFormatChange(format)
+    this.setState({format})
+  }
+
   handleChooseFormat = (formatOption: TimeFormatOptions) => {
     if (formatOption.text === TIME_FORMAT_CUSTOM) {
       this.setState({customFormat: true})
     } else {
-      this.setState({format: formatOption.text, customFormat: false})
       this.onTimeFormatChange(formatOption.text)
+      this.setState({format: formatOption.text, customFormat: false})
     }
   }
 
   render() {
     const {format, customFormat} = this.state
-    const {onTimeFormatChange} = this.props
     const tipContent =
       'For information on formatting, see http://momentjs.com/docs/#/parsing/string-format/'
 
@@ -76,8 +80,8 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
             <InputClickToEdit
               wrapperClass="field-controls-input "
               value={format}
-              onBlur={onTimeFormatChange}
-              onChange={onTimeFormatChange}
+              onBlur={this.handleChangeFormat}
+              onChange={this.handleChangeFormat}
               placeholder="Enter custom format..."
               appearAsNormalInput={true}
             />

From f87c380b22fdfd3f94d3e2f3389270fff6deb656 Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Tue, 20 Mar 2018 20:03:12 -0700
Subject: [PATCH 15/38] set null row and column to null array index

---
 ui/src/shared/components/TableGraph.js | 25 ++++++++++++-------------
 ui/src/shared/constants/tableGraph.js  |  3 +--
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 7271ea32c8..218afb7174 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -9,8 +9,7 @@ import moment from 'moment'
 
 import {timeSeriesToTableGraph} from 'src/utils/timeSeriesToDygraph'
 import {
-  NULL_COLUMN_INDEX,
-  NULL_ROW_INDEX,
+  NULL_ARRAY_INDEX,
   NULL_HOVER_TIME,
   TIME_FORMAT_DEFAULT,
   TIME_FIELD_DEFAULT,
@@ -53,10 +52,10 @@ class TableGraph extends Component {
       data: [[]],
       unzippedData: [[]],
       visibleData: [[]],
-      hoveredColumnIndex: NULL_COLUMN_INDEX,
-      hoveredRowIndex: NULL_ROW_INDEX,
-      sortByColumnIndex: NULL_COLUMN_INDEX,
-      clickToSortFieldIndex: NULL_COLUMN_INDEX,
+      hoveredColumnIndex: NULL_ARRAY_INDEX,
+      hoveredRowIndex: NULL_ARRAY_INDEX,
+      sortByColumnIndex: NULL_ARRAY_INDEX,
+      clickToSortFieldIndex: NULL_ARRAY_INDEX,
       clicktoSortDirection: DEFAULT_SORT,
     }
   }
@@ -78,7 +77,7 @@ class TableGraph extends Component {
       }
 
       if (
-        sortByColumnIndex === NULL_COLUMN_INDEX ||
+        sortByColumnIndex === NULL_ARRAY_INDEX ||
         _.get(this.props, ['tableOptions', 'sortBy', 'internalName'], '') !==
           internalName
       ) {
@@ -97,12 +96,12 @@ class TableGraph extends Component {
           visibleData,
           unzippedData: _.unzip(sortedData),
           sortByColumnIndex: newSortByColumnIndex,
-          clickToSortFieldIndex: NULL_COLUMN_INDEX,
+          clickToSortFieldIndex: NULL_ARRAY_INDEX,
           clicktoSortDirection: DEFAULT_SORT,
         })
         return
       }
-      const clicked = clickToSortFieldIndex !== NULL_COLUMN_INDEX
+      const clicked = clickToSortFieldIndex !== NULL_ARRAY_INDEX
       const sortIndex = clicked ? clickToSortFieldIndex : sortByColumnIndex
       const direction = clicked ? clicktoSortDirection : DEFAULT_SORT
       const sortedData = [
@@ -151,8 +150,8 @@ class TableGraph extends Component {
     if (this.props.onSetHoverTime) {
       this.props.onSetHoverTime(NULL_HOVER_TIME)
       this.setState({
-        hoveredColumnIndex: NULL_COLUMN_INDEX,
-        hoveredRowIndex: NULL_ROW_INDEX,
+        hoveredColumnIndex: NULL_ARRAY_INDEX,
+        hoveredRowIndex: NULL_ARRAY_INDEX,
       })
     }
   }
@@ -297,11 +296,11 @@ class TableGraph extends Component {
     const tableWidth = _.get(this, ['gridContainer', 'clientWidth'], 0)
     const tableHeight = _.get(this, ['gridContainer', 'clientHeight'], 0)
     const hoverTimeIndex =
-      hoveredRowIndex === NULL_ROW_INDEX
+      hoveredRowIndex === NULL_ARRAY_INDEX
         ? this.calcHoverTimeIndex(data, hoverTime, verticalTimeAxis)
         : hoveredRowIndex
     const fixedColumnCount = tableOptions.fixFirstColumn ? 1 : undefined
-    const hoveringThisTable = hoveredColumnIndex !== NULL_COLUMN_INDEX
+    const hoveringThisTable = hoveredColumnIndex !== NULL_ARRAY_INDEX
     const scrollToRow =
       !hoveringThisTable && verticalTimeAxis ? hoverTimeIndex : undefined
     const scrollToColumn =
diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js
index 90d524eebe..5687560ce8 100644
--- a/ui/src/shared/constants/tableGraph.js
+++ b/ui/src/shared/constants/tableGraph.js
@@ -1,5 +1,4 @@
-export const NULL_COLUMN_INDEX = -1
-export const NULL_ROW_INDEX = -1
+export const NULL_ARRAY_INDEX = -1
 
 export const NULL_HOVER_TIME = '0'
 

From f8cf8155a252d70fd2fad62da9def99ab417cebd Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Tue, 20 Mar 2018 21:42:52 -0700
Subject: [PATCH 16/38] Make sorting sane

---
 ui/src/shared/components/TableGraph.js | 165 ++++++++++++-------------
 1 file changed, 80 insertions(+), 85 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 218afb7174..4c6118c886 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -41,10 +41,27 @@ const filterInvisibleColumns = (data, fieldNames) => {
       return visibleColumns[j]
     })
   })
-
   return visibleData[0].length ? visibleData : [[]]
 }
 
+const processData = (
+  data,
+  sortFieldName,
+  direction,
+  verticalTimeAxis,
+  fieldNames
+) => {
+  const sortIndex = _.indexOf(data[0], sortFieldName)
+  const sortedData = [
+    data[0],
+    ..._.orderBy(_.drop(data, 1), sortIndex, [direction]),
+  ]
+  const visibleData = verticalTimeAxis
+    ? filterInvisibleColumns(sortedData, fieldNames)
+    : filterInvisibleRows(sortedData, fieldNames)
+  return {sortedData, unzippedData: _.unzip(sortedData), visibleData}
+}
+
 class TableGraph extends Component {
   constructor(props) {
     super(props)
@@ -54,69 +71,54 @@ class TableGraph extends Component {
       visibleData: [[]],
       hoveredColumnIndex: NULL_ARRAY_INDEX,
       hoveredRowIndex: NULL_ARRAY_INDEX,
-      sortByColumnIndex: NULL_ARRAY_INDEX,
-      clickToSortFieldIndex: NULL_ARRAY_INDEX,
-      clicktoSortDirection: DEFAULT_SORT,
+      sortField: '',
+      sortDirection: DEFAULT_SORT,
     }
   }
 
   componentWillReceiveProps(nextProps) {
     const {labels, data} = timeSeriesToTableGraph(nextProps.data)
-    const {
-      clickToSortFieldIndex,
-      clicktoSortDirection,
-      sortByColumnIndex,
-    } = this.state
+    if (isEmpty(data[0])) {
+      return
+    }
+    const {sortField, sortDirection} = this.state
     const {
       tableOptions: {sortBy: {internalName}, fieldNames, verticalTimeAxis},
       setDataLabels,
     } = nextProps
-    if (!isEmpty(data[0])) {
-      if (setDataLabels) {
-        setDataLabels(labels)
-      }
 
-      if (
-        sortByColumnIndex === NULL_ARRAY_INDEX ||
-        _.get(this.props, ['tableOptions', 'sortBy', 'internalName'], '') !==
-          internalName
-      ) {
-        const newSortByColumnIndex = _.indexOf(data[0], internalName)
-        const sortedData = [
-          data[0],
-          ..._.orderBy(_.drop(data, 1), newSortByColumnIndex, [DEFAULT_SORT]),
-        ]
-
-        const visibleData = verticalTimeAxis
-          ? filterInvisibleColumns(sortedData, fieldNames)
-          : filterInvisibleRows(sortedData, fieldNames)
-
-        this.setState({
-          data: sortedData,
-          visibleData,
-          unzippedData: _.unzip(sortedData),
-          sortByColumnIndex: newSortByColumnIndex,
-          clickToSortFieldIndex: NULL_ARRAY_INDEX,
-          clicktoSortDirection: DEFAULT_SORT,
-        })
-        return
-      }
-      const clicked = clickToSortFieldIndex !== NULL_ARRAY_INDEX
-      const sortIndex = clicked ? clickToSortFieldIndex : sortByColumnIndex
-      const direction = clicked ? clicktoSortDirection : DEFAULT_SORT
-      const sortedData = [
-        data[0],
-        ..._.orderBy(_.drop(data, 1), sortIndex, [direction]),
-      ]
-      const visibleData = verticalTimeAxis
-        ? filterInvisibleColumns(sortedData, fieldNames)
-        : filterInvisibleRows(sortedData, fieldNames)
-      this.setState({
-        data: sortedData,
-        visibleData,
-        unzippedData: _.unzip(sortedData),
-      })
+    if (setDataLabels) {
+      setDataLabels(labels)
     }
+
+    let direction, sortFieldName
+    if (
+      _.isEmpty(sortField) ||
+      _.get(this.props, ['tableOptions', 'sortBy', 'internalName'], '') !==
+        _.get(nextProps, ['tableOptions', 'sortBy', 'internalName'], '')
+    ) {
+      direction = DEFAULT_SORT
+      sortFieldName = internalName
+    } else {
+      direction = sortDirection
+      sortFieldName = sortField
+    }
+
+    const {sortedData, unzippedData, visibleData} = processData(
+      data,
+      sortFieldName,
+      direction,
+      verticalTimeAxis,
+      fieldNames
+    )
+
+    this.setState({
+      data: sortedData,
+      visibleData,
+      unzippedData,
+      sortField: sortFieldName,
+      sortDirection: direction,
+    })
   }
 
   calcHoverTimeIndex = (data, hoverTime, verticalTimeAxis) => {
@@ -156,36 +158,33 @@ class TableGraph extends Component {
     }
   }
 
-  handleClickFieldName = (columnIndex, rowIndex) => () => {
+  handleClickFieldName = fieldName => () => {
     const {tableOptions} = this.props
-    const {clickToSortFieldIndex, clicktoSortDirection, data} = this.state
+    const {data, sortField, sortDirection} = this.state
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
-    const newIndex = verticalTimeAxis ? columnIndex : rowIndex
+    const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
 
-    if (clickToSortFieldIndex === newIndex) {
-      const direction =
-        clicktoSortDirection === ASCENDING ? DESCENDING : ASCENDING
-      const sortedData = [
-        data[0],
-        ..._.orderBy(_.drop(data, 1), clickToSortFieldIndex, [direction]),
-      ]
-      this.setState({
-        data: sortedData,
-        unzippedData: _.unzip(sortedData),
-        clicktoSortDirection: direction,
-      })
-      return
+    let direction
+    if (fieldName === sortField) {
+      direction = sortDirection === ASCENDING ? DESCENDING : ASCENDING
+    } else {
+      direction = DEFAULT_SORT
     }
 
-    const sortedData = [
-      data[0],
-      ..._.orderBy(_.drop(data, 1), clickToSortFieldIndex, [DEFAULT_SORT]),
-    ]
+    const {sortedData, unzippedData, visibleData} = processData(
+      data,
+      fieldName,
+      direction,
+      verticalTimeAxis,
+      fieldNames
+    )
+
     this.setState({
       data: sortedData,
-      unzippedData: _.unzip(sortedData),
-      clickToSortFieldIndex: newIndex,
-      clicktoSortDirection: DEFAULT_SORT,
+      unzippedData,
+      visibleData,
+      sortField: fieldName,
+      sortDirection: direction,
     })
   }
 
@@ -262,9 +261,7 @@ class TableGraph extends Component {
         key={key}
         style={cellStyle}
         className={cellClass}
-        onClick={
-          isFieldName ? this.handleClickFieldName(columnIndex, rowIndex) : null
-        }
+        onClick={isFieldName ? this.handleClickFieldName(cellData) : null}
         onMouseOver={this.handleHover(columnIndex, rowIndex)}
       >
         {isTimeData
@@ -276,11 +273,10 @@ class TableGraph extends Component {
 
   render() {
     const {
-      sortByColumnIndex,
-      clickToSortFieldIndex,
-      clicktoSortDirection,
       hoveredColumnIndex,
       hoveredRowIndex,
+      sortField,
+      sortDirection,
     } = this.state
     const {hoverTime, tableOptions, colors} = this.props
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
@@ -333,9 +329,8 @@ class TableGraph extends Component {
             scrollToRow={scrollToRow}
             scrollToColumn={scrollToColumn}
             verticalTimeAxis={verticalTimeAxis}
-            sortByColumnIndex={sortByColumnIndex}
-            clickToSortFieldIndex={clickToSortFieldIndex}
-            clicktoSortDirection={clicktoSortDirection}
+            sortField={sortField}
+            sortDirection={sortDirection}
             cellRenderer={this.cellRenderer}
             hoveredColumnIndex={hoveredColumnIndex}
             hoveredRowIndex={hoveredRowIndex}

From 8f2f08b85b82cb2932ae1b9fb77a2caf0f41e180 Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Tue, 20 Mar 2018 21:57:15 -0700
Subject: [PATCH 17/38] Pull isEmpty from lodash

---
 ui/src/shared/components/TableGraph.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 4c6118c886..0bf331ffd8 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -2,7 +2,6 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
 import classnames from 'classnames'
-import isEmpty from 'lodash/isEmpty'
 
 import {MultiGrid} from 'react-virtualized'
 import moment from 'moment'
@@ -78,7 +77,7 @@ class TableGraph extends Component {
 
   componentWillReceiveProps(nextProps) {
     const {labels, data} = timeSeriesToTableGraph(nextProps.data)
-    if (isEmpty(data[0])) {
+    if (_.isEmpty(data[0])) {
       return
     }
     const {sortField, sortDirection} = this.state
@@ -122,7 +121,7 @@ class TableGraph extends Component {
   }
 
   calcHoverTimeIndex = (data, hoverTime, verticalTimeAxis) => {
-    if (isEmpty(data) || hoverTime === NULL_HOVER_TIME) {
+    if (_.isEmpty(data) || hoverTime === NULL_HOVER_TIME) {
       return undefined
     }
     if (verticalTimeAxis) {
@@ -308,7 +307,7 @@ class TableGraph extends Component {
         ref={gridContainer => (this.gridContainer = gridContainer)}
         onMouseOut={this.handleMouseOut}
       >
-        {!isEmpty(data) &&
+        {!_.isEmpty(data) &&
           <MultiGrid
             columnCount={columnCount}
             columnWidth={COLUMN_WIDTH}

From 46f12dc4012eab511cafdbbd6671622b4fb24682 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 10:44:23 -0700
Subject: [PATCH 18/38] WIP add partial functionality for hiding columns/rows

---
 .../dashboards/components/GraphOptionsCustomizableField.tsx  | 5 ++++-
 ui/src/shared/components/TableGraph.js                       | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
index 829f05443e..651cfa2a14 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
@@ -43,7 +43,10 @@ class GraphOptionsCustomizableField extends PureComponent<Props, {}> {
             visible ? 'field-controls--label' : 'field-controls--label-hidden'
           }
         >
-          <span className="icon eye" onClick={this.handleToggleVisible} />
+          <span
+            className={visible ? 'icon eye-open' : 'icon eye-closed'}
+            onClick={this.handleToggleVisible}
+          />
           {internalName}
         </div>
         <InputClickToEdit
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 0bf331ffd8..cca7cf9399 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -57,7 +57,8 @@ const processData = (
   ]
   const visibleData = verticalTimeAxis
     ? filterInvisibleColumns(sortedData, fieldNames)
-    : filterInvisibleRows(sortedData, fieldNames)
+    : filterInvisibleRows(_.unzip(sortedData), fieldNames)
+
   return {sortedData, unzippedData: _.unzip(sortedData), visibleData}
 }
 

From 2b36a282e538f6987192092af14df9cbda797031 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 11:24:06 -0700
Subject: [PATCH 19/38] fix hiding columns when vertically flipped

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
---
 ui/src/shared/components/TableGraph.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 3bbd799e65..cd75a063b4 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -22,22 +22,23 @@ import {generateThresholdsListHexs} from 'shared/constants/colorOperations'
 
 const filterInvisibleRows = (data, fieldNames) => {
   const visibleData = data.filter(row => {
-    const foundField = fieldNames.find(field => field.internalName === row[0])
-    return foundField && foundField.visible
+    const rowName = row[0]
+    const foundField = fieldNames.find(f => f.internalName === rowName)
+    return foundField ? foundField.visible : true
   })
 
   return visibleData.length ? visibleData : [[]]
 }
 
 const filterInvisibleColumns = (data, fieldNames) => {
-  const visibleColumns = {}
+  const visibility = {}
   const visibleData = data.map((row, i) => {
     return row.filter((col, j) => {
       if (i === 0) {
         const foundField = fieldNames.find(field => field.internalName === col)
-        visibleColumns[j] = foundField && foundField.visible
+        visibility[j] = foundField ? foundField.visible : true
       }
-      return visibleColumns[j]
+      return visibility[j]
     })
   })
   return visibleData[0].length ? visibleData : [[]]
@@ -192,7 +193,9 @@ class TableGraph extends Component {
     const {hoveredColumnIndex, hoveredRowIndex} = this.state
     const {tableOptions, colors} = this.props
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
-    const data = verticalTimeAxis ? this.state.data : this.state.unzippedData
+    const data = verticalTimeAxis
+      ? this.state.visibleData
+      : this.state.unzippedData
     const timeFormat = _.get(tableOptions, 'timeFormat', TIME_FORMAT_DEFAULT)
     const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
     const fixFirstColumn = _.get(

From 784d9b8945602ab819fa08b229fc3e5581f5f8cd Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 12:49:02 -0700
Subject: [PATCH 20/38] update processData functionality in tableGraph

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
---
 ui/src/shared/components/TableGraph.js | 68 ++++++++++----------------
 1 file changed, 26 insertions(+), 42 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index cd75a063b4..e5ebffde54 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -20,19 +20,9 @@ const DEFAULT_SORT = ASCENDING
 
 import {generateThresholdsListHexs} from 'shared/constants/colorOperations'
 
-const filterInvisibleRows = (data, fieldNames) => {
-  const visibleData = data.filter(row => {
-    const rowName = row[0]
-    const foundField = fieldNames.find(f => f.internalName === rowName)
-    return foundField ? foundField.visible : true
-  })
-
-  return visibleData.length ? visibleData : [[]]
-}
-
 const filterInvisibleColumns = (data, fieldNames) => {
   const visibility = {}
-  const visibleData = data.map((row, i) => {
+  const filteredData = data.map((row, i) => {
     return row.filter((col, j) => {
       if (i === 0) {
         const foundField = fieldNames.find(field => field.internalName === col)
@@ -41,7 +31,7 @@ const filterInvisibleColumns = (data, fieldNames) => {
       return visibility[j]
     })
   })
-  return visibleData[0].length ? visibleData : [[]]
+  return filteredData[0].length ? filteredData : [[]]
 }
 
 const processData = (
@@ -51,16 +41,15 @@ const processData = (
   verticalTimeAxis,
   fieldNames
 ) => {
-  const sortIndex = _.indexOf(data[0], sortFieldName)
+  const filteredData = filterInvisibleColumns(data, fieldNames)
+  const sortIndex = _.indexOf(filteredData[0], sortFieldName)
   const sortedData = [
-    data[0],
-    ..._.orderBy(_.drop(data, 1), sortIndex, [direction]),
+    filteredData[0],
+    ..._.orderBy(_.drop(filteredData, 1), sortIndex, [direction]),
   ]
-  const visibleData = verticalTimeAxis
-    ? filterInvisibleColumns(sortedData, fieldNames)
-    : filterInvisibleRows(_.unzip(sortedData), fieldNames)
+  const processedData = verticalTimeAxis ? sortedData : _.unzip(sortedData)
 
-  return {sortedData, unzippedData: _.unzip(sortedData), visibleData}
+  return {processedData}
 }
 
 class TableGraph extends Component {
@@ -69,7 +58,8 @@ class TableGraph extends Component {
     this.state = {
       data: [[]],
       unzippedData: [[]],
-      visibleData: [[]],
+      filteredData: [[]],
+      processedData: [[]],
       hoveredColumnIndex: NULL_ARRAY_INDEX,
       hoveredRowIndex: NULL_ARRAY_INDEX,
       sortField: '',
@@ -82,6 +72,7 @@ class TableGraph extends Component {
     if (_.isEmpty(data[0])) {
       return
     }
+
     const {sortField, sortDirection} = this.state
     const {
       tableOptions: {sortBy: {internalName}, fieldNames, verticalTimeAxis},
@@ -105,7 +96,7 @@ class TableGraph extends Component {
       sortFieldName = sortField
     }
 
-    const {sortedData, unzippedData, visibleData} = processData(
+    const {processedData} = processData(
       data,
       sortFieldName,
       direction,
@@ -114,9 +105,8 @@ class TableGraph extends Component {
     )
 
     this.setState({
-      data: sortedData,
-      visibleData,
-      unzippedData,
+      data,
+      processedData,
       sortField: sortFieldName,
       sortDirection: direction,
     })
@@ -172,7 +162,7 @@ class TableGraph extends Component {
       direction = DEFAULT_SORT
     }
 
-    const {sortedData, unzippedData, visibleData} = processData(
+    const {processedData} = processData(
       data,
       fieldName,
       direction,
@@ -181,21 +171,17 @@ class TableGraph extends Component {
     )
 
     this.setState({
-      data: sortedData,
-      unzippedData,
-      visibleData,
+      processedData,
       sortField: fieldName,
       sortDirection: direction,
     })
   }
 
   cellRenderer = ({columnIndex, rowIndex, key, parent, style}) => {
-    const {hoveredColumnIndex, hoveredRowIndex} = this.state
+    const {hoveredColumnIndex, hoveredRowIndex, processedData} = this.state
     const {tableOptions, colors} = this.props
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
-    const data = verticalTimeAxis
-      ? this.state.visibleData
-      : this.state.unzippedData
+
     const timeFormat = _.get(tableOptions, 'timeFormat', TIME_FORMAT_DEFAULT)
     const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
     const fixFirstColumn = _.get(
@@ -216,7 +202,7 @@ class TableGraph extends Component {
     const isFieldName = verticalTimeAxis ? rowIndex === 0 : columnIndex === 0
 
     const isFixedCorner = rowIndex === 0 && columnIndex === 0
-    const dataIsNumerical = _.isNumber(data[rowIndex][columnIndex])
+    const dataIsNumerical = _.isNumber(processedData[rowIndex][columnIndex])
     const isHighlightedRow =
       rowIndex === parent.props.scrollToRow ||
       (rowIndex === hoveredRowIndex && hoveredRowIndex !== 0)
@@ -229,7 +215,7 @@ class TableGraph extends Component {
     if (!isFixedRow && !isFixedColumn && !isFixedCorner) {
       const {bgColor, textColor} = generateThresholdsListHexs(
         colors,
-        data[rowIndex][columnIndex]
+        processedData[rowIndex][columnIndex]
       )
 
       cellStyle = {
@@ -249,7 +235,7 @@ class TableGraph extends Component {
       'table-graph-cell__isFieldName': isFieldName,
     })
 
-    const cellData = data[rowIndex][columnIndex]
+    const cellData = processedData[rowIndex][columnIndex]
 
     const foundField = fieldNames.find(field => field.internalName === cellData)
     const fieldName =
@@ -279,16 +265,14 @@ class TableGraph extends Component {
       hoveredRowIndex,
       sortField,
       sortDirection,
+      processedData,
+      data,
     } = this.state
     const {hoverTime, tableOptions, colors} = this.props
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
 
-    const data = verticalTimeAxis
-      ? this.state.visibleData
-      : this.state.unzippedData
-
-    const columnCount = _.get(data, ['0', 'length'], 0)
-    const rowCount = data.length
+    const columnCount = _.get(processedData, ['0', 'length'], 0)
+    const rowCount = processedData.length
     const COLUMN_MIN_WIDTH = 98
     const COLUMN_MAX_WIDTH = 500
     const ROW_HEIGHT = 30
@@ -311,7 +295,7 @@ class TableGraph extends Component {
         ref={gridContainer => (this.gridContainer = gridContainer)}
         onMouseOut={this.handleMouseOut}
       >
-        {!_.isEmpty(data) &&
+        {!_.isEmpty(processedData) &&
           <ColumnSizer
             columnCount={columnCount}
             columnMaxWidth={COLUMN_MAX_WIDTH}

From 24518917886e6f3ac971c60d33775a6f66918233 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 14:25:48 -0700
Subject: [PATCH 21/38] fix hovertime issue in tableGraphs

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
---
 ui/src/shared/components/TableGraph.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index e5ebffde54..edcdaba6fe 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -57,8 +57,6 @@ class TableGraph extends Component {
     super(props)
     this.state = {
       data: [[]],
-      unzippedData: [[]],
-      filteredData: [[]],
       processedData: [[]],
       hoveredColumnIndex: NULL_ARRAY_INDEX,
       hoveredRowIndex: NULL_ARRAY_INDEX,
@@ -126,12 +124,16 @@ class TableGraph extends Component {
 
   handleHover = (columnIndex, rowIndex) => () => {
     const {onSetHoverTime, tableOptions: {verticalTimeAxis}} = this.props
-    const data = verticalTimeAxis ? this.state.data : this.state.unzippedData
+    const {data} = this.state
+    if (rowIndex === 0) {
+      return
+    }
     if (onSetHoverTime) {
       const hoverTime = verticalTimeAxis
         ? data[rowIndex][0]
-        : data[0][columnIndex]
+        : data[columnIndex][0]
       onSetHoverTime(hoverTime.toString())
+      console.log(moment(hoverTime).format(this.props.tableOptions.timeFormat))
     }
     this.setState({
       hoveredColumnIndex: columnIndex,

From adc33b20bf7c3d5e33e71d5a1bb2e281cad2515c Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 14:26:58 -0700
Subject: [PATCH 22/38] remove console log

---
 ui/src/shared/components/TableGraph.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index edcdaba6fe..4dfaef20e7 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -133,7 +133,6 @@ class TableGraph extends Component {
         ? data[rowIndex][0]
         : data[columnIndex][0]
       onSetHoverTime(hoverTime.toString())
-      console.log(moment(hoverTime).format(this.props.tableOptions.timeFormat))
     }
     this.setState({
       hoveredColumnIndex: columnIndex,

From af513a75f727a00848d00cd8b80d0d775a5a0b87 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 14:50:38 -0700
Subject: [PATCH 23/38] fix checking for empty data in tableGraph

Co-authored-by: Deniz Kusefoglu <denix@influxdata.com>
---
 ui/src/dashboards/components/TableOptions.tsx |  1 +
 ui/src/shared/components/TableGraph.js        | 15 +++++++--------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 37f57854c6..104a5f989d 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -119,6 +119,7 @@ export class TableOptions extends PureComponent<Props, {}> {
       sortBy.internalName === field.internalName
         ? {...sortBy, displayName: field.displayName}
         : sortBy
+
     handleUpdateTableOptions({
       ...tableOptions,
       fieldNames: updatedFields,
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 4dfaef20e7..75bdd52dec 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -41,13 +41,13 @@ const processData = (
   verticalTimeAxis,
   fieldNames
 ) => {
-  const filteredData = filterInvisibleColumns(data, fieldNames)
-  const sortIndex = _.indexOf(filteredData[0], sortFieldName)
+  const sortIndex = _.indexOf(data[0], sortFieldName)
   const sortedData = [
-    filteredData[0],
-    ..._.orderBy(_.drop(filteredData, 1), sortIndex, [direction]),
+    data[0],
+    ..._.orderBy(_.drop(data, 1), sortIndex, [direction]),
   ]
-  const processedData = verticalTimeAxis ? sortedData : _.unzip(sortedData)
+  const filteredData = filterInvisibleColumns(sortedData, fieldNames)
+  const processedData = verticalTimeAxis ? filteredData : _.unzip(filteredData)
 
   return {processedData}
 }
@@ -273,7 +273,7 @@ class TableGraph extends Component {
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
 
     const columnCount = _.get(processedData, ['0', 'length'], 0)
-    const rowCount = processedData.length
+    const rowCount = columnCount === 0 ? 0 : processedData.length
     const COLUMN_MIN_WIDTH = 98
     const COLUMN_MAX_WIDTH = 500
     const ROW_HEIGHT = 30
@@ -289,14 +289,13 @@ class TableGraph extends Component {
       !hoveringThisTable && verticalTimeAxis ? hoverTimeIndex : undefined
     const scrollToColumn =
       !hoveringThisTable && !verticalTimeAxis ? hoverTimeIndex : undefined
-
     return (
       <div
         className="table-graph-container"
         ref={gridContainer => (this.gridContainer = gridContainer)}
         onMouseOut={this.handleMouseOut}
       >
-        {!_.isEmpty(processedData) &&
+        {rowCount > 0 &&
           <ColumnSizer
             columnCount={columnCount}
             columnMaxWidth={COLUMN_MAX_WIDTH}

From 28639fc4b90c573c3173968708f5aaac69c3eab6 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 14:54:09 -0700
Subject: [PATCH 24/38] fix tooltip custom time format bug

---
 ui/src/dashboards/components/GraphOptionsTimeFormat.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
index 7d8ebbbdf5..99e8247ebf 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
+++ b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
@@ -61,7 +61,7 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
       <div className="form-group col-xs-12">
         <label>
           Time Format
-          {customFormat &&
+          {showCustom &&
             <QuestionMarkTooltip
               tipID="Time Axis Format"
               tipContent={tipContent}

From d9b3b8b57c082d547068209dd3e3c51abf5a003e Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 15:38:02 -0700
Subject: [PATCH 25/38] prevent rerendering of tableOptions unless appropriate
 props change

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
---
 .../dashboards/components/DisplayOptions.js   |  6 +---
 ui/src/dashboards/components/TableOptions.tsx | 30 +++++++++++++------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/ui/src/dashboards/components/DisplayOptions.js b/ui/src/dashboards/components/DisplayOptions.js
index 67270b6a68..10a4667a82 100644
--- a/ui/src/dashboards/components/DisplayOptions.js
+++ b/ui/src/dashboards/components/DisplayOptions.js
@@ -52,11 +52,7 @@ class DisplayOptions extends Component {
         return <SingleStatOptions onResetFocus={onResetFocus} />
       case 'table':
         return (
-          <TableOptions
-            onResetFocus={onResetFocus}
-            queryConfigs={queryConfigs}
-            dataLabels={dataLabels}
-          />
+          <TableOptions onResetFocus={onResetFocus} dataLabels={dataLabels} />
         )
       default:
         return (
diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 104a5f989d..9f03bf3664 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -10,6 +10,8 @@ import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsText
 import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
 import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 
+import _ from 'lodash'
+
 import ThresholdsList from 'src/shared/components/ThresholdsList'
 import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
 
@@ -40,7 +42,6 @@ interface QueryConfig {
 }
 
 interface Props {
-  queryConfigs: QueryConfig[]
   handleUpdateTableOptions: (options: Options) => void
   tableOptions: Options
   onResetFocus: () => void
@@ -72,14 +73,6 @@ export class TableOptions extends PureComponent<Props, {}> {
     })
   }
 
-  componentWillMount() {
-    const {handleUpdateTableOptions, tableOptions} = this.props
-    handleUpdateTableOptions({
-      ...tableOptions,
-      fieldNames: this.computedFieldNames,
-    })
-  }
-
   handleChooseSortBy = option => {
     const {tableOptions, handleUpdateTableOptions} = this.props
     const sortBy = {
@@ -127,6 +120,25 @@ export class TableOptions extends PureComponent<Props, {}> {
     })
   }
 
+  componentWillMount() {
+    const {handleUpdateTableOptions, tableOptions} = this.props
+    handleUpdateTableOptions({
+      ...tableOptions,
+      fieldNames: this.computedFieldNames,
+    })
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const {tableOptions, dataLabels} = this.props
+    const tableOptionsDifferent = !_.isEqual(
+      tableOptions,
+      nextProps.tableOptions
+    )
+    const dataLabelsDifferent = !_.isEqual(dataLabels, nextProps.dataLabels)
+
+    return tableOptionsDifferent || dataLabelsDifferent
+  }
+
   render() {
     const {
       tableOptions: {timeFormat, fieldNames, verticalTimeAxis, fixFirstColumn},

From 86e412dbaf3f4bcc54f7ed3f1867bd8aea237666 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 15:54:19 -0700
Subject: [PATCH 26/38] remove text wrapping

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
---
 ui/src/dashboards/components/TableOptions.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 9f03bf3664..6c25186217 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -6,7 +6,6 @@ import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFormat'
 import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis'
 import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
-import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsTextWrapping'
 import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
 import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 
@@ -94,8 +93,6 @@ export class TableOptions extends PureComponent<Props, {}> {
     handleUpdateTableOptions({...tableOptions, verticalTimeAxis})
   }
 
-  handleToggleTextWrapping = () => {}
-
   handleToggleFixFirstColumn = () => {
     const {handleUpdateTableOptions, tableOptions} = this.props
     const fixFirstColumn = !tableOptions.fixFirstColumn
@@ -172,10 +169,6 @@ export class TableOptions extends PureComponent<Props, {}> {
               sortByOptions={tableSortByOptions}
               onChooseSortBy={this.handleChooseSortBy}
             />
-            <GraphOptionsTextWrapping
-              thresholdsListType="background"
-              onToggleTextWrapping={this.handleToggleTextWrapping}
-            />
             <GraphOptionsFixFirstColumn
               fixed={fixFirstColumn}
               onToggleFixFirstColumn={this.handleToggleFixFirstColumn}

From f57b699fc3781a89172e4511554ee7a29e76d383 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 16:09:15 -0700
Subject: [PATCH 27/38] add tableOptions shape in proptypes to TableGraph

---
 ui/src/shared/components/TableGraph.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 75bdd52dec..c308526ba7 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -339,12 +339,29 @@ class TableGraph extends Component {
   }
 }
 
-const {arrayOf, number, shape, string, func} = PropTypes
+const {arrayOf, bool, number, shape, string, func} = PropTypes
 
 TableGraph.propTypes = {
   cellHeight: number,
   data: arrayOf(shape()),
-  tableOptions: shape({}),
+  tableOptions: shape({
+    timeFormat: string.isRequired,
+    verticalTimeAxis: bool.isRequired,
+    sortBy: shape({
+      internalName: string.isRequired,
+      displayName: string.isRequired,
+      visible: bool.isRequired,
+    }).isRequired,
+    wrapping: string.isRequired,
+    fieldNames: arrayOf(
+      shape({
+        internalName: string.isRequired,
+        displayName: string.isRequired,
+        visible: bool.isRequired,
+      })
+    ).isRequired,
+    fixFirstColumn: bool,
+  }),
   hoverTime: string,
   onSetHoverTime: func,
   colors: arrayOf(

From feffaf417ca6cf1c0b45c888c8d22f7f8e8712fc Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 16:15:21 -0700
Subject: [PATCH 28/38] remove QueryConfig interface from tableOptions

---
 ui/src/dashboards/components/TableOptions.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 6c25186217..20f607d67b 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -32,14 +32,6 @@ type Options = {
   fixFirstColumn: boolean
 }
 
-interface QueryConfig {
-  measurement: string
-  fields: {
-    alias: string
-    value: string
-  }[]
-}
-
 interface Props {
   handleUpdateTableOptions: (options: Options) => void
   tableOptions: Options

From 2325b36947f0d621e593bd0792fa8d600112605c Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 16:42:00 -0700
Subject: [PATCH 29/38] fix react-virtualized error when flipping axes with one
 visible field and fixFirstColumn true

---
 ui/src/shared/components/TableGraph.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index c308526ba7..41fe45b2da 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -283,12 +283,14 @@ class TableGraph extends Component {
       hoveredRowIndex === NULL_ARRAY_INDEX
         ? this.calcHoverTimeIndex(data, hoverTime, verticalTimeAxis)
         : hoveredRowIndex
-    const fixedColumnCount = tableOptions.fixFirstColumn ? 1 : undefined
+    const fixedColumnCount =
+      tableOptions.fixFirstColumn && columnCount > 1 ? 1 : undefined
     const hoveringThisTable = hoveredColumnIndex !== NULL_ARRAY_INDEX
     const scrollToRow =
       !hoveringThisTable && verticalTimeAxis ? hoverTimeIndex : undefined
     const scrollToColumn =
       !hoveringThisTable && !verticalTimeAxis ? hoverTimeIndex : undefined
+
     return (
       <div
         className="table-graph-container"

From 0662be31b3896ffbaa0c5c28185d131620475227 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 16:57:55 -0700
Subject: [PATCH 30/38] fix error when adding query after choosing cell

---
 ui/src/shared/components/TableGraph.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 41fe45b2da..7ee0003122 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -194,11 +194,12 @@ class TableGraph extends Component {
     const timeField = fieldNames.find(
       field => field.internalName === TIME_FIELD_DEFAULT.internalName
     )
+    const visibleTime = _.get(timeField, 'visible', true)
 
     const isFixedRow = rowIndex === 0 && columnIndex > 0
     const isFixedColumn = fixFirstColumn && rowIndex > 0 && columnIndex === 0
     const isTimeData =
-      timeField.visible &&
+      visibleTime &&
       (verticalTimeAxis ? rowIndex > 0 && columnIndex === 0 : isFixedRow)
     const isFieldName = verticalTimeAxis ? rowIndex === 0 : columnIndex === 0
 

From bff0686c81a734c2ae153a23282c2a500e4c4df5 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 17:49:52 -0700
Subject: [PATCH 31/38] refactor cellRenderer and render in TableGraph

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
---
 ui/src/shared/components/TableGraph.js | 59 +++++++++++++-------------
 ui/src/shared/constants/tableGraph.js  |  3 +-
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 7ee0003122..1d9dfbbd66 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -15,6 +15,7 @@ import {
   ASCENDING,
   DESCENDING,
   FIX_FIRST_COLUMN_DEFAULT,
+  VERTICAL_TIME_AXIS_DEFAULT,
 } from 'src/shared/constants/tableGraph'
 const DEFAULT_SORT = ASCENDING
 
@@ -125,7 +126,7 @@ class TableGraph extends Component {
   handleHover = (columnIndex, rowIndex) => () => {
     const {onSetHoverTime, tableOptions: {verticalTimeAxis}} = this.props
     const {data} = this.state
-    if (rowIndex === 0) {
+    if (rowIndex === 0 && verticalTimeAxis) {
       return
     }
     if (onSetHoverTime) {
@@ -181,15 +182,15 @@ class TableGraph extends Component {
   cellRenderer = ({columnIndex, rowIndex, key, parent, style}) => {
     const {hoveredColumnIndex, hoveredRowIndex, processedData} = this.state
     const {tableOptions, colors} = this.props
-    const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
 
-    const timeFormat = _.get(tableOptions, 'timeFormat', TIME_FORMAT_DEFAULT)
-    const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
-    const fixFirstColumn = _.get(
-      tableOptions,
-      'fixFirstColumn',
-      FIX_FIRST_COLUMN_DEFAULT
-    )
+    const {
+      timeFormat = TIME_FORMAT_DEFAULT,
+      verticalTimeAxis = VERTICAL_TIME_AXIS_DEFAULT,
+      fixFirstColumn = FIX_FIRST_COLUMN_DEFAULT,
+      fieldNames = [TIME_FIELD_DEFAULT],
+    } = tableOptions
+
+    const cellData = processedData[rowIndex][columnIndex]
 
     const timeField = fieldNames.find(
       field => field.internalName === TIME_FIELD_DEFAULT.internalName
@@ -202,9 +203,8 @@ class TableGraph extends Component {
       visibleTime &&
       (verticalTimeAxis ? rowIndex > 0 && columnIndex === 0 : isFixedRow)
     const isFieldName = verticalTimeAxis ? rowIndex === 0 : columnIndex === 0
-
     const isFixedCorner = rowIndex === 0 && columnIndex === 0
-    const dataIsNumerical = _.isNumber(processedData[rowIndex][columnIndex])
+    const dataIsNumerical = _.isNumber(cellData)
     const isHighlightedRow =
       rowIndex === parent.props.scrollToRow ||
       (rowIndex === hoveredRowIndex && hoveredRowIndex !== 0)
@@ -215,10 +215,7 @@ class TableGraph extends Component {
     let cellStyle = style
 
     if (!isFixedRow && !isFixedColumn && !isFixedCorner) {
-      const {bgColor, textColor} = generateThresholdsListHexs(
-        colors,
-        processedData[rowIndex][columnIndex]
-      )
+      const {bgColor, textColor} = generateThresholdsListHexs(colors, cellData)
 
       cellStyle = {
         ...style,
@@ -237,9 +234,8 @@ class TableGraph extends Component {
       'table-graph-cell__isFieldName': isFieldName,
     })
 
-    const cellData = processedData[rowIndex][columnIndex]
-
-    const foundField = fieldNames.find(field => field.internalName === cellData)
+    const foundField =
+      isFieldName && fieldNames.find(field => field.internalName === cellData)
     const fieldName =
       foundField && (foundField.displayName || foundField.internalName)
 
@@ -271,26 +267,35 @@ class TableGraph extends Component {
       data,
     } = this.state
     const {hoverTime, tableOptions, colors} = this.props
-    const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
+    const {
+      timeFormat = TIME_FORMAT_DEFAULT,
+      verticalTimeAxis = VERTICAL_TIME_AXIS_DEFAULT,
+      fixFirstColumn = FIX_FIRST_COLUMN_DEFAULT,
+      fieldNames = [TIME_FIELD_DEFAULT],
+    } = tableOptions
 
     const columnCount = _.get(processedData, ['0', 'length'], 0)
     const rowCount = columnCount === 0 ? 0 : processedData.length
+
     const COLUMN_MIN_WIDTH = 98
     const COLUMN_MAX_WIDTH = 500
     const ROW_HEIGHT = 30
+
+    const fixedColumnCount = fixFirstColumn && columnCount > 1 ? 1 : undefined
+
     const tableWidth = _.get(this, ['gridContainer', 'clientWidth'], 0)
     const tableHeight = _.get(this, ['gridContainer', 'clientHeight'], 0)
+
     const hoverTimeIndex =
       hoveredRowIndex === NULL_ARRAY_INDEX
         ? this.calcHoverTimeIndex(data, hoverTime, verticalTimeAxis)
         : hoveredRowIndex
-    const fixedColumnCount =
-      tableOptions.fixFirstColumn && columnCount > 1 ? 1 : undefined
     const hoveringThisTable = hoveredColumnIndex !== NULL_ARRAY_INDEX
-    const scrollToRow =
-      !hoveringThisTable && verticalTimeAxis ? hoverTimeIndex : undefined
+
     const scrollToColumn =
       !hoveringThisTable && !verticalTimeAxis ? hoverTimeIndex : undefined
+    const scrollToRow =
+      !hoveringThisTable && verticalTimeAxis ? hoverTimeIndex : undefined
 
     return (
       <div
@@ -318,15 +323,8 @@ class TableGraph extends Component {
                 fixedRowCount={1}
                 enableFixedColumnScroll={true}
                 enableFixedRowScroll={true}
-                timeFormat={
-                  tableOptions ? tableOptions.timeFormat : TIME_FORMAT_DEFAULT
-                }
-                fieldNames={
-                  tableOptions ? tableOptions.fieldNames : [TIME_FIELD_DEFAULT]
-                }
                 scrollToRow={scrollToRow}
                 scrollToColumn={scrollToColumn}
-                verticalTimeAxis={verticalTimeAxis}
                 sortField={sortField}
                 sortDirection={sortDirection}
                 cellRenderer={this.cellRenderer}
@@ -334,6 +332,7 @@ class TableGraph extends Component {
                 hoveredRowIndex={hoveredRowIndex}
                 hoverTime={hoverTime}
                 colors={colors}
+                tableOptions={tableOptions}
                 classNameBottomRightGrid="table-graph--scroll-window"
               />}
           </ColumnSizer>}
diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js
index 5687560ce8..b200d4302c 100644
--- a/ui/src/shared/constants/tableGraph.js
+++ b/ui/src/shared/constants/tableGraph.js
@@ -14,6 +14,7 @@ export const TIME_FIELD_DEFAULT = {
 export const ASCENDING = 'asc'
 export const DESCENDING = 'desc'
 export const FIX_FIRST_COLUMN_DEFAULT = true
+export const VERTICAL_TIME_AXIS_DEFAULT = true
 
 export const FORMAT_OPTIONS = [
   {text: TIME_FORMAT_DEFAULT},
@@ -28,7 +29,7 @@ export const FORMAT_OPTIONS = [
 ]
 
 export const DEFAULT_TABLE_OPTIONS = {
-  verticalTimeAxis: true,
+  verticalTimeAxis: VERTICAL_TIME_AXIS_DEFAULT,
   timeFormat: TIME_FORMAT_DEFAULT,
   sortBy: TIME_FIELD_DEFAULT,
   wrapping: 'truncate',

From 17375b232fff9e9869baffccb189219e3345a149 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 21 Mar 2018 17:58:03 -0700
Subject: [PATCH 32/38] fix linter errors

---
 ui/src/dashboards/components/DisplayOptions.js | 1 -
 ui/src/shared/components/TableGraph.js         | 2 --
 2 files changed, 3 deletions(-)

diff --git a/ui/src/dashboards/components/DisplayOptions.js b/ui/src/dashboards/components/DisplayOptions.js
index 10a4667a82..13f30ceb9c 100644
--- a/ui/src/dashboards/components/DisplayOptions.js
+++ b/ui/src/dashboards/components/DisplayOptions.js
@@ -42,7 +42,6 @@ class DisplayOptions extends Component {
       staticLegend,
       onToggleStaticLegend,
       onResetFocus,
-      queryConfigs,
       dataLabels,
     } = this.props
     switch (type) {
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 1d9dfbbd66..b381673558 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -268,10 +268,8 @@ class TableGraph extends Component {
     } = this.state
     const {hoverTime, tableOptions, colors} = this.props
     const {
-      timeFormat = TIME_FORMAT_DEFAULT,
       verticalTimeAxis = VERTICAL_TIME_AXIS_DEFAULT,
       fixFirstColumn = FIX_FIRST_COLUMN_DEFAULT,
-      fieldNames = [TIME_FIELD_DEFAULT],
     } = tableOptions
 
     const columnCount = _.get(processedData, ['0', 'length'], 0)

From 01c622f4cae9e1cbe00d597d9984e4eaccf2e486 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 22 Mar 2018 09:35:23 -0700
Subject: [PATCH 33/38] fix parentheses error

---
 ui/src/shared/components/TableGraph.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 905290a784..b03003c9e4 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -308,7 +308,7 @@ class TableGraph extends Component {
             columnMinWidth={COLUMN_MIN_WIDTH}
             width={tableWidth}
           >
-            {({getColumnWidth, registerChild}) => (
+            {({getColumnWidth, registerChild}) =>
               <MultiGrid
                 ref={registerChild}
                 columnCount={columnCount}
@@ -332,10 +332,8 @@ class TableGraph extends Component {
                 colors={colors}
                 tableOptions={tableOptions}
                 classNameBottomRightGrid="table-graph--scroll-window"
-              />
-            )}
-          </ColumnSizer>
-        )}
+              />}
+          </ColumnSizer>})
       </div>
     )
   }

From 7f1b686bd3ebdd633d7a0011059cbbcd93f9f922 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 22 Mar 2018 10:01:29 -0700
Subject: [PATCH 34/38] remove extra paren

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

diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index b03003c9e4..b381673558 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -333,7 +333,7 @@ class TableGraph extends Component {
                 tableOptions={tableOptions}
                 classNameBottomRightGrid="table-graph--scroll-window"
               />}
-          </ColumnSizer>})
+          </ColumnSizer>}
       </div>
     )
   }

From b66047bd8f5d396d53ad1155c121d6f91336e9b9 Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Thu, 22 Mar 2018 12:25:33 -0700
Subject: [PATCH 35/38] Fix merge generated errors

---
 .../components/CellEditorOverlay.js           | 53 ++++++++++---------
 .../GraphOptionsCustomizableField.tsx         |  2 +-
 .../GraphOptionsCustomizeFields.tsx           |  2 +-
 .../components/GraphOptionsTimeFormat.tsx     |  2 +-
 ui/src/dashboards/components/TableOptions.tsx | 20 +++----
 ui/src/shared/components/TableGraph.js        | 10 ++--
 6 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index d096404c63..23ecbbaa2b 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -325,28 +325,30 @@ class CellEditorOverlay extends Component {
               isDisplayOptionsTabActive={isDisplayOptionsTabActive}
               onClickDisplayOptions={this.handleClickDisplayOptionsTab}
             />
-            {isDisplayOptionsTabActive
-              ? <DisplayOptions
-                  queryConfigs={queriesWorkingDraft}
-                  onToggleStaticLegend={this.handleToggleStaticLegend}
-                  staticLegend={staticLegend}
-                  onResetFocus={this.handleResetFocus}
-                  dataLabels={dataLabels}
-                />
-              : <QueryMaker
-                  source={this.getSource()}
-                  templates={templates}
-                  queries={queriesWorkingDraft}
-                  actions={queryActions}
-                  autoRefresh={autoRefresh}
-                  timeRange={timeRange}
-                  onDeleteQuery={this.handleDeleteQuery}
-                  onAddQuery={this.handleAddQuery}
-                  activeQueryIndex={activeQueryIndex}
-                  activeQuery={this.getActiveQuery()}
-                  setActiveQueryIndex={this.handleSetActiveQueryIndex}
-                  initialGroupByTime={AUTO_GROUP_BY}
-                />}
+            {isDisplayOptionsTabActive ? (
+              <DisplayOptions
+                queryConfigs={queriesWorkingDraft}
+                onToggleStaticLegend={this.handleToggleStaticLegend}
+                staticLegend={staticLegend}
+                onResetFocus={this.handleResetFocus}
+                dataLabels={dataLabels}
+              />
+            ) : (
+              <QueryMaker
+                source={this.getSource()}
+                templates={templates}
+                queries={queriesWorkingDraft}
+                actions={queryActions}
+                autoRefresh={autoRefresh}
+                timeRange={timeRange}
+                onDeleteQuery={this.handleDeleteQuery}
+                onAddQuery={this.handleAddQuery}
+                activeQueryIndex={activeQueryIndex}
+                activeQuery={this.getActiveQuery()}
+                setActiveQueryIndex={this.handleSetActiveQueryIndex}
+                initialGroupByTime={AUTO_GROUP_BY}
+              />
+            )}
           </CEOBottom>
         </ResizeContainer>
       </div>
@@ -354,10 +356,9 @@ class CellEditorOverlay extends Component {
   }
 }
 
-const CEOBottom = ({children}) =>
-  <div className="overlay-technology--editor">
-    {children}
-  </div>
+const CEOBottom = ({children}) => (
+  <div className="overlay-technology--editor">{children}</div>
+)
 
 const {arrayOf, func, node, number, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
index 3c4ed39f4c..2e1904a63a 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
@@ -2,7 +2,7 @@ import React, {PureComponent} from 'react'
 
 import InputClickToEdit from 'src/shared/components/InputClickToEdit'
 
-type Field = {
+interface Field {
   internalName: string
   displayName: string
   visible: boolean
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
index 788af1961b..c3eedae8f0 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
@@ -3,7 +3,7 @@ import React, {SFC} from 'react'
 import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
 import uuid from 'uuid'
 
-type Field = {
+interface Field {
   internalName: string
   displayName: string
   visible: boolean
diff --git a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
index 6393b4c923..366ffc92d3 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
+++ b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
@@ -61,7 +61,7 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
       <div className="form-group col-xs-12">
         <label>
           Time Format
-          {showCustom &&
+          {showCustom && (
             <QuestionMarkTooltip
               tipID="Time Axis Format"
               tipContent={tipContent}
diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 6bed6d8c7d..f87ea0aab9 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -2,27 +2,27 @@ import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
-import FancyScrollbar from 'src/shared/components/FancyScrollbar'
-import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFormat'
-import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis'
-import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
-import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
 import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
+import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
+import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
+import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis'
+import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFormat'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 import _ from 'lodash'
 
 import ThresholdsList from 'src/shared/components/ThresholdsList'
 import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
 
-import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
 import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
+import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
 
 interface Option {
   text: string
   key: string
 }
 
-type RenamableField = {
+interface RenamableField {
   internalName: string
   displayName: string
   visible: boolean
@@ -113,7 +113,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     })
   }
 
-  componentWillMount() {
+  public componentWillMount() {
     const {handleUpdateTableOptions, tableOptions} = this.props
     handleUpdateTableOptions({
       ...tableOptions,
@@ -121,7 +121,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     })
   }
 
-  shouldComponentUpdate(nextProps) {
+  public shouldComponentUpdate(nextProps) {
     const {tableOptions, dataLabels} = this.props
     const tableOptionsDifferent = !_.isEqual(
       tableOptions,
@@ -142,8 +142,8 @@ export class TableOptions extends PureComponent<Props, {}> {
     } = this.props
 
     const tableSortByOptions = this.computedFieldNames.map(field => ({
-      text: field.displayName || field.internalName,
       key: field.internalName,
+      text: field.displayName || field.internalName,
     }))
 
     return (
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index b381673558..23e3c0d7d4 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -301,14 +301,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}
@@ -332,8 +332,10 @@ class TableGraph extends Component {
                 colors={colors}
                 tableOptions={tableOptions}
                 classNameBottomRightGrid="table-graph--scroll-window"
-              />}
-          </ColumnSizer>}
+              />
+            )}
+          </ColumnSizer>
+        )}
       </div>
     )
   }

From 3fecf9770faba47e98e963b5557c75613f87c620 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 22 Mar 2018 12:43:41 -0700
Subject: [PATCH 36/38] remove GraphOptionsCustomizableColumn

---
 .../GraphOptionsCustomizableColumn.tsx        | 46 -------------------
 1 file changed, 46 deletions(-)
 delete mode 100644 ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
deleted file mode 100644
index 1400a82e5e..0000000000
--- a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, {PureComponent} from 'react'
-
-import InputClickToEdit from 'src/shared/components/InputClickToEdit'
-
-interface Column {
-  internalName: string
-  displayName: string
-}
-
-interface Props {
-  internalName: string
-  displayName: string
-  onColumnRename: (column: Column) => void
-}
-
-class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
-  constructor(props) {
-    super(props)
-
-    this.handleColumnRename = this.handleColumnRename.bind(this)
-  }
-
-  public handleColumnRename(rename) {
-    const {onColumnRename, internalName} = this.props
-    onColumnRename({internalName, displayName: rename})
-  }
-
-  public render() {
-    const {internalName, displayName} = this.props
-
-    return (
-      <div className="column-controls--section">
-        <div className="column-controls--label">{internalName}</div>
-        <InputClickToEdit
-          value={displayName}
-          wrapperClass="column-controls-input"
-          onBlur={this.handleColumnRename}
-          placeholder="Rename..."
-          appearAsNormalInput={true}
-        />
-      </div>
-    )
-  }
-}
-
-export default GraphOptionsCustomizableColumn

From b58354f1447ee2248f38014b46085bd943216522 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 22 Mar 2018 12:47:41 -0700
Subject: [PATCH 37/38] remove graph options test wrapping from tableoptions
 test

---
 ui/test/dashboards/components/TableOptions.test.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx
index e75d29b83d..3b6944e6ae 100644
--- a/ui/test/dashboards/components/TableOptions.test.tsx
+++ b/ui/test/dashboards/components/TableOptions.test.tsx
@@ -4,7 +4,6 @@ import {TableOptions} from 'src/dashboards/components/TableOptions'
 
 import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
 import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
-import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsTextWrapping'
 import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis'
 import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFormat'
@@ -51,7 +50,6 @@ describe('Dashboards.Components.TableOptions', () => {
       const graphOptionsTimeFormat = wrapper.find(GraphOptionsTimeFormat)
       const graphOptionsTimeAxis = wrapper.find(GraphOptionsTimeAxis)
       const graphOptionsSortBy = wrapper.find(GraphOptionsSortBy)
-      const graphOptionsTextWrapping = wrapper.find(GraphOptionsTextWrapping)
       const graphOptionsFixFirstColumn = wrapper.find(
         GraphOptionsFixFirstColumn
       )
@@ -65,7 +63,6 @@ describe('Dashboards.Components.TableOptions', () => {
       expect(graphOptionsTimeFormat.exists()).toBe(true)
       expect(graphOptionsTimeAxis.exists()).toBe(true)
       expect(graphOptionsSortBy.exists()).toBe(true)
-      expect(graphOptionsTextWrapping.exists()).toBe(true)
       expect(graphOptionsFixFirstColumn.exists()).toBe(true)
       expect(graphOptionsCustomizeFields.exists()).toBe(true)
       expect(thresholdsList.exists()).toBe(true)

From 098e060ecb7d9a187f9302833915c3a312cb71db Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 22 Mar 2018 13:20:00 -0700
Subject: [PATCH 38/38] fix tslint alphabetizing errors

---
 .../GraphOptionsCustomizableField.test.tsx        | 15 +++++++--------
 .../GraphOptionsCustomizeFields.test.tsx          |  5 ++---
 .../dashboards/components/TableOptions.test.tsx   | 15 ++++++---------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx
index cf41d10e35..efd71333a1 100644
--- a/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx
+++ b/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx
@@ -1,16 +1,15 @@
+import {shallow} from 'enzyme'
 import React from 'react'
 
 import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
 import InputClickToEdit from 'src/shared/components/InputClickToEdit'
 
-import {shallow} from 'enzyme'
-
 const setup = (override = {}) => {
   const props = {
-    internalName: '',
     displayName: '',
-    visible: true,
+    internalName: '',
     onFieldUpdate: () => {},
+    visible: true,
     ...override,
   }
 
@@ -63,8 +62,8 @@ describe('Dashboards.Components.GraphOptionsCustomizableField', () => {
         const onFieldUpdate = jest.fn()
         const internalName = 'test'
         const {instance, props: {visible}} = setup({
-          onFieldUpdate,
           internalName,
+          onFieldUpdate,
         })
         const rename = 'TEST'
 
@@ -72,8 +71,8 @@ describe('Dashboards.Components.GraphOptionsCustomizableField', () => {
 
         expect(onFieldUpdate).toHaveBeenCalledTimes(1)
         expect(onFieldUpdate).toHaveBeenCalledWith({
-          internalName,
           displayName: rename,
+          internalName,
           visible,
         })
       })
@@ -84,16 +83,16 @@ describe('Dashboards.Components.GraphOptionsCustomizableField', () => {
         const onFieldUpdate = jest.fn()
         const visible = true
         const {instance, props: {internalName, displayName}} = setup({
-          visible,
           onFieldUpdate,
+          visible,
         })
 
         instance.handleToggleVisible()
 
         expect(onFieldUpdate).toHaveBeenCalledTimes(1)
         expect(onFieldUpdate).toHaveBeenCalledWith({
-          internalName,
           displayName,
+          internalName,
           visible: !visible,
         })
       })
diff --git a/ui/test/dashboards/components/GraphOptionsCustomizeFields.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizeFields.test.tsx
index 107a191d72..71d8325a19 100644
--- a/ui/test/dashboards/components/GraphOptionsCustomizeFields.test.tsx
+++ b/ui/test/dashboards/components/GraphOptionsCustomizeFields.test.tsx
@@ -1,11 +1,10 @@
+import {shallow} from 'enzyme'
 import React from 'react'
 
-import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
+import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
 
-import {shallow} from 'enzyme'
-
 const setup = (override = {}) => {
   const props = {
     fields: [],
diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx
index 3b6944e6ae..6dda3556e6 100644
--- a/ui/test/dashboards/components/TableOptions.test.tsx
+++ b/ui/test/dashboards/components/TableOptions.test.tsx
@@ -1,30 +1,27 @@
+import {shallow} from 'enzyme'
 import React from 'react'
-
-import {TableOptions} from 'src/dashboards/components/TableOptions'
-
+import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
 import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
-import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
 import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis'
 import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFormat'
+import {TableOptions} from 'src/dashboards/components/TableOptions'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import ThresholdsList from 'src/shared/components/ThresholdsList'
 import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
 
-import {shallow} from 'enzyme'
-
 const defaultProps = {
+  dataLabels: [],
   handleUpdateTableOptions: () => {},
   onResetFocus: () => {},
   tableOptions: {
     columnNames: [],
+    fieldNames: [],
     fixFirstColumn: true,
+    sortBy: {displayName: '', internalName: '', visible: true},
     timeFormat: '',
     verticalTimeAxis: true,
-    sortBy: {internalName: '', displayName: '', visible: true},
-    fieldNames: [],
   },
-  dataLabels: [],
 }
 
 const setup = (override = {}) => {