mirror of
https://github.com/elicpeter/nyx.git
synced 2026-06-21 20:18:06 +02:00
Release/0.5.0 (#35)
* feat: Introduce function-scoped variable interning for state analysis with new tests and fixtures * feat: Add Phase 26 symbolic execution enhancements with bitwise operator support, abstract interpretation refinements, and new taint analysis tests * feat: Refine state analysis to handle factory-pattern resource returns with mixed-path tests and leak detection enhancements * feat: Add Phase 27 debug views with symbolic execution, abstract interpretation, SSA, and call graph viewers; integrate with debug layout and styles * feat: Add Phase 31 type-qualified symbolic resolution with receiver-based callee disambiguation and testing * feat: Extend symbolic execution with state iteration, enhanced debug views, and debounced input handling * feat: Add Phase 13 resource and auth pattern extensions with new tests and fixtures * feat: Introduce CFG debug graph renderer with compact mode, toolbar, and DAG layout integration * feat: Add Phase 28 encoding and decoding transform modeling with structural symex enhancements and new taint analysis tests * feat: Extend abstract interpretation with type facts and constant value tracking in debug views and server logic * feat: Add linear path handling and witness extraction to symbolic execution with Phase 28 transform mismatch detection * feat: Refine Go auth and sanitizer handling with enhanced rules, state updates, and benchmark improvements * feat: Enable auth-state analysis by default and update relevant tests in benchmark config * test: Update state_tests to reflect default enablement of auth-state analysis and add auth suppression test * docs: update CHANGELOG.md * feat: Introduce per-index taint tracking in `HeapState` with `HeapSlot`, overflow handling, and revised SSA transfers * feat: Introduce C/C++ language labels and refine heap state tracking in SSA transfers * feat: Implement per-index array slot tracking in symbolic heap with overflow collapse * feat: Add implicit definition handling for uninitialized declarations in SSA value allocation * feat: Refactor function parameters and constants for improved clarity and maintainability * refactor: Reorder module imports and improve formatting for consistency * refactor: Fix formatting erorrs * refactor: Fix clippy warnings * refactor: Fix fmt warnings (again) * chore: Update dependencies and improve feature configuration * Add comprehensive tests for undertested modules (#36) (COPILOT) * Add comprehensive tests for undertested modules Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/f3fc877e-f386-49ba-9793-fc93d3805083 * Add comprehensive tests for ext, project, walk, and errors modules Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/f3fc877e-f386-49ba-9793-fc93d3805083 --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * chore: Update dependencies and improve feature configuration * fix: formatting errors in new tests * chore: Update license list in about.toml * chore: made functions input inline * chore: updated cfg graph to take up the full page * chore: add Prettier configuration and update code formatting * Add frontend test suite with Vitest (111 tests) (#37) * Add Vitest test suite for frontend - 111 tests across utils, components, hooks, and graph utilities Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/7cf0dba2-ecff-4740-ba4d-92717e74a0b7 * ci: add frontend test step to CI workflow Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/5bc0ac9f-0a32-4d03-9cb7-7a15aea53fca --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * chore: simplify array initialization in test files for consistency * ran typecheck * feat: add AnalysisWorkspace component and integrate it into CfgViewerPage * feat: update routing in AppLayout and improve empty state message in ExplorerPage * feat: enhance scan progress tracking with additional metrics and stages * feat: update license information and add license check script * feat: implement cross-file symbolic execution with callee body persistence * feat: replace dagre graphs with Graphology + ELK + Sigma for more advanced call stack and cfg rendering * feat: ensure CFG function view is scoped to the selected function, preventing bleed into sibling functions * feat: enhance resource tracking with proxy method summaries and improve finding extraction * feat: add terminal function exit detection for accurate resource leak analysis * feat: add warnings for loops and functions without bodies to improve error recovery * feat: update lambda expression handling to ensure proper function classification and control flow * feat: remove bounded formatting/string ops and add JSON.parse sanitizer for improved data handling * feat: add inline return taint analysis and regression tests for improved security checks * feat: add engine version management and migration handling for database schema updates * feat: enhance first_call_ident to skip nested function bodies and add regression tests * feat: enhance callee name resolution with two-segment normalization and disambiguation * feat: add cross-file context flags and debug assertions for taint analysis * feat: refactor taint analysis structure to unify context handling and improve clarity * feat: enhance dead code elimination to preserve Sink, Source, and Sanitizer labels with new tests * docs: updated CHANGELOG.md * fmt: formatting fixes * fix: fixed frontend formatting and lint warnings * fix: optimized ci * fix: optimized ci * Add comprehensive multi-file test coverage to Nyx (#38) * Initial checklist for multi-file test suite expansion Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/e550cb88-9767-4442-94d4-101bf5bb0e23 Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * Add 12 new multi-file test fixtures with TP/TN/near-miss coverage Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/e550cb88-9767-4442-94d4-101bf5bb0e23 Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * deleted root repo * rebuilt to test for regressions --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Co-authored-by: elipeter <elicpeter@gmail.com> * feat: enhance import alias resolution and taint tracking * feat: implement security hardening with CSRF protection and path validation * feat: add support for import alias bindings in Python, PHP, and Rust * feat: enhance CFG analysis modes and improve code readability * feat: add detection for parameterized SQL queries to enhance security * feat: add safe internal redirect handling and enhance session destroy validation * feat: implement security improvements by addressing vulnerabilities in execAsync, session management, and file downloads * feat: enhance taint detection by adding support for inline source member expressions in call arguments * feat: implement pre-emission of Source nodes for inline source member expressions in call arguments * feat: add support for Throw statement in control flow and error handling * feat: add debug and echo endpoints with potential information leakage * feat: implement internal redirect suppression and enhance taint detection * feat: implement module alias tracking for dynamic dispatch in JS/TS * feat: add authorization analysis module with Express support * feat: add authorization analysis module with Express support * feat: add tests for admin guard requirements and clean checks in authorization analysis * feat: integrate Koa and Fastify frameworks into authorization analysis * feat: add Flask and Django support to authorization analysis module * feat: add support for Rails and Sinatra frameworks in authorization analysis * feat: add support for Axum, ActixWeb, and Rocket frameworks in authorization analysis * feat: add support for ActixWeb, Axum, and Rocket frameworks in authorization analysis * feat: add support for Rails and Sinatra in authorization analysis * chore: add .DS_Store to .gitignore * refactor: simplify conditional checks and improve readability in multiple files * refactor: update usage of Option methods for improved clarity and consistency * refactor: improve code readability by simplifying conditional checks and formatting * refactor: improve code formatting and readability by simplifying conditional checks * refactor: simplify conditional checks and improve readability in multiple files * refactor: simplify conditional checks in axum.rs for improved readability * feat: add CodeQL analysis configuration for enhanced security scanning * test: add comprehensive tests for `src/output.rs` SARIF builder (#39) * chore: start test coverage improvement work Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/cd7ff398-134e-4728-a5e7-0353a0744423 Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * test: add comprehensive tests for src/output.rs SARIF builder Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/cd7ff398-134e-4728-a5e7-0353a0744423 Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * refactor: improve code formatting and readability in output.rs --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Co-authored-by: elipeter <elicpeter@gmail.com> * refactor: improve code formatting and readability in output.rs * Potential fix for code scanning alert no. 210: Uncontrolled data used in path expression Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * Potential fix for code scanning alert no. 211: Uncontrolled data used in path expression Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * refactor: enhance triage file path handling with improved error management and validation * refactor: updated func summaries for richer detail * refactor: update SSA summary extraction to use canonical FuncKey for distinct entries * refactor: enhance callee metadata structure to support arity, receiver, and qualifier for better overload resolution * refactor: add support for keyword arguments in function calls and enhance receiver extraction for method-style calls * refactor: implement new Flask routes for safe and unsafe shell command execution * refactor: separate receiver handling in SSA operations and enhance taint propagation * refactor: improve arity handling by using arg_uses for positional argument count and enhance witness scoring for tainted arguments * refactor: implement auth decorator extraction and classification for multiple languages * refactor: enhance Rust module path resolution and use map handling for cross-file disambiguation * refactor: introduce CalleeQuery struct for structured callee resolution and enhance resolver logic * refactor: implement same-file identity collision handling for `runTask` to ensure correct resolver behavior * refactor: standardize default struct initialization across multiple files * feat: add scripts for formatting checks and auto-fixes with test summaries * refactor: simplify character splitting and enhance namespace qualifier handling * refactor: improve documentation clarity and enhance code readability in resolver logic * refactor: replace default struct initialization with explicit field assignments for clarity * feat: enhance anonymous function naming by deriving context-based bindings * refactor: streamline match expressions for improved readability and performance * refactor: streamline match expressions for improved readability and performance * refactor: replace loop with while let for improved clarity and performance * feat: add SSA constant propagation support to analysis context for improved accuracy * feat: add SSA constant propagation support to analysis context for improved accuracy * feat: implement shell metacharacter validation and bounded-length checks in Rust analysis * feat: add static map analysis for command injection suppression and type safety * refactor: simplify match statements and reduce line breaks for improved readability * feat(summary): phase 1/5 SinkSite data model for primary sink-location attribution Introduce SinkSite (file_rel, line, col, snippet, cap) carrying the primary sink source-location through function summaries. Swap SsaFuncSummary.param_to_sink and FuncSummary.param_to_sink from a coarse Cap map to a deduped SmallVec<[SinkSite; 1]> per parameter, with a backward-compatible cap_sites() helper and serde defaults so pre-phase-1 on-disk rows continue to deserialise cleanly. Extraction: SinkSiteLocator bundles the tree/bytes/file_rel needed by extract_ssa_func_summary; ParsedFile::extract_ssa_artifacts wires the locator in for the persisted pass-1 path, while pass-2 intra-file transient summaries fall back to cap-only sites (behavior unchanged). Merge: GlobalSummaries::insert now unions sink sites with (file_rel, line, col, cap) dedup via shared union_param_sink_sites helper. Database: JSON-serialised summary columns carry the new shape automatically; no schema change needed. Phase 2 will consume SinkSite in build_taint_diag() to overwrite the caller-site Finding.line with the callee's sink line when resolved via summary. Phase 1 keeps behavior unchanged: scanning tests/benchmark/corpus/rust/cmdi/cmdi_indirect.rs still produces the same (wrong) line 10 finding. Adds round-trip tests covering SinkSite solo, SsaFuncSummary with sink sites, legacy-JSON default handling for both summary types, and merge dedup. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(taint): phase 2/5 thread SinkSite into SsaTaintEvent and Finding Plumb Phase 1's SinkSite through the event pipeline into Findings, no output change yet. SsaTaintEvent gains `primary_sink_site: Option<SinkSite>`; when the main or callback sink-emission path has non-empty `param_to_sink_sites`, filter to sites whose `(line != 0) && (cap ∩ sink_caps != ∅)` and emit one event per distinct site — the multi-primary collapse keeps each downstream Finding single-primary. Resolution: ResolvedSummary and SinkInfo gain mirror `param_to_sink_sites` fields, populated from `SsaFuncSummary.param_to_sink` (SSA + callback paths) and `FuncSummary.param_to_sink` (global paths). Label, local-summary, and interop resolution paths leave the field empty — they only ever had cap-level info to begin with. Finding: new `primary_location: Option<SinkLocation>` with `file_rel/line/col`. `ssa_events_to_findings` maps `event.primary_sink_site` → `Finding.primary_location`, filtering cap-only sites (`line == 0`) to `None` so the (0,0) sentinel never leaks to formatters. Dedup key extended with the primary location so multi-site events aren't collapsed back together. Invariants (debug_assert!): * every SinkSite reaching emission has `line != 0 && cap ∩ sink_caps != ∅` — enforced by the pick_primary_sink_sites* filters; * every populated Finding.primary_location has `line != 0` AND non-empty `file_rel` — the cap-only → None translation upstream guarantees this. Deliberately independent of `uses_summary`: that flag tracks whether the *taint chain* used a summary, whereas primary attribution requires only that the *sink* itself was summary-resolved. A local source reaching a cross-file sink produces `uses_summary=false` alongside a populated primary_location — documented on Finding.primary_location, covered by `cross_file_sink_finding_carries_primary_location`. build_taint_diag, SARIF/JSON/explanation formatters, and the benchmark scorer remain untouched: finding.line still comes from `cfg_graph[finding.sink]`, so cmdi_indirect.rs still reports line 10 and the benchmark's rs-cmdi-003 row still shows FN in the LOC column. Tests: `cross_file_sink_finding_carries_primary_location` (proves plumbing via a synthetic FuncSummary carrying a SinkSite at 42:5) and `cross_file_sink_cap_only_site_leaves_primary_location_none` (regression guard against cap-only sites surfacing). All 1566 lib tests + integration tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(output): phase 3/5 consume primary sink location in diag + SARIF When a finding's primary_location (populated in phase 2 from a callee summary's SinkSite) names the dangerous instruction inside a callee body, attribute the diagnostic line to that location instead of the caller's call site. The call site is demoted to a Call step in flow_steps, and a synthetic Sink step at the primary location is appended so analysts still see the full trace. Changes: - Add scan_root parameter to build_taint_diag so file_rel can be resolved back to an absolute path via a shared resolve_file_rel helper. Empty file_rel (single-file scans where namespace == "") resolves to the file under analysis. - Extend SinkLocation with snippet, carried from the upstream SinkSite so the formatter needs no second file read. - Relax the ssa_events_to_findings debug_assert to allow empty file_rel, which is valid when scan root equals the file itself. - SARIF: emit data-flow as codeFlows[0].threadFlows[0].locations[]; locations[0] already reflects the primary sink position via the updated diag line/col. Acceptance: scan on tests/benchmark/corpus/rust/cmdi/cmdi_indirect.rs now reports line 5 (Command::new) as the primary sink, with the call site at line 10 visible in flow_steps. Two expect.json fixtures updated (must_match line_range widened): - javascript/taint/context_sensitive_call: 12-14 -> 7-14 (line 8 is the real sink inside run()). - rust/cfg/closure_async: 10-10 -> 10-11 (line 11 is Command::new inside the closure). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(bench): phase 4/5 validate primary sink attribution across corpus Extend the benchmark scorer and ground truth to lock in phase 3's primary-location behavior, and add fixtures that exercise the new capability end-to-end. Scorer (tests/benchmark_test.rs): - Add optional `expected_call_site_lines: Option<Vec<[usize; 2]>>` on Case. When present, score_location_level additionally requires at least one flow_step in the finding's evidence trace to fall within ±2 of the call-site range. When absent, the check is skipped — fully forward-compatible with existing fixtures. - Retain ±2 tolerance on expected_sink_lines (compared against the now-primary Diag.line post-phase-3). Ground truth edits: - rs-cmdi-cross-001: expected_sink_lines [8,8] -> [9,9]. Line 8 is the transform::wrap call site (a cross-file propagator, not a sink); line 9 is Command::new, the real sink. The ±2 tolerance happened to mask this stale attribution but it was semantically wrong — phase 4 is the right time to correct it. Also adds expected_call_site_lines [8,8] so the new field is exercised on an existing cross-file case. - rs-cmdi-003: adds expected_call_site_lines [10,10] (run_cmd call). This fixture's sink (Command::new inside run_cmd at line 5) was the motivating case for phases 1-3; adding the call-site assertion guards against regression to caller-line attribution. New fixtures: - rust/cmdi/cmdi_indirect_multisink.rs (rs-cmdi-009): helper run_both takes two tainted params and invokes two Command sinks on consecutive lines. Locks in that primary line lands inside the helper (lines 5-6), not at the caller (line 12). Notes document that SinkSite is currently one-per-callee so both findings today collapse onto the first sink; expected_sink_lines=[5,6] and expected_call_site_lines=[12,12] stay valid either way. - python/cmdi/cross_indirect_sink/{app.py,helper.py} (py-cmdi-cross- 004): sink os.system lives in helper.py (cross-file), caller in app.py reads env source and calls run_cmd. Verifies phase 3's cross-file primary attribution: Diag.path = helper.py, Diag.line = 5, with app.py:7 recorded in flow_steps as a Call step. Acceptance: - `cargo test --test benchmark_test -- --ignored --nocapture` passes. - rs-cmdi-003 is TP/TP/TP (the target flip FN->TP at LOC). All pre-existing TP/TP/TP fixtures remain TP/TP/TP; 2 new fixtures are TP/TP/TP. - Aggregate rule-level: TP=158 FP=10 FN=1 TN=97, P=0.940 R=0.994 F1=0.966 on the 266-case corpus (was TP=156 FP=10 FN=1 TN=97 on 264 pre-phase-4, delta is the +2 new cases both resolving TP). - Full `cargo test` green (1566 lib tests + all integration tests). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(taint): phase 5/5 lock Finding.primary_location contract via regression test Add a regression test in src/taint/ssa_transfer.rs that wires up a synthetic SsaFuncSummary with a SinkSite at other.rs:42:10 and drives the three emission stages (pick_primary_sink_sites → emit_ssa_taint_events → ssa_events_to_findings) against a minimal caller SSA body. Asserts the resulting Finding.primary_location is exactly that triple. The existing integration tests in src/taint/tests.rs cover the coarse FuncSummary path end-to-end through analyse_file. This test locks in the lower-level SSA-side plumbing so a future refactor that silently drops the site between pick → emit → findings fails here rather than only at the benchmark layer. Also refreshes tests/benchmark/results/latest.json (timestamp only; rs-cmdi-003 remains TP/TP/TP and the aggregate P/R/F1 are unchanged from phase 4). Closes the primary sink-location attribution feature (phases 1-5/5): * Phase 1 — SinkSite data model on summaries. * Phase 2 — SinkSite threaded into SsaTaintEvent and Finding. * Phase 3 — diag + SARIF consume primary_location. * Phase 4 — benchmark validates primary_call_site_lines across corpus. * Phase 5 — regression test locks the event→finding contract. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor: clean up formatting and improve readability in multiple files * refactor: simplify type definition for deduplication key in findings * test(harness): add must_not_match expectation for FP regression guards Extends ExpectedFinding with must_not_match field that asserts a diagnostic must NOT fire — presence is a hard failure. Non-consuming scan so it coexists with must_match entries on the same rule_id. Adds forbidden_violations accumulator and updates summary line. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(regression): update expectations to ensure must_not_match for various taint and resource leak rules * feat: implement auto-seeding for JS/TS handler parameters to enhance taint tracking * feat: update switch statement handling to improve control flow analysis * feat: implement promisify alias handling for JS/TS to enhance taint tracking * feat: enhance taint tracking by refining expectation handling and adding mode filtering * feat: refine SQL handling in stream processing and enhance auto-seeding for handler parameters * feat: update taint tracking rules to enforce full mode matching and improve flow analysis * feat: enhance Ruby subshell handling to improve taint tracking and flow analysis * feat: update xss_response expectations to refine taint flow analysis and enhance regression guarding * feat: refine framework detection and update expectation handling for Echo and Sinatra * feat: implement max_count for taint tracking expectations and deduplicate findings * feat: add strict_unexpected handling for taint-unsanitised-flow in expectation files * feat: enhance deduplication of taint-unsanitised-flow findings by collapsing based on line and severity * feat: add strict_unexpected handling for taint-unsanitised-flow in multiple expectation files * feat: add structural invariant checks for SSA bodies * feat: ensure deterministic phi emission order using BTreeSet * feat: enhance handling of terminators to ensure authoritative flow through successor edges * feat: enhance Goto terminator handling to ensure all successors are marked executable * feat: refactor code for improved readability and organization * feat: simplify predicate checks and enhance readability in SSA handling * feat: implement per-file parse timeout and enhance file size handling * feat: migrate analysis engine toggles from environment variables to configuration file * feat: remove unnecessary whitespace in hostile_input_tests.rs * feat: remove unnecessary whitespace in hostile_input_tests.rs * feat: update dependencies and enhance documentation on language maturity * feat: enhance security headers and improve request body limits * feat: implement sink capability bits for deduplication and enhance evidence tagging * feat: implement dynamic activation handling for gated sinks and enhance validation logic * feat: enhance configuration documentation and clarify inline analysis cache behavior * feat: implement panic recovery during analysis to continue scans past errors * feat: add expectations configuration for taint analysis and performance metrics * feat: enhance error handling and logging during file reading and mutex locking * feat: add cross-file body loading tests and plumbing for CF-1 phase * feat: implement cross-file k=1 context-sensitive inline taint analysis with new tests and fixtures * feat: implement indexed-scan parity in cross-file inline analysis with new dropdown and copy functionality * feat: enhance classification span handling in CFG and AST for improved source attribution * feat: add new Express routes for handling user input and telemetry data * feat: implement ternary expression handling in CFG with diamond structure for JS/TS * feat: implement Phase CF-3 abstract-domain transfer channels in summaries * feat: add support for string-prefix transfer in cross-file calls and update tests * docs: reduce RESULTS.md doc size * feat: implement Phase CF-4 per-return-path summary decomposition with tests * feat: update parameter handling in pass1 and refactor SsaFuncSummary initialization * feat: implement Phase CF-5 for cross-file SCC joint fixed-point convergence with new flags and tests * feat: implement Phase CF-6 with parameter-granularity points-to summaries and associated tests * refactor: update comments and documentation for clarity and consistency * style: format code for consistency and readability * refactor: simplify verdict handling and improve edge checking logic * refactor: optimize path and identifier collection by avoiding unnecessary cloning * chore: update Cargo.toml for Rust version 1.85 and add ignored files; modify CHANGELOG and README for clarity on state analysis defaults * refactor: update documentation and improve clarity in configuration files * refactor: update documentation and improve clarity in configuration files * feat: add JS/TS pass-2 convergence tests and expectations configuration * feat: add Phase 5 regression tests for inline cache origin attribution and update related logic * feat: implement Phase 7 deduplication and alternative path linking for taint findings * feat: implement structural DFS index for anonymous functions and update naming conventions * feat: add Phase 8 regression tests for container-element taint in JS and Python * feat: add engine-depth profiles and explain-engine option for CLI * feat: update expectations and add new README fixtures for multi-file scan regression * feat: implement Phase 11 callback-alias and factory patterns with regression tests * feat: implement Terminator::Switch for multi-way dispatch and add regression tests * feat: add real-CVE benchmark fixtures for CVE-2023-48022, CVE-2019-14939, and CVE-2023-26159 with corresponding patched variants * refactor: extract cfg and ssa_transfer to submodules * refactor: cargo fmt * refactor: remove unnecessary blank line in cfg_tests.rs * refactor: remove unnecessary planning file * chore: update Rust version to 1.88 and bump dependencies in Cargo files * feat: enhance triage UI with new layout and controls, update README for clarity * feat: enhance triage UI with new layout and controls, update README for clarity * chore: remove outdated section from README for version 0.5.0 * docs: improve clarity and consistency in README content * chore: add "GPL-3.0-or-later" to license options in about.toml * chore: update license handling in about.toml and check-licenses.mjs * style: format code for improved readability in TriagePage component * style: format code for improved readability in TriagePage component * chore: enhance license handling and improve body_id scoping in seed lookup * feat: introduce owner and parent body IDs for enhanced seed scoping * feat: implement direction-aware engine provenance with new CLI flag for strict CI gating * feat: add Undef SSA operation for improved control-flow handling * style: improve code formatting for consistency and readability in multiple files * feat: add 16-function chain SCC across multiple files for enhanced analysis * style: simplify code formatting for improved readability in multiple files * fix: update CapHitReason default implementation and improve README clarity * docs: enhance README with detailed explanations of taint analysis and limitations * docs: refine README for clarity and consistency in taint analysis section * style: improve code formatting for better readability in NewScanModal and scans * fix: update cargo-about command to use --offline for deterministic license generation * fix: update cargo-about command to use --offline for deterministic license generation * ci: add step to prime cargo registry cache for deterministic license generation * feat: add support for non-sink collections in authorization analysis * feat: enhance authorization checks with row-level ownership equality and binding tracking * feat: implement self-scoped user handling and enhance ownership checks * refactor: simplify assertions and formatting in authorization analysis tests * fix: normalize line endings in THIRDPARTY-LICENSES.html generation and update README with AI disclosure * docs: update AI disclosure section for clarity and conciseness * feat: add AI Contribution Policy and update contributing guidelines for AI assistance disclosure * feat: enhance authorization analysis with SSA-derived variable type classification * feat: implement auth_finding_to_diag function for enhanced security diagnostics * feat: add args_value_refs to CallSite struct for enhanced argument tracking * feat: add args_value_refs to CallSite struct for enhanced argument tracking * feat: add direction-aware engine provenance with LossDirection classification and new CLI flag * feat: simplify strip_cap_from_call_args call by removing unnecessary line breaks * feat: enhance error message handling in cli_validation_tests for better Windows compatibility * feat: optimize release profile settings in Cargo.toml and update CodeQL configuration * feat: enhance release build process with SBOM generation and SLSA provenance * feat: update actions/checkout and actions/setup-node to v6, enhance CLI options, and improve auth-check summaries * feat: introduce PathFact handling for path safety checks and rejection logic * feat: introduce PathFact handling for path safety checks and rejection logic * feat: update benchmark data and enhance path sanitization logic with new safety checks * feat: document AI assistance in frontend UI development and human review process * feat: add return path facts for enhanced path safety checks and update documentation * chore: update release date for version 0.5.0 in CHANGELOG.md * chore: clean up ci.yml by removing outdated comments and clarifying steps * feat: implement cross-language path sanitizers and validators for enhanced security * feat: enhance SSA value usage tracking by including block terminators and improve path safety checks * feat: enhance switch statement handling by adding per-case path constraints and support for exclusive cases * refactor: simplify conditional formatting and improve code readability in executor and lower modules * feat: add vulnerable examples for various languages demonstrating authentication and sanitization issues * feat: enhance actor context recognition for self-actor identifiers and add support for global non-sink receivers * feat: enhance actor context recognition for self-actor identifiers and add support for global non-sink receivers * feat: add transform classifiers for Java, Go, and Ruby with corresponding tests * refactor: clarify comments on reassign-to-constant idiom and sink behavior in guards.rs --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Eli Peter
GitHub
parent
c4ce08b452
commit
41128177d2
2144 changed files with 201812 additions and 8927 deletions
57
frontend/src/graph/adapters/callgraph.ts
Normal file
57
frontend/src/graph/adapters/callgraph.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import type { CallGraphNodeView, CallGraphView } from '@/api/types';
|
||||
import type { GraphModel } from '../types';
|
||||
|
||||
const MAX_LABEL = 44;
|
||||
const MAX_DETAIL = 48;
|
||||
|
||||
function truncate(value: string, max: number): string {
|
||||
return value.length > max ? `${value.slice(0, max - 1)}…` : value;
|
||||
}
|
||||
|
||||
function summarizeNode(node: CallGraphNodeView): string {
|
||||
if (node.namespace) return truncate(node.namespace, MAX_DETAIL);
|
||||
|
||||
const segments = node.file.split(/[\\/]/);
|
||||
return truncate(segments[segments.length - 1] ?? node.file, MAX_DETAIL);
|
||||
}
|
||||
|
||||
export function adaptCallGraph(data: CallGraphView): GraphModel {
|
||||
const recursiveNodes = new Set<number>();
|
||||
for (const scc of data.sccs) {
|
||||
for (const id of scc) recursiveNodes.add(id);
|
||||
}
|
||||
|
||||
return {
|
||||
kind: 'callgraph',
|
||||
nodes: data.nodes.map((node) => ({
|
||||
key: String(node.id),
|
||||
rawId: node.id,
|
||||
label: truncate(node.name, MAX_LABEL),
|
||||
kind: 'Call',
|
||||
detail: summarizeNode(node),
|
||||
metadata: {
|
||||
...node,
|
||||
isRecursive: recursiveNodes.has(node.id),
|
||||
searchText: [
|
||||
node.name,
|
||||
node.namespace,
|
||||
node.file,
|
||||
node.lang,
|
||||
node.arity == null ? '' : String(node.arity),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.toLowerCase(),
|
||||
},
|
||||
})),
|
||||
edges: data.edges.map((edge, index) => ({
|
||||
key: `call:${edge.source}:${edge.target}:${index}`,
|
||||
source: String(edge.source),
|
||||
target: String(edge.target),
|
||||
kind: 'Call',
|
||||
metadata: {
|
||||
...edge,
|
||||
},
|
||||
})),
|
||||
};
|
||||
}
|
||||
85
frontend/src/graph/adapters/cfg.ts
Normal file
85
frontend/src/graph/adapters/cfg.ts
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import type { CfgEdgeView, CfgGraphView, CfgNodeView } from '@/api/types';
|
||||
import type { GraphModel } from '../types';
|
||||
|
||||
function truncate(value: string, max: number): string {
|
||||
return value.length > max ? `${value.slice(0, max - 1)}…` : value;
|
||||
}
|
||||
|
||||
function normalizeText(value: string): string {
|
||||
return value.replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
|
||||
const CFG_EDGE_PRIORITY: Record<string, number> = {
|
||||
True: 4,
|
||||
False: 4,
|
||||
Exception: 3,
|
||||
Back: 2,
|
||||
Seq: 1,
|
||||
};
|
||||
|
||||
function getCfgEdgePriority(kind: string): number {
|
||||
return CFG_EDGE_PRIORITY[kind] ?? 2;
|
||||
}
|
||||
|
||||
export function formatCfgNodeLabel(node: CfgNodeView): string {
|
||||
const summary =
|
||||
node.kind === 'Call'
|
||||
? (node.callee ?? node.defines)
|
||||
: (node.defines ?? node.callee);
|
||||
|
||||
if (summary) return `${node.kind}: ${truncate(normalizeText(summary), 56)}`;
|
||||
return node.kind;
|
||||
}
|
||||
|
||||
export function normalizeCfgEdges(edges: CfgEdgeView[]): CfgEdgeView[] {
|
||||
const deduped = new Map<string, CfgEdgeView>();
|
||||
|
||||
for (const edge of edges) {
|
||||
const key = `${edge.source}:${edge.target}`;
|
||||
const current = deduped.get(key);
|
||||
|
||||
if (
|
||||
!current ||
|
||||
getCfgEdgePriority(edge.kind) > getCfgEdgePriority(current.kind)
|
||||
) {
|
||||
deduped.set(key, edge);
|
||||
}
|
||||
}
|
||||
|
||||
return [...deduped.values()];
|
||||
}
|
||||
|
||||
export function adaptCfgGraph(data: CfgGraphView): GraphModel {
|
||||
const edges = normalizeCfgEdges(data.edges);
|
||||
|
||||
return {
|
||||
kind: 'cfg',
|
||||
nodes: data.nodes.map((node) => ({
|
||||
key: String(node.id),
|
||||
rawId: node.id,
|
||||
label: formatCfgNodeLabel(node),
|
||||
kind: node.kind,
|
||||
detail: `Line ${node.line}`,
|
||||
sublabel: node.condition_text
|
||||
? truncate(node.condition_text, 40)
|
||||
: undefined,
|
||||
badges: node.labels.length > 0 ? node.labels.slice(0, 4) : undefined,
|
||||
line: node.line,
|
||||
metadata: {
|
||||
...node,
|
||||
isEntry: node.id === data.entry,
|
||||
isExit: node.kind === 'Exit' || node.kind === 'Return',
|
||||
},
|
||||
})),
|
||||
edges: edges.map((edge, index) => ({
|
||||
key: `cfg:${edge.source}:${edge.target}:${edge.kind}:${index}`,
|
||||
source: String(edge.source),
|
||||
target: String(edge.target),
|
||||
kind: edge.kind,
|
||||
label: edge.kind !== 'Seq' ? edge.kind : undefined,
|
||||
metadata: {
|
||||
...edge,
|
||||
},
|
||||
})),
|
||||
};
|
||||
}
|
||||
125
frontend/src/graph/components/CallGraphCanvas.tsx
Normal file
125
frontend/src/graph/components/CallGraphCanvas.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
import { useMemo, useState } from 'react';
|
||||
import type { CallGraphView } from '@/api/types';
|
||||
import { adaptCallGraph } from '../adapters/callgraph';
|
||||
import { useElkLayout } from '../hooks/useElkLayout';
|
||||
import {
|
||||
collectSearchMatches,
|
||||
extractNeighborhoodSubgraph,
|
||||
} from '../reduction/neighborhood';
|
||||
import { SigmaGraph } from '../rendering/sigma/SigmaGraph';
|
||||
|
||||
interface CallGraphCanvasProps {
|
||||
data: CallGraphView;
|
||||
selectedNodeId: number | null;
|
||||
onSelectNode: (id: number) => void;
|
||||
}
|
||||
|
||||
export function CallGraphCanvas({
|
||||
data,
|
||||
selectedNodeId,
|
||||
onSelectNode,
|
||||
}: CallGraphCanvasProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [neighborhoodOnly, setNeighborhoodOnly] = useState(false);
|
||||
const [radius, setRadius] = useState(1);
|
||||
|
||||
const fullGraph = useMemo(() => adaptCallGraph(data), [data]);
|
||||
const selectedNodeKey =
|
||||
selectedNodeId == null ? null : String(selectedNodeId);
|
||||
|
||||
const matches = useMemo(
|
||||
() => collectSearchMatches(fullGraph, searchQuery, 60),
|
||||
[fullGraph, searchQuery],
|
||||
);
|
||||
const matchKeys = useMemo(
|
||||
() => new Set(matches.map((node) => node.key)),
|
||||
[matches],
|
||||
);
|
||||
|
||||
const visibleGraph = useMemo(() => {
|
||||
if (!neighborhoodOnly || !selectedNodeKey) return fullGraph;
|
||||
return extractNeighborhoodSubgraph(fullGraph, selectedNodeKey, radius);
|
||||
}, [fullGraph, neighborhoodOnly, radius, selectedNodeKey]);
|
||||
|
||||
const { graph, isLoading, error } = useElkLayout(visibleGraph);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="error-state">
|
||||
Failed to compute the call graph layout.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!graph) {
|
||||
return <div className="loading">Preparing call graph…</div>;
|
||||
}
|
||||
|
||||
const extras = (
|
||||
<>
|
||||
<label className="graph-toolbar-field">
|
||||
<span>Search</span>
|
||||
<input
|
||||
className="graph-toolbar-input"
|
||||
type="search"
|
||||
value={searchQuery}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
placeholder="Function name"
|
||||
/>
|
||||
</label>
|
||||
<label className="graph-toolbar-field">
|
||||
<span>Match</span>
|
||||
<select
|
||||
className="graph-toolbar-select"
|
||||
value={selectedNodeKey ?? ''}
|
||||
onChange={(event) => {
|
||||
const next = event.target.value;
|
||||
if (!next) return;
|
||||
onSelectNode(Number(next));
|
||||
}}
|
||||
>
|
||||
<option value="">Select…</option>
|
||||
{matches.map((match) => (
|
||||
<option key={match.key} value={match.key}>
|
||||
{match.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="graph-toolbar-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={neighborhoodOnly}
|
||||
onChange={(event) => setNeighborhoodOnly(event.target.checked)}
|
||||
/>
|
||||
<span>Neighbors only</span>
|
||||
</label>
|
||||
<label className="graph-toolbar-field graph-toolbar-field-compact">
|
||||
<span>Radius</span>
|
||||
<input
|
||||
className="graph-toolbar-range"
|
||||
type="range"
|
||||
min="1"
|
||||
max="4"
|
||||
step="1"
|
||||
value={radius}
|
||||
disabled={!neighborhoodOnly}
|
||||
onChange={(event) => setRadius(Number(event.target.value))}
|
||||
/>
|
||||
<strong>{radius}</strong>
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<SigmaGraph
|
||||
graph={graph}
|
||||
viewKind="callgraph"
|
||||
selectedNodeKey={selectedNodeKey}
|
||||
onNodeClick={(key) => onSelectNode(Number(key))}
|
||||
searchMatchKeys={matchKeys}
|
||||
toolbarExtras={extras}
|
||||
loading={isLoading}
|
||||
/>
|
||||
);
|
||||
}
|
||||
204
frontend/src/graph/components/CfgGraphCanvas.tsx
Normal file
204
frontend/src/graph/components/CfgGraphCanvas.tsx
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
import { useEffect, useMemo, useState } from 'react';
|
||||
import type { CfgGraphView, CfgNodeView } from '@/api/types';
|
||||
import { AnalysisWorkspace } from '@/components/explorer/AnalysisWorkspace';
|
||||
import {
|
||||
adaptCfgGraph,
|
||||
formatCfgNodeLabel,
|
||||
normalizeCfgEdges,
|
||||
} from '../adapters/cfg';
|
||||
import { useElkLayout } from '../hooks/useElkLayout';
|
||||
import { SigmaGraph } from '../rendering/sigma/SigmaGraph';
|
||||
|
||||
interface CfgGraphCanvasProps {
|
||||
data: CfgGraphView;
|
||||
}
|
||||
|
||||
function formatNodeList(
|
||||
ids: number[],
|
||||
nodeMap: Map<number, CfgNodeView>,
|
||||
): string {
|
||||
if (ids.length === 0) return 'None';
|
||||
|
||||
return ids
|
||||
.map((id) => {
|
||||
const node = nodeMap.get(id);
|
||||
return node ? `${id} (${node.kind})` : `${id}`;
|
||||
})
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
function NodeDetail({
|
||||
node,
|
||||
label,
|
||||
predecessorIds,
|
||||
successorIds,
|
||||
nodeMap,
|
||||
}: {
|
||||
node: CfgNodeView;
|
||||
label: string;
|
||||
predecessorIds: number[];
|
||||
successorIds: number[];
|
||||
nodeMap: Map<number, CfgNodeView>;
|
||||
}) {
|
||||
return (
|
||||
<div className="analysis-node-detail">
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Kind</span>
|
||||
<span className="debug-detail-value">{node.kind}</span>
|
||||
</div>
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Label</span>
|
||||
<span className="debug-detail-value mono">{label}</span>
|
||||
</div>
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Source</span>
|
||||
<span className="debug-detail-value">
|
||||
L{node.line} • span {node.span[0]}-{node.span[1]}
|
||||
</span>
|
||||
</div>
|
||||
{node.defines && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Defines</span>
|
||||
<span className="debug-detail-value mono">{node.defines}</span>
|
||||
</div>
|
||||
)}
|
||||
{node.uses.length > 0 && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Uses</span>
|
||||
<span className="debug-detail-value mono">
|
||||
{node.uses.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{node.callee && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Callee</span>
|
||||
<span className="debug-detail-value mono">{node.callee}</span>
|
||||
</div>
|
||||
)}
|
||||
{node.labels.length > 0 && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Labels</span>
|
||||
<div>
|
||||
{node.labels.map((labelValue, index) => (
|
||||
<span key={index} className="cap-badge">
|
||||
{labelValue}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{node.condition_text && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Condition</span>
|
||||
<span className="debug-detail-value mono">{node.condition_text}</span>
|
||||
</div>
|
||||
)}
|
||||
{node.enclosing_func && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Function</span>
|
||||
<span className="debug-detail-value mono">{node.enclosing_func}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Predecessors</span>
|
||||
<span className="debug-detail-value mono">
|
||||
{formatNodeList(predecessorIds, nodeMap)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Successors</span>
|
||||
<span className="debug-detail-value mono">
|
||||
{formatNodeList(successorIds, nodeMap)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CfgGraphCanvas({ data }: CfgGraphCanvasProps) {
|
||||
const [selectedNodeKey, setSelectedNodeKey] = useState<string | null>(null);
|
||||
|
||||
const normalizedEdges = useMemo(
|
||||
() => normalizeCfgEdges(data.edges),
|
||||
[data.edges],
|
||||
);
|
||||
const fullGraph = useMemo(() => adaptCfgGraph(data), [data]);
|
||||
const nodeMap = useMemo(
|
||||
() => new Map(data.nodes.map((node) => [node.id, node])),
|
||||
[data.nodes],
|
||||
);
|
||||
const { graph, isLoading, error } = useElkLayout(fullGraph);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedNodeKey) return;
|
||||
if (fullGraph.nodes.some((node) => node.key === selectedNodeKey)) return;
|
||||
setSelectedNodeKey(null);
|
||||
}, [fullGraph.nodes, selectedNodeKey]);
|
||||
|
||||
if (error) {
|
||||
return <div className="error-state">Failed to compute the CFG layout.</div>;
|
||||
}
|
||||
|
||||
if (!graph) {
|
||||
return <div className="loading">Preparing CFG…</div>;
|
||||
}
|
||||
|
||||
const selectedVisibleNode =
|
||||
selectedNodeKey == null
|
||||
? undefined
|
||||
: fullGraph.nodes.find((node) => node.key === selectedNodeKey);
|
||||
|
||||
const selectedRawNode =
|
||||
selectedVisibleNode && selectedVisibleNode.rawId >= 0
|
||||
? nodeMap.get(selectedVisibleNode.rawId)
|
||||
: undefined;
|
||||
|
||||
const predecessorIds =
|
||||
selectedRawNode == null
|
||||
? []
|
||||
: normalizedEdges
|
||||
.filter((edge) => edge.target === selectedRawNode.id)
|
||||
.map((edge) => edge.source);
|
||||
const successorIds =
|
||||
selectedRawNode == null
|
||||
? []
|
||||
: normalizedEdges
|
||||
.filter((edge) => edge.source === selectedRawNode.id)
|
||||
.map((edge) => edge.target);
|
||||
|
||||
const inspector =
|
||||
selectedRawNode != null ? (
|
||||
<NodeDetail
|
||||
node={selectedRawNode}
|
||||
label={formatCfgNodeLabel(selectedRawNode)}
|
||||
predecessorIds={predecessorIds}
|
||||
successorIds={successorIds}
|
||||
nodeMap={nodeMap}
|
||||
/>
|
||||
) : undefined;
|
||||
|
||||
const inspectorTitle = selectedRawNode
|
||||
? `Node ${selectedRawNode.id}`
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<AnalysisWorkspace
|
||||
inspector={inspector}
|
||||
inspectorTitle={inspectorTitle}
|
||||
canvas={
|
||||
<div className="analysis-graph-frame">
|
||||
<SigmaGraph
|
||||
graph={graph}
|
||||
viewKind="cfg"
|
||||
selectedNodeKey={selectedNodeKey}
|
||||
onNodeClick={(key) =>
|
||||
setSelectedNodeKey((current) => (current === key ? null : key))
|
||||
}
|
||||
loading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
88
frontend/src/graph/components/GraphToolbar.tsx
Normal file
88
frontend/src/graph/components/GraphToolbar.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import type { ReactNode } from 'react';
|
||||
|
||||
interface GraphToolbarProps {
|
||||
zoomPercentage: number;
|
||||
onZoomIn: () => void;
|
||||
onZoomOut: () => void;
|
||||
onFitGraph: () => void;
|
||||
onFocusSelection?: () => void;
|
||||
focusDisabled?: boolean;
|
||||
extras?: ReactNode;
|
||||
status?: ReactNode;
|
||||
}
|
||||
|
||||
export function GraphToolbar({
|
||||
zoomPercentage,
|
||||
onZoomIn,
|
||||
onZoomOut,
|
||||
onFitGraph,
|
||||
onFocusSelection,
|
||||
focusDisabled,
|
||||
extras,
|
||||
status,
|
||||
}: GraphToolbarProps) {
|
||||
return (
|
||||
<div className="graph-toolbar">
|
||||
<div className="graph-toolbar-group">
|
||||
<button
|
||||
className="graph-toolbar-btn"
|
||||
onClick={onZoomOut}
|
||||
title="Zoom out"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<line x1="3" y1="7" x2="11" y2="7" />
|
||||
</svg>
|
||||
</button>
|
||||
<span className="graph-toolbar-zoom">{zoomPercentage}%</span>
|
||||
<button
|
||||
className="graph-toolbar-btn"
|
||||
onClick={onZoomIn}
|
||||
title="Zoom in"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<line x1="3" y1="7" x2="11" y2="7" />
|
||||
<line x1="7" y1="3" x2="7" y2="11" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="graph-toolbar-sep" />
|
||||
<button
|
||||
className="graph-toolbar-btn"
|
||||
onClick={onFitGraph}
|
||||
title="Fit graph"
|
||||
type="button"
|
||||
>
|
||||
Fit
|
||||
</button>
|
||||
{onFocusSelection && (
|
||||
<button
|
||||
className="graph-toolbar-btn"
|
||||
onClick={onFocusSelection}
|
||||
disabled={focusDisabled}
|
||||
title="Focus selection"
|
||||
type="button"
|
||||
>
|
||||
Focus
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{extras ? <div className="graph-toolbar-extras">{extras}</div> : null}
|
||||
{status ? <div className="graph-toolbar-status">{status}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
99
frontend/src/graph/hooks/useElkLayout.ts
Normal file
99
frontend/src/graph/hooks/useElkLayout.ts
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { layoutGraphWithElk } from '../layout/elk';
|
||||
import type { ElkLayoutPreset, GraphModel, LayoutGraphModel } from '../types';
|
||||
|
||||
interface LayoutState {
|
||||
graph: LayoutGraphModel | null;
|
||||
isLoading: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
function createLayoutKey(
|
||||
graph: GraphModel,
|
||||
overrides?: Partial<ElkLayoutPreset>,
|
||||
): string {
|
||||
const nodeKey = graph.nodes
|
||||
.map(
|
||||
(node) => `${node.key}:${node.label}:${node.kind}:${node.detail ?? ''}`,
|
||||
)
|
||||
.join('|');
|
||||
const edgeKey = graph.edges
|
||||
.map((edge) => `${edge.key}:${edge.source}:${edge.target}:${edge.kind}`)
|
||||
.join('|');
|
||||
return JSON.stringify({
|
||||
kind: graph.kind,
|
||||
nodeKey,
|
||||
edgeKey,
|
||||
overrides,
|
||||
});
|
||||
}
|
||||
|
||||
const layoutCache = new Map<string, LayoutGraphModel>();
|
||||
|
||||
// The hook stays async even on the main thread so moving ELK into a worker later
|
||||
// does not require rewriting the React call sites.
|
||||
export function useElkLayout(
|
||||
graph: GraphModel,
|
||||
overrides?: Partial<ElkLayoutPreset>,
|
||||
): LayoutState {
|
||||
const layoutKey = useMemo(
|
||||
() => createLayoutKey(graph, overrides),
|
||||
[graph, overrides],
|
||||
);
|
||||
const [state, setState] = useState<LayoutState>(() => {
|
||||
const cached = layoutCache.get(layoutKey) ?? null;
|
||||
return {
|
||||
graph: cached,
|
||||
isLoading: cached == null,
|
||||
error: null,
|
||||
};
|
||||
});
|
||||
const requestRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
const cached = layoutCache.get(layoutKey);
|
||||
if (cached) {
|
||||
setState({
|
||||
graph: cached,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const requestId = requestRef.current + 1;
|
||||
requestRef.current = requestId;
|
||||
let cancelled = false;
|
||||
|
||||
setState((current) => ({
|
||||
graph: current.graph,
|
||||
isLoading: true,
|
||||
error: null,
|
||||
}));
|
||||
|
||||
void layoutGraphWithElk(graph, overrides)
|
||||
.then((layout) => {
|
||||
if (cancelled || requestRef.current !== requestId) return;
|
||||
layoutCache.set(layoutKey, layout);
|
||||
setState({
|
||||
graph: layout,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
});
|
||||
})
|
||||
.catch((error: unknown) => {
|
||||
if (cancelled || requestRef.current !== requestId) return;
|
||||
setState({
|
||||
graph: null,
|
||||
isLoading: false,
|
||||
error: error instanceof Error ? error : new Error('Layout failed'),
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [graph, layoutKey, overrides]);
|
||||
|
||||
return state;
|
||||
}
|
||||
288
frontend/src/graph/layout/elk.ts
Normal file
288
frontend/src/graph/layout/elk.ts
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
import ELK from 'elkjs/lib/elk.bundled.js';
|
||||
import type { ElkEdgeSection, ElkNode } from 'elkjs/lib/elk-api';
|
||||
import { getNodeTextLayout } from './text';
|
||||
import type {
|
||||
ElkLayoutPreset,
|
||||
GraphModel,
|
||||
GraphNodeModel,
|
||||
GraphPoint,
|
||||
GraphViewKind,
|
||||
LayoutGraphEdge,
|
||||
LayoutGraphModel,
|
||||
LayoutGraphNode,
|
||||
} from '../types';
|
||||
|
||||
const elk = new ELK();
|
||||
|
||||
const CHAR_WIDTH = 7.1;
|
||||
const LINE_HEIGHT = 16;
|
||||
const HORIZONTAL_PADDING = 30;
|
||||
const VERTICAL_PADDING = 18;
|
||||
const MIN_WIDTH = 112;
|
||||
const BADGE_HEIGHT = 16;
|
||||
const MAX_WIDTH = 360;
|
||||
|
||||
const PRESETS: Record<GraphViewKind, ElkLayoutPreset> = {
|
||||
callgraph: {
|
||||
direction: 'DOWN',
|
||||
nodeSpacing: 42,
|
||||
layerSpacing: 148,
|
||||
edgeNodeSpacing: 24,
|
||||
padding: 36,
|
||||
edgeRouting: 'POLYLINE',
|
||||
},
|
||||
cfg: {
|
||||
direction: 'DOWN',
|
||||
nodeSpacing: 36,
|
||||
layerSpacing: 128,
|
||||
edgeNodeSpacing: 24,
|
||||
padding: 32,
|
||||
edgeRouting: 'ORTHOGONAL',
|
||||
},
|
||||
};
|
||||
|
||||
function measureNode(
|
||||
node: GraphNodeModel,
|
||||
viewKind: GraphViewKind,
|
||||
): {
|
||||
width: number;
|
||||
height: number;
|
||||
text: ReturnType<typeof getNodeTextLayout>;
|
||||
} {
|
||||
const text = getNodeTextLayout(node, viewKind);
|
||||
const width = Math.max(
|
||||
MIN_WIDTH,
|
||||
Math.min(MAX_WIDTH, text.maxChars * CHAR_WIDTH + HORIZONTAL_PADDING),
|
||||
);
|
||||
const height =
|
||||
Math.max(1, text.lineCount) * LINE_HEIGHT +
|
||||
VERTICAL_PADDING +
|
||||
(node.badges?.length ? BADGE_HEIGHT : 0);
|
||||
|
||||
return { width, height, text };
|
||||
}
|
||||
|
||||
function estimateSigmaNodeSize(
|
||||
node: GraphNodeModel,
|
||||
width: number,
|
||||
height: number,
|
||||
): number {
|
||||
const base = Math.max(6, Math.min(18, Math.sqrt(width * height) / 8));
|
||||
if (node.kind === 'Entry' || node.kind === 'Exit') return base + 1.5;
|
||||
if (node.kind === 'If' || node.kind === 'Loop') return base + 0.75;
|
||||
return base;
|
||||
}
|
||||
|
||||
function buildLayoutOptions(
|
||||
graph: GraphModel,
|
||||
overrides?: Partial<ElkLayoutPreset>,
|
||||
): ElkNode['layoutOptions'] {
|
||||
const preset = { ...PRESETS[graph.kind], ...overrides };
|
||||
|
||||
return {
|
||||
'elk.algorithm': 'layered',
|
||||
'elk.direction': preset.direction,
|
||||
'elk.spacing.nodeNode': String(preset.nodeSpacing),
|
||||
'elk.layered.spacing.nodeNodeBetweenLayers': String(preset.layerSpacing),
|
||||
'elk.spacing.edgeNode': String(preset.edgeNodeSpacing),
|
||||
'elk.edgeRouting': preset.edgeRouting,
|
||||
'elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP',
|
||||
'elk.layered.unnecessaryBendpoints': 'true',
|
||||
'elk.layered.thoroughness': graph.kind === 'callgraph' ? '6' : '8',
|
||||
};
|
||||
}
|
||||
|
||||
function sortSections(
|
||||
sections: ElkEdgeSection[] | undefined,
|
||||
): ElkEdgeSection[] {
|
||||
if (!sections || sections.length <= 1) return sections ?? [];
|
||||
|
||||
const sectionById = new Map(sections.map((section) => [section.id, section]));
|
||||
const head =
|
||||
sections.find(
|
||||
(section) =>
|
||||
!section.incomingSections || section.incomingSections.length === 0,
|
||||
) ?? sections[0];
|
||||
|
||||
const ordered: ElkEdgeSection[] = [];
|
||||
const seen = new Set<string>();
|
||||
let cursor: ElkEdgeSection | undefined = head;
|
||||
|
||||
while (cursor && !seen.has(cursor.id)) {
|
||||
ordered.push(cursor);
|
||||
seen.add(cursor.id);
|
||||
|
||||
const nextId: string | undefined = cursor.outgoingSections?.[0];
|
||||
cursor = nextId ? sectionById.get(nextId) : undefined;
|
||||
}
|
||||
|
||||
if (ordered.length === sections.length) return ordered;
|
||||
return sections;
|
||||
}
|
||||
|
||||
function dedupePoints(points: GraphPoint[]): GraphPoint[] {
|
||||
const deduped: GraphPoint[] = [];
|
||||
for (const point of points) {
|
||||
const previous = deduped[deduped.length - 1];
|
||||
if (previous && previous.x === point.x && previous.y === point.y) continue;
|
||||
deduped.push(point);
|
||||
}
|
||||
return deduped;
|
||||
}
|
||||
|
||||
function extractRoute(sections: ElkEdgeSection[] | undefined): GraphPoint[] {
|
||||
const points: GraphPoint[] = [];
|
||||
|
||||
for (const section of sortSections(sections)) {
|
||||
points.push(section.startPoint);
|
||||
if (section.bendPoints) points.push(...section.bendPoints);
|
||||
points.push(section.endPoint);
|
||||
}
|
||||
|
||||
return dedupePoints(points);
|
||||
}
|
||||
|
||||
function collectBounds(
|
||||
nodes: LayoutGraphNode[],
|
||||
edges: LayoutGraphEdge[],
|
||||
padding: number,
|
||||
) {
|
||||
let minX = Number.POSITIVE_INFINITY;
|
||||
let maxX = Number.NEGATIVE_INFINITY;
|
||||
let minY = Number.POSITIVE_INFINITY;
|
||||
let maxY = Number.NEGATIVE_INFINITY;
|
||||
|
||||
const includePoint = (x: number, y: number) => {
|
||||
if (x < minX) minX = x;
|
||||
if (x > maxX) maxX = x;
|
||||
if (y < minY) minY = y;
|
||||
if (y > maxY) maxY = y;
|
||||
};
|
||||
|
||||
for (const node of nodes) {
|
||||
includePoint(node.x - node.width / 2, node.y - node.height / 2);
|
||||
includePoint(node.x + node.width / 2, node.y + node.height / 2);
|
||||
}
|
||||
|
||||
for (const edge of edges) {
|
||||
for (const point of edge.route) {
|
||||
includePoint(point.x, point.y);
|
||||
}
|
||||
}
|
||||
|
||||
if (minX === Number.POSITIVE_INFINITY) minX = 0;
|
||||
if (maxX === Number.NEGATIVE_INFINITY) maxX = 0;
|
||||
if (minY === Number.POSITIVE_INFINITY) minY = 0;
|
||||
if (maxY === Number.NEGATIVE_INFINITY) maxY = 0;
|
||||
|
||||
const offsetX = padding - minX;
|
||||
const offsetY = padding - minY;
|
||||
|
||||
return {
|
||||
offsetX,
|
||||
offsetY,
|
||||
width: maxX - minX + padding * 2,
|
||||
height: maxY - minY + padding * 2,
|
||||
};
|
||||
}
|
||||
|
||||
export async function layoutGraphWithElk(
|
||||
graph: GraphModel,
|
||||
overrides?: Partial<ElkLayoutPreset>,
|
||||
): Promise<LayoutGraphModel> {
|
||||
if (graph.nodes.length === 0) {
|
||||
return {
|
||||
kind: graph.kind,
|
||||
nodes: [],
|
||||
edges: [],
|
||||
bounds: { width: 0, height: 0 },
|
||||
};
|
||||
}
|
||||
|
||||
const preset = { ...PRESETS[graph.kind], ...overrides };
|
||||
const dimensions = new Map<
|
||||
string,
|
||||
{
|
||||
width: number;
|
||||
height: number;
|
||||
text: ReturnType<typeof getNodeTextLayout>;
|
||||
}
|
||||
>();
|
||||
|
||||
const elkGraph: ElkNode = {
|
||||
id: 'root',
|
||||
layoutOptions: buildLayoutOptions(graph, overrides),
|
||||
children: graph.nodes.map((node) => {
|
||||
const size = measureNode(node, graph.kind);
|
||||
dimensions.set(node.key, size);
|
||||
return {
|
||||
id: node.key,
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
};
|
||||
}),
|
||||
edges: graph.edges.map((edge) => ({
|
||||
id: edge.key,
|
||||
sources: [edge.source],
|
||||
targets: [edge.target],
|
||||
})),
|
||||
};
|
||||
|
||||
const layout = await elk.layout(elkGraph);
|
||||
const edgeById = new Map(
|
||||
layout.edges?.map((edge) => [edge.id ?? '', edge]) ?? [],
|
||||
);
|
||||
const layoutNodesById = new Map(
|
||||
layout.children?.map((node) => [node.id, node]) ?? [],
|
||||
);
|
||||
|
||||
const nodes: LayoutGraphNode[] = graph.nodes.map((node) => {
|
||||
const layoutNode = layoutNodesById.get(node.key);
|
||||
const size = dimensions.get(node.key) ?? measureNode(node, graph.kind);
|
||||
const x = (layoutNode?.x ?? 0) + size.width / 2;
|
||||
const y = (layoutNode?.y ?? 0) + size.height / 2;
|
||||
|
||||
return {
|
||||
...node,
|
||||
x,
|
||||
y,
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
sigmaSize: estimateSigmaNodeSize(node, size.width, size.height),
|
||||
labelLines: size.text.labelLines,
|
||||
detailLines: size.text.detailLines,
|
||||
sublabelLines: size.text.sublabelLines,
|
||||
};
|
||||
});
|
||||
|
||||
const edges: LayoutGraphEdge[] = graph.edges.map((edge) => {
|
||||
const layoutEdge = edgeById.get(edge.key);
|
||||
const route = extractRoute(layoutEdge?.sections);
|
||||
return {
|
||||
...edge,
|
||||
route,
|
||||
};
|
||||
});
|
||||
|
||||
const bounds = collectBounds(nodes, edges, preset.padding);
|
||||
|
||||
return {
|
||||
kind: graph.kind,
|
||||
nodes: nodes.map((node) => ({
|
||||
...node,
|
||||
x: node.x + bounds.offsetX,
|
||||
y: node.y + bounds.offsetY,
|
||||
})),
|
||||
edges: edges.map((edge) => ({
|
||||
...edge,
|
||||
route: edge.route.map((point) => ({
|
||||
x: point.x + bounds.offsetX,
|
||||
y: point.y + bounds.offsetY,
|
||||
})),
|
||||
})),
|
||||
bounds: {
|
||||
width: bounds.width,
|
||||
height: bounds.height,
|
||||
},
|
||||
};
|
||||
}
|
||||
119
frontend/src/graph/layout/text.ts
Normal file
119
frontend/src/graph/layout/text.ts
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import type { GraphNodeModel, GraphViewKind } from '../types';
|
||||
|
||||
interface TextLayoutConfig {
|
||||
primaryChars: number;
|
||||
secondaryChars: number;
|
||||
maxPrimaryLines: number;
|
||||
maxSecondaryLines: number;
|
||||
maxSublabelLines: number;
|
||||
}
|
||||
|
||||
export interface NodeTextLayout {
|
||||
labelLines: string[];
|
||||
detailLines: string[];
|
||||
sublabelLines: string[];
|
||||
lineCount: number;
|
||||
maxChars: number;
|
||||
}
|
||||
|
||||
const CONFIG: Record<GraphViewKind, TextLayoutConfig> = {
|
||||
callgraph: {
|
||||
primaryChars: 28,
|
||||
secondaryChars: 30,
|
||||
maxPrimaryLines: 2,
|
||||
maxSecondaryLines: 1,
|
||||
maxSublabelLines: 1,
|
||||
},
|
||||
cfg: {
|
||||
primaryChars: 30,
|
||||
secondaryChars: 34,
|
||||
maxPrimaryLines: 3,
|
||||
maxSecondaryLines: 2,
|
||||
maxSublabelLines: 1,
|
||||
},
|
||||
};
|
||||
|
||||
function normalizeWhitespace(value: string): string {
|
||||
return value.replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
|
||||
function chooseBreakIndex(value: string, maxChars: number): number {
|
||||
const probe = value.slice(0, maxChars + 1);
|
||||
const preferred = Math.max(
|
||||
probe.lastIndexOf(' '),
|
||||
probe.lastIndexOf('.'),
|
||||
probe.lastIndexOf(':'),
|
||||
probe.lastIndexOf('/'),
|
||||
probe.lastIndexOf('_'),
|
||||
probe.lastIndexOf('('),
|
||||
probe.lastIndexOf(')'),
|
||||
probe.lastIndexOf(','),
|
||||
);
|
||||
|
||||
if (preferred >= Math.floor(maxChars * 0.55)) {
|
||||
return preferred + 1;
|
||||
}
|
||||
|
||||
return maxChars;
|
||||
}
|
||||
|
||||
export function wrapGraphText(
|
||||
value: string | undefined,
|
||||
maxChars: number,
|
||||
): string[] {
|
||||
if (!value) return [];
|
||||
|
||||
const normalized = normalizeWhitespace(value);
|
||||
if (!normalized) return [];
|
||||
|
||||
const lines: string[] = [];
|
||||
let remaining = normalized;
|
||||
|
||||
while (remaining.length > maxChars) {
|
||||
const breakIndex = chooseBreakIndex(remaining, maxChars);
|
||||
lines.push(remaining.slice(0, breakIndex).trim());
|
||||
remaining = remaining.slice(breakIndex).trim();
|
||||
}
|
||||
|
||||
if (remaining) lines.push(remaining);
|
||||
return lines;
|
||||
}
|
||||
|
||||
function clampLines(lines: string[], maxLines: number): string[] {
|
||||
if (lines.length <= maxLines) return lines;
|
||||
|
||||
const visible = lines.slice(0, maxLines);
|
||||
const last = visible[maxLines - 1];
|
||||
if (!last) return visible;
|
||||
|
||||
visible[maxLines - 1] = last.endsWith('…') ? last : `${last.slice(0, -1)}…`;
|
||||
return visible;
|
||||
}
|
||||
|
||||
export function getNodeTextLayout(
|
||||
node: GraphNodeModel,
|
||||
viewKind: GraphViewKind,
|
||||
): NodeTextLayout {
|
||||
const config = CONFIG[viewKind];
|
||||
const labelLines = clampLines(
|
||||
wrapGraphText(node.label, config.primaryChars),
|
||||
config.maxPrimaryLines,
|
||||
);
|
||||
const detailLines = clampLines(
|
||||
wrapGraphText(node.detail, config.secondaryChars),
|
||||
config.maxSecondaryLines,
|
||||
);
|
||||
const sublabelLines = clampLines(
|
||||
wrapGraphText(node.sublabel, config.secondaryChars),
|
||||
config.maxSublabelLines,
|
||||
);
|
||||
const allLines = labelLines.concat(detailLines, sublabelLines);
|
||||
|
||||
return {
|
||||
labelLines,
|
||||
detailLines,
|
||||
sublabelLines,
|
||||
lineCount: allLines.length,
|
||||
maxChars: Math.max(...allLines.map((line) => line.length), 8),
|
||||
};
|
||||
}
|
||||
165
frontend/src/graph/reduction/cfgCompaction.ts
Normal file
165
frontend/src/graph/reduction/cfgCompaction.ts
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
import type {
|
||||
GraphCompactionResult,
|
||||
GraphEdgeModel,
|
||||
GraphModel,
|
||||
GraphNodeModel,
|
||||
} from '../types';
|
||||
|
||||
const CONTROL_KINDS = new Set([
|
||||
'Entry',
|
||||
'Exit',
|
||||
'If',
|
||||
'Loop',
|
||||
'Return',
|
||||
'Break',
|
||||
'Continue',
|
||||
]);
|
||||
|
||||
function buildLineRange(nodes: GraphNodeModel[]): string | undefined {
|
||||
const lines = nodes
|
||||
.map((node) => node.line)
|
||||
.filter((line): line is number => typeof line === 'number' && line > 0);
|
||||
|
||||
if (lines.length === 0) return undefined;
|
||||
const minLine = Math.min(...lines);
|
||||
const maxLine = Math.max(...lines);
|
||||
return minLine === maxLine ? `L${minLine}` : `L${minLine}-L${maxLine}`;
|
||||
}
|
||||
|
||||
export function compactGraph(graph: GraphModel): GraphCompactionResult {
|
||||
if (graph.kind !== 'cfg' || graph.nodes.length <= 3) {
|
||||
return { graph, compounds: new Map() };
|
||||
}
|
||||
|
||||
const seqOut = new Map<string, string>();
|
||||
const seqIn = new Map<string, string>();
|
||||
const seqOutCount = new Map<string, number>();
|
||||
const seqInCount = new Map<string, number>();
|
||||
const totalOutCount = new Map<string, number>();
|
||||
const totalInCount = new Map<string, number>();
|
||||
|
||||
for (const node of graph.nodes) {
|
||||
seqOutCount.set(node.key, 0);
|
||||
seqInCount.set(node.key, 0);
|
||||
totalOutCount.set(node.key, 0);
|
||||
totalInCount.set(node.key, 0);
|
||||
}
|
||||
|
||||
for (const edge of graph.edges) {
|
||||
totalOutCount.set(edge.source, (totalOutCount.get(edge.source) ?? 0) + 1);
|
||||
totalInCount.set(edge.target, (totalInCount.get(edge.target) ?? 0) + 1);
|
||||
|
||||
if (edge.kind !== 'Seq') continue;
|
||||
seqOutCount.set(edge.source, (seqOutCount.get(edge.source) ?? 0) + 1);
|
||||
seqInCount.set(edge.target, (seqInCount.get(edge.target) ?? 0) + 1);
|
||||
seqOut.set(edge.source, edge.target);
|
||||
seqIn.set(edge.target, edge.source);
|
||||
}
|
||||
|
||||
const nodeMap = new Map(graph.nodes.map((node) => [node.key, node]));
|
||||
const chainable = new Set<string>();
|
||||
|
||||
for (const node of graph.nodes) {
|
||||
if (CONTROL_KINDS.has(node.kind)) continue;
|
||||
|
||||
if (
|
||||
totalInCount.get(node.key) === 1 &&
|
||||
totalOutCount.get(node.key) === 1 &&
|
||||
seqInCount.get(node.key) === 1 &&
|
||||
seqOutCount.get(node.key) === 1
|
||||
) {
|
||||
chainable.add(node.key);
|
||||
}
|
||||
}
|
||||
|
||||
const consumed = new Set<string>();
|
||||
const chains: string[][] = [];
|
||||
|
||||
for (const node of graph.nodes) {
|
||||
if (consumed.has(node.key) || chainable.has(node.key)) continue;
|
||||
if (seqOutCount.get(node.key) !== 1) continue;
|
||||
|
||||
const next = seqOut.get(node.key);
|
||||
if (!next || !chainable.has(next)) continue;
|
||||
|
||||
const chain: string[] = [];
|
||||
let cursor: string | undefined = next;
|
||||
while (cursor && chainable.has(cursor) && !consumed.has(cursor)) {
|
||||
chain.push(cursor);
|
||||
consumed.add(cursor);
|
||||
cursor = seqOut.get(cursor);
|
||||
}
|
||||
|
||||
if (chain.length >= 2) chains.push(chain);
|
||||
}
|
||||
|
||||
if (chains.length === 0) return { graph, compounds: new Map() };
|
||||
|
||||
const removedKeys = new Set<string>();
|
||||
const compounds = new Map<string, string[]>();
|
||||
const compoundNodes: GraphNodeModel[] = [];
|
||||
const replacement = new Map<string, string>();
|
||||
|
||||
let nextCompoundIndex = 0;
|
||||
for (const chain of chains) {
|
||||
const members = chain
|
||||
.map((key) => nodeMap.get(key))
|
||||
.filter((member): member is GraphNodeModel => member != null);
|
||||
if (members.length !== chain.length) continue;
|
||||
|
||||
for (const key of chain) removedKeys.add(key);
|
||||
|
||||
const compoundKey = `compound:${nextCompoundIndex}`;
|
||||
nextCompoundIndex += 1;
|
||||
compounds.set(compoundKey, chain);
|
||||
for (const key of chain) replacement.set(key, compoundKey);
|
||||
|
||||
compoundNodes.push({
|
||||
key: compoundKey,
|
||||
rawId: -1,
|
||||
label: `${chain.length} statements`,
|
||||
kind: 'Compound',
|
||||
detail: buildLineRange(members),
|
||||
line: members[0].line,
|
||||
metadata: {
|
||||
isCompound: true,
|
||||
memberKeys: chain,
|
||||
memberRawIds: members.map((member) => member.rawId),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const nodes = graph.nodes
|
||||
.filter((node) => !removedKeys.has(node.key))
|
||||
.concat(compoundNodes);
|
||||
|
||||
const dedupe = new Set<string>();
|
||||
const edges: GraphEdgeModel[] = [];
|
||||
|
||||
for (const edge of graph.edges) {
|
||||
const source = replacement.get(edge.source) ?? edge.source;
|
||||
const target = replacement.get(edge.target) ?? edge.target;
|
||||
|
||||
if (source === target) continue;
|
||||
|
||||
const dedupeKey = `${source}:${target}:${edge.kind}`;
|
||||
if (dedupe.has(dedupeKey)) continue;
|
||||
dedupe.add(dedupeKey);
|
||||
|
||||
edges.push({
|
||||
...edge,
|
||||
key: `${edge.key}:compact:${source}:${target}`,
|
||||
source,
|
||||
target,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
graph: {
|
||||
kind: graph.kind,
|
||||
nodes,
|
||||
edges,
|
||||
},
|
||||
compounds,
|
||||
};
|
||||
}
|
||||
66
frontend/src/graph/reduction/neighborhood.ts
Normal file
66
frontend/src/graph/reduction/neighborhood.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import type { GraphModel, GraphNodeModel } from '../types';
|
||||
|
||||
export function collectSearchMatches(
|
||||
graph: GraphModel,
|
||||
query: string,
|
||||
limit = 200,
|
||||
): GraphNodeModel[] {
|
||||
const normalized = query.trim().toLowerCase();
|
||||
if (!normalized) return [];
|
||||
|
||||
const matches: GraphNodeModel[] = [];
|
||||
for (const node of graph.nodes) {
|
||||
const haystack = String(
|
||||
node.metadata?.searchText ?? node.label,
|
||||
).toLowerCase();
|
||||
if (!haystack.includes(normalized)) continue;
|
||||
matches.push(node);
|
||||
if (matches.length >= limit) break;
|
||||
}
|
||||
|
||||
return matches;
|
||||
}
|
||||
|
||||
export function extractNeighborhoodSubgraph(
|
||||
graph: GraphModel,
|
||||
centerKey: string | null,
|
||||
radius: number,
|
||||
): GraphModel {
|
||||
if (!centerKey || radius < 1) return graph;
|
||||
|
||||
const nodeKeys = new Set(graph.nodes.map((node) => node.key));
|
||||
if (!nodeKeys.has(centerKey)) return graph;
|
||||
|
||||
const adjacency = new Map<string, Set<string>>();
|
||||
for (const node of graph.nodes) adjacency.set(node.key, new Set());
|
||||
for (const edge of graph.edges) {
|
||||
adjacency.get(edge.source)?.add(edge.target);
|
||||
adjacency.get(edge.target)?.add(edge.source);
|
||||
}
|
||||
|
||||
const visible = new Set<string>([centerKey]);
|
||||
let frontier = new Set<string>([centerKey]);
|
||||
|
||||
for (let depth = 0; depth < radius; depth += 1) {
|
||||
const next = new Set<string>();
|
||||
for (const key of frontier) {
|
||||
const neighbors = adjacency.get(key);
|
||||
if (!neighbors) continue;
|
||||
for (const neighbor of neighbors) {
|
||||
if (visible.has(neighbor)) continue;
|
||||
visible.add(neighbor);
|
||||
next.add(neighbor);
|
||||
}
|
||||
}
|
||||
if (next.size === 0) break;
|
||||
frontier = next;
|
||||
}
|
||||
|
||||
return {
|
||||
kind: graph.kind,
|
||||
nodes: graph.nodes.filter((node) => visible.has(node.key)),
|
||||
edges: graph.edges.filter(
|
||||
(edge) => visible.has(edge.source) && visible.has(edge.target),
|
||||
),
|
||||
};
|
||||
}
|
||||
332
frontend/src/graph/rendering/sigma/SigmaGraph.tsx
Normal file
332
frontend/src/graph/rendering/sigma/SigmaGraph.tsx
Normal file
|
|
@ -0,0 +1,332 @@
|
|||
import type { MutableRefObject, ReactNode } from 'react';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import Sigma from 'sigma';
|
||||
import { GraphToolbar } from '../../components/GraphToolbar';
|
||||
import { readGraphPalette } from '../../styles';
|
||||
import type {
|
||||
GraphThemePalette,
|
||||
GraphViewKind,
|
||||
SigmaEdgeAttributes,
|
||||
SigmaNodeAttributes,
|
||||
} from '../../types';
|
||||
import { buildSigmaGraph } from './buildGraph';
|
||||
import { buildInteractionState, drawGraphOverlay } from './edgeOverlay';
|
||||
import type { LayoutGraphModel } from '../../types';
|
||||
|
||||
interface SigmaGraphProps {
|
||||
graph: LayoutGraphModel;
|
||||
viewKind: GraphViewKind;
|
||||
selectedNodeKey: string | null;
|
||||
onNodeClick?: (key: string) => void;
|
||||
searchMatchKeys?: Set<string>;
|
||||
toolbarExtras?: ReactNode;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const EMPTY_MATCHES = new Set<string>();
|
||||
const MIN_CAMERA_RATIO = 0.001;
|
||||
const NOOP_NODE_HOVER = () => {};
|
||||
|
||||
function zoomPercentage(
|
||||
renderer: Sigma<SigmaNodeAttributes, SigmaEdgeAttributes> | null,
|
||||
): number {
|
||||
if (!renderer) return 100;
|
||||
const ratio = renderer.getCamera().getState().ratio;
|
||||
return Math.max(10, Math.round(100 / ratio));
|
||||
}
|
||||
|
||||
function clampCameraRatio(
|
||||
renderer: Sigma<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
ratio: number,
|
||||
): number {
|
||||
const minCameraRatio = renderer.getSetting('minCameraRatio') ?? 0;
|
||||
const maxCameraRatio =
|
||||
renderer.getSetting('maxCameraRatio') ?? Number.POSITIVE_INFINITY;
|
||||
|
||||
return Math.min(maxCameraRatio, Math.max(minCameraRatio, ratio));
|
||||
}
|
||||
|
||||
function getReadableFocusRatio(
|
||||
renderer: Sigma<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
graph: LayoutGraphModel,
|
||||
nodeKey: string,
|
||||
): number {
|
||||
const currentRatio = renderer.getCamera().getState().ratio;
|
||||
const node = graph.nodes.find((entry) => entry.key === nodeKey);
|
||||
if (!node) return currentRatio;
|
||||
|
||||
const center = renderer.graphToViewport({ x: node.x, y: node.y });
|
||||
const rightEdge = renderer.graphToViewport({
|
||||
x: node.x + node.width / 2,
|
||||
y: node.y,
|
||||
});
|
||||
const bottomEdge = renderer.graphToViewport({
|
||||
x: node.x,
|
||||
y: node.y + node.height / 2,
|
||||
});
|
||||
const renderedWidth = Math.max(1, Math.abs(rightEdge.x - center.x) * 2);
|
||||
const renderedHeight = Math.max(1, Math.abs(bottomEdge.y - center.y) * 2);
|
||||
const totalLines =
|
||||
node.labelLines.length +
|
||||
node.detailLines.length +
|
||||
node.sublabelLines.length;
|
||||
const maxLineChars = Math.max(
|
||||
1,
|
||||
...node.labelLines.map((line) => line.length),
|
||||
...node.detailLines.map((line) => line.length),
|
||||
...node.sublabelLines.map((line) => line.length),
|
||||
);
|
||||
const { width, height } = renderer.getDimensions();
|
||||
const desiredWidth = Math.min(
|
||||
width * 0.4,
|
||||
Math.max(170, maxLineChars * 9.5 + 40),
|
||||
);
|
||||
const desiredHeight = Math.min(
|
||||
height * 0.28,
|
||||
Math.max(72, totalLines * 16 + (node.badges?.length ? 18 : 12)),
|
||||
);
|
||||
const widthRatio = currentRatio * (renderedWidth / desiredWidth);
|
||||
const heightRatio = currentRatio * (renderedHeight / desiredHeight);
|
||||
const targetRatio = Math.min(widthRatio, heightRatio, currentRatio);
|
||||
|
||||
return clampCameraRatio(renderer, Math.max(MIN_CAMERA_RATIO, targetRatio));
|
||||
}
|
||||
|
||||
function createNodeReducer(
|
||||
interactionRef: MutableRefObject<ReturnType<typeof buildInteractionState>>,
|
||||
) {
|
||||
return (nodeKey: string, data: SigmaNodeAttributes) => {
|
||||
const interaction = interactionRef.current;
|
||||
const isFocused =
|
||||
interaction.selectedNodeKey === nodeKey ||
|
||||
interaction.hoveredNodeKey === nodeKey ||
|
||||
interaction.highlightedNodeKeys.has(nodeKey) ||
|
||||
interaction.searchMatchKeys.has(nodeKey);
|
||||
|
||||
return {
|
||||
...data,
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
size: data.size,
|
||||
highlighted: false,
|
||||
forceLabel: false,
|
||||
zIndex: isFocused ? 2 : 1,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function SigmaGraph({
|
||||
graph,
|
||||
viewKind,
|
||||
selectedNodeKey,
|
||||
onNodeClick,
|
||||
searchMatchKeys = EMPTY_MATCHES,
|
||||
toolbarExtras,
|
||||
loading = false,
|
||||
}: SigmaGraphProps) {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const rendererRef = useRef<Sigma<
|
||||
SigmaNodeAttributes,
|
||||
SigmaEdgeAttributes
|
||||
> | null>(null);
|
||||
const overlayCanvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const [hoveredNodeKey, setHoveredNodeKey] = useState<string | null>(null);
|
||||
const [zoom, setZoom] = useState(100);
|
||||
const palette = useMemo(() => readGraphPalette(), []);
|
||||
const renderGraph = useMemo(
|
||||
() => buildSigmaGraph(graph, palette, false),
|
||||
[graph, palette],
|
||||
);
|
||||
const overlayGraph = useMemo(
|
||||
() => buildSigmaGraph(graph, palette, true),
|
||||
[graph, palette],
|
||||
);
|
||||
const interactionRef = useRef(
|
||||
buildInteractionState(
|
||||
overlayGraph,
|
||||
selectedNodeKey,
|
||||
hoveredNodeKey,
|
||||
searchMatchKeys,
|
||||
),
|
||||
);
|
||||
|
||||
interactionRef.current = buildInteractionState(
|
||||
overlayGraph,
|
||||
selectedNodeKey,
|
||||
hoveredNodeKey,
|
||||
searchMatchKeys,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const renderer = new Sigma<SigmaNodeAttributes, SigmaEdgeAttributes>(
|
||||
renderGraph,
|
||||
container,
|
||||
{
|
||||
allowInvalidContainer: true,
|
||||
autoCenter: true,
|
||||
autoRescale: true,
|
||||
defaultEdgeType: 'arrow',
|
||||
defaultDrawNodeHover: NOOP_NODE_HOVER,
|
||||
enableEdgeEvents: false,
|
||||
renderEdgeLabels: false,
|
||||
renderLabels: false,
|
||||
hideLabelsOnMove: true,
|
||||
labelDensity: viewKind === 'callgraph' ? 0.85 : 0.95,
|
||||
labelRenderedSizeThreshold: viewKind === 'callgraph' ? 10 : 8,
|
||||
minCameraRatio: MIN_CAMERA_RATIO,
|
||||
maxCameraRatio: 4,
|
||||
nodeReducer: createNodeReducer(interactionRef),
|
||||
edgeReducer: () => ({
|
||||
hidden: true,
|
||||
}),
|
||||
stagePadding: 24,
|
||||
zIndex: true,
|
||||
},
|
||||
);
|
||||
|
||||
rendererRef.current = renderer;
|
||||
setZoom(zoomPercentage(renderer));
|
||||
|
||||
const overlayCanvas = renderer.createCanvas('graphOverlay', {
|
||||
afterLayer: 'edges',
|
||||
style: {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
});
|
||||
overlayCanvasRef.current = overlayCanvas;
|
||||
|
||||
const redraw = () => {
|
||||
if (!overlayCanvasRef.current || !rendererRef.current) return;
|
||||
drawGraphOverlay(
|
||||
overlayCanvasRef.current,
|
||||
rendererRef.current,
|
||||
overlayGraph,
|
||||
viewKind,
|
||||
palette,
|
||||
interactionRef.current,
|
||||
);
|
||||
};
|
||||
|
||||
const handleClickNode = ({ node }: { node: string }) => {
|
||||
onNodeClick?.(node);
|
||||
const nodeDisplay = renderer.getNodeDisplayData(node);
|
||||
if (!nodeDisplay) return;
|
||||
|
||||
const camera = renderer.getCamera();
|
||||
const targetRatio = getReadableFocusRatio(renderer, graph, node);
|
||||
void camera.animate(
|
||||
{
|
||||
x: nodeDisplay.x,
|
||||
y: nodeDisplay.y,
|
||||
ratio: targetRatio,
|
||||
},
|
||||
{ duration: 240 },
|
||||
);
|
||||
};
|
||||
|
||||
const handleEnterNode = ({ node }: { node: string }) => {
|
||||
setHoveredNodeKey(node);
|
||||
};
|
||||
|
||||
const handleLeaveNode = () => {
|
||||
setHoveredNodeKey(null);
|
||||
};
|
||||
|
||||
const handleAfterRender = () => {
|
||||
setZoom(zoomPercentage(renderer));
|
||||
redraw();
|
||||
};
|
||||
|
||||
renderer.on('clickNode', handleClickNode);
|
||||
renderer.on('enterNode', handleEnterNode);
|
||||
renderer.on('leaveNode', handleLeaveNode);
|
||||
renderer.on('afterRender', handleAfterRender);
|
||||
|
||||
const resizeObserver =
|
||||
typeof ResizeObserver === 'undefined'
|
||||
? null
|
||||
: new ResizeObserver(() => {
|
||||
renderer.resize();
|
||||
renderer.refresh({ schedule: true });
|
||||
});
|
||||
resizeObserver?.observe(container);
|
||||
|
||||
redraw();
|
||||
|
||||
return () => {
|
||||
resizeObserver?.disconnect();
|
||||
renderer.off('clickNode', handleClickNode);
|
||||
renderer.off('enterNode', handleEnterNode);
|
||||
renderer.off('leaveNode', handleLeaveNode);
|
||||
renderer.off('afterRender', handleAfterRender);
|
||||
if (overlayCanvasRef.current) {
|
||||
renderer.killLayer('graphOverlay');
|
||||
overlayCanvasRef.current = null;
|
||||
}
|
||||
renderer.kill();
|
||||
rendererRef.current = null;
|
||||
};
|
||||
}, [graph, onNodeClick, overlayGraph, palette, renderGraph, viewKind]);
|
||||
|
||||
useEffect(() => {
|
||||
const renderer = rendererRef.current;
|
||||
if (!renderer) return;
|
||||
renderer.refresh({ schedule: true, skipIndexation: true });
|
||||
}, [hoveredNodeKey, overlayGraph, searchMatchKeys, selectedNodeKey]);
|
||||
|
||||
const handleZoomIn = () => {
|
||||
void rendererRef.current?.getCamera().animatedZoom();
|
||||
};
|
||||
|
||||
const handleZoomOut = () => {
|
||||
void rendererRef.current?.getCamera().animatedUnzoom();
|
||||
};
|
||||
|
||||
const handleFitGraph = () => {
|
||||
void rendererRef.current?.getCamera().animatedReset();
|
||||
};
|
||||
|
||||
const handleFocusSelection = () => {
|
||||
if (!selectedNodeKey) return;
|
||||
const renderer = rendererRef.current;
|
||||
if (!renderer) return;
|
||||
const nodeDisplay = renderer.getNodeDisplayData(selectedNodeKey);
|
||||
if (!nodeDisplay) return;
|
||||
const camera = renderer.getCamera();
|
||||
const targetRatio = getReadableFocusRatio(renderer, graph, selectedNodeKey);
|
||||
void camera.animate(
|
||||
{ x: nodeDisplay.x, y: nodeDisplay.y, ratio: targetRatio },
|
||||
{ duration: 240 },
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="graph-renderer-container">
|
||||
<GraphToolbar
|
||||
zoomPercentage={zoom}
|
||||
onZoomIn={handleZoomIn}
|
||||
onZoomOut={handleZoomOut}
|
||||
onFitGraph={handleFitGraph}
|
||||
onFocusSelection={handleFocusSelection}
|
||||
focusDisabled={!selectedNodeKey}
|
||||
extras={toolbarExtras}
|
||||
status={
|
||||
loading ? (
|
||||
<span className="graph-toolbar-pill">Layouting…</span>
|
||||
) : (
|
||||
<span className="graph-toolbar-pill">
|
||||
{graph.nodes.length} nodes
|
||||
</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className="graph-surface" ref={containerRef}>
|
||||
{loading ? (
|
||||
<div className="graph-loading-overlay">Computing ELK layout…</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
frontend/src/graph/rendering/sigma/buildGraph.ts
Normal file
53
frontend/src/graph/rendering/sigma/buildGraph.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { MultiDirectedGraph } from 'graphology';
|
||||
import { getEdgeStyle, getNodeStyle } from '../../styles';
|
||||
import type {
|
||||
GraphThemePalette,
|
||||
LayoutGraphModel,
|
||||
SigmaEdgeAttributes,
|
||||
SigmaNodeAttributes,
|
||||
} from '../../types';
|
||||
|
||||
function addNodes(
|
||||
sigmaGraph: MultiDirectedGraph<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
graph: LayoutGraphModel,
|
||||
palette: GraphThemePalette,
|
||||
) {
|
||||
for (const node of graph.nodes) {
|
||||
const style = getNodeStyle(node.kind, graph.kind, node.metadata, palette);
|
||||
sigmaGraph.addNode(node.key, {
|
||||
...node,
|
||||
x: node.x,
|
||||
y: node.y,
|
||||
size: node.sigmaSize,
|
||||
color: style.fill,
|
||||
hidden: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function buildSigmaGraph(
|
||||
graph: LayoutGraphModel,
|
||||
palette: GraphThemePalette,
|
||||
includeEdges = true,
|
||||
): MultiDirectedGraph<SigmaNodeAttributes, SigmaEdgeAttributes> {
|
||||
const sigmaGraph = new MultiDirectedGraph<
|
||||
SigmaNodeAttributes,
|
||||
SigmaEdgeAttributes
|
||||
>();
|
||||
|
||||
addNodes(sigmaGraph, graph, palette);
|
||||
|
||||
if (includeEdges) {
|
||||
for (const edge of graph.edges) {
|
||||
const style = getEdgeStyle(edge.kind, graph.kind, palette);
|
||||
sigmaGraph.addDirectedEdgeWithKey(edge.key, edge.source, edge.target, {
|
||||
...edge,
|
||||
color: style.color,
|
||||
size: style.width,
|
||||
hidden: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return sigmaGraph;
|
||||
}
|
||||
656
frontend/src/graph/rendering/sigma/edgeOverlay.ts
Normal file
656
frontend/src/graph/rendering/sigma/edgeOverlay.ts
Normal file
|
|
@ -0,0 +1,656 @@
|
|||
import type Sigma from 'sigma';
|
||||
import type { MultiDirectedGraph } from 'graphology';
|
||||
import { getEdgeStyle, getNodeStyle, withAlpha } from '../../styles';
|
||||
import type {
|
||||
GraphThemePalette,
|
||||
GraphViewKind,
|
||||
SigmaEdgeAttributes,
|
||||
SigmaNodeAttributes,
|
||||
} from '../../types';
|
||||
|
||||
export interface GraphInteractionState {
|
||||
activeNodeKey: string | null;
|
||||
hoveredNodeKey: string | null;
|
||||
selectedNodeKey: string | null;
|
||||
highlightedNodeKeys: Set<string>;
|
||||
highlightedEdgeKeys: Set<string>;
|
||||
searchMatchKeys: Set<string>;
|
||||
}
|
||||
|
||||
const MIN_NODE_TEXT_WIDTH = 58;
|
||||
const MIN_NODE_TEXT_HEIGHT = 18;
|
||||
const DETAIL_EDGE_LABEL_KINDS = new Set(['True', 'False', 'Back', 'Exception']);
|
||||
|
||||
export function buildInteractionState(
|
||||
graph: MultiDirectedGraph<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
selectedNodeKey: string | null,
|
||||
hoveredNodeKey: string | null,
|
||||
searchMatchKeys: Set<string>,
|
||||
): GraphInteractionState {
|
||||
const activeNodeKey = hoveredNodeKey ?? selectedNodeKey;
|
||||
const highlightedNodeKeys = new Set<string>(searchMatchKeys);
|
||||
const highlightedEdgeKeys = new Set<string>();
|
||||
|
||||
if (selectedNodeKey) highlightedNodeKeys.add(selectedNodeKey);
|
||||
if (hoveredNodeKey) highlightedNodeKeys.add(hoveredNodeKey);
|
||||
|
||||
if (activeNodeKey && graph.hasNode(activeNodeKey)) {
|
||||
highlightedNodeKeys.add(activeNodeKey);
|
||||
for (const neighbor of graph.neighbors(activeNodeKey)) {
|
||||
highlightedNodeKeys.add(neighbor);
|
||||
}
|
||||
for (const edge of graph.edges(activeNodeKey)) {
|
||||
highlightedEdgeKeys.add(edge);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
activeNodeKey,
|
||||
hoveredNodeKey,
|
||||
selectedNodeKey,
|
||||
highlightedNodeKeys,
|
||||
highlightedEdgeKeys,
|
||||
searchMatchKeys,
|
||||
};
|
||||
}
|
||||
|
||||
function setCanvasSize(
|
||||
canvas: HTMLCanvasElement,
|
||||
renderer: Sigma<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
) {
|
||||
const { width, height } = renderer.getDimensions();
|
||||
const pixelRatio = window.devicePixelRatio || 1;
|
||||
const nextWidth = Math.max(1, Math.floor(width * pixelRatio));
|
||||
const nextHeight = Math.max(1, Math.floor(height * pixelRatio));
|
||||
|
||||
if (canvas.width !== nextWidth) canvas.width = nextWidth;
|
||||
if (canvas.height !== nextHeight) canvas.height = nextHeight;
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
if (!context) return null;
|
||||
context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||
return context;
|
||||
}
|
||||
|
||||
function parseColor(color: string): [number, number, number] | null {
|
||||
if (color.startsWith('#')) {
|
||||
const normalized = color.slice(1);
|
||||
const expanded =
|
||||
normalized.length === 3
|
||||
? normalized
|
||||
.split('')
|
||||
.map((segment) => segment + segment)
|
||||
.join('')
|
||||
: normalized;
|
||||
const value = Number.parseInt(expanded, 16);
|
||||
if (Number.isNaN(value)) return null;
|
||||
return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
|
||||
}
|
||||
|
||||
const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
|
||||
if (!rgbaMatch) return null;
|
||||
const parts = rgbaMatch[1]
|
||||
.split(',')
|
||||
.slice(0, 3)
|
||||
.map((part) => part.trim());
|
||||
if (parts.length !== 3) return null;
|
||||
const rgb = parts.map((part) => Number.parseFloat(part));
|
||||
if (rgb.some((part) => Number.isNaN(part))) return null;
|
||||
return [rgb[0], rgb[1], rgb[2]];
|
||||
}
|
||||
|
||||
function isLightColor(color: string): boolean {
|
||||
const rgb = parseColor(color);
|
||||
if (!rgb) return false;
|
||||
const [red, green, blue] = rgb.map((channel) => channel / 255);
|
||||
const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
|
||||
return luminance > 0.68;
|
||||
}
|
||||
|
||||
function drawRoundedRect(
|
||||
context: CanvasRenderingContext2D,
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
radius: number,
|
||||
) {
|
||||
drawLabelBackdrop(context, x, y, width, height, radius);
|
||||
}
|
||||
|
||||
function drawDoubleRect(
|
||||
context: CanvasRenderingContext2D,
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
radius: number,
|
||||
) {
|
||||
drawRoundedRect(context, x, y, width, height, radius);
|
||||
drawRoundedRect(context, x + 4, y + 4, width - 8, height - 8, radius - 2);
|
||||
}
|
||||
|
||||
function drawTerminalRect(
|
||||
context: CanvasRenderingContext2D,
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
) {
|
||||
drawRoundedRect(context, x, y, width, height, height / 2);
|
||||
}
|
||||
|
||||
function getViewportRect(
|
||||
renderer: Sigma<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
node: SigmaNodeAttributes,
|
||||
) {
|
||||
const center = renderer.graphToViewport({ x: node.x, y: node.y });
|
||||
const xExtent = renderer.graphToViewport({
|
||||
x: node.x + node.width / 2,
|
||||
y: node.y,
|
||||
});
|
||||
const yExtent = renderer.graphToViewport({
|
||||
x: node.x,
|
||||
y: node.y + node.height / 2,
|
||||
});
|
||||
|
||||
const width = Math.max(8, Math.abs(xExtent.x - center.x) * 2);
|
||||
const height = Math.max(8, Math.abs(yExtent.y - center.y) * 2);
|
||||
|
||||
return {
|
||||
x: center.x - width / 2,
|
||||
y: center.y - height / 2,
|
||||
width,
|
||||
height,
|
||||
centerX: center.x,
|
||||
centerY: center.y,
|
||||
};
|
||||
}
|
||||
|
||||
function drawNodeBadges(
|
||||
context: CanvasRenderingContext2D,
|
||||
node: SigmaNodeAttributes,
|
||||
rect: { x: number; y: number; width: number; height: number },
|
||||
palette: GraphThemePalette,
|
||||
fill: string,
|
||||
) {
|
||||
if (!node.badges?.length || rect.width < 90 || rect.height < 34) return;
|
||||
|
||||
const badges = node.badges.slice(0, 3);
|
||||
const badgeHeight = 12;
|
||||
const gap = 4;
|
||||
const totalWidth = badges.reduce((sum, badge) => {
|
||||
const badgeWidth = Math.min(52, Math.max(22, badge.length * 5.2 + 10));
|
||||
return sum + badgeWidth;
|
||||
}, 0);
|
||||
const fullWidth = totalWidth + gap * (badges.length - 1);
|
||||
let cursor = rect.x + (rect.width - fullWidth) / 2;
|
||||
const y = rect.y + rect.height - badgeHeight - 4;
|
||||
const textColor = isLightColor(fill) ? palette.text : '#ffffff';
|
||||
|
||||
context.save();
|
||||
context.font = '600 8px var(--font-mono, "SF Mono", monospace)';
|
||||
context.textAlign = 'center';
|
||||
context.textBaseline = 'middle';
|
||||
|
||||
for (const badge of badges) {
|
||||
const badgeWidth = Math.min(52, Math.max(22, badge.length * 5.2 + 10));
|
||||
context.fillStyle = withAlpha(palette.background, 0.24);
|
||||
context.strokeStyle = withAlpha(textColor, 0.18);
|
||||
context.lineWidth = 0.8;
|
||||
drawRoundedRect(context, cursor, y, badgeWidth, badgeHeight, 4);
|
||||
context.fill();
|
||||
context.stroke();
|
||||
|
||||
context.fillStyle = textColor;
|
||||
context.fillText(badge, cursor + badgeWidth / 2, y + badgeHeight / 2 + 0.5);
|
||||
cursor += badgeWidth + gap;
|
||||
}
|
||||
|
||||
context.restore();
|
||||
}
|
||||
|
||||
function drawNodeText(
|
||||
context: CanvasRenderingContext2D,
|
||||
node: SigmaNodeAttributes,
|
||||
rect: { x: number; y: number; width: number; height: number },
|
||||
palette: GraphThemePalette,
|
||||
fill: string,
|
||||
) {
|
||||
const textLines = node.labelLines
|
||||
.map((text) => ({ text, secondary: false }))
|
||||
.concat(node.detailLines.map((text) => ({ text, secondary: true })))
|
||||
.concat(node.sublabelLines.map((text) => ({ text, secondary: true })));
|
||||
|
||||
if (textLines.length === 0) return;
|
||||
|
||||
const availableHeight = rect.height - (node.badges?.length ? 18 : 10);
|
||||
const lineBudget = Math.max(1, Math.floor(availableHeight / 11));
|
||||
const visibleLines = textLines.slice(0, lineBudget);
|
||||
if (
|
||||
rect.width < MIN_NODE_TEXT_WIDTH ||
|
||||
rect.height < MIN_NODE_TEXT_HEIGHT ||
|
||||
visibleLines.length === 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const primaryFont = Math.max(
|
||||
8,
|
||||
Math.min(12.5, rect.height / (visibleLines.length + 1.6)),
|
||||
);
|
||||
const secondaryFont = Math.max(7, primaryFont - 1.5);
|
||||
const lineHeight = primaryFont + 2;
|
||||
const blockHeight = visibleLines.reduce(
|
||||
(sum, line) => sum + (line.secondary ? secondaryFont + 2 : lineHeight),
|
||||
0,
|
||||
);
|
||||
const textColor = isLightColor(fill) ? palette.text : '#ffffff';
|
||||
const secondaryColor = isLightColor(fill)
|
||||
? palette.textSecondary
|
||||
: withAlpha(textColor, 0.76);
|
||||
let cursorY = rect.y + (availableHeight - blockHeight) / 2 + primaryFont;
|
||||
|
||||
context.save();
|
||||
context.beginPath();
|
||||
drawRoundedRect(context, rect.x, rect.y, rect.width, rect.height, 8);
|
||||
context.clip();
|
||||
context.textAlign = 'center';
|
||||
context.textBaseline = 'alphabetic';
|
||||
|
||||
for (const line of visibleLines) {
|
||||
const fontSize = line.secondary ? secondaryFont : primaryFont;
|
||||
context.font = `${line.secondary ? '500' : '600'} ${fontSize}px var(--font-mono, "SF Mono", monospace)`;
|
||||
context.fillStyle = line.secondary ? secondaryColor : textColor;
|
||||
context.fillText(line.text, rect.x + rect.width / 2, cursorY);
|
||||
cursorY += line.secondary ? secondaryFont + 2 : lineHeight;
|
||||
}
|
||||
|
||||
context.restore();
|
||||
}
|
||||
|
||||
function drawNodes(
|
||||
context: CanvasRenderingContext2D,
|
||||
renderer: Sigma<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
graph: MultiDirectedGraph<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
viewKind: GraphViewKind,
|
||||
palette: GraphThemePalette,
|
||||
interaction: GraphInteractionState,
|
||||
) {
|
||||
const nodes = graph
|
||||
.mapNodes((key, attributes) => ({
|
||||
key,
|
||||
attributes,
|
||||
}))
|
||||
.sort((left, right) => {
|
||||
const leftPriority =
|
||||
interaction.selectedNodeKey === left.key
|
||||
? 3
|
||||
: interaction.hoveredNodeKey === left.key
|
||||
? 2
|
||||
: interaction.highlightedNodeKeys.has(left.key)
|
||||
? 1
|
||||
: 0;
|
||||
const rightPriority =
|
||||
interaction.selectedNodeKey === right.key
|
||||
? 3
|
||||
: interaction.hoveredNodeKey === right.key
|
||||
? 2
|
||||
: interaction.highlightedNodeKeys.has(right.key)
|
||||
? 1
|
||||
: 0;
|
||||
return leftPriority - rightPriority;
|
||||
});
|
||||
|
||||
for (const { key, attributes } of nodes) {
|
||||
const style = getNodeStyle(
|
||||
attributes.kind,
|
||||
viewKind,
|
||||
attributes.metadata,
|
||||
palette,
|
||||
);
|
||||
const rect = getViewportRect(renderer, attributes);
|
||||
const isSelected = interaction.selectedNodeKey === key;
|
||||
const isHovered = interaction.hoveredNodeKey === key;
|
||||
const isHighlighted = interaction.highlightedNodeKeys.has(key);
|
||||
const isSearchMatch = interaction.searchMatchKeys.has(key);
|
||||
const shouldDim =
|
||||
Boolean(interaction.activeNodeKey) &&
|
||||
!isSelected &&
|
||||
!isHighlighted &&
|
||||
!isSearchMatch;
|
||||
|
||||
let fill = style.fill;
|
||||
let stroke = style.stroke;
|
||||
const opacity = shouldDim ? 0.14 : 1;
|
||||
|
||||
if (isSelected) {
|
||||
fill = style.accentFill;
|
||||
stroke = withAlpha(palette.accent, 0.96);
|
||||
} else if (isHovered || isHighlighted || isSearchMatch) {
|
||||
fill = style.neighborFill;
|
||||
stroke = withAlpha(style.accentFill, 0.85);
|
||||
}
|
||||
|
||||
context.save();
|
||||
context.globalAlpha = opacity;
|
||||
|
||||
if (isSelected) {
|
||||
context.strokeStyle = withAlpha(palette.accent, 0.32);
|
||||
context.lineWidth = 6;
|
||||
drawRoundedRect(
|
||||
context,
|
||||
rect.x - 4,
|
||||
rect.y - 4,
|
||||
rect.width + 8,
|
||||
rect.height + 8,
|
||||
12,
|
||||
);
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
context.fillStyle = fill;
|
||||
context.strokeStyle = stroke;
|
||||
context.lineWidth = isSelected
|
||||
? style.strokeWidth + 0.8
|
||||
: style.strokeWidth;
|
||||
|
||||
if (style.shape === 'double') {
|
||||
drawDoubleRect(context, rect.x, rect.y, rect.width, rect.height, 8);
|
||||
} else if (style.shape === 'terminal') {
|
||||
drawTerminalRect(context, rect.x, rect.y, rect.width, rect.height);
|
||||
} else {
|
||||
drawRoundedRect(context, rect.x, rect.y, rect.width, rect.height, 8);
|
||||
}
|
||||
context.fill();
|
||||
context.stroke();
|
||||
|
||||
drawNodeText(context, attributes, rect, palette, fill);
|
||||
drawNodeBadges(context, attributes, rect, palette, fill);
|
||||
context.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function drawArrow(
|
||||
context: CanvasRenderingContext2D,
|
||||
from: { x: number; y: number },
|
||||
to: { x: number; y: number },
|
||||
color: string,
|
||||
size: number,
|
||||
) {
|
||||
const angle = Math.atan2(to.y - from.y, to.x - from.x);
|
||||
const length = Math.max(5, size * 2.6);
|
||||
|
||||
context.save();
|
||||
context.translate(to.x, to.y);
|
||||
context.rotate(angle);
|
||||
context.fillStyle = color;
|
||||
context.beginPath();
|
||||
context.moveTo(0, 0);
|
||||
context.lineTo(-length, length * 0.45);
|
||||
context.lineTo(-length, -length * 0.45);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
context.restore();
|
||||
}
|
||||
|
||||
function drawLabelBackdrop(
|
||||
context: CanvasRenderingContext2D,
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
radius: number,
|
||||
) {
|
||||
const clampedRadius = Math.min(radius, width / 2, height / 2);
|
||||
context.beginPath();
|
||||
context.moveTo(x + clampedRadius, y);
|
||||
context.lineTo(x + width - clampedRadius, y);
|
||||
context.quadraticCurveTo(x + width, y, x + width, y + clampedRadius);
|
||||
context.lineTo(x + width, y + height - clampedRadius);
|
||||
context.quadraticCurveTo(
|
||||
x + width,
|
||||
y + height,
|
||||
x + width - clampedRadius,
|
||||
y + height,
|
||||
);
|
||||
context.lineTo(x + clampedRadius, y + height);
|
||||
context.quadraticCurveTo(x, y + height, x, y + height - clampedRadius);
|
||||
context.lineTo(x, y + clampedRadius);
|
||||
context.quadraticCurveTo(x, y, x + clampedRadius, y);
|
||||
context.closePath();
|
||||
}
|
||||
|
||||
function resolveOpacity(
|
||||
interaction: GraphInteractionState,
|
||||
edgeKey: string,
|
||||
source: string,
|
||||
target: string,
|
||||
): number {
|
||||
if (!interaction.activeNodeKey) return 0.8;
|
||||
if (interaction.highlightedEdgeKeys.has(edgeKey)) return 0.96;
|
||||
if (
|
||||
interaction.highlightedNodeKeys.has(source) &&
|
||||
interaction.highlightedNodeKeys.has(target)
|
||||
) {
|
||||
return 0.7;
|
||||
}
|
||||
return 0.14;
|
||||
}
|
||||
|
||||
function resolveLineWidth(
|
||||
baseWidth: number,
|
||||
interaction: GraphInteractionState,
|
||||
edgeKey: string,
|
||||
): number {
|
||||
if (interaction.highlightedEdgeKeys.has(edgeKey)) return baseWidth + 0.8;
|
||||
return baseWidth;
|
||||
}
|
||||
|
||||
function shouldDrawLabel(
|
||||
renderer: Sigma<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
graph: MultiDirectedGraph<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
edge: SigmaEdgeAttributes,
|
||||
interaction: GraphInteractionState,
|
||||
graphOrder: number,
|
||||
source: string,
|
||||
target: string,
|
||||
): boolean {
|
||||
if (!edge.label) return false;
|
||||
if (interaction.highlightedEdgeKeys.has(edge.key)) return true;
|
||||
|
||||
if (DETAIL_EDGE_LABEL_KINDS.has(edge.kind)) {
|
||||
const sourceNode = graph.getNodeAttributes(source);
|
||||
const targetNode = graph.getNodeAttributes(target);
|
||||
const sourceRect = sourceNode
|
||||
? getViewportRect(renderer, sourceNode)
|
||||
: undefined;
|
||||
const targetRect = targetNode
|
||||
? getViewportRect(renderer, targetNode)
|
||||
: undefined;
|
||||
const nearReadableNode = [sourceRect, targetRect].some(
|
||||
(rect) =>
|
||||
rect != null &&
|
||||
rect.width >= MIN_NODE_TEXT_WIDTH &&
|
||||
rect.height >= MIN_NODE_TEXT_HEIGHT,
|
||||
);
|
||||
|
||||
return nearReadableNode;
|
||||
}
|
||||
|
||||
if (graphOrder <= 80) return true;
|
||||
return renderer.getCamera().getState().ratio < 0.42;
|
||||
}
|
||||
|
||||
function measureSegmentLength(
|
||||
start: { x: number; y: number },
|
||||
end: { x: number; y: number },
|
||||
): number {
|
||||
return Math.hypot(end.x - start.x, end.y - start.y);
|
||||
}
|
||||
|
||||
function getLabelPlacement(
|
||||
points: Array<{ x: number; y: number }>,
|
||||
edgeKind: string,
|
||||
) {
|
||||
if (points.length < 2) return null;
|
||||
|
||||
const totalLength = points.reduce((sum, point, index) => {
|
||||
if (index === 0) return sum;
|
||||
return sum + measureSegmentLength(points[index - 1]!, point);
|
||||
}, 0);
|
||||
if (totalLength <= 0) return points[0] ?? null;
|
||||
|
||||
const alongPathRatio =
|
||||
edgeKind === 'True' || edgeKind === 'False' ? 0.24 : 0.5;
|
||||
const targetDistance = totalLength * alongPathRatio;
|
||||
let traversed = 0;
|
||||
|
||||
for (let index = 1; index < points.length; index += 1) {
|
||||
const start = points[index - 1]!;
|
||||
const end = points[index]!;
|
||||
const segmentLength = measureSegmentLength(start, end);
|
||||
if (segmentLength <= 0) continue;
|
||||
|
||||
if (
|
||||
traversed + segmentLength >= targetDistance ||
|
||||
index === points.length - 1
|
||||
) {
|
||||
const distanceOnSegment = Math.max(0, targetDistance - traversed);
|
||||
const t = Math.min(1, distanceOnSegment / segmentLength);
|
||||
const directionX = (end.x - start.x) / segmentLength;
|
||||
const directionY = (end.y - start.y) / segmentLength;
|
||||
const normalX = -directionY;
|
||||
const normalY = directionX;
|
||||
const offset = edgeKind === 'False' ? -10 : edgeKind === 'True' ? 10 : 8;
|
||||
|
||||
return {
|
||||
x: start.x + (end.x - start.x) * t + normalX * offset,
|
||||
y: start.y + (end.y - start.y) * t + normalY * offset,
|
||||
};
|
||||
}
|
||||
|
||||
traversed += segmentLength;
|
||||
}
|
||||
|
||||
return points[Math.floor(points.length / 2)] ?? null;
|
||||
}
|
||||
|
||||
interface EdgeLabelInstruction {
|
||||
color: string;
|
||||
strokeColor: string;
|
||||
text: string;
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
function drawEdgeLabels(
|
||||
context: CanvasRenderingContext2D,
|
||||
palette: GraphThemePalette,
|
||||
labels: EdgeLabelInstruction[],
|
||||
) {
|
||||
for (const label of labels) {
|
||||
const textWidth = Math.max(18, label.text.length * 6.4);
|
||||
const rectX = label.x - textWidth / 2 - 5;
|
||||
const rectY = label.y - 10;
|
||||
|
||||
context.fillStyle = withAlpha(palette.background, 0.92);
|
||||
context.strokeStyle = label.strokeColor;
|
||||
context.lineWidth = 1;
|
||||
drawLabelBackdrop(context, rectX, rectY, textWidth + 10, 18, 4);
|
||||
context.fill();
|
||||
context.stroke();
|
||||
|
||||
context.fillStyle = label.color;
|
||||
context.font = `600 10px var(--font-mono, "SF Mono", monospace)`;
|
||||
context.textAlign = 'center';
|
||||
context.textBaseline = 'middle';
|
||||
context.fillText(label.text, label.x, label.y - 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
export function drawGraphOverlay(
|
||||
canvas: HTMLCanvasElement,
|
||||
renderer: Sigma<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
graph: MultiDirectedGraph<SigmaNodeAttributes, SigmaEdgeAttributes>,
|
||||
viewKind: GraphViewKind,
|
||||
palette: GraphThemePalette,
|
||||
interaction: GraphInteractionState,
|
||||
) {
|
||||
const context = setCanvasSize(canvas, renderer);
|
||||
if (!context) return;
|
||||
|
||||
const { width, height } = renderer.getDimensions();
|
||||
context.clearRect(0, 0, width, height);
|
||||
context.lineCap = 'round';
|
||||
context.lineJoin = 'round';
|
||||
const edgeLabels: EdgeLabelInstruction[] = [];
|
||||
|
||||
graph.forEachEdge((edgeKey, edge, source, target) => {
|
||||
const style = getEdgeStyle(edge.kind, viewKind, palette);
|
||||
const points =
|
||||
edge.route.length > 1
|
||||
? edge.route.map((point) => renderer.graphToViewport(point))
|
||||
: [
|
||||
renderer.graphToViewport(graph.getNodeAttributes(source)),
|
||||
renderer.graphToViewport(graph.getNodeAttributes(target)),
|
||||
];
|
||||
|
||||
if (points.length < 2) return;
|
||||
|
||||
const opacity = resolveOpacity(interaction, edgeKey, source, target);
|
||||
const lineWidth = resolveLineWidth(style.width, interaction, edgeKey);
|
||||
const color = withAlpha(style.color, opacity);
|
||||
|
||||
context.save();
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = lineWidth;
|
||||
context.setLineDash(style.dash);
|
||||
context.beginPath();
|
||||
context.moveTo(points[0].x, points[0].y);
|
||||
for (let index = 1; index < points.length; index += 1) {
|
||||
context.lineTo(points[index].x, points[index].y);
|
||||
}
|
||||
context.stroke();
|
||||
|
||||
const from = points[points.length - 2];
|
||||
const to = points[points.length - 1];
|
||||
drawArrow(context, from, to, color, lineWidth + 0.5);
|
||||
|
||||
if (
|
||||
shouldDrawLabel(
|
||||
renderer,
|
||||
graph,
|
||||
edge,
|
||||
interaction,
|
||||
graph.order,
|
||||
source,
|
||||
target,
|
||||
)
|
||||
) {
|
||||
const labelPoint = getLabelPlacement(points, edge.kind);
|
||||
if (labelPoint) {
|
||||
const labelColor = withAlpha(
|
||||
interaction.highlightedEdgeKeys.has(edgeKey)
|
||||
? palette.text
|
||||
: style.color,
|
||||
interaction.highlightedEdgeKeys.has(edgeKey) ? 0.96 : 0.8,
|
||||
);
|
||||
edgeLabels.push({
|
||||
color: labelColor,
|
||||
strokeColor: withAlpha(labelColor, 0.25),
|
||||
text: edge.label!,
|
||||
x: labelPoint.x,
|
||||
y: labelPoint.y,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
context.restore();
|
||||
});
|
||||
|
||||
drawNodes(context, renderer, graph, viewKind, palette, interaction);
|
||||
drawEdgeLabels(context, palette, edgeLabels);
|
||||
}
|
||||
258
frontend/src/graph/styles.ts
Normal file
258
frontend/src/graph/styles.ts
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
import type { GraphMetadata, GraphThemePalette, GraphViewKind } from './types';
|
||||
|
||||
export interface NodeStyle {
|
||||
fill: string;
|
||||
stroke: string;
|
||||
textFill: string;
|
||||
secondaryFill: string;
|
||||
shape: 'rect' | 'terminal' | 'double';
|
||||
strokeWidth: number;
|
||||
accentFill: string;
|
||||
neighborFill: string;
|
||||
}
|
||||
|
||||
export interface EdgeStyle {
|
||||
color: string;
|
||||
width: number;
|
||||
dash: number[];
|
||||
}
|
||||
|
||||
const FALLBACK_PALETTE: GraphThemePalette = {
|
||||
background: '#ffffff',
|
||||
backgroundSecondary: '#f7f7f8',
|
||||
text: '#1a1a1a',
|
||||
textSecondary: '#6b6b76',
|
||||
textTertiary: '#9b9ba7',
|
||||
border: '#e5e5ea',
|
||||
borderLight: '#f0f0f4',
|
||||
accent: '#5856d6',
|
||||
accentSoft: '#ededfc',
|
||||
success: '#2ecc71',
|
||||
warning: '#e67e22',
|
||||
danger: '#e74c3c',
|
||||
neutral: '#607187',
|
||||
neutralSoft: '#8c99ab',
|
||||
};
|
||||
|
||||
function readVar(name: string, fallback: string): string {
|
||||
if (typeof window === 'undefined') return fallback;
|
||||
const value = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue(name)
|
||||
.trim();
|
||||
return value || fallback;
|
||||
}
|
||||
|
||||
function hexToRgb(value: string): [number, number, number] | null {
|
||||
const normalized = value.replace('#', '').trim();
|
||||
if (normalized.length !== 3 && normalized.length !== 6) return null;
|
||||
|
||||
const expanded =
|
||||
normalized.length === 3
|
||||
? normalized
|
||||
.split('')
|
||||
.map((part) => part + part)
|
||||
.join('')
|
||||
: normalized;
|
||||
|
||||
const intValue = Number.parseInt(expanded, 16);
|
||||
if (Number.isNaN(intValue)) return null;
|
||||
|
||||
return [(intValue >> 16) & 255, (intValue >> 8) & 255, intValue & 255];
|
||||
}
|
||||
|
||||
export function withAlpha(color: string, alpha: number): string {
|
||||
if (color.startsWith('rgba(')) {
|
||||
return color.replace(/rgba\(([^)]+),[^)]+\)/, `rgba($1, ${alpha})`);
|
||||
}
|
||||
if (color.startsWith('rgb(')) {
|
||||
const inner = color.slice(4, -1);
|
||||
return `rgba(${inner}, ${alpha})`;
|
||||
}
|
||||
|
||||
const rgb = hexToRgb(color);
|
||||
if (!rgb) return color;
|
||||
return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
|
||||
}
|
||||
|
||||
export function readGraphPalette(): GraphThemePalette {
|
||||
return {
|
||||
background: readVar('--bg', FALLBACK_PALETTE.background),
|
||||
backgroundSecondary: readVar(
|
||||
'--bg-secondary',
|
||||
FALLBACK_PALETTE.backgroundSecondary,
|
||||
),
|
||||
text: readVar('--text', FALLBACK_PALETTE.text),
|
||||
textSecondary: readVar('--text-secondary', FALLBACK_PALETTE.textSecondary),
|
||||
textTertiary: readVar('--text-tertiary', FALLBACK_PALETTE.textTertiary),
|
||||
border: readVar('--border', FALLBACK_PALETTE.border),
|
||||
borderLight: readVar('--border-light', FALLBACK_PALETTE.borderLight),
|
||||
accent: readVar('--accent', FALLBACK_PALETTE.accent),
|
||||
accentSoft: readVar('--accent-light', FALLBACK_PALETTE.accentSoft),
|
||||
success: readVar('--success', FALLBACK_PALETTE.success),
|
||||
warning: readVar('--sev-medium', FALLBACK_PALETTE.warning),
|
||||
danger: readVar('--sev-high', FALLBACK_PALETTE.danger),
|
||||
neutral: FALLBACK_PALETTE.neutral,
|
||||
neutralSoft: FALLBACK_PALETTE.neutralSoft,
|
||||
};
|
||||
}
|
||||
|
||||
function cfgNodeStyle(
|
||||
type: string,
|
||||
palette: GraphThemePalette,
|
||||
metadata?: GraphMetadata,
|
||||
): NodeStyle {
|
||||
if (metadata?.isCompound) {
|
||||
return {
|
||||
fill: withAlpha(palette.borderLight, 0.9),
|
||||
stroke: palette.border,
|
||||
textFill: palette.text,
|
||||
secondaryFill: palette.textSecondary,
|
||||
shape: 'rect',
|
||||
strokeWidth: 1.25,
|
||||
accentFill: palette.accent,
|
||||
neighborFill: palette.accentSoft,
|
||||
};
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'Entry':
|
||||
return {
|
||||
fill: palette.success,
|
||||
stroke: withAlpha(palette.success, 0.85),
|
||||
textFill: '#ffffff',
|
||||
secondaryFill: withAlpha('#ffffff', 0.78),
|
||||
shape: 'double',
|
||||
strokeWidth: 1.8,
|
||||
accentFill: palette.accent,
|
||||
neighborFill: withAlpha(palette.success, 0.75),
|
||||
};
|
||||
case 'Exit':
|
||||
return {
|
||||
fill: palette.textSecondary,
|
||||
stroke: withAlpha(palette.textSecondary, 0.85),
|
||||
textFill: '#ffffff',
|
||||
secondaryFill: withAlpha('#ffffff', 0.78),
|
||||
shape: 'double',
|
||||
strokeWidth: 1.6,
|
||||
accentFill: palette.accent,
|
||||
neighborFill: withAlpha(palette.textSecondary, 0.76),
|
||||
};
|
||||
case 'If':
|
||||
return {
|
||||
fill: palette.accent,
|
||||
stroke: withAlpha(palette.accent, 0.82),
|
||||
textFill: '#ffffff',
|
||||
secondaryFill: withAlpha('#ffffff', 0.8),
|
||||
shape: 'rect',
|
||||
strokeWidth: 2,
|
||||
accentFill: palette.accent,
|
||||
neighborFill: palette.accentSoft,
|
||||
};
|
||||
case 'Loop':
|
||||
return {
|
||||
fill: '#4f78c2',
|
||||
stroke: '#3c5f9a',
|
||||
textFill: '#ffffff',
|
||||
secondaryFill: withAlpha('#ffffff', 0.8),
|
||||
shape: 'rect',
|
||||
strokeWidth: 2.1,
|
||||
accentFill: palette.accent,
|
||||
neighborFill: withAlpha('#4f78c2', 0.74),
|
||||
};
|
||||
case 'Call':
|
||||
return {
|
||||
fill: palette.warning,
|
||||
stroke: withAlpha(palette.warning, 0.85),
|
||||
textFill: '#ffffff',
|
||||
secondaryFill: withAlpha('#ffffff', 0.8),
|
||||
shape: 'rect',
|
||||
strokeWidth: 1.5,
|
||||
accentFill: palette.accent,
|
||||
neighborFill: withAlpha(palette.warning, 0.76),
|
||||
};
|
||||
case 'Return':
|
||||
return {
|
||||
fill: palette.danger,
|
||||
stroke: withAlpha(palette.danger, 0.86),
|
||||
textFill: '#ffffff',
|
||||
secondaryFill: withAlpha('#ffffff', 0.8),
|
||||
shape: 'terminal',
|
||||
strokeWidth: 1.7,
|
||||
accentFill: palette.accent,
|
||||
neighborFill: withAlpha(palette.danger, 0.75),
|
||||
};
|
||||
default:
|
||||
return {
|
||||
fill: withAlpha(palette.neutral, 0.92),
|
||||
stroke: withAlpha(palette.neutral, 0.8),
|
||||
textFill: '#ffffff',
|
||||
secondaryFill: withAlpha('#ffffff', 0.78),
|
||||
shape: 'rect',
|
||||
strokeWidth: 1.2,
|
||||
accentFill: palette.accent,
|
||||
neighborFill: withAlpha(palette.neutralSoft, 0.88),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function callGraphNodeStyle(
|
||||
palette: GraphThemePalette,
|
||||
metadata?: GraphMetadata,
|
||||
): NodeStyle {
|
||||
const isRecursive = metadata?.isRecursive === true;
|
||||
const fill = isRecursive ? '#7d6450' : palette.neutral;
|
||||
const stroke = isRecursive ? '#6a5444' : withAlpha(palette.neutral, 0.84);
|
||||
|
||||
return {
|
||||
fill,
|
||||
stroke,
|
||||
textFill: '#ffffff',
|
||||
secondaryFill: withAlpha('#ffffff', 0.74),
|
||||
shape: 'rect',
|
||||
strokeWidth: isRecursive ? 1.8 : 1.3,
|
||||
accentFill: palette.accent,
|
||||
neighborFill: isRecursive ? withAlpha(fill, 0.76) : palette.accentSoft,
|
||||
};
|
||||
}
|
||||
|
||||
export function getNodeStyle(
|
||||
type: string,
|
||||
graphKind: GraphViewKind = 'cfg',
|
||||
metadata?: GraphMetadata,
|
||||
palette = FALLBACK_PALETTE,
|
||||
): NodeStyle {
|
||||
return graphKind === 'callgraph'
|
||||
? callGraphNodeStyle(palette, metadata)
|
||||
: cfgNodeStyle(type, palette, metadata);
|
||||
}
|
||||
|
||||
export function getEdgeStyle(
|
||||
type: string,
|
||||
graphKind: GraphViewKind = 'cfg',
|
||||
palette = FALLBACK_PALETTE,
|
||||
): EdgeStyle {
|
||||
if (graphKind === 'callgraph') {
|
||||
return {
|
||||
color: withAlpha(palette.neutralSoft, 0.72),
|
||||
width: 1.2,
|
||||
dash: [],
|
||||
};
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'True':
|
||||
return { color: palette.success, width: 1.8, dash: [] };
|
||||
case 'False':
|
||||
return { color: palette.danger, width: 1.8, dash: [] };
|
||||
case 'Back':
|
||||
return { color: '#4f78c2', width: 1.6, dash: [7, 4] };
|
||||
case 'Exception':
|
||||
return { color: palette.warning, width: 1.6, dash: [3, 3] };
|
||||
default:
|
||||
return {
|
||||
color: withAlpha(palette.textTertiary, 0.78),
|
||||
width: 1.3,
|
||||
dash: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
111
frontend/src/graph/types.ts
Normal file
111
frontend/src/graph/types.ts
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
export type GraphViewKind = 'callgraph' | 'cfg';
|
||||
|
||||
export interface GraphPoint {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface GraphMetadata {
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface GraphNodeModel {
|
||||
key: string;
|
||||
rawId: number;
|
||||
label: string;
|
||||
kind: string;
|
||||
detail?: string;
|
||||
sublabel?: string;
|
||||
badges?: string[];
|
||||
line?: number;
|
||||
metadata?: GraphMetadata;
|
||||
}
|
||||
|
||||
export type GraphNode = GraphNodeModel;
|
||||
|
||||
export interface GraphEdgeModel {
|
||||
key: string;
|
||||
source: string;
|
||||
target: string;
|
||||
kind: string;
|
||||
label?: string;
|
||||
metadata?: GraphMetadata;
|
||||
}
|
||||
|
||||
export type GraphEdge = GraphEdgeModel;
|
||||
|
||||
export interface GraphModel {
|
||||
kind: GraphViewKind;
|
||||
nodes: GraphNodeModel[];
|
||||
edges: GraphEdgeModel[];
|
||||
}
|
||||
|
||||
export interface GraphCompactionResult {
|
||||
graph: GraphModel;
|
||||
compounds: Map<string, string[]>;
|
||||
}
|
||||
|
||||
export interface LayoutBounds {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface LayoutGraphNode extends GraphNodeModel {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
sigmaSize: number;
|
||||
labelLines: string[];
|
||||
detailLines: string[];
|
||||
sublabelLines: string[];
|
||||
}
|
||||
|
||||
export interface LayoutGraphEdge extends GraphEdgeModel {
|
||||
route: GraphPoint[];
|
||||
}
|
||||
|
||||
export interface LayoutGraphModel {
|
||||
kind: GraphViewKind;
|
||||
nodes: LayoutGraphNode[];
|
||||
edges: LayoutGraphEdge[];
|
||||
bounds: LayoutBounds;
|
||||
}
|
||||
|
||||
export interface ElkLayoutPreset {
|
||||
direction: 'DOWN' | 'RIGHT';
|
||||
nodeSpacing: number;
|
||||
layerSpacing: number;
|
||||
edgeNodeSpacing: number;
|
||||
padding: number;
|
||||
edgeRouting: 'POLYLINE' | 'ORTHOGONAL';
|
||||
}
|
||||
|
||||
export interface GraphThemePalette {
|
||||
background: string;
|
||||
backgroundSecondary: string;
|
||||
text: string;
|
||||
textSecondary: string;
|
||||
textTertiary: string;
|
||||
border: string;
|
||||
borderLight: string;
|
||||
accent: string;
|
||||
accentSoft: string;
|
||||
success: string;
|
||||
warning: string;
|
||||
danger: string;
|
||||
neutral: string;
|
||||
neutralSoft: string;
|
||||
}
|
||||
|
||||
export interface SigmaNodeAttributes extends LayoutGraphNode {
|
||||
size: number;
|
||||
color: string;
|
||||
hidden: boolean;
|
||||
}
|
||||
|
||||
export interface SigmaEdgeAttributes extends LayoutGraphEdge {
|
||||
color: string;
|
||||
size: number;
|
||||
hidden: boolean;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue