HPCC-8604 Add JavaScript Layout

Added experimental version of graphviz layout in JavaScript (via emscripten).

Fixes HPCC-8604
Change instances of <br> to <br/>

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

esp/files/scripts/DFUSearchWidget.js

@@ -180,11 +180,11 @@ define([
             for (var key in obj) {
                 text += "<tr><td>" + key + ":</td>";
                 if (typeof obj[key] == "object") {
-                    text += "[<br>";
+                    text += "[<br/>";
                     for (var i = 0; i < obj[key].length; ++i) {
                         text += this.objectToText(obj[key][i]);
                     }
-                    text += "<br>]<br>";
+                    text += "<br/>]<br/>";
                 } else {
                     text += "<td>" + obj[key] + "</td></tr>";
 

esp/files/scripts/DFUWUDetailsWidget.js

@@ -169,11 +169,11 @@ define([
             for (var key in obj) {
                 text += "<tr><td>" + key + ":</td>";
                 if (typeof obj[key] == "object") {
-                    text += "[<br>";
+                    text += "[<br/>";
                     for (var i = 0; i < obj[key].length; ++i) {
                         text += this.objectToText(obj[key][i]);
                     }
-                    text += "<br>]<br>";
+                    text += "<br/>]<br/>";
                 } else {
                     text += "<td>" + obj[key] + "</td></tr>";
 

esp/files/scripts/GraphPageWidget.js

@@ -35,6 +35,7 @@ define([
     "dijit/Dialog",
 
     "dojox/grid/DataGrid",
+    "dojox/html/entities",
 
     "hpcc/GraphWidget",
     "hpcc/ESPWorkunit",
@@ -43,10 +44,14 @@ define([
 
     "dojo/text!../templates/GraphPageWidget.html",
 
+    "dijit/PopupMenuItem",
+    "dijit/Menu",
+    "dijit/MenuItem",
     "dijit/form/TextBox"
 ], function (declare, lang, sniff, array, dom, domConstruct, on, has, Memory, ObjectStore,
             _LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin, BorderContainer, TabContainer, ContentPane, registry, Dialog,
-            DataGrid, GraphWidget, ESPWorkunit, TimingGridWidget, TimingTreeMapWidget,
+            DataGrid, entities,
+            GraphWidget, ESPWorkunit, TimingGridWidget, TimingTreeMapWidget,
             template) {
     return declare("GraphPageWidget", [_LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin], {
         templateString: template,
@@ -90,6 +95,8 @@ define([
             this.main.watchSplitter(splitter);
             this.overview.watchSplitter(splitter);
             this.local.watchSplitter(splitter);
+
+            this.main.watchSelect(registry.byId(this.id + "AdvancedMenu"));
         },
 
         resize: function (args) {
@@ -248,13 +255,8 @@ define([
             this._doFind(true);
         },
 
-        _onAbout: function () {
-            myDialog = new Dialog({
-                title: "About HPCC Systems Graph Control",
-                content: "Version:  " + this.main.getVersion() + "<br>"
-                + this.main.getResourceLinks(),
-                style: "width: 320px"
-            });
+        _showDialog: function(params) {
+            myDialog = new Dialog(params);
             if (has("chrome")) {
                 this.main.hide();
                 this.overview.hide();
@@ -270,6 +272,38 @@ define([
             myDialog.show();
         },
 
+        _onAbout: function () {
+            this._showDialog({
+                title: "About HPCC Systems Graph Control",
+                content: "Version:  " + this.main.getVersion() + "<br/>" + this.main.getResourceLinks(),
+                style: "width: 320px"
+            });
+        },
+
+        _onGetSVG: function () {
+            this._showDialog({
+                title: "SVG Source",
+                content: entities.encode(this.main.getSVG())
+            });
+        },
+
+        _onRenderSVG: function () {
+            var context = this
+            this.main.localLayout(function (svg) {
+                context._showDialog({
+                    title: "Rendered SVG",
+                    content: svg
+                });
+            });
+        },
+
+        _onGetXGMML: function () {
+            this._showDialog({
+                title: "XGMML",
+                content: entities.encode(this.main.getXGMML())
+            });
+        },
+
         init: function (params) {
             if (this.initalized) {
                 return;

esp/files/scripts/GraphWidget.js

@@ -152,6 +152,24 @@ require([
                 return this.plugin.version;
             },
 
+            getSVG: function () {
+                return this.plugin.getSVG();
+            },
+
+            getXGMML: function () {
+                return this.xgmml;
+            },
+
+            localLayout: function(callback) {
+                var context = this;
+                require(
+                  ["hpcc/viz"],
+                  function (viz) {
+                      callback(Viz(context.dot, "svg"));
+                  }
+                );
+            },
+
             displayProperties: function (item, place) {
                 var props = this.plugin.getProperties(item);
                 if (props.id) {
@@ -286,8 +304,8 @@ require([
             },
 
             getResourceLinks: function () {
-                return "<a href=\"http://hpccsystems.com/download/free-community-edition/graph-control\" target=\"_blank\">Binary Installs</a><br>" +
-                "<a href=\"https://github.com/hpcc-systems/GraphControl\" target=\"_blank\">Source Code</a><br><br>" + 
+                return "<a href=\"http://hpccsystems.com/download/free-community-edition/graph-control\" target=\"_blank\">Binary Installs</a><br/>" +
+                "<a href=\"https://github.com/hpcc-systems/GraphControl\" target=\"_blank\">Source Code</a><br/><br/>" +
                 "<a href=\"http://hpccsystems.com\" target=\"_blank\">HPCC Systems</a>"
             },
 

esp/files/scripts/WUDetailsWidget.js

@@ -259,11 +259,11 @@ define([
             for (var key in obj) {
                 text += "<tr><td>" + key + ":</td>";
                 if (typeof obj[key] == "object") {
-                    text += "[<br>";
+                    text += "[<br/>";
                     for (var i = 0; i < obj[key].length; ++i) {
                         text += this.objectToText(obj[key][i]);
                     }
-                    text += "<br>]<br>";
+                    text += "<br/>]<br/>";
                 } else {
                     text += "<td>" + obj[key] + "</td></tr>";
 

esp/files/templates/GraphPageWidget.html

@@ -8,7 +8,16 @@
             <span data-dojo-type="dijit.ToolbarSeparator"></span>
             <div id="${id}Layout" data-dojo-attach-event="onClick:_onLayout" data-dojo-type="dijit.form.Button">Layout</div>
             <span data-dojo-type="dijit.ToolbarSeparator"></span>
-            <div id="${id}About" data-dojo-attach-event="onClick:_onAbout" data-dojo-type="dijit.form.Button">About</div>
+            <div id="${id}AdvancedMenu" data-dojo-type="dijit.form.DropDownButton">
+                <span>Advanced</span>
+                <div data-dojo-type="dijit/Menu" >
+                    <div id="${id}GetSVG" data-dojo-attach-event="onClick:_onGetSVG" data-dojo-type="dijit.MenuItem">Show SVG</div>
+                    <div id="${id}RenderSVG" data-dojo-attach-event="onClick:_onRenderSVG" data-dojo-type="dijit.MenuItem">Render SVG</div>
+                    <div id="${id}GetXGMML" data-dojo-attach-event="onClick:_onGetXGMML" data-dojo-type="dijit.MenuItem">Show XGMML</div>
+                    <span data-dojo-type="dijit.MenuSeparator"></span>
+                    <div id="${id}About" data-dojo-attach-event="onClick:_onAbout" data-dojo-type="dijit.MenuItem">About Graph Control</div>
+                </div>
+            </div>
         </div>
         <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">