Adding first changes to the new project.

docker-compose.yml

@@ -11,6 +11,7 @@ services:
     volumes:
       - '$MUSTACHE_WORKSPACE:/app/workspace'
       - '.:/usr/src/app:ro'
+      - '.:/app'
     ports:
       - '5000:5000'
     links:
@@ -26,6 +27,7 @@ services:
       volumes:
           - '$MUSTACHE_WORKSPACE:/app/workspace'
           - '.:/usr/src/app:ro'
+          - '.:/app'
 
   redis:
       image: redis

mustache/static/css/dashboard/dashboard.css

@@ -139,6 +139,10 @@ div.tooltip {
     display: inline;
 }
 
+#chart-circle {
+    display: inline;
+}
+
 body {
     overflow: hidden;
 }

mustache/static/gen/dashboard.css

@@ -8131,6 +8131,10 @@ div.tooltip {
     display: inline;
 }
 
+#chart-circle {
+    display: inline;
+}
+
 body {
     overflow: hidden;
 }
@@ -8212,7 +8216,7 @@ html {
 }
 
 .side-logo-newcastle {
-    width: 90%;
+    width: 80%;
     margin: 0 5%;
     margin-bottom: 10%;
 }
@@ -8554,6 +8558,7 @@ html {
 .about-header {
     font-size: 24px;
 }
+
 #wrapper .sidebar {
   background-color: #2B333E;
 }

mustache/static/gen/home.css

@@ -15342,6 +15342,7 @@ body {
     width: 100%;
     height: 2px;
 } */
+
 .lds-rng {
     display: inline-block;
     position: relative;
@@ -15658,6 +15659,10 @@ div.tooltip {
     display: inline;
 }
 
+#chart-circle {
+    display: inline;
+}
+
 body {
     overflow: hidden;
 }
@@ -15739,7 +15744,7 @@ html {
 }
 
 .side-logo-newcastle {
-    width: 90%;
+    width: 80%;
     margin: 0 5%;
     margin-bottom: 10%;
 }
@@ -16081,6 +16086,7 @@ html {
 .about-header {
     font-size: 24px;
 }
+
 @font-face {
     font-family: LogoFont;
     src: url(../css/roboto-condensed/RobotoCondensed-Bold.ttf);

mustache/static/js/dashboard/circle-hierarchy.js

@@ -0,0 +1,134 @@
+
+function get_file_url(data_name, mpts) {
+    return "http://localhost:8000/" + data_name + "-ct-" + mpts + ".json"
+}
+
+function circle_hierarchy(data_name, mpts) {
+
+    data = d3.json(get_file_url(data_name, mpts))
+        .then(function(data) {
+
+            pack = data => d3.pack()
+                .size([width, height])
+                .padding(3)
+              (d3.hierarchy(data)
+                .sum(d => d.n)
+                .sort((a, b) => b.n - a.n))
+
+            // This has to be given as a parameter.
+            // Dimensions of the chart
+            var width = $("#circle-panel").find(".panel-body").attr("width"),
+                height = width; //$("#circle-panel").find(".panel-body").attr("height");
+
+            var min_id = Number.MAX_VALUE;
+            var max_id = Number.MIN_VALUE;
+
+            const root = pack(data);
+            let focus = root;
+            let view;
+
+            root.descendants().forEach(function (d) {
+                min_id = Math.min(min_id, d.data.id)
+                max_id = Math.max(max_id, d.data.id)
+            });
+
+            color = d3.scaleLinear()
+                .domain([min_id, max_id])
+                .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
+                .interpolate(d3.interpolateHsl);
+                // .range(["#b3cde3","#fbb4ae","#decbe4","#ccebc5"])
+
+            // Find Labels in the Cluster Tree
+
+            d3.select('#chart-circle').select("svg").remove();
+
+            var svg = d3.select("#chart-circle").append("svg")
+                .attr("viewBox", "-280 -280 " + (width) + " " + (height))
+                .style("display", "block")
+                .style("margin", "10 10 10 10")
+                .style("background", "white")
+                .style("cursor", "pointer")
+                .on("click", () => zoom(root));
+
+            var node = svg.append("g")
+                .selectAll("circle")
+                .data(root.descendants())
+                .join("circle")
+                  .attr("fill", d => color(d.data.id))
+                  .attr("pointer-events", d => !d.children ? "none" : null)
+                  .on("mouseover", function() { d3.select(this).attr("stroke", "#000"); })
+                  .on("mouseout", function() { d3.select(this).attr("stroke", null); })
+                  .on("click", d => focus !== d && (zoom(d), d3.event.stopPropagation()));
+
+            var label = svg.append("g")
+                    .style("font", "10px sans-serif")
+                    .attr("pointer-events", "none")
+                    .attr("text-anchor", "middle")
+                .selectAll("text")
+                .data(root.descendants())
+                .join("text")
+                    .style("fill-opacity", d => d.parent === root ? 1 : 0)
+                    .style("display", d => d.parent === root ? "inline" : "none")
+                    .text(d => d.data.id);
+
+            zoomTo([root.x, root.y, root.r * 2]);
+
+            function zoomTo(v) {
+                const k = width / v[2];
+
+                view = v;
+
+                label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
+                node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
+                node.attr("r", d => d.r * k);
+            }
+
+            function zoom(d) {
+                const focus0 = focus;
+
+                focus = d;
+
+                const transition = svg.transition()
+                    .duration(d3.event.altKey ? 7500 : 750)
+                    .tween("zoom", d => {
+                      const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
+                      return t => zoomTo(i(t));
+                    });
+
+                label
+                  .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
+                  .transition(transition)
+                    .style("fill-opacity", d => d.parent === focus ? 1 : 0)
+                    .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
+                    .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
+            }
+
+            // Listens to the button FOSC and updates the chart.
+            $('.fosc-select input[type=checkbox]').on("change", function () {
+                if(d3.select('.fosc-select input[type=checkbox]').property("checked")){
+                    node.style("visibility", d => d.children ? "hidden" : "visible");
+                } else {
+                    node.style("visibility", "visible");
+                }
+            })
+
+    });
+}
+
+
+function plot_circle_hierarchy(data_name) {
+    circle_hierarchy(data_name, 2)
+
+    $('.mpts-value input[type=number]').on("change", function () {
+        console.log('UPDATE')
+        console.log(this.value)
+        circle_hierarchy(data_name, this.value)
+    });
+
+}
+
+data_name = "test"
+mpts2 = d3.select('.mpts-value')
+console.log(mpts2)
+mpts = 2
+plot_circle_hierarchy(data_name, mpts)