omf_web 1.0.0 → 1.2.0

data/share/htdocs/graph/js/network2.js

@@ -1,46 +1,45 @@
-L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], function () {
 
+define(["graph/abstract_chart"], function (abstract_chart) {
 
-  
-  OML.network2 = OML.abstract_chart.extend({
+  var network2 = abstract_chart.extend({
     decl_properties: {
-      nodes:  [['key', 'key', {property: 'id'}], 
-               ['radius', 'int', 30], 
-               ['fill_color', 'color', 'blue'], 
-               ['stroke_width', 'int', 1], 
-               ['stroke_color', 'color', 'black'], 
+      nodes:  [['key', 'key', {property: 'id'}],
+               ['radius', 'int', 30],
+               ['fill_color', 'color', 'blue'],
+               ['stroke_width', 'int', 1],
+               ['stroke_color', 'color', 'black'],
                ['x', 'int', 10],
                ['y', 'int', 10],
-               ['label_text', 'key', {property: 'name'}], 
-               ['label_font', 'string', null], 
-               ['label_size', 'int', 16],                
-               ['label_color', 'color', 'white'], 
-               
+               ['label_text', 'key', {property: 'name'}],
+               ['label_font', 'string', null],
+               ['label_size', 'int', 16],
+               ['label_color', 'color', 'white'],
+
               ],
-      links:  [['key', 'key', {property: 'id'}], 
-               ['stroke_width', 'int', 2], 
+      links:  [['key', 'key', {property: 'id'}],
+               ['stroke_width', 'int', 2],
                ['stroke_color', 'color', 'black'],
                ['stroke_fill', 'color', 'blue'],
-               ['from', 'index', {key: 'from_id', join_stream: 'nodes', join_key: 'id'}],               
+               ['from', 'index', {key: 'from_id', join_stream: 'nodes', join_key: 'id'}],
                ['to', 'index', {key: 'to_id', join_stream: 'nodes'}]  // join_key: 'id' ... default
               ]
     },
-    
+
     defaults: function() {
       return this.deep_defaults({
         interaction_mode: 'none',   // none, hover, click
-      }, OML.network2.__super__.defaults.call(this));      
-    },    
-    
+      }, network2.__super__.defaults.call(this));
+    },
+
     configure_base_layer: function(vis) {
       var ca = this.widget_area;
-      
+
       this.graph_layer = vis.append("svg:g")
                  .attr("transform", "translate(0, " + ca.h + ")")
                  ;
       this.legend_layer = vis.append("svg:g");
     },
-    
+
     base_css_class: 'oml-network',
 
     // Find the appropriate data source and bind to it
@@ -49,12 +48,12 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
       var o = this.opts;
       var sources = o.data_sources;
       var self = this;
-      
+
       if (! (sources instanceof Array)) {
-        throw "Expected an array"
+        throw "Expected an array";
       }
       if (sources.length == 1) {
-        // Check if the source name is 'default' and we can find 
+        // Check if the source name is 'default' and we can find
         // a _links and _nodes source
         var s = sources[0];
         if (s.name == 'default') {
@@ -69,11 +68,11 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
           sources = [
             {name: 'nodes', stream: sn},
             {name: 'links', stream: sl},
-          ]
+          ];
         }
       }
       if (sources.length != 2) {
-        throw "Expected TWO data source, one for nodes and one for links"
+        throw "Expected TWO data source, one for nodes and one for links";
       }
       var dsh = this.data_source = {};
       _.map(sources, function(s) {
@@ -88,8 +87,8 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
       this.schema = {
         nodes: this.process_single_schema(this.data_source.nodes),
         links: this.process_single_schema(this.data_source.links)
-      };    
-        
+      };
+
       var om = this.opts.mapping;
       if (om.links == undefined || om.nodes == undefined) {
         throw "Missing mapping instructions in 'options' for either 'links' or 'nodes', or both.";
@@ -97,25 +96,25 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
       this.mapping = {
         nodes: this.process_single_mapping('nodes', om.nodes, this.decl_properties.nodes),
         links: this.process_single_mapping('links', om.links, this.decl_properties.links)
-      };      
+      };
     },
-    
+
     /*
      * Return schema for +stream+.
      */
     schema_for_stream: function(stream) {
       var schema = this.schema[stream];
       return schema;
-    },  
-    
+    },
+
     data_source_for_stream: function(stream) {
       var ds = this.data_source[stream];
       if (ds == undefined) {
         throw "Unknown data_source '" + stream + "'.";
       }
       return ds;
-    },  
-    
+    },
+
     update: function() {
 
       var ldata = this.data_source.links.rows();
@@ -123,13 +122,13 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
 
       this.redraw({links: ldata, nodes: ndata});
     },
-      
+
     redraw:  function(data) {
       var self = this;
       var o = this.opts;
       var mapping = this.mapping; //o.mapping || {};
       var ca = this.widget_area;
-      
+
       var x = function(v) {
         var x = v * ca.w + ca.x;
         var x = v * ca.w;
@@ -137,10 +136,10 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
       };
       var y = function(v) {
         var y = -1 * (v * ca.h + ca.y);
-        var y = -1 * (v * ca.h);        
+        var y = -1 * (v * ca.h);
         return y;
       };
-                
+
       var vis = this.base_layer;
       var lmapping = mapping.links;
       var nmapping = mapping.nodes;
@@ -151,13 +150,13 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
         var a = 0.2;
         var b = 0.3;
         var o = 30;
-        
+
         var from = lmapping.from(d);
         var to = lmapping.to(d);
 
-        var x1 = x(nmapping.x(from)); 
+        var x1 = x(nmapping.x(from));
         var y1 = y(nmapping.y(from));
-        var x3 = x(nmapping.x(to)); 
+        var x3 = x(nmapping.x(to));
         var y3 = y(nmapping.y(to));
 
         var dx = x3 - x1;
@@ -166,13 +165,13 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
 
         var mx = x1 + a * dx;
         var my = y1 + a * dy;
-        var x2 = mx - (dy * o / l)
-        var y2 = my + (dx * o / l);              
+        var x2 = mx - (dy * o / l);
+        var y2 = my + (dx * o / l);
 
         return iline_f([[x1, y1], [x2, y2], [x3, y3]]);
       };
 
-      var ldata = data.links
+      var ldata = data.links;
       var link2 = this.graph_layer.selectAll("path.link")
                     .data(d3.values(ldata));
       link2
@@ -185,38 +184,38 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
       le.attr("class", "link")
         .style("stroke", lmapping.stroke_color)
         .style("stroke-width", lmapping.stroke_width)
-        .attr("fill", "none")         
+        .attr("fill", "none")
         .attr("d", line_f)
         ;
       this._set_link_interaction_mode(le);
-        
+
 
       var ndata = data.nodes;
       // first draw white circle to allow actual node to become transparent
       // without links showing through
       var bg_node = this.graph_layer.selectAll("circle.bg_node")
                         .data(ndata, function(d) { return nmapping.key(d); })
-          .attr("cx", function(d) { return x(nmapping.x(d)) }) 
-          .attr("cy", function(d) { return y(nmapping.y(d)) })
+          .attr("cx", function(d) { return x(nmapping.x(d)); })
+          .attr("cy", function(d) { return y(nmapping.y(d)); })
           .attr("r", nmapping.radius)
           .style("fill", 'white')
         .enter().append("svg:circle")
           .attr("class", "bg_node")
-          .attr("cx", function(d) { return x(nmapping.x(d)) }) 
-          .attr("cy", function(d) { return y(nmapping.y(d)) })
+          .attr("cx", function(d) { return x(nmapping.x(d)); })
+          .attr("cy", function(d) { return y(nmapping.y(d)); })
           .attr("r", nmapping.radius)
           .style("fill", 'white');
           ;
 
-      
+
       function node_f(sel) {
-        sel.attr("cx", function(d) { return x(nmapping.x(d)) }) 
-          .attr("cy", function(d) { return y(nmapping.y(d)) })
+        sel.attr("cx", function(d) { return x(nmapping.x(d)); })
+          .attr("cy", function(d) { return y(nmapping.y(d)); })
           .attr("r", nmapping.radius)
           .style("fill", nmapping.fill_color)
           .style("stroke", nmapping.stroke_color)
           .style("stroke-width", nmapping.stroke_width)
-          ; 
+          ;
       }
       var node = this.graph_layer.selectAll("circle.node")
                         .data(ndata, function(d) {
@@ -234,8 +233,8 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
         // ;
       var en = node.enter().append("svg:circle");
       en.attr("class", "node")
-        .attr("cx", function(d) { return x(nmapping.x(d)) }) 
-        .attr("cy", function(d) { return y(nmapping.y(d)) })
+        .attr("cx", function(d) { return x(nmapping.x(d)); })
+        .attr("cy", function(d) { return y(nmapping.y(d)); })
         .attr("r", nmapping.radius)
         .style("fill", nmapping.fill_color)
         .style("stroke", nmapping.stroke_color)
@@ -246,17 +245,17 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
           .delay(0)
         ;
       this._set_node_interaction_mode(node);
-        
+
       function label_f(sel) {
         sel.attr("class", "node_label")
           .attr('dy', '0.4em')
-          .attr("x", function(d) { return x(nmapping.x(d)) }) 
-          .attr("y", function(d) { return y(nmapping.y(d)) })
+          .attr("x", function(d) { return x(nmapping.x(d)); })
+          .attr("y", function(d) { return y(nmapping.y(d)); })
           .attr('text-anchor', 'middle')
           .style("fill", nmapping.label_color)
-          .style("font-size", nmapping.label_size)        
+          .style("font-size", nmapping.label_size)
           .text(function(d) { return nmapping.label_text(d); });
-      }    
+      }
       var label = this.graph_layer.selectAll("text.node_label")
                         .data(ndata, function(d) {
                             return nmapping.key(d);
@@ -265,7 +264,7 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
       label.enter().append("svg:text").call(label_f);
 
     },
-    
+
     _set_link_interaction_mode: function(le) {
       var self = this;
       var o = this.opts;
@@ -276,9 +275,9 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
         })
         .on("mouseout", function(d) {
           self._on_link_selected(d);
-        }) 
+        })
         ;
-      } else if (o.interaction_mode == 'click') {   
+      } else if (o.interaction_mode == 'click') {
         le.on("click", function(d) {
           self._on_link_selected(d);
         })
@@ -286,33 +285,33 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
         ;
       }
     },
