From eeb225bc9d007e8d82b1d121e9a511ba8ccdf2fe Mon Sep 17 00:00:00 2001 From: dmt0 Date: Mon, 16 Jul 2018 14:08:22 -0400 Subject: [PATCH 1/2] fix incrementing numeric; warnings --- src/components/widgets/EditableText.js | 2 +- src/components/widgets/NumericInput.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/widgets/EditableText.js b/src/components/widgets/EditableText.js index 9e9f05be9..a81cca68a 100644 --- a/src/components/widgets/EditableText.js +++ b/src/components/widgets/EditableText.js @@ -104,7 +104,7 @@ EditableText.propTypes = { text: PropTypes.any, // Input properties - placeholder: PropTypes.string, + placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), className: PropTypes.string, disable: PropTypes.bool, autoFocus: PropTypes.bool, diff --git a/src/components/widgets/NumericInput.js b/src/components/widgets/NumericInput.js index d0094842a..9ad51e7b0 100644 --- a/src/components/widgets/NumericInput.js +++ b/src/components/widgets/NumericInput.js @@ -86,9 +86,9 @@ export default class NumericInput extends Component { let valueUpdate; if (isNumeric(value)) { if (direction === 'increase') { - valueUpdate = value + step; + valueUpdate = parseFloat(value) + step; } else { - valueUpdate = value - step; + valueUpdate = parseFloat(value) - step; } } else { // if we are multi-valued and the user is incrementing or decrementing @@ -138,7 +138,7 @@ export default class NumericInput extends Component { min={this.props.min} max={this.props.max} step={this.props.step} - value={this.state.value} + value={parseFloat(this.state.value)} onChange={this.updateValue} tooltip={false} /> @@ -172,7 +172,7 @@ NumericInput.propTypes = { max: PropTypes.number, min: PropTypes.number, onUpdate: PropTypes.func.isRequired, - placeholder: PropTypes.string, + placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), showArrows: PropTypes.bool, showSlider: PropTypes.bool, step: PropTypes.number, From 97f84c7d81f749496eb2259c36e1041105662b76 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Mon, 16 Jul 2018 16:31:39 -0400 Subject: [PATCH 2/2] marker size for multiple traces --- src/components/fields/Field.js | 4 ++- src/components/fields/MarkerSize.js | 43 ++++++++++++++++++++++------- src/lib/connectTraceToPlot.js | 14 ++++++++-- src/lib/multiValues.js | 20 ++++++++------ 4 files changed, 58 insertions(+), 23 deletions(-) diff --git a/src/components/fields/Field.js b/src/components/fields/Field.js index 6683d7ba7..e7eca2d95 100644 --- a/src/components/fields/Field.js +++ b/src/components/fields/Field.js @@ -24,6 +24,7 @@ class Field extends Component { children, label, multiValued, + suppressMultiValuedMessage, units, extraComponent, } = this.props; @@ -68,7 +69,7 @@ class Field extends Component { ) : null}
{children} - {multiValued ? ( + {multiValued && !suppressMultiValuedMessage ? (
{getMultiValueText('title', _)}
{getMultiValueText('text', _)}
@@ -94,6 +95,7 @@ Field.propTypes = { label: PropTypes.any, units: PropTypes.string, multiValued: PropTypes.bool, + suppressMultiValuedMessage: PropTypes.bool, children: PropTypes.node, extraComponent: PropTypes.any, }; diff --git a/src/components/fields/MarkerSize.js b/src/components/fields/MarkerSize.js index 4a48e9073..21a9489e7 100644 --- a/src/components/fields/MarkerSize.js +++ b/src/components/fields/MarkerSize.js @@ -5,14 +5,27 @@ import {connectToContainer} from 'lib'; import RadioBlocks from '../widgets/RadioBlocks'; import Numeric from './Numeric'; import DataSelector from './DataSelector'; - -const getType = value => (Array.isArray(value) ? 'variable' : 'constant'); +import {MULTI_VALUED} from 'lib/constants'; class UnconnectedMarkerSize extends Component { constructor(props, context) { super(props, context); - const type = getType(props.fullValue); + let type = null; + if ( + !props.container.marker || + (props.container.marker && !props.container.marker.sizesrc) + ) { + type = 'constant'; + } else if ( + props.container.marker && + Array.isArray(props.container.marker.size) && + props.fullContainer.marker && + Array.isArray(props.fullContainer.marker.size) + ) { + type = 'variable'; + } + this.state = { type, value: { @@ -30,6 +43,11 @@ class UnconnectedMarkerSize extends Component { this.props.updatePlot(this.state.value[type]); if (type === 'constant') { this.context.updateContainer({['marker.sizesrc']: null}); + } else { + this.context.updateContainer({ + ['marker.size']: null, + ['marker.sizesrc']: null, + }); } } @@ -45,32 +63,37 @@ class UnconnectedMarkerSize extends Component { } render() { - const {attr} = this.props; + const {attr, fullValue} = this.props; const {localize: _} = this.context; + const {type, value} = this.state; const options = [ {label: _('Constant'), value: 'constant'}, {label: _('Variable'), value: 'variable'}, ]; + const multiValued = + this.props.multiValued || + (Array.isArray(fullValue) && fullValue.includes(MULTI_VALUED)); return (
- + - {this.state.type === 'constant' ? ( + {type === 'constant' ? ( - ) : ( + ) : multiValued ? null : ( )} diff --git a/src/lib/connectTraceToPlot.js b/src/lib/connectTraceToPlot.js index e6b59cf04..eb08f8ec9 100644 --- a/src/lib/connectTraceToPlot.js +++ b/src/lib/connectTraceToPlot.js @@ -75,17 +75,25 @@ export default function connectTraceToPlot(WrappedComponent) { }; if (traceIndexes.length > 1) { - const multiValuedContainer = deepCopyPublic(fullTrace); + const multiValuedFullContainer = deepCopyPublic(fullTrace); fullData.forEach(t => + Object.keys(t).forEach(key => + setMultiValuedContainer(multiValuedFullContainer, t, key, { + searchArrays: true, + }) + ) + ); + const multiValuedContainer = deepCopyPublic(trace); + data.forEach(t => Object.keys(t).forEach(key => setMultiValuedContainer(multiValuedContainer, t, key, { searchArrays: true, }) ) ); - this.childContext.fullContainer = multiValuedContainer; + this.childContext.fullContainer = multiValuedFullContainer; this.childContext.defaultContainer = fullTrace; - this.childContext.container = {}; + this.childContext.container = multiValuedContainer; } if (trace && fullTrace) { diff --git a/src/lib/multiValues.js b/src/lib/multiValues.js index 388d05e37..2f702d9c4 100644 --- a/src/lib/multiValues.js +++ b/src/lib/multiValues.js @@ -17,10 +17,8 @@ function deepCopyPublic(value) { } function setMultiValuedContainer(intoObj, fromObj, key, config = {}) { - var intoVal = intoObj[key], - fromVal = fromObj[key]; - - var searchArrays = config.searchArrays; + const intoVal = intoObj[key]; + const fromVal = fromObj[key]; // don't merge private attrs if ( @@ -51,12 +49,16 @@ function setMultiValuedContainer(intoObj, fromObj, key, config = {}) { } else if (Array.isArray(intoVal)) { // in data, other arrays are data, which we don't care about // for styling purposes - if (!searchArrays) { + if (!config.searchArrays) { return; } - // in layout though, we need to recurse into arrays - for (var i = 0; i < fromVal.length; i++) { - setMultiValuedContainer(intoVal, fromVal, i, searchArrays); + if (!Array.isArray(fromVal)) { + intoObj[key] = MULTI_VALUED; + } else { + // in layout though, we need to recurse into arrays + for (let i = 0; i < fromVal.length; i++) { + setMultiValuedContainer(intoVal, fromVal, i, config); + } } } else if (isPlainObject(fromVal)) { // recurse into objects @@ -64,7 +66,7 @@ function setMultiValuedContainer(intoObj, fromObj, key, config = {}) { throw new Error('tried to merge object into non-object: ' + key); } Object.keys(fromVal).forEach(function(key2) { - setMultiValuedContainer(intoVal, fromVal, key2, searchArrays); + setMultiValuedContainer(intoVal, fromVal, key2, config); }); } else if (isPlainObject(intoVal)) { throw new Error('tried to merge non-object into object: ' + key);