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

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @lukekaalim/act-insight
 
+## 1.1.0
+
+### Minor Changes
+
+- bcbd299: SSR API for @lukekaalim/act-web
+- beec21c: Fixed Web text element rehydration, remove nodejs dependencies from dehydration
+
+### Patch Changes
+
+- Updated dependencies [bcbd299]
+- Updated dependencies [beec21c]
+  - @lukekaalim/act-web@5.0.0
+  - @lukekaalim/act-recon@3.1.0
+  - @lukekaalim/act@4.1.0
+  - @lukekaalim/act-debug@1.0.1
+
+## 1.0.0
+
+### Major Changes
+
+- afd247e: Another major refactor! So everything is broken. Good luck!
+
+### Patch Changes
+
+- Updated dependencies [6658c01]
+- Updated dependencies [bd0a076]
+- Updated dependencies [fdf1557]
+- Updated dependencies [7597a8f]
+- Updated dependencies [ccb3900]
+- Updated dependencies [afd247e]
+- Updated dependencies [2984273]
+- Updated dependencies [b3f6c49]
+- Updated dependencies [c5e8775]
+  - @lukekaalim/act-web@4.0.0
+  - @lukekaalim/act-recon@3.0.0
+  - @lukekaalim/act@4.0.0
+  - @lukekaalim/act-debug@1.0.0
+
 ## 0.0.2-alpha.6
 
 ### Patch Changes

package/InsightApp.ts

@@ -1,209 +1,404 @@
-import { Component, Element, h, useEffect, useMemo, useRef, useState } from '@lukekaalim/act';
-import { Commit, CommitID, CommitTree, DeltaSet, Reconciler, Update, WorkThread } from '@lukekaalim/act-recon';
-import { hs } from '@lukekaalim/act-web';
-
+import { Component, h, useEffect, useMemo, useRef, useState } from '@lukekaalim/act';
+import { CommitDetailsReport, CommitReport, DeltaReport, ReconcilerDebugController, ReconcilerDebugEventBus, ThreadReport, updateTreeReport, ValueReport, WorkTaskReport } from '@lukekaalim/act-debug';
+import { CommitID } from '@lukekaalim/act-recon';
 import { CommitPreview, TreeViewer } from './TreeViewer';
-
-import { debounce } from 'lodash-es'
-import { getElementName } from './utils';
-import { CommitViewer } from './CommitViewer';
-import classes from './InsightApp.module.css';
-import { InsightMode } from './mode';
-import { MenuBar } from './MenuBar';
-import { ThreadViewer } from './ThreadViewer';
-import { DebuggerServer } from '@lukekaalim/act-debug';
-import { CommitReport, CommitStateReport, TreeReport, updateTreeReport } from '@lukekaalim/act-debug/report';
+import { ScheduleControls } from './ScheduleControls';
+import { CommitLookupCache, ThreadLookupCache } from './lookup';
+import { Virtual1D } from './Virtual';
+import { CommitAttributeTag } from './AttributeTag';
 
 export type InsightAppProps = {
-  server: DebuggerServer,
+  controller: ReconcilerDebugController,
+  bus: ReconcilerDebugEventBus,
+
+  document: Document,
+
+  onReady(): void,
+};
+
+export type InsightAppState = {
+  breakOnAfterUpdate: boolean,
+  breakOnBeforeUpdate: boolean,
+
+  commitBreakpoints: Set<CommitID>,
+
+  paused: boolean,
 }
 
