What is the recommended way to attach events?

Use addEventListener (yFiles 3.0) rather than addListener (yFiles 2.6).

How do I implement tooltips?

Handle the 'query-item-tool-tip' event on the GraphEditorInputMode, set evt.toolTip, and mark evt.handled = true.

How do I create an overview/minimap?

Instantiate GraphOverviewComponent and connect it to your GraphComponent for navigation.

Yfiles Interactivity

Scanned

npx machina-cli add skill yWorks/yfiles-for-html-claude-plugin/yfiles-interactivity --openclaw

Files (1)

SKILL.md

2.9 KB

User Interactivity

Add interactive features — tooltips, context menus, click handlers, graph search, and overview navigation — to yFiles applications.

Before Implementing

Always query the 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")

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)
  }
})

Core Concepts

Tooltips: query-item-tool-tip event on inputMode, set evt.toolTip and evt.handled = true
Context menus: populate-item-context-menu event, assign evt.contextMenu array of { label, action } items
Click events: item-clicked, item-double-clicked, item-right-clicked on inputMode
Graph search: Highlights manager + custom matching logic; use graphComponent.highlights
Overview: GraphOverviewComponent for minimap 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.

Additional Resources

references/examples.md — Tooltip with HTML content, conditional context menu items, search with highlighting, overview integration, click handlers, selection listeners
references/reference.md — Event signatures, ToolTipInputMode options, context menu item format, GraphOverviewComponent API, highlight manager, selection API

Related Skills

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

Source

git clone https://github.com/yWorks/yfiles-for-html-claude-plugin/blob/main/skills/yfiles-interactivity/SKILL.mdView on GitHub

Overview

This skill adds interactive features to yFiles apps, including tooltips, context menus, click handlers, graph search, and overview navigation. It helps users understand graph data, perform actions quickly, and navigate large graphs. Following API-aware practices ensures consistent, future-proof interactions.

How This Skill Works

Tooltips are supplied by listening to query-item-tool-tip on the GraphEditorInputMode and setting evt.toolTip with evt.handled = true. Context menus come from populate-item-context-menu, returning an array of { label, action } items. For search and overview, use the highlights manager on graphComponent and GraphOverviewComponent for minimap navigation; always use addEventListener (yFiles 3.0).

When to Use It

Add tooltips to graph items.
Show a custom context menu on items.
Implement graph search with highlighting.
Integrate a GraphOverviewComponent for navigation.
Handle item clicks and selection changes (click, double-click, right-click; item-added/removed; current-item-changed).

Quick Start

Step 1: Add tooltips by listening to query-item-tool-tip on the inputMode and set evt.toolTip and evt.handled.
Step 2: Add a context menu by handling populate-item-context-menu and return an array of { label, action } items.
Step 3: Create a GraphOverviewComponent for minimap navigation and implement search by highlighting nodes with graphComponent.highlights.

Best Practices

Query the yFiles MCP for the current API (e.g., yfiles_get_symbol_details, yfiles_list_members).
Use addEventListener (yFiles 3.0) instead of legacy addListener (2.6).
Return a context menu as an array of { label, action } items.
Use graphComponent.highlights to drive search results and highlighting.
Keep tooltips lightweight and set evt.handled = true to avoid duplicate handling.

Example Use Cases

Tooltips: handle query-item-tool-tip on inputMode to supply content.
Context menu: populate-item-context-menu to expose actions like Delete.
Overview: create GraphOverviewComponent and wire it to a GraphComponent.
Search: clear highlights then highlight matches via graphComponent.highlights.
Selection events: listen to selection.item-added, selection.item-removed, current-item-changed.

Frequently Asked Questions

Add this skill to your agents