-    
+
     _on_link_selected: function(d) {
       var key_f = this.mapping.links.key;
-      var id = key_f(d);      
+      var id = key_f(d);
       var msg = {id: id, type: 'link', source: this, data_source: this.data_source.links};
 
       if (this.selected_link == id) {
         // if same link is clicked twice, unselect it
-        this._render_selected_link(null);      
+        this._render_selected_link(null);
         this._render_selected_node(null);
       } else {
-        this._render_selected_link(id);      
+        this._render_selected_link(id);
         this._render_selected_node('_NONE_');
         this._report_selected(id, 'links', d);
       }
     },
-    
+
     // Make all but 'selected_id' link semi-transparent. If 'selected_id' is null
     // revert selection.
     //
     _render_selected_link: function(selected_id) {
       if (selected_id == null || selected_id == '_NONE_') {
         if (this.selected_link) {
-          this._report_deselected(this.selected_link, 'links');          
+          this._report_deselected(this.selected_link, 'links');
           this.selected_link = null;
         }
-      } else { 
+      } else {
         this.selected_link = selected_id;
       }
 
@@ -339,57 +338,57 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
          .style("opacity", 1.0)
          .delay(0)
          .duration(300);
-         
+
     },
 
     _set_node_interaction_mode: function(en) {
       var self = this;
       var o = this.opts;
-      
-      var msg_frag = {type: 'node', data_source: this.data_source.nodes}
+
+      var msg_frag = {type: 'node', data_source: this.data_source.nodes};
       if (o.interaction_mode == 'hover') {
         en.on("mouseover", function(d) {
           self._on_node_selected(d);
         })
         .on("mouseout", function(d) {
           self._on_node_selected(d);
-        })         
+        })
         ;
