From 2a8098158ea3ab0748e4c28f432356000a30c1f2 Mon Sep 17 00:00:00 2001 From: Umesh Date: Wed, 27 Nov 2019 13:42:20 -0600 Subject: [PATCH 1/5] #1363: Update Plotly Graph Widget to have a default text, don't update widget with empty desc in ExecutionIndex --- .../ExecutionIndex/ExecutionIndexControl.js | 9 +++------ .../widgets/PlotlyGraph/PlotlyGraphWidget.js | 19 ++++++++++++++++++- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js b/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js index 97af1d739..6f1c68471 100644 --- a/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js +++ b/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js @@ -49,12 +49,9 @@ define([ }; ExecutionIndexControl.prototype._updateGraphWidget = function () { - if (this.displayedExecCount() > 0) { - const plotlyJSON = this._consolidateGraphData(this.displayedExecutions); - this._widget.updateNode(plotlyJSON); - } else { - this._widget.removeNode(); - } + const plotlyJSON = this._consolidateGraphData(this.displayedExecutions); + if(plotlyJSON) this._widget.updateNode(plotlyJSON); + else this._widget.removeNode(); }; ExecutionIndexControl.prototype._consolidateGraphData = function (graphExecIDs) { diff --git a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js index c3fb1a379..937c5031c 100644 --- a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js +++ b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js @@ -7,6 +7,13 @@ define(['./lib/plotly.min',], function (Plotly) { function PlotlyGraphWidget(logger, container) { this.logger = logger.fork('widget'); this.$el = container; + this.$defaultTextDiv = $('
', { + class: 'h2 center' + }).text('No Data Available.') + .css({ + 'margin-top': this.$el.height() / 2 + }); + this.$el.css('overflow', 'auto'); this.$el.addClass(WIDGET_CLASS); this.nodes = {}; @@ -14,6 +21,7 @@ define(['./lib/plotly.min',], function (Plotly) { this.layout = {}; this.created = false; this.logger.debug('ctor finished'); + this.toggleText(); } PlotlyGraphWidget.prototype.onWidgetContainerResize = function (width, height) { @@ -22,6 +30,9 @@ define(['./lib/plotly.min',], function (Plotly) { width: width, height: height }); + this.$defaultTextDiv.css({ + 'margin-top': height / 2 + }); this.logger.debug('Widget is resizing...'); }; @@ -50,9 +61,10 @@ define(['./lib/plotly.min',], function (Plotly) { this.deleteChart(); } else { if (!this.created && !_.isEmpty(this.plotlyJSON)) { + this.toggleText(false); Plotly.newPlot(this.$el[0], this.plotlyJSON); this.created = true; - } else if(!_.isEmpty(this.plotlyJSON)) { + } else if (!_.isEmpty(this.plotlyJSON)) { Plotly.react(this.$el[0], this.plotlyJSON); } } @@ -64,10 +76,15 @@ define(['./lib/plotly.min',], function (Plotly) { this.plotlyJSON = null; if (this.created) { Plotly.purge(this.$el[0]); + this.toggleText(); } this.created = false; }; + PlotlyGraphWidget.prototype.toggleText = function (append = true) { + if (append) this.$el.append(this.$defaultTextDiv); + else this.$defaultTextDiv.remove(); + }; /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */ PlotlyGraphWidget.prototype.destroy = function () { Plotly.purge(this.$el[0]); From ac9ae75b73f5971458883a9540718a9d8d3da5b7 Mon Sep 17 00:00:00 2001 From: Umesh Date: Wed, 27 Nov 2019 13:53:33 -0600 Subject: [PATCH 2/5] "#1363: Add jquery to define, for codeclimate" --- src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js index 937c5031c..ac5b588c2 100644 --- a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js +++ b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js @@ -1,4 +1,4 @@ -/*globals define, _*/ +/*globals define, _, $*/ define(['./lib/plotly.min',], function (Plotly) { 'use strict'; From fd037ffe888fad148bbbda3d26a25053ec77c645 Mon Sep 17 00:00:00 2001 From: Umesh Date: Wed, 4 Dec 2019 17:57:35 -0600 Subject: [PATCH 3/5] "#1363: Refactor toggleText to setTextVisibility by appending a child div to widget element, don't call graph methods, if no executions are selected" --- .../ExecutionIndex/ExecutionIndexControl.js | 9 ++++++--- .../widgets/PlotlyGraph/PlotlyGraphWidget.js | 15 ++++++++------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js b/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js index 6f1c68471..6439cd7bf 100644 --- a/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js +++ b/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js @@ -49,9 +49,12 @@ define([ }; ExecutionIndexControl.prototype._updateGraphWidget = function () { - const plotlyJSON = this._consolidateGraphData(this.displayedExecutions); - if(plotlyJSON) this._widget.updateNode(plotlyJSON); - else this._widget.removeNode(); + if(this.displayedExecCount() > 0){ + const plotlyJSON = this._consolidateGraphData(this.displayedExecutions); + if(plotlyJSON) this._widget.updateNode(plotlyJSON); + } else { + this._widget.removeNode(); + } }; ExecutionIndexControl.prototype._consolidateGraphData = function (graphExecIDs) { diff --git a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js index ac5b588c2..7f7102eed 100644 --- a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js +++ b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js @@ -13,7 +13,7 @@ define(['./lib/plotly.min',], function (Plotly) { .css({ 'margin-top': this.$el.height() / 2 }); - + this.$el.append(this.$defaultTextDiv); this.$el.css('overflow', 'auto'); this.$el.addClass(WIDGET_CLASS); this.nodes = {}; @@ -21,7 +21,7 @@ define(['./lib/plotly.min',], function (Plotly) { this.layout = {}; this.created = false; this.logger.debug('ctor finished'); - this.toggleText(); + this.setTextVisibility(); } PlotlyGraphWidget.prototype.onWidgetContainerResize = function (width, height) { @@ -40,6 +40,7 @@ define(['./lib/plotly.min',], function (Plotly) { PlotlyGraphWidget.prototype.addNode = function (desc) { if (desc) { this.plotlyJSON = desc; + this.setTextVisibility(false); this.refreshChart(); } }; @@ -47,11 +48,13 @@ define(['./lib/plotly.min',], function (Plotly) { PlotlyGraphWidget.prototype.removeNode = function () { this.plotlyJSON = null; this.refreshChart(); + this.setTextVisibility(); }; PlotlyGraphWidget.prototype.updateNode = function (desc) { if (desc) { this.plotlyJSON = desc; + this.setTextVisibility(false); this.refreshChart(); } }; @@ -61,7 +64,6 @@ define(['./lib/plotly.min',], function (Plotly) { this.deleteChart(); } else { if (!this.created && !_.isEmpty(this.plotlyJSON)) { - this.toggleText(false); Plotly.newPlot(this.$el[0], this.plotlyJSON); this.created = true; } else if (!_.isEmpty(this.plotlyJSON)) { @@ -76,14 +78,13 @@ define(['./lib/plotly.min',], function (Plotly) { this.plotlyJSON = null; if (this.created) { Plotly.purge(this.$el[0]); - this.toggleText(); } this.created = false; }; - PlotlyGraphWidget.prototype.toggleText = function (append = true) { - if (append) this.$el.append(this.$defaultTextDiv); - else this.$defaultTextDiv.remove(); + PlotlyGraphWidget.prototype.setTextVisibility = function (display = true) { + display = display ? 'block' : 'none'; + this.$defaultTextDiv.css('display', display); }; /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */ PlotlyGraphWidget.prototype.destroy = function () { From 0fd1a3137cfe0a1a3b3c1c248bfb294e3f9f5464 Mon Sep 17 00:00:00 2001 From: Umesh Date: Wed, 4 Dec 2019 18:11:56 -0600 Subject: [PATCH 4/5] #1363: Combine Similar Blocks of Code Together --- .../widgets/PlotlyGraph/PlotlyGraphWidget.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js index 7f7102eed..99ceb5f27 100644 --- a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js +++ b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js @@ -38,11 +38,7 @@ define(['./lib/plotly.min',], function (Plotly) { // Adding/Removing/Updating items PlotlyGraphWidget.prototype.addNode = function (desc) { - if (desc) { - this.plotlyJSON = desc; - this.setTextVisibility(false); - this.refreshChart(); - } + this.addOrUpdateNode(desc); }; PlotlyGraphWidget.prototype.removeNode = function () { @@ -51,7 +47,7 @@ define(['./lib/plotly.min',], function (Plotly) { this.setTextVisibility(); }; - PlotlyGraphWidget.prototype.updateNode = function (desc) { + PlotlyGraphWidget.prototype.addOrUpdateNode = function (desc) { if (desc) { this.plotlyJSON = desc; this.setTextVisibility(false); @@ -59,6 +55,10 @@ define(['./lib/plotly.min',], function (Plotly) { } }; + PlotlyGraphWidget.prototype.updateNode = function (desc) { + this.addOrUpdateNode(desc); + }; + PlotlyGraphWidget.prototype.createOrUpdateChart = function () { if (!this.plotlyJSON) { this.deleteChart(); From 7f824648299d72e0e9276170ebd13c14a652b19a Mon Sep 17 00:00:00 2001 From: Umesh Date: Thu, 5 Dec 2019 09:02:06 -0600 Subject: [PATCH 5/5] #1363: Remove Default Argument From setTextVisible, refactor _updateGraphDesc to check PlotlyJSON --- .../panels/ExecutionIndex/ExecutionIndexControl.js | 9 +++++---- src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js | 6 +++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js b/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js index 6439cd7bf..fac2f5920 100644 --- a/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js +++ b/src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js @@ -49,9 +49,10 @@ define([ }; ExecutionIndexControl.prototype._updateGraphWidget = function () { - if(this.displayedExecCount() > 0){ - const plotlyJSON = this._consolidateGraphData(this.displayedExecutions); - if(plotlyJSON) this._widget.updateNode(plotlyJSON); + const plotlyJSON = this._consolidateGraphData(this.displayedExecutions); + const hasDisplayedMetadata = !!plotlyJSON; + if (hasDisplayedMetadata) { + this._widget.updateNode(plotlyJSON); } else { this._widget.removeNode(); } @@ -78,7 +79,7 @@ define([ graphDescs.forEach((desc) => { if (!consolidatedDesc) { consolidatedDesc = JSON.parse(JSON.stringify(desc)); - consolidatedDesc.subGraphs.forEach((subGraph) =>{ + consolidatedDesc.subGraphs.forEach((subGraph) => { subGraph.abbr = desc.abbr; subGraph.title = getDisplayTitle(subGraph, true); }); diff --git a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js index 99ceb5f27..ca32801f4 100644 --- a/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js +++ b/src/visualizers/widgets/PlotlyGraph/PlotlyGraphWidget.js @@ -21,7 +21,7 @@ define(['./lib/plotly.min',], function (Plotly) { this.layout = {}; this.created = false; this.logger.debug('ctor finished'); - this.setTextVisibility(); + this.setTextVisibility(true); } PlotlyGraphWidget.prototype.onWidgetContainerResize = function (width, height) { @@ -44,7 +44,7 @@ define(['./lib/plotly.min',], function (Plotly) { PlotlyGraphWidget.prototype.removeNode = function () { this.plotlyJSON = null; this.refreshChart(); - this.setTextVisibility(); + this.setTextVisibility(true); }; PlotlyGraphWidget.prototype.addOrUpdateNode = function (desc) { @@ -82,7 +82,7 @@ define(['./lib/plotly.min',], function (Plotly) { this.created = false; }; - PlotlyGraphWidget.prototype.setTextVisibility = function (display = true) { + PlotlyGraphWidget.prototype.setTextVisibility = function (display) { display = display ? 'block' : 'none'; this.$defaultTextDiv.css('display', display); };