fixed hover flow nodes

frontend/src/lib/components/flows/map/FlowConstantsItem.svelte

@@ -8,7 +8,10 @@
 
 	$: settingsClass = classNames(
 		'border w-full rounded-sm p-2 bg-surface  text-sm cursor-pointer flex items-center',
-		$selectedId == 'constants' ? 'border border-1  border-slate-800 dark:bg-white/5 dark:border-slate-400/60 dark:border-gray-400' : ''
+		$selectedId == 'constants'
+			? 'border border-1  border-slate-800 dark:bg-white/5 dark:border-slate-400/60 dark:border-gray-400'
+			: '',
+		'hover:!bg-surface-secondary active:!bg-surface'
 	)
 </script>
 

frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte

@@ -53,6 +53,7 @@
 	export let path: string = ''
 	export let modType: string | undefined = undefined
 	export let bgColor: string = ''
+	export let bgHoverColor: string = ''
 	export let concurrency: boolean = false
 	export let retries: number | undefined = undefined
 	export let warningMessage: string | undefined = undefined
@@ -195,13 +196,14 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={classNames(
-		'w-full module flex rounded-sm cursor-pointer max-w-full',
-		selected ? 'outline outline-offset-0  outline-2  outline-slate-500 dark:outline-gray-400' : '',
+		'w-full module flex rounded-sm cursor-pointer max-w-full outline-offset-0 outline-slate-500 dark:outline-gray-400',
+		selected ? 'outline outline-2' : 'active:outline active:outline-2',
 		'flex relative',
-		$copilotCurrentStepStore === id ? 'z-[901]' : '',
-		'hover:!bg-surface-secondary active:!bg-surface'
+		$copilotCurrentStepStore === id ? 'z-[901]' : ''
 	)}
-	style="width: 275px; height: 38px; background-color: {bgColor};"
+	style="width: 275px; height: 38px; background-color: {hover && bgHoverColor
+		? bgHoverColor
+		: bgColor};"
 	on:mouseenter={() => (hover = true)}
 	on:mouseleave={() => (hover = false)}
 	on:pointerdown|preventDefault|stopPropagation={() => dispatch('pointerdown')}

frontend/src/lib/components/flows/map/FlowSettingsItem.svelte

@@ -11,7 +11,8 @@
 		'border w-full rounded-sm p-2 bg-surface text-sm cursor-pointer flex items-center h-[32px]',
 		$selectedId?.startsWith('settings')
 			? 'border border-1  border-slate-800 dark:bg-white/5 dark:border-slate-400/60 dark:border-gray-400'
-			: ''
+			: '',
+		'hover:!bg-surface-secondary active:!bg-surface'
 	)
 </script>
 

frontend/src/lib/components/flows/map/MapItem.svelte

@@ -19,6 +19,7 @@
 	export let insertable: boolean
 	export let annotation: string | undefined = undefined
 	export let bgColor: string = ''
+	export let bgHoverColor: string = ''
 	export let moving: string | undefined = undefined
 	export let duration_ms: number | undefined = undefined
 
@@ -129,6 +130,7 @@
 					}}
 					{...itemProps}
 					{bgColor}
+					{bgHoverColor}
 					warningMessage={mod?.value?.type === 'forloopflow' &&
 					mod?.value?.iterator?.type === 'javascript' &&
 					mod?.value?.iterator?.expr === ''
@@ -153,6 +155,7 @@
 					id={mod.id}
 					label={mod.summary || 'Run one branch'}
 					{bgColor}
+					{bgHoverColor}
 				>
 					<div slot="icon">
 						<GitBranch size={16} />
@@ -170,6 +173,7 @@
 					{...itemProps}
 					label={mod.summary || `Run all branches${mod.value.parallel ? ' (parallel)' : ''}`}
 					{bgColor}
+					{bgHoverColor}
 				>
 					<div slot="icon">
 						<GitBranch size={16} />
@@ -192,6 +196,7 @@
 					{...itemProps}
 					modType={mod.value.type}
 					{bgColor}
+					{bgHoverColor}
 					label={mod.summary ||
 						(mod.id === 'preprocessor'
 							? 'Preprocessor'

frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte

@@ -28,9 +28,10 @@
 <div
 	class={classNames(
 		'w-full flex relative rounded-sm',
-		selectable ? 'cursor-pointer hover:!bg-surface-secondary active:!bg-surface' : '',
-		selected ? 'outline outline-offset-1 outline-2  outline-gray-600 dark:outline-gray-400' : '',
-		onTop ? 'z-[901]' : ''
+		selectable ? 'cursor-pointer' : '',
+		selected ? 'outline outline-2' : 'active:outline active:outline-2',
+		onTop ? 'z-[901]' : '',
+		'outline-offset-1 outline-gray-600 dark:outline-gray-400'
 	)}
 	style="width: 275px; max-height: 38px; background-color: {bgColor};"
 	on:pointerdown={() => {

frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte

@@ -5,7 +5,7 @@
 	import NodeWrapper from './NodeWrapper.svelte'
 	import type { GraphEventHandlers } from '../../graphBuilder'
 	import type { GraphModuleState } from '../../model'
-	import { getStateColor } from '../../util'
+	import { getStateColor, getStateHoverColor } from '../../util'
 
 	export let data: {
 		offset: number
@@ -41,7 +41,7 @@
 				selected: state?.selectedForloopIndex ?? 0,
 				selectedManually: state?.selectedForLoopSetManually,
 				flowJobsSuccess: state?.flow_jobs_success
-		  }
+			}
 		: (undefined as any)
 </script>
 
@@ -66,13 +66,14 @@
 		annotation={flowJobs &&
 		(data.module.value.type === 'forloopflow' || data.module.value.type === 'whileloopflow')
 			? 'Iteration: ' +
-			  ((state?.selectedForloopIndex ?? 0) >= 0
+				((state?.selectedForloopIndex ?? 0) >= 0
 					? (state?.selectedForloopIndex ?? 0) + 1
 					: state?.flow_jobs?.length) +
-			  '/' +
-			  (state?.iteration_total ?? '?')
+				'/' +
+				(state?.iteration_total ?? '?')
 			: ''}
 		bgColor={getStateColor(type, darkMode, true, state?.skipped)}
+		bgHoverColor={getStateHoverColor(type, darkMode, true, state?.skipped)}
 		moving={data.moving}
 		duration_ms={state?.duration_ms}
 		retries={data.retries}

frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte

@@ -21,7 +21,7 @@
 
 <div style={`width: ${NODE.width}px;`}>
 	<button
-		style="background-color: {bgColor} !important;"
+		style="background-color: {bgColor};"
 		class="flex w-full flex-row gap-1 px-2 p-1 items-center {selected
 			? 'outline  outline-2  outline-gray-600 rounded-sm dark:bg-white/5 dark:outline-gray-400'
 			: ''}"

frontend/src/lib/components/graph/util.ts

@@ -38,3 +38,26 @@ export function getStateColor(
 			}
 	}
 }
+
+export function getStateHoverColor(
+	state: FlowStatusModule['type'] | undefined,
+	isDark: boolean,
+	nonVirtualItem?: boolean,
+	isSkipped?: boolean
+): string {
+	switch (state) {
+		case 'Success':
+		case 'Failure':
+		case 'InProgress':
+		case 'WaitingForEvents':
+		case 'WaitingForExecutor':
+			return getStateColor(state, isDark, nonVirtualItem, isSkipped)
+
+		default:
+			if (nonVirtualItem) {
+				return isDark ? '#343B46' : '#f6f6f6'
+			} else {
+				return isDark ? '#343B46' : '#f6f6f6'
+			}
+	}
+}