06/03 Release: Minor editor enhancements and a bugfix for simulating after adding custom data.

src/components/distributions/editor/DataForm/DataForm.js

@@ -3,8 +3,8 @@ import React, {Component} from 'react'
 import {SmallDataViewer, LargeDataViewer} from './DataViewer'
 
 export default class DataForm extends Component{
-  _handleDelete() { this.props.onSave({guesstimateType: null, data: null, input: null}) }
-  _handleSave(data) { this.props.onSave({guesstimateType: 'DATA', data, input: null}) }
+  _handleDelete() { this.props.onSave({guesstimateType: null, data: null, input: null}, true) }
+  _handleSave(data) { this.props.onSave({guesstimateType: 'DATA', data, input: null}, true) }
 
   render() {
     const {size, data, onOpen} = this.props

src/components/distributions/editor/DataForm/DataViewer.js

@@ -119,7 +119,7 @@ class Editor extends Component{
 
 const Viewer = ({data}) => (
   <ul>
-    {data.map((element, index) => {
+    {_.map(data, (element, index) => {
       return (
         <li key={index}>
           <DataPoint point={element} key={index}/>

src/components/distributions/editor/TextForm/TextForm.js

@@ -50,7 +50,7 @@ export default class TextForm extends Component{
     this.props.onChangeClickMode(newMode)
   }
 
-  _saveData(data) { this.props.onSave({guesstimateType: 'DATA', data, input: null}) }
+  _saveData(data) { this.props.onSave({guesstimateType: 'DATA', data, input: null}, true) }
 
   _shouldDisplayType() {
     const type = this._guesstimateType()

src/components/distributions/editor/TextForm/TextInput.js

@@ -44,11 +44,15 @@ class TextInputEditor extends Component {
     if (e.shiftKey) {
       return false
     } else {
-      this.props.handleReturn()
+      this.props.handleEscape()
       return true
     }
   }
 
+  handleEscape() {
+    this.props.handleEscape()
+  }
+
   render() {
     const {editorState} = this.state;
     return (
@@ -60,6 +64,7 @@ class TextInputEditor extends Component {
       >
         <Editor
           onFocus={this.props.onFocus}
+          onEscape={this.handleEscape.bind(this)}
           editorState={editorState}
           handleReturn={this.handleReturn.bind(this)}
           onBlur={this.props.onBlur}
@@ -142,7 +147,7 @@ export default class TextInput extends Component{
         onChange={this._handleChange.bind(this)}
         onFocus={this._handleFocus.bind(this)}
         onKeyDown={this._onKeyDown.bind(this)}
-        handleReturn={this.props.onEscape}
+        handleEscape={this.props.onEscape}
         value={this.props.value}
         placeholder={'value'}
         ref='editor'

src/components/distributions/editor/index.js

@@ -29,11 +29,11 @@ export default class Guesstimate extends Component{
   _handleChange(params, runSimulations=true, registerGraphChange=false) {
     this.props.dispatch(changeGuesstimate(this.props.metricId, {...this.props.guesstimate, ...params}, runSimulations, registerGraphChange))
   }
-  _handleSave(params) {
-    if (!_.isEmpty(params)) {this._handleChange(params, false, true)}
+  _handleSave(params, runSimulations=false) {
+    if (!_.isEmpty(params)) {this._handleChange(params, runSimulations, true)}
   }
   _changeMetricClickMode(newMode) { this.props.dispatch(changeMetricClickMode(newMode)) }
-  _addDefaultData() { this._handleSave({guesstimateType: 'DATA', data:[1,2,3], input: null}) }
+  _addDefaultData() { this._handleSave({guesstimateType: 'DATA', data:[1,2,3], input: null}, true) }
 
   render () {
     const {size, guesstimate, onOpen, errors} = this.props

src/components/lib/FlowGrid/FlowGrid.jsx

@@ -15,6 +15,9 @@ import './FlowGrid.css'
 
 let upto = (n) => Array.apply(null, {length: n}).map(Number.call, Number)
 
+//It would be better to have this as state, but we don't want this to cause renders.
+let lastMousePosition = [0, 0]
+
 @DragDropContext(HTML5Backend)
 export default class FlowGrid extends Component{
   displayName: 'FlowGrid'
@@ -71,12 +74,18 @@ export default class FlowGrid extends Component{
   _handleEmptyCellMouseDown(e, location) {
     if (e.button === 0 && !(e.target && e.target.type === 'textarea')) {
       this.setState({leftDown: true})
+      lastMousePosition = _.pick(e, 'pageX', 'pageY')
       e.preventDefault()
     }
   }
 
-  _handleCellMouseEnter(location) {
-    if (this.state.leftDown) {
+  _mouseMoved(e){
+    const sameLocation = (e.pageX === lastMousePosition.pageX) && (e.pageY === lastMousePosition.pageY)
+    return !sameLocation
+  }
+
+  _handleCellMouseEnter(location, e) {
+    if (this.state.leftDown && this._mouseMoved(e)) {
       this.setState({hover: {row: -1, column: -1}})
       this._handleEndRangeSelect(location)
     } else {

src/components/metrics/card/index.js

@@ -218,12 +218,13 @@ export default class MetricCard extends Component {
         tabIndex='0'
       >
         <div className={this._className()}>
-          <MetricModal
-            metric={metric}
-            isOpen={this.state.modalIsOpen}
-            closeModal={this.closeModal.bind(this)}
-            onChange={this.handleChangeGuesstimate.bind(this)}
-          />
+          {this.state.modalIsOpen &&
+            <MetricModal
+              metric={metric}
+              closeModal={this.closeModal.bind(this)}
+              onChange={this.handleChangeGuesstimate.bind(this)}
+            />
+          }
 
           <MetricCardViewSection
             canvasState={canvasState}

src/components/metrics/modal/index.js

@@ -43,10 +43,6 @@ export default class MetricModal extends Component {
     }
   }
 
-  shouldComponentUpdate(nextProps) {
-    return (nextProps.isOpen || this.props.isOpen)
-  }
-
   _changeGuesstimateDescription(value) {
     let newGuesstimate = Object.assign({}, this.props.metric.guesstimate, {description: value})
     this.props.onChange(newGuesstimate)
@@ -70,70 +66,68 @@ export default class MetricModal extends Component {
     };
     const showSimulation = this.showSimulation()
 
-    const {isOpen, closeModal, metric} = this.props
+    const {closeModal, metric} = this.props
     const sampleValues = _.get(metric, 'simulation.sample.values')
     const guesstimate = metric.guesstimate
     return(
       <Modal
-        isOpen={isOpen}
+        isOpen={true}
         onRequestClose={closeModal}
         style={customStyles}
       >
-      {isOpen &&
-      <div className='metricModal'>
-        <div className='container top'>
-          <div className='histogram'>
-            <Histogram height={150} top={0} bottom={0} bins={100} widthPercent={80} cutOffRatio={0.98}
-                simulation={metric.simulation}
-            />
-          </div>
-          <div className='row'>
-            <div className='col-sm-10'>
-                <h1> {metric.name} </h1>
+        <div className='metricModal'>
+          <div className='container top'>
+            <div className='histogram'>
+              <Histogram height={150} top={0} bottom={0} bins={100} widthPercent={80} cutOffRatio={0.98}
+                  simulation={metric.simulation}
+              />
             </div>
-            <div className='col-sm-2'>
-              <ButtonClose onClick={closeModal}/>
-            </div>
-          </div>
-          <div className='distributionSection'>
             <div className='row'>
-              <div className='col-sm-9 mean subsection'>
-                {showSimulation &&
-                  <DistributionSummary
-                    simulation={metric.simulation}
-                  />
-                }
+              <div className='col-sm-10'>
+                  <h1> {metric.name} </h1>
               </div>
-              <div className='col-sm-3 subsection'>
-                <PercentileTable values={sampleValues}/>
+              <div className='col-sm-2'>
+                <ButtonClose onClick={closeModal}/>
+              </div>
+            </div>
+            <div className='distributionSection'>
+              <div className='row'>
+                <div className='col-sm-9 mean subsection'>
+                  {showSimulation &&
+                    <DistributionSummary
+                      simulation={metric.simulation}
+                    />
+                  }
+                </div>
+                <div className='col-sm-3 subsection'>
+                  <PercentileTable values={sampleValues}/>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div className='container bottom'>
-          <div className='row editingInputSection'>
-            <div className='col-sm-12'>
-                <DistributionEditor
-                  guesstimate={metric.guesstimate}
-                  metricId={metric.id}
-                  size={'large'}
-                />
+          <div className='container bottom'>
+            <div className='row editingInputSection'>
+              <div className='col-sm-12'>
+                  <DistributionEditor
+                    guesstimate={metric.guesstimate}
+                    metricId={metric.id}
+                    size={'large'}
+                  />
+              </div>
             </div>
-          </div>
-          <div className='row guesstimateDescriptionSection'>
-            <div className='col-xs-12'>
-              {guesstimate &&
-                <GuesstimateDescription
-                  onChange={this._changeGuesstimateDescription.bind(this)}
-                  value={guesstimate.description}
-                />
-              }
+            <div className='row guesstimateDescriptionSection'>
+              <div className='col-xs-12'>
+                {guesstimate &&
+                  <GuesstimateDescription
+                    onChange={this._changeGuesstimateDescription.bind(this)}
+                    value={guesstimate.description}
+                  />
+                }
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      }
       </Modal>
     )
   }