use jsonld framing, add discussion title

1 files changed, 57 insertions, 36 deletions

diff --git a/src/index.js b/src/index.js
index 8b3cc16..911099c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,18 +5,43 @@ import * as dom from './dom';
 import * as layout from './layout';
 import { Note } from './ui';
 
+window.jsonld = jsonld;
+
 dom.css`
-article {
+.graph {
   position: relative;
 }
-`;
 
-const article = document.createElement('article');
-const canvas = document.createElement('canvas');
-article.appendChild(canvas);
-document.body.appendChild(article);
+#nodes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+`;
 
-const context = 'https://www.w3.org/ns/activitystreams';
+document.body.appendChild(
+  <article>
+  	<h1 id="title">loading...</h1>
+  	<div class="graph">
+    	<canvas id="links" />
+    	<div id="nodes" />
+  	</div>
+  </article>
+);
+
+const title = document.getElementById('title');
+const canvas = document.getElementById('links');
+const nodes = document.getElementById('nodes');
+
+const context = [
+  'https://www.w3.org/ns/activitystreams',
+  {
+    replies: { '@id': 'as:replies', '@container': '@set' },
+    inReplyTo: { '@id': 'as:inReplyTo', '@container': '@set' },
+  },
+];
 
 const userCache = {};
 const loadUser = async (id) => {
@@ -32,38 +57,33 @@ const loadUser = async (id) => {
 
 const loadData = async () => {
   const raw = await require('./graph.json');
-  const data = await (jsonld.compact(await jsonld.flatten(raw), context));
-
-  const indexedData = {};
-
-  await Promise.all(data['@graph'].map(async (entry) => {
-    if (entry.type !== 'Note' && entry.formerType !== 'Note') {
-      console.info(`entry ${entry.id} is a ${entry.type}`);
-      return;
-    }
-
-    if (!entry.replies) entry.replies = [];
-    if (!Array.isArray(entry.replies))
-      entry.replies = [ entry.replies ];
-
-    if (!entry.inReplyTo) entry.inReplyTo = [];
-    if (!Array.isArray(entry.inReplyTo))
-      entry.inReplyTo = [ entry.inReplyTo ];
-
-    entry.attributedTo = await loadUser(entry.attributedTo);
+  const data = await jsonld.frame(
+    raw,
+    {
+      '@context': context,
+      type: 'Document',
+      items: {
+        context: { '@embed': '@never' },
+        replies: { '@embed': '@never' },
+        inReplyTo: { '@embed': '@never' },
+      },
+    },
+    { omitGraph: true }
+  );
 
-    indexedData[entry.id] = entry;
+  await Promise.all(data.items.map(async (item) => {
+    item.attributedTo = await loadUser(item.attributedTo);
   }));
 
-  return indexedData;
+  return data;
 };
 
-const createNotes = (graph, indexedData) => {
-  for (const data of Object.values(indexedData)) {
+const createNotes = (graph, discussion) => {
+  for (const data of Object.values(discussion.items)) {
     if (data.id in graph)
       continue;
 
-    const onlyParent = data.inReplyTo.length === 1 && indexedData[data.inReplyTo[0]];
+    const onlyParent = data.inReplyTo.length === 1 && discussion.items[data.inReplyTo[0].id];
 
     const dom = (
       <Note
@@ -75,7 +95,7 @@ const createNotes = (graph, indexedData) => {
         }
       />
     );
-    article.appendChild(dom);
+    nodes.appendChild(dom);
 
     graph[data.id] = { dom, data };
   }
@@ -101,17 +121,18 @@ const layoutNodes = async (graph) => {
 };
 
 const update = async (graph) => {
-  const indexedData = await loadData();
-  window.dagData = indexedData;
+  const discussion = await loadData();
+  window.dagData = discussion;
+  title.textContent = discussion.name;
 
-  createNotes(graph, indexedData);
+  createNotes(graph, discussion);
   await layoutNodes(graph);
 };
 
 const scrollToRoot = (graph) => {
   for (const node of Object.values(graph)) {
     if (node.data.inReplyTo.length === 0) {
-      node.dom.scrollIntoView();
+      node.dom.scrollIntoView({ block: 'nearest', inline: 'nearest' });
       return;
     }
   }