SDFG Diff viewer #161
SDFG Diff viewer #161
Conversation
phschaad
force-pushed
the
diff_viewer
branch
from
faa71e0
to
e9f1aa7
Compare
src/local_view/lview_renderer.ts
Outdated
| @@ -254,6 +254,7 @@ export class LViewRenderer { | |||
| } | |||
|
|
|||
| private initLocalViewSidebar(): void { | |||
| /* | |||
src/sdfg_diff_viewr.ts
Outdated
| @@ -0,0 +1,724 @@ | |||
| // Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved. | |||
src/overlays/diff_overlay.ts
Outdated
| public shadeElem( | ||
| elem: Edge | SDFGNode, ctx: CanvasRenderingContext2D | ||
| ): void { | ||
| if (this.diffMap?.addedKeys.has(elem.attributes().guid)) |
There was a problem hiding this comment.
You should use the guid() method of SDFGElement here instead (and update it to prioritize the guid attribute if exists).
| private readonly CHANGED_COLOR = 'orange'; | ||
| private readonly ADDED_COLOR = 'green'; | ||
| private readonly REMOVED_COLOR = 'red'; |
There was a problem hiding this comment.
should this not point to the CSS so that we can modify it?
There was a problem hiding this comment.
Fixed, this is now taken from the stylesheet (I revamped it a bit overall)
src/renderer/renderer.ts
Outdated
| //reload_file(this.sdfv_instance); | ||
| // TODO: exit correctly. |
src/sdfg_diff_viewr.ts
Outdated
| public static async diff( | ||
| graphA: JsonSDFG, graphB: JsonSDFG | ||
| ): Promise<DiffMap> { | ||
| if (!graphA.attributes.guid || !graphB.attributes.guid) { |
There was a problem hiding this comment.
I would use the SDFGElement's guid() method below, and when diff is called on graphs without guid here (i.e., this branch should not change) I would alert the user that diffs are not supported for graphs older than version 0.16.2 (?)
There was a problem hiding this comment.
That also means we have to add guid() to JsonSDFGElement? :/
There was a problem hiding this comment.
Found a way around it
This PR allows SDFGs with GUIDs on graph elements to be viewed in a diff view:
The diff view can be entered by opening an SDFG, and then selecting
Compare With Other SDFGin the top tools panel. The second SDFG can be loaded, and then the diff view is created.In the diff view, the first opened SDFG is considered to be the "new" graph, and is shown on the right side. The second opened SDFG is considered the "old" graph and is shown on the right.
Differences are highlighted with colors over individual graph elements. Red (in the old graph) represents elements that were removed in the new graph. Green (in the new graph) highlights newly added elements, and orange (shown in both graphs) represents elements where some property or attribute has been modified.
Opening the graph outline further highlights the changes in a linear fashion, similar to a text diff, and allows jumping to individual elements. Here, too, the new graph's outline is shown on the right, and the old graph's outline appears on the left.
Search functionality is provided similar to the regular viewer. The search query is run on both graphs, and both graphs' results are shown in the resulting search result panel, with duplicates (i.e., everything except added and removed elements) removed. Clicking results zooms to them in the respective graph, or in both graphs if a result is an unchanged element or one where properties or attributes were changed (orange).
Finally, the renderer's UI is adjusted to disallow any graph modifications, placing the SDFG(s) in a read-only mode, until the diff view is exited again through the corresponding option in the top tools panel. Changes to the renderer options carry over into and can be further adjusted in the diff view, similar to the regular SDFG view.
Note: the exact color hues are not finalized and will be adjusted over time based on user feedback and testing with various color schemes in embedded scenarios, such as VSCode.