feat: 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,67 @@
 $(document).ready(function() {
-  $("#submit").click(function() {
+  $('#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");
+
     $.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 => {
+          let node = {
+            id: task.id,
+            label: task.local_id,
+          }
+          //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})) }
+          // 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),
+        };
+        var options = {};
+        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,22 @@
 <!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 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="/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>