31-fix-quick-values-changing-colors

Author: billmurrin

src/web/components/FieldQuickValuesPlus.jsx

@@ -129,15 +129,17 @@ const FieldQuickValuesPlus = React.createClass({
                     },
                     loaded: true,
                 });
-                this.refs.thedash.refs.widgetModal.setState({
-                    config: {
-                        top_values: this.state.configuration['org.graylog.plugins.quickvaluesplus.QuickValuesPlusPluginConfiguration'].top_values,
-                        sort_order: this.state.configuration['org.graylog.plugins.quickvaluesplus.QuickValuesPlusPluginConfiguration'].sort_order,
-                        table_size: this.state.configuration['org.graylog.plugins.quickvaluesplus.QuickValuesPlusPluginConfiguration'].table_size,
-                        show_pie_chart: true,
-                        show_data_table: true
-                    }
-                });
+                if (this.refs.thedash !== undefined) {
+                    this.refs.thedash.refs.widgetModal.setState({
+                        config: {
+                            top_values: this.state.configuration['org.graylog.plugins.quickvaluesplus.QuickValuesPlusPluginConfiguration'].top_values,
+                            sort_order: this.state.configuration['org.graylog.plugins.quickvaluesplus.QuickValuesPlusPluginConfiguration'].sort_order,
+                            table_size: this.state.configuration['org.graylog.plugins.quickvaluesplus.QuickValuesPlusPluginConfiguration'].table_size,
+                            show_pie_chart: true,
+                            show_data_table: true
+                        }
+                    });
+                }
             } else {
                 if (this.state.debug) console.log("Global config not loaded. QVP Options using internal default values.");
                 this.setState({

src/web/components/QuickValuesPlusVisualization.jsx

@@ -45,6 +45,7 @@ const QuickValuesPlusVisualization = React.createClass({
         this.topValues = 5;
         this.dimension = this.quickValuesData.dimension((d) => d.term);
         this.group = this.dimension.group().reduceSum((d) => d.count);
+        this.currentConfig = {};
 
         return {
             total: undefined,
@@ -59,9 +60,37 @@ const QuickValuesPlusVisualization = React.createClass({
         } else {
             this.sortOrder = d3.ascending;
         }
+
+        if (this.props.config.dashboardID) {
+            this.setState({
+                currentConfig: {
+                    dashboardID: this.props.config.dashboardID,
+                    field: this.props.config.field,
+                    query: this.props.config.query,
+                    show_data_table: this.props.config.show_data_table,
+                    show_pie_chart: this.props.config.show_pie_chart,
+                    sort_order: this.props.config.sort_order,
+                    stream_id: this.props.config.stream_id,
+                    table_size: this.props.config.table_size,
+                    timerange: this.props.config.timerange,
+                    top_values: this.props.config.top_values,
+                }
+            });
+        } else {
+            this.setState({currentConfig: {
+                    show_data_table: this.props.config.show_data_table,
+                    show_pie_chart: this.props.config.show_pie_chart,
+                    sort_order: this.props.config.sort_order,
+                    table_size: this.props.config.table_size,
+                    top_values: this.props.config.top_values,
+                }
+            });
+        }
+
         this.tableChanged = false;
         this.tableSize =  this.props.config.table_size;
         this.topValues = this.props.config.top_values;
+
         this._resizeVisualization(this.props.width, this.props.height, this.props.config.show_data_table);
         this._formatProps(this.props);
         this._renderDataTable();
@@ -83,10 +112,38 @@ const QuickValuesPlusVisualization = React.createClass({
         this.tableChanged = true;
         this.tableSize =  nextProps.config.table_size;
         this.topValues = nextProps.config.top_values;
+
         this._resizeVisualization(nextProps.width, nextProps.height, nextProps.config.show_data_table);
         this._formatProps(nextProps);
-        this._renderDataTable();
-        this._renderPieChart();
+
+        if (!deepEqual(this.state.currentConfig, nextProps.config)) {
+            if (this.props.config.dashboardID) {
+                this.setState({currentConfig: {
+                        dashboardID: nextProps.config.dashboardID,
+                        field: nextProps.config.field,
+                        query: nextProps.config.query,
+                        show_data_table: nextProps.config.show_data_table,
+                        show_pie_chart: nextProps.config.show_pie_chart,
+                        sort_order: nextProps.config.sort_order,
+                        stream_id: nextProps.config.stream_id,
+                        table_size: nextProps.config.table_size,
+                        timerange: nextProps.config.timerange,
+                        top_values: nextProps.config.top_values,
+                    }
+                });
+            } else {
+                this.setState({currentConfig: {
+                        show_data_table: nextProps.config.show_data_table,
+                        show_pie_chart: nextProps.config.show_pie_chart,
+                        sort_order: nextProps.config.sort_order,
+                        table_size: nextProps.config.table_size,
+                        top_values: nextProps.config.top_values,
+                    }
+                });
+            }
+            this._renderDataTable();
+            this._renderPieChart();
+        }
     },
     NUMBER_OF_TOP_VALUES: 10,
     DEFAULT_PIE_CHART_SIZE: 200,