Graph inifinite loop #608

src/components/Graph.react.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {contains, filter, clone, has, isNil, type, omit} from 'ramda';
+import {contains, filter, clone, has, isNil, type, omit, equals} from 'ramda';
 /* global Plotly:true */
 
 const filterEventData = (gd, eventData, event) => {
@@ -83,7 +83,6 @@ class PlotlyGraph extends Component {
     plot(props) {
         const {figure, animate, animation_options, config} = props;
         const gd = this.gd.current;
-
         if (
             animate &&
             this._hasPlotted &&
@@ -98,7 +97,6 @@ class PlotlyGraph extends Component {
             config: config,
         }).then(() => {
             const gd = this.gd.current;
-
             // double-check gd hasn't been unmounted
             if (!gd) {
                 return;
@@ -154,7 +152,14 @@ class PlotlyGraph extends Component {
     }
 
     bindEvents() {
-        const {setProps, clear_on_unhover} = this.props;
+        const {
+            setProps,
+            clear_on_unhover,
+            relayoutData,
+            restyleData,
+            hoverData,
+            selectedData,
+        } = this.props;
 
         const gd = this.gd.current;
 
@@ -172,30 +177,34 @@ class PlotlyGraph extends Component {
             setProps({clickAnnotationData});
         });
         gd.on('plotly_hover', eventData => {
-            const hoverData = filterEventData(gd, eventData, 'hover');
-            if (!isNil(hoverData)) {
-                setProps({hoverData});
+            const hover = filterEventData(gd, eventData, 'hover');
+            if (!isNil(hover) && !equals(hover, hoverData)) {
+                setProps({hoverData: hover});
             }
         });
         gd.on('plotly_selected', eventData => {
-            const selectedData = filterEventData(gd, eventData, 'selected');
-            if (!isNil(selectedData)) {
-                setProps({selectedData});
+            const selected = filterEventData(gd, eventData, 'selected');
+            if (!isNil(selected) && !equals(selected, selectedData)) {
+                setProps({selectedData: selected});
             }
         });
         gd.on('plotly_deselect', () => {
             setProps({selectedData: null});
         });
         gd.on('plotly_relayout', eventData => {
-            const relayoutData = filterEventData(gd, eventData, 'relayout');
-            if (!isNil(relayoutData)) {
-                setProps({relayoutData});
+            const relayout = filterEventData(gd, eventData, 'relayout');
+            if (
+                !isNil(relayout) &&
+                !equals(relayout, relayoutData) &&
+                !equals(relayout, {autosize: true})
+            ) {
+                setProps({relayoutData: relayout});
             }
         });
         gd.on('plotly_restyle', eventData => {
-            const restyleData = filterEventData(gd, eventData, 'restyle');
-            if (!isNil(restyleData)) {
-                setProps({restyleData});
+            const restyle = filterEventData(gd, eventData, 'restyle');
+            if (!isNil(restyle) && !equals(restyle, restyleData)) {
+                setProps({restyleData: restyle});
             }
         });
         gd.on('plotly_unhover', () => {
@@ -236,15 +245,14 @@ class PlotlyGraph extends Component {
              */
             return;
         }
-
-        const figureChanged = this.props.figure !== nextProps.figure;
-
-        if (figureChanged) {
+        if (this.props.figure !== nextProps.figure) {
             this.plot(nextProps);
         }
 
-        const extendDataChanged =
-            this.props.extendData !== nextProps.extendData;
+        const extendDataChanged = !equals(
+            this.props.extendData,
+            nextProps.extendData
+        );
 
         if (extendDataChanged) {
             this.extend(nextProps);