Proper trace type initialization in TraceSelector component

Author: VeraZab

examples/simple/src/App.js

@@ -4,7 +4,6 @@ import createPlotComponent from 'react-plotly.js/factory';
 import PlotlyEditor, {dereference} from 'react-plotly.js-editor';
 import 'react-plotly.js-editor/lib/react-plotly.js-editor.css';
 
-
 const Plot = createPlotComponent(plotly);
 
 class App extends Component {
@@ -24,7 +23,7 @@ class App extends Component {
     // overwritten with a full DOM node that contains data, layout, _fullData,
     // _fullLayout etc in handlePlotUpdate()
     const graphDiv = {
-      data: [{type: 'scatter', xsrc: 'col1', ysrc: 'col2', mode: 'markers'}],
+      data: [{type: 'scatter', xsrc: 'col1', ysrc: 'col2'}],
       layout: {title: 'Room readings'},
     };
 

package-lock.json

@@ -13,27 +13,19 @@
     "url": "https://github.com/plotly/react-plotly.js-editor/issues"
   },
   "scripts": {
-    "make:combined-translation-keys":
-      "babel-node utils/findTranslationKeys.js && babel-node utils/combineTranslationKeys.js",
+    "make:combined-translation-keys": "babel-node utils/findTranslationKeys.js && babel-node utils/combineTranslationKeys.js",
     "make:translation-keys": "babel-node utils/findTranslationKeys.js",
-    "make:lib":
-      "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
-    "make:lib:css":
-      "mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
-    "make:dist":
-      "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
-    "make:dist:css":
-      "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
+    "make:lib": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
+    "make:lib:css": "mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
+    "make:dist": "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
+    "make:dist:css": "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
     "prepublishOnly": "npm run make:lib",
     "lint": "prettier --write \"src/**/*.js\"",
-    "test:lint":
-      "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
-    "test:pretty":
-      "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
+    "test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
+    "test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
     "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill",
     "test": "npm run test:lint && npm run test:pretty && npm run test:js",
-    "watch":
-      "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-plotly.js-editor.css",
+    "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-plotly.js-editor.css",
     "watch-test": "jest --watch"
   },
   "keywords": [
@@ -99,7 +91,9 @@
     "react": "React"
   },
   "jest": {
-    "roots": ["<rootDir>/src/"],
+    "roots": [
+      "<rootDir>/src/"
+    ],
     "moduleNameMapper": {
       "^.+\\.css$": "<rootDir>/config/CSSStub.js"
     }

package.json

@@ -93,7 +93,7 @@ class PlotlyEditor extends Component {
         if (this.props.onAddTrace) {
           this.props.onAddTrace(payload);
         }
-        graphDiv.data.push({x: [], y: [], type: 'scatter', mode: 'markers'});
+        graphDiv.data.push({x: [], y: [], type: 'scatter'});
         if (this.props.onUpdate) {
           this.props.onUpdate();
         }

src/PlotlyEditor.js

@@ -65,7 +65,13 @@ class TraceSelector extends Component {
       this.traceOptions = [{label: 'Scatter', value: 'scatter'}];
     }
 
-    this.fullValue = plotlyTraceToCustomTrace(props.fullContainer);
+    this.fullValue = plotlyTraceToCustomTrace(props.container);
+  }
+
+  componentWillMount() {
+    const {container} = this.props;
+    const value = plotlyTraceToCustomTrace(container);
+    this.updatePlot(value);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
@@ -97,7 +103,7 @@ TraceSelector.contextTypes = {
 
 TraceSelector.propTypes = {
   getValObject: PropTypes.func,
-  fullContainer: PropTypes.object.isRequired,
+  container: PropTypes.object.isRequired,
   fullValue: PropTypes.any.isRequired,
   updateContainer: PropTypes.func,
 };

src/components/fields/TraceSelector.js

@@ -1,13 +1,15 @@
 export function plotlyTraceToCustomTrace(trace) {
   if (
     trace.type === 'scatter' &&
+    trace.fill &&
     ['tozeroy', 'tozerox', 'tonexty', 'tonextx', 'toself', 'tonext'].includes(
       trace.fill
     )
   ) {
     return 'area';
   } else if (
     trace.type === 'scatter' &&
+    trace.mode &&
     (trace.mode === 'lines' || trace.mode === 'lines+markers')
   ) {
     return 'line';

src/lib/customTraceType.js

@@ -5531,9 +5531,9 @@ planar-graph-to-polyline@^1.0.0:
     two-product "^1.0.0"
     uniq "^1.0.0"
 
-plotly-icons@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/plotly-icons/-/plotly-icons-1.0.0.tgz#161ca8354f8b32fe97235b1cb63ed71a81f42378"
+plotly-icons@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/plotly-icons/-/plotly-icons-1.0.2.tgz#0db46ceeda5f16cb56012f2201b1f3fd318156b9"
   dependencies:
     mdi-react "^2.1.19"