Summary
Two small, convention-free enhancements to the reference viewer (visualize) that make any OKF bundle easier to navigate. No new frontmatter, no spec change, and no generator.py change — pure viewer UX, demonstrable on the shipped ga4 bundle. Independent of the edge-detection work in flight (#48 / #66 / #110) and complementary to #122.
Motivation
The current graph draws every concept and every link, but offers no way to (a) isolate one concept's neighborhood, or (b) see where a concept sits in the directory hierarchy. On larger bundles (e.g. stackoverflow) the graph is hard to read, and the detail panel gives no sense of "what else is in this group."
What it adds
- Click-to-focus — clicking a concept fades the rest of the graph by hop distance from that node (0–1 hops bright, 2 hops medium, 3+/unreachable faint), so "what connects to this" is obvious at a glance without losing the surrounding context. Clicking empty canvas or Reset view restores. Built on the existing
.dim class and Cytoscape's BFS.
- Hierarchy orientation in the detail panel — a breadcrumb derived from the concept-id path (e.g.
references / metrics / event_count), plus an
"In this group" list of sibling concepts in the same directory. Both clickable. Uses data already in the graph; nothing new to author.
Scope / conformance
- No frontmatter, no spec impact, no producer-side changes.
- Existing bundles render identically until a node is clicked.
- Changes limited to
viewer/static/viz.js, viewer/templates/viz.html, viewer/static/viz.css (~+122 lines). generator.py and the graph-data
format are untouched, so the existing pytest viewer suite passes unchanged and viz.js passes node --check.
Notes
Branch is ready; happy to open a PR. Can split click-to-focus and the breadcrumb into separate PRs if preferred. CLA signed.
Summary
Two small, convention-free enhancements to the reference viewer (
visualize) that make any OKF bundle easier to navigate. No new frontmatter, no spec change, and nogenerator.pychange — pure viewer UX, demonstrable on the shippedga4bundle. Independent of the edge-detection work in flight (#48 / #66 / #110) and complementary to #122.Motivation
The current graph draws every concept and every link, but offers no way to (a) isolate one concept's neighborhood, or (b) see where a concept sits in the directory hierarchy. On larger bundles (e.g.
stackoverflow) the graph is hard to read, and the detail panel gives no sense of "what else is in this group."What it adds
.dimclass and Cytoscape's BFS.references / metrics / event_count), plus an"In this group" list of sibling concepts in the same directory. Both clickable. Uses data already in the graph; nothing new to author.
Scope / conformance
viewer/static/viz.js,viewer/templates/viz.html,viewer/static/viz.css(~+122 lines).generator.pyand the graph-dataformat are untouched, so the existing
pytestviewer suite passes unchanged andviz.jspassesnode --check.Notes
Branch is ready; happy to open a PR. Can split click-to-focus and the breadcrumb into separate PRs if preferred. CLA signed.