Added a dashboard blade for visualizations

resources/views/app/dashboard.blade.php

+@extends('layouts.app')
+
+@section('content')
+<div style="width: 100%; height: 100%" id="container">
+    <div class="split-left">
+        <h2>Available Agents</h2>
+        <table class="table">
+        @foreach ($graph_elements as $graph_element)
+        @php
+            $name = $graph_element["name"];
+        @endphp
+        <tr>
+            <td>
+                <button id="{{ $name }}"
+                   class="btn btn-primary btn-sm">
+                    {{ $name }}
+                </button>
+            </td>
+        </tr>
+        @endforeach
+    </table>
+    </div>
+    <div class="split-right" id="visualization">
+        <h2>Test2</h2>
+    </div>
+</div>
+
+<div class="text-muted bottom-right">
+    Reload in <span id="reload-countdown">300</span> seconds
+</div>
+
+<script type="text/javascript">
+    var reload_countdown = 300;
+    setInterval(function() {
+        reload_countdown -= 1;
+        $('#reload-countdown').text(reload_countdown);
+
+        if (reload_countdown === 0) {
+            console.log('reload...');
+            location.reload();
+        }
+    }, 1000);
+</script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"
+integrity="sha512-COTaPOlz12cG4fSfcBsxZsjauBAyldqp+8FQUM/dZHm+ts/jR4AFoJhCqxy8K10Jrf3pojfsbq7fAPTb1XaVkg=="
+crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>
+    var json_elements = @json($graph_elements);
+    console.log(json_elements);
+
+    json_elements.forEach(function (arrayItem){
+        var name = arrayItem.name;
+        var data = arrayItem.data;
+        document.getElementById(name).addEventListener("click", function () {
+            drawBubbleGraph(name);
+        });
+    })
+
+    function drawBubbleGraph(label) {
+
+        var url = "/app/ranking/" + label + "/json";
+        var container = document.getElementById("visualization");
+        d3.select(container).select("svg").remove();
+        var svg = d3.select(container).append("svg");
+
+        d3.json(url).then(data => {
+            data = data.slice(0, 100);
+
+            var colors = d3.scaleLinear().domain([0, 1]).range(["blue", "orange"]);
+            var width = container.clientWidth;
+            var height = container.clientHeight;
+
+            svg.attr("width", width);
+            svg.attr("height", height);
+
+            svg.attr("font-size", 11)
+                .attr("font-family", "sans-serif")
+                .attr("text-anchor", "middle");
+
+
+            pack = data => d3.pack()
+                .size([width - 2, height - 2])
+                .padding(3)
+            (d3.hierarchy({children: data})
+                .sum(d => d.score))
+
+            const root = pack(data);
+            const leaf = svg.selectAll("g")
+                .data(root.leaves())
+                .join("g")
+                .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
+
+            leaf.append("circle")
+                .attr("id", d => (d.leafUid = d.data.id))
+                .attr("r", d => d.r)
+                .attr("fill-opacity", 0.7)
+                .attr("fill", d => colors(d.data.score))
+                .on("click", function(d) {
+                    window.location =  "/app/evidence/" + d.srcElement.id;
+                });
+
+            leaf.append("clipPath")
+                .attr("id", d => (d.clipUid = "clip-" + d.data.id))
+                .append("use")
+                .attr("xlink:href", d => d.leafUid.href);
+
+            leaf.append("text")
+                .attr("clip-path", d => d.clipUid)
+                .selectAll("tspan")
+                //.data(d => d.data.subject.name.split(/(?=[A-Z][a-z])|\s+/g))
+                .data(d => Object.values(d.data.subject).join(' | ').split(/(?=[A-Z][a-z])|\s+/g))
+                .join("tspan")
+                    .attr("x", 0)
+                    .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
+                    .text(d => d);
+
+            leaf.append("title")
+                .text(d => d.score);
+        });
+    }
+
+</script>
+
+@endsection
\ No newline at end of file

resources/views/layouts/app.blade.php

@@ -40,6 +40,9 @@
                         <li class="nav-item">
                             <a class="nav-link" href="{{ action('MarkController@rankingHome') }}">Ranking</a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ action('MarkController@dashboardHome') }}">Dashboard</a>
+                        </li>
                         <li class="nav-item">
                             <a class="nav-link" href="{{ action('MarkController@status') }}">Status</a>
                         </li>