frames support + slider styling controls

examples/custom/src/App.js

@@ -29,6 +29,7 @@ class App extends Component {
         },
       ],
       layout: {},
+      frames: [],
     };
   }
 
@@ -39,10 +40,13 @@ class App extends Component {
           data={this.state.data}
           layout={this.state.layout}
           config={config}
+          frames={this.state.frames}
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
-          onUpdate={(data, layout) => this.setState({data, layout})}
+          onUpdate={(data, layout, frames) =>
+            this.setState({data, layout, frames})
+          }
           useResizeHandler
           debug
           advancedTraceTypeSelector

examples/demo/src/App.js

@@ -26,6 +26,7 @@ class App extends Component {
     this.state = {
       data: [],
       layout: {},
+      frames: [],
       currentMockIndex: -1,
       mocks: [],
     };
@@ -52,6 +53,7 @@ class App extends Component {
           currentMockIndex: mockIndex,
           data: figure.data,
           layout: figure.layout,
+          frames: figure.frames,
         });
       });
   }
@@ -63,10 +65,13 @@ class App extends Component {
           data={this.state.data}
           layout={this.state.layout}
           config={config}
+          frames={this.state.frames}
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
-          onUpdate={(data, layout) => this.setState({data, layout})}
+          onUpdate={(data, layout, frames) =>
+            this.setState({data, layout, frames})
+          }
           useResizeHandler
           debug
           advancedTraceTypeSelector

examples/redux/src/App.js

@@ -29,14 +29,22 @@ class App extends Component {
   }
 
   render() {
-    const {actions, dataSources, dataSourceOptions, data, layout} = this.props;
+    const {
+      actions,
+      dataSources,
+      dataSourceOptions,
+      data,
+      layout,
+      frames,
+    } = this.props;
 
     return (
       <div className="app">
         <PlotlyEditor
           data={data}
           layout={layout}
           config={config}
+          frames={frames}
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
@@ -56,13 +64,15 @@ App.propTypes = {
   dataSources: PropTypes.object,
   data: PropTypes.array,
   layout: PropTypes.object,
+  frames: PropTypes.array,
 };
 
 const mapStateToProps = state => ({
   dataSourceOptions: state.dataSourceOptions,
   dataSources: state.dataSources,
   data: state.data,
   layout: state.layout,
+  frames: state.frames,
 });
 
 const mapDispatchToProps = dispatch => ({

examples/redux/src/actions.js

@@ -14,9 +14,9 @@ export function dataSourceOptionsUpdate(payload) {
   };
 }
 
-export function editorUpdate(data, layout) {
+export function editorUpdate(data, layout, frames) {
   return {
     type: ACTIONS.EDITOR_UPDATE,
-    payload: {data, layout},
+    payload: {data, layout, frames},
   };
 }

examples/redux/src/reducer.js

@@ -5,6 +5,7 @@ const initialState = {
   dataSourceOptions: [],
   data: [],
   layout: {},
+  frames: [],
 };
 
 export default (state = initialState, action) => {
@@ -18,6 +19,7 @@ export default (state = initialState, action) => {
         ...state,
         data: action.payload.data,
         layout: action.payload.layout,
+        frames: action.payload.frames,
       };
     default:
       return state;

examples/simple/src/App.js

@@ -19,7 +19,7 @@ const config = {editable: true};
 class App extends Component {
   constructor() {
     super();
-    this.state = {data: [], layout: {}};
+    this.state = {data: [], layout: {}, frames: []};
   }
 
   render() {
@@ -29,10 +29,13 @@ class App extends Component {
           data={this.state.data}
           layout={this.state.layout}
           config={config}
+          frames={this.state.frames}
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
-          onUpdate={(data, layout) => this.setState({data, layout})}
+          onUpdate={(data, layout, frames) =>
+            this.setState({data, layout, frames})
+          }
           useResizeHandler
           debug
           advancedTraceTypeSelector

src/DefaultEditor.js

@@ -9,9 +9,11 @@ import {
   StyleLegendPanel,
   StyleNotesPanel,
   StyleShapesPanel,
+  StyleSlidersPanel,
   StyleImagesPanel,
   StyleTracesPanel,
   StyleColorbarsPanel,
+  StyleUpdateMenusPanel,
 } from './default_panels';
 
 const DefaultEditor = ({localize: _}) => (
@@ -26,6 +28,8 @@ const DefaultEditor = ({localize: _}) => (
       <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />
       <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
       <StyleImagesPanel group={_('Style')} name={_('Images')} />
+      <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
+      <StyleUpdateMenusPanel group={_('Style')} name={_('Update Menus')} />
     </PanelMenuWrapper>
   </Fragment>
 );

src/EditorControls.js

@@ -30,6 +30,7 @@ class EditorControls extends Component {
       dataSourceValueRenderer: this.props.dataSourceValueRenderer,
       dataSourceOptionRenderer: this.props.dataSourceOptionRenderer,
       dictionaries: this.props.dictionaries || {},
+      frames: gd._transitionData ? gd._transitionData._frames : [],
       fullData: gd._fullData,
       fullLayout: gd._fullLayout,
       graphDiv: gd,
@@ -98,7 +99,11 @@ class EditorControls extends Component {
           this.props.afterUpdateTraces(payload);
         }
         if (this.props.onUpdate) {
-          this.props.onUpdate(graphDiv.data.slice(), graphDiv.layout);
+          this.props.onUpdate(
+            graphDiv.data.slice(),
+            graphDiv.layout,
+            graphDiv._transitionData._frames
+          );
         }
         break;
 
@@ -278,6 +283,7 @@ EditorControls.childContextTypes = {
   dataSources: PropTypes.object,
   dataSourceValueRenderer: PropTypes.func,
   dictionaries: PropTypes.object,
+  frames: PropTypes.array,
   fullData: PropTypes.array,
   fullLayout: PropTypes.object,
   graphDiv: PropTypes.any,

src/PlotlyEditor.js

@@ -33,6 +33,7 @@ class PlotlyEditor extends Component {
           <this.PlotComponent
             data={this.props.data}
             layout={this.props.layout}
+            frames={this.props.frames}
             config={this.props.config}
             useResizeHandler={this.props.useResizeHandler}
             debug={this.props.debug}
@@ -53,6 +54,7 @@ PlotlyEditor.propTypes = {
   config: PropTypes.object,
   dataSourceOptions: PropTypes.array,
   dataSources: PropTypes.object,
+  frames: PropTypes.array,
   onUpdate: PropTypes.func,
   plotly: PropTypes.object,
   useResizeHandler: PropTypes.bool,

src/components/containers/SliderAccordion.js

@@ -0,0 +1,47 @@
+import Fold from './Fold';
+import TraceRequiredPanel from './TraceRequiredPanel';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectSliderToLayout, localize} from 'lib';
+
+const SliderFold = connectSliderToLayout(Fold);
+
+class SliderAccordion extends Component {
+  render() {
+    const {layout: {sliders = []}} = this.context;
+    const {children, localize: _} = this.props;
+
+    const content =
+      sliders.length > 0 &&
+      sliders.map((sli, i) => (
+        <SliderFold key={i} sliderIndex={i} name={_('Slider') + ` ${i + 1}`}>
+          {children}
+        </SliderFold>
+      ));
+
+    return (
+      <TraceRequiredPanel
+        extraConditions={[() => sliders.length > 0]}
+        extraEmptyPanelMessages={[
+          {
+            heading: _('There are no sliders to style in your plot'),
+            message: '',
+          },
+        ]}
+      >
+        {content ? content : null}
+      </TraceRequiredPanel>
+    );
+  }
+}
+
+SliderAccordion.contextTypes = {
+  layout: PropTypes.object,
+};
+
+SliderAccordion.propTypes = {
+  children: PropTypes.node,
+  localize: PropTypes.func,
+};
+
+export default localize(SliderAccordion);

src/components/containers/UpdateMenuAccordion.js

@@ -0,0 +1,58 @@
+import Fold from './Fold';
+import TraceRequiredPanel from './TraceRequiredPanel';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectUpdateMenuToLayout, localize, capitalize} from 'lib';
+
+const UpdateMenuFold = connectUpdateMenuToLayout(Fold);
+
+class UpdateMenuAccordion extends Component {
+  render() {
+    const {layout: {updatemenus = []}} = this.context;
+    const {children, localize: _} = this.props;
+
+    const content =
+      updatemenus.length > 0 &&
+      updatemenus.map((upd, i) => {
+        const updateMenuType = capitalize(upd.type) || 'Dropdown';
+        const activeElementLabel = upd.buttons.filter(
+          b => b.index === upd.active
+        )[0].label;
+
+        return (
+          <UpdateMenuFold
+            key={i}
+            updateMenuIndex={i}
+            name={updateMenuType + ': ' + activeElementLabel}
+          >
+            {children}
+          </UpdateMenuFold>
+        );
+      });
+
+    return (
+      <TraceRequiredPanel
+        extraConditions={[() => updatemenus.length > 0]}
+        extraEmptyPanelMessages={[
+          {
+            heading: _('There are no update menus to style in your plot'),
+            message: '',
+          },
+        ]}
+      >
+        {content ? content : null}
+      </TraceRequiredPanel>
+    );
+  }
+}
+
+UpdateMenuAccordion.contextTypes = {
+  layout: PropTypes.object,
+};
+
+UpdateMenuAccordion.propTypes = {
+  children: PropTypes.node,
+  localize: PropTypes.func,
+};
+
+export default localize(UpdateMenuAccordion);

src/components/containers/index.js

@@ -1,6 +1,8 @@
 import AnnotationAccordion from './AnnotationAccordion';
 import ShapeAccordion from './ShapeAccordion';
+import SliderAccordion from './SliderAccordion';
 import ImageAccordion from './ImageAccordion';
+import UpdateMenuAccordion from './UpdateMenuAccordion';
 import AxesFold from './AxesFold';
 import Fold from './Fold';
 import MenuPanel from './MenuPanel';
@@ -18,7 +20,9 @@ import SectionHeader from './SectionHeader';
 export {
   AnnotationAccordion,
   ShapeAccordion,
+  SliderAccordion,
   ImageAccordion,
+  UpdateMenuAccordion,
   MenuPanel,
   Fold,
   Panel,

src/components/fields/UpdateMenuButtons.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {Dropdown, TextEditor} from '../index';
+import Field from './Field';
+import {connectToContainer, localize} from 'lib';
+
+class UpdateMenuButtons extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      currentButtonIndex: 0,
+    };
+  }
+
+  renderDropdown() {
+    const _ = this.props.localize;
+    const options = this.props.fullValue.map((button, index) => {
+      return {label: _('Button') + ` ${index + 1}`, value: index};
+    });
+    return (
+      <Dropdown
+        attr="buttons"
+        label={_('Button')}
+        options={options}
+        updatePlot={index => this.setState({currentButtonIndex: index})}
+        clearable={false}
+        fullValue={this.state.currentButtonIndex}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <Field>
+        {this.renderDropdown()}
+        <TextEditor
+          attr={`buttons[${this.state.currentButtonIndex}].label`}
+          richTextOnly
+        />
+      </Field>
+    );
+  }
+}
+
+UpdateMenuButtons.propTypes = {
+  attr: PropTypes.string,
+  localize: PropTypes.func,
+  fullValue: PropTypes.array,
+  updatePlot: PropTypes.func,
+};
+
+export default connectToContainer(localize(UpdateMenuButtons));