Merge pull request #749 from plotly/jlab

Fixes for jupyterlab-chart-editor

Author: nicolaskruchten

src/PlotlyEditor.js

@@ -9,6 +9,14 @@ class PlotlyEditor extends Component {
     super();
     this.state = {graphDiv: {}};
     this.PlotComponent = createPlotComponent(props.plotly);
+    this.handleDirectUpdate = this.handleDirectUpdate.bind(this);
+  }
+
+  handleDirectUpdate(fig, graphDiv) {
+    this.setState({graphDiv});
+    if (this.props.onDirectUpdate) {
+      this.props.onDirectUpdate(graphDiv.data, graphDiv.layout, graphDiv._transitionData._frames);
+    }
   }
 
   render() {
@@ -44,8 +52,8 @@ class PlotlyEditor extends Component {
             config={this.props.config}
             useResizeHandler={this.props.useResizeHandler}
             debug={this.props.debug}
-            onInitialized={(fig, graphDiv) => this.setState({graphDiv})}
-            onUpdate={(fig, graphDiv) => this.setState({graphDiv})}
+            onInitialized={this.handleDirectUpdate}
+            onUpdate={this.handleDirectUpdate}
             style={{width: '100%', height: '100%'}}
             divId={this.props.divId}
           />
@@ -64,6 +72,7 @@ PlotlyEditor.propTypes = {
   dataSources: PropTypes.object,
   frames: PropTypes.array,
   onUpdate: PropTypes.func,
+  onDirectUpdate: PropTypes.func,
   plotly: PropTypes.object,
   useResizeHandler: PropTypes.bool,
   debug: PropTypes.bool,

src/components/containers/ImageAccordion.js

@@ -17,7 +17,7 @@ class ImageAccordion extends Component {
     const content =
       images.length &&
       images.map((img, i) => (
-        <ImageFold key={i} imageIndex={i} name={img.text} canDelete={canAdd}>
+        <ImageFold key={i} imageIndex={i} name={`${_('Image')} ${i + 1}`} canDelete={canAdd}>
           {children}
         </ImageFold>
       ));
@@ -34,7 +34,6 @@ class ImageAccordion extends Component {
 
         const key = `images[${imageIndex}]`;
         const value = {
-          text: `${_('Image')} ${imageIndex + 1}`,
           sizex: 0.1,
           sizey: 0.1,
           x: 0.5,

src/components/containers/ShapeAccordion.js

@@ -18,7 +18,7 @@ class ShapeAccordion extends Component {
     const content =
       shapes.length &&
       shapes.map((shp, i) => (
-        <ShapeFold key={i} shapeIndex={i} name={shp.text} canDelete={canAdd}>
+        <ShapeFold key={i} shapeIndex={i} name={`${_('Shape')} ${i + 1}`} canDelete={canAdd}>
           {children}
         </ShapeFold>
       ));
@@ -35,7 +35,6 @@ class ShapeAccordion extends Component {
 
         const key = `shapes[${shapeIndex}]`;
         const value = {
-          text: `${_('Shape')} ${shapeIndex}`,
           line: {color: COLORS.charcoal},
           fillcolor: COLORS.middleGray,
           opacity: 0.3,