-      } else if (o.interaction_mode == 'click') {   
+      } else if (o.interaction_mode == 'click') {
         en.on("click", function(d) {
           self._on_node_selected(d);
         })
-        .style('cursor', 'hand')
+        .style('cursor', 'hand');
       }
-      
+
     },
-    
+
     _on_node_selected: function(d) {
       var key_f = this.mapping.nodes.key;
-      var id = key_f(d);      
+      var id = key_f(d);
       //var msg = {id: id, type: 'node', source: this, data_source: this.data_source.nodes};
 
       if (this.selected_node == id) {
         // if same link is clicked twice, unselect it
-        this._render_selected_link(null);      
+        this._render_selected_link(null);
         this._render_selected_node(null);
       } else {
-        this._render_selected_link('_NONE_');      
+        this._render_selected_link('_NONE_');
         this._render_selected_node(id);
         this._report_selected(id, 'nodes', d);
       }
     },
-    
+
     // Make all but 'selected_id' node semi-transparent. If 'selected_id' is null
     // revert selection.
     //
     _render_selected_node: function(selected_id) {
       if (selected_id == null || selected_id == '_NONE_') {
         if (this.selected_node) {
-          this._report_deselected(this.selected_node, 'nodes');          
+          this._report_deselected(this.selected_node, 'nodes');
           this.selected_node = null;
         }
-      } else { 
+      } else {
         this.selected_node = selected_id;
       }
       var key_f = this.mapping.nodes.key;
@@ -415,25 +414,27 @@ L.provide('OML.network2', ["graph/js/abstract_chart", "#OML.abstract_chart"], fu
          .style("opacity", 1.0)
          .delay(0)
          .duration(300);
-         
+
     },
-    
+
     _report_selected: function(selected_id, type, datum) {
       var ds = this.data_source[type];
       var msg = {id: selected_id, type: type, source: this, data_source: ds, datum: datum};
-      OHUB.trigger("graph.selected", msg);          
-      OHUB.trigger("graph." + ds.name + ".selected", msg);  
-    },    
+      OHUB.trigger("graph.selected", msg);
+      OHUB.trigger("graph." + ds.name + ".selected", msg);
+    },
 
     _report_deselected: function(selected_id, type, datum) {
       var ds = this.data_source[type];
       var msg = {id: selected_id, type: type, source: this, data_source: ds, datum: datum};
-      OHUB.trigger("graph.deselected", msg);          
-      OHUB.trigger("graph." + ds.name + ".deselected", msg);  
-    }    
-       
-  })
-})
+      OHUB.trigger("graph.deselected", msg);
+      OHUB.trigger("graph." + ds.name + ".deselected", msg);
+    }
+
+  });
+
+  return network2;
+});
 
 /*
   Local Variables:

data/share/htdocs/graph/js/pie_chart2.js

@@ -1,71 +1,73 @@
-L.provide('OML.pie_chart2', ["graph/js/abstract_nv_chart", "#OML.abstract_nv_chart"], function () {
+define(["graph/abstract_nv_chart"], function (abstract_nv_chart) {
 
-  OML.pie_chart2 = OML.abstract_nv_chart.extend({
+  var pie_chart2 = abstract_nv_chart.extend({
     decl_properties: [
-      ['label', 'key', {property: 'label'}], 
+      ['label', 'key', {property: 'label'}],
       ['value', 'key', {property: 'value'}],
       ['color', 'color', 'category10()'],
-      
+
     ],
-        
+
     defaults: function() {
       return this.deep_defaults({
         tooltips: true,
         show_labels: true,
         donut: false,
-        label_threshold: 0.02, //if slice percentage is under this, don't show label 
+        label_threshold: 0.02, //if slice percentage is under this, don't show label
         show_legend: true,
-        
+
         margin: {
-          top: 20, right: 0, bottom: 100, left: 50 
-        }    
-      }, OML.pie_chart2.__super__.defaults.call(this));      
+          top: 20, right: 0, bottom: 100, left: 50
+        }
+      }, pie_chart2.__super__.defaults.call(this));
     },
 
     _create_model: function() {
-      return  nv.models.pieChart();      
+      return  nv.models.pieChart();
     },
-    
+
     _configure_mapping: function(m, chart) {
       var label_f = m.label;
       var value_f = m.value;
       chart.x(function(d) {
-        var v = label_f(d);        
+        var v = label_f(d);
         return v;
-      })
+      });
       chart.y(function(d) {
         var v = value_f(d);
         return v;
-      })
+      });
       chart.color(function(d, i) {
         // TODO: This is most likely broken. The color mapping
         // function should map from an element of 'd', not 'i'
         var v = m.color(i);
         return v;
-      })
+      });
     },
-    
+
     _configure_options: function(opts, chart) {
-      OML.pie_chart2.__super__._configure_options.call(this, opts, chart);
+      pie_chart2.__super__._configure_options.call(this, opts, chart);
       chart
         .tooltips(opts.tooltips)
         .showLabels(opts.show_labels)
         .donut(opts.donut)
         .labelThreshold(opts.label_threshold)
-        .showLegend(opts.show_legend)  
+        .showLegend(opts.show_legend)
         .margin(opts.margin)
         ;
     },
-    
+
     _datum: function(data, chart) {
       return [{
                 key: "???",
                 values: data
               }];
     }
-    
-  })
-})
+
+  });
+
+  return pie_chart2;
+});
 
 /*
   Local Variables: