ArtifactGraph reThink (PART 3)

.codespellrc

@@ -1,3 +1,3 @@
 [codespell]
-ignore-words-list: crate,everytime,inout,co-ordinate,ot,nwo,absolutey,atleast,ue
+ignore-words-list: crate,everytime,inout,co-ordinate,ot,nwo,absolutey,atleast,ue,afterall
 skip: **/target,node_modules,build,**/Cargo.lock,./docs/kcl/*.md,./src-tauri/gen/schemas

.github/workflows/ci.yml

@@ -20,6 +20,11 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
 
+permissions:
+  contents: write
+  pull-requests: write
+  actions: read
+
 jobs:
   check-format:
     runs-on: 'ubuntu-latest'
@@ -85,7 +90,38 @@ jobs:
 
       - run: yarn simpleserver:ci
 
-      - run: yarn test:nowatch
+      - name: Install Chromium Browser
+        run: yarn playwright install chromium --with-deps
+
+      - name: run unit tests
+        run: yarn test:nowatch
+        env:
+          VITE_KC_DEV_TOKEN: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
+
+      - name: check for changes
+        id: git-check
+        run: |
+            git add src/lang/std/artifactMapGraphs
+            if git status src/lang/std/artifactMapGraphs | grep -q "Changes to be committed"
+            then echo "modified=true" >> $GITHUB_OUTPUT
+            else echo "modified=false" >> $GITHUB_OUTPUT
+            fi
+      - name: Commit changes, if any
+        if: steps.git-check.outputs.modified == 'true'
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git remote set-url origin https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git
+          git fetch origin
+          echo ${{ github.head_ref }}
+          git checkout ${{ github.head_ref }}
+          # TODO when webkit works on ubuntu remove the os part of the commit message
+          git commit -am "Look at this (photo)Graph *in the voice of Nickelback*" || true
+          git push
+          git push origin ${{ github.head_ref }}
+
+
+
 
 
   prepare-json-files:

.gitignore

@@ -39,6 +39,7 @@ src/wasm-lib/grackle/test_json_output
 e2e/playwright/playwright-secrets.env
 e2e/playwright/temp1.png
 e2e/playwright/temp2.png
+e2e/playwright/temp3.png
 # exports from snapshot-tests.spec.ts "exports of each format should work"
 e2e/playwright/export-snapshots/*
 !e2e/playwright/export-snapshots/*.png
@@ -48,6 +49,7 @@ e2e/playwright/export-snapshots/*
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/src/lang/std/artifactMapCache
 
 
 ## generated files

e2e/playwright/flow-tests.spec.ts

@@ -26,7 +26,7 @@ import * as TOML from '@iarna/toml'
 import { LineInputsType } from 'lang/std/sketchcombos'
 import { Coords2d } from 'lang/std/sketch'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
-import { EngineCommand } from 'lang/std/artifactMap'
+import { EngineCommand } from 'lang/std/artifactGraph'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { bracket } from 'lib/exampleKcl'
 
@@ -466,7 +466,7 @@ test.describe('Testing Camera Movement', () => {
 
     await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
 
-    await page.waitForTimeout(100)
+    await page.waitForTimeout(200)
     // hover over horizontal line
     await u.canvasLocator.hover({ position: { x: 800, y } })
     await expect(page.getByTestId('hover-highlight').first()).toBeVisible({
@@ -2623,10 +2623,9 @@ test.describe('Testing selections', () => {
       await page.mouse.move(startXPx + PUR * 15, 500 - PUR * 10)
 
       await expect(page.getByTestId('hover-highlight').first()).toBeVisible()
-      // bg-yellow-200 is more brittle than hover-highlight, but is closer to the user experience
+      // bg-yellow-300/70 is more brittle than hover-highlight, but is closer to the user experience
       // and will be an easy fix if it breaks because we change the colour
-      await expect(page.locator('.bg-yellow-200').first()).toBeVisible()
-
+      await expect(page.locator('.bg-yellow-300\\/70')).toBeVisible()
       // check mousing off, than mousing onto another line
       await page.mouse.move(startXPx + PUR * 10, 500 - PUR * 15) // mouse off
       await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
@@ -3078,7 +3077,7 @@ const sketch002 = startSketchOn(launderExtrudeThroughVar, seg02)
     await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()
 
     await page.mouse.move(flatExtrusionFace[0], flatExtrusionFace[1])
-    await expect(page.getByTestId('hover-highlight')).toHaveCount(5) // multiple lines
+    await expect(page.getByTestId('hover-highlight')).toHaveCount(6) // multiple lines
     await page.mouse.move(nothing[0], nothing[1])
     await page.waitForTimeout(100)
     await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()

e2e/playwright/test-utils.ts

@@ -1,5 +1,5 @@
 import { expect, Page, Download } from '@playwright/test'
-import { EngineCommand } from 'lang/std/artifactMap'
+import { EngineCommand } from 'lang/std/artifactGraph'
 import os from 'os'
 import fsp from 'fs/promises'
 import pixelMatch from 'pixelmatch'

package.json

@@ -116,6 +116,7 @@
     "@tauri-apps/cli": "==2.0.0-beta.13",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^15.0.2",
+    "@types/d3-force": "^3.0.10",
     "@types/mocha": "^10.0.6",
     "@types/node": "^18.19.31",
     "@types/pixelmatch": "^5.2.6",
@@ -138,6 +139,7 @@
     "@wdio/spec-reporter": "^8.36.0",
     "@xstate/cli": "^0.5.17",
     "autoprefixer": "^10.4.19",
+    "d3-force": "^3.0.0",
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.12.0",

src/App.tsx

@@ -2,7 +2,7 @@ import { MouseEventHandler, useEffect, useMemo, useRef } from 'react'
 import { uuidv4 } from 'lib/utils'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
 import { Stream } from './components/Stream'
-import { EngineCommand } from 'lang/std/artifactMap'
+import { EngineCommand } from 'lang/std/artifactGraph'
 import { throttle } from './lib/utils'
 import { AppHeader } from './components/AppHeader'
 import { useHotkeys } from 'react-hotkeys-hook'

src/Toolbar.tsx

@@ -40,10 +40,10 @@ export function Toolbar({
       return false
     }
     return isCursorInSketchCommandRange(
-      engineCommandManager.artifactMap,
+      engineCommandManager.artifactGraph,
       context.selectionRanges
     )
-  }, [engineCommandManager.artifactMap, context.selectionRanges])
+  }, [engineCommandManager.artifactGraph, context.selectionRanges])
 
   const toolbarButtonsRef = useRef<HTMLUListElement>(null)
   const { overallState } = useNetworkContext()

src/clientSideScene/CameraControls.ts

@@ -21,7 +21,7 @@ import {
   EngineCommandManager,
   UnreliableSubscription,
 } from 'lang/std/engineConnection'
-import { EngineCommand } from 'lang/std/artifactMap'
+import { EngineCommand } from 'lang/std/artifactGraph'
 import { uuidv4 } from 'lib/utils'
 import { deg2Rad } from 'lib/utils2d'
 import { isReducedMotion, roundOff, throttle } from 'lib/utils'

src/clientSideScene/ClientSideSceneComp.tsx

@@ -574,10 +574,10 @@ const ConstraintSymbol = ({
             : 'bg-primary/30 dark:bg-primary text-primary dark:text-chalkboard-10 dark:border-transparent group-hover:bg-primary/40 group-hover:border-primary/50 group-hover:brightness-125'
         } h-[26px] w-[26px] rounded-sm relative m-0 p-0`}
         onMouseEnter={() => {
-          editorManager.setHighlightRange(range)
+          editorManager.setHighlightRange([range])
         }}
         onMouseLeave={() => {
-          editorManager.setHighlightRange([0, 0])
+          editorManager.setHighlightRange([[0, 0]])
         }}
         // disabled={isConstrained || !convertToVarEnabled}
         // disabled={implicitDesc} TODO why does this change styles that are hard to override?

src/clientSideScene/sceneEntities.ts

@@ -105,6 +105,11 @@ import {
 import { getThemeColorForThreeJs } from 'lib/theme'
 import { err, trap } from 'lib/trap'
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
+import {
+  getCapCodeRef,
+  getExtrusionFromSuspectedExtrudeSurface,
+  getWallCodeRef,
+} from 'lang/std/artifactGraph'
 
 type DraftSegment = 'line' | 'tangentialArcTo'
 
@@ -1587,40 +1592,29 @@ export class SceneEntities {
           })
           return
         }
-        const artifact = this.engineCommandManager.artifactMap[_entity_id]
-        // If we clicked on an extrude wall, we climb up the parent Id
-        // to get the sketch profile's face ID. If we clicked on an endcap,
-        // we already have it.
-        const pathId =
-          artifact?.type === 'extrudeWall' || artifact?.type === 'extrudeCap'
-            ? artifact.pathId
-            : ''
-
-        // tsc cannot infer that target can have extrusions
-        // from the commandType (why?) so we need to cast it
-        const path = this.engineCommandManager.artifactMap?.[pathId || '']
-        const extrusionId =
-          path?.type === 'startPath' ? path.extrusionIds[0] : ''
-
-        // TODO: We get the first extrusion command ID,
-        // which is fine while backend systems only support one extrusion.
-        // but we need to more robustly handle resolving to the correct extrusion
-        // if there are multiple.
-        const extrusions = this.engineCommandManager.artifactMap?.[extrusionId]
-
-        if (artifact?.type !== 'extrudeCap' && artifact?.type !== 'extrudeWall')
-          return
+        const artifact = this.engineCommandManager.artifactGraph.get(_entity_id)
+        const extrusion = getExtrusionFromSuspectedExtrudeSurface(
+          _entity_id,
+          this.engineCommandManager.artifactGraph
+        )
+
+        if (artifact?.type !== 'cap' && artifact?.type !== 'wall') return
+
+        const codeRef =
+          artifact.type === 'cap'
+            ? getCapCodeRef(artifact, this.engineCommandManager.artifactGraph)
+            : getWallCodeRef(artifact, this.engineCommandManager.artifactGraph)
 
         const faceInfo = await getFaceDetails(_entity_id)
         if (!faceInfo?.origin || !faceInfo?.z_axis || !faceInfo?.y_axis) return
         const { z_axis, y_axis, origin } = faceInfo
         const sketchPathToNode = getNodePathFromSourceRange(
           kclManager.ast,
-          artifact.range
+          err(codeRef) ? [0, 0] : codeRef.range
         )
 
-        const extrudePathToNode = extrusions?.range
-          ? getNodePathFromSourceRange(kclManager.ast, extrusions.range)
+        const extrudePathToNode = !err(extrusion)
+          ? getNodePathFromSourceRange(kclManager.ast, extrusion.codeRef.range)
           : []
 
         sceneInfra.modelingSend({
@@ -1634,7 +1628,7 @@ export class SceneEntities {
             ) as [number, number, number],
             sketchPathToNode,
             extrudePathToNode,
-            cap: artifact.type === 'extrudeCap' ? artifact.cap : 'none',
+            cap: artifact.type === 'cap' ? artifact.subType : 'none',
             faceId: _entity_id,
           },
         })
@@ -1666,7 +1660,7 @@ export class SceneEntities {
           )
           if (trap(_node, { suppress: true })) return
           const node = _node.node
-          editorManager.setHighlightRange([node.start, node.end])
+          editorManager.setHighlightRange([[node.start, node.end]])
           const yellow = 0xffff00
           colorSegment(selected, yellow)
           const extraSegmentGroup = parent.getObjectByName(EXTRA_SEGMENT_HANDLE)
@@ -1702,10 +1696,10 @@ export class SceneEntities {
           }
           return
         }
-        editorManager.setHighlightRange([0, 0])
+        editorManager.setHighlightRange([[0, 0]])
       },
       onMouseLeave: ({ selected, ...rest }: OnMouseEnterLeaveArgs) => {
-        editorManager.setHighlightRange([0, 0])
+        editorManager.setHighlightRange([[0, 0]])
         const parent = getParentGroup(selected, [
           STRAIGHT_SEGMENT,
           TANGENTIAL_ARC_TO_SEGMENT,

src/components/AstExplorer.tsx

@@ -44,7 +44,7 @@ export function AstExplorer() {
       <div
         className="h-full relative"
         onMouseLeave={(e) => {
-          editorManager.setHighlightRange([0, 0])
+          editorManager.setHighlightRange([[0, 0]])
         }}
       >
         <pre className="text-xs">
@@ -113,12 +113,12 @@ function DisplayObj({
         hasCursor ? 'bg-violet-100/80 dark:bg-violet-100/25' : ''
       }`}
       onMouseEnter={(e) => {
-        editorManager.setHighlightRange([obj?.start || 0, obj.end])
+        editorManager.setHighlightRange([[obj?.start || 0, obj.end]])
         e.stopPropagation()
       }}
       onMouseMove={(e) => {
         e.stopPropagation()
-        editorManager.setHighlightRange([obj?.start || 0, obj.end])
+        editorManager.setHighlightRange([[obj?.start || 0, obj.end]])
       }}
       onClick={(e) => {
         send({

src/components/ModelingMachineProvider.tsx

@@ -431,7 +431,7 @@ export const ModelingMachineProvider = ({
           if (!isSingleCursorInPipe(selectionRanges, kclManager.ast))
             return false
           return !!isCursorInSketchCommandRange(
-            engineCommandManager.artifactMap,
+            engineCommandManager.artifactGraph,
             selectionRanges
           )
         },

src/editor/highlightextension.ts

@@ -3,7 +3,7 @@ import { EditorView, Decoration } from '@codemirror/view'
 
 export { EditorView }
 
-export const addLineHighlight = StateEffect.define<[number, number]>()
+export const addLineHighlight = StateEffect.define<Array<[number, number]>>()
 
 const addLineHighlightAnnotation = Annotation.define<null>()
 export const addLineHighlightEvent = addLineHighlightAnnotation.of(null)
@@ -24,10 +24,18 @@ export const lineHighlightField = StateField.define({
     for (let e of tr.effects) {
       if (e.is(addLineHighlight)) {
         lines = Decoration.none
-        const [from, to] = e.value || [0, 0]
-        if (from && to && !(from === to && from === 0)) {
-          lines = lines.update({ add: [matchDeco.range(from, to)] })
-          deco.push(matchDeco.range(from, to))
+        for (let index = 0; index < e.value.length; index++) {
+          const highlightRange = e.value[index]
+          const [from, to] = highlightRange || [0, 0]
+          if (from && to && !(from === to && from === 0)) {
+            if (index === 0) {
+              lines = lines.update({ add: [matchDeco.range(from, to)] })
+              deco.push(matchDeco.range(from, to))
+            } else {
+              lines = lines.update({ add: [matchDeco2.range(from, to)] })
+              deco.push(matchDeco2.range(from, to))
+            }
+          }
         }
       }
     }
@@ -37,6 +45,10 @@ export const lineHighlightField = StateField.define({
 })
 
 const matchDeco = Decoration.mark({
-  class: 'bg-yellow-200',
+  class: 'bg-yellow-300/70',
+  attributes: { 'data-testid': 'hover-highlight' },
+})
+const matchDeco2 = Decoration.mark({
+  class: 'bg-yellow-200/40',
   attributes: { 'data-testid': 'hover-highlight' },
 })

src/editor/manager.ts

@@ -42,7 +42,7 @@ export default class EditorManager {
   private _convertToVariableEnabled: boolean = false
   private _convertToVariableCallback: () => void = () => {}
 
-  private _highlightRange: [number, number] = [0, 0]
+  private _highlightRange: Array<[number, number]> = [[0, 0]]
 
   setCopilotEnabled(enabled: boolean) {
     this._copilotEnabled = enabled
@@ -88,19 +88,21 @@ export default class EditorManager {
     return this._commandBarSend(eventInfo)
   }
 
-  get highlightRange(): [number, number] {
+  get highlightRange(): Array<[number, number]> {
     return this._highlightRange
   }
 
-  setHighlightRange(selection: Selection['range']): void {
-    this._highlightRange = selection
-    const safeEnd = Math.min(
-      selection[1],
-      this._editorView?.state.doc.length || selection[1]
-    )
+  setHighlightRange(selections: Array<Selection['range']>): void {
+    this._highlightRange = selections
+
+    const selectionsWithSafeEnds = selections.map((s): [number, number] => {
+      const safeEnd = Math.min(s[1], this._editorView?.state.doc.length || s[1])
+      return [s[0], safeEnd]
+    })
+
     if (this._editorView) {
       this._editorView.dispatch({
-        effects: addLineHighlight.of([selection[0], safeEnd]),
+        effects: addLineHighlight.of(selectionsWithSafeEnds),
         annotations: [
           updateOutsideEditorEvent,
           addLineHighlightEvent,

src/env.ts

@@ -12,3 +12,4 @@ export const VITE_KC_DEV_TOKEN = import.meta.env.VITE_KC_DEV_TOKEN as
   | undefined
 export const TEST = import.meta.env.TEST
 export const DEV = import.meta.env.DEV
+export const CI = import.meta.env.CI