Skip to content

Search and filter nodes (by name, epic, tag, role)(节点搜索 / 过滤) #7

@Kaka-cheaper

Description

@Kaka-cheaper

Goal

Add a search box that filters nodes on the canvas: type "login" → only login-related nodes stay visible, others fade out.

Why

40+ feature projects (like the Polisim test case) need fast lookup. Scrolling the canvas to find a feature is slow.

Scope (what is in)

  • Search box in TopBar (or a / keyboard shortcut to focus)
  • Live filter as user types: matches name, summary, tags, epicId
  • Non-matching nodes fade to 18% opacity (reuse the existing hover-dim mechanism)
  • Edges where neither endpoint matches also fade
  • Empty query → reset
  • Esc clears the search
  • Result count shown next to the box (e.g. "3 matches")

Out of scope

  • Regex search (just substring match)
  • Search within step.note (do in follow-up)
  • Persistent filters across page reload

Files likely involved

  • viewer/src/app/TopBar.tsx (search input)
  • viewer/src/graph/GraphCanvas.tsx (apply dim based on search match)
  • viewer/src/lib/i18n.ts (placeholder text)

Acceptance criteria

  • Typing in the search box dims non-matching nodes within 100ms
  • Esc / clear button restores all nodes
  • Works in all three views (overview, features, steps)
  • Match count visible

Estimated effort

~4-5 hours / ~3 files

Hints

Look at how hoverId and focusId already produce a dimmed set in GraphCanvas. Plug a "search match set" into the same mechanism.

Want to take this?

Comment "I'd like to take this" and I'll confirm within 24h.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is neededviewerViewer (frontend canvas, interaction, layout)

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions