Change height of table dynamically according to resizer

ui/src/data_explorer/components/Table.js

@@ -12,7 +12,6 @@ import {Table, Column, Cell} from 'fixed-data-table'
 
 const {arrayOf, bool, func, number, oneOfType, shape, string} = PropTypes
 
-const defaultTableHeight = 1000
 const emptySeries = {columns: [], values: []}
 
 const CustomCell = React.createClass({
@@ -64,7 +63,7 @@ const ChronoTable = React.createClass({
 
   getDefaultProps() {
     return {
-      height: defaultTableHeight,
+      height: 500,
     }
   },
 
@@ -139,11 +138,11 @@ const ChronoTable = React.createClass({
     const maximumTabsCount = 11
     // adjust height to proper value by subtracting the heights of the UI around it
     // tab height, graph-container vertical padding, graph-heading height, multitable-header height
-    const stylePixelOffset = 136
-    const rowHeight = 34
-    const defaultColumnWidth = 200
-    const headerHeight = 30
     const minWidth = 70
+    const rowHeight = 34
+    const headerHeight = 30
+    const stylePixelOffset = 130
+    const defaultColumnWidth = 200
     const styleAdjustedHeight = height - stylePixelOffset
     const width =
       columns && columns.length > 1 ? defaultColumnWidth : containerWidth

ui/src/data_explorer/components/VisView.js

@@ -13,6 +13,7 @@ const VisView = ({
   heightPixels,
   editQueryStatus,
   activeQueryIndex,
+  resizerBottomHeight,
 }) => {
   const activeQuery = queries[activeQueryIndex]
   const defaultQuery = queries[0]
@@ -30,7 +31,7 @@ const VisView = ({
     return (
       <Table
         query={query}
-        height={heightPixels}
+        height={resizerBottomHeight}
         editQueryStatus={editQueryStatus}
       />
     )
@@ -60,6 +61,7 @@ VisView.propTypes = {
   heightPixels: number,
   editQueryStatus: func.isRequired,
   activeQueryIndex: number,
+  resizerBottomHeight: number,
 }
 
 export default VisView

ui/src/data_explorer/components/Visualization.js

@@ -31,6 +31,7 @@ const Visualization = React.createClass({
         bounds: arrayOf(string),
       }),
     }),
+    resizerBottomHeight: number,
   },
 
   contextTypes: {
@@ -95,6 +96,7 @@ const Visualization = React.createClass({
       editQueryStatus,
       activeQueryIndex,
       isInDataExplorer,
+      resizerBottomHeight,
     } = this.props
     const {source: {links: {proxy}}} = this.context
     const {view} = this.state
@@ -134,6 +136,7 @@ const Visualization = React.createClass({
             editQueryStatus={editQueryStatus}
             activeQueryIndex={activeQueryIndex}
             isInDataExplorer={isInDataExplorer}
+            resizerBottomHeight={resizerBottomHeight}
           />
         </div>
       </div>

ui/src/shared/components/ResizeContainer.js

@@ -31,6 +31,12 @@ class ResizeContainer extends Component {
     initialBottomHeight: defaultInitialBottomHeight,
   }
 
+  componentDidMount() {
+    this.setState({
+      bottomHeightPixels: this.bottom.getBoundingClientRect().height,
+    })
+  }
+
   handleStartDrag() {
     this.setState({isDragging: true})
   }
@@ -51,7 +57,7 @@ class ResizeContainer extends Component {
     const {minTopHeight, minBottomHeight} = this.props
     const oneHundred = 100
     const containerHeight = parseInt(
-      getComputedStyle(this.refs.resizeContainer).height,
+      getComputedStyle(this.resizeContainer).height,
       10
     )
     // verticalOffset moves the resize handle as many pixels as the page-heading is taking up.
@@ -85,11 +91,12 @@ class ResizeContainer extends Component {
     this.setState({
       topHeight: `${newTopPanelPercent}%`,
       bottomHeight: `${newBottomPanelPercent}%`,
+      bottomHeightPixels,
     })
   }
 
   render() {
-    const {topHeight, bottomHeight, isDragging} = this.state
+    const {bottomHeightPixels, topHeight, bottomHeight, isDragging} = this.state
     const {containerClass, children} = this.props
 
     if (React.Children.count(children) > maximumNumChildren) {
@@ -107,10 +114,12 @@ class ResizeContainer extends Component {
         onMouseLeave={this.handleMouseLeave}
         onMouseUp={this.handleStopDrag}
         onMouseMove={this.handleDrag}
-        ref="resizeContainer"
+        ref={r => (this.resizeContainer = r)}
       >
         <div className="resize--top" style={{height: topHeight}}>
-          {React.cloneElement(children[0])}
+          {React.cloneElement(children[0], {
+            resizerBottomHeight: bottomHeightPixels,
+          })}
         </div>
         <ResizeHandle
           isDragging={isDragging}
@@ -120,8 +129,11 @@ class ResizeContainer extends Component {
         <div
           className="resize--bottom"
           style={{height: bottomHeight, top: topHeight}}
+          ref={r => (this.bottom = r)}
         >
-          {React.cloneElement(children[1])}
+          {React.cloneElement(children[1], {
+            resizerBottomHeight: bottomHeightPixels,
+          })}
         </div>
       </div>
     )