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>

e2e/playwright/debug-pane.spec.ts

@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test'
+
+import { getUtils, setup, tearDown } from './test-utils'
+
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
+})
+
+test.afterEach(async ({ page }, testInfo) => {
+  await tearDown(page, testInfo)
+})
+
+function countNewlines(input: string): number {
+  let count = 0
+  for (const char of input) {
+    if (char === '\n') {
+      count++
+    }
+  }
+  return count
+}
+
+test.describe('Debug pane', () => {
+  test('Artifact IDs in the artifact graph are stable across code edits', async ({
+    page,
+    context,
+  }) => {
+    const code = `sketch001 = startSketchOn('XZ')
+  |> startProfileAt([0, 0], %)
+|> line([1, 1], %)
+`
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    const tree = page.getByTestId('debug-feature-tree')
+    const segment = tree.locator('li', {
+      hasText: 'segIds:',
+      hasNotText: 'paths:',
+    })
+
+    await test.step('Test setup', async () => {
+      await u.waitForAuthSkipAppStart()
+      await u.openKclCodePanel()
+      await u.openDebugPanel()
+      // Set the code in the code editor.
+      await u.codeLocator.click()
+      await page.keyboard.type(code, { delay: 0 })
+      // Scroll to the feature tree.
+      await tree.scrollIntoViewIfNeeded()
+      // Expand the feature tree.
+      await tree.getByText('Feature Tree').click()
+      // Just expanded the details, making the element taller, so scroll again.
+      await tree.getByText('Plane').first().scrollIntoViewIfNeeded()
+    })
+    // Extract the artifact IDs from the debug feature tree.
+    const initialSegmentIds = await segment.innerText({ timeout: 5_000 })
+    // The artifact ID should include a UUID.
+    expect(initialSegmentIds).toMatch(
+      /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/
+    )
+    await test.step('Move cursor to the bottom of the code editor', async () => {
+      // Focus on the code editor.
+      await u.codeLocator.click()
+      // Make sure the cursor is at the end of the code.
+      const lines = countNewlines(code) + 1
+      for (let i = 0; i < lines; i++) {
+        await page.keyboard.press('ArrowDown')
+      }
+    })
+    await test.step('Enter a comment', async () => {
+      await page.keyboard.type('|> line([2, 2], %)', { delay: 0 })
+      // Wait for keyboard input debounce and updated artifact graph.
+      await page.waitForTimeout(1000)
+    })
+    const newSegmentIds = await segment.innerText()
+    // Strip off the closing bracket.
+    const initialIds = initialSegmentIds.slice(0, initialSegmentIds.length - 1)
+    expect(newSegmentIds.slice(0, initialIds.length)).toEqual(initialIds)
+  })
+})