Tree-shaped visualization of IPFS DAG.

License: MIT Signed-off-by: Harlan T Wood <code@harlantwood.net>
ipfs-shipyard · Jun 6, 2015 · 6021cea · 6021cea
1 parent 1e5b0a2
commit 6021cea
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 0 deletions.
diff --git a/webapps/tree-ltr/Makefile b/webapps/tree-ltr/Makefile
@@ -0,0 +1,10 @@
+
+url="http://localhost:5001/ipfs/"
+
+publish:
+	@export hash=$(shell ipfs add -r -q . | tail -n1) && \
+		echo $$hash >published-version && \
+		open $(url)$$hash/viz
+
+watch:
+	coffee --bare --watch --compile app.coffee
diff --git a/webapps/tree-ltr/app.coffee b/webapps/tree-ltr/app.coffee
@@ -0,0 +1,100 @@
+DEMO_HASH = 'QmZq1TFx4RF1LbNb9RmEMZxaXpB9UjcFTLRCT4GHzy3Kk2'
+
+app = ->
+  hash = window.location.hash[1..]
+  console.log hash
+  if hash.length > 0
+    render hash
+  else
+    window.location.hash = '#'+DEMO_HASH
+    window.location.reload()
+
+render = (hash) ->
+  API_REFS_FORMAT = encodeURIComponent '<src> <dst> <linkname>'
+  d3.xhr "/api/v0/refs?arg=#{hash}&recursive&format=#{API_REFS_FORMAT}", (error, xhr) ->
+    data = xhr.responseText
+
+    dict = {}
+
+    refApiPattern = /"Ref": "(\S+) (\S+) (\S+)\\n"/g
+    while match = refApiPattern.exec data
+      [whole, src, dst, linkname] = match
+      dict[src] ?= []
+      dict[src].push
+        Hash: dst
+        Name: linkname
+
+    children = getDecendants hash, dict
+
+    @root = children: children
+    #    console.log JSON.stringify @root, null, 2
+
+    @root.x0 = h / 2
+    @root.y0 = 0
+
+    @root.children.forEach toggleAll
+    update @root
+
+getDecendants = (ref, dict) ->
+  throw new Error unless ref? and dict?
+  children = dict[ref]
+  if children?
+    for child in children
+      throw new Error unless child.Hash?
+      decendants = getDecendants child.Hash, dict
+      child.children = decendants if decendants?
+    children
+
+app()
+
+
+
+# Format of internal `dict`:
+#
+# {
+#   "Qmcav25eTinMV632w9zdyXsFENDz5FCWjrMEVU7Nzy2v98": [
+#     {
+#       "Name": "app.js",
+#       "Hash": "QmZs8mitpfSZM8TaFas9WaDVF77aQvb47UEPR1g1quoQq9"
+#     },
+#     {
+#       "Name": "lib",
+#       "Hash": "QmSXq83RU9YFnxGS7N29gBqjMXTg3qHERzrfFZxKYCGknM"
+#     }
+#   ],
+#   "QmSXq83RU9YFnxGS7N29gBqjMXTg3qHERzrfFZxKYCGknM": [
+#     {
+#       "Name": "d3.js",
+#       "Hash": "QmbgWP6n7wmczy9YP79FpDRUjYhyjVKjdDHTm9SS9nadZR",
+#     }
+#   ]
+# }
+
+
+# Final D3 format:
+#
+# {
+#   "Name": "",
+#   "children": [
+#     {
+#       "Hash": "QmZs8mitpfSZM8TaFas9WaDVF77aQvb47UEPR1g1quoQq9",
+#       "Name": "app.js"
+#     },
+#     {
+#       "Hash": "QmSXq83RU9YFnxGS7N29gBqjMXTg3qHERzrfFZxKYCGknM",
+#       "Name": "lib",
+#       "children": [
+#         {
+#           "Hash": "Qmei6UeQ3LKeKUfzKLx8SRsmxVpvvWrLmZTkKapCoQnYgf",
+#           "Name": "d3",
+#           "children": [
+#             {
+#               "Hash": "QmbgWP6n7wmczy9YP79FpDRUjYhyjVKjdDHTm9SS9nadZR",
+#               "Name": "d3.js"
+#             }
+#           ]
+#         }
+#       ]
+#     }
+#   ]
+# }
diff --git a/webapps/tree-ltr/app.js b/webapps/tree-ltr/app.js
diff --git a/webapps/tree-ltr/doc/api.md b/webapps/tree-ltr/doc/api.md
@@ -0,0 +1,44 @@
+A request to:
+
+http://localhost:5001/api/v0/object/get?arg=/ipfs/QmPE6xb88LKNkwptiAsKNQ2Tryd8S8r9CBs1t9fXh9cY
+
+Returns JSON like:
+
+```json
+{
+  "Links": [
+    {
+      "Name": "viz.html",
+      "Hash": "QmfY5W7vwrD9FycZNg3zikZSpcRwPDwDJp21b3NqMM8dw5",
+      "Size": 4743
+    }
+  ],
+  "Data": "\u0008\u0001"
+}
+```
+
+Ideal future format of recursive call to `object/links`:
+
+{
+  "Hash": "Qmcav25eTinMV632w9zdyXsFENDz5FCWjrMEVU7Nzy2v98",
+  "Links": [
+    {
+      "Name": "app.js",
+      "Hash": "QmZs8mitpfSZM8TaFas9WaDVF77aQvb47UEPR1g1quoQq9",
+      "Size": 500
+    },
+    {
+      "Name": "lib",
+      "Hash": "QmSXq83RU9YFnxGS7N29gBqjMXTg3qHERzrfFZxKYCGknM",
+      "Size": 520503,
+      "Links": [
+        {
+          "Name": "d3.js",
+          "Hash": "QmbgWP6n7wmczy9YP79FpDRUjYhyjVKjdDHTm9SS9nadZR",
+          "Size": 336528
+        }
+      ]
+    }
+  ]
+}
+
diff --git a/webapps/tree-ltr/doc/ipfs-core.png b/webapps/tree-ltr/doc/ipfs-core.png
diff --git a/webapps/tree-ltr/published-version b/webapps/tree-ltr/published-version
@@ -0,0 +1 @@
+QmXon5EUQxP71kFFPdp5E64kkZCNNUsPVSwuVK2WCQ5yNW
diff --git a/webapps/tree-ltr/viz b/webapps/tree-ltr/viz
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="lib/d3/d3.js"></script>
+    <link type="text/css" rel="stylesheet" href="lib/d3/tree.css"/>
+  </head>
+  <body>
+    <div id="body">
+      <div id="footer">
+        <!-- <div class="hint">click or option-click to expand or collapse</div> -->
+      </div>
+    </div>
+    <script type="text/javascript" src="lib/d3/tree.js"></script>
+    <script type="text/javascript" src="app.js"></script>
+  </body>
+</html>