Merge branch 'master' into account-for-long-text

Author: aulneau

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-plotly.js-editor",
-  "version": "0.2.2-alpha.1",
+  "version": "0.3.0",
   "license": "MIT",
   "description": "plotly.js chart editor react component UI",
   "author": "Plotly, Inc.",

package.json

@@ -38,6 +38,8 @@ class PlotlyEditor extends Component {
       data: gd.data,
       dataSources: this.props.dataSources,
       dataSourceOptions: this.props.dataSourceOptions,
+      dataSourceValueRenderer: this.props.dataSourceValueRenderer,
+      dataSourceOptionRenderer: this.props.dataSourceOptionRenderer,
       dictionaries: dictionaries,
       fullData: gd._fullData,
       fullLayout: gd._fullLayout,
@@ -104,7 +106,7 @@ class PlotlyEditor extends Component {
           this.props.onDeleteTrace(payload);
         }
         if (payload.traceIndexes && payload.traceIndexes.length) {
-          graphDiv.data.splice(payload[0], 1);
+          graphDiv.data.splice(payload.traceIndexes[0], 1);
           if (this.props.onUpdate) {
             this.props.onUpdate();
           }
@@ -150,6 +152,8 @@ PlotlyEditor.propTypes = {
   className: PropTypes.string,
   dataSources: PropTypes.object,
   dataSourceOptions: PropTypes.array,
+  dataSourceValueRenderer: PropTypes.func,
+  dataSourceOptionRenderer: PropTypes.func,
   graphDiv: PropTypes.object,
   locale: PropTypes.string,
   revision: PropTypes.any,
@@ -170,6 +174,8 @@ PlotlyEditor.childContextTypes = {
   data: PropTypes.array,
   dataSources: PropTypes.object,
   dataSourceOptions: PropTypes.array,
+  dataSourceValueRenderer: PropTypes.func,
+  dataSourceOptionRenderer: PropTypes.func,
   dictionaries: PropTypes.object,
   fullData: PropTypes.array,
   fullLayout: PropTypes.object,

src/PlotlyEditor.js

@@ -61,6 +61,8 @@ class DataSelector extends Component {
           options={this.dataSourceOptions}
           value={this.fullValue}
           onChange={this.updatePlot}
+          optionRenderer={this.context.dataSourceOptionRenderer}
+          valueRenderer={this.context.dataSourceValueRenderer}
           clearable={this.props.clearable}
         />
       </Field>
@@ -78,6 +80,8 @@ DataSelector.propTypes = {
 DataSelector.contextTypes = {
   dataSources: PropTypes.object,
   dataSourceOptions: PropTypes.array,
+  dataSourceValueRenderer: PropTypes.func,
+  dataSourceOptionRenderer: PropTypes.func,
 };
 
 function modifyPlotProps(props, context, plotProps) {

src/components/fields/DataSelector.js

@@ -52,7 +52,11 @@ class TraceSelector extends Component {
         'tonext',
       ];
     }
-
+    this.setTraceDefaults(
+      props.container,
+      props.fullContainer,
+      props.updateContainer
+    );
     this.setLocals(props, context);
   }
 
@@ -64,17 +68,26 @@ class TraceSelector extends Component {
     } else {
       this.traceOptions = [{label: 'Scatter', value: 'scatter'}];
     }
+    this.fullValue = plotlyTraceToCustomTrace(props.container);
+  }
 
-    this.fullValue = plotlyTraceToCustomTrace(props.fullContainer);
+  setTraceDefaults(container, fullContainer, updateContainer) {
+    if (!container.mode && fullContainer.type === 'scatter') {
+      updateContainer({
+        type: 'scatter',
+        mode: fullContainer.mode || 'markers',
+      });
+    }
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
+    const {container, fullContainer, updateContainer} = nextProps;
+    this.setTraceDefaults(container, fullContainer, updateContainer);
     this.setLocals(nextProps, nextContext);
   }
 
   updatePlot(value) {
     const update = customTraceToPlotlyTrace(value);
-
     if (this.props.updateContainer) {
       this.props.updateContainer(update);
     }
@@ -97,6 +110,7 @@ TraceSelector.contextTypes = {
 
 TraceSelector.propTypes = {
   getValObject: PropTypes.func,
+  container: PropTypes.object.isRequired,
   fullContainer: PropTypes.object.isRequired,
   fullValue: PropTypes.any.isRequired,
   updateContainer: PropTypes.func,

src/components/fields/TraceSelector.js

@@ -37,6 +37,7 @@ describe('DataSelector', () => {
   it('calls updatePlot with srcAttr and data when present', () => {
     const onUpdateTraces = jest.fn();
     const wrapper = render({onUpdateTraces}).find(DropdownWidget);
+    onUpdateTraces.mockClear();
     wrapper.prop('onChange')('y1');
     expect(onUpdateTraces.mock.calls[0][0]).toEqual({
       update: {xsrc: 'y1', x: [2, 3, 4]},

src/components/fields/__tests__/DataSelector-test.js

@@ -9,6 +9,67 @@ import {connectTraceToPlot} from 'lib';
 describe('TraceSelector', () => {
   const TraceSection = connectTraceToPlot(Section);
 
+  it('sets mode to markers if trace scatter, no data or mode provided', () => {
+    const editorProps = {
+      ...fixtures.scatter({data: [{mode: null, xsrc: null, ysrc: null}]}),
+      onUpdate: jest.fn(),
+    };
+    const wrapper = mount(
+      <TestEditor {...editorProps} plotly={plotly}>
+        <TraceSection traceIndex={0}>
+          <TraceSelector attr="type" />
+        </TraceSection>
+      </TestEditor>
+    ).find(TraceSelector);
+
+    const innerDropdown = wrapper.find(Dropdown);
+
+    expect(wrapper.props().plotProps.container.mode).toBe('markers');
+    expect(innerDropdown.prop('value')).toEqual('scatter');
+  });
+
+  it('if no data provided, but mode is provided, displays correct trace type', () => {
+    const editorProps = {
+      ...fixtures.scatter({
+        data: [{mode: 'lines+markers', xsrc: null, ysrc: null}],
+      }),
+      onUpdate: jest.fn(),
+    };
+    const wrapper = mount(
+      <TestEditor {...editorProps} plotly={plotly}>
+        <TraceSection traceIndex={0}>
+          <TraceSelector attr="type" />
+        </TraceSection>
+      </TestEditor>
+    ).find(TraceSelector);
+
+    const innerDropdown = wrapper.find(Dropdown);
+
+    expect(innerDropdown.prop('value')).toEqual('line');
+  });
+
+  it('if data provided, but no mode is provided, chooses mode according to fullData', () => {
+    const editorProps = {
+      ...fixtures.scatter(),
+      onUpdate: jest.fn(),
+    };
+
+    expect(!editorProps.graphDiv.data[0].mode).toBe(true);
+    expect(editorProps.graphDiv._fullData[0].mode).toBe('lines+markers');
+
+    const wrapper = mount(
+      <TestEditor {...editorProps} plotly={plotly}>
+        <TraceSection traceIndex={0}>
+          <TraceSelector attr="type" />
+        </TraceSection>
+      </TestEditor>
+    ).find(TraceSelector);
+
+    const innerDropdown = wrapper.find(Dropdown);
+    expect(wrapper.props().plotProps.container.mode).toBe('lines+markers');
+    expect(innerDropdown.prop('value')).toEqual('line');
+  });
+
   it('interprets scatter + fill as type=area', () => {
     const editorProps = {
       ...fixtures.scatter({data: [{fill: 'tonexty'}]}),