Merge branch 'dev' of workflow.ijs.si:mothra into dev

workflows/interaction_views.py

@@ -75,3 +75,6 @@ def alter_table(request, input_dict, output_dict, widget):
     from visualization_views import orng_table_to_dict
     data = input_dict['data']
     return render(request, 'interactions/alter_table.html', {'widget' : widget,'input_dict' : input_dict,'output_dict' : orng_table_to_dict(data)})
+
+def example_distance(request, input_dict, output_dict, widget):
+    return render(request, 'interactions/example_distance.html',{'widget':widget, 'input_dict':input_dict})
\ No newline at end of file

workflows/library.py

@@ -842,4 +842,11 @@ def alter_table_finished(postdata, input_dict, output_dict):
     return {'altered_data' : new_table}
 
 def tree_visualization(input_dict):
+    return{}
+
+def example_distance(input_dict):
+    return input_dict
+
+def example_distance_post(postdata, input_dict, output_dict):
+
     return{}
\ No newline at end of file

workflows/templates/visualizations/tree_visualization.html

+<style type="text/css">
+  circle {
+    cursor: pointer;
+    fill: #EEEEEE;
+    stroke: #F6AE38;
+    stroke-width: 1.5px;
+  }
+
+  text {
+    font-size:12px;
+  }
+
+  path.link {
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 1.5px;
+}
+</style>
+
 <div id="widgetvisualization-{{widget.pk}}" rel="{{widget.pk}}" width="900" height="600" class="widgetvisualizationdialog" title="{{widget.name}}">
-    {{ svg|safe }}
+
+
+
+
+<div id="chart"></div>
+
+<script type="text/javascript">
+
+src="https://raw.github.com/mbostock/d3/master/d3.js"
+
+var m = [20, 80, 20, 120],
+    w = 870 - m[1] - m[3],
+    h = 500 - m[0] - m[2],
+    i = 0,
+    json;
+
+var tree = d3.layout.tree()
+    .size([h, w]);
+
+var diagonal = d3.svg.diagonal()
+    .projection(function(d) { return [d.y, d.x]; });
+
+var vis = d3.select("#chart").append("svg:svg")
+    .attr("width", w + m[1] + m[3])
+    .attr("height", h + m[0] + m[2])
+    .append("svg:g")
+    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+
+json = JSON.parse('{{json}}'.replace(/&quot;/g, '"'));
+
+console.log (json)
+
+function(json) {
+  // json = json;
+  json.x0 = h/2;
+  json.y0 = 0;
+}
+  function toggleAll(d) {
+    if (d.children) {
+      d.children.forEach(toggleAll);
+      toggle(d);
+    }
+  }
+
+  // Initialize the display to show a few nodes.
+  json.children.forEach(toggleAll);
+  // toggle(json.children[1]);
+  //toggle(json.children[1].children[2]);
+  //toggle(json.children[9]);
+  //toggle(json.children[9].children[0]);
+
+  update(json);
+
+  // echo json;
+
+function update(source) {
+  var duration = d3.event && d3.event.altKey ? 5000 : 500;
+
+  // Compute the new tree layout.
+  var nodes = tree.nodes(json).reverse();
+
+  // Normalize for fixed-depth.
+  nodes.forEach(function(d) { d.y = d.depth * 100; });
+
+  // Update the nodes…
+  var node = vis.selectAll("g.node")
+      .data(nodes, function(d) { return d.id || (d.id = ++i); });
+
+  // Enter any new nodes at the parent's previous position.
+  var nodeEnter = node.enter().append("svg:g")
+      .attr("class", "node")
+      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
+      .on("click", function(d) { toggle(d); update(d); });
+
+  nodeEnter.append("svg:circle")
+      .attr("r", 1e-6)
+      .style("fill", function(d) { return d._children ? "#F7B64C" : "#F2D5A8"; });
+
+  nodeEnter.append("svg:text")
+      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
+      .attr("dy", ".35em")
+      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
+      .text(function(d) { return d.name; })
+      .style("fill-opacity", 1e-6);
+
+  // Transition nodes to their new position.
+  var nodeUpdate = node.transition()
+      .duration(duration)
+      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
+
+  nodeUpdate.select("circle")
+      .attr("r", 5)
+      .style("fill", function(d) { return d._children ? "#F7B64C" : "#FFF0A5"; });
+
+  nodeUpdate.select("text")
+      .style("fill-opacity", 1);
+
+  // Transition exiting nodes to the parent's new position.
+  var nodeExit = node.exit().transition()
+      .duration(duration)
+      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
+      .remove();
+
+  nodeExit.select("circle")
+      .attr("r", 1e-6);
+
+  nodeExit.select("text")
+      .style("fill-opacity", 1e-6);
+
+  // Update the links…
+  var link = vis.selectAll("path.link")
+      .data(tree.links(nodes), function(d) { return d.target.id; });
+
+  // Enter any new links at the parent's previous position.
+  link.enter().insert("svg:path", "g")
+      .attr("class", "link")
+      .attr("id", function(d){
+        return "L" + d.target.id;
+      })
+      .attr("d", function(d) {
+        var o = {x: source.x0, y: source.y0};
+        return diagonal({source: o, target: o});
+      })
+      .transition()
+        .duration(duration)
+        .attr("d", diagonal);
+
+  // Transition links to their new position.
+  link.transition()
+      .duration(duration)
+      .attr("d", diagonal);
+
+  // Transition exiting nodes to the parent's new position.
+  link.exit().transition()
+      .duration(duration)
+      .attr("d", function(d) {
+        var o = {x: source.x, y: source.y};
+        return diagonal({source: o, target: o});
+      })
+      .remove();
+
+  // Stash the old positions for transition.
+  nodes.forEach(function(d) {
+    d.x0 = d.x;
+    d.y0 = d.y;
+  });
+}
+
+// Toggle children.
+function toggle(d) {
+  if (d.children) {
+    d._children = d.children;
+    d.children = null;
+  } else {
+    d.children = d._children;
+    d._children = null;
+  }
+}
+
+    </script>
+
+
+{{json}}
+
 </div>
\ No newline at end of file

workflows/visualization_views.py

@@ -192,29 +192,61 @@ def sdmsegs_viewer(request,input_dict,output_dict,widget):
     output_dict = {'json_output':output}
     return render(request, 'visualizations/sdmsegs_viewer.html',{'widget':widget,'input_dict':input_dict,'output_dict':output_dict})
 
-def tree_visualization(request, input_dict, output_dict, widget):
+def treeToJSON(node, path="", nodes={}):
+    #made by Bogdan Okresa Duric :)
+    
     import Orange
-    import pydot
-
-    import tempfile
-    f = tempfile.NamedTemporaryFile(delete=False,suffix='.dot')
-
-    tree = input_dict['clt']
-    tree.dot(f, leaf_shape="oval", node_shape="box")
+    import json
 
-    f.close()
+    if not node:
+        return
 
-    dot_file = open(f.name,"r")
-    dot_data = dot_file.read()
+    if path=="": #get the dictionary prepared, insert root node
+        nodes.update ({ #root node properties
+            "name":node.branch_selector.class_var.name,
+            "ID":node.reference(),
+            "children":[]
+        })
+        path = "['children']" #prepare path for future use, it points into 'children' property of the root node
 
-    tree_visualization_graph = pydot.graph_from_dot_data(dot_data)
+    if node.branch_selector: #if the node has branches
+        for n in range(len(node.branches)): #walk through all the branches one by one
+            try:
+                if node.branches[n].branch_selector: #if the node (branch) has branches
+                    child = { #set node properties
+                        "name":node.branch_descriptions[n] + " - " + node.branches[n].branch_selector.class_var.name,
+                        "ID":node.branches[n].reference(),
+                        "children":[] #stays open for future descendant nodes
+                        }
+
+                    eval ("nodes" + path + ".append(" + str(child) + ")") #write node properties
+                    # 'nodes' is the dictionary
+                    #path is the path to the current node, i.e. current parent node
+                    #child is dictionary with node properties
+
+                else: #if node is a leaf
+                    child = {
+                        "name":node.branch_descriptions[n] + " - " + node.branches[n].node_classifier.default_value.value,
+                        "ID":node.branches[n].reference(),
+                        }
+                    eval ("nodes" + path + ".append(" + str(child) + ")")
+            except:
+                pass
+        for i in range(len(node.branches)): #go and work with the branches, one by one
+            treeToJSON(node.branches[i], path + "[" + str(i) + "]" + "['children']", nodes) #work with child node, adding it's "address"
+    else: #if the node has no branches, simply return
+        return
 
-    tree_visualization_graph.set_name("TreeVisualization")
+    return json.JSONEncoder().encode(nodes) #output complete JSON description of the tree
 
-    tree_visualization_graph.set_size("9")
+def tree_visualization(request, input_dict, output_dict, widget):
+    import Orange
+    import json
 
-    tree_visualization_graph.set_ratio("fill")
+    tc = input_dict['clt']
 
-    tree_visualization = tree_visualization_graph.create_svg()
+    jsonJ = treeToJSON(tc.tree)
 
-    return render(request, 'visualizations/tree_visualization.html', {'widget':widget, 'input_dict':input_dict, 'svg':tree_visualization})
\ No newline at end of file
+    print jsonJ
+    
+    return render(request, 'visualizations/tree_visualization.html', {'widget':widget, 'input_dict':input_dict, 'json':jsonJ})
\ No newline at end of file