3-Way Comparison in the Standalone Client

[julia05]

vokoscreenNG-2025-08-09_16-38-27.mp4

I made a first prototype for a 3-way comparison in the standalone glsp-client. Comparing side-by-side a remote and local branch compared to a common base branch.

This approach is based on the compare-demo branch from @tortmayr, where he already did a 2-way comparison for the VSCode integration of GLSP.
His code can be found here:

• GLSP Node Server - compare-demo branch
• GLSP VSCode Integration - compare-demo branch

For the prototype I had to make additions in the glsp-server-node and gls-client repository.

glsp-server-node Code Changes

Fork: https://github.com/julia05/glsp-server-node
Diff: https://github.com/julia05/glsp-server-node/pull/1/files

gls-client Code Changes

Fork: https://github.com/julia05/glsp-client
Diff: https://github.com/julia05/glsp-client/pull/1/files

Explanations

Preconditions

The three .wf files need to be put in the examples/workflow-standalone/app/files folder, named respectively base.wf, local.wf and remote.wf. If this files are named differently, this changes also need to be adjusted in following files:

• examples/workflow-standalone/app/diagram.html: file-name url parameter of the respective iframe block
• examples/workflow-standalone/src/app.ts: if changing filename of base.wf this also needs to be changed for the constant BASE_FILENAME and if the path or folder of the .wf files are changed, the constants examplePath and BASE_URI need to be updated.

Standalone Client

Following files are just copy paste from the VSCode integration code from @tortmayr.

• examples/workflow-standalone/css/diff.css
• examples/workflow-standalone/src/features/compare/standalone-compare-module.ts

diagram.html

The original diagram.html with one div and a script tag was changed to include now three iframes (the three columns for the diagrams). These iframes have the diff.html as source with url parameters respectively. Because the three columns are htmls of three separate iframes, the diagrams are totally separate from each other.

app.ts

In the app.ts the clientId, fileName and diffSide are initialized with the url parameters. The diffSide is only set when local or remote diagram must be loaded, a diff is necessary. If it is the html of local or remote (left or right column) the diagram is set to read-only. For the center column (base/original diagram), the existing code and the workflow how the diagram is loaded is unchanged, but if it is the left or right column/local or base diagram that needs to be loaded, the diagram is not loaded as is but a diff of respectively local with base and remote with base is needed. Two things need to be considered for this:

1. The hidden base div
   The code from @tortmayr requires that the base diagram for diffing must be loaded with different clientId but same diffId. Since I choose to load the base (center column) in a different iframe, with a different unique diffId, encapsulated from the other iframes, I could not choose this base diagram for diffing. Therefore I made the design decision to additionally laod the base for remote and local with a new client session into a hidden div with id base-loader-client in the diff.html. The loadBase function is called before the remote/local diagram is loaded.

2. Additional requestModelOptions
   To allign with the server code from @tortmayr, addtional requestModelOptions need to be set. In the VSCode integration code from @tortmayr the WorkflowDiagramIdentifier interface was introduced, with parameters id, side and content that are passed as requestModelOptions. I adapted it to the standalone client restrictions and set diffId, diffSide and loadFile parameter as requestModelOptions. In the standalone client I am not able to access the file content (browser/script security concerns), thus I set the loadFile property to load the diagram content in the server.

Node Server Modifications

For the server code I only had to add the file content loading. If the loadFile property is set in the given options the server reads the file content from the given sourceUri and sets the needed diffContent, to conform with the subsequential code from @tortmayr. The options parameters are then conform to theDiffArgs. This addaption assumes that the server is running on the same machine/in the same environment as the client for accessing the file content form the uri.

First attempt of viewport sync feature (NOT FINISHED)

In addition to the 3-way comparison I started to investigate in a viewport sync feature. If interacting (zooming, moving the viewport) in one column, the viewports of the other columns should sync, to show the same section of the diagram in all three columns. Following commit includes my approach: julia05/glsp-client@6995756.

I already created a SetViewportAction handler, that is called on every zoom and move of the viewport, but for further investigation of this feature following question must be clarified:

• How to dispatch the action to the other two diagrams, if the other two are in complete other context with different clientId because of the three iframes?
  • Maybe it is possible through the server switching the context, dispatching the action to other clients?

Besides this, the action could be dispatched as is, no further modifications needed. The elementId is the same in all three.

[planger]

Thank you very much for this work, @julia05, and for documenting and sharing it! I'm sure this will be very interesting to several adopters in the community. Thanks again!