-export const InsightApp2: Component<InsightAppProps> = ({ server }) => {
-  const [tree, setTree] = useState<TreeReport>({ commits: new Map(), roots: [] });
-  const [commitId, setCommitId] = useState<CommitID | null>(null);
-  const [commitState, setCommitState] = useState<CommitStateReport | null>(null);
+const INSIGHT_SETTINGS_LOCALSTORAGE_KEY = `INSIGHT_SETTINGS`;
+
+export const InsightApp: Component<InsightAppProps> = ({ onReady, controller, bus, document = window.document }) => {
+  const [c, setRenderCounter] = useState(0);
+
+  const storedState = useMemo(() => {
+    const settings = window.localStorage.getItem(INSIGHT_SETTINGS_LOCALSTORAGE_KEY)
+    if (!settings)
+      return;
+    return JSON.parse(settings) as { breakOnAfterUpdate: boolean, breakOnBeforeUpdate: boolean };
+  }, [])
 
+  const [insightState, setInsightState] = useState<InsightAppState>({
+    commitBreakpoints: new Set(),
+    breakOnAfterUpdate: storedState ? storedState.breakOnAfterUpdate : false,
+    breakOnBeforeUpdate: storedState ? storedState.breakOnBeforeUpdate : false,
+    paused: false,
+  });
   useEffect(() => {
-    server.subscribe((event) => {
-      switch (event.type) {
-        case 'thread:finish':
-          setTree(tree => {
-            return updateTreeReport(tree, event.thread);
-          });
-          break;
-        case 'tree:root-update':
-          setTree(tree => {
-            return { ...tree, roots: event.roots };
-          });
-          break;
-        case 'commit-state:response':
-          setCommitState(event.report);
-          setCommitId(event.commitId);
-          break;
-      }
-    })
-    server.ready();
-    return;
-  }, [server])
+    window.localStorage.setItem(INSIGHT_SETTINGS_LOCALSTORAGE_KEY, JSON.stringify({
+      breakOnAfterUpdate: insightState.breakOnAfterUpdate,
+      breakOnBeforeUpdate: insightState.breakOnBeforeUpdate,
+    }))
+  }, [insightState])
+
+  const commitCache = useRef(() => new CommitLookupCache()).current;
+  const deltaCache = useRef(() => new ThreadLookupCache(commitCache)).current;
+
+  useMemo(() => {
+    commitCache.setTree(controller.getTree())
+    deltaCache.reset();
+  }, [])
 
   useEffect(() => {
-    if (commitId)
-      server.commitState(commitId);
-  }, [tree, commitId])
+    console.log('[Insight] Populate Cache')
 
-  const renderCommit = (commit: CommitReport) => {
-    const onClick = () => {
-      server.commitState(commit.id);
-    };
+    bus.externalUpdate = () => {
+      const delta  = controller.getDelta();
+      const thread = controller.getThread();
 
-    return h(CommitPreview, { commit, renderCommit, tree, onClick });
-  }
+      commitCache.setTree(controller.getTree())
 
-  const selectedCommit = commitId && tree.commits.get(commitId) || null;
+      deltaCache.ingestDelta(delta);
+      deltaCache.ingestThread(thread);
+      setRenderCounter(c => c + 1);
+    }
 
