Change artifact IDs to be stable across KCL executions (#4101)

* Add ID generator to ExecState

* Change default plane IDs to be hardcoded

* Fix lint warning

* Add exposing ID generator as output of executor

* Change to use generated definition of ExecState in TS

* Fix IdGenerator to use camel case in TS

* Fix TS type errors

* Add exposing id_generator parameter

* Add using the previously generated ID generator

* wip: Add display of feature tree in debug pane

* Remove artifact graph augmentation

* Change default planes to use id generator instead of hardcoded UUIDs

* Fix to reuse previously generated IDs

* Add e2e test

* Change feature tree to be collapsed by default

* Remove debug prints

* Fix unit test to use execState

* Fix type to be more general

* Remove outdated comment

* Update derive-docs output

* Fix object display component to be more general

* Remove unused ArtifactId type

* Fix test to be less brittle

* Remove codeRef and pathToNode from display

* Fix to remove test.only

Co-authored-by: Frank Noirot <frank@zoo.dev>

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* Move plane conversion code to be next to type

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)"

This reverts commit 3455cc951b.

* Rename file

* Rename components and add doc comments

* Revive the collapse button

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* Confirm

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* Confirm

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* Confirm

---------

Co-authored-by: Frank Noirot <frank@zoo.dev>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/AvailableVarsHelpers.tsx

