Feat 226539: use mocked graphical data

[NoraKri]

Aim of the PR

This PR fixes AB#226539

We are creating a new graphical format that sends data to the frontend in the form of JSON. This PR aims to start creating components and functions that fetch such data and displays it.

Implementation

There are two new components:

• LinesGraphicalDataExample.tsx: This component handles lines, both dashed and normal.
• SymbolGraphicalDataExample.tsx: This component handles equipment, nozzles, pipingcomponents etc. Everything that has an SVG is a symbol and handled by this component.

In addition, a modified Pandid-component is created for testing:
PandIdGraphicalDataExample.tsx: Fetches graphical data from the endpoint and loops over all lines and symbols to display them.

New interfaces have been created for the new format.

Type of change

• Bug fix
• New feature
• Breaking change
• This change requires a documentation update

If the changes impact any dependent services then provide details.

How Has This Been Tested?

Tested by visually confirming that both symbols and lines are rendered in the editor and are clickable, both as internal and boundary.

Additional Changes

• The graphical data endpoint returned the JSON as a string instead of pure JSON. Changed this endpoint to return JSON.
• Changed graphical data format example style names to match JavaScript variable naming conventions.

[markus-ap]

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

✅ code/snyk check is complete. No issues have been found. (View Details)

[eoye]

Very nice work! 🤩 I've tested it out and it works, and very cool with the toggle button!