Feature: ECL Playground Graph Selection

Selecting a node in the graph will highlight its corresponding ECL
(when possible).

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

esp/files/ECLPlayground.js

@@ -76,8 +76,20 @@ define([
 
 					onMouseDoubleClick : function(item) {
 						graphControl.obj.centerOnItem(item, true);
+					},
+					
+					onSelectionChanged: function(items) {
+						editorControl.clearHighlightLines();
+						for (var i = 0; i < items.length; ++i) {
+							var props = graphControl.obj.getProperties(items[i]);
+							if (props.definition) {
+								var startPos = props.definition.indexOf("(");
+								var endPos = props.definition.lastIndexOf(")");
+								var pos = props.definition.slice(startPos + 1, endPos).split(",");
+								editorControl.highlightLine(parseInt(pos[0], 10));
+							}
+						}
 					}
-
 				}, dom.byId("graphs"));
 			},
 
@@ -92,6 +104,7 @@ define([
 
 			resetPage = function() {
 				editorControl.clearErrors();
+				editorControl.clearHighlightLines();
 				graphControl.clear();
 				resultsControl.clear();
 			},
@@ -123,7 +136,7 @@ define([
 						wu.getGraphs();
 					},
 					onGetGraph : function(idx) {
-						graphControl.loadXGMML(wu.graphs[idx].xgmml);
+						graphControl.loadXGMML(wu.graphs[idx].xgmml, true);
 					},
 					onGetResult : function(idx) {
 						resultsControl.addDatasetTab(wu.results[idx].dataset);

esp/files/css/ecl.css

@@ -25,3 +25,5 @@
 .cm-s-default span.cm-meta {color: #004080;}
 .ErrorLine {background: #cc0000 !important;}
 .WarningLine {background: #ffff99 !important;}
+.highlightline { background: #e8f2ff !important; }
+

esp/files/scripts/EclEditorControl.js

@@ -21,11 +21,12 @@ define([
 		domId : "",
 		editor : null,
 		markers : [],
+		highlightLines : [],
 
 		// The constructor    
 		constructor : function(args) {
 			declare.safeMixin(this, args);
-			var _editor = this.editor = CodeMirror.fromTextArea(document.getElementById(this.domId), {
+			this.editor = CodeMirror.fromTextArea(document.getElementById(this.domId), {
 				tabMode : "indent",
 				matchBrackets : true,
 				gutter : true,
@@ -34,14 +35,14 @@ define([
 		},
 
 		clearErrors : function(errWarnings) {
-			for ( var i = 0; i < this.markers.length; ++i) {
+			for (var i = 0; i < this.markers.length; ++i) {
 				this.editor.clearMarker(this.markers[i]);
 			}
 			this.markers = [];
 		},
 
 		setErrors : function(errWarnings) {
-			for ( var i = 0; i < errWarnings.length; ++i) {
+			for (var i = 0; i < errWarnings.length; ++i) {
 				this.markers.push(this.editor.setMarker(parseInt(
 						errWarnings[i].LineNo, 10) - 1, "",
 						errWarnings[i].Severity + "Line"));
@@ -53,6 +54,16 @@ define([
 			this.editor.focus();
 		},
 
+		clearHighlightLines : function() {
+			for (var i = 0; i < this.highlightLines.length; ++i) {
+				this.editor.setLineClass(this.highlightLines[i], null, null);
+			}
+		},
+		
+		highlightLine : function(line) {
+			this.highlightLines.push(this.editor.setLineClass(line - 1, "highlightline"));
+		},
+
 		setText : function(ecl) {
 			this.editor.setValue(ecl);
 		},

esp/files/scripts/GraphControl.js

@@ -107,11 +107,14 @@ define([
 			}
 		},
 		
-		loadXGMML: function(xgmml) {
+		loadXGMML: function(xgmml, merge) {
 			if (this.obj) {
 				this.registerEvents();
 				this.obj.setMessage("Loading Data...");
-				this.obj.loadXGMML(xgmml);
+				if (merge)
+					this.obj.mergeXGMML(xgmml);
+				else
+					this.obj.loadXGMML(xgmml);
 				this.obj.setMessage("Performing Layout...");
 				this.obj.startLayout("dot");
 			}