node collapsing (w/o relayouting)

3 files changed, 46 insertions, 6 deletions

diff --git a/src/index.js b/src/index.js
index 911099c..111a7f6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,11 +23,11 @@ dom.css`
 
 document.body.appendChild(
   <article>
-  	<h1 id="title">loading...</h1>
-  	<div class="graph">
-    	<canvas id="links" />
-    	<div id="nodes" />
-  	</div>
+    <h1 id="title">loading...</h1>
+    <div class="graph">
+      <canvas id="links" />
+      <div id="nodes" />
+    </div>
   </article>
 );
 
@@ -93,6 +93,7 @@ const createNotes = (graph, discussion) => {
           && onlyParent.attributedTo === data.attributedTo // posted by same user
           && onlyParent.published === data.published       // in the same second
         }
+        onHide={hideNote}
       />
     );
     nodes.appendChild(dom);
@@ -138,7 +139,42 @@ const scrollToRoot = (graph) => {
   }
 }
 
+// update collapsed nodes starting with id
+// returns list of (potentially) affected nodes
+const updateCollapsed = (graph, id, updated=[]) => {
+  updated.push(id);
+  const node = graph[id];
+
+  if (node.collapsed !== 'explicit') {
+    node.collapsed =
+      node.data.inReplyTo.length
+      && node.data.inReplyTo.every(p => graph[p.id].collapsed);
+  }
+
+  for (const child of graph[id].data.replies)
+    updateCollapsed(graph, child.id, updated);
+
+  return updated;
+};
+
 const graph = {};
+window.graph = graph;
+
 update(graph)
   .then(() => scrollToRoot(graph))
   .catch(err => console.error(err));
+
+const hideNote = (e) => {
+  const node = graph[e.currentTarget.dataset.id];
+
+  node.collapsed = node.collapsed ? false : 'explicit';
+
+  for (const id of updateCollapsed(graph, node.data.id)) {
+    graph[id].dom.style.opacity = graph[id].collapsed ? 0.2 : 1.0;
+  }
+
+  // layoutNodes(graph)
+  //   .then(() => scrollToRoot(graph))
+  //   .catch(err => console.error(err));
+};
+
diff --git a/src/layout.js b/src/layout.js
index 788edca..e256681 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -7,6 +7,9 @@ export const init = () => {
 }
 
 export const addNode = (dot, node) => {
+  if (node.collapsed)
+    return dot;
+
   const id = node.data.id;
   dot += `  "${id}" [fixedsize=true; width=${node.dom.offsetWidth / 72}; height=${node.dom.offsetHeight / 72}];\n`;
 
diff --git a/src/ui.js b/src/ui.js
index 6b54da9..88e5b10 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -99,7 +99,7 @@ section.tombstone > main {
 `;
 
 const colors = new ColorHash({ lightness: 0.8 });
-export const Note = ({ id, type, attributedTo, published, content, smallHeader = false }) => {
+export const Note = ({ id, type, attributedTo, published, content, smallHeader = false, onHide }) => {
   const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
   const username = attributedTo.name || attributedTo.preferredUsername;
 
@@ -108,6 +108,7 @@ export const Note = ({ id, type, attributedTo, published, content, smallHeader =
       css={{ '--theme-header-bg': backgroundColor }}
       class={type === 'Tombstone' ? 'tombstone' : ''}
       dataset={{ id }}
+      onClick={onHide}
     >
       {smallHeader
         ? <header class="small" />