-  return h('div', { style: { display: 'flex', flexDirection: 'row' } }, [
-    h(TreeViewer, { tree, renderCommit, }),
-    commitState && selectedCommit &&
-      h(CommitViewer, { commit: selectedCommit, state: commitState }),
-  ]);
-}
+    bus.onThreadDone = (thread, delta) => {
+      console.log('[Insight] ThreadDone')
+      commitCache.ingest(delta);
+      deltaCache.ingestDelta(delta);
+      deltaCache.ingestThread(thread);
+      deltaCache.prevTask = null;
+      setRenderCounter(c => c + 1);
 
-export const InsightApp: Component<InsightAppProps> = () => {
-  throw new Error();
+      for (const subscriber of cacheSubscribers) {
+        subscriber();
+      }
+    }
+    bus.thread.onQueue = (reason) => {
+      console.log('[Insight] OnQueue')
+      const thread = controller.getThread();
+      
+      if (thread.reasons.length === 1) {
+        if (insightState.breakOnBeforeUpdate)
+          controller.scheduler.intercept = true;
 
-  const [mode, setMode] = useState<InsightMode>('tree');
+        commitCache.setTree(controller.getTree())
+        
+        deltaCache.reset();
+        deltaCache.ingestThread(thread);
+        setRenderCounter(c => c + 1);
 
-  const [renderReportIndex, setRenderReportIndex] = useState(0);
-  const [renderReports, setRenderReports] = useState<WorkThread[]>([]);
-  const [tree, setTree] = useState<null | CommitTree>(null);
+        for (const subscriber of cacheSubscribers) {
+          subscriber();
+        }
+      }
+    }
+    bus.thread.onWork = (prevTask, nextTask, isDone) => {
 
-  const [currentThread, setCurrentThread] = useState<WorkThread | null>(null);
+      if (insightState.breakOnAfterUpdate && isDone) {
+        controller.scheduler.intercept = true;
+      }
+      if (nextTask && insightState.commitBreakpoints.has(nextTask.id)) {
+        controller.scheduler.intercept = true;
+      }
 
-  const currentReport = renderReports[renderReportIndex] || null;
-  const rootCommits = tree && CommitTree.getRootCommits(tree) || [];
+      if (controller.scheduler.intercept) {
+        const thread = controller.getThread();
+        const delta = controller.getDelta();
+        
+        deltaCache.ingestDelta(delta);
+        deltaCache.ingestThread(thread);
+        setRenderCounter(c => c + 1);
 
-  const [pendingWork, setPendingWork] = useState(false)
-  const [autoWork, setAutoWork] = useState(false);
+        for (const subscriber of cacheSubscribers) {
+          subscriber();
+        }
 
-  const updateThread = useMemo(() => {
-    return debounce(() => {
-      console.log('updating thread');
-      const currentThread = reconciler.state.thread;
-      if (currentThread)
-        setCurrentThread(WorkThread.clone(currentThread));
-      else
-        setCurrentThread(null);
-    }, 100, { leading: true, trailing: true, maxWait: 100 });
-  }, []);
+        if (prevTask)
+          deltaCache.prevTask = prevTask;
+      }
+    }
 
-  //const [counter, setCounter] = useState(0);
+    onReady();
+  }, [controller, bus, insightState]);
+
+  const cacheSubscribers = useRef<Set<() => void>>(new Set()).current;
+
+  const scrollToCommitIndex = useMemo(() => {
+    return (index: number) => {
+      if (!viewportRef.current)
+        return;
+      const viewPortRect = viewportRef.current.getBoundingClientRect();
+      if (index) {
+        viewportRef.current.scrollTo({
+          top: (index * 33) - (viewPortRect.height / 2),
+          behavior: 'smooth'
+        })
+        return;
+      }
+    }
+  }, []);
 
   useEffect(() => {
+    const { nextTask, prevTask } = deltaCache;
 
-    const renderSub = reconciler.on('on-thread-complete', (thread) => {
-      setRenderReports(rrs => [...rrs, WorkThread.clone(thread)])
-      setTree(reconciler.tree);
-      updateThread();
-    });
+    const task = nextTask || prevTask;
+    const index = task && commits.findIndex(c => (nextTask && c.id === nextTask.id) || (prevTask && prevTask.id === c.id));
     
-    reconciler.on('on-thread-update', () => {
-      setTree(reconciler.tree);
-      updateThread();
-    })
+    if (index && index !== -1) {
+      scrollToCommitIndex(index);
+    }
+  }, [deltaCache.prevTask, deltaCache.nextTask, scrollToCommitIndex])
+
+  const renderCommit = useMemo(() => (commitId: CommitID) => {
+    return h(CommitComponent, { commitId })
+  }, []);
+
+  const CommitComponent = useMemo((): Component<{ commitId: CommitID }> => ({ commitId }) => {
+    const [c, setRenderCounter] = useState(0);
+
+    useEffect(() => {
+      const subscription = () => {
+        const commit = deltaCache.all.get(commitId);
+        const originalCommit = commitCache.map.get(commitId);
+
+        const inTaskList = deltaCache.allTasks.has(commitId);
+        
+        if (commit !== originalCommit || inTaskList || (deltaCache.prevTask && deltaCache.prevTask.id === commitId))
+          setRenderCounter(c => c + 1);
+      }
+      cacheSubscribers.add(subscription);
+      subscription();
+
+      return () => {
+        console.log(`[Commit] Cleaning up ${commitId}`)
+        cacheSubscribers.delete(subscription);
+      }
+    }, [commitId])
+
+    const commit = deltaCache.all.get(commitId) || null;
+    if (!commit)
+      return (console.warn(`[Commit] Commit ${commitId} not found in delta cache`), null);
+
+    const color = 
+      (deltaCache.nextTask && deltaCache.nextTask.id === commit.id) ? '#e1d600ff'
+      : deltaCache.targets.has(commit.id) ? '#db55e7ff'
+      : deltaCache.allTasks.has(commit.id) ? '#ea931aff'
+      : deltaCache.created.has(commit.id) ? (deltaCache.prevTask && deltaCache.prevTask.id === commit.id ? '#4bc847ff' : '#21a51cff')
+      : deltaCache.removed.has(commit.id) ? '#f25252ff'
+      : deltaCache.updated.has(commit.id) ? '#1ab9eaff'
+      : deltaCache.visited.has(commit.id) ? '#6f6f97ff'
+      : '#cacaca';
     
+    if (!commit)
+      return (console.log(`[Commit] ${commitId} not ready yet??`), null);
 
-    onReady();
-    return () => {
-      renderSub.cancel();
-    }
+    return useMemo(() => h(CommitPreview, { commit, renderCommit, color, onClick: () => setSelectedCommitId(commit.id) }), [
+      commit.version,
+      color,
+    ])
   }, [])
 
-  useEffect(() => {
-    if (autoWork) {
-      const id = setInterval(() => {
-        scheduler.work();
-      }, 5);
-      return () => clearInterval(id);
-    }
-  }, [autoWork, reconciler])
+  const reload = () => {
+    commitCache.setTree(controller.getTree())
+    deltaCache.reset();
+    deltaCache.ingestDelta(controller.getDelta());
+    deltaCache.ingestThread(controller.getThread());
 
-  const onWorkClick = () => {
-    setPendingWork(false);
-    scheduler.work();
-    updateThread();
-  }
-  const onToggleAutoWork = (e: Event) => {
-    setAutoWork((e.target as HTMLInputElement).checked);
+    setRenderCounter(c => c + 1)
   }
 
-  const [selectedCommit, setSelectedCommit] = useState<null | CommitID>(null);
-  const onSelectCommit = (id: CommitID) => {
-    if (selectedCommit === id)
-      setSelectedCommit(null)
-    else
-      setSelectedCommit(id)
-  }
+  const viewportRef = useRef<HTMLElement | null>(null);
 
-  const renderCommit = (depth: number) => (commit: Commit) => {
-    if (!tree)
-      return null;
-    return h(CommitPreview, {
-      commit,
-      tree,
-      depth,
-      renderCommit: renderCommit(depth + 1),
-      onSelectCommit,
-      attributes: [
-        ['Id', commit.id.toString()]
-      ],
-      selectedCommits: new Set(selectedCommit ? [selectedCommit] : [])
-    })
-  }
+  const [selectedCommitId, setSelectedCommitId] = useState<CommitID | null>(null)
+  const [selectedCommitDetails, setSelectedCommitDetails] = useState<CommitDetailsReport | null>(null)
 
-  return h('div', { className: classes.insight }, [
-    h(MenuBar, { currentMode: mode, onSelectMode: setMode }),
-    mode === 'thread' && hs('div', {}, [
-      hs('button', { onClick: onWorkClick }, pendingWork ? 'Do Pending Work' : 'Work'),
-      hs('label', {}, [
-        hs('span', {}, 'Toggle Auto-Work'),
-        hs('input', { type: 'checkbox', onInput: onToggleAutoWork, checked: autoWork }),
-      ])
+  useEffect(() => {
+    if (!selectedCommitId)
+      return;
+
+    const details = controller.getDetails(selectedCommitId);
+    setSelectedCommitDetails(details)
+  }, [selectedCommitId])
+
+  const roots = [...deltaCache.roots.keys()];
+  const commits = deltaCache.getFlat();
+
+  const CHUNK_SIZE = 8;
+
+  return h('div', { style: { display: 'flex', 'flex-direction': 'column', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } }, [
+    h('div', { style: { flex: 0, display: 'flex' } }, [
+      h(ScheduleControls, {
+        controller: controller.scheduler,
+        bus: bus.scheduler,
+        reconciler: controller,
+
+        state: insightState,
+        onStateChange: setInsightState,
+      }),
+      h('button', { onClick: reload}, 'Reload'),
     ]),
-    mode === 'thread' && currentThread && h(ThreadViewer, { thread: currentThread, tree: tree || CommitTree.new() }),
-    //hs('pre', {}, counter),
-    mode === 'tree' && hs('div', { className: classes.treeExplorer }, [
-      tree && [
-        h(TreeViewer, { tree, selectedCommits: new Set(selectedCommit ? [selectedCommit] : []), onSelectCommit,
-          renderCommit: renderCommit(0)
-         }),
-      ],
-      selectedCommit && tree && [
-        h(CommitViewer, { tree, commitId: selectedCommit, reconciler })
-      ]
-    ])
-  ]);
-};
+    h('div', { style: { flex: 1, overflow: 'hidden', background: '#c0d7ddff', display: 'flex' } }, [
+      h('div', { style: { flex: 1 } },
+        //h(TreeViewer, { roots, renderCommit }),
+        h(Virtual1D, { viewportRef, windowRange: 5, chunkCount: commits.length / CHUNK_SIZE, chunkSize: (33 * CHUNK_SIZE), renderChunk(index) {
+          if (index < 0)
+            return null;
 
-const UpdateDesc = ({ update }: { update: Update }) => {
-  if (update.prev && update.next)
-    return `Update ${update.ref.id} (${getElementName(update.next)})`;
-  if (update.prev && !update.next)
-    return `Destroy ${update.ref.id} (${getElementName(update.prev.element)})`;
-  if (!update.prev && update.next)
-    return `Create ${update.ref.id} (${getElementName(update.next)})`;
-  return `???`;
-}
+          return Array.from({ length: CHUNK_SIZE }).map((_, chunkIndex) => {
+            const report = commits[(index  * CHUNK_SIZE) + (chunkIndex)];
+            if (!report)
+              return null;
+
+            const color = getCommitColor(deltaCache, report.id);
+
+            const onClick = () => {
+              setSelectedCommitId(report.id);
+            };
+            const attributes: [string, string][] = [
+              insightState.commitBreakpoints.has(report.id) ? ['Breakpoint', 'Enabled'] as [string, string] : null
+            ].filter(x => !!x)
+
+            return h('div', { style: { 'margin-left': ((report.distance - 1) * 32) + 'px', height: '33px' } }, [
+              h(CommitPreview, { color, commit: report, onClick, attributes })
+            ])
+          });
+        }, })
+      ),
+      h('div', { style: { 'min-width': '300px', flex: 0, background: '#ffdeabff' } }, [
+        deltaCache.thread && h('div', { }, [
+          h('dl', {}, [
+            h('dt', {}, 'Thread ID'),
+            h('dd', {}, deltaCache.thread.id),
+            h('dt', {}, 'Thread Done'),
+            h('dd', {}, deltaCache.thread.done.toString()),
+            h('dt', {}, 'Thread Passes'),
+            h('dd', {}, deltaCache.thread.passes),
+            h('dt', {}, 'Tasks (count)'),
+            h('dd', {}, deltaCache.thread.pendingTasks.length),
+            h('dt', {}, 'Visited (count)'),
+            h('dd', {}, deltaCache.thread.visited.length),
+            h('dt', {}, 'Created (count)'),
+            h('dd', {}, deltaCache.created.size),
+            h('dt', {}, 'Updated (count)'),
+            h('dd', {}, deltaCache.updated.size),
+            h('dt', {}, 'Removed (count)'),
+            h('dd', {}, deltaCache.removed.size),
+            h('dt', {}, 'MustRender '),
+            h('dd', {}, deltaCache.thread.mustRender.map(commitId => {
+              const commit = deltaCache.all.get(commitId);
+              if (!commit)
+                return null;
+              const color = getCommitColor(deltaCache, commitId);
+
+              return h(CommitPreview, {
+                commit,
+                color,
+                onClick: () => (scrollToCommitIndex(commits.indexOf(commit)), setSelectedCommitId(commitId))
+              })
+            })),
+            h('dt', {}, 'Missed'),
+            h('dd', {}, deltaCache.thread.missed.map(commitId => {
+              const commit = deltaCache.all.get(commitId);
+              if (!commit)
+                return null;
+              const color = getCommitColor(deltaCache, commitId);
 
-export type CommitTreeLeafProps = {
-  commit: Commit,
-  tree: CommitTree,
+              return h(CommitPreview, {
+                commit,
+                color,
+                onClick: () => (scrollToCommitIndex(commits.indexOf(commit)), setSelectedCommitId(commitId))
+              })
+            })),
+          ])
+        ]),
+        h('hr'),
+        selectedCommitDetails && [
+          h(CommitPreview, {
+            commit: selectedCommitDetails.commit,
+            color: getCommitColor(deltaCache, selectedCommitDetails.commit.id),
+            onClick: () => (scrollToCommitIndex(commits.indexOf(selectedCommitDetails.commit)), setSelectedCommitId(selectedCommitDetails.commit.id))
+          }),
+          h('button', { onClick: () => {
+            setInsightState(state => {
+              const prev = state.commitBreakpoints;
+              if (prev.has(selectedCommitDetails.commit.id)) {
+                prev.delete(selectedCommitDetails.commit.id)
+                return { ...state, commitBreakpoints: new Set(prev) };
+              }
+              prev.add(selectedCommitDetails.commit.id)
+              return { ...state, commitBreakpoints: new Set(prev) }
+            })
+          }}, 'Toggle Breakpoint'),
+          h('h3', {}, 'Parent'),
+          (() => {
+            const parentId = selectedCommitDetails.commit.parent;
+            if (!parentId)
+              return 'NO PARENT';
+            const parent = deltaCache.all.get(parentId);
+            if (!parent)
+              return h(CommitAttributeTag, { name: 'ParentID', value: parentId.toString() });
+
+            return h(CommitPreview, {
+              commit: parent,
+              color: getCommitColor(deltaCache, parent.id),
+              onClick: () => (scrollToCommitIndex(commits.indexOf(parent)), setSelectedCommitId(parent.id))
+            });
+          })(),
+          h('h3', {}, 'Props'),
+          h('ul', {},
+            Object.entries(selectedCommitDetails.props).map(([prop, value]) => {
+              return h('li', {}, `${prop} = ${getTextForValue(value)}`);
+            })
+          )
+        ]
+      ])
+    ])
+  ])
 }
 
-const CommitTreeLeaf: Component<CommitTreeLeafProps> = ({ commit, tree }) => {
-  return [
-    hs('pre', {}, [getElementName(commit.element), ` id=${commit.id} v=${commit.version}`]),
-    hs('ul', {}, commit.children
-      .map(ref => tree.commits.get(ref.id) as Commit)
-      .map(commit => h(CommitTreeLeaf, { commit, tree })))
-  ];
+
+export const getTextForValue = (value: ValueReport): string => {
+  switch (value.type) {
+    case 'primitive':
+      switch (typeof value.value) {
+        case 'object':
+          return `null`;
+        case 'string':
+        case 'boolean':
+        case 'number':
+          return value.value.toString();
+      }
+    case 'complex':
+      return value.name;
+    case 'undefined':
+      return `undefined`;
+    default:
+      return  value;
+  }
 }
+
+const getCommitColor = (deltaCache: ThreadLookupCache, commitId: CommitID) => {
+
+  const color = 
+    (deltaCache.nextTask && deltaCache.nextTask.id === commitId) ? '#e1d600ff'
+    : deltaCache.targets.has(commitId) ? '#db55e7ff'
+    : deltaCache.allTasks.has(commitId) ? '#ea931aff'
+    : deltaCache.created.has(commitId) ? (deltaCache.prevTask && deltaCache.prevTask.id === commitId ? '#4bc847ff' : '#21a51cff')
+    : deltaCache.removed.has(commitId) ? '#f25252ff'
+    : deltaCache.updated.has(commitId) ? '#1ab9eaff'
+    : deltaCache.visited.has(commitId) ? '#6f6f97ff'
+    : '#cacaca';
+
+  return color;
+}