Yfiles Interactivity

User Interactivity

Add interactive features like tooltips, context menus, search, and navigation to yFiles applications.

Quick Start

// Tooltips
inputMode.addEventListener('query-item-tool-tip', (evt) => {
  evt.toolTip = createTooltipContent(evt.item)
  evt.handled = true
})

// Context menu
inputMode.addEventListener('populate-item-context-menu', (evt) => {
  evt.contextMenu = [
    { label: 'Delete', action: () => inputMode.deleteSelection() }
  ]
})

// Overview
const overview = new GraphOverviewComponent('overviewDiv', graphComponent)

// Search with highlighting
graphComponent.highlights.clear()
graph.nodes.forEach(node => {
  if (matches(node, searchText)) {
    graphComponent.highlights.add(node)
  }
})

Before Implementing

Always query yFiles MCP for current API:

yfiles:yfiles_get_symbol_details(name="GraphEditorInputMode")
yfiles:yfiles_list_members(name="GraphEditorInputMode", includeInherited=true)
yfiles:yfiles_get_symbol_details(name="GraphOverviewComponent")
yfiles:yfiles_search_documentation(query="tooltips context menu")

Core Concepts

• Tooltips: query-item-tool-tip event, ToolTipInputMode configuration
• Context Menus: populate-item-context-menu event, contextMenu array
• Click Events: item-clicked, item-double-clicked, item-right-clicked
• Graph Search: Highlights manager, custom matching logic
• Overview: GraphOverviewComponent for navigation
• Selection Events: selection.item-added, selection.item-removed, current-item-changed

Note: Always use addEventListener (yFiles 3.0) instead of addListener (yFiles 2.6). The @yfiles/eslint-plugin rule @yfiles/replace-legacy-event-listeners enforces this and auto-fixes legacy patterns.

When to Implement

• Tooltips: Show additional information on hover
• Context Menus: Provide contextual actions via right-click
• Click Events: React to user clicks on graph items
• Graph Search: Enable finding and highlighting nodes/edges
• Overview: Navigate large graphs with minimap
• Selection Events: React to selection changes for details panels

Code Examples

See examples.md for:

• Tooltip setup with HTML content
• Context menu with conditional items
• Graph search with highlighting
• Overview component integration
• Click event handlers
• Selection change listeners

Reference

See reference.md for:

• Event parameters and signatures
• ToolTipInputMode configuration options
• Context menu item format
• GraphOverviewComponent API
• Highlight manager usage
• Selection API

Related Skills

• /yfiles-init - Initial setup
• /yfiles-graphbuilder - Build graphs from data
• /yfiles-nodestyle-basic - Custom visuals for highlighting

MCP Tools

• yfiles:yfiles_get_symbol_details(name="GraphEditorInputMode") - Input mode API
• yfiles:yfiles_get_symbol_details(name="GraphOverviewComponent") - Overview component
• yfiles:yfiles_search_documentation(query="tooltips") - Documentation
• yfiles:yfiles_search_by_description(query="search highlight") - Find related APIs