Merge pull request #4403 from GordonSmith/HPCC-9356

HPCC-9356 Add depth and distance fields to Graph Page

Reviewed-By: Richard Chapman <rchapman@hpccsystems.com>

esp/files/scripts/GraphPageWidget.js

@@ -57,6 +57,7 @@ define([
     "dijit/Dialog",
     "dijit/form/TextBox",
     "dijit/form/SimpleTextarea",
+    "dijit/form/NumberSpinner",
     "dijit/form/DropDownButton"
 ], function (declare, lang, arrayUtil, dom, domConstruct, on, html, Memory, Observable,
             _LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin, BorderContainer, TabContainer, ContentPane, registry, Dialog,
@@ -86,6 +87,9 @@ define([
         findText: "",
         found: [],
         foundIndex: 0,
+        overviewDepth: null,
+        localDepth: null,
+        localDistance: null,
         initalized: false,
 
         buildRendering: function (args) {
@@ -97,6 +101,10 @@ define([
             this.borderContainer = registry.byId(this.id + "BorderContainer");
             this.rightBorderContainer = registry.byId(this.id + "RightBorderContainer");
             this.findField = registry.byId(this.id + "FindField");
+            this.overviewDepth = registry.byId(this.id + "OverviewDepth");
+            this.localDepth = registry.byId(this.id + "LocalDepth");
+            this.localDistance = registry.byId(this.id + "LocalDistance");
+
             this._initGraphControls();
             this._initTimings();
             this._initDialogs();
@@ -326,6 +334,18 @@ define([
             this.xgmmlDialog.show();
         },
 
+        _onOverviewDepthChange: function (value) {
+            this.refreshOverview();
+        },
+
+        _onLocalDepthChange: function (value) {
+            this.refreshLocal(this.main.getSelection());
+        },
+
+        _onLocalDistanceChange: function (value) {
+            this.refreshLocal(this.main.getSelection());
+        },
+
         init: function (params) {
             if (this.initalized) {
                 return;
@@ -364,7 +384,7 @@ define([
         loadGraphFromSource: function(xgmml, svg) {
             this.main.setMessage("Loading Data...");
             this.main.loadXGMML(xgmml);
-            this.overview.loadXGMML(this.main.getLocalisedXGMML([0]));
+            this.refreshOverview();
             this.loadSubgraphs();
             this.loadVertices();
             this.loadEdges();
@@ -525,8 +545,7 @@ define([
             }
 
             if (sourceControl != this.local) {
-                var xgmml = this.main.getLocalisedXGMML(mainItems, 2);
-                this.local.loadXGMML(xgmml);
+                this.refreshLocal(mainItems);
                 this.local.setSelectedAsGlobalID(selectedGlobalIDs);
             }
 
@@ -541,6 +560,16 @@ define([
             this.main.clear();
         },
 
+        refreshOverview: function() {
+            var xgmml = this.main.getLocalisedXGMML([0], this.overviewDepth.get("value"));
+            this.overview.loadXGMML(xgmml);
+        },
+
+        refreshLocal: function (selection) {
+            var xgmml = this.main.getLocalisedXGMML(selection, this.localDepth.get("value"), this.localDistance.get("value"));
+            this.local.loadXGMML(xgmml);
+        },
+
         displayGraphs: function (graphs) {
             for (var i = 0; i < graphs.length; ++i) {
                 this.wu.fetchGraphXgmml(i, function (xgmml) {

esp/files/scripts/GraphWidget.js

@@ -326,9 +326,9 @@ require([
                 return null;
             },
 
-            getLocalisedXGMML: function (items) {
+            getLocalisedXGMML: function (items, depth, distance) {
                 if (this._plugin) {
-                    return this._plugin.getLocalisedXGMML(items);
+                    return this._plugin.getLocalisedXGMML(items, depth, distance);
                 }
                 return null;
             },
@@ -375,6 +375,13 @@ require([
                 return null;
             },
 
+            getSelection: function () {
+                if (this._plugin) {
+                    return this._plugin.getSelection();
+                }
+                return [];
+            },
+
             getSelectionAsGlobalID: function () {
                 if (this._plugin) {
                     return this._plugin.getSelectionAsGlobalID();

esp/files/templates/GraphPageWidget.html

@@ -22,6 +22,8 @@
         <div id="${id}RightBorderContainer" style="width: 33%; padding: 0px; overflow: hidden" data-dojo-props="region: 'right', splitter:true, minSize: 120" data-dojo-type="dijit.layout.BorderContainer">
             <div id="${id}OverviewTabContainer" data-dojo-props="region: 'center', tabPosition: 'bottom'" data-dojo-type="dijit.layout.TabContainer">
                 <div id="${id}MiniGraphWidget" title="Overview" data-dojo-type="GraphWidget">
+                    <label for="${id}OverviewDepth">Depth:</label>
+                    <input id="${id}OverviewDepth" style="width: 60px" value="1" data-dojo-attach-event="onChange:_onOverviewDepthChange" data-dojo-props="placeHolder:'Depth', intermediateChanges:true, constraints:{min:0,max:1000}" data-dojo-type="dijit.form.NumberSpinner" />
                 </div>
                 <div id="${id}TimingsGrid" title="Timings" data-dojo-type="TimingGridWidget">
                 </div>
@@ -42,6 +44,11 @@
             </div>
             <div id="${id}LocalTabContainer" style="height: 66%" data-dojo-props="region: 'bottom', splitter:true, minSize: 120, tabPosition: 'bottom'" data-dojo-type="dijit.layout.TabContainer">
                 <div id="${id}LocalGraphWidget" title="Local" data-dojo-type="GraphWidget">
+                    <label for="${id}LocalDepth">Depth:</label>
+                    <input id="${id}LocalDepth" style="width: 60px" value="2" data-dojo-attach-event="onChange:_onLocalDepthChange" data-dojo-props="placeHolder:'Depth', intermediateChanges:true, constraints:{min:0,max:1000}" data-dojo-type="dijit.form.NumberSpinner" />
+                    <label for="${id}LocalDistance">Distance:</label>
+                    <input id="${id}LocalDistance" style="width: 60px" value="3" data-dojo-attach-event="onChange:_onLocalDistanceChange" data-dojo-props="placeHolder:'Depth', intermediateChanges:true, constraints:{min:0,max:1000}" data-dojo-type="dijit.form.NumberSpinner" />
+                    <span data-dojo-type="dijit.ToolbarSeparator"></span>
                     <div id="${id}LocalSync" data-dojo-attach-event="onClick:_onLocalSync" data-dojo-type="dijit.form.Button">Recalculate</div>
                 </div>
                 <div id="${id}Properties" title="Properties" data-dojo-type="dijit.layout.ContentPane">