Improve rendering performance by switching SVG rendering of O/D matrix to Canvas #584

aiAdrian · 2025-10-22T19:32:53Z

Description

Rendering of the origin/destination matrix was a major performance bottleneck. To address this, the SVG-based rendering of the O/D matrix has been replaced with a Canvas-based implementation.

Final Version.

To discuss - but it looks very promising

Please compare the rendering outcome: Pixel graphics (new) vs Vector graphics (old). If we like to have high quality support (vector graphic / svg) we might have to implement an automatic switch from (old) to new if the matrix gets to big.

I strongly recommend using canvas -> just using this canvas based rendering for such matrix based rendering otherwise we will run into big issue with the performance. I am aware that it's not so cool having pixel graphics but is looks quite good. And as well it make againt the interactive tool more complex du of having svg ( d3.js) and canvas in one product. But for interactive real - time application the life is hard:)

What changed

Replaced SVG rendering of the O/D matrix with a Canvas renderer.
Result: rendering is now fast and responsive, especially for large matrices.

Known issues / TODOs

Export to PNG/SVG currently does not work. Export functionality needs to be restored for the new Canvas renderer. Issue fixed - png can directly exported - svg must be simulated with an image layer but it works.
Small visual issue: some "button" elements render without a background. It appears the rendering area for those elements is too large, causing their backgrounds not to be drawn correctly.

Before	After

Checklist

This PR contains a description of the changes I'm making
I've read the Contribution Guidelines
I've added tests for changes or features I've introduced
I documented any high-level concepts I'm introducing in documentation/
CI is currently green and this is ready for review

Fixed known issue

Issue with ambiguous node names fixed:

test json (case 1)	test json (case 2)
netzgrafik (1).json	netzgrafik (2).json

Final result

chrome-capture-2025-10-22.webm

…f the filter panel

aiAdrian · 2025-10-22T20:37:37Z

It would be great if the user manual were updated when this improvement is implemented. I could help by recording some nice demonstration videos.

src/app/services/analytics/origin-destination/components/origin-destination.component.ts

"that looks like a commit message rather than documentation" -> indeed it was just for my own

Make more clear why we check for existance

`That's confusing to me, since filtering trains should trigger computation` - comment was not aligned with the functionality (copy & paste issue)

aiAdrian · 2025-10-24T06:34:00Z

Some benchmarks (all tests have finished : without error)

51 Nodes - standalone demo

Browser	main (`bdcc0d2`)	aeg/od_improve_rendering_performance_switching_svg_to_canvas	Speed Up
Google Chrome			1.25
	337ms	267ms	1.25
Microsoft Edge			1.25
	703ms	615ms	1.25

204 nodes - 3x duplicated - 4x standalone demo

Browser	main (`bdcc0d2`)	aeg/od_improve_rendering_performance_switching_svg_to_canvas	Speed Up
Google Chrome			1.65
	2716ms	1612ms	1.65
Microsoft Edge			1.55
	4201ms	2713ms	1.55

408 Nodes

Browser	main (`bdcc0d2`)	aeg/od_improve_rendering_performance_switching_svg_to_canvas	Speed Up
chrome	9271ms	4073ms	2.27
Edge	17981ms	8790ms	2.04

816 Nodes

Browser	main (`bdcc0d2`)	aeg/od_improve_rendering_performance_switching_svg_to_canvas	Speed Up
chrome			2.7
	43s	16s	2.7

Big, real Netzgrafik test

I tested with an internal really big Netzgrafik (851 unique named nodes) - can not share the file/data!

main branch (`bdcc0d2`)

aeg/od_improve_rendering_performance_switching_svg_to_canvas

After very long waiting - time manuel measured (clock): 5min 38s = 338s)
Only rendering :

drawMatrix : 3.8s
drawCellText : 1.9s

just mouse over : real-time (near)

High memory usage : 911MB

Further idea to improve: Next steps

=> Thus the reloadData cost are massiv ! -> might we can reduce it with open draft pull request (Dijkstra, ... )
performance_computeShortestPaths_ai_Dijkstra

#578

--- other idea
#573
#568

src/app/view/editor-tools-view-component/editor-tools-view.component.ts

louisgreiner

A few comments, could not get into the PNG/SVG export

Also did not challenged the new structure of the component, but except for the ".style" noise, it's quite easy to follow actually

Note: origin-destination.component.html -> move the style outside of this file and set it in the .scss file

louisgreiner · 2025-10-28T13:27:12Z

src/app/services/analytics/origin-destination/components/origin-destination.component.html

+    style="
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      width: 100%;
+      height: 57px;
+      flex-wrap: nowrap;
+    "


