@lukekaalim/act-insight 0.0.2-alpha.6 → 1.1.0

package/ScheduleControls.ts

@@ -0,0 +1,61 @@
+import { Component, h, useEffect, useState } from '@lukekaalim/act';
+import { ReconcilerDebugController, ReconcilerDebugEventBus, ScheduleController, ScheduleEventBus } from '@lukekaalim/act-debug';
+import { InsightAppState } from './InsightApp';
+
+export type ScheduleControlsProps = {
+  controller: ScheduleController,
+  bus: ScheduleEventBus,
+
+  reconciler: ReconcilerDebugController,
+
+  state: InsightAppState,
+  onStateChange?: (newState: InsightAppState) => void,
+};
+
+export const ScheduleControls: Component<ScheduleControlsProps> = ({ controller, bus, reconciler, state, onStateChange = () => {} }) => {
+  useEffect(() => {
+    bus.onInterceptStart = () => {
+      onStateChange({ ...state, paused: true });
+      //onPauseChange(false)
+    }
+    bus.onInterceptEnd = () => {
+      onStateChange({ ...state, paused: false });
+      //onPauseChange(false)
+    }
+    bus.onAfterCallbackExecute = () => {
+      //reconciler.getThread();
+    }
+  }, [bus, reconciler, state])
+
+
+  const onStepClick = () => {
+    controller.step();
+  }
+  const onResumeClick = () => {
+    controller.cancelIntercept();
+  }
+  const onChangeBreakBeforeUpdate = (event: Event) => {
+    onStateChange({ ...state, breakOnBeforeUpdate: (event.target as HTMLInputElement).checked });
+  }
+  const onChangeBreakAfterUpdate = (event: Event) => {
+    onStateChange({ ...state, breakOnAfterUpdate: (event.target as HTMLInputElement).checked });
+  }
+
+  return h('div', { style: { background: state.paused ? 'red' : 'white', padding: '8px', display: 'flex', gap: '12px' }}, [
+    h('div', { style: { display: 'flex', 'flex-direction': 'column' } }, [
+      h('label', { style: { 'margin': 'auto 0' } }, [
+        h('span', {}, `Break Before Update`),
+        h('input', { type: 'checkbox', checked: state.breakOnBeforeUpdate, onChange: onChangeBreakBeforeUpdate }),
+      ]),
+      h('label', { style: { 'margin': 'auto 0' } }, [
+        h('span', {}, `Break After Update`),
+        h('input', { type: 'checkbox', checked: state.breakOnAfterUpdate, onChange: onChangeBreakAfterUpdate }),
+      ]),
+    ]),
+    h('button', { onClick: onStepClick, disabled: !state.paused, style: { padding: '8px' } }, 'Step'),
+    h('button', { onClick: onResumeClick, disabled: !state.paused, style: { padding: '8px' } }, 'Resume'),
+    h('span', {
+      style: { border: `2px solid ${state.paused ? 'orange' : 'black'}`, 'border-radius': '8px', padding: '8px' }
+    }, state.paused ? `Paused` : `Ready`),
+  ])
+};

package/TreeViewer.module.css

@@ -10,10 +10,18 @@
   font-family: monospace;
   display: inline;
 
-  padding: 2px;
+  padding: 4px;
   border-radius: 8px;
 
   margin: 2px;