@@ -157,7 +157,7 @@ export function useCalc({
         engineCommandManager,
         useFakeExecutor: true,
         programMemoryOverride: kclManager.programMemory.clone(),
-      }).then(({ programMemory }) => {
+      }).then(({ execState }) => {
         const resultDeclaration = ast.body.find(
           (a) =>
             a.type === 'VariableDeclaration' &&
@@ -166,7 +166,7 @@ export function useCalc({
         const init =
           resultDeclaration?.type === 'VariableDeclaration' &&
           resultDeclaration?.declarations?.[0]?.init
-        const result = programMemory?.get('__result__')?.value
+        const result = execState.memory?.get('__result__')?.value
         setCalcResult(typeof result === 'number' ? String(result) : 'NAN')
         init && setValueNode(init)
       })

src/components/DebugDisplayObj.tsx

@@ -0,0 +1,111 @@
+import { isArray, isNonNullable } from 'lib/utils'
+import { useRef, useState } from 'react'
+
+type Primitive = string | number | bigint | boolean | symbol | null | undefined
+
+export type GenericObj = {
+  type?: string
+  [key: string]: GenericObj | Primitive | Array<GenericObj | Primitive>
+}
+
+/**
+ * Display an array of objects or primitives for debug purposes. Nullable values
+ * are displayed so that relative indexes are preserved.
+ */
+export function DebugDisplayArray({
+  arr,
+  filterKeys,
+}: {
+  arr: Array<GenericObj | Primitive>
+  filterKeys: string[]
+}) {
+  return (
+    <>
+      {arr.map((obj, index) => {
+        return (
+          <div className="my-2" key={index}>
+            {obj && typeof obj === 'object' ? (
+              <DebugDisplayObj obj={obj} filterKeys={filterKeys} />
+            ) : isNonNullable(obj) ? (
+              <span>{obj.toString()}</span>
+            ) : (
+              <span>{obj}</span>
+            )}
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+/**
+ * Display an object as a tree for debug purposes. Nullable values are omitted.
+ * The only other property treated specially is the type property, which is
+ * assumed to be a string.
+ */
+export function DebugDisplayObj({
+  obj,
+  filterKeys,
+}: {
+  obj: GenericObj
+  filterKeys: string[]
+}) {
+  const ref = useRef<HTMLPreElement>(null)
+  const hasCursor = false
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  return (
+    <pre
+      ref={ref}
+      className={`ml-2 border-l border-violet-600 pl-1 ${
+        hasCursor ? 'bg-violet-100/80 dark:bg-violet-100/25' : ''
+      }`}
+    >
+      {isCollapsed ? (
+        <button
+          className="m-0 p-0 border-0"
+          onClick={() => setIsCollapsed(false)}
+        >
+          {'>'}type: {obj.type}
+        </button>
+      ) : (
+        <span className="flex">
+          <button
+            className="m-0 p-0 border-0 mb-auto"
+            onClick={() => setIsCollapsed(true)}
+          >
+            {'⬇️'}
+          </button>
+          <ul className="inline-block">
+            {Object.entries(obj).map(([key, value]) => {
+              if (filterKeys.includes(key)) {
+                return null
+              } else if (isArray(value)) {
+                return (
+                  <li key={key}>
+                    {`${key}: [`}
+                    <DebugDisplayArray arr={value} filterKeys={filterKeys} />
+                    {']'}
+                  </li>
+                )
+              } else if (typeof value === 'object' && value !== null) {
+                return (
+                  <li key={key}>
+                    {key}:
+                    <DebugDisplayObj obj={value} filterKeys={filterKeys} />
+                  </li>
+                )
+              } else if (isNonNullable(value)) {
+                return (
+                  <li key={key}>
+                    {key}: {value.toString()}
+                  </li>
+                )
+              }
+              return null
+            })}
+          </ul>
+        </span>
+      )}
+    </pre>
+  )
+}

src/components/DebugFeatureTree.tsx

@@ -0,0 +1,45 @@
+import { useMemo } from 'react'
+import { engineCommandManager } from 'lib/singletons'
+import {
+  ArtifactGraph,
+  expandPlane,
+  PlaneArtifactRich,
+} from 'lang/std/artifactGraph'
+import { DebugDisplayArray, GenericObj } from './DebugDisplayObj'
+
+export function DebugFeatureTree() {
+  const featureTree = useMemo(() => {
+    return computeTree(engineCommandManager.artifactGraph)
+  }, [engineCommandManager.artifactGraph])
+
+  const filterKeys: string[] = ['__meta', 'codeRef', 'pathToNode']
+  return (
+    <details data-testid="debug-feature-tree" className="relative">
+      <summary>Feature Tree</summary>
+      {featureTree.length > 0 ? (
+        <pre className="text-xs">
+          <DebugDisplayArray arr={featureTree} filterKeys={filterKeys} />
+        </pre>
+      ) : (
+        <p>(Empty)</p>
+      )}
+    </details>
+  )
+}
+
+function computeTree(artifactGraph: ArtifactGraph): GenericObj[] {
+  let items: GenericObj[] = []
+
+  const planes: PlaneArtifactRich[] = []
+  for (const artifact of artifactGraph.values()) {
+    if (artifact.type === 'plane') {
+      planes.push(expandPlane(artifact, artifactGraph))
+    }
+  }
+  const extraRichPlanes: GenericObj[] = planes.map((plane) => {
+    return plane as any as GenericObj
+  })
+  items = items.concat(extraRichPlanes)
+
+  return items
+}

src/components/ModelingSidebar/ModelingPanes/DebugPane.tsx

@@ -1,3 +1,4 @@
+import { DebugFeatureTree } from 'components/DebugFeatureTree'
 import { AstExplorer } from '../../AstExplorer'
 import { EngineCommands } from '../../EngineCommands'
 import { CamDebugSettings } from 'clientSideScene/ClientSideSceneComp'
@@ -12,6 +13,7 @@ export const DebugPane = () => {
         <EngineCommands />
         <CamDebugSettings />
         <AstExplorer />
+        <DebugFeatureTree />
       </div>
     </section>
   )

src/components/ModelingSidebar/ModelingPanes/MemoryPane.test.tsx

@@ -29,8 +29,8 @@ describe('processMemory', () => {
     |> lineTo([2.15, 4.32], %)
     // |> rx(90, %)`
     const ast = parse(code)
-    const programMemory = await enginelessExecutor(ast, ProgramMemory.empty())
-    const output = processMemory(programMemory)
+    const execState = await enginelessExecutor(ast, ProgramMemory.empty())
+    const output = processMemory(execState.memory)
     expect(output.myVar).toEqual(5)
     expect(output.otherVar).toEqual(3)
     expect(output).toEqual({