HPCC-9651 Move Timings TreeMap to new Graphs list

Double clicking TreeMap SubGraph Item will open graphs tab and select subgraph
item.

Fixes HPCC-9651
Fixes HPCC-9653

Signed-off-by: Gordon Smith <gordon.smith@lexisnexis.com>

esp/files/scripts/GraphPageWidget.js

@@ -17,6 +17,7 @@ define([
     "dojo/_base/declare",
     "dojo/_base/lang",
     "dojo/_base/array",
+    "dojo/_base/Deferred",
     "dojo/dom",
     "dojo/dom-construct",
     "dojo/on",
@@ -57,7 +58,7 @@ define([
     "dijit/form/SimpleTextarea",
     "dijit/form/NumberSpinner",
     "dijit/form/DropDownButton"
-], function (declare, lang, arrayUtil, dom, domConstruct, on, html, Memory, Observable,
+], function (declare, lang, arrayUtil, Deferred, dom, domConstruct, on, html, Memory, Observable,
             BorderContainer, TabContainer, ContentPane, registry, Dialog,
             entities,
             OnDemandGrid, Keyboard, Selection, selector, ColumnResizer, DijitRegistry,
@@ -286,6 +287,11 @@ define([
             this._initItemGrid(this.edgesGrid);
         },
 
+        _onMainRefresh: function () {
+            this.main.setMessage("Performing Layout...");
+            this.main.startLayout("dot");
+        },
+
         _onLocalRefresh: function () {
             this.refreshLocal(this.local.getSelectionAsGlobalID());
         },
@@ -406,7 +412,9 @@ define([
                         onGetGraphs: function (graphs) {
                             if (firstLoad == true) {
                                 firstLoad = false;
-                                context.loadGraph(context.wu, context.graphName);
+                                context.loadGraph(context.wu, context.graphName).then(function (response) {
+                                    context.refresh(params);
+                                });
                             } else {
                                 context.refreshGraph(context.wu, context.graphName);
                             }
@@ -425,6 +433,13 @@ define([
 
         },
 
+        refresh: function (params) {
+            if (params && params.SubGraphId) {
+                this.global.setSelectedAsGlobalID([params.SubGraphId]);
+                this.syncSelectionFrom(this.global);
+            }
+        },
+
         loadGraphFromXGMML: function (xgmml) {
             this.global.loadXGMML(xgmml, false);
             this.refreshMain();
@@ -444,6 +459,7 @@ define([
         },
 
         loadGraph: function (wu, graphName) {
+            var deferred = new Deferred();
             this.overview.setMessage("Fetching Data...");
             this.main.setMessage("Fetching Data...");
             this.local.setMessage("Fetching Data...");
@@ -453,7 +469,9 @@ define([
                 context.main.setMessage("");
                 context.local.setMessage("");
                 context.loadGraphFromXGMML(xgmml, svg);
+                deferred.resolve();
             });
+            return deferred.promise;
         },
 
         refreshGraph: function (wu, graphName) {

esp/files/scripts/GraphWidget.js

@@ -300,8 +300,7 @@ require([
                     if (this._isPluginInstalled) {
                         var pluginID = this.id + "Plugin";
                         if (has("ie")) {
-                            this.graphContentPane.domNode.innerHTML = '<object '
-                                                    + 'type="application/x-hpccsystemsgraphviewcontrol" '
+                            this.graphContentPane.domNode.innerHTML = '<object type="application/x-hpccsystemsgraphviewcontrol" '
                                                     + 'id="' + pluginID + '" '
                                                     + 'name="' + pluginID + '" '
                                                     + 'width="100%" '

esp/files/scripts/GraphsWidget.js

@@ -15,6 +15,7 @@
 ############################################################################## */
 define([
     "dojo/_base/declare",
+    "dojo/_base/array",
     "dojo/on",
 
     "dijit/form/Button",
@@ -29,12 +30,13 @@ define([
     "hpcc/GridDetailsWidget",
     "hpcc/ESPWorkunit",
     "hpcc/GraphPageWidget",
+    "hpcc/TimingTreeMapWidget",
     "hpcc/ESPUtil"
 
-], function (declare, on,
+], function (declare, arrayUtil, on,
                 Button,
                 OnDemandGrid, Keyboard, Selection, selector, ColumnResizer, DijitRegistry,
-                GridDetailsWidget, ESPWorkunit, GraphPageWidget, ESPUtil) {
+                GridDetailsWidget, ESPWorkunit, GraphPageWidget, TimingTreeMapWidget, ESPUtil) {
     return declare("GraphsWidget", [GridDetailsWidget], {
 
         gridTitle: "Graphs",
@@ -42,6 +44,18 @@ define([
 
         wu: null,
 
+        postCreate: function (args) {
+            this.inherited(arguments);
+            this.timingTreeMap = new TimingTreeMapWidget({
+                id: this.id + "TimingTreeMap",
+                region: "right",
+                splitter: true,
+                style: "width: 33%",
+                minSize: 120
+            });
+            this.timingTreeMap.placeAt(this.gridTab, "last");
+        },
+
         init: function (params) {
             if (this.inherited(arguments))
                 return;
@@ -56,6 +70,15 @@ define([
                     }
                 });
             }
+            this.timingTreeMap.init(params);
+            this.timingTreeMap.onClick = function (value) {
+                context.syncSelectionFrom(context.timingTreeMap);
+            }
+            this.timingTreeMap.onDblClick = function (item) {
+                context._onOpen(item, {
+                    SubGraphId: item.SubGraphId
+                });
+            }
             this._refreshActionState();
         },
 
@@ -93,6 +116,10 @@ define([
             }, domID);
 
             var context = this;
+            retVal.on(".dgrid-row:click", function (evt) {
+                context.syncSelectionFrom(evt);
+            });
+
             on(document, "." + this.id + "GraphClick:click", function (evt) {
                 if (context._onRowDblClick) {
                     var row = retVal.row(evt).data;
@@ -103,10 +130,6 @@ define([
         },
 
         createDetail: function (id, row, params) {
-            var safeMode = false;
-            if (params && params.safeMode) {
-                var safeMode = true;
-            }
             return new GraphPageWidget({
                 id: id,
                 title: row.Name,
@@ -116,7 +139,8 @@ define([
                     params: {
                         Wuid: this.wu.Wuid,
                         GraphName: row.Name,
-                        SafeMode: safeMode
+                        SubGraphId: (params && params.SubGraphId) ? params.SubGraphId : null,
+                        SafeMode: (params && params.safeMode) ? true : false
                     }
                 }
             });
@@ -139,6 +163,41 @@ define([
             this.inherited(arguments);
 
             this.openSafeMode.set("disabled", !selection.length);
+        },
+
+        syncSelectionFrom: function (sourceControl) {
+            var graphItems = [];
+            var timingItems = [];
+
+            //  Get Selected Items  ---
+            if (sourceControl == this.grid) {
+                arrayUtil.forEach(sourceControl.getSelected(), function (item, idx) {
+                    timingItems.push(item);
+                });
+            }
+            if (sourceControl == this.timingTreeMap) {
+                arrayUtil.forEach(sourceControl.getSelected(), function (item, idx) {
+                    if (item.children) {
+                        if (item.children.length) {
+                            graphItems.push({
+                                Name: item.children[0].GraphName
+                            })
+                        }
+                    } else {
+                        graphItems.push({
+                            Name: item.GraphName
+                        })
+                    }
+                });
+            }
+
+            //  Set Selected Items  ---
+            if (sourceControl != this.grid) {
+                this.grid.setSelected(graphItems);
+            }
+            if (sourceControl != this.timingTreeMap) {
+                this.timingTreeMap.setSelectedGraphs(timingItems);
+            }
         }
     });
 });

esp/files/scripts/GridDetailsWidget.js

@@ -15,6 +15,7 @@
 ############################################################################## */
 define([
     "dojo/_base/declare",
+    "dojo/_base/lang",
     "dojo/store/Memory",
     "dojo/store/Observable",
 
@@ -31,7 +32,7 @@ define([
     "dijit/ToolbarSeparator",
     "dijit/layout/ContentPane"
 
-], function (declare, Memory, Observable,
+], function (declare, lang, Memory, Observable,
                 registry,
                 _TabContainerWidget,
                 template) {
@@ -105,11 +106,15 @@ define([
 
         initTab: function () {
             var currSel = this.getSelectedChild();
-            if (currSel && !currSel.initalized) {
-                if (currSel.hpcc) {
-                    currSel.init(currSel.hpcc.params);
+            if (currSel) {
+                if (!currSel.initalized) {
+                    if (currSel.hpcc) {
+                        currSel.init(currSel.hpcc.params);
+                    }
+                    currSel.initalized = true;
+                } else if (currSel.refresh) {
+                    currSel.refresh(currSel.hpcc.refreshParams);
                 }
-                currSel.initalized = true;
             }
         },
 
@@ -123,6 +128,10 @@ define([
             if (!retVal) {
                 retVal = this.createDetail(id, row, params);
                 this.addChild(retVal);
+            } else {
+                lang.mixin(retVal.hpcc, {
+                    refreshParams: params
+                });
             }
             return retVal;
         },

esp/files/scripts/TimingGridWidget.js

@@ -70,7 +70,7 @@ define([
                     columns: {
                         id: { label: "##", width: 45 },
                         Name: { label: "Component" },
-                        Seconds: { label: "Time (Seconds)", width: 54 }
+                        Seconds: { label: "Time (Seconds)", width: 124 }
                     },
                     store: this.timingStore
                 }, this.id + "TimingGrid");

esp/files/scripts/TimingPageWidget.js

@@ -22,20 +22,18 @@ define([
 
     "hpcc/_Widget",
     "hpcc/TimingGridWidget",
-    "hpcc/TimingTreeMapWidget",
 
     "dojo/text!../templates/TimingPageWidget.html"
 ],
     function (declare,
             registry, BorderContainer,
-            _Widget, TimingGridWidget, TimingTreeMapWidget,
+            _Widget, TimingGridWidget,
             template) {
         return declare("TimingPageWidget", [_Widget], {
             templateString: template,
             baseClass: "TimingPageWidget",
             borderContainer: null,
             timingGrid: null,
-            timingTreeMap: null,
 
             buildRendering: function (args) {
                 this.inherited(arguments);
@@ -45,7 +43,6 @@ define([
                 this.inherited(arguments);
                 this.borderContainer = registry.byId(this.id + "BorderContainer");
                 this.timingGrid = registry.byId(this.id + "Grid");
-                this.timingTreeMap = registry.byId(this.id + "TreeMap");
             },
 
             startup: function (args) {
@@ -68,31 +65,6 @@ define([
 
                 var context = this;
                 this.timingGrid.init(params);
-                this.timingGrid.onClick = function (items) {
-                    context.syncSelectionFrom(context.timingGrid);
-                };
-
-                this.timingTreeMap.init(params);
-                this.timingTreeMap.onClick = function (value) {
-                    context.syncSelectionFrom(context.timingTreeMap);
-                }
-            },
-
-            syncSelectionFrom: function (sourceControl) {
-                var items = [];
-
-                //  Get Selected Items  ---
-                if (sourceControl == this.timingGrid || sourceControl == this.timingTreeMap) {
-                    items = sourceControl.getSelected();
-                }
-
-                //  Set Selected Items  ---
-                if (sourceControl != this.timingGrid) {
-                    this.timingGrid.setSelected(items);
-                }
-                if (sourceControl != this.timingTreeMap) {
-                    this.timingTreeMap.setSelected(items);
-                }
             }
         });
     });

esp/files/scripts/TimingTreeMapWidget.js

@@ -17,6 +17,7 @@
 define([
     "dojo/_base/declare",
     "dojo/_base/lang",
+    "dojo/_base/array",
     "dojo/store/Memory",
 
     "dijit/registry",
@@ -28,7 +29,7 @@ define([
 
     "dojo/text!../templates/TimingTreeMapWidget.html"
 ],
-    function (declare, lang, Memory,
+    function (declare, lang, arrayUtil, Memory,
             registry, 
             TreeMap,
             _Widget, ESPWorkunit,
@@ -132,6 +133,20 @@ define([
                 }
             },
 
+            setSelectedGraphs: function (selItems) {
+                if (this.store) {
+                    var selectedItems = [];
+                    for (var i = 0; i < selItems.length; ++i) {
+                        arrayUtil.forEach(this.store.data, function (item, idx) {
+                            if (item.GraphName == selItems[i].Name) {
+                                selectedItems.push(item);
+                            }
+                        });
+                    }
+                    this.treeMap.set("selectedItems", selectedItems);
+                }
+            },
+
             loadTimers: function (timers, query) {
                 this.largestValue = 0;
                 var timerData = [];

esp/files/templates/TimingPageWidget.html

@@ -2,7 +2,5 @@
     <div id="${id}BorderContainer" class="${baseClass}BorderContainer" style="width: 100%; height: 100%" data-dojo-type="dijit.layout.BorderContainer">
         <div id="${id}Grid" data-dojo-props="region: 'center'" data-dojo-type="TimingGridWidget">
         </div>
-        <div id="${id}TreeMap" style="width: 33%;overflow:auto;" data-dojo-props="region: 'right', splitter:true, minSize: 120" data-dojo-type="TimingTreeMapWidget">
-        </div>
     </div>
 </div>