Show error state on Vue nodes that caused execution errors (#5541)

* add missing node error border

* update vue node data after configure

* provide locatorId of execution error node to vue nodes

* [refactor] use execution store directly instead of provide/inject pattern

- Add lastExecutionErrorNodeId computed property to execution store
- Replace inject() with useExecutionStore() in LGraphNode component
- Remove useExecutionErrorProvider composable and provider call
- Clean up unused ExecutionErrorNodeIdKey injection key
- Add explicit return type annotation to hasAnyError computed

Addresses @DrJKL's architecture feedback and type safety suggestions.

* simplify error styling to match main branch conventions

Remove redundant dark-theme prefixes from border-error and outline-error
classes since these CSS custom properties handle both themes automatically.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* address review feedback on hasAnyError computed function

- Add explicit boolean return type
- Destructure props with defaults for cleaner code
- Use \!\! for proper boolean conversion to satisfy TypeScript

Addresses @DrJKL review comment on error state computation.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* destructure props at top level as suggested in review

Replace `props.nodeData` and `props.error` references with destructured
variables for cleaner code and proper defaults.

Addresses @DrJKL review comment about props destructuring.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix rebase issues: correct node ID comparison and border colors

- Use lastExecutionErrorNodeId instead of lastExecutionErrorNodeLocatorId
  for proper comparison with nodeData.id (both are local node IDs)
- Restore border-blue-100 colors that were incorrectly changed during rebase
- These were unrelated changes that snuck in during conflict resolution

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* remove unused lastExecutionErrorNodeLocatorId from exports

The computed property is defined but not used by any external modules.
Only lastExecutionErrorNodeId is actually consumed by components.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Christian Byrne
2025-09-14 19:27:15 -07:00
committed by GitHub
parent fe09f88ea3
commit 07fbe7267e
4 changed files with 72 additions and 33 deletions

View File

@@ -36,7 +36,7 @@
</template>
<script setup lang="ts">
import { computed, onErrorCaptured, ref } from 'vue'
import { computed, onErrorCaptured, ref, watch } from 'vue'
import EditableText from '@/components/common/EditableText.vue'
import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
@@ -74,18 +74,26 @@ const isEditing = ref(false)
const nodeInfo = computed(() => props.nodeData || props.node)
const EMPTY_STRING = ''
const DEFAULT_TITLE = 'Untitled'
const resolveTitle = (info: LGraphNode | VueNodeData | undefined) => {
const title = (info?.title ?? EMPTY_STRING).trim()
const title = (info?.title ?? '').trim()
if (title.length > 0) return title
const type = (info?.type ?? EMPTY_STRING).trim()
return type.length > 0 ? type : DEFAULT_TITLE
const type = (info?.type ?? '').trim()
return type.length > 0 ? type : 'Untitled'
}
// Computed title that provides reactive updates
const displayTitle = computed(() => resolveTitle(nodeInfo.value))
// Local state for title to provide immediate feedback
const displayTitle = ref(resolveTitle(nodeInfo.value))
// Watch for external changes to the node title or type
watch(
() => [nodeInfo.value?.title, nodeInfo.value?.type] as const,
() => {
const next = resolveTitle(nodeInfo.value)
if (next !== displayTitle.value) {
displayTitle.value = next
}
}
)
// Event handlers
const handleCollapse = () => {