Polish table sorting interaction

ui/src/shared/components/TableGraph.js

@@ -148,7 +148,12 @@ class TableGraph extends Component {
   }
 
   cellRenderer = ({columnIndex, rowIndex, key, parent, style}) => {
-    const {hoveredColumnIndex, hoveredRowIndex} = this.state
+    const {
+      hoveredColumnIndex,
+      hoveredRowIndex,
+      clickToSortFieldIndex,
+      clicktoSortDirection,
+    } = this.state
     const {tableOptions, colors} = this.props
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
     const data = verticalTimeAxis ? this.state.data : this.state.unzippedData
@@ -192,6 +197,19 @@ class TableGraph extends Component {
       }
     }
 
+    const cellData = data[rowIndex][columnIndex]
+
+    let isSortByField
+    if (clickToSortFieldIndex === -1) {
+      isSortByField = tableOptions.sortBy.internalName === cellData
+    } else {
+      isSortByField = verticalTimeAxis
+        ? clickToSortFieldIndex === columnIndex
+        : clickToSortFieldIndex === rowIndex
+    }
+    const isSortingAsc = clicktoSortDirection === ASCENDING
+    const isSortingDesc = clicktoSortDirection === DESCENDING
+
     const cellClass = classnames('table-graph-cell', {
       'table-graph-cell__fixed-row': isFixedRow,
       'table-graph-cell__fixed-column': isFixedColumn,
@@ -199,10 +217,13 @@ class TableGraph extends Component {
       'table-graph-cell__highlight-row': isHighlightedRow,
       'table-graph-cell__highlight-column': isHighlightedColumn,
       'table-graph-cell__numerical': dataIsNumerical,
-      'table-graph-cell__isFieldName': isFieldName,
+      'table-graph-cell__field-name': isFieldName,
+      'table-graph-cell__sort-asc':
+        isFieldName && isSortByField && isSortingAsc,
+      'table-graph-cell__sort-desc':
+        isFieldName && isSortByField && isSortingDesc,
     })
 
-    const cellData = data[rowIndex][columnIndex]
     const foundColumn = columnNames.find(
       column => column.internalName === cellData
     )

ui/src/style/components/table-graph.scss

@@ -54,6 +54,7 @@
     border-left: 0;
   }
   &__fixed-corner {
+    font-weight: 700;
     border-top: 0;
     border-left: 0;
     color: $g18-cloud;
@@ -67,17 +68,44 @@
     border-color: $g20-white;
     &:after {visibility: hidden;}
   }
-  &__isFieldName:hover {
-    cursor: pointer;
+  &__field-name {
+    padding-right: 17px;
+
+    &:before {
+      font-family: 'icomoon';
+      content: "\e902";
+      font-size: 17px;
+      position: absolute;
+      top: 50%;
+      right: 6px;
+      transform: translateY(-50%);
+      font-size: 13px;
+      opacity: 0;
+      transition:
+        opacity 0.25s ease,
+        color 0.25s ease,
+        transform 0.25s ease;
+    }
+    &:hover {
+      cursor: pointer;
+    }
+    &:hover:before {
+      opacity: 1;
+    }
   }
-  &__isFieldName:before {
-    font-family: 'icomoon';
-    content: "\e902";
-    font-size: 17px;
+  &__sort-asc,
+  &__sort-desc {
+    color: $c-pool;
+
+    &:before {
+      opacity: 1;
+    }
   }
-  &__isSortedUp {
+  &__sort-asc:before {
+    transform: translateY(-50%) rotate(0deg);
   }
-  &__isSortedDown {
+  &__sort-desc:before {
+    transform: translateY(-50%) rotate(180deg);
   }
 }