Added a naive tree visualisation which doesn't really look that good

docs/components/crate.js

@@ -1,7 +1,7 @@
 import {html} from "npm:htl";
 
 export function root_entity(entities) {
-	const root_id = entities['ro-crate-metadata.json']['right']['about'][0];
+	const root_id = entities['ro-crate-metadata.json']['links_from']['about'][0];
 	return entities[root_id];
 }
 
@@ -25,3 +25,31 @@ function link_list(entities, links) {
 	</ul>`
 }
 
+export function naive_tree(crate) {
+	const nodes = crate.nodes;
+	const links = crate.links;
+	const seen = new Set();
+	const tree = {};
+	const path_delim = "|";
+
+	const root = root_entity(crate.nodes);
+
+	tree[root.id] = root.name;
+
+	naive_tree_r(nodes, seen, root.id, tree, root.links_from);
+	return Object.keys(tree);
+}
+
+function naive_tree_r(nodes, seen, stem, tree, links) {
+	for( const prop in links ) {
+		for( const i of links[prop] ) {
+			if( !seen.has(i) ) {
+				seen.add(i);
+				const path = stem + '|' + i;
+				tree[path] = nodes[i].name;
+				naive_tree_r(nodes, seen, path, tree, nodes[i].links_from)
+			}
+		}
+	}
+} 
+

docs/components/forcegraph.js

@@ -43,8 +43,8 @@ export function forcegraph(data) {
       .join("circle")
         .attr("r", 10)
         .attr("fill-opacity", 0.5)
-        .attr("fill", (d) => color(d.group));
- //       .call(drag(simulation));
+        .attr("fill", (d) => color(d.group))
+        .call(drag(simulation));
 
     node.append("title")
         .text((d) => d.name);

docs/data/crate.json.js

@@ -51,15 +51,13 @@ const nodes = {};
 
 
 crate.graph.map((e) => {
-//	const groups = asArray(e['@type']).map((t) => makeId(types, t) );
 	const node = {};
 	node['id'] = e['@id'];
 	node['name'] = e['name'];
 	node['description'] = e['description'];
-//	node['group'] = groups;
 	node['type'] = asArray(e['@type']);
-	node['right'] = {};
-	node['left'] = {};
+	node['links_to'] = {};
+	node['links_from'] = {};
 	nodes[e['@id']] = node;
 });
 
@@ -68,6 +66,7 @@ const links = [];
 
 // Add right and left links to the nodes and
 // build a separate links array for the graph
+// FIXME - if the crate has bidirectional links this will create too many
 
 crate.graph.map((s) => {
 	for ( const prop in s ) {
@@ -79,8 +78,8 @@ crate.graph.map((s) => {
 				if( tid ) {
 					const rel = makeId(relations, prop);
 					if( sid in nodes && tid in nodes ) {
-						addLink(nodes[sid].right, prop, tid);
-						addLink(nodes[tid].left, prop, sid);
+						addLink(nodes[sid].links_from, prop, tid);
+						addLink(nodes[tid].links_to, prop, sid);
 						links.push({
 							source: sid,
 							target: tid,

docs/index.md

@@ -14,6 +14,7 @@ import { root_entity, entity_links, crate_link } from "./components/crate.js";
 
 const crate = await FileAttachment("./data/crate.json").json();
 const nodes = crate.nodes;
+
 const root = root_entity(nodes);
 
 let hash = Generators.observe(notify => {
@@ -51,11 +52,11 @@ let node = hash_to_item(hash);
 <div class="grid grid-cols-2">
 <div class="card">
 <p>Links to this entity:</p>
-${entity_links(nodes, "left", node)}
+${entity_links(nodes, "links_to", node)}
 </div>
 <div class="card">
-<p>Links to this entity:</p>
-${entity_links(nodes, "right", node)}
+<p>Links from this entity:</p>
+${entity_links(nodes, "links_from", node)}
 </div>
 </div>
 

docs/naive-tree.md

@@ -0,0 +1,34 @@
+---
+title: Naive Tree
+toc: false
+---
+```js
+
+import { root_entity, naive_tree } from "./components/crate.js";
+
+const crate = await FileAttachment("./data/crate.json").json();
+const root = root_entity(crate.nodes);
+
+const tree = naive_tree(crate);
+
+
+```
+## ${root.name}
+
+${root.description}
+
+Tree visualisation
+
+```js
+
+display(Plot.plot({
+  height: 4080,
+  marginLeft: 100,
+  axis: null,
+  marks: [
+    Plot.tree(tree, {textStroke: "white", delimiter: "|"})
+  ]
+}));
+
+```
+

observablehq.config.ts

@@ -6,23 +6,9 @@ export default {
   pages: [
     {name: "Table", path: "/table.html"},
     {name: "Histogram", path: "/histogram.html"},
-    {name: "Force graph", path: "/force-graph.html"},
+    {name: "Naive tree", path: "/naive-tree.html"},
   ]
 
-  // The pages and sections in the sidebar. If you don’t specify this option,
-  // all pages will be listed in alphabetical order. Listing pages explicitly
-  // lets you organize them into sections and have unlisted pages.
-  // pages: [
-  //   {
-  //     name: "Examples",
-  //     pages: [
-  //       {name: "Dashboard", path: "/example-dashboard"},
-  //       {name: "Report", path: "/example-report"}
-  //     ]
-  //   }
-  // ],
-
-  // Some additional configuration options and their defaults:
   // theme: "default", // try "light", "dark", "slate", etc.
   // header: "", // what to show in the header (HTML)
   // footer: "Built with Observable.", // what to show in the footer (HTML)