add demo of basica violations; work on geneontology/minerva#212

Author: kltm

css/NoctuaEditor.css

@@ -143,7 +143,7 @@ a:active {
 }
 
 .menu, #render, #explanation {
-    background-color:#fff;        
+    background-color:#fff;
 }
 
 .menu {
@@ -173,7 +173,7 @@ a:active {
     color:orange !important;
 }
 
-.window, .demo-window, .label {    
+.window, .demo-window, .label {
     text-align: center;
     z-index: 24;
     cursor: grab;
@@ -385,6 +385,43 @@ path, ._jsPlumb_endpoint { cursor: pointer; }
     box-shadow: 0px 0px 6px black;
 }
 
+/* open violation button */
+.open-violation-dialog {
+    position: absolute;
+    bottom: 37%;
+    top: 5px;
+    left: 25px;
+    width: 1em;
+    height: 1em;
+    background-color: #ee0000;
+    cursor: zoom-in;
+    box-shadow: 0px 0px 2px black;
+    -webkit-transition:-webkit-box-shadow 0.25s ease-in;
+    -moz-transition:-moz-box-shadow 0.25s ease-in;
+    transition:box-shadow 0.25s ease-in;
+    padding: 0 0; /* override bootstrap 3 padding for compaction */
+}
+.open-violation-dialog:hover {
+    box-shadow: 0px 0px 6px black;
+}
+
+/* open violation button, edge version (different mechanisms in jsplumb) */
+.open-violation-dialog-edge {
+    width: 1em;
+    height: 1em;
+    background-color: #ee0000;
+    cursor: zoom-in;
+    box-shadow: 0px 0px 2px black;
+    -webkit-transition:-webkit-box-shadow 0.25s ease-in;
+    -moz-transition:-moz-box-shadow 0.25s ease-in;
+    transition:box-shadow 0.25s ease-in;
+    padding: 0 0; /* override bootstrap 3 padding for compaction */
+    margin-bottom: 2px; /* looks a little better in FF */
+}
+.open-violation-dialog-edge:hover {
+    box-shadow: 0px 0px 6px black;
+}
+
 .mme-type-table {
     margin-bottom: 5px;
 }
@@ -436,7 +473,7 @@ path, ._jsPlumb_endpoint { cursor: pointer; }
     -moz-border-radius: 10px/10px;
     -webkit-border-radius: 10px 10px;
     border-radius: 10px/10px;;
-    border:solid 3px #FF0000; 
+    border:solid 3px #FF0000;
     width:10px;
     height:10px;
     opacity: 0.5;
@@ -504,7 +541,7 @@ path, ._jsPlumb_endpoint { cursor: pointer; }
 .aLabel {
         background-color: white;
         opacity: 0.8;
-        padding: 0.3em;                                
+        padding: 0.3em;
         border-radius: 0.5em;
         border: 1px solid #346789;
         cursor: pointer;
@@ -556,8 +593,8 @@ path, ._jsPlumb_endpoint { cursor: pointer; }
 }
 
 /*
- * BBOP MME 
- */ 
+ * BBOP MME
+ */
 .bbop-mme-more-results-ul {
     border-bottom: 3px dotted;
 }

js/NoctuaEditor.js

@@ -72,6 +72,9 @@ var notify_github = require('toastr'); // notifications
 // And the layouts!
 var layout_engine = require('bbop-layout');
 
+// Some render support.
+var pretty = require('js-object-pretty-print').pretty;
+
 // Aliases.
 var each = us.each;
 var noctua_graph = model.graph;
@@ -706,6 +709,42 @@ var MMEnvInit = function(model_json, in_relations, in_token){
     	    });
     }
 
+    function _attach_node_click_violation_view(sel){
+
+    	// Add this event to whatever we got called in.
+    	jQuery(sel).unbind('click');
+    	jQuery(sel).click(
+    	    function(evnt){
+    		evnt.stopPropagation();
+
+    		// Resolve the event into the edit core node.
+		var target_elt = jQuery(evnt.target);
+		var parent_elt = target_elt.parent();
+		var parent_id = parent_elt.attr('id');
+		var enode = ecore.get_node_by_elt_id(parent_id);
+		if( ! enode ){
+		    alert('Could not find related violation element.');
+		}else{
+
+		    var violation_renderings = [];
+		    var violations = ecore.get_violations_by_id(enode.id());
+		    each(violations, function(v){
+			if( v.explanations().length === 0 ){
+			    violation_renderings.push(
+				'[No explanation available.]');
+			}else{
+			    violation_renderings.push(
+				pretty(v.explanations(), '3', 'HTML'));
+			}
+		    });
+		    var vvm = new widgetry.contained_modal(
+			null, 'Violations',
+			violation_renderings.join(' <hr /> '));
+		    vvm.show();
+		}
+    	    });
+    }
+
     // Delete all UI connections associated with node. This also
     // triggers the "connectionDetached" event, so the edges are being
     // removed from the model at the same time.
@@ -1061,9 +1100,12 @@ var MMEnvInit = function(model_json, in_relations, in_token){
 	    // Make nodes able to use edit dialog.
 	    _attach_node_click_edit('.open-dialog');
 
-	    // // Make nodes able to clone themselves.
+	    // Make nodes able to clone themselves.
 	    _attach_node_click_annotation_edit('.open-annotation-dialog');
 
+	    // Make nodes able to clone themselves.
+	    _attach_node_click_violation_view('.open-violation-dialog');
+
     	    // Make normal nodes availables as edge targets.
 	    _make_selector_target('.demo-window');
 
@@ -1094,6 +1136,7 @@ var MMEnvInit = function(model_json, in_relations, in_token){
 	    //
 	    each(['.open-dialog',
 		  '.open-annotation-dialog',
+		  '.open-violations-dialog',
 		  '.open-annotation-dialog-edge'], function(cls){
 		      jQuery(cls).addClass('hidden');
 		  });
@@ -1108,6 +1151,7 @@ var MMEnvInit = function(model_json, in_relations, in_token){
 	    //
 	    each(['.open-dialog',
 		  '.open-annotation-dialog',
+		  '.open-violations-dialog',
 		  '.open-annotation-dialog-edge'], function(cls){
 		      jQuery(cls).removeClass('hidden');
 		  });

js/lib/noctua-widgetry/widgetry.js

@@ -306,8 +306,10 @@ function enode_types_to_ordered_stack(enode_types, aid){
  *
  * This whole bit will change a lot with new evidence coming down the
  * pipe.
+ *
+ * ecore is used to detect graph violations.
  */
-function node_stack_object(enode, aid){
+function node_stack_object(enode, aid, ecore){
 
     var hook_list = [];
 
@@ -503,7 +505,7 @@ function add_enode(annotation_config, ecore, manager, enode, aid, graph_div, lef
 			       'class': 'demo-window',
 			       'style': style_str});
 
-    var enode_stack_table = new node_stack_object(enode, aid);
+    var enode_stack_table = new node_stack_object(enode, aid, ecore);
     w.add_to(enode_stack_table.to_string());
 
     // Box to drag new connections from.
@@ -523,6 +525,15 @@ function add_enode(annotation_config, ecore, manager, enode, aid, graph_div, lef
 				     'title': 'Open annotation dialog'});
     w.add_to(openann);
 
+    // Box to open violation dialog, if exist.
+    if( ecore.get_violations_by_id(enode.id()).length > 0 ){
+	var openvio = new bbop.html.tag('button',
+					{'class':
+					 'open-violation-dialog btn btn-default',
+					 'title': 'Open violation dialog'});
+	w.add_to(openvio);
+    }
+
     // Add to display.
     jQuery(graph_div).append(w.to_string());
 
@@ -549,7 +560,7 @@ function update_enode(ecore, enode, aid){
     var uelt = ecore.get_node_elt_id(enode.id());
     jQuery('#' + uelt).empty();
 
-    var enode_stack_table = new node_stack_object(enode, aid);
+    var enode_stack_table = new node_stack_object(enode, aid, ecore);
     jQuery('#' + uelt).append(enode_stack_table.to_string());
 
     // Box to drag new connections from.
@@ -568,6 +579,15 @@ function update_enode(ecore, enode, aid){
 				     'open-annotation-dialog btn btn-default',
 				     'title': 'Open annotation dialog'});
     jQuery('#' + uelt).append(openann.to_string());
+
+    // Box to open violation dialog, if exist.
+    if( ecore.get_violations_by_id(enode.id()).length > 0 ){
+	var openvio = new bbop.html.tag('button',
+					{'class':
+					 'open-violation-dialog btn btn-default',
+					 'title': 'Open violation dialog'});
+	jQuery('#' + uelt).append(openvio.to_string());
+    }
 }
 
 /**

package.json

@@ -43,12 +43,12 @@
     "bbop-client-barista": "0.0.7",
     "bbop-core": "0.0.5",
     "bbop-graph": "0.0.19",
-    "bbop-graph-noctua": "0.0.32",
+    "bbop-graph-noctua": "0.0.33",
     "bbop-layout": "0.0.4",
     "bbop-manager-golr": "0.0.11",
     "bbop-manager-minerva": "0.0.15",
     "bbop-manager-sparql": "0.0.5",
-    "bbop-response-barista": "0.0.10",
+    "bbop-response-barista": "0.0.11",
     "bbop-response-golr": "0.0.6",
     "bbop-rest-manager": "0.0.16",
     "bbop-rest-response": "0.0.4",
@@ -71,6 +71,7 @@
     "gulp-shell": "0.5.2",
     "http-proxy": "1.14.0",
     "jquery": "^2.2.4",
+    "js-object-pretty-print": "0.3.0",
     "markdown": "0.5.0",
     "mime": "1.3.4",
     "minerva-requests": "0.0.17",