chore: webview

api/dvmodel.proto

@@ -157,4 +157,4 @@ message Batch {
   repeated Task tasks = 1;
   repeated Owner owners = 2;
   repeated Topic topics = 3;
-}
+}

internal/dvcore/store.go

@@ -40,13 +40,16 @@ func GetStoreDump(ctx context.Context, h *cayley.Handle, schema *schema.Config)
 		Topics: make([]*dvmodel.Topic, len(topics)),
 	}
 	for idx, owner := range owners {
-		dump.Owners[idx] = &owner
+		clone := owner
+		dump.Owners[idx] = &clone
 	}
 	for idx, task := range tasks {
-		dump.Tasks[idx] = &task
+		clone := task
+		dump.Tasks[idx] = &clone
 	}
 	for idx, topic := range topics {
-		dump.Topics[idx] = &topic
+		clone := topic
+		dump.Topics[idx] = &clone
 	}
 
 	return &dump, nil

internal/dvserver/api.go

@@ -39,7 +39,8 @@ func (s *service) Graph(ctx context.Context, in *Graph_Input) (*Graph_Output, er
 		Tasks: make([]*dvmodel.Task, len(tasks)),
 	}
 	for idx, task := range tasks {
-		ret.Tasks[idx] = &task
+		clone := task
+		ret.Tasks[idx] = &clone
 	}
 	return &ret, nil
 }

static/depviz.js

@@ -1,17 +1,100 @@
 $(document).ready(function() {
-  $("#submit").click(function() {
-    $("#result").html("loading JSON...");
+  $('#targets').focus();
+
+  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 taskTemplate = $('#task-template').html()
+    Mustache.parse(taskTemplate)
+
     $.ajax({
-      url: "/api/issues.json?targets=" + $("#targets").attr("value"),
+      url: url,
       success: function(result, status, xhr) {
-        console.dir(result);
-        $("#result").html(JSON.stringify(result));
-        $("#image-link").attr("href", "/api/graph/image?targets=" + $("#targets").attr("value"));
+        var nodes = [];
+        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,
+            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}) }
+          if (task.is_depending_on !== undefined) {
+            task.is_depending_on.forEach(other => edges.push({
+              from: task.id,
+              to: other,
+              relation: "is_depending_on",
+              arrows: "to",
+              color: {color: 'red'},
+            }))
+          }
+          if (task.is_blocking !== undefined) {
+            task.is_blocking.forEach(other => edges.push({
+              from: other,
+              to: task.id,
+              relation: "is_depending_on",
+              arrows: "to",
+              color: {color: 'red'},
+            })) }
+          //if (task.has_assignee !== undefined) { task.has_assignee.forEach(other => edges.push({from: other, to: task.id})) }
+          //if (task.has_reviewer !== undefined) { task.has_reviewer.forEach(other => edges.push({from: other, to: task.id})) }
+          //if (task.has_label !== undefined) { task.has_label.forEach(other => edges.push({from: other, to: task.id})) }
+          //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})) }
+        })
+        // create a network
+        var container = document.getElementById('network');
+        var data = {
+          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 network = new vis.Network(container, data, options);
+        //console.log("network", network);
       },
       error: function(xhr, status, error) {
         console.error("failed", xhr, status, error);
         alert("failed: " +  error);
       },
     })
-  });
+  }
 });

static/index.html

@@ -1,15 +1,33 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title>DepViz</title>
+    <title>DepViz Web</title>
+    <style type="text/css">
+      html, body { height: 100%; }
+      #network { width: 100%; height: 100%; border: 1px solid lightgray; }
+    </style>
   </head>
   <body>
+    <form method="GET">
+      <input name="targets" type="text" id="targets" placeholder="user/project" value="moul/depviz-test" />
+      <input type="submit" id="submit" value="generate" />
+    </form>
+    <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>
-    <input type="text" id="targets" placeholder="user/project" value="moul/depviz" />
-    <input type="button" id="submit" value="generate" />
-    <hr />
-    <a id="image-link">download image</a>
-    <textarea id="result" style="width: 100%; height: 500px;"></textarea>
   </body>
 </html>