Add icon to diagram instead of underline

extensions/crossmodel-lang/src/glsp-server/system-diagram/model/nodes.ts

@@ -37,7 +37,8 @@ export class GEntityNodeBuilder extends GNodeBuilder<GEntityNode> {
       const attributesCompartment = new AttributesCompartmentBuilder().set(this.proxy.id);
       for (const attribute of attributes) {
          const attributeNode = AttributeCompartment.builder().set(attribute, index);
-         attributeNode.addArg('identifier', attribute.identifier);
+         // increase padding left and right so we have space for the identifier icon
+         attributeNode.addArg('identifier', attribute.identifier).addLayoutOption('paddingLeft', 8).addLayoutOption('paddingRight', 8);
          attributesCompartment.add(attributeNode.build());
       }
       this.add(attributesCompartment.build());

packages/glsp-client/src/browser/views.tsx

@@ -2,6 +2,7 @@
  * Copyright (c) 2024 CrossBreeze.
  ********************************************************************************/
 /* eslint-disable react/no-unknown-property */
+/* eslint-disable max-len */
 
 import { GCompartmentView, RenderingContext, RoundedCornerNodeView, RoundedCornerWrapper, svg } from '@eclipse-glsp/client';
 import { ReactNode } from '@theia/core/shared/react';
@@ -37,16 +38,13 @@ export class AttributeCompartmentView extends GCompartmentView {
                width={Math.max(compartment.size.width, 0)}
                height={Math.max(compartment.size.height, 0)}
             ></rect>
-            {context.renderChildren(compartment) as ReactNode}
             {compartment.args?.identifier && (
-               <line
-                  class-identifier={true}
-                  x1={(compartment.layoutOptions?.paddingLeft as number | undefined) ?? 0}
-                  y1={Math.max(compartment.size.height - 1, 0)}
-                  x2={Math.max(compartment.size.width, 0) - ((compartment.layoutOptions?.paddingRight as number | undefined) ?? 0)}
-                  y2={Math.max(compartment.size.height - 1, 0)}
-               />
+               <path
+                  class-icon-path='icon-path'
+                  d='M432-680q0-28 20-48t48-20q28 0 48 20t20 48q0 28-20 48t-48 20q-28 0-48-20t-20-48ZM490 0 337-167l64-88-64-88 60-75v-45q-60-32-98.5-85T260-680q0-100 70-170t170-70q100 0 170 70t70 170q0 72-34 124.5T603-463v350L490 0ZM320-680q0 58 38.5 110t98.5 66v108l-45 54 63 88-62 82 79 85 51-51v-366q66-19 101.5-66.5T680-680q0-75-52.5-127.5T500-860q-75 0-127.5 52.5T320-680Z'
+               ></path>
             )}
+            {context.renderChildren(compartment) as ReactNode}
          </g>
       ) as any;
 

packages/glsp-client/style/diagram.css

@@ -138,3 +138,8 @@
 .command-palette {
    animation: none;
 }
+
+.attribute.identifier .icon-path {
+   transform: scale(0.0105) translate(-400px, 1375px);
+   fill: #000;
+}

packages/react-model-ui/src/views/common/Icons.tsx

@@ -10,7 +10,7 @@ export const KeyIcon: React.FC<SvgIconProps> = props => (
    // Exported from https://fonts.google.com/icons?selected=Material+Symbols+Outlined:key_vertical:FILL@0;wght@400;GRAD@0;opsz@48&icon.query=key&icon.size=null&icon.color=%235f6368
    // It seems that the browser scales nicer if we do not provide a size in the SVG export
    // ViewBox property comes from the export
-   <SvgIcon viewBox='0 -960 960 960' width={20} {...props}>
+   <SvgIcon viewBox='0 -960 960 960' {...props}>
       <path d='M432-680q0-28 20-48t48-20q28 0 48 20t20 48q0 28-20 48t-48 20q-28 0-48-20t-20-48ZM490 0 337-167l64-88-64-88 60-75v-45q-60-32-98.5-85T260-680q0-100 70-170t170-70q100 0 170 70t70 170q0 72-34 124.5T603-463v350L490 0ZM320-680q0 58 38.5 110t98.5 66v108l-45 54 63 88-62 82 79 85 51-51v-366q66-19 101.5-66.5T680-680q0-75-52.5-127.5T500-860q-75 0-127.5 52.5T320-680Z'></path>
    </SvgIcon>
 );