Merge pull request #1453 from influxdata/improve-resizer

Improve Resizer Further

CHANGELOG.md

@@ -6,7 +6,8 @@
 ### Features
 
 ### UI Improvements
-  1. [#1451](https://github.com/influxdata/chronograf/pull/1451): Using cross browser aesthetically pleasing scrollbars in place of browser defaults
+  1. [#1451](https://github.com/influxdata/chronograf/pull/1451): Refactor scrollbars to support non-webkit browsers
+  1. [#1453](https://github.com/influxdata/chronograf/pull/1453): Give QueryMaker a greater initial height than Visualization
 
 ## v1.3.0 [2017-05-09]
 

ui/src/dashboards/components/CellEditorOverlay.js

@@ -12,7 +12,7 @@ import * as queryModifiers from 'src/utils/queryTransitions'
 import defaultQueryConfig from 'src/utils/defaultQueryConfig'
 import buildInfluxQLQuery from 'utils/influxql'
 import {getQueryConfig} from 'shared/apis'
-import {MINIMUM_HEIGHTS} from 'src/data_explorer/constants'
+import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants'
 import {removeUnselectedTemplateValues} from 'src/dashboards/constants'
 
 class CellEditorOverlay extends Component {
@@ -159,6 +159,8 @@ class CellEditorOverlay extends Component {
           containerClass="resizer--full-size"
           minTopHeight={MINIMUM_HEIGHTS.visualization}
           minBottomHeight={MINIMUM_HEIGHTS.queryMaker}
+          initialTopHeight={INITIAL_HEIGHTS.visualization}
+          initialBottomHeight={INITIAL_HEIGHTS.queryMaker}
         >
           <Visualization
             autoRefresh={autoRefresh}

ui/src/data_explorer/constants/index.js

@@ -15,6 +15,10 @@ export const MINIMUM_HEIGHTS = {
   queryMaker: 350,
   visualization: 200,
 }
+export const INITIAL_HEIGHTS = {
+  queryMaker: '66.666%',
+  visualization: '33.334%',
+}
 
 const SEPARATOR = 'SEPARATOR'
 

ui/src/data_explorer/containers/DataExplorer.js

@@ -10,7 +10,7 @@ import Header from '../containers/Header'
 import ResizeContainer from 'src/shared/components/ResizeContainer'
 
 import {VIS_VIEWS} from 'src/shared/constants'
-import {MINIMUM_HEIGHTS} from '../constants'
+import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from '../constants'
 import {setAutoRefresh} from 'shared/actions/app'
 import * as viewActions from 'src/data_explorer/actions/view'
 
@@ -93,6 +93,8 @@ const DataExplorer = React.createClass({
           containerClass="page-contents"
           minTopHeight={MINIMUM_HEIGHTS.queryMaker}
           minBottomHeight={MINIMUM_HEIGHTS.visualization}
+          initialTopHeight={INITIAL_HEIGHTS.queryMaker}
+          initialBottomHeight={INITIAL_HEIGHTS.visualization}
         >
           <QueryMaker
             source={source}

ui/src/shared/components/ResizeContainer.js

@@ -1,47 +1,47 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
-import ResizeHandle from 'shared/components/ResizeHandle'
 import classnames from 'classnames'
 
-const {node, number, string} = PropTypes
+import ResizeHandle from 'shared/components/ResizeHandle'
 
 const maximumNumChildren = 2
-const minimumTopHeight = 200
+const defaultMinTopHeight = 200
-const minimumBottomHeight = 200
+const defaultMinBottomHeight = 200
+const defaultInitialTopHeight = '50%'
+const defaultInitialBottomHeight = '50%'
 
-const ResizeContainer = React.createClass({
+class ResizeContainer extends Component {
-  propTypes: {
+  constructor(props) {
-    children: node.isRequired,
+    super(props)
-    containerClass: string.isRequired,
+    this.state = {
-    minTopHeight: number,
-    minBottomHeight: number,
-  },
-
-  getDefaultProps() {
-    return {
-      minTopHeight: minimumTopHeight,
-      minBottomHeight: minimumBottomHeight,
-    }
-  },
-
-  getInitialState() {
-    return {
-      topHeight: '60%',
-      bottomHeight: '40%',
       isDragging: false,
+      topHeight: props.initialTopHeight,
+      bottomHeight: props.initialBottomHeight,
     }
-  },
 
-  handleStopDrag() {
+    this.handleStartDrag = ::this.handleStartDrag
-    this.setState({isDragging: false})
+    this.handleStopDrag = ::this.handleStopDrag
-  },
+    this.handleMouseLeave = ::this.handleMouseLeave
+    this.handleDrag = ::this.handleDrag
+  }
+
+  static defaultProps = {
+    minTopHeight: defaultMinTopHeight,
+    minBottomHeight: defaultMinBottomHeight,
+    initialTopHeight: defaultInitialTopHeight,
+    initialBottomHeight: defaultInitialBottomHeight,
+  }
 
   handleStartDrag() {
     this.setState({isDragging: true})
-  },
+  }
+
+  handleStopDrag() {
+    this.setState({isDragging: false})
+  }
 
   handleMouseLeave() {
     this.setState({isDragging: false})
-  },
+  }
 
   handleDrag(e) {
     if (!this.state.isDragging) {
@@ -71,7 +71,8 @@ const ResizeContainer = React.createClass({
     }
 
     const topHeightPixels = newTopPanelPercent / oneHundred * containerHeight
-    const bottomHeightPixels = newBottomPanelPercent / oneHundred * containerHeight
+    const bottomHeightPixels =
+      newBottomPanelPercent / oneHundred * containerHeight
 
     // Don't trigger a resize if the new sizes are too small
     if (
@@ -85,31 +86,24 @@ const ResizeContainer = React.createClass({
       topHeight: `${newTopPanelPercent}%`,
       bottomHeight: `${newBottomPanelPercent}%`,
     })
-  },
+  }
-
-  renderHandle() {
-    const {isDragging, topHeight} = this.state
-    return (
-      <ResizeHandle
-        isDragging={isDragging}
-        onHandleStartDrag={this.handleStartDrag}
-        top={topHeight}
-      />
-    )
-  },
 
   render() {
     const {topHeight, bottomHeight, isDragging} = this.state
     const {containerClass, children} = this.props
 
     if (React.Children.count(children) > maximumNumChildren) {
-      console.error(`There cannot be more than ${maximumNumChildren}' children in ResizeContainer`)
+      console.error(
+        `There cannot be more than ${maximumNumChildren}' children in ResizeContainer`
+      )
       return
     }
 
     return (
       <div
-        className={classnames(`resize--container ${containerClass}`, {'resize--dragging': isDragging})}
+        className={classnames(`resize--container ${containerClass}`, {
+          'resize--dragging': isDragging,
+        })}
         onMouseLeave={this.handleMouseLeave}
         onMouseUp={this.handleStopDrag}
         onMouseMove={this.handleDrag}
@@ -118,13 +112,31 @@ const ResizeContainer = React.createClass({
         <div className="resize--top" style={{height: topHeight}}>
           {React.cloneElement(children[0])}
         </div>
-        {this.renderHandle()}
+        <ResizeHandle
-        <div className="resize--bottom" style={{height: bottomHeight, top: topHeight}}>
+          isDragging={isDragging}
+          onHandleStartDrag={this.handleStartDrag}
+          top={topHeight}
+        />
+        <div
+          className="resize--bottom"
+          style={{height: bottomHeight, top: topHeight}}
+        >
           {React.cloneElement(children[1])}
         </div>
       </div>
     )
-  },
+  }
-})
+}
+
+const {node, number, string} = PropTypes
+
+ResizeContainer.propTypes = {
+  children: node.isRequired,
+  containerClass: string.isRequired,
+  minTopHeight: number,
+  minBottomHeight: number,
+  initialTopHeight: string,
+  initialBottomHeight: string,
+}
 
 export default ResizeContainer