Not only related to this styling, but can we keep style in the .scss corresponding files? Otherwise, it makes the code way more difficult to navigate into

style is still html hard coded, can it be moved to scss file?

src/app/services/analytics/origin-destination/components/origin-destination.component.ts

louisgreiner · 2025-10-28T13:42:56Z

src/app/services/analytics/origin-destination/components/origin-destination.component.ts

+      .attr("class", "tooltip")
+      .style("opacity", 0)
+      .style("position", "absolute")
+      .style("border", "solid 1px")
+      .style("border-radius", "4px")
+      .style("padding", "6px")
+      .style("user-select", "none")
+      .style("pointer-events", "none");


Can we add this style as we do for other Netzgrafik-Editor objects? what is done with static.dom.tags.ts for instance; to reduce the code's length

-> same for other .style occurrences of this file

src/app/services/analytics/origin-destination/components/origin-destination.component.ts

src/app/services/analytics/origin-destination/components/origin-destination.component.html

src/app/services/analytics/origin-destination/components/origin-destination.component.ts

…ponent.ts Co-authored-by: Yoh <[email protected]>

louisgreiner

A few more minor comments

louisgreiner · 2025-10-28T16:51:13Z

src/app/services/analytics/origin-destination/components/origin-destination.component.html

  <div id="main-origin-destination-container-root"></div>

-  <div class="palette-buttons">
+  <div class="palette-buttons" style="transform: translateX(-64px)">


Same as other style parameters, can we move them to scss file?

Suggested change

<div class="palette-buttons" style="transform: translateX(-64px)">

<div class="palette-buttons">

louisgreiner · 2025-10-28T16:51:54Z

src/app/services/analytics/origin-destination/components/origin-destination.component.html

+    style="
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      width: 100%;
+      height: 57px;
+      flex-wrap: nowrap;
+    "


style is still html hard coded, can it be moved to scss file?

louisgreiner · 2025-10-28T16:52:21Z

src/app/services/analytics/origin-destination/components/origin-destination.component.html

+    <sbb-radio-group
+      class="sbb-checkbox-group-horizontal"
+      [(ngModel)]="displayBy"
+      style="display: flex; flex-direction: row; gap: 0.5rem; transform: translateX(-16px)"


same issue, style must go to scss file

Suggested change

style="display: flex; flex-direction: row; gap: 0.5rem; transform: translateX(-16px)"

louisgreiner · 2025-10-28T16:53:54Z

src/app/services/analytics/origin-destination/components/origin-destination.component.ts

+  // -------------------------
+  // Initialization helpers
+  // -------------------------



Suggested change

louisgreiner · 2025-10-28T16:56:54Z

src/app/view/editor-tools-view-component/editor-tools-view.component.ts

        return this.getStreckengrafikEditingContainerToExport();
      case EditorMode.OriginDestination:
-        return this.getOriginDestinationContainerToExport();
+        return undefined;


Did not test this part, but this gives me bad feeling; could we gather all the exports at the same place?

The problem is, that we have a complete different export behavior when using canvas ... but i will refactor it, try to fix the problem

louisgreiner · 2025-10-28T16:59:09Z

Also, if doable I think it is better to let the reviewer press "Resolve conversation", to ensure the comment has been treated and there is no more discussion.

Also, if the conversation are closed, I cannot see them on the "Files changed" page to review another time

…cure and clear

louisgreiner

I'm fine with the current code (except the few remarks), however the zoom feature is a bit bugged. You can try zoom on the edges of this network graphic for instance:
reticulaire(2).json

Also, when zoomed out a lot (30%), the panning feature is very slow, very different of the previous behaviour

Enregistrement.de.l.ecran.2025-10-30.163511.mp4

louisgreiner · 2025-10-30T14:31:50Z

src/app/view/editor-tools-view-component/editor-tools-view.component.ts

+      // canvas Data-URL (PNG)
+      const dataUrl = canvas.toDataURL("image/png");
+
+      // Erzeuge SVG string mit eingebettetem Bild


Can you translate this in english please 😆

louisgreiner · 2025-10-30T14:32:20Z

src/app/view/editor-tools-view-component/editor-tools-view.component.ts

-      "text-anchor",
-      "dominant-baseline",
-    ];
+    // quality only used for image/jpeg


What is the point of jpeg since we use png?

aiAdrian · 2025-11-07T11:20:35Z

The current version is really fast. But pan/zoom doesn't work smooth and acceptable

aiAdrian · 2025-11-07T18:06:06Z

