@lukekaalim/act-insight 1.1.0 → 2.0.0

package/assets/icons/step.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.8500004mm"
+   height="5.9899998mm"
+   viewBox="0 0 5.8500004 5.99"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <marker
+       style="overflow:visible"
+       id="Triangle"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="0.5"
+       markerHeight="0.5"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.5)"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         id="path135" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-28.952292,-16.774322)">
+    <circle
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.293366"
+       id="path7"
+       cx="30.252504"
+       cy="20.765179"
+       r="1.0245281" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#5d7388;stroke-width:0.178757;stroke-linejoin:miter;stroke-dasharray:0.178757, 0.357514;stroke-dashoffset:0;stroke-opacity:1"
+       id="path7-0"
+       cx="33.435463"
+       cy="20.764971"
+       r="1.0010481" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#5d7388;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Triangle)"
+       d="m 30.291345,18.72896 c 0,-1.675316 3.032323,-1.625056 3.049075,-0.134029"
+       id="path8" />
+  </g>
+</svg>

package/assets/icons/step_over_children.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.8500004mm"
+   height="5.9899998mm"
+   viewBox="0 0 5.8500004 5.99"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <marker
+       style="overflow:visible"
+       id="marker20"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="0.40000001"
+       markerHeight="0.40000001"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.5)"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         id="path20" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-50.872714,-18.201318)">
+    <circle
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.293366"
+       id="path7-2"
+       cx="52.589622"
+       cy="19.577124"
+       r="1.0245281" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#5d7388;stroke-width:0.178757;stroke-linejoin:miter;stroke-dasharray:0.178757, 0.357514;stroke-dashoffset:0;stroke-opacity:1"
+       id="path7-0-2"
+       cx="52.596684"
+       cy="22.512857"
+       r="1.0010481" />
+    <path
+       style="fill:none;stroke:#5d7388;stroke-width:0.309;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker20)"
+       d="m 52.495635,19.592386 h 2.800478 v 3.439583 h -0.898786"
+       id="path29" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:#5d7388;stroke-width:0.303;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path7-0-2-3-3"
+       cx="55.275337"
+       cy="20.537638"
+       r="0.57445872" />
+  </g>
+</svg>

package/assets/icons/thread.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="8mm"
+   height="7.9999995mm"
+   viewBox="0 0 8 7.9999998"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(24.71815,-42.68502)">
+    <rect
+       style="fill:#76c9ed;fill-opacity:1;stroke:#328ab0;stroke-width:0.432;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect22-3"
+       width="6.8986015"
+       height="2.1699133"
+       x="-24.247269"
+       y="45.683922"
+       ry="0.16047928" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.98822;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:0.494108, 0.494108;stroke-dashoffset:0;stroke-opacity:1"
+       id="path23-14"
+       cx="-23.132378"
+       cy="46.792686"
+       r="0.64924502" />
+  </g>
+</svg>

package/assets/icons/tree_column.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="7.0000005mm"
+   height="6.9999995mm"
+   viewBox="0 0 7.0000005 6.9999998"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-46.911243,-25.967027)">
+    <rect
+       style="fill:#303b47;stroke:none;stroke-width:0.658013"
+       id="rect9"
+       width="0.5"
+       height="7.2143836"
+       x="50.11124"
+       y="25.872257"
+       ry="0" />
+  </g>
+</svg>

package/assets/icons/tree_end.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="7.0000005mm"
+   height="6.9999995mm"
+   viewBox="0 0 7.0000005 6.9999998"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-54.871936,-25.895951)">
+    <rect
+       style="fill:#303b47;stroke:none;stroke-width:0.648216"
+       id="rect9-3"
+       width="0.5"
+       height="4.1817374"
+       x="58.071934"
+       y="25.718256"
+       ry="0" />
+    <rect
+       style="fill:#303b47;stroke:none;stroke-width:0.633772"
+       id="rect9-3-1"
+       width="0.5"
+       height="3.9974527"
+       x="29.39595"
+       y="-62.069386"
+       ry="0"
+       transform="rotate(90)" />
+  </g>
+</svg>

