feat show archetype of hierarchical submodel and refactor visualization

src/app/[locale]/viewer/_components/submodel/SubmodelDetail.tsx

@@ -47,7 +47,7 @@ export function SubmodelDetail(props: SubmodelDetailProps) {
                 <TimeSeriesDetail submodel={props.submodel} />
             </Box>
         );
-    } else if (semanticId === SubmodelSemanticId.HierarchicalStructures) {
+    } else if (semanticId === SubmodelSemanticId.HierarchicalStructuresV10 || semanticId === SubmodelSemanticId.HierarchicalStructuresV11) {
         return (
             <Box width="100%">
                 <HierarchicalStructuresDetail submodel={props.submodel} />

src/app/[locale]/viewer/_components/submodel/hierarchical-structures/ArchetypeDetailsDialog.tsx

@@ -0,0 +1,28 @@
+import { Dialog, DialogContent } from '@mui/material';
+import React from 'react';
+
+type ArchetypeDetailsModalProps = {
+    readonly handleClose: () => void;
+    readonly open: boolean;
+};
+
+export function ArchetypeDetailsDialog(props: ArchetypeDetailsModalProps) {
+    return (
+        <Dialog open={props.open} onClose={props.handleClose} fullWidth maxWidth="md">
+            <DialogContent>
+                <div>
+                    <h3>Full</h3>
+                    This Submodel Template allows to model a full hierarchy (including sub assets) in a single Submodel. This is useful if Entities representing Co-Managed Entities have to be expressed, as Co-Managed-Entities typically do not have an Asset Administration Shell of their own. In addition, full modeling also allows a version status to be kept centrally.
+                </div>
+                <div>
+                    <h3>OneDown</h3>
+                    The One Down archetype is useful for subsystem or component manufactures. For any given Asset in the hierarchy tree, an AAS corresponding to the Asset shall exists. The AAS shall contain a Submodel expressing the one down excerpt view starting with the Asset of the AAS. This type allows the modelling of a consistent stand-alone hierarchy in the engineering-phase of the subsystem. The integration is done by adding the subsystem in a top-level system via the given rules of this Submodel Template, e.g., with the HasPart Relation.
+                </div>
+                <div>
+                    <h3>OneUp</h3>
+                    The One Up relationship is suitable for describing the installation location of an asset. This enables the asset to provide information without external asset administration shells (e.g., in offline scenarios). In addition, the installation location can already be determined when the parent asset and its AAS are still in the planning stage.
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}

src/app/[locale]/viewer/_components/submodel/hierarchical-structures/HierarchicalStructuresDetail.tsx

@@ -12,6 +12,11 @@ import { cloneDeep } from 'lodash';
 import { SubmodelElementSemanticId } from 'lib/enums/SubmodelElementSemanticId.enum';
 import { GetKeyType } from 'lib/util/KeyTypeUtil';
 import { GetEntityType } from 'lib/util/EntityTypeUtil';
+import { Box, IconButton } from '@mui/material';
+import { SubmodelElementRenderer } from '../../submodel-elements/SubmodelElementRenderer';
+import { InfoOutlined } from '@mui/icons-material';
+import React from 'react';
+import { ArchetypeDetailsDialog } from './ArchetypeDetailsDialog';
 
 type HierarchicalStructuresDetailProps = {
     readonly submodel: Submodel;
@@ -33,15 +38,59 @@ export function HierarchicalStructuresDetail(props: HierarchicalStructuresDetail
         return;
     });
 
+    const archeTypePropertylElement= smElements.find((el) => {
+        if (GetKeyType(el) === KeyTypes.Property && el.semanticId?.keys[0].value === SubmodelElementSemanticId.ArcheType) {
+            return el as Property;
+        }
+        return;
+    });
+
     const [entryNode, relationShips, entityNodes] = prepareEntryNodeModel(entitySubmodelElement);
 
     (entryNode as Entity).statements = buildRelationTree(
         entryNode as Entity,
         relationShips as RelationshipElement[],
         entityNodes as Entity[],
     );
-
-    return <EntityComponent entity={entryNode as Entity} />;
+    const [detailsModalOpen, setDetailsModalOpen] = React.useState(false);
+    const handleDetailsModalClose = () => {
+        setDetailsModalOpen(false);
+    };
+    const handleDetailsClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        event.stopPropagation();
+        setDetailsModalOpen(true);
+    };
+
+    return (
+        <Box width="100%">
+            <EntityComponent entity={entryNode as Entity} />
+
+            {archeTypePropertylElement && 
+            <>
+                <Box sx={{ mt: 2, display: 'flex' }}>
+                <SubmodelElementRenderer
+                    key={archeTypePropertylElement.idShort}
+                    submodelId={props.submodel.id}
+                    submodelElement={archeTypePropertylElement}
+                    hasDivider={false}/>    
+
+                <Box sx={{ ml: '2px', pl: 1, display: 'flex', height: '50%' }}>
+
+                    <IconButton sx={{ mr: 1 }} onClick={handleDetailsClick}>
+                        <InfoOutlined data-testid="entity-info-icon" sx={{ color: 'text.secondary' }} />
+                    </IconButton>
+                </Box>
+                </Box>
+                <ArchetypeDetailsDialog
+                    open={detailsModalOpen}
+                    handleClose={handleDetailsModalClose}
+                />
+            </>
+
+            }
+
+        </Box>
+    );
 }
 
 const prepareEntryNodeModel = (subMod?: ISubmodelElement) => {
@@ -86,6 +135,7 @@ const prepareEntryNodeModel = (subMod?: ISubmodelElement) => {
 
             entityNodes.push(elementEntity);
         }
+
     });
 
     return [node, relationShips, entityNodes];

src/lib/enums/SubmodelElementSemanticId.enum.ts

@@ -28,4 +28,5 @@ export enum SubmodelElementSemanticId {
     TimeSeriesLinkedSegmentQuery = 'https://admin-shell.io/idta/TimeSeries/Query/1/1',
     EntryNode = 'https://admin-shell.io/idta/HierarchicalStructures/EntryNode/1/0',
     BulkCount = 'https://admin-shell.io/idta/HierarchicalStructures/BulkCount/1/0',
+    ArcheType= 'https://admin-shell.io/idta/HierarchicalStructures/ArcheType/1/0',
 }

src/lib/enums/SubmodelSemanticId.enum.ts

@@ -4,7 +4,8 @@ export enum SubmodelSemanticId {
     CarbonFootprintIRDI = '0173-1#01-AHE712#001',
     CarbonFootprint = 'https://admin-shell.io/idta/CarbonFootprint/CarbonFootprint/0/9',
     TimeSeries = 'https://admin-shell.io/idta/TimeSeries/1/1',
-    HierarchicalStructures = 'https://admin-shell.io/idta/HierarchicalStructures/1/1/Submodel',
+    HierarchicalStructuresV10 = 'https://admin-shell.io/idta/HierarchicalStructures/1/0/Submodel',
+    HierarchicalStructuresV11 = 'https://admin-shell.io/idta/HierarchicalStructures/1/1/Submodel',
     Nameplate = 'https://admin-shell.io/zvei/nameplate/1/0/Nameplate',
     BillOfApplications = 'https://xitaso.com/BillOfApplications',
 }