`Modeling`: The solution edit and view in component diagrams show two different diagrams

Santia-go commented 3 months ago

Describe the bug

The solution (edit) shows good the lollipop and sockets but the view in the exercise does not show it correctly

To Reproduce

Create a component diagram
Create the solution
Check that all is good in the edition
Save it and verify that it is not possible to distinguish the lollipops and sockets.
And also out of the box view

Expected behavior

Should show the correct diagram

Screenshots

Edit view

Final view

Which version of Artemis are you seeing the problem on?

7.2.2

What browsers are you seeing the problem on?

Chrome

Additional context

No response

Relevant log output

No response

loreanvictor commented 2 months ago

@Santia-go could you provide the full diagram that is causing this issue? are you experiencing this issue with any component diagram?

Santia-go commented 2 months ago

@Santia-go could you provide the full diagram that is causing this issue? are you experiencing this issue with any component diagram?

Any diagram. Also, when the students see the summary in the Exam mode, it is impossible to distinguish sockets and lollipops.

loreanvictor commented 2 months ago

Ok this looks like a weird SVG rendering issue on Chrome and Firefox. To be more precise, they seem to be unable to render start or end marker elements of polylines, when the SVG is being rendered directly (i.e. using an SVG element).

Safari displays the diagrams properly:

The same exercise looks like this on Chrome:

and on Firefox:

When I copy the content of the SVG element rendered and save it locally, it renders properly. SVGViewer also renders the SVG properly on all browsers.

A potential solution for Chrome and Firefox seems to be using an HTML image element to render the SVG, instead of rendering it directly (using an SVG element), at least as per my initial testing. Right now we are inserting the SVG using inner HTML, looking schematically like this:

<div [innerHTML]="readOnlySVG" ...>

But I suspect doing this (schematically) instead, would fix the issue for Chrome and Firefox:

<div ...>
  <img [src]="'data:image/svg+xml,' + encodeURIComponent(readOnlySVG)" />
</div>

Unfortunately, this fix would break the rendering on Safari (resulting in the same issue we have right now with Chrome and Firefox). So the fix potentially should check the browser and use the rendering technique accordingly.

P.S. I've tested this solution using console only (creating an image element and setting its source to the prescribed URI). I doubt there will be weird interactions with Angular, but since the solution is finicky extra testing would be a good idea.

FelixTJDietrich commented 2 months ago

The issue is with the ids of the marker elements of the SVG. There is a hidden Apollon editor in the DOM rendering the SVG a first time and then there is a second one the "readOnly" SVG. Both are using the same content. The duplicate <marker> ids on the page are causing issues for the second SVG and any subsequent ones.

I thought about using the useId() hook on the Apollon side in an attempt to get more unique ids but I think that might also be the wrong approach. They could still collide.

What I did now is to destroy the ApollonEditor after exportAsSVG in modeling-editor.component.ts. I will create a pull request and link it here. This would solve the current issue but it would not solve it in potential future cases where the exact same Apollon SVG diagram appears more than once on the page.

ls1intum / Artemis