Merge pull request #45 from plotly/DecoupleUnpackPlotPropsFromDataSrc

Decouple unpack plot props from data src

Author: bpostlethwaite

src/components/DataSelector.js

@@ -1,8 +1,74 @@
+import DropdownWidget from './widgets/Dropdown';
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import Dropdown from './Dropdown';
+import nestedProperty from 'plotly.js/src/lib/nested_property';
+import {bem, connectToPlot} from '../lib';
+
+function attributeIsData(meta = {}) {
+  return meta.valType === 'data_array' || meta.arrayOk;
+}
+
+class DataSelector extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.setLocals(props, context);
+    this.updatePlot = this.updatePlot.bind(this);
+  }
+
+  static unpackPlotProps(props, context, plotProps) {
+    if (attributeIsData(plotProps.attrMeta)) {
+      plotProps.isVisible = true;
+    }
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    this.setLocals(nextProps, nextContext);
+  }
+
+  setLocals(props, context) {
+    this.dataSrcExists = false;
+    if (attributeIsData(props.attrMeta)) {
+      this.dataSrcExists = true;
+      this.srcAttr = props.attr + 'src';
+      this.srcProperty = nestedProperty(props.trace, this.srcAttr);
+    }
+  }
+
+  fullValue() {
+    if (this.dataSrcExists) {
+      return this.srcProperty.get();
+    }
+    return this.props.fullValue();
+  }
+
+  updatePlot(value) {
+    const attr = this.dataSrcExists ? this.srcAttr : this.props.attr;
+    const update = {[attr]: [value]};
+    this.props.onUpdate && this.props.onUpdate(update, [this.props.index]);
+  }
 
-export default class DataSelector extends Component {
   render() {
-    return <Dropdown {...this.props} isDataSrc />;
+    return (
+      <div className={bem('field')}>
+        <div className={bem('field', 'title')}>
+          <div className={bem('field', 'title-text')}>{this.props.label}</div>
+        </div>
+        <div className={bem('field', 'widget')}>
+          <DropdownWidget
+            options={this.props.options}
+            value={this.fullValue()}
+            onChange={this.updatePlot}
+            clearable={this.props.clearable}
+          />
+        </div>
+      </div>
+    );
   }
 }
+
+DataSelector.contextTypes = {
+  plotSchema: PropTypes.object,
+};
+
+export default connectToPlot(DataSelector);

src/components/Dropdown.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import DropdownWidget from './widgets/Dropdown';
 import {bem, connectToPlot} from '../lib';
 
-class Dropdown extends Component {
+export class UnconnectedDropdown extends Component {
   render() {
     return (
       <div className={bem('field')}>
@@ -22,4 +22,4 @@ class Dropdown extends Component {
   }
 }
 
-export default connectToPlot(Dropdown);
+export default connectToPlot(UnconnectedDropdown);

src/components/Section.js

@@ -29,7 +29,9 @@ class Section extends Component {
       let child = children[i];
 
       let isAttr = !!child.props.attr;
-      let plotProps = isAttr ? unpackPlotProps(child.props, context) : {};
+      let plotProps = isAttr
+        ? unpackPlotProps(child.props, context, child.constructor)
+        : {};
       let childProps = Object.assign({plotProps}, child.props);
       childProps.key = i;
 

src/components/TraceSelector.js

@@ -1,4 +1,4 @@
-import Dropdown from './Dropdown';
+import {UnconnectedDropdown} from './Dropdown';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
@@ -51,12 +51,12 @@ class TraceSelector extends Component {
   }
 
   render() {
-    const modifiedPlotProps = Object.assign({}, this.plotProps, {
+    const props = Object.assign({}, this.props, {
       fullValue: this.fullValue,
       updatePlot: this.updatePlot,
     });
 
-    return <Dropdown {...this.props} plotProps={modifiedPlotProps} />;
+    return <UnconnectedDropdown {...props} />;
   }
 }
 

src/components/__tests__/DataSelector-test.js

@@ -1,3 +1,4 @@
+import DataSelector from '../DataSelector';
 import DropdownWidget from '../widgets/Dropdown';
 import React from 'react';
 import {TestEditor, fixtures, plotly} from '../../lib/test-utils';
@@ -16,23 +17,17 @@ function render(overrides = {}) {
 describe('DataSelector', () => {
   it('contains options defined by dataSources', () => {
     const {dataSources} = fixtures.scatter();
-    const wrapper = render({dataSources});
+    const wrapper = render({dataSources}).find(DropdownWidget);
     expect(wrapper.prop('options')).toEqual(Object.keys(dataSources));
   });
 
-  it('sets srcAttr and srcProperty when attr is data_array', () => {
-    const wrapper = render();
-    expect(wrapper.prop('srcAttr')).toBe('xsrc');
-    expect(wrapper.prop('srcProperty').get()).toBe('x1');
+  it('uses gd.data dataSrc value not fullValue when data_array', () => {
+    const wrapper = render().find(DropdownWidget);
+    expect(wrapper.prop('value')).toBe('x1');
   });
 
   // arrayOk not implemented in defaultEditor yet
-  it('sets srcAttr and srcProperty when attr is arrayOk', () => {});
-
-  it('uses srcProperty as fullValue', () => {
-    const wrapper = render();
-    expect(wrapper.prop('fullValue')()).toBe('x1');
-  });
+  it('uses gd.data dataSrc value not fullValue when arrayOk', () => {});
 
   it('calls updatePlot with srcAttr', () => {
     const onUpdate = jest.fn();

src/lib/connectToPlot.js

@@ -22,7 +22,7 @@ export default function connectToPlot(BaseComponent) {
       } else {
         // Otherwise, this is just a bare component (not in a section) and it needs
         // processing:
-        this.plotProps = unpackPlotProps(props, context);
+        this.plotProps = unpackPlotProps(props, context, BaseComponent);
       }
     }
 

src/lib/unpackPlotProps.js

@@ -1,8 +1,9 @@
 import nestedProperty from 'plotly.js/src/lib/nested_property';
 
-export default function unpackPlotProps(props, context) {
+export default function unpackPlotProps(props, context, ComponentClass) {
   const plotProps = {};
 
+  // Indexing and referencing:
   plotProps.attr = props.attr;
   plotProps.index = context.traceIndex;
 
@@ -14,47 +15,33 @@ export default function unpackPlotProps(props, context) {
   // Property accessors:
   plotProps.fullProperty = nestedProperty(plotProps.fullTrace, plotProps.attr);
   plotProps.property = nestedProperty(plotProps.trace, plotProps.attr);
+  plotProps.fullValue = () => plotProps.fullProperty.get();
 
-  let dataSrcExists = false;
-  if (props.isDataSrc) {
-    const traceAttr = `${plotProps.fullTrace.type}.attributes.${props.attr}`;
-    const attr = nestedProperty(context.plotSchema.traces, traceAttr).get();
-    if (attr && (attr.valType === 'data_array' || attr.arrayOk)) {
-      dataSrcExists = true;
-      plotProps.srcAttr = plotProps.attr + 'src';
-      plotProps.srcProperty = nestedProperty(
-        plotProps.trace,
-        plotProps.srcAttr
-      );
-    }
-  }
+  // Property descriptions and meta:
+  plotProps.attrMeta =
+    nestedProperty(
+      context.plotSchema.traces,
+      `${plotProps.fullTrace.type}.attributes.${plotProps.attr}`
+    ).get() || {};
 
+  // Update data functions:
   plotProps.onUpdate = context.onUpdate;
-
-  plotProps.fullValue = function fullValue() {
-    if (dataSrcExists) {
-      // we use the non-full version for src information as Plotly.js does
-      // not pass src information into fullData or fullLayout. It is a
-      // "user land" only attribute.
-      return plotProps.srcProperty.get();
-    } else {
-      return plotProps.fullProperty.get();
-    }
-  };
-
-  // An update callback:
   plotProps.updatePlot = function updatePlot(value) {
-    const attr = dataSrcExists ? plotProps.srcAttr : plotProps.attr;
-    const update = {[attr]: [value]};
+    const update = {[plotProps.attr]: [value]};
     plotProps.onUpdate && plotProps.onUpdate(update, [plotProps.index]);
   };
 
+  // Visibility:
   const fv = plotProps.fullValue();
-  if (props.show || dataSrcExists || (fv !== undefined && fv !== null)) {
+  if (props.show || (fv !== undefined && fv !== null)) {
     plotProps.isVisible = true;
   } else {
     plotProps.isVisible = false;
   }
 
+  // Allow Component Classes to further augment plotProps:
+  ComponentClass.unpackPlotProps &&
+    ComponentClass.unpackPlotProps(props, context, plotProps);
+
   return plotProps;
 }