I experimented extensively with this pull request (PR), but unfortunately, I couldn't cleanly implement the transformation/scaling logic for panning and zooming. I also have to admit that while Canvas has its strengths, SVG offers significantly higher rendering quality—and the entire mesh graphics editor is based on SVG. Therefore, using Canvas for the o/d matrix is problematic.

Performance optimizations for large matrices are possible, but would likely require techniques like frustum culling (as used in the mesh graphics editor's editor mode) and possibly other rendering strategies like level-of-detail (LOD).

Furthermore, Canvas introduces considerable complexity once we consider HiDPI and Retina displays.

Conclusion

In conclusion, this was a valuable experiment, and I learned a lot. While Canvas can significantly improve performance, it also introduces greater complexity and doesn't fit well with the SVG-based architecture of the mesh graphics editor.

Decision (suggestion)

Therefore, I propose closing this PR without merging it. Should Canvas become relevant again in the future, we can revisit this code and the discussion as a reference point.

Thanks to

Many thanks to everyone involved, including the reviewers!

final commit

9718b6a

aiAdrian mentioned this pull request Oct 22, 2025

Improve rendering performance by switching SVG rendering of O/D matrix to Canvas #579

Closed

7 tasks

aiAdrian self-assigned this Oct 22, 2025

aiAdrian added enhancement New feature or request UX (enhancement) Origin-Destination-Matrix code quality / improvement labels Oct 22, 2025

aiAdrian added this to the 2.10 milestone Oct 22, 2025

aiAdrian added 4 commits October 22, 2025 21:34

npm run format - fix

a20b67f

cleanup code

98e76c4

I can not understand why the filter update is triggered in the init o…

819224c

…f the filter panel

45° for x-axis is much more easy to read

353be7c

lint fix

837e0a8

shenriotpro reviewed Oct 23, 2025

View reviewed changes

aiAdrian added 3 commits October 23, 2025 13:15

fix: Review findings:

0a5c87a

"that looks like a commit message rather than documentation" -> indeed it was just for my own

fix: Review findings:

099788e

Make more clear why we check for existance

fix: Review findings:

e1a9bb6

`That's confusing to me, since filtering trains should trigger computation` - comment was not aligned with the functionality (copy & paste issue)

aiAdrian requested a review from louisgreiner October 23, 2025 11:38

Yohh reviewed Oct 28, 2025

View reviewed changes

louisgreiner reviewed Oct 28, 2025

View reviewed changes

aiAdrian and others added 3 commits October 28, 2025 15:36

Update src/app/view/editor-tools-view-component/editor-tools-view.com…

bbcceb0

…ponent.ts Co-authored-by: Yoh <[email protected]>

review fixes - thanks to louisgreiner & yohh

e378aa9

review fixes - thanks to louisgreiner & yohh

d6deb86

louisgreiner reviewed Oct 28, 2025

View reviewed changes

aiAdrian added 3 commits October 29, 2025 17:27

fix: review findings

da70c3a

fix: review findings

469fb37

fix review findings: refactored export to SVG/PNG - make code more se…

dcabb3f

…cure and clear

aiAdrian added 5 commits October 30, 2025 07:35

fix review findings: refactored export to SVG/PNG - make code more se…

2555179

…cure and clear

fix issue: make rendering static

2afcf5c

fix issue: make rendering static

0f827e5

fix: lint error

45bf814

code clean

96fcc82

louisgreiner reviewed Oct 30, 2025

View reviewed changes

code clean

93f9c7f

aiAdrian marked this pull request as draft November 7, 2025 11:19

aiAdrian added the wontfix This will not be worked on label Nov 7, 2025

aiAdrian closed this Nov 12, 2025

	<div class="palette-buttons" style="transform: translateX(-64px)">
	<div class="palette-buttons">

Improve rendering performance by switching SVG rendering of O/D matrix to Canvas #584

Improve rendering performance by switching SVG rendering of O/D matrix to Canvas #584

Uh oh!

Conversation

aiAdrian commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

To discuss - but it looks very promising

What changed

Known issues / TODOs

Checklist

Fixed known issue

Final result

Uh oh!

aiAdrian commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aiAdrian commented Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Some benchmarks (all tests have finished : without error)

Big, real Netzgrafik test

main branch (bdcc0d2)

aeg/od_improve_rendering_performance_switching_svg_to_canvas

Further idea to improve: Next steps

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

louisgreiner left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

louisgreiner left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

louisgreiner commented Oct 28, 2025

Uh oh!

louisgreiner left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

aiAdrian commented Oct 22, 2025 •

edited

Loading

aiAdrian commented Oct 22, 2025 •

edited

Loading

aiAdrian commented Oct 24, 2025 •

edited

Loading

main branch (`bdcc0d2`)