package/assets/icons/tree_junction.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="7.0000005mm"
+   height="6.9999995mm"
+   viewBox="0 0 7.0000005 6.9999998"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-63.022171,-26.014413)">
+    <rect
+       style="fill:#303b47;stroke:none;stroke-width:0.854903"
+       id="rect9-3-3"
+       width="0.5"
+       height="7.2736144"
+       x="66.222168"
+       y="25.810398"
+       ry="0" />
+    <rect
+       style="fill:#303b47;stroke:none;stroke-width:0.633772"
+       id="rect9-3-1-6"
+       width="0.5"
+       height="3.9974527"
+       x="29.514414"
+       y="-70.21962"
+       ry="0"
+       transform="rotate(90)" />
+  </g>
+</svg>

package/assets/icons/vertical_grab_handle.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="6.8287368mm"
+   height="13.142978mm"
+   viewBox="0 0 6.8287368 13.142978"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-27.994085,-37.773945)">
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#767676;stroke-width:0.437;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path42"
+       cx="31.501995"
+       cy="40.259155"
+       r="1.7168031" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#767676;stroke-width:0.437;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path42-6"
+       cx="31.501995"
+       cy="48.665573"
+       r="1.7168031" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#767676;stroke-width:0.437;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path42-6-5"
+       cx="31.501995"
+       cy="44.462364"
+       r="1.7168031" />
+  </g>
+</svg>

package/components/BreakpointPanel.ts

@@ -0,0 +1,110 @@
+import { Component, h, useState } from "@lukekaalim/act";
+import { Breakpoints, DebugCache, toggleEffectBreakpoint } from "@lukekaalim/act-debug";
+
+import classes from './index.module.css';
+import { CommitPreview } from "../TreeViewer";
+import { EffectButton, HookButton, IconButton } from "./Button";
+import { InsightController, InsightState } from "../lib/controller";
+import { icons } from "../assets/icons";
+import { BreakpointToggle } from "./BreakpointToggle";
+
+export type BreakpointPanelProps = {
+  state: InsightState,
+  controller: InsightController,
+  cache: DebugCache,
+
+  breakpoints: Readonly<Breakpoints>,
+
+  onBreakpointsChange(breakpoints: Breakpoints): void,
+  onStepPressed(): void,
+  onResumePressed(): void,
+}
+
+export const BreakpointPanel: Component<BreakpointPanelProps> = ({ breakpoints, state, onBreakpointsChange, cache, controller }) => {
+  type Toggles = "threadStart" | "threadPass" | "effectsStart" | "threadSubmit" | 'effectsEnd'
+
+  const setBreakpointToggle = (toggle: Toggles) => (event: InputEvent) => {
+    const input = event.target as HTMLInputElement;
+    const nextBreakpoints: Breakpoints = { ...breakpoints, [toggle]: input.checked }
+    onBreakpointsChange(nextBreakpoints);
+  }
+
+  const commitBreakpoints = [...breakpoints.commits.values()];
+  const effectBreakpoints = [...breakpoints.effects.values()];
+
+  const [width, setWidth] = useState(300);
+  const [dragging, setDragging] = useState(false);
+  const onPointerDown = (event: PointerEvent) => {
+    setDragging(true);
+    (event.target as HTMLButtonElement).setPointerCapture(event.pointerId);
+  }
+  const onPointerMove = (event: PointerEvent) => {
+    if (dragging) {
+      setWidth(w => w + event.movementX)
+      // do something about moving it
+    }
+  }
+  const onPointerUp = (event: PointerEvent) => {
+    setDragging(false);
+    (event.target as HTMLButtonElement).releasePointerCapture(event.pointerId);
+  }
+  // 'before-first-commit' | 'before-pass' | 'before-submit' | 'before-first-effect' | 'before-last-effect' 
+
+  const start = state.thread && state.paused && !state.thread.started;
+  const submit = state.thread && state.paused && !state.thread.submitted && state.thread.pendingTasks.length === 0 && state.thread.missed.length === 0;
+  const pass = state.thread && state.paused && !state.thread.submitted && state.thread.pendingTasks.length === 0 && state.thread.missed.length !== 0;
+
+  return h('div', { className: classes.panelContainer, style: { width: `${width}px` } }, [
+    h('button', { classList: [classes.grabHandle, classes.right], onPointerDown, onPointerMove, onPointerUp }, h('img', { src: icons.vertical_grab_handle })),
+    h('div', { classList: [classes.panel] }, [
+      h('h4', {}, 'Breakpoint Controls'),
+      h('div', { className: classes.namedBreakpointList }, [
+        h('label', { className: start ? classes.hit : '' }, [
+          h('input', { type: 'checkbox', checked: breakpoints.threadStart, onInput: setBreakpointToggle('threadStart') }),
+          h('span', {}, 'Before First Commit'),
+        ]),
+        h('label', { className: pass ? classes.hit : '' }, [
+          h('input', { type: 'checkbox', checked: breakpoints.threadPass, onInput: setBreakpointToggle('threadPass') }),
+          h('span', {}, 'On Before New Thread Pass'),
+        ]),
+        h('label', { className: submit ? classes.hit : '' }, [
+          h('input', { type: 'checkbox', checked: breakpoints.threadSubmit, onInput: setBreakpointToggle('threadSubmit') }),
+          h('span', {}, 'On Submit to Renderer'),
+        ]),
+        h('label', {}, [
+          h('input', { type: 'checkbox', checked: breakpoints.effectsStart, onInput: setBreakpointToggle('effectsStart') }),
+          h('span', {}, 'On First Effect'),
+        ]),
+        h('label', {}, [
+          h('input', { type: 'checkbox', checked: breakpoints.effectsEnd, onInput: setBreakpointToggle('effectsEnd') }),
+          h('span', {}, 'On Last Effect'),
+        ]),
+      ]),
+      commitBreakpoints.length > 0 && [
+        h('h4', {}, 'Commits Breakpoints'),
+        h('ul', { className: classes.commitList }, commitBreakpoints.map(commitId => {
+          const commit = cache.getCommit(commitId);
+          if (!commit)
+            return null;
+          return h('li', {}, [
+            h(IconButton, { icon: 'breakpoint', title: 'Clear Breakpoint', onClick() {}, className: classes.commitRowBreakpointToggle }),
+            h(CommitPreview, { commit, onClick: () => {
+              controller.select({ type: 'commit', id: commitId })
+            } })
+          ])
+        }))
+      ],
+      effectBreakpoints.length > 0 && [
+        h('h4', {}, 'Effect Breakpoints'),
+        h('ul', { className: classes.effectList }, effectBreakpoints.map(effectId => {
+          return h('li', {}, [
+            h(BreakpointToggle, { toggled: true, onToggle(toggled) {
+              onBreakpointsChange(toggleEffectBreakpoint(breakpoints, effectId))
+            }, }),
+            h(EffectButton, { onClick() {}, effectId }),
+          ])
+        }))
+      ],
+    ])
+  ]);
+}

package/components/BreakpointToggle.ts

@@ -0,0 +1,14 @@
+import { Component, h } from "@lukekaalim/act";
+import { IconButton } from "./Button";
+import classes from './index.module.css';
+
+export type BreakpointToggleProps = {
+  toggled: boolean,
+  onToggle(toggled: boolean): void,
+}
+
+export const BreakpointToggle: Component<BreakpointToggleProps> = ({ toggled, onToggle }) => {
+  return h(IconButton, { icon: toggled ? 'breakpoint' : 'breakpoint_unset', className: classes.breakpointToggle, onClick() {
+    onToggle(!toggled)
+  }, title: `Toggle Breakpoint` })
+};

package/components/Button.ts

@@ -0,0 +1,53 @@
+import { Component, h, OpaqueID } from "@lukekaalim/act"
+import { icons } from "../assets/icons"
+import classes from './index.module.css';
+import { CommitID, EffectID } from "@lukekaalim/act-recon";
+
+export type IconButtonProps = {
+  icon: keyof typeof icons,
+
+  onClick(): void,
+  title?: string,
+  className?: string,
+}
+
+export const IconButton: Component<IconButtonProps> = ({ icon, onClick, title, className, children }) => {
+  return h('button', { onClick, classList: [classes.iconButton, className || ''] }, [
+    h('img', { title: title || '', src: icons[icon] }),
+    children
+  ])
+}
+
+
+export type HookButtonProps = {
+  hookIndex: number,
+
+  onClick(): void,
+}
+export const HookButton: Component<HookButtonProps> = ({ onClick, hookIndex }) => {
+  return h(IconButton, { icon: 'hook', onClick }, `hook#${hookIndex}`)
+}
+export type EffectButtonProps = {
+  effectId: EffectID,
+  
+  onClick(): void,
+}
+export const EffectButton: Component<EffectButtonProps> = ({ onClick, effectId }) => {
+  return h(IconButton, { icon: 'effect', onClick }, `effect#${effectId}`)
+}
+export type ThreadButtonProps = {
+  threadId: OpaqueID<"ThreadID">,
+  
+  onClick(): void,
+}
+export const ThreadButton: Component<ThreadButtonProps> = ({ onClick, threadId }) => {
+  return h(IconButton, { icon: 'thread', onClick }, `thread#${threadId}`)
+}
+export type CommitButtonProps = {
+  commitId: CommitID,
+  
+  onClick(): void,
+}
+export const CommitButton: Component<CommitButtonProps> = ({ onClick, commitId }) => {
+  return h(IconButton, { icon: 'commit', onClick }, `commit#${commitId}`)
+}

package/components/Checkbox.ts

@@ -0,0 +1,17 @@
+import { Component, h, Node } from "@lukekaalim/act"
+
+export type CheckboxProps = {
+  label: Node,
+  checked: boolean,
+  onCheckedChange(nextChecked: boolean): void,
+}
+
+export const Checkbox: Component<CheckboxProps> = ({ label, checked, onCheckedChange }) => {
+  return h('label', {}, [
+    h('input', { type: 'checkbox', checked, onInput(e: InputEvent) {
+      const input = (e.target) as HTMLInputElement;
+      onCheckedChange(input.checked);
+    } }),
+    h('span', {}, label),
+  ]);
+}

package/components/CommitInspector.ts

@@ -0,0 +1,161 @@
+import { Component, h, useEffect, useState } from "@lukekaalim/act"
+
+import { icons } from "../assets/icons"
+import { EffectButton, HookButton, IconButton } from "./Button"
+import classes from './index.module.css';
+import { Breakpoints, CommitDetailsReport, CommitReport, DebugClient, toggleCommitBreakpoint, toggleEffectBreakpoint } from "@lukekaalim/act-debug";
+import { useSelection } from "../lib/selection";
+import { CommitPreview } from "../TreeViewer";
+import { Filters, InsightController, InsightState, toggleCollapsedCommit } from "../lib/controller";
+import { CommitAttributeTag } from "../AttributeTag";
+import { getTextForValue } from "../utils";
+import { getCommitBorder, getCommitColor } from "./CommitTree";
+import { CommitID } from "@lukekaalim/act-recon";
+import { BreakpointToggle } from "./BreakpointToggle";
+
+export type CommitInspectorProps = {
+  commit: CommitReport,
+
+  client: DebugClient,
+  breakpoints: Breakpoints,
+
+  state: InsightState,
+  controller: InsightController,
+}
+
+export const CommitInspector: Component<CommitInspectorProps> = ({ commit, breakpoints, client, state, controller }) => {
+  const hasBreakpoint = breakpoints.commits.has(commit.id);
+
+  const [details, setDetails] = useState<CommitDetailsReport | null>(null);
+  useEffect(() => {
+    setDetails(state.client.getDetails(commit.id));
+  }, [commit])
+
+  const onToggleBreakpoint = () => {
+    client.setBreakpoints(toggleCommitBreakpoint(breakpoints, commit.id));
+  }
+
+  const isCollapsed = state.filters.collapsed.has(commit.id);
+  const onToggleCollapse = () => {
+    controller.changeFilters(toggleCollapsedCommit(state.filters, commit.id))
+  }
+
+  const ancestors: CommitReport[] = [];
+  let parentId = commit.parent;
+  while (parentId) {
+    const parentCommit = state.client.cache.getCommit(parentId);
+    if (!parentCommit)
+      break;
+    ancestors.push(parentCommit);
+    parentId = parentCommit.parent;
+  }
+  ancestors.reverse();
+
+  const component = details && details.component;
+
+  const onCommitClick = (commitId: CommitID) => () => {
+    controller.select({ type: 'commit', id: commitId })
+  }
+
+  const renderAncestor = (ancestor: CommitReport, isLast: boolean) => {
+    const color = getCommitColor(ancestor, state.client.cache, state.thread);
+    const border = getCommitBorder(ancestor, state.client.cache, state.thread);
+
+    return [
+      h(CommitPreview, { commit: ancestor, attributes: [], color, border, onClick: onCommitClick(ancestor.id) }),
+      !isLast && h('img', { src: icons.ancestor_column }),
+    ]
+  }
+  const color = getCommitColor(commit, state.client.cache, state.thread);
+  const border = getCommitBorder(commit, state.client.cache, state.thread);
+
+  return h('div', { className: classes.commitInspector }, [
+    h("details", {}, [
+      h('summary', {}, h('strong', {}, 'Lineage')),
+      h('div', { className: classes.lineageColumn }, ancestors.map((a, i) => renderAncestor(a, i === ancestors.length - 1))),
+    ]),
+    // preview
+    h('div', { className: classes.commitInspectorPreviewRow }, 
+      h(CommitPreview, { commit, attributes: [], color, border })
+    ),
+    h('div', {}, [
+      h(CommitAttributeTag, { name: 'Id', value: commit.id.toString() }),
+      h(CommitAttributeTag, { name: 'Version', value: commit.version.toString() }),
+      !!(details && details.props.key && details.props.key.type === 'primitive') &&
+        h(CommitAttributeTag, { name: 'Key', value: details.props.key.value as string }),
+    ]),
+
+    // quick controls
+    h('div', { className: classes.commitControlBar }, [
+      h(IconButton, { icon: hasBreakpoint ? 'breakpoint' : 'breakpoint_unset', onClick: onToggleBreakpoint }),
+      h(IconButton, { icon: 'selection', onClick() {} }),
+      h(IconButton, { icon: isCollapsed ? 'expand' : 'collapse', onClick: onToggleCollapse }),
+      h(IconButton, { icon: 'reload', onClick() { client.requestRender(commit.id) } }),
+    ]),
+    h("details", {}, [
+      h('summary', {}, h('strong', {}, 'Children')),
+      h('ol', { className: classes.commitList }, commit.children.map(child => {
+        const childCommit = state.client.cache.getCommit(child);
+        if (!childCommit)
+          return null;
+
+        const color = getCommitColor(childCommit, state.client.cache, state.thread);
+        const border = getCommitBorder(childCommit, state.client.cache, state.thread);
+        return h('li', {}, h(CommitPreview, { color, border, commit: childCommit, attributes: [], onClick: onCommitClick(child) }))
+      })),
+    ]),
+    
+
+    // info
+
+    // state details
+    details && [
+      h('div', {}, [
+        h('button', {}, 'By Order'),
+        h('button', { disabled: true }, 'By Type'),
+      ]),
+
+      h('h4', {}, 'Props'),
+      h('table', {}, 
+        Object.entries(details.props).map(([name, value]) => {
+          return h('tr', {}, [h('td', {}, name), h('td', {}, getTextForValue(value))])
+      })),
+      component && [
+        h('h4', {}, 'State'),
+        h('table', {}, 
+          component.stateValues.map((state) => {
+            return h('tr', {}, [
+              h('td', {}, h(HookButton, { onClick() {} , hookIndex: state.hookIndex })),
+              h('td', {}, getTextForValue(state.value))
+            ])
+        })),
+        h('h4', {}, 'Effects'),
+        h('table', {}, 
+          component.effects.map((effectHook) => {
+            const queuedForUpdate = state.thread && state.thread.delta.effects.some(e => e.id === effectHook.effect);
+            const cleanupTask = state.thread && state.thread.effects.tasks.findIndex(t => t.id === effectHook.effect && t.type === 'cleanup')
+            const constructorTask = state.thread && state.thread.effects.tasks.findIndex(t => t.id === effectHook.effect && t.type === 'constructor')
+
+            return h('tr', { style: { background: queuedForUpdate ? '#a7ceff' : 'none' } }, [
+              h('td', {}, h(HookButton, { onClick() {} , hookIndex: effectHook.hookIndex })),
+              h('td', {}, h('div', { style: { display: 'flex' } }, [
+                h(BreakpointToggle, { onToggle() {
+                  client.setBreakpoints(toggleEffectBreakpoint(breakpoints, effectHook.effect))
+                }, toggled: breakpoints.effects.has(effectHook.effect) }),
+                h(EffectButton, { onClick() {}, effectId: effectHook.effect }),
+              ])),
+            ])
+        })),
+        h('h4', {}, 'Contexts'),
+        h('table', {}, 
+          component.subscriptions.map((subscription) => {
+            return h('tr', {}, [
+              h('td', {}, h(HookButton, { onClick() {} , hookIndex: subscription.hookIndex })),
+              h('td', {}, subscription.context),
+              h('td', {}, subscription.provider),
+            ])
+        })),
+      ]
+    ]
+  ])
+}