1 files changed, 123 insertions, 0 deletions
diff --git a/recommend/templates/index.html b/recommend/templates/index.html
new file mode 100644
index 0000000..b54901e
--- /dev/null
+++ b/recommend/templates/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    </head>
+    <body>
+        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+        <script src="http://d3js.org/d3.v3.min.js"></script>
+        <script type="text/javascript">
+            treeData = {
+                name: "",
+                children: []
+            };
+
+            function deeper(route) {
+                $.getJSON("/api/builds" + route, (data) => {
+                    let path = route.split("/");
+                    let traverse = (obj, pp) => {
+                        o = obj;
+                        pp.forEach((p) => p != ""?
+                            o = o.children.filter((n) => p == n.name)[0]
+                        : null)
+                        return o;
+                    };
+                    traverse(treeData, path).children = data
+                        .filter((d) => d.probability > 0.01)
+                        .map((d) => {
+                            return {
+                                name: d.name,
+                                probability: d.probability,
+                                children: [],
+                                path: route + "/" + d.name
+                            };
+                        });
+                    update(root);
+                });
+            }
+            deeper("");
+
+            let width = 1500,
+                height = 800;
+            let i = 0, duration = 300;
+
+            let tree = d3.layout.tree()
+                .size([width, height]);
+            let diagonal = d3.svg.diagonal()
+                .projection((d) => [d.x, d.y]);
+            let svg = d3.select("body").append("svg")
+                .attr("width", width)
+                .attr("height", height)
+                .append("g");
+
+            let root = treeData;
+            root.x0 = 0;
+            root.y0 = width/2;
+
+            function update(source) {
+                let nodes = tree.nodes(root).reverse(),
+                    links = tree.links(nodes);
+
+                let node = svg.selectAll("g.node")
+                    .data(nodes, (d) => d.id || (d.id = ++i));
+
+                let nodeEnter = node.enter().append("g")
+                    .attr("class", "node")
+                    .attr("transform", (d) => `translate(${source.x0}, ${source.y0})`)
+                    .on("click", click);
+                nodeEnter.append("text")
+                    .attr("dy", ".35em")
+                    .text((d) => d.name)
+                    .style("fill-opacity", 1e-6);
+                nodeEnter.append("image")
+                    .attr("xlink:href", (d) => `/assets/${d.name.replace(/ /g, "-").toLowerCase()}.png`)
+                    .attr("x", -16)
+                    .attr("y", -16)
+                    .attr("width", 32)
+                    .attr("height", 32);
+                let nodeUpdate = node.transition()
+                    .duration(duration)
+                    .attr("transform", (d) => `translate(${d.x}, ${d.y})`);
+                nodeUpdate.select("circle")
+                    .attr("r", 10);
+                nodeUpdate.select("text")
+                    .style("fill-opacity", 1);
+                let nodeExit = node.exit().transition()
+                    .duration(duration)
+                    .attr("transform", (d) => `translate(${source.x}, ${source.y})`)
+                    .remove();
+
+                let link = svg.selectAll("path.link")
+                    .data(links, (d) => d.target.id);
+
+                link.enter().insert("path", "g")
+                    .attr("class", "link")
+                    .attr("d", (d) => {
+                        let o = {x: source.x0, y: source.y0};
+                        return diagonal({source: o, target: o});
+                    });
+
+                link.transition()
+                    .duration(duration)
+                    .attr("d", diagonal);
+
+                link.exit().transition()
+                    .duration(duration)
+                    .attr("d", (d) => {
+                        var o = {x: source.x, y: source.y};
+                        return diagonal({source: o, target: o});
+                    })
+                    .remove();
+
+                nodes.forEach((d) => {
+                    d.x0 = d.x;
+                    d.y0 = d.y;
+                });
+            }
+
+            function click(d) {
+                deeper(d.path);
+                update(d);
+            }
+        </script>
+    </body>
+</html>