chore: improve webview styling

moul · Nov 19, 2019 · c00ab84 · c00ab84
1 parent dc2c9ef
commit c00ab84
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 12 deletions.
diff --git a/static/depviz.js b/static/depviz.js
@@ -1,12 +1,14 @@
 $(document).ready(function() {
   $('#targets').focus();
 
-  let searchParams = new URLSearchParams(window.location.search);
+  let searchParams = new URLSearchParams(window.location.search)
   if (searchParams.has("targets")) {
-    let targets = searchParams.get("targets");
-    $('#targets').val(targets);
-    $("#result").html("loading JSON...");
-    let url = "/api/graph?targets=" + searchParams.get("targets");
+    let targets = searchParams.get("targets")
+    $('#targets').val(targets)
+    $("#result").html("loading JSON...")
+    let url = "/api/graph?targets=" + searchParams.get("targets")
+    let taskTemplate = $('#task-template').html()
+    Mustache.parse(taskTemplate)
 
     $.ajax({
       url: url,
@@ -15,10 +17,19 @@ $(document).ready(function() {
         var edges = [];
 
         result.tasks.forEach(task => {
+          // node
+          let svg = Mustache.render(taskTemplate, task)
+          let svgUrl = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(svg);
           let node = {
             id: task.id,
-            label: task.local_id,
+            image: svgUrl,
+            shape: 'image',
+            multi: 'html',
           }
+          nodes.push(node)
+          //console.log(task);
+
+          // relationships
           //if (task.has_owner !== undefined) { edges.push({from: task.has_owner, to: task.id}) }
           //if (task.has_author !== undefined) { edges.push({from: task.has_author, to: task.id}) }
           //if (task.has_milestone !== undefined) { edges.push({from: task.has_milestone, to: task.id}) }
@@ -45,18 +56,40 @@ $(document).ready(function() {
           //if (task.is_related_with !== undefined) { task.is_related_with.forEach(other => edges.push({from: other, to: task.id})) }
           //if (task.is_part_of !== undefined) { task.is_part_of.forEach(other => edges.push({from: other, to: task.id})) }
           //if (task.has_part !== undefined) { task.has_part.forEach(other => edges.push({from: other, to: task.id})) }
-          // console.log(task);
-          nodes.push(node)
         })
         // create a network
         var container = document.getElementById('network');
         var data = {
-          nodes: new vis.DataSet(nodes),
-          edges: new vis.DataSet(edges),
+          nodes: nodes,
+          edges: edges,
+        };
+        var options = {
+          edges: {
+            smooth: {
+              forceDirection: 'none',
+              roundness: 0.8,
+            },
+            length: 100,
+          },
+          nodes: {
+            size: 24,
+          },
+          physics: {
+            minVelocity: 0.1,
+            //solver: 'repulsion',
+            //solver: 'hierarchicalRepulsion',
+            solver: 'barnesHut',
+            barnesHut: {
+              avoidOverlap: 0.5,
+            },
+            hierarchicalRepulsion: {
+              avoidOverlap: 0.6,
+            },
+            stabilization: false,
+          },
         };
-        var options = {};
         var network = new vis.Network(container, data, options);
-        console.log("network", network);
+        //console.log("network", network);
       },
       error: function(xhr, status, error) {
         console.error("failed", xhr, status, error);

diff --git a/static/index.html b/static/index.html
@@ -15,8 +15,19 @@
     <hr />
     <div id="network"></div>
 
+    <script id="task-template" type="x-tmpl-mustache">
+      <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
+        <rect x="0" y="0" width="100%" height="100%" fill="#ccccff" stroke-width="2" stroke="#000000" ></rect>100
+        <foreignObject x="15" y="10" width="100%" height="100%">
+          <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:20px">
+            {{local_id}} by {{has_author}}
+          </div>
+        </foreignObject>
+      </svg>
+    </script>
     <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.1.0/mustache.min.js" integrity="sha256-MPgtcamIpCPKRRm1ppJHkvtNBAuE71xcOM+MmQytXi8=" crossorigin="anonymous"></script>
     <script src="/depviz.js"></script>
   </body>
 </html>