From b28b743ae41ac0a8e5703f4f999e5155b1db4c9a Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Mon, 15 Jan 2024 09:12:34 +0100
Subject: [PATCH] Set of GUI2 widgets fixes (#8749)

Implements first two points of #8745

1. The fix for drop-down was simple, just stop click propagation
2. The fix for connections was much more complicated. It turned out, that it's about keeping track of hovered ports; when picking an option in WidgetSelection makes the drop-down disappear - but that won't emit `pointerleave` event, so the port was still deemed hovered. Changed the mechanism for tracking hovered port to more "centralized" one.
---
 app/gui2/mock/providers.ts                    |  2 --
 app/gui2/playwright.config.ts                 |  2 +-
 .../src/components/GraphEditor/NodeWidget.vue |  1 +
 .../GraphEditor/widgets/WidgetFunction.vue    |  4 +++-
 .../GraphEditor/widgets/WidgetPort.vue        | 13 +------------
 .../GraphEditor/widgets/WidgetSelection.vue   |  2 +-
 app/gui2/src/composables/selection.ts         | 19 ++++++++++++++-----
 7 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/app/gui2/mock/providers.ts b/app/gui2/mock/providers.ts
index 06160350874..51c5c4e2a8f 100644
--- a/app/gui2/mock/providers.ts
+++ b/app/gui2/mock/providers.ts
@@ -25,8 +25,6 @@ export const graphSelection: GraphSelection = {
   events: {} as any,
   anchor: undefined,
   deselectAll: () => {},
-  addHoveredPort: () => new Set(),
-  removeHoveredPort: () => false,
   handleSelectionOf: () => {},
   hoveredNode: undefined,
   hoveredPort: undefined,
diff --git a/app/gui2/playwright.config.ts b/app/gui2/playwright.config.ts
index 06cd20c2415..596a73cd105 100644
--- a/app/gui2/playwright.config.ts
+++ b/app/gui2/playwright.config.ts
@@ -85,7 +85,7 @@ export default defineConfig({
     env: {
       E2E: 'true',
     },
-    command: 'vite build && vite preview',
+    command: 'npx vite build && npx vite preview',
     port: 4173,
     // We use our special, mocked version of server, thus do not want to re-use user's one.
     reuseExistingServer: false,
diff --git a/app/gui2/src/components/GraphEditor/NodeWidget.vue b/app/gui2/src/components/GraphEditor/NodeWidget.vue
index dadf73d8b70..114dcd6b533 100644
--- a/app/gui2/src/components/GraphEditor/NodeWidget.vue
+++ b/app/gui2/src/components/GraphEditor/NodeWidget.vue
@@ -98,6 +98,7 @@ const spanStart = computed(() => {
     :input="props.input"
     :nesting="nesting"
     :data-span-start="spanStart"
+    :data-port="props.input.portId"
     @update="updateHandler"
   />
   <span
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
index 38a15200bd9..08f8e21cfaa 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
@@ -120,13 +120,15 @@ const visualizationData = project.useVisualizationData(visualizationConfig)
 const widgetConfiguration = computed(() => {
   if (props.input.dynamicConfig?.kind === 'FunctionCall') return props.input.dynamicConfig
   const data = visualizationData.value
-  if (data != null && data.ok) {
+  if (data?.ok) {
     const parseResult = argsWidgetConfigurationSchema.safeParse(data.value)
     if (parseResult.success) {
       return functionCallConfiguration(parseResult.data)
     } else {
       console.error('Unable to parse widget configuration.', data, parseResult.error)
     }
+  } else if (data != null && !data.ok) {
+    data.error.log('Cannot load dynamic configuration')
   }
   return undefined
 })
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue
index b14da117127..4c1dcc8eaef 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue
@@ -20,7 +20,6 @@ import {
   nextTick,
   onUpdated,
   proxyRefs,
-  ref,
   shallowRef,
   toRef,
   watch,
@@ -35,7 +34,7 @@ const navigator = injectGraphNavigator()
 const tree = injectWidgetTree()
 const selection = injectGraphSelection(true)
 
-const isHovered = ref(false)
+const isHovered = computed(() => selection?.hoveredPort === props.input.portId)
 
 const hasConnection = computed(
   () => graph.db.connections.reverseLookup(portId.value as ExprId).size > 0,
@@ -48,14 +47,6 @@ const connected = computed(() => hasConnection.value || isCurrentEdgeHoverTarget
 const rootNode = shallowRef<HTMLElement>()
 const nodeSize = useResizeObserver(rootNode, false)
 
-watchEffect((onCleanup) => {
-  if (selection != null && isHovered.value === true) {
-    const id = portId.value
-    selection.addHoveredPort(id)
-    onCleanup(() => selection.removeHoveredPort(id))
-  }
-})
-
 // Compute the scene-space bounding rectangle of the expression's widget. Those bounds are later
 // used for edge positioning. Querying and updating those bounds is relatively expensive, so we only
 // do it when the node has any potential for being used as an edge source or target. This is true
@@ -155,8 +146,6 @@ export const widgetDefinition = defineWidget(WidgetInput.isAstOrPlaceholder, {
     }"
     :data-id="portId"
     :data-h="randSlice"
-    @pointerenter="isHovered = true"
-    @pointerleave="isHovered = false"
   >
     <NodeWidget :input="innerWidget" />
   </div>
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
index 08f8dc0a355..c545f143f53 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
@@ -85,7 +85,7 @@ export const widgetDefinition = defineWidget(WidgetInput.isAstOrPlaceholder, {
 </script>
 
 <template>
-  <div class="WidgetSelection" @pointerdown="toggleDropdownWidget">
+  <div class="WidgetSelection" @pointerdown.stop="toggleDropdownWidget">
     <NodeWidget :input="innerWidgetInput" />
     <DropdownWidget
       v-if="showDropdownWidget"
diff --git a/app/gui2/src/composables/selection.ts b/app/gui2/src/composables/selection.ts
index 91fbcbe1057..61b82ad30bb 100644
--- a/app/gui2/src/composables/selection.ts
+++ b/app/gui2/src/composables/selection.ts
@@ -1,7 +1,7 @@
 /** @file A Vue composable for keeping track of selected DOM elements. */
 
 import { selectionMouseBindings } from '@/bindings'
-import { usePointer } from '@/composables/events'
+import { useEvent, usePointer } from '@/composables/events'
 import type { NavigatorComposable } from '@/composables/navigator'
 import type { PortId } from '@/providers/portInfo.ts'
 import type { Rect } from '@/util/data/rect'
@@ -23,8 +23,19 @@ export function useSelection<T>(
   const initiallySelected = new Set<T>()
   const selected = reactive(new Set<T>())
   const hoveredNode = ref<ExprId>()
-  const hoveredPorts = reactive(new Set<PortId>())
-  const hoveredPort = computed(() => [...hoveredPorts].pop())
+  const hoveredPort = ref<PortId>()
+
+  useEvent(document, 'pointerover', (event) => {
+    if (event.target instanceof Element) {
+      const widgetPort = event.target.closest('.WidgetPort')
+      hoveredPort.value =
+        widgetPort instanceof HTMLElement &&
+        'port' in widgetPort.dataset &&
+        typeof widgetPort.dataset.port === 'string'
+          ? (widgetPort.dataset.port as PortId)
+          : undefined
+    }
+  })
 
   function readInitiallySelected() {
     initiallySelected.clear()
@@ -137,8 +148,6 @@ export function useSelection<T>(
     hoveredPort,
     mouseHandler: selectionEventHandler,
     events: pointer.events,
-    addHoveredPort: (port: PortId) => hoveredPorts.add(port),
-    removeHoveredPort: (port: PortId) => hoveredPorts.delete(port),
   })
 }