@lukekaalim/act-insight 1.0.0 → 2.0.0

package/components/index.module.css

@@ -0,0 +1,414 @@
+.controlBar {
+  display: flex;
+  flex-direction: row;
+
+  background-color: rgb(236, 236, 236);
+  border-bottom: 1px solid rgba(110, 110, 110, 0.473);
+}
+
+.toggle {
+  display: flex;
+  flex-direction: row;
+
+  background: rgba(240, 240, 240, 0);
+  border: none;
+  border-radius: 4px;
+  padding: 2px;
+  margin: 4px;
+  transition: background 0.1s, opacity 0.1s;
+}
+.toggle.off {
+  opacity: 0.5;
+}
+.toggle:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.466);
+}
+.toggle:disabled {
+  opacity: 1;
+  background: rgb(255, 255, 255);
+}
+
+.controlBar > .breakpointToggle {
+  position: absolute;
+  left: 0;
+
+}
+
+.controlBar > .inspectorToggle {
+  position: absolute;
+  right: 0;
+}
+
+.controlBar > .windowToggle {
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+}
+
+.controlBar > .windowToggle > button {
+
+}
+
+.panel {
+  padding: 4px;
+
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.panelContainer {
+  width: 300px;
+  position: relative;
+
+  border-right: 1px solid rgba(110, 110, 110, 0.473);
+  border-left: 1px solid rgba(110, 110, 110, 0.473);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.namedBreakpointList {
+  display: flex;
+  flex-direction: column;
+}
+
+.hit {
+  background: red;
+}
+
+.playbackBar {
+  position: absolute;
+  bottom: 120px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.playbackBar > menu {
+  margin: 0;
+
+  padding: 4px;
+  background-color: rgb(134, 78, 66);
+  border-radius: 6px;
+
+  gap: 4px;
+  display: flex;
+  flex-direction: row;
+}
+.breakLocation {
+  position: absolute;
+  bottom: -58px;
+
+  color: white;
+  background-color: rgb(200, 61, 29);
+  padding: 4px;
+  border-radius: 6px;
+
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+
+  transform: translateX(-50%);
+  left: 50%;
+  align-items: center;
+}
+
+.playbackButton {
+  background: white;
+  border: none;
+  border-radius: 4px;
+
+  cursor: pointer;
+  transition: transform 0.1s;
+}
+
+.playbackButton img {
+  width: 24px;
+  height: 24px;
+}
+
+.playbackButton:hover {
+  transform: scale(1.1);
+}
+.playbackButton:active {
+  transform: scale(0.9);
+}
+
+.commitRowBackground {
+  position: absolute;
+  height: 33px;
+  background-color: #ffffff;
+}
+
+.commitRow:nth-child(odd) > .commitRowBackground {
+  background-color: #f4f4f4;
+}
+
+.commitRow > img {
+  position: absolute;
+  height: 33px;
+  width: 33px;
+}
+
+.commitRowPreviewContainer {
+  height: 33px;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.commitRowControls {
+  display: inline-flex;
+  height: 33px;
+  align-items: center;
+}
+
+.commitRowBreakpointToggle {
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: none;
+
+  cursor: pointer;
+  transition: transform 0.1s, opacity 0.2s;
+  opacity: 1;
+}
+.commitRowBreakpointToggle:hover {
+  transform: scale(1.2);
+  opacity: 1;
+}
+
+.commitRowBreakpointToggle > img {
+  height: 22px;
+}
+
+.iconButton {
+  border: 0;
+  border-radius: 4px;
+  background: white;
+  border: 1px solid rgba(44, 44, 44, 0.26);
+  cursor: pointer;
+  padding: 4px 6px;
+
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  align-items: center;
+}
+.iconButton:hover {
+  opacity: 1;
+  border: 1px solid rgba(34, 34, 34, 0.61);
+  background: rgb(243, 243, 243);
+}
+.iconButton:active {
+  opacity: 1;
+  border: 1px solid black;
+}
+
+.iconButton > img {
+  height: 20px;
+}
+
+.commitControlBar {
+  display: flex;
+  flex-direction: row;
+
+  margin: 0 auto;
+  gap: 4px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  background-color: rgb(231, 231, 231);
+}
+
+.commitRowCollapseButton {
+  position: absolute;
+  left: 0;
+  transform: translateX(-100%);
+
+  background: none;
+}
+.commitRowCollapseButton:hover {
+  background: none;
+}
+
+.commitInspectorPreviewRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.commitInspector {
+  display: flex;
+  flex-direction: column;
+
+  gap: 8px;
+}
+
+.commitTree {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  margin: 8px;
+}
+.effectTable {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.selected {
+  font-weight: bold;
+}
+
+.filterButton {
+  position: absolute;
+
+  right: 8px;
+  top: 8px;
+}
+.filterPanel {
+  position: absolute;
+  top: 42px;
+  right: 8px;
+
+  padding: 8px;
+  border-radius: 8px;
+
+  background: rgb(235, 235, 238);
+  backdrop-filter: blur(4px);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.commitList, .effectList {
+  padding: 0;
+  margin: 4px;
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+
+  list-style: none;
+}
+
+.commitList > li, .effectList > li {
+  display: flex;
+}
+
+.threadInspector {
+  padding: 8px;
+  margin: 16px;
+  border-radius: 8px;
+
+  background-color: rgb(243, 205, 183);
+  border: 1px solid #f08b7b;
+  box-shadow: 0 4px 4px #00000024;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.lineageColumn {
+  margin: 16px;
+  padding: 8px;
+  list-style: none;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #c6f094;
+  border: 1px solid #a1d0a1;
+  border-radius: 8px;
+  box-shadow: 0 4px 4px #00000024;
+}
+
+.lineageColumn > li {
+
+}
+
+.lineageColumn > img {
+  height: 20px;
+}
+
+.grabHandle {
+  position: absolute;
+  background: #ddd;
+  border: 1px solid #bdbdbd;
+  border-radius: 6px;
+  cursor: grab;
+
+  padding: 0;
+  user-select: none;
+}
+.grabHandle.left {
+  left: 0;
+  top: 50%;
+  transform: translate(-50%, 50%);
+}
+.grabHandle.right {
+  right: -1px;
+  top: 50%;
+  transform: translate(50%, 50%);
+}
+
+.grabHandle > img {
+  width: 10px;
+  padding: 2px 0px;
+  height: 32px;
+
+  pointer-events: none;
+}
+
+.breakpointToggle {
+  border: 1px solid transparent;
+  padding: 0;
+  margin: 0;
+  background: none;
+
+  cursor: pointer;
+  transition: transform 0.1s, opacity 0.2s;
+  opacity: 1;
+}
+.breakpointToggle:hover {
+
+}
+
+.effectCleanupTable {
+  border-collapse: collapse;
+  background: rgb(241, 241, 241);
+}
+
+.effectCleanupHeading.effectCleanupHeading {
+  margin: 0;
+  padding-left: 8px;
+  background-color: rgb(59, 59, 59);
+  color: white;
+}
+
+.effectCleanupTable td {
+  border: 1px solid black;
+}
+.effectCleanupTable td > div {
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  gap: 4px;
+}
+.effectCleanupTable th {
+  border: 1px solid black;
+}
+.effectCleanupTable td:first-child {
+  border-left: 0;
+}
+.effectCleanupTable td:last-child {
+  border-right: 0;
+}
+.effectCleanupTable tr:nth-child(2) {
+  background: rgb(224, 224, 224);
+}

package/lib/controller.ts

@@ -0,0 +1,222 @@
+import { Breakpoints, BreakPosition2, CommitReport, DebugClient, DEFAULT_BREAKPOINTS, EffectCleanupReport, EffectReport, ThreadReport } from "@lukekaalim/act-debug";
+import { CommitListEntry, createCommitList } from "./list";
+import { SelectionManager, SelectionTarget, useSelectionManager } from "./selection";
+import { CommitID } from "@lukekaalim/act-recon";
+import { createContext, useEffect, useMemo, useState } from "@lukekaalim/act";
+
+export type InsightWindow =
+  | 'commits'
+  | 'effects'
+  | 'history'
+  | 'performance'
+
+export type Filters = {
+  collapsed: Set<CommitID>,
+
+  skipComponents: boolean,
+  skipPrimitives: boolean,
+  skipSpecial: boolean,
+  skipNamed: boolean,
+}
+
+const DEFAULT_FILTERS: Filters = {
+  collapsed: new Set(),
+
+  skipComponents: false,
+  skipPrimitives: false,
+  skipSpecial: false,
+  skipNamed: false,
+}
+
+export const toggleCollapsedCommit = (filters: Filters, collapseToggledCommit: CommitID) => {
+  const isCollapsed = filters.collapsed.has(collapseToggledCommit);
+
+  const nextFilters = { ...filters, collapsed: new Set(filters.collapsed) };
+  if (isCollapsed) {
+    nextFilters.collapsed.delete(collapseToggledCommit);
+  } else {
+    nextFilters.collapsed.add(collapseToggledCommit);
+  }
+  return nextFilters;
+}
+
+export type InsightState = {
+  paused: boolean,
+  breakPosition: BreakPosition2 | null,
+
+  breakpoints: Breakpoints,
+  thread: ThreadReport | null,
+  filters: Filters,
+  commits: CommitListEntry[],
+  effects: EffectReport[],
+  cleanups: EffectCleanupReport[],
+  client: DebugClient,
+
+  selection: SelectionManager,
+  
+  activeWindow: InsightWindow,
+
+  panels: {
+    inspector: boolean,
+    breakpoints: boolean,
+  },
+  commitScrollTarget: CommitID | null,
+}
+
+export type InsightController = {
+  select(newTarget: SelectionTarget): void,
+  focus(focusTarget: SelectionTarget): void,
+
+  changeWindow(nextWindow: InsightWindow): void,
+  changeFilters(newFilters: Filters): void,
+
+  setShowInspectorPanel(showPanel: boolean): void,
+  setShowBreakpointPanel(showPanel: boolean): void,
+
+  onConsumeCommitScrollTarget(): void,
+};
+
+export const useInsightManager = (client: DebugClient) => {
+  const [commits, setCommits] = useState<CommitListEntry[]>([]);
+  const [effects, setEffects] = useState<EffectReport[]>([]);
+  const [cleanups, setCleanups] = useState<EffectCleanupReport[]>([]);
+  const [thread, setThread] = useState<ThreadReport | null>(null);
+
+  const selection = useSelectionManager();
+
+  const [activeWindow, setActiveWindow] = useState<InsightWindow>('commits');
+
+  const [showBreakpointPanel, setShowBreakpointPanel] = useState(true);
+  const [showInspectorPanel, setShowInspectorPanel] = useState(true);
+
+  const [breakpoints, setBreakpoints] = useState(DEFAULT_BREAKPOINTS);
+  const [filters, setFilters] = useState(DEFAULT_FILTERS);
+  const [paused, setPaused] = useState(false);
+
+  const [commitScrollTarget, setScrollTarget] = useState<CommitID | null>(null);
+
+  const [breakPosition, setBreakPosition] = useState<BreakPosition2 | null>(null);
+
+  useEffect(() => {
+    const skip = (c: CommitReport) => {
+      if (filters.skipPrimitives && (c.element.type.type === 'primitive' || c.element.type.type === 'array'))
+        return true;
+      if (filters.skipComponents && c.element.type.type === 'component')
+        return true;
+      if (filters.skipNamed && (c.element.type.type === 'string' || c.element.type.type === 'symbol'))
+        return true;
+      if (filters.skipSpecial && (c.element.type.type === 'special' || c.element.type.type === 'render'))
+        return true;
+
+      //return c.element.type.type !== 'component'
+      //return c.element.type.type !== 'string' && c.element.type.type !== 'primitive';
+      return false;
+    }
+    const hide = (c: CommitReport) => {
+      if (c.parent && filters.collapsed.has(c.parent)) {
+        return true;
+      }
+      return false;
+      //return c.element.type.type === 'primitive';
+    }
+    const thread = client.getThread();
+
+    setCommits(createCommitList(client.cache, { skip, hide }));
+    setThread(thread);
+    setEffects(thread.delta.effects);
+    setCleanups(client.cache.getAllCleanups());
+    setPaused(thread.paused);
+
+    const subs = [
+      client.onBreak(([thread, position]) => {
+        setCommits(createCommitList(client.cache, { skip, hide }));
+        setEffects(thread.delta.effects);
+        setCleanups([...client.cache.liveCleanups.values()]);
+        setThread(thread)
+        setBreakPosition(position);
+        
+        const pendingTask = thread.pendingTasks[thread.pendingTasks.length - 1];
+        const pendingEffect = thread.effects.tasks[thread.effects.taskIndex];
+        if (pendingTask)
+          controller.focus({ type: 'commit', id: pendingTask.id });
+        else if (pendingEffect)
+          controller.focus({ type: 'effect', id: pendingEffect.id });
+        
+        setPaused(true)
+      }),
+      client.onBreakpointsChange((newBreakpoints) => {
+        setBreakpoints(newBreakpoints)
+      }),
+      client.onFinish((thread) => {
+        setCommits(createCommitList(client.cache, { skip, hide }));
+        setEffects(thread.delta.effects);
+        setPaused(false);
+        setThread(thread);
+        setBreakPosition(null);
+      })
+    ];
+    () => {
+      subs.forEach(sub => sub.cancel());
+    }
+  }, [client, filters]);
+
+  const state: InsightState = {
+    paused,
+    breakPosition,
+
+    thread,
+    breakpoints,
+    selection,
+    activeWindow,
+    
+    client,
+    commits,
+    effects,
+    cleanups,
+
+    filters,
+    panels: {
+      breakpoints: showBreakpointPanel,
+      inspector: showInspectorPanel,
+    },
+    commitScrollTarget
+  };
+  
+  // KLUDGE
+  useEffect(() => {
+    if (selection.target.type === 'commit')
+      controller.focus(selection.target);
+  }, [selection.target])
+
+  const controller: InsightController = useMemo(() => ({
+    setShowBreakpointPanel,
+    setShowInspectorPanel,
+    select(newTarget) {
+      selection.select(newTarget)
+    },
+    focus(focusTarget) {
+      switch (focusTarget.type) {
+        case 'commit':
+          setActiveWindow('commits')
+          setScrollTarget(focusTarget.id);
+          break;
+        case 'effect':
+          setActiveWindow('effects')
+          break;
+      }
+    },
+    onConsumeCommitScrollTarget() {
+      setScrollTarget(null);
+    },
+    changeFilters(newFilters) {
+      setFilters(newFilters);
+    },
+    changeWindow(nextWindow) {
+      setActiveWindow(nextWindow);
+    },
+  }), [client]);
+
+  return [state, controller] as const;
+};
+
+export const InsightControllerContext = createContext(null);

package/lib/list.ts

@@ -0,0 +1,82 @@
+import { CommitReport, DebugCache } from "@lukekaalim/act-debug";
+import { CommitID } from "@lukekaalim/act-recon";
+
+export type CommitTestFunction = (commit: CommitReport) => boolean;
+
+export type CommitListEntry = {
+  parent: number,
+  distance: number,
+  id: CommitID,
+  children: number[],
+}
+
+/**
+ * A CommitList is a (possibly transformed) representation
+ * of a tree of commits into a linear tree, noting:
+ *  - "distance" (aka how many parents from root)
+ *  - "parent" (the index of the parent in this list)
+ *  - "children" (the indices of the children in this list)
+ *  - "id" The actual CommitID that this entry represents.
+ *  
+ * Due to transformation rules, commits "parents" and "children"
+ * may not map to their real (as CommitReport might describe)
+ * relationships.
+ * 
+ * @param cache
+ * @param options 
+ * @returns 
+ */
+export const createCommitList = (
+  cache: DebugCache,
+  transform: { skip?: CommitTestFunction, hide?: CommitTestFunction }
+): CommitListEntry[] => {
+  type StackEntry = [id: CommitID, parent: number];
+  // We push commits into this stack
+  // to pop them later in the `while` loop.
+  const stack: StackEntry[] = [...cache.roots].map(id => [id, -1]);
+
+  const all: CommitListEntry[] = [];
+  
+  while (stack.length > 0) {
+    const stack_entry = stack.pop() as StackEntry;
+
+    const commit = cache.getCommit(stack_entry[0])
+    if (!commit)
+      continue;
+
+    const shouldSkip = transform.skip && transform.skip(commit);
+    const shouldHide = transform.hide && transform.hide(commit);
+
+    if (shouldHide)
+      continue;
+
+    let parent = all[stack_entry[1]];
+
+    if (shouldSkip) {
+      // reassign parent
+      for (const childId of commit.children.toReversed()) {
+        stack.push([childId, stack_entry[1]]);
+      }
+      continue;
+    }
+
+    const index = all.length;
+    all[index] = {
+      distance: parent ? parent.distance + 1 : 1,
+      id: commit.id,
+      parent: stack_entry[1],
+      children: [],
+    };
+
+    if (parent) {
+      parent.children.push(index);
+    }
+
+    for (const childId of commit.children.toReversed()) {
+      stack.push([childId, index]);
+    }
+
+  }
+
+  return all;
+}