Hide read-only embedded entities from the Canvas in the Instance Comp…

…oser to make the view cleaner (Issue #6034, PR #6056)

# Description

From now on Composer won't display embedded entities with modifier set to "r"

on recording allocated entity is "r"
https://github.com/user-attachments/assets/24086e48-887f-47ba-9b41-01c06fbafeba

closes #6034

# Self Check:

Strike through any lines that are not applicable (`~~line~~`) then check the box

- [ ] Attached issue to pull request
- [ ] Changelog entry
- [ ] Code is clear and sufficiently documented
- [ ] Sufficient test cases (reproduces the bug/tests the requested feature)
- [ ] Correct, in line with design
- [ ] End user documentation is included or an issue is created for end-user documentation (add ref to issue here: )

changelogs/unreleased/6034-read-only-embedded.yml

@@ -0,0 +1,6 @@
+description: Hide read-only embedded entities from the Canvas in the Instance Composer to make the view cleaner
+issue-nr: 6034
+change-type: patch
+destination-branches: [master]
+sections:
+  minor-improvement: "{{description}}"

src/UI/Components/Diagram/actions.test.ts

@@ -687,6 +687,38 @@ describe("appendEmbeddedEntity", () => {
       );
     },
   );
+
+  it(`doesn't append nested embedded entities with "r" modifier to the graph or paper`, () => {
+    const { graph, paper, embeddedModel } = setup();
+    const rModel = {
+      ...embeddedModel,
+      embedded_entities: [
+        { ...embeddedModel, name: "container-r", modifier: "r" },
+      ],
+    };
+    const presentedAttrs = undefined;
+    const isBlockedFromEditing = false;
+    const entityAttributes = {};
+    const embeddedTo = "123";
+    const holderName = "test";
+
+    appendEmbeddedEntity(
+      paper,
+      graph,
+      rModel,
+      entityAttributes,
+      embeddedTo,
+      holderName,
+      presentedAttrs,
+      isBlockedFromEditing,
+    );
+
+    const cells = graph.getCells();
+
+    expect(cells).toHaveLength(1);
+
+    expect(cells[0].get("entityName")).toBe("child_container");
+  });
 });
 
 describe("appendInstance", () => {
@@ -854,4 +886,28 @@ describe("appendInstance", () => {
       parent_entity: "085cdf92-0894-4b82-8d46-1dd9552e7ba3",
     });
   });
+
+  it("won't append embedded entities with modifier 'r' to the graph or paper", () => {
+    const { graph, paper } = setup();
+    const rModel: ServiceModel = {
+      ...containerModel,
+      embedded_entities: [
+        { ...containerModel.embedded_entities[0], modifier: "r" },
+      ],
+    };
+
+    const mockedInstance: InstanceWithRelations = {
+      instance: mockedInstanceWithRelations.interServiceRelations[1], // container service
+      interServiceRelations: [],
+    };
+    const isCore = true;
+
+    appendInstance(paper, graph, mockedInstance, [rModel], isCore);
+
+    const cells = graph.getCells();
+
+    expect(cells).toHaveLength(1);
+
+    expect(cells[0].get("entityName")).toBe("container-service");
+  });
 });

src/UI/Components/Diagram/actions.ts

@@ -359,25 +359,27 @@ export function appendEmbeddedEntity(
     instanceAsTable.addTo(graph);
 
     //iterate through embedded entities to create and connect them
-    embeddedEntity.embedded_entities.forEach((entity) => {
-      const appendedEntity = appendEmbeddedEntity(
-        paper,
-        graph,
-        entity,
-        entityInstance[entity.name] as InstanceAttributeModel,
-        instanceAsTable.id as string,
-        embeddedEntity.name,
-        presentedAttr,
-        isBlockedFromEditing,
-      );
+    embeddedEntity.embedded_entities
+      .filter((entity) => entity.modifier !== "r") // filter out read-only embedded entities to de-clutter the view as they can't be edited and can be in multiple places which would result with enormous tree of cells in the graph and the canvas
+      .forEach((entity) => {
+        const appendedEntity = appendEmbeddedEntity(
+          paper,
+          graph,
+          entity,
+          entityInstance[entity.name] as InstanceAttributeModel,
+          instanceAsTable.id as string,
+          embeddedEntity.name,
+          presentedAttr,
+          isBlockedFromEditing,
+        );
 
-      connectEntities(
-        graph,
-        instanceAsTable,
-        appendedEntity,
-        isBlockedFromEditing,
-      );
-    });
+        connectEntities(
+          graph,
+          instanceAsTable,
+          appendedEntity,
+          isBlockedFromEditing,
+        );
+      });
 
     const relations = embeddedEntity.inter_service_relations || [];
 
@@ -613,11 +615,12 @@ function addEmbeddedEntities(
   isBlockedFromEditing = false,
 ): ServiceEntityBlock[] {
   const { embedded_entities } = serviceModel;
-
   //iterate through embedded entities to create and connect them
-  //we are basing iteration on service Model, if there is no value in the instance, skip that entity
+  //we are basing iteration on service Model, if there is no value in the instance and if the value has modifier set to "r", skip that entity - "r" entities are read-only, they can't be edited and can be in multiple places which would result with enormous tree of cells in the graph and the canvas which would discourage user from using the Instance Composer
   const createdEmbedded = embedded_entities
-    .filter((entity) => !!attributesValues[entity.name])
+    .filter(
+      (entity) => !!attributesValues[entity.name] && entity.modifier !== "r",
+    )
     .flatMap((entity) => {
       const appendedEntities = appendEmbeddedEntity(
         paper,

src/UI/Components/Diagram/stencil/helpers.ts

@@ -15,19 +15,21 @@ import { HeaderColor } from "../interfaces";
 export const transformEmbeddedToStencilElements = (
   service: ServiceModel | EmbeddedEntity,
 ): shapes.standard.Path[] => {
-  return service.embedded_entities.flatMap((embedded_entity) => {
-    const stencilElement = createStencilElement(
-      embedded_entity.name,
-      embedded_entity,
-      {},
-      true,
-      service.name,
-    );
-    const nestedStencilElements =
-      transformEmbeddedToStencilElements(embedded_entity);
+  return service.embedded_entities
+    .filter((embedded_entity) => embedded_entity.modifier !== "r") // filter out read-only embedded entities from the stencil as they can't be created by the user
+    .flatMap((embedded_entity) => {
+      const stencilElement = createStencilElement(
+        embedded_entity.name,
+        embedded_entity,
+        {},
+        true,
+        service.name,
+      );
+      const nestedStencilElements =
+        transformEmbeddedToStencilElements(embedded_entity);
 
-    return [stencilElement, ...nestedStencilElements];
-  });
+      return [stencilElement, ...nestedStencilElements];
+    });
 };
 
 /**