1 <%# Copyright (C) The Arvados Authors. All rights reserved.
3 SPDX-License-Identifier: AGPL-3.0 %>
5 <%#= render :partial => 'nav' %>
6 <table class="table table-bordered">
15 <% content_for :head do %>
16 <%= javascript_include_tag '/d3.v3.min.js' %>
18 <style type="text/css">
26 path.link.derived_from {
28 stroke-dasharray: 0,4 1;
37 stroke-dasharray: 0,4 1;
51 font: 12px sans-serif;
57 font: 12px sans-serif;
70 <% content_for :js do %>
74 var links = <%= raw d3ify_links(@links).to_json %>;
78 // Compute the distinct nodes from the links.
79 links.forEach(function(link) {
80 link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
81 link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
84 var fill_for = {'ldvyl': 'green',
87 jQuery.each(nodes, function(i, node) {
88 var m = node.name.match(/-([a-z0-9]{5})-/)
90 node.fill = fill_for[m[1]] || '#ccc';
91 else if (node.name.match(/^[0-9a-f]{32}/))
92 node.fill = fill_for['4zz18'];
100 var force = d3.layout.force()
101 .nodes(d3.values(nodes))
109 var svg = d3.select("td.d3").append("svg:svg")
113 // Per-type markers, as they don't inherit styles.
114 svg.append("svg:defs").selectAll("marker")
115 .data(["member_of", "owner", "derived_from"])
116 .enter().append("svg:marker")
118 .attr("viewBox", "0 -5 10 10")
121 .attr("markerWidth", 6)
122 .attr("markerHeight", 6)
123 .attr("orient", "auto")
125 .attr("d", "M0,-5L10,0L0,5");
127 var path = svg.append("svg:g").selectAll("path")
129 .enter().append("svg:path")
130 .attr("class", function(d) { return "link " + d.type; })
131 .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
133 var circle = svg.append("svg:g").selectAll("circle")
135 .enter().append("svg:circle")
137 .style("fill", function(d) { return d.fill; })
140 var text = svg.append("svg:g").selectAll("g")
142 .enter().append("svg:g");
144 // A copy of the text with a thick white stroke for legibility.
145 text.append("svg:text")
148 .attr("class", "shadow")
149 .text(function(d) { return d.name.replace(/^([0-9a-z]{5}-){2}/,''); });
151 text.append("svg:text")
154 .text(function(d) { return d.name.replace(/^([0-9a-z]{5}-){2}/,''); });
156 var edgetext = svg.append("svg:g").selectAll("g")
158 .enter().append("svg:g");
164 .text(function(d) { return d.type; });
166 // Use elliptical arc path segments to doubly-encode directionality.
168 path.attr("d", function(d) {
169 var dx = d.target.x - d.source.x,
170 dy = d.target.y - d.source.y,
171 // dr = Math.sqrt(dx * dx + dy * dy);
173 return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
176 circle.attr("transform", function(d) {
177 return "translate(" + d.x + "," + d.y + ")";
180 text.attr("transform", function(d) {
181 return "translate(" + d.x + "," + d.y + ")";
184 edgetext.attr("transform", function(d) {
185 return "translate(" +
186 (d.source.x + d.target.x)/2 + "," +
187 (d.source.y + d.target.y)/2 +
189 (Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) * 180 / Math.PI) +