Reconnect visualizations when switching their types

app/gui/package.json

@@ -184,7 +184,7 @@
     "sql-formatter": "^13.0.0",
     "tar": "^6.2.1",
     "tsx": "^4.7.1",
-    "vite-plugin-vue-devtools": "7.3.7",
+    "vite-plugin-vue-devtools": "7.6.3",
     "vite-plugin-wasm": "^3.3.0",
     "vue-react-wrapper": "^0.3.1",
     "vue-tsc": "^2.0.24",

app/gui/src/project-view/components/GraphEditor/GraphNode.vue

@@ -405,6 +405,10 @@ watchEffect(() => {
     emit('update:rect', nodeOuterRect.value)
   }
 })
+
+const dataSource = computed(
+  () => ({ type: 'node', nodeId: props.node.rootExpr.externalId }) as const,
+)
 </script>
 
 <template>
@@ -489,7 +493,7 @@ watchEffect(() => {
       :nodePosition="nodePosition"
       :isCircularMenuVisible="menuVisible"
       :currentType="props.node.vis?.identifier"
-      :dataSource="{ type: 'node', nodeId: props.node.rootExpr.externalId }"
+      :dataSource="dataSource"
       :typename="expressionInfo?.typename"
       :width="visualizationWidth"
       :height="visualizationHeight"

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

@@ -183,6 +183,15 @@ watch(
   () => isFullscreen,
   (f) => f && nextTick(() => panelElement.value?.focus()),
 )
+
+const visParams = computed(() => {
+  return {
+    visualization: effectiveVisualization.value,
+    data: effectiveVisualizationData.value,
+    size: contentElementSize.value,
+    nodeType: props.typename,
+  }
+})
 </script>
 
 <script lang="ts">
@@ -239,10 +248,7 @@ customElements.define(ensoVisualizationHost, defineCustomElement(VisualizationHo
         >
           <component
             :is="ensoVisualizationHost"
-            :visualization="effectiveVisualization"
-            :data="effectiveVisualizationData"
-            :size="contentElementSize"
-            :nodeType="typename"
+            :params="visParams"
             @updatePreprocessor="
               updatePreprocessor($event.detail[0], $event.detail[1], ...$event.detail.slice(2))
             "

app/gui/src/project-view/components/visualizations/LoadingErrorVisualization.vue

@@ -4,11 +4,7 @@ export const inputType = 'Any'
 </script>
 
 <script setup lang="ts">
-import { watchEffect } from 'vue'
-
 const props = defineProps<{ data: { name: string; error: Error } }>()
-
-watchEffect(() => console.error(props.data.error))
 </script>
 
 <template>

app/gui/src/project-view/components/visualizations/VisualizationHost.vue

@@ -6,13 +6,18 @@ import { provideVisualizationConfig } from '@/providers/visualizationConfig'
 import type { Vec2 } from '@/util/data/vec2'
 import type { ToValue } from '@/util/reactivity'
 
-const { visualization, data, size, nodeType } = defineProps<{
-  visualization?: string | object
-  data?: any
-  size: Vec2
-  nodeType?: string | undefined
-  overflow?: boolean
-  toolbarOverflow?: boolean
+// A single prop `params` is important to mitigate a bug in Vue that causes
+// inconsistent state when multiple props are present on the custom elements component.
+// TODO[ib]: Add a link to the issue.
+const props = defineProps<{
+  params: {
+    visualization?: string | object
+    data?: any
+    size: Vec2
+    nodeType?: string | undefined
+    overflow?: boolean
+    toolbarOverflow?: boolean
+  }
 }>()
 
 const emit = defineEmits<{
@@ -32,10 +37,10 @@ const emit = defineEmits<{
 
 provideVisualizationConfig({
   get size() {
-    return size
+    return props.params.size
   },
   get nodeType() {
-    return nodeType
+    return props.params.nodeType
   },
   setPreprocessor: (
     visualizationModule: string,
@@ -52,7 +57,11 @@ provideVisualizationConfig({
 <template>
   <Suspense>
     <template #fallback><LoadingVisualization /></template>
-    <component :is="visualization" v-if="visualization && data" :data="data" />
+    <component
+      :is="props.params.visualization"
+      v-if="props.params.visualization && props.params.data"
+      :data="props.params.data"
+    />
     <LoadingVisualization v-else />
   </Suspense>
 </template>

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

@@ -15,6 +15,7 @@ import * as random from 'lib0/random'
 import { reactive } from 'vue'
 import type { LanguageServer } from 'ydoc-shared/languageServer'
 import {
+  methodPointerEquals,
   stackItemsEqual,
   type ContextId,
   type Diagnostic,
@@ -45,16 +46,26 @@ function visualizationConfigEqual(
   b: NodeVisualizationConfiguration,
 ): boolean {
   return (
-    a === b ||
+    visualizationConfigPreprocessorEqual(a, b) &&
+    (a.positionalArgumentsExpressions === b.positionalArgumentsExpressions ||
+      (Array.isArray(a.positionalArgumentsExpressions) &&
+        Array.isArray(b.positionalArgumentsExpressions) &&
+        array.equalFlat(a.positionalArgumentsExpressions, b.positionalArgumentsExpressions)))
+  )
+}
+
+/** Same as {@link visualizationConfigEqual}, but ignores differences in {@link NodeVisualizationConfiguration.positionalArgumentsExpressions}. */
+export function visualizationConfigPreprocessorEqual(
+  a: NodeVisualizationConfiguration,
+  b: NodeVisualizationConfiguration,
+): boolean {
+  return (
+    a == b ||
     (a.visualizationModule === b.visualizationModule &&
-      (a.positionalArgumentsExpressions === b.positionalArgumentsExpressions ||
-        (Array.isArray(a.positionalArgumentsExpressions) &&
-          Array.isArray(b.positionalArgumentsExpressions) &&
-          array.equalFlat(a.positionalArgumentsExpressions, b.positionalArgumentsExpressions))) &&
       (a.expression === b.expression ||
         (typeof a.expression === 'object' &&
           typeof b.expression === 'object' &&
-          object.equalFlat(a.expression, b.expression))))
+          methodPointerEquals(a.expression, b.expression))))
   )
 }
 

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

@@ -4,6 +4,7 @@ import { Awareness } from '@/stores/awareness'
 import { ComputedValueRegistry } from '@/stores/project/computedValueRegistry'
 import {
   ExecutionContext,
+  visualizationConfigPreprocessorEqual,
   type NodeVisualizationConfiguration,
 } from '@/stores/project/executionContext'
 import { VisualizationDataRegistry } from '@/stores/project/visualizationDataRegistry'
@@ -237,11 +238,17 @@ export const { provideFn: provideProjectStore, injectFn: useProjectStore } = cre
     })
 
     function useVisualizationData(configuration: WatchSource<Opt<NodeVisualizationConfiguration>>) {
-      const id = random.uuidv4() as Uuid
+      const newId = () => random.uuidv4() as Uuid
+      const visId = ref(newId())
+      // Regenerate the visualization ID when the preprocessor changes.
+      watch(configuration, (a, b) => {
+        if (a != null && b != null && !visualizationConfigPreprocessorEqual(a, b))
+          visId.value = newId()
+      })
 
       watch(
-        configuration,
-        (config, _, onCleanup) => {
+        [configuration, visId],
+        ([config, id], _, onCleanup) => {
           executionContext.setVisualization(id, config)
           onCleanup(() => executionContext.setVisualization(id, null))
         },
@@ -250,7 +257,9 @@ export const { provideFn: provideProjectStore, injectFn: useProjectStore } = cre
         { immediate: true, flush: 'post' },
       )
 
-      return computed(() => parseVisualizationData(visualizationDataRegistry.getRawData(id)))
+      return computed(() =>
+        parseVisualizationData(visualizationDataRegistry.getRawData(visId.value)),
+      )
     }
 
     const dataflowErrors = new ReactiveMapping(computedValueRegistry.db, (id, info) => {

app/gui/src/project-view/util/reactivity.ts

@@ -5,6 +5,9 @@ import { debouncedWatch } from '@vueuse/core'
 import { nop } from 'lib0/function'
 import type {
   ComputedRef,
+  // (it is used in docs)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  DebuggerOptions,
   DeepReadonly,
   MaybeRefOrGetter,
   ReactiveEffectOptions,
@@ -349,3 +352,25 @@ export function useSelectRef<T>(
     },
   })
 }
+
+/**
+ * Log any access to `anyRef`’s `value` property.
+ *
+ * {@link computed} and {@link watch} allow you to set custom
+ * {@link DebuggerOptions.onTrack} and {@link DebuggerOptions.onTrigger} callbacks,
+ * but they only allow tracking dependencies and recomputations, not access to the value itself.
+ *
+ * This function solves this issue by wrapping the `value` property of a ref with a custom getter.
+ * You can also set a debugger breakpoint in the getter to precisely track the callstack of each access.
+ */
+export function debugAccess(anyRef: Ref<any>, name: string) {
+  const originalGetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(anyRef), 'value')
+
+  Object.defineProperty(anyRef, 'value', {
+    ...originalGetter,
+    get: () => {
+      console.log(`Accessing ${name}`)
+      return originalGetter?.get?.call(anyRef)
+    },
+  })
+}