Style yield node visualization to conform to available space

ui/src/flux/components/FluxGraph.tsx

@@ -17,13 +17,13 @@ interface Props {
 class FluxGraph extends PureComponent<Props> {
   public render() {
     const containerStyle = {
-      width: 'calc(100% - 50px)',
-      height: 'calc(100% - 70px)',
+      width: 'calc(100% - 32px)',
+      height: 'calc(100% - 16px)',
       position: 'absolute',
     }
 
     return (
-      <div className="flux-graph" style={{width: '100%', height: '100%'}}>
+      <div className="yield-node--graph">
         <Dygraph
           labels={this.labels}
           staticLegend={false}

ui/src/flux/components/TableSidebar.tsx

@@ -1,11 +1,10 @@
-import React, {PureComponent, CSSProperties, ChangeEvent} from 'react'
+import React, {PureComponent, ChangeEvent} from 'react'
 import _ from 'lodash'
 
 import {FluxTable} from 'src/types'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import TableSidebarItem from 'src/flux/components/TableSidebarItem'
-import {vis} from 'src/flux/constants'
 
 interface Props {
   data: FluxTable[]
@@ -32,26 +31,20 @@ export default class TableSidebar extends PureComponent<Props, State> {
     const {searchTerm} = this.state
 
     return (
-      <div className="time-machine--sidebar">
+      <div className="yield-node--sidebar">
         {!this.isDataEmpty && (
-          <div
-            className="time-machine-sidebar--heading"
-            style={this.headingStyle}
-          >
-            Tables
-            <div className="time-machine-sidebar--filter">
-              <input
-                type="text"
-                className="form-control input-xs"
-                onChange={this.handleSearch}
-                placeholder="Filter tables"
-                value={searchTerm}
-              />
-            </div>
+          <div className="yield-node--sidebar-heading">
+            <input
+              type="text"
+              className="form-control input-xs yield-node--sidebar-filter"
+              onChange={this.handleSearch}
+              placeholder="Filter tables"
+              value={searchTerm}
+            />
           </div>
         )}
         <FancyScrollbar>
-          <div className="time-machine-vis--sidebar query-builder--list">
+          <div className="yield-node--tabs">
             {this.data.map(({partitionKey, id}) => {
               return (
                 <TableSidebarItem
@@ -81,14 +74,6 @@ export default class TableSidebar extends PureComponent<Props, State> {
     return data.filter(d => d.name.includes(searchTerm))
   }
 
-  get headingStyle(): CSSProperties {
-    return {
-      height: `${vis.TABLE_ROW_HEADER_HEIGHT + 4}px`,
-      backgroundColor: '#31313d',
-      borderBottom: '2px solid #383846', // $g5-pepper
-    }
-  }
-
   get isDataEmpty(): boolean {
     return _.isEmpty(this.props.data)
   }

ui/src/flux/components/TableSidebarItem.tsx

@@ -19,7 +19,7 @@ export default class TableSidebarItem extends PureComponent<Props> {
   public render() {
     return (
       <div
-        className={`time-machine-sidebar--item ${this.active}`}
+        className={`yield-node--tab ${this.active}`}
         onClick={this.handleClick}
       >
         {this.name}

ui/src/flux/components/TimeMachineTable.tsx

@@ -50,7 +50,7 @@ export default class TimeMachineTable extends PureComponent<Props, State> {
     const {scrollLeft, filteredTable} = this.state
 
     return (
-      <div style={{flex: '1 1 auto'}}>
+      <>
         <AutoSizer>
           {({width}) => (
             <ColumnSizer
@@ -100,7 +100,7 @@ export default class TimeMachineTable extends PureComponent<Props, State> {
             </ColumnSizer>
           )}
         </AutoSizer>
-      </div>
+      </>
     )
   }
 

ui/src/flux/components/TimeMachineVis.tsx

@@ -11,6 +11,7 @@ import NoResults from 'src/flux/components/NoResults'
 
 interface Props {
   data: FluxTable[]
+  yieldName: string
 }
 
 enum VisType {
@@ -44,8 +45,8 @@ class TimeMachineVis extends PureComponent<Props, State> {
     const {visType} = this.state
 
     return (
-      <div className="time-machine-visualization">
-        <div className="time-machine-visualization--settings">
+      <>
+        <div className="yield-node--controls">
           <VisHeaderTabs
             view={visType}
             views={[VisType.Table, VisType.Line]}
@@ -53,10 +54,8 @@ class TimeMachineVis extends PureComponent<Props, State> {
             onToggleView={this.selectVisType}
           />
         </div>
-        <div className="time-machine-visualization--visualization">
-          {this.vis}
-        </div>
-      </div>
+        <div className="yield-node--visualization">{this.vis}</div>
+      </>
     )
   }
 
@@ -80,7 +79,7 @@ class TimeMachineVis extends PureComponent<Props, State> {
             onSelectResult={this.handleSelectResult}
           />
         )}
-        <div className="time-machine--vis">
+        <div className="yield-node--table">
           {this.shouldShowTable && (
             <TimeMachineTable table={this.selectedResult} />
           )}

ui/src/flux/components/YieldFuncNode.tsx

@@ -44,9 +44,9 @@ class YieldFuncNode extends PureComponent<Props, State> {
     const yieldName = _.get(func, 'args.0.value', 'result')
 
     return (
-      <div style={{width: '1000px', height: '1000px'}}>
-        <span>{yieldName}</span>
-        <TimeMachineVis data={data} />
+      <div className="yield-node">
+        <div className="func-node--connector" />
+        <TimeMachineVis data={data} yieldName={yieldName} />
       </div>
     )
   }

ui/src/style/components/time-machine/flux-builder.scss

@@ -140,7 +140,10 @@ $flux-invalid-color: $c-viridian;
   top: 0;
   left: 0;
   transform: translateX(-100%);
-  z-index: 0; // Connection Lines
+  z-index: 0;
+  pointer-events: none;
+
+  // Connection Lines
   &:before,
   &:after {
     content: '';

ui/src/style/components/time-machine/visualization.scss

@@ -1,124 +1,105 @@
 /*
-    Time Machine Visualization
-    ----------------------------------------------------------------------------
+  Yield Node Styles
+  ------------------------------------------------------------------------------
 */
 
-.time-machine-visualization {
+$flux-builder-vis-height: 550px;
+$flux-builder-yield-tabs-min-width: 180px;
+$flux-builder-yield-tabs-max-width: 400px;
+
+.yield-node {
+  position: relative;
   display: flex;
-  align-content: center;
-  align-items: flex-start;
-  justify-content: flex-start;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
-  padding: 10px;
-  @include gradient-v($g2-kevlar, $g0-obsidian);
+  width: calc(100% - #{$flux-node-gap});
+  height: $flux-builder-vis-height;
+  margin-bottom: $flux-node-tooltip-gap / 2;
+  margin-top: $flux-node-tooltip-gap / 2;
+  margin-left: $flux-node-gap;
+
+  // Hide Horizontal Line
+  & > .func-node--connector:after {
+    content: none;
+  }
 }
 
-.time-machine-visualization--settings {
-  margin-bottom: 10px;
-}
-
-.time-machine-visualization--visualization {
-  display: flex;
-  flex: 1 1 auto;
-  width: 100%;
-  height: 100%;
-}
-
-.time-machine--sidebar,
-.time-machine--vis {
+.yield-node--controls {
   background-color: $g3-castle;
-  border-radius: $radius;
+  padding: $flux-node-padding;
+  border-radius: $radius $radius 0 0;
+}
+
+.yield-node--visualization {
+  display: flex;
+  align-items: stretch;
+  flex-wrap: none;
+  width: 100%;
+  height: 100%;
+}
+
+// Sidebar
+.yield-node--sidebar {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   flex-wrap: nowrap;
-  height: inherit;
+  width: 25%;
+  min-width: $flux-builder-yield-tabs-min-width;
+  max-width: $flux-builder-yield-tabs-max-width;
+  background-color: $g2-kevlar;
+  overflow: hidden;
+  border-radius: $radius 0 0 $radius;
 }
 
-.time-machine--sidebar {
-  flex-basis: 25%;
-  margin-right: 5px;
+.yield-node--sidebar-heading {
+  padding: $flux-node-padding;
 }
 
-.time-machine--vis {
-  flex-basis: 75%;
-  flex-grow: 1;
-}
+.yield-node--sidebar-filter.form-control.input-xs {
+    font-size: 12px;
+  }
 
-.time-machine--graph-header {
-  height: 56px;
-  padding: 0 16px;
+// Tabs
+.yield-node--tabs {
   display: flex;
-  align-items: center;
-  justify-content: center
-}
+  flex-direction: column;
+  position: relative;
 
-.time-machine--graph-header .nav.nav-tablist {
-  width: 180px;
-  li {
-    justify-content: center;
-    flex: 1 0 0;
-    white-space: nowrap;
+  // Shadow
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $flux-node-padding;
+    height: 100%;
+    @include gradient-h(fade-out($g2-kevlar, 1), fade-out($g2-kevlar, 0.4));
+    pointer-events: none;
   }
 }
 
-.time-machine--graph-body {
-  padding: 0 16px 8px 16px;
-  flex: 1 0 0;
-}
-
-.time-machine-sidebar--heading {
+.yield-node--tab {
   @include no-user-select();
-  width: 100%;
+  color: $g11-sidewalk;
+  height: 28px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  font-weight: 600;
-  color: $query-builder--heading-text;
-  background-color: $query-builder--heading-bg;
-  padding: 0 $query-builder--list-gutter;
-  line-height: $query-builder--heading-height;
-
-  > .time-machine-sidebar--filter {
-    flex: 1 1 100%;
-    margin-left: 20px;
-    margin-top: 1px;
-
-    input {
-      font-size: 12px;
-    }
-  }
-}
-
-.time-machine-sidebar--item {
-  @include no-user-select();
-  background-color: $query-builder--list-item-bg;
-  color: $query-builder--list-item-text;
-  height: $query-builder--list-item-height;
-  list-style-type: none;
-  cursor: default;
-  display: flex;
-  align-items: center;
-  margin: 0;
   font-size: 12px;
   font-weight: 600;
-  padding: 0 $query-builder--list-gutter;
+  padding: 0 $flux-node-padding;
   transition: color 0.25s ease, background-color 0.25s ease;
   white-space: nowrap;
   overflow-x: hidden;
 
   &:hover {
-    background-color: $query-builder--list-item-bg-hover;
-    color: $query-builder--list-item-text-hover;
+    background-color: $g4-onyx;
+    color: $g15-platinum;
     cursor: pointer;
   }
 
   &.active {
-    background-color: $query-builder--list-item-bg-active;
-    color: $query-builder--list-item-text-active;
+    background-color: $g5-pepper;
+    color: $g18-cloud;
   }
 
   > span {
@@ -136,13 +117,22 @@
   }
 }
 
-.flux-graph {
-  background-color: $g3-castle;
-  position: relative;
-  padding: 20px;
 
-  .dygraph-child {
-    width: 100%;
-    height: 100%;
-  }
-}
+// Table 
+.yield-node--table {
+  border-left: 1px solid $g5-pepper;
+  flex: 1 0 0;
+  background-color: $g3-castle;
+  overflow: hidden;
+  border-radius: 0 $radius $radius 0;
+}
+
+// Line Graph
+.yield-node--graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 8px 16px;
+  background-color: $g3-castle;
+  border-radius: 0 0 $radius $radius;
+}