Code Review feedback

Author: AdRiley

app/gui/integration-test/project-view/graphNodeVisualization.spec.ts

@@ -5,10 +5,11 @@ import { computedContent } from './css'
 import { expect } from './customExpect'
 import { CONTROL_KEY } from './keyboard'
 import * as locate from './locate'
+import { mockExpressionUpdate } from './expressionUpdates'
 
 test('Node can open and load visualization', async ({ page }) => {
   await actions.goToGraph(page)
-  const node = locate.graphNode(page).last()
+  const node = locate.graphNodeByBinding(page, 'final')
   await node.click({ position: { x: 8, y: 8 } })
   await expect(locate.componentMenu(page)).toExist()
   await locate.toggleVisualizationButton(page).click()
@@ -24,6 +25,12 @@ test('Node can open and load visualization', async ({ page }) => {
   const textContent = await computedContent(element)
   const jsonContent = JSON.parse(textContent)
   expect(typeof jsonContent).toBe('object')
+  const nodeType = await locate.visualisationNodeType(page)
+  await expect(nodeType).toHaveText('Unknown')
+  await mockExpressionUpdate(page, 'final', { type: ['Standard.Table.Table.Table'] })
+  await expect(nodeType).toHaveText('Table')
+  await mockExpressionUpdate(page, 'final', { type: ['Standard.Table.Table.DifferentType'] })
+  await expect(nodeType).toHaveText('DifferentType')
 })
 
 test('Previewing visualization', async ({ page }) => {

app/gui/integration-test/project-view/locate.ts

@@ -154,6 +154,10 @@ export const geoMapVisualization = visualizationLocator('.GeoMapVisualization')
 export const imageBase64Visualization = visualizationLocator('.ImageBase64Visualization')
 export const warningsVisualization = visualizationLocator('.WarningsVisualization')
 
+export function visualisationNodeType(page: Page) {
+  return page.getByTestId('visualisationNodeType')
+}
+
 // === Edge locators ===
 
 /** All edges going from a node with given binding. */

app/gui/src/project-view/components/GraphEditor/GraphVisualization/VisualizationToolbar.vue

@@ -107,6 +107,7 @@ useEvent(window, 'pointerup', (e) => interaction.handlePointerEvent(e, 'pointeru
       class="after-toolbars node-type"
       :title="props.typename ?? UNKNOWN_TYPE"
       v-text="nodeShortType"
+      data-testid="visualisationNodeType"
     />
   </div>
 </template>

app/gui/src/project-view/stores/project/computedValueRegistry.ts

@@ -82,15 +82,15 @@ function updateInfo(
   if (newInfo.rawTypename !== info.rawTypename) info.rawTypename = newInfo.rawTypename
   if (newInfo.methodCall !== info.methodCall) info.methodCall = newInfo.methodCall
   if (newInfo.payload !== info.payload) info.payload = newInfo.payload
-  if (newInfo.profilingInfo !== info.profilingInfo) info.profilingInfo = update.profilingInfo
-  // Ensure new fields can't be added to `ExpressionInfo` without this code being updated. 
-  const _allFieldsHandled = { 
-    typename,
-    rawTypename,
-    methodCall,
-    payload,
-    profilingInfo, 
-  } satisfies ExpressionInfo 
+  if (newInfo.profilingInfo !== info.profilingInfo) info.profilingInfo = newInfo.profilingInfo
+  // Ensure new fields can't be added to `ExpressionInfo` without this code being updated.
+  const _allFieldsHandled = {
+    typename: newInfo.typename,
+    rawTypename: newInfo.rawTypename,
+    methodCall: newInfo.methodCall,
+    payload: newInfo.payload,
+    profilingInfo: newInfo.profilingInfo
+  } satisfies ExpressionInfo;
 }
 
 /**