CB self icons (#10006)

In the component browser input field, render the source node as an icon instead of its identifier; an edge connects the icon to the source node's output port.

https://github.com/enso-org/enso/assets/1047859/a36a8a55-6717-4887-a72c-2b2eafde4260

Closes #9210.

# Important Notes
- Fix node selection being visible (but glitched) while editing node.
- Fix bug in CB positioning when editing a node at non-default zoom.
- Fix disconnected edge hover allowing self-connection.
- Consolidate some color logic in `nodeColors`.

app/gui2/e2e/componentBrowser.spec.ts

@@ -11,11 +11,20 @@ async function deselectAllNodes(page: Page) {
   await expect(locate.selectedNodes(page)).toHaveCount(0)
 }
 
-async function expectAndCancelBrowser(page: Page, expectedInput: string) {
+async function expectAndCancelBrowser(
+  page: Page,
+  expectedText: string,
+  expectedSelfArgument?: string,
+) {
   const nodeCount = await locate.graphNode(page).count()
   await expect(locate.componentBrowser(page)).toExist()
   await expect(locate.componentBrowserEntry(page)).toExist()
-  await expect(locate.componentBrowserInput(page).locator('input')).toHaveValue(expectedInput)
+  if (expectedSelfArgument != null)
+    await expect(locate.componentBrowser(page)).toHaveAttribute(
+      'data-self-argument',
+      expectedSelfArgument,
+    )
+  await expect(locate.componentBrowserInput(page).locator('input')).toHaveValue(expectedText)
   await expect(locate.componentBrowserInput(page).locator('input')).toBeInViewport()
   await page.keyboard.press('Escape')
   await expect(locate.componentBrowser(page)).not.toBeVisible()
@@ -39,23 +48,23 @@ test('Different ways of opening Component Browser', async ({ page }) => {
   // (+) button
   await locate.graphNodeByBinding(page, 'final').click()
   await locate.addNewNodeButton(page).click()
-  await expectAndCancelBrowser(page, 'final.')
+  await expectAndCancelBrowser(page, '', 'final')
   // Enter key
   await locate.graphNodeByBinding(page, 'final').click()
   await locate.graphEditor(page).press('Enter')
-  await expectAndCancelBrowser(page, 'final.')
+  await expectAndCancelBrowser(page, '', 'final')
   // Dragging out an edge
   const outputPort = await locate.outputPortCoordinates(locate.graphNodeByBinding(page, 'final'))
   await page.mouse.click(outputPort.x, outputPort.y)
   await page.mouse.click(100, 500)
-  await expectAndCancelBrowser(page, 'final.')
+  await expectAndCancelBrowser(page, '', 'final')
   // Double-clicking port
   // TODO[ao] Without timeout, even the first click would be treated as double due to previous
   // event. Probably we need a better way to simulate double clicks.
   await page.waitForTimeout(600)
   await page.mouse.click(outputPort.x, outputPort.y)
   await page.mouse.click(outputPort.x, outputPort.y)
-  await expectAndCancelBrowser(page, 'final.')
+  await expectAndCancelBrowser(page, '', 'final')
 })
 
 test('Opening Component Browser with small plus buttons', async ({ page }) => {
@@ -68,7 +77,7 @@ test('Opening Component Browser with small plus buttons', async ({ page }) => {
   await locate.graphNodeIcon(locate.graphNodeByBinding(page, 'selected')).hover()
   await expect(locate.smallPlusButton(page)).toBeVisible()
   await locate.smallPlusButton(page).click()
-  await expectAndCancelBrowser(page, 'selected.')
+  await expectAndCancelBrowser(page, '', 'selected')
 
   // Small (+) button shown when node is sole selection
   await page.keyboard.press('Escape')
@@ -77,7 +86,7 @@ test('Opening Component Browser with small plus buttons', async ({ page }) => {
   await locate.graphNodeByBinding(page, 'selected').click()
   await expect(locate.smallPlusButton(page)).toBeVisible()
   await locate.smallPlusButton(page).click()
-  await expectAndCancelBrowser(page, 'selected.')
+  await expectAndCancelBrowser(page, '', 'selected')
 })
 
 test('Graph Editor pans to Component Browser', async ({ page }) => {
@@ -92,7 +101,7 @@ test('Graph Editor pans to Component Browser', async ({ page }) => {
   await expect(locate.graphNodeByBinding(page, 'final')).not.toBeInViewport()
   await locate.graphEditor(page).press('Enter')
   await expect(locate.graphNodeByBinding(page, 'final')).toBeInViewport()
-  await expectAndCancelBrowser(page, 'final.')
+  await expectAndCancelBrowser(page, '', 'final')
 
   // Dragging out an edge to the bottom of the viewport; when the CB pans into view, some nodes are out of view.
   await page.mouse.move(100, 1100)
@@ -104,7 +113,7 @@ test('Graph Editor pans to Component Browser', async ({ page }) => {
   await page.mouse.click(outputPort.x, outputPort.y)
   await page.mouse.click(100, 1700)
   await expect(locate.graphNodeByBinding(page, 'five')).not.toBeInViewport()
-  await expectAndCancelBrowser(page, 'final.')
+  await expectAndCancelBrowser(page, '', 'final')
 })
 
 test('Accepting suggestion', async ({ page }) => {
@@ -314,5 +323,6 @@ test('AI prompt', async ({ page }) => {
 
   await page.keyboard.insertText('AI:convert to table')
   await page.keyboard.press('Enter')
-  await expect(locate.componentBrowserInput(page).locator('input')).toHaveValue('data.to_table')
+  await expect(locate.componentBrowserInput(page).locator('input')).toHaveValue('to_table')
+  await expect(locate.componentBrowser(page)).toHaveAttribute('data-self-argument', 'data')
 })

app/gui2/e2e/locate.ts

@@ -178,7 +178,7 @@ export function componentBrowserEntryByLabel(page: Locator | Page, label: string
 }
 
 export const navBreadcrumb = componentLocator('NavBreadcrumb')
-export const componentBrowserInput = componentLocator('CBInput')
+export const componentBrowserInput = componentLocator('ComponentEditor')
 export const jsonVisualization = componentLocator('JSONVisualization')
 export const tableVisualization = componentLocator('TableVisualization')
 export const scatterplotVisualization = componentLocator('ScatterplotVisualization')