[Frontend] Add Viewer Panel to Detail View to show semantic models for selected digital twin

[mkanal]

As user of trace-x I want to view payload of semantic models connected to a digital twin in JSON RAW, JSON TREE and JSON GRAPH representation so that have the opportunity to view the original payload of a semantic model with all attributes in my favorite representation

Link

• relates to https://github.com/eclipse-tractusx/traceability-foss/issues/435
• relates to https://github.com/eclipse-tractusx/traceability-foss/issues/711

Hints / Details

• https://jsoncrack.com/editor

Acceptance Criteria

• [ ] Detail View is extended with Semantic Model Panel
  • [ ] Semantic Model panel shows related semantic models for selected digital twin
  • [ ] By selecting a semantic model the payload is shown in Viewer Panel
    • [ ] As JSON Raw view representation
    • [ ] As JSON Tree view representation
• [ ] Left side DTr, right site EDC Data

Technical details Frontend

• [ ] Detail View must be scrollable with vertical scrollbar
• [ ] New Panel "Semantic Models" is added to Detail View (de: Semantische Modelle)
• [ ] Panel "Semantic Models" contains table
• [ ] Table contains all "Semantic Models" for selected asset
• [ ] Table contains columns "Semantic Model Name" (de: refer to current translation
• [ ] Table contains columns "Version" of semantic model (de:Version)
• [ ] Table contains columns "Semantic Model Id" of semantic model (de:ID Semantisches Modell) /== "Identification" of submodel in IRS response /
• [ ] Table columns are sortable (Name alphanumeric, Version uses numeric natural sorting!)
• [ ] Table columns are NOT filterable
• [ ] Table with vertical and horizontal scrollbar (No pagination)
• [ ] Viewer Panel has fixed size.
• [ ] User selected of Viewer Instance is stored in User Settings. Last selected Viewer Instance will be used for next semantic model selection.
• [ ] User selected semantic model in table is highlighted in dark grey color

Json Code Raw Viewer

• [ ] Code Highlighting
• [ ] Line Numbering
• [ ] Vertical scrollbar
• [ ] Extend Viewer Panel is extendable to full-screen

Json Tree Viewer

• [ ] Code Highlighting
• [ ] Line Numbering
• [ ] Extend Viewer Panel is extendable to full-screen

Viewer in full-screen mode

• [ ] Any viewer instance could be extended to full-screen mode
• [ ] Full-screen mode is disabled via X button on the right upper side.
• [ ] After closing, full-screen former detail view is shown

Error View

• [ ] Viewer shows error icon
• [ ] Viewer show initial message Semantic model cannot be displayed.
• [ ] Standard error message: Semantic model cannot be displayed. With detailed user readable message

Mockups

Out of Scope

• If a custom solution is needed for the graph view (like jsoncrack) and there is no library with a usable license and pre styled views, than it should not be a part of the ACs in this issue

[jzbmw]

Frontend Concept not consistent yet.

• Boxes are not aligned
• Not correct Icons in use
• Buttons are not aligned

Please rework on this.

[ds-crehm]

Reworked according to your feedback. @jzbmw