use jsonld framing, add discussion title

5 files changed, 65 insertions, 44 deletions

diff --git a/src/graph.json b/src/graph.json
index dab6b4e..5c3fcbf 100644
--- a/src/graph.json
+++ b/src/graph.json
@@ -1,6 +1,9 @@
 {
   "@context": "https://www.w3.org/ns/activitystreams",
-  "@graph": [
+  "id": "https://dag.s-ol.nu/discussions/1",
+  "type": "Document",
+  "name": "DiscDAG's Future",
+  "items": [
     {
       "id": "https://dag.s-ol.nu/users/ColinWright/notes/20200510151146a",
       "type": "Note",
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;
     }
   }
diff --git a/src/layout.js b/src/layout.js
index 95237c5..788edca 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -10,8 +10,8 @@ export const addNode = (dot, node) => {
   const id = node.data.id;
   dot += `  "${id}" [fixedsize=true; width=${node.dom.offsetWidth / 72}; height=${node.dom.offsetHeight / 72}];\n`;
 
-  for (const replyId of node.data.replies || [])
-    dot += `  "${id}" -> "${replyId}";\n`;
+  for (const reply of node.data.replies)
+    dot += `  "${id}" -> "${reply.id}";\n`;
 
   return dot;
 };
diff --git a/src/ui.js b/src/ui.js
index 32ac5f9..6b54da9 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -5,6 +5,7 @@ import * as dom from './dom';
 dom.css`
 body {
   --theme-backdrop: #1e1e1e;
+  --theme-fg: #eeeeee;
   --theme-note-bg: #eeeeee;
   --theme-note-fg: #363636;
   --theme-header-fg: #121212;
@@ -18,6 +19,7 @@ body.darktheme {
 }
 
 body {
+  color: var(--theme-fg);
   background: var(--theme-backdrop);
   font-family: sans-serif;
   font-size: 11px;
diff --git a/yarn.lock b/yarn.lock
index 5c4836a..690c72c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1272,11 +1272,6 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
-b-spline@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/b-spline/-/b-spline-2.0.1.tgz#81c94e5dba8bb39cfa740aeb0aa85f4f911815a7"
-  integrity sha1-gclOXbqLs5z6dArrCqhfT5EYFac=
-
 babel-loader@^8.2.2:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"