From c22f07c84daab1fa4144189baf9c2df6fb818359 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Fri, 12 Jan 2024 14:18:10 +0100
Subject: [PATCH 1/2] Fixes

---
 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        | 12 +-----------
 .../GraphEditor/widgets/WidgetSelection.vue   |  2 +-
 app/gui2/src/composables/selection.ts         | 19 ++++++++++++++-----
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/app/gui2/mock/providers.ts b/app/gui2/mock/providers.ts
index 06160350874b..51c5c4e2a8fc 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 06cd20c2415c..596a73cd1051 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 dadf73d8b70d..114dcd6b533c 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 38a15200bd99..08f8e21cfaad 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 b14da1171270..72bded4e0820 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue
@@ -35,7 +35,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 +48,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 +147,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 08f8dc0a3554..c545f143f531 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 91fbcbe10571..61b82ad30bb4 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),
   })
 }
 

From 2eaaf0093023475cd08d80695949a64c435693b7 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Fri, 12 Jan 2024 14:26:05 +0100
Subject: [PATCH 2/2] Fix lint

---
 app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue | 1 -
 app/gui2/src/stores/suggestionDatabase/index.ts            | 1 -
 app/gui2/ydoc-server/edits.ts                              | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue
index 72bded4e0820..4c1dcc8eaefa 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,
diff --git a/app/gui2/src/stores/suggestionDatabase/index.ts b/app/gui2/src/stores/suggestionDatabase/index.ts
index 195acac383d4..c5f6b7780c4b 100644
--- a/app/gui2/src/stores/suggestionDatabase/index.ts
+++ b/app/gui2/src/stores/suggestionDatabase/index.ts
@@ -1,7 +1,6 @@
 import { useProjectStore } from '@/stores/project'
 import { entryQn, type SuggestionEntry, type SuggestionId } from '@/stores/suggestionDatabase/entry'
 import { applyUpdates, entryFromLs } from '@/stores/suggestionDatabase/lsUpdate'
-import { type Opt } from '@/util/data/opt'
 import { ReactiveDb, ReactiveIndex } from '@/util/database/reactiveDb'
 import { AsyncQueue, rpcWithRetries } from '@/util/net'
 import { qnJoin, qnParent, tryQualifiedName, type QualifiedName } from '@/util/qualifiedName'
diff --git a/app/gui2/ydoc-server/edits.ts b/app/gui2/ydoc-server/edits.ts
index 4511ecc5682c..0c0041eda180 100644
--- a/app/gui2/ydoc-server/edits.ts
+++ b/app/gui2/ydoc-server/edits.ts
@@ -7,7 +7,7 @@ import diff from 'fast-diff'
 import * as json from 'lib0/json'
 import * as Y from 'yjs'
 import { TextEdit } from '../shared/languageServerTypes'
-import { IdMap, ModuleDoc, type NodeMetadata, type VisualizationMetadata } from '../shared/yjsModel'
+import { ModuleDoc, type NodeMetadata, type VisualizationMetadata } from '../shared/yjsModel'
 import * as fileFormat from './fileFormat'
 import { serializeIdMap } from './serialization'