+
+  border: 2px solid rgba(255, 255, 255, 0);
+  white-space: nowrap;
+}
+.elementName:hover {
+  font-weight: bold;
+  cursor: pointer;
+  border: 2px solid white;
 }
 
 .commit {
@@ -31,6 +39,7 @@
 }
 
 .commitList {
+  flex: 1;
   display: flex;
   flex-direction: column;
   list-style: none;

package/TreeViewer.ts

@@ -1,35 +1,35 @@
 import { Component, h, Node } from "@lukekaalim/act";
-import { Commit, CommitID, CommitTree } from "@lukekaalim/act-recon";
 import { hs } from "@lukekaalim/act-web";
-import { getElementName } from "./utils";
 import stringHash from '@sindresorhus/string-hash';
 
 import classes from './TreeViewer.module.css';
-import { CommitAttributeTag } from "./AttributeTag";
+//import { CommitAttributeTag } from "./AttributeTag";
 import { CommitReport, TreeReport } from "@lukekaalim/act-debug";
+import { CommitID } from "@lukekaalim/act-recon";
+import { CommitAttributeTag } from './AttributeTag';
 
 export type TreeViewerProps = {
-  tree: TreeReport,
+  //commits: Map<CommitID, CommitReport>,
+  roots: CommitID[],
 
-  renderCommit: (commit: CommitReport) => Node,
+  renderCommit: (commitId: CommitID) => Node,
 }
 
 export const TreeViewer: Component<TreeViewerProps> = ({
-  tree, renderCommit
+  //commits,
+  roots,
+  renderCommit
 }) => {
-  const rootCommits = tree.roots
-    .map(root => tree.commits.get(root.id))
-    .filter(Boolean) as CommitReport[];
+  //const rootCommits = roots.map(root => commits.get(root)).filter(x => !!x)
 
   const className = [classes.commitList, classes.top].join(' ')
 
-  return h('ol', { className }, rootCommits.map(root =>
-    h('li', {}, renderCommit(root))));
+  return h('ol', { className }, roots.map(root =>
+    h('li', { key: root }, renderCommit(root))));
 };
 
 export type CommitPreviewProps = {
   commit: CommitReport,
-  tree: TreeReport,
 
   attributes?: [string, string][],
 
@@ -37,33 +37,46 @@ export type CommitPreviewProps = {
 
   depth?: number,
 
-  renderCommit: (commit: CommitReport) => Node,
+  renderCommit?: (commit: CommitID) => Node,
   onClick?: () => void,
 }
 
 export const CommitPreview: Component<CommitPreviewProps> = ({
-  commit, tree, depth = 0,
+  commit, depth = 0,
   attributes = [],
   renderCommit,
   color,
   onClick,
 }) => {
-  const children = commit.children
-    .map(childRef => tree.commits.get(childRef.id)).filter(c => !!c);
-
   const background = `hsl(${(depth * 22.3) % 360}deg, 50%, 80%)`;
   const elementBackground = color || `hsl(${stringHash(commit.element.type) % 360}deg, 60%, 80%)`;
+  const lineColor = `hsl(${stringHash(commit.id.toString()) % 360}, 100%, 20%)`
+
 
+  return hs('div', { className: classes.commit, style: { position: 'relative' }, id: `commit:${commit.id}` }, [
+    commit.children.length > 0 &&
+      h('div', { style: {
+        position: 'absolute',
+        top: '5px',
+        height: 'calc(100% - 18px)', width: '1px', background: lineColor, transform: `translate(20px, 0px)`
+      } }),
 
-  return hs('div', { className: classes.commit, style: { background } }, [
-    hs('div', { className: [classes.elementBar].join(' ') }, [
+    hs('div', { className: [classes.elementBar].join(' '), style: { 'position': 'relative' } }, [
       hs('button', { onClick, className: classes.elementName, style: { background: elementBackground } },
         commit.element.type),
-      //h(CommitAttributeTag, { name: 'Id', value: commit.id.toString() }),
+      h(CommitAttributeTag, { name: 'Id', value: commit.id.toString() }),
       attributes.map(([name, value]) => h(CommitAttributeTag, { name, value }))
       //h(CommitAttributeTag, { name: 'Version', value: commit.version.toString() }),
     ]),
-    hs('ol', { className: classes.commitList }, children.map(child => h('li', {}, renderCommit(child)))),
+
+    !!renderCommit && hs('ol', { className: classes.commitList }, commit.children.map(childId => h('li', { key: childId, style: { position: 'relative' } }, [
+      renderCommit(childId),
+      h('div', { style: {
+        top: 0,
+        width: '25px', height: '1px', 'border-top': '2px dotted black', position: 'absolute',
+        transform: `translate(-22px, 15px)`
+      }})
+    ]))),
   ])
 };
 

package/Virtual.ts

@@ -0,0 +1,64 @@
+import { Component, h, Node, ReadonlyRef, useEffect, useRef, useState } from "@lukekaalim/act";
+import { debounce } from 'lodash-es';
+
+export type VirtualTreeItem = {
+  depth: number,
+
+}
+
+export type VirtualTreeProps = {
+  chunkSize: number,
+  chunkCount: number,
+
+  windowRange: number,
+
+  renderChunk(index: number): Node,
+
+  viewportRef?: ReadonlyRef<HTMLElement | null>,
+}
+
+export const Virtual1D: Component<VirtualTreeProps> = ({ chunkSize, chunkCount, renderChunk, viewportRef: propViewportRef, windowRange }) => {
+  const [start, setStart] = useState(0);
+  const [end, setEnd] = useState(0);
+
+  const localViewportRef = useRef<HTMLElement | null>(null);
+  const viewportRef = propViewportRef || localViewportRef;
+
+  const listRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!viewportRef.current)
+      return;
+
+    const viewport = viewportRef.current;
+
+    const setViewport = () => {
+      const rect = viewport.getBoundingClientRect();
+
+      setStart(Math.floor((viewport.scrollTop) / chunkSize))
+      setEnd(Math.ceil((viewport.scrollTop + rect.height) / chunkSize))
+    };
+    setViewport();
+
+    viewport.addEventListener('scroll', setViewport)
+    return () => {
+      viewport.removeEventListener('scroll', setViewport)
+    }
+  }, [propViewportRef])
+
+  const renderedIndices = Array
+    .from({ length: end - start })
+    .map((_, i) => start + i)
+    .filter(x => x >= 0 && x < chunkCount);
+    
+
+  return [
+    //h('pre', {}, renderedIndices.join(', ')),
+    h('div', { ref: viewportRef, style: { overflow: 'auto', height: '100%' } },
+      h('div', { ref: listRef, style: { height: (chunkSize * chunkCount) + 'px', position: 'relative' } },
+        renderedIndices.map(index =>
+          h('div', { style: { position: 'absolute', top: (index * chunkSize) + 'px', height: chunkSize, padding: '-1', border: '1px dotted black', width: '100%' }},
+            renderChunk(index)))
+    ))
+  ];
+};

package/index.ts

@@ -1 +1,4 @@
-export * from './InsightApp';
+// export * from './InsightApp';
+export * from './TreeViewer';
+
+export * from './utils';

package/lookup.ts

@@ -0,0 +1,185 @@
+import { CommitReport, DeltaReport, ElementReport, ThreadReport, TreeReport, WorkTaskReport } from "@lukekaalim/act-debug";
+import { CommitID, CommitVersion, WorkThread2 } from "@lukekaalim/act-recon";
+
+export class MutableCommitRef {
+  element: ElementReport;
+  id: CommitID;
+  version: CommitVersion;
+  distance: number;
+
+  report: CommitReport;
+
+  children: MutableCommitRef[] = [];
+  parent: null | MutableCommitRef = null;
+
+  constructor(commit: CommitReport) {
+    this.element = commit.element;
+    this.id = commit.id;
+    this.version = commit.version;
+    this.distance = commit.distance;
+
+    this.report = commit;
+  }
+
+  update(commit: CommitReport) {
+    this.report = commit;
+    this.version = commit.version;
+    this.element = commit.element;
+  }
+
+  resolve(lookupMap: Map<CommitID, MutableCommitRef>) {
+    if (this.report.parent !== null)
+      this.linkParent(this.report.parent, lookupMap);
+    this.linkChildren(this.report.children, lookupMap);
+  }
+
+  linkParent(parent: CommitID, lookupMap: Map<CommitID, MutableCommitRef>) {
+    this.parent = lookupMap.get(parent) || null;
+  }
+  linkChildren(children: CommitID[], lookupMap: Map<CommitID, MutableCommitRef>) {
+    this.children = children.map(c => lookupMap.get(c)).filter(x => !!x);
+  }
+}
+
+export class CommitLookupCache {
+  map: Map<CommitID, CommitReport> = new Map();
+  roots: Set<CommitID> = new Set();
+
+  setTree(tree: TreeReport) {
+    this.map.clear();
+    this.roots.clear();
+
+    for (const commit of tree.commits) {
+      this.map.set(commit.id, commit)
+      if (!commit.parent)
+        this.roots.add(commit.id);
+    }
+  }
+
+  ingest(delta: DeltaReport) {
+    for (const create of delta.created) {
+      this.map.set(create.id, create);
+      if (!create.parent)
+        this.roots.add(create.id);
+    }
+    for (const update of delta.updated)
+      this.map.set(update.id, update);
+    for (const remove of delta.removed) {
+      this.map.delete(remove.id);
+      this.roots.delete(remove.id);
+    }
+  }
+}
+
+/**
+ * A bunch of relevant data for a Tree in the progress of changing
+ */
+export class ThreadLookupCache {
+  canon: CommitLookupCache;
+
+  report: DeltaReport | null = null;
+  thread: ThreadReport | null = null;
+
+  constructor(canon: CommitLookupCache) {
+    this.canon = canon;
+  }
+
+  roots: Set<CommitID> = new Set();
+
+  created: Set<CommitID> = new Set();
+  updated: Set<CommitID> = new Set();
+  removed: Set<CommitID> = new Set();
+
+  /**
+   * An up to date map of the tree, plus deleted notes in this delta
+   */
+  all: Map<CommitID, CommitReport> = new Map();
+
+  nextTask: WorkTaskReport | null = null;
+  prevTask: WorkTaskReport | null = null;
+  
+  allTasks: Map<CommitID, WorkTaskReport> = new Map();
+
+  targets: Set<CommitID> = new Set();
+  visited: Set<CommitID> = new Set();
+
+  /**
+   * Clear the delta cache
+   */
+  reset() {
+    this.roots = new Set(this.canon.roots)
+    this.all = new Map(this.canon.map);
+    this.allTasks = new Map();
+
+    this.nextTask = null;
+    this.prevTask = null;
+    this.report = null;
+
+    this.created.clear();
+    this.updated.clear();
+    this.removed.clear();
+
+    this.targets.clear();
+    this.visited.clear();
+  }
+
+  ingestThread(thread: ThreadReport) {
+    this.thread = thread;
+
+    this.nextTask = thread.pendingTasks[thread.pendingTasks.length - 1];
+    this.targets = new Set(thread.reasons.map(reason => reason.target));
+    this.visited = new Set(thread.visited)
+    this.allTasks = new Map(thread.pendingTasks.map(task => [task.id, task]))
+  }
+
+  ingestDelta(delta: DeltaReport) {
+    this.report = delta;
+    const createdIds = new Set(delta.created.map(c => c.id));
+
+    for (const commit of delta.created) {
+      this.created.add(commit.id)
+
+      const children = [...new Set(commit.children.filter(c => this.all.has(c) || createdIds.has(c)))]
+      this.all.set(commit.id, { ...commit, children });
+
+      if (!commit.parent)
+        this.roots.add(commit.id);
+    }
+    for (const commit of delta.updated) {
+      const existingCommit = this.canon.map.get(commit.id) as CommitReport;
+
+      const children = [...new Set([
+        ...commit.children.filter(c => this.all.has(c)),
+        ...existingCommit.children,
+      ])]
+      const mergedCommitReport = { ...commit, children };
+
+      this.updated.add(commit.id)
+      this.all.set(commit.id, mergedCommitReport)
+    }
+    for (const commit of delta.removed) {
+      this.removed.add(commit.id);
+      this.all.set(commit.id, commit);
+    }
+  }
+
+  getFlat() {
+    const pending: CommitReport[] = [...this.roots.values()]
+      .map(root => this.all.get(root))
+      .filter(x => !!x);
+
+    const flat: CommitReport[] = [];
+    
+    while (pending.length > 0) {
+      const commit = pending.pop() as CommitReport;
+      flat.push(commit);
+      for (const childId of [...commit.children].reverse()) {
+        const child = this.all.get(childId);
+        if (child)
+          pending.push(child);
+      }
+    }
+
+    return flat;
+  }
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@lukekaalim/act-insight",
   "main": "index.ts",
-  "version": "0.0.2-alpha.6",
+  "version": "1.1.0",
   "scripts": {},
   "dependencies": {
     "@lukekaalim/act": "*",
-    "@lukekaalim/act-recon": "3.0.0-alpha.4",
-    "@lukekaalim/act-web": "3.4.0-alpha.3",
-    "@lukekaalim/act-debug": "1.0.0-alpha.0",
+    "@lukekaalim/act-recon": "3.1.0",
+    "@lukekaalim/act-web": "5.0.0",
+    "@lukekaalim/act-debug": "1.0.1",
     "@sindresorhus/string-hash": "^2.0.0",
     "@types/firefox-webext-browser": "^120.0.4",
     "lodash-es": "^4.17.21"

package/utils.ts

@@ -1,52 +1,64 @@
-import { Element, errorBoundaryType, primitiveNodeTypes, providerNodeType, renderNodeType } from "@lukekaalim/act";
-import { CommitPath, CommitRef } from "@lukekaalim/act-recon";
-
-export const getElementName = (element: Element) => {
-  if (typeof element.type === 'function')
-    return `<component(${element.type.name})>`;
-  if (typeof element.type === 'symbol')
-    switch (element.type) {
-      case primitiveNodeTypes.number:
-        return `<number value={${element.props.value}}>`
-      case primitiveNodeTypes.string:
-        return `<string value="${element.props.value}">`
-      case primitiveNodeTypes.boolean:
-        return `<boolean value="${element.props.value}">`
-      case primitiveNodeTypes.array:
-        return `<array>`
-      case primitiveNodeTypes.null:
-        return `<null>`
-      case renderNodeType:
-        return `<render type="${element.props.type}">`;
-      case providerNodeType:
-        return `<context id="${element.props.id}">`;
-      case errorBoundaryType:
-        return `<boundary>`;
-      default:
-        return `<symbol>`
-    }
-  if (element.type)
-    return `<${element.type}>`;
-  return '<none>';
+
+import { h, Node } from "@lukekaalim/act";
+import { NodeBuilder, RenderSpace2 } from "@lukekaalim/act-backstage";
+import { createDebugScheduler, DebugReconciler } from "@lukekaalim/act-debug";
+import { createWebNodeBuilder, HTML, render } from "@lukekaalim/act-web";
+import { InsightApp } from "./InsightApp";
+import { Reconciler2 } from "@lukekaalim/act-recon";
+
+export type DevOptions = {
+  mode?: 'extension' | 'popup' | 'none'
+};
+
+export const renderDEV = (node: Node, builders: NodeBuilder<any, any>[], { mode = 'none' }: DevOptions = {}) => {
+  const reconciler = new DebugReconciler();
+  const spaces = builders.map(builder => new RenderSpace2(reconciler.tree, builder));
+  
+  reconciler.bus = {
+    render(delta) {
+      for (const space of spaces)
+        space.create(delta);
+      for (const space of spaces)
+        space.update(delta);
+    },
+  }
+  switch (mode) {
+    case 'popup':
+      createDebugPopup(reconciler);
+      break;
+    default:
+  }
+
+  const ref = reconciler.mount(node);
+  return {ref, reconciler}
 }
 
 
-export const findCommonAncestor = (commitRefs: CommitRef[]) => {
-  let commonAncestorPath: CommitPath | null = null;
-  for (const ref of commitRefs) {
-    if (!commonAncestorPath)
-      commonAncestorPath = ref.path
-    else {
-      for (const id of [...ref.path].reverse()) {
-        const index = commonAncestorPath.indexOf(id);
-        if (index !== -1) {
-          commonAncestorPath = commonAncestorPath.slice(0, index + 1)
-          break;
-        }
-      }
+export const createDebugPopup = async (reconciler: DebugReconciler) => {
+  const newWindow = window.open('', "DevTools", "popup");
+  if (!newWindow)
+    throw new Error(`Unable to make/find new window!`);
+
+  const body = newWindow.document.body;
+  for (const child of [...body.childNodes, ...newWindow.document.head.childNodes])
+    child.remove();
+
+  for (const headElement of [...window.document.head.childNodes])
+    if (headElement instanceof HTMLStyleElement)
+        newWindow.document.head.appendChild(headElement.cloneNode(true))
+    else if (headElement instanceof HTMLLinkElement) {
+      const element = headElement.cloneNode(true) as HTMLLinkElement;
+      const src = new URL(element.href, document.location.href);
+      element.href = src.href;
+      newWindow.document.head.appendChild(element)
     }
-  };
-  if (commonAncestorPath)
-    return CommitRef.from(commonAncestorPath);
-  return null;
+    
+  return new Promise<void>(onReady => {
+    render(
+      h(InsightApp, { controller: reconciler.controller, bus: reconciler.debugBus, document: newWindow.document, onReady }),
+      body,
+      { window: newWindow }
+    );
+  })
+
 }

package/vite.config.ts

@@ -1,11 +1,11 @@
 import { defineConfig } from 'vite';
-import webExtension from "vite-plugin-web-extension";
+//import webExtension from "vite-plugin-web-extension";
 
 export default defineConfig({
   build: {
     modulePreload: false
   },
-  plugins: [webExtension({
-    browser: 'firefox'
-  })],
+  //plugins: [webExtension({
+  //  browser: 'firefox'
+  //})],
 });

package/CommitViewer.module.css

@@ -1,5 +0,0 @@
-.commitViewer {
-  position: fixed;
-  right: 0px;
-  width: 40%;
-}