Skip to content

fix(export): colour and filter graph.html edges by relation - #2237

Open
SyedFahad7 wants to merge 2 commits into
Graphify-Labs:v8from
SyedFahad7:fix/2088-graph-html-edge-styles
Open

fix(export): colour and filter graph.html edges by relation#2237
SyedFahad7 wants to merge 2 commits into
Graphify-Labs:v8from
SyedFahad7:fix/2088-graph-html-edge-styles

Conversation

@SyedFahad7

Copy link
Copy Markdown
Contributor

Summary

Fixes #2088.

graph.html drew every edge the same, so you had to hover to tell calls from contains / imports. Adds a Connection Types panel next to the community legend: colour swatch, count, checkbox per relation. Colouring is off by default (localStorage + GRAPHIFY_EDGE_TYPES / edge_types= to start on). Untick everything but calls and you get the call graph.

Also scopes toggleAllCommunities to #legend so a second panel cannot get its checkboxes rewritten. Skipped on the aggregated >node-limit view.

Test plan

  • Open a normal graph.html — Connection Types panel present, edges look like before until you enable colouring
  • Enable colouring; untick contains / imports — call graph readable
  • Reload — colouring preference sticks via localStorage
  • Aggregated community view — no Connection Types panel
  • uv run pytest tests/test_export.py -q -k to_html

Every edge was drawn the same, so calls drowned in contains/imports.
Add a Connection Types sidebar (off-by-default colouring, per-relation
checkboxes, localStorage + GRAPHIFY_EDGE_TYPES / edge_types=). Also scope
toggleAllCommunities to #legend so a second panel cannot steal its state.

Fixes Graphify-Labs#2088
Copilot AI review requested due to automatic review settings July 27, 2026 12:21

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the HTML exporter (graph.html) to make edge relations visually distinguishable and filterable, addressing #2088 by adding a “Connection Types” sidebar panel and per-relation coloring (opt-in by default).

Changes:

  • Add a Connection Types panel to color edges by relation and toggle relation visibility; initial coloring state is controlled via localStorage and GRAPHIFY_EDGE_TYPES / to_html(edge_types=...).
  • Scope toggleAllCommunities DOM queries to #legend to prevent unintended checkbox manipulation in other panels.
  • Sanitize edge relation labels on export and propagate them into the embedded JSON for safe client-side use.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 483 to +487
community_labels: dict[int, str] | None = None,
member_counts: dict[int, int] | None = None,
node_limit: int | None = None,
learning_overlay: dict | None = None,
edge_types: bool | None = None,

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fair — pushed a small follow-up covering panel present/absent + edge_types / GRAPHIFY_EDGE_TYPES defaults.

Assert the panel ships on normal graphs, stays off for aggregated views,
and that edge_types= / GRAPHIFY_EDGE_TYPES set EDGE_TYPES_COLOR_DEFAULT.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

graph.html: no way to tell calls from imports/contains at a glance

2 participants