Skip to content

feat: add --3d flag for 3D HTML visualization#225

Open
pedrolbacelar wants to merge 55 commits into
Graphify-Labs:v4from
pedrolbacelar:feat/3d-html-visualization
Open

feat: add --3d flag for 3D HTML visualization#225
pedrolbacelar wants to merge 55 commits into
Graphify-Labs:v4from
pedrolbacelar:feat/3d-html-visualization

Conversation

@pedrolbacelar

Copy link
Copy Markdown

Summary

Adds a to_html_3d() function to graphify/export.py that generates an interactive 3D WebGL visualization using 3d-force-graph (MIT license, loaded via CDN). This is an alternative to the existing 2D vis.js output — the 2D to_html() is untouched.

  • Zero new dependencies — 3d-force-graph is loaded from unpkg CDN
  • Same interfaceto_html_3d(G, communities, output_path, community_labels) mirrors to_html()
  • Single self-contained HTML file — no server, no build step

Follows up on the discussion in #219.

Features

  • 3D force-directed layout with orbit camera controls (left-click or middle-click to rotate, scroll to zoom)
  • Nodes colored by community, sized by degree
  • Edge colors differentiated by direction when a node is selected (red = outgoing, blue = incoming)
  • Directional particles with matching colors on active edges
  • Distance-based HTML overlay labels — max 25 visible at once, weighted by degree (high-degree hubs visible from further away)
  • Click a node to highlight it + neighbors, dim everything else. ESC to deselect
  • Collapsible sidebar with search, node info panel, and community checkboxes (Select All / Deselect All)
  • Settings panel (gear icon, bottom-left) with toggles for: hover highlight, show/hide edges, show/hide labels
  • Help hints bar at the bottom with controls reference

How to use

from graphify.export import to_html_3d

to_html_3d(G, communities, "graph_3d.html", community_labels=labels)

Changes

  • graphify/export.py — 625 lines added (new function + CSS/JS helpers), 0 lines modified in existing code

Test plan

  • All 13 existing test_export.py tests pass
  • Tested with a 484-node / 964-edge graph — renders correctly, all interactions work
  • Test with larger graphs (~5000 nodes)
  • Cross-browser check (Chrome, Firefox, Safari)

Minidoracat and others added 30 commits April 8, 2026 19:39
* fix: git hooks fail when graphify is installed via pipx

When installed via pipx, the graphify module is only available in
pipx's isolated venv, not the system python3. The git hooks
(post-commit, post-checkout) hardcoded `python3` which cannot import
graphify in this case.

Detect the correct Python interpreter from the graphify binary's
shebang line, matching the approach already used in skill.md Step 1.
Falls back to python3 for system installs.

* fix: handle env-style shebangs and improve interpreter detection

- Use POSIX `command -v` instead of non-standard `which`
- Parse `#!/usr/bin/env python3` shebangs correctly (previous
  `tr -d ' '` would produce `/usr/bin/envpython3`)
- Add import validation fallback to python3 if resolved interpreter
  cannot import graphify
… buffer

* fix: suppress graspologic ANSI output that breaks PowerShell scrolling

graspologic's leiden() emits ANSI escape sequences (progress bars,
colored warnings) that corrupt PowerShell 5.1's scroll buffer on
Windows, disabling vertical scrolling. Redirect stdout/stderr to
StringIO during leiden() calls to prevent any escape codes from
reaching the terminal.

Add 2 tests verifying cluster() produces no stdout/stderr output.

Fixes Graphify-Labs#19

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: add PowerShell troubleshooting section to Windows skill

Document the PowerShell 5.1 scrolling issue and provide 4
workarounds: upgrade graphify, use Windows Terminal, reset
terminal, or uninstall graspologic to use Louvain fallback.

Fixes Graphify-Labs#19

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
- Register 'trae' and 'trae-cn' in _PLATFORM_CONFIG (skill-trae.md,
  ~/.trae/skills/ and ~/.trae-cn/skills/, claude_md=False)
- Add CLI subcommands: graphify trae install/uninstall,
  graphify trae-cn install/uninstall (routes to _agents_install/uninstall)
- Update help text with new platform entries
- Create skill-trae.md (Agent-tool based extraction, AGENTS.md integration,
  no PreToolUse hook support per Trae limitations)
- Update README.md and README.zh-CN.md with Trae platform docs

Co-authored-by: lijinshuan <lijinshuan@bytedance.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…utput

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…y-Labs#109: extension drift, click detection, skill coverage, .graphify_python persistence

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ify-Labs#126)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…e relations in innerHTML (#sec)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…y-Labs#127)

Tree-sitter resolves call targets directly from source — marking them
INFERRED was incorrect. Cross-file class-level uses edges remain INFERRED.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…AST calls

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…Windows git hooks (Graphify-Labs#140)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…hify-Labs#105)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
safishamsi and others added 25 commits April 9, 2026 17:44
…he, graphifyignore parent discovery, MCP fixes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…cription

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…port

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…nstall

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…attribute

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…r prompt itself

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ort.py, bound collision loop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…aceholder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 Graphify-Labs#195: skill.md requires general-purpose subagent type for extraction dispatch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add to_html_3d() function that generates an interactive 3D WebGL
visualization as an alternative to the existing 2D vis.js output.

Uses 3d-force-graph (MIT, CDN-loaded) for rendering. No new Python
dependencies, no build step — produces a single self-contained HTML
file like the existing to_html().

Features:
- 3D force-directed layout with orbit camera controls
- Nodes colored by community, sized by degree
- Edge colors differentiated by direction (red=outgoing, blue=incoming)
- Directional particles with matching colors on active edges
- Distance-based HTML overlay labels (max 25 visible, degree-weighted)
- Click to select node: highlights neighbors, dims rest, shows info
- ESC to deselect, middle mouse to orbit (same as left-click drag)
- Collapsible sidebar: search, node info, community checkboxes
- Settings panel (bottom-left gear): hover highlight, show/hide edges,
  show/hide labels toggles
- Help hints bar with keyboard/mouse controls

Ref: Graphify-Labs#219
DDBCDVD added a commit to DDBCDVD/graphify that referenced this pull request Jul 24, 2026
Adds a WebGL counterpart to `graphify tree`. Where the flat graph.html
(vis-network) lays the graph out undirected with no arrowheads, graph3d
renders it as a rotatable 3D force graph and draws edge direction
(source -> target) as arrows, so calls/imports/inherits read directionally.

- new graphify/graph3d_html.py: build_graph3d_data + write_graph3d_html;
  3d-force-graph (MIT) loaded from CDN like tree_html loads D3; data embedded
  inline (opens over file://); node labels HTML-escaped at render time
- new `graph3d` subcommand in cli.py mirroring `tree` (--graph/--output/--label)
- shares COMMUNITY_COLORS and the graph-size cap with the existing exporters
- tests/test_graph3d_html.py: data shaping, XSS escaping, CLI end-to-end

A minimal, focused alternative to the stalled Graphify-Labs#225 (which spread the feature
across 42 files against the older v4 branch).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.

7 participants