Feat/debugger (#259)

* Add debugger and remove flamegraph

package.json

@@ -21,6 +21,7 @@
     "dev:ui:live": "turbo run dev --filter=@tokens-studio/graph-engine-ui...",
     "docs": "turbo run docs",
     "format": "turbo run format --parallel --continue",
+    "postinstall": "npx patch-package",
     "lint": "turbo run lint",
     "lint-staged": "npx lint-staged",
     "prepare": "husky install",
@@ -41,7 +42,9 @@
       "**/typescript-transform-paths"
     ]
   },
-  "dependencies": {},
+  "dependencies": {
+    "patch-package": "^8.0.0"
+  },
   "devDependencies": {
     "husky": "^8.0.3",
     "lint-staged": "^13.2.1",
@@ -50,4 +53,4 @@
     "turbo": "^1.9.8"
   },
   "packageManager": "yarn@1.22.19"
-}
+}

packages/documentation/docs/guides/developers/engine/creating-a-node.md

@@ -74,7 +74,7 @@ describe("math/add", () => {
     node.inputs.b.setValue(1);
 
     //For more complicated nodes you will likely want to interact with the graph object instead of executing the node directly
-    await node.execute();
+    await node.run();
     expect(node.outputs.value.value).toStrictEqual(3);
   });
 });

packages/graph-editor/package.json

@@ -52,7 +52,7 @@
     "@tokens-studio/tokens": "^0.0.24",
     "@tokens-studio/types": "0.2.3",
     "@tokens-studio/ui": "^0.5.5",
-    "animation-timeline-js": "^2.3.2",
+    "@xzdarcy/react-timeline-editor": "^0.1.9",
     "array-move": "^4.0.0",
     "better-react-mathjax": "^2.0.3",
     "classnames": "2.3.2",

packages/graph-editor/src/components/debugger/data.ts

@@ -0,0 +1,61 @@
+import { CustomTimeLineAction, CustomTimelineRow } from "@/components/debugger"
+import { makeObservable, observable, computed, action, flow } from "mobx"
+
+
+
+export class DebugInfo {
+
+    _rows: CustomTimelineRow[] = []
+    offset = 0;
+    first = true
+
+    constructor() {
+        makeObservable(this, {
+            _rows: observable,
+            rows: computed,
+            addRow: action,
+            addAction: action
+        })
+
+    }
+
+    get rows() {
+        return this._rows
+    }
+
+    addRow(row: CustomTimelineRow) {
+        this._rows = [...this._rows, row]
+    }
+
+    addAction(rowId: string, action: CustomTimeLineAction) {
+
+        if (this.first) {
+            this.first = false;
+            this.offset = action.start;
+        }
+
+        this._rows = this._rows.map(row => {
+            if (row.id === rowId) {
+                return {
+                    ...row,
+                    actions: [...row.actions, {
+                        ...action,
+                        start: (action.start - this.offset)/1000,
+                        end: (action.end - this.offset)/1000
+                    }]
+                }
+            }
+            return row
+        });
+
+    }
+
+    clear() {
+        this.first = true;
+        this._rows = []
+    }
+
+
+}
+
+export const debugInfo = new DebugInfo()

packages/graph-editor/src/components/debugger/debugger.scss

@@ -0,0 +1,92 @@
+.timeline-editor-time-unit-scale {
+    color: var(--colors-fgDefault) !important
+}
+
+.timeline-editor-time-unit {
+    border-right: 1px solid var(--colors-borderDefault);
+}
+
+.timeline-editor-action {
+    background-color: unset;
+}
+
+.timeline-editor-time-area  .ReactVirtualized__Grid{
+    overflow: hidden !important;
+}
+
+.timeline-editor {
+    font-family: 'Inter', sans-serif !important;
+    height: 100% !important;
+    width: unset !important;
+    flex: 1;
+    background-color: inherit !important;
+}
+
+.timeline-editor-edit-row {
+    background: var(--colors-bgSubtle);
+}
+
+.timeline-player {
+    height: 32px;
+
+    padding: 0 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: #3a3a3a;
+    color: #ddd;
+
+    .play-control {
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        display: flex;
+        background-color: #666;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .time {
+        font-size: 12px;
+        margin: 0 20px;
+        width: 70px;
+    }
+
+    .rate-control {
+        justify-self: flex-end;
+
+
+    }
+}
+
+
+.timeline-list {
+    min-width: 150px;
+    margin-top: 42px;
+    height: 258px;
+    flex: 0 1 auto;
+    overflow-y: auto;
+    box-sizing: border-box;
+    overflow-x: clip;
+
+    &-item {
+        height: 32px;
+        align-items: center;
+        width: 100%;
+        display: flex;
+        padding: 0 10px;
+        box-sizing: border-box;
+
+        &:hover {
+            background-color: var(--colors-focus);
+        }
+
+        & .text {
+            height: 28px;
+            width: 100%;
+            padding-left: 10px;
+            border-radius: 4px;
+
+        }
+    }
+}

packages/graph-editor/src/components/debugger/index.stories.tsx

@@ -1,16 +1,44 @@
-import { Debugger } from './index';
+import { CustomTimelineRow, Debugger } from './index';
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor';
 
 const meta: Meta<typeof Debugger> = {
     title: 'Components/Debugger',
     component: Debugger,
 };
 
+const mockEffect: Record<string, TimelineEffect> = {
+    effect0: {
+        id: "effect0",
+        name: "foo",
+    },
+    effect1: {
+        id: "effect1",
+        name: "bar",
+    },
+};
+
+
+const mockData: CustomTimelineRow[] = new Array(20).fill(0).map((_, i) => {
+
+    return {
+        id: i.toString(),
+        name: 'Row ' + i,
+        actions: new Array(1).fill(0).map(y => {
+            return {
+                id: `${i}-${y}`,
+                start: i * 2,
+                effectId: 'effect0',
+                end: i * 2 + 2,
+            }
+        })
+    }
+})
 
 export default meta;
 type Story = StoryObj<typeof Debugger>;
 export const Default: Story = {
-    render: (args) => <Debugger />,
+    render: (args) => <Debugger data={mockData} effects={mockEffect} />,
     args: {},
 };