bundleview exemplified

SQUASHED: AUTO-COMMIT-demos-stefan-html.html,AUTO-COMMIT-doc-journal-2024-08-06.md-bundleview.png,AUTO-COMMIT-doc-journal-2024-08-06.md-index.md,AUTO-COMMIT-src-client-graphviz-dependencies.js,AUTO-COMMIT-src-client-graphviz-dependencies.md,

doc/journal/2024-08-06.md/index.md

@@ -0,0 +1,98 @@
+## 2024-08-06 Creating the Lively BundleView
+*Author: @onsetsu*
+
+- Showing <a id='top-level-url'>fooo</a> as a bundleview.
+- Edges show import dependencies.
+  - Only dynamic dependencies within the top-level folder are shown.
+
+<div>
+  <d3-bundleview id='bundleview' width='600px' height='400px'></d3-bundleview>
+</div>
+
+<script>
+// const topLevelURL = lively4url;
+// const topLevelURL = lively4url + '/src';
+const topLevelURL = lively4url + '/src/client';
+
+const topLevelHandle = lively.query(this, '#top-level-url')
+topLevelHandle.innerHTML = topLevelURL
+
+const fileTree = await lively.files.fileTree(topLevelURL + '/')
+
+const topLevelName = topLevelURL.split('/').last
+Object.assign(fileTree, {
+  modified: fileTree.children.maxProp('modified'),
+  name: topLevelName,
+  size: fileTree.children.sumBy(item => parseInt(item.size)),
+  type: 'directory',
+  url: topLevelURL,
+})
+
+async function walk(tree, callback) {
+  const childrenResults = []
+  if (tree.children) {
+    for (let item of tree.children) {
+      await walk(item, callback)
+    }
+  }
+  return await callback(tree, childrenResults)
+}
+
+const fileURLToID = new Map()
+
+const progress = await lively.showProgress('rename global');
+progress.value = 0;
+
+setID: await walk(fileTree, item => {
+  const id = item.name;
+  if (item.type === 'file') {
+    fileURLToID.set(item.url, id)
+  }
+
+  Object.assign(item, {
+    id,
+    label: item.name,
+    attributes: {
+      size: item.name.endsWith('.js') ? parseInt(item.size) : 0,
+      // modified: item.modified,
+    }
+  })
+})
+
+let currentFileIndex = 0;
+const relations = [];
+collectRelations: await walk(fileTree, async item => {
+  if (item.type !== 'file') {
+    return
+  }
+
+  progress.value = currentFileIndex++ / fileURLToID.size;
+
+  const dependencies = await lively.findDependentModules(item.url, false, true) || []
+  if (dependencies) {
+    relations.push(...dependencies.filter(dep => fileURLToID.has(dep)).map(dep => {
+      return {
+        source: item.id,
+        target: fileURLToID.get(dep)
+      }
+    }))
+  }
+})
+progress.remove();
+
+const fileTreeWithRelations = {
+  nodes: fileTree,
+  relations: relations
+};
+
+const bundleview = lively.query(this, '#bundleview')
+bundleview.display(_.cloneDeep(fileTreeWithRelations));
+<button click={async evt => {
+  const bundleview = await lively.openComponentInWindow('d3-bundleview')
+  bundleview.display(_.cloneDeep(fileTreeWithRelations))
+  }} style='margin-top: 60px;'>Open in resizable Window</button>
+</script>
+
+preview image:
+
+![](./bundleview.png){ width=600px}