Add attribute manipulation to the CME

applications/conceptual-model-editor/package.json

@@ -20,7 +20,8 @@
     "iri": "^1.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tsx": "^4.19.2"
+    "tsx": "^4.19.2",
+    "@hello-pangea/dnd": "17.0.0"
   },
   "devDependencies": {
     "@eslint/config-array": "^0.19.1",

applications/conceptual-model-editor/src/action/actions-react-binding.tsx

@@ -25,7 +25,7 @@ import { addSemanticClassProfileToVisualModelAction } from "./add-class-profile-
 import { addSemanticGeneralizationToVisualModelAction } from "./add-generalization-to-visual-model";
 import { addSemanticRelationshipToVisualModelAction } from "./add-relationship-to-visual-model";
 import { addSemanticRelationshipProfileToVisualModelAction } from "./add-relationship-profile-to-visual-model";
-import { EntityToDelete, convertToEntitiesToDeleteType, findTopLevelGroupFromVisualModel, getSelections, getViewportCenterForClassPlacement, setSelectionsInDiagram } from "./utilities";
+import { EntityToDelete, checkIfIsAttributeOrAttributeProfile, convertToEntitiesToDeleteType, findTopLevelGroupFromVisualModel, getSelections, getViewportCenterForClassPlacement, setSelectionsInDiagram } from "./utilities";
 import { removeFromVisualModelAction } from "./remove-from-visual-model";
 import { removeFromSemanticModelsAction } from "./remove-from-semantic-model";
 import { openCreateAttributeDialogAction } from "./open-create-attribute-dialog";
@@ -49,6 +49,13 @@ import { EntityModel } from "@dataspecer/core-v2";
 import { openCreateAttributeForEntityDialogAction } from "./open-add-attribute-for-entity-dialog";
 import { addGroupToVisualModelAction } from "./add-group-to-visual-model";
 import { removeTopLevelGroupFromVisualModelAction } from "./remove-group-from-visual-model";
+import { openCreateClassDialogAndCreateAssociationAction, openCreateClassDialogAndCreateGeneralizationAction } from "./open-create-class-dialog-with-edge";
+import { removeAttributesFromVisualModelAction } from "./remove-attribute-from-visual-model";
+import { addSemanticAttributeToVisualModelAction } from "./add-semantic-attribute-to-visual-model";
+import { ShiftAttributeDirection, shiftAttributePositionAction } from "./shift-attribute";
+import { openEditNodeAttributesDialogAction } from "./open-edit-node-attributes-dialog";
+import { EditAttributeDialogState } from "../dialog/attribute/edit-attribute-dialog-controller";
+import { EditAttributeProfileDialogState } from "../dialog/attribute-profile/edit-attribute-profile-dialog-controller";
 
 const LOG = createLogger(import.meta.url);
 
@@ -90,7 +97,22 @@ interface DialogActions {
    * Opens dialog, which purpose is to create new attribute in model identified by {@link model}.
    * @param model is the identifier of the semantic model.
    */
-  openCreateAttributeDialog: (model: string) => void;
+  openCreateAttributeDialogForModel: (model: string) => void;
+
+  /**
+   * Opens dialog, which purpose is to create new attribute with domain class identified by {@link classIdentifier}.
+   * On successful creation {@link onConfirmCallback} is called.
+   * @param classIdentifier is the identifier of the class, which will be domain for the attribute.
+   * @param onConfirmCallback This callback is called after we sucessfully create attribute.
+   *                          Set to null, if there is no callback.
+   */
+  openCreateAttributeDialogForClass: (
+    classIdentifier: string,
+    onConfirmCallback: ((state: EditAttributeDialogState | EditAttributeProfileDialogState, createdAttributeIdentifier: string) => void) | null
+  ) => void;
+
+  // TODO RadStr: Document
+  openEditNodeAttributesDialog: (nodeIdentifier: string) => void;
 
   /**
    * @deprecated Use specialized method for given entity type.
@@ -164,6 +186,11 @@ interface VisualModelActions {
    */
   addRelationProfileToVisualModel: (model: string, identifier: string) => void;
 
+  // TODO RadStr: Document
+  addAttributeToVisualModel: (attribute: string, domainClass: string | null) => void;
+  shiftAttributeUp: (attribute: string, domainNode: string | null) => void;
+  shiftAttributeDown: (attribute: string, domainNode: string | null) => void;
+
   // TODO PRQuestion - different docs from this method and for the actual action
   /**
    * Removes the visual entities identified by given {@link identifier} from visual model.
@@ -172,6 +199,9 @@ interface VisualModelActions {
    */
   removeFromVisualModel: (identifiers: string[]) => void;
 
+  // TODO RadStr: Document
+  removeAttributesFromVisualModel: (attributes: string[]) => void;
+
   //
 
   //
@@ -249,7 +279,9 @@ const noOperationActionsContext = {
   openModifyDialog: noOperation,
   openCreateClassDialog: noOperation,
   openCreateAssociationDialog: noOperation,
-  openCreateAttributeDialog: noOperation,
+  openCreateAttributeDialogForModel: noOperation,
+  openCreateAttributeDialogForClass: noOperation,
+  openEditNodeAttributesDialog: noOperation,
   openCreateProfileDialog: noOperation,
   //
   addSemanticEntitiesToVisualModel: noOperation,
@@ -258,9 +290,13 @@ const noOperationActionsContext = {
   addGeneralizationToVisualModel: noOperation,
   addRelationToVisualModel: noOperation,
   addRelationProfileToVisualModel: noOperation,
+  addAttributeToVisualModel: noOperation,
+  shiftAttributeUp: noOperation,
+  shiftAttributeDown: noOperation,
   deleteFromSemanticModels: noOperation,
   //
   removeFromVisualModel: noOperation,
+  removeAttributesFromVisualModel: noOperation,
   centerViewportToVisualEntity: noOperation,
   //
   createNewVisualModelFromSelection: noOperation,
@@ -454,11 +490,14 @@ function createActionsContext(
     });
   }
 
-  const addAttributeForNode = (identifier: string) => {
+  const openCreateAttributeDialogForClass = (
+    classIdentifier: string,
+    onConfirmCallback: ((state: EditAttributeDialogState | EditAttributeProfileDialogState, createdAttributeIdentifier: string) => void) | null
+  ) => {
     withVisualModel(notifications, graph, (visualModel) => {
       openCreateAttributeForEntityDialogAction(
         options, dialogs, classes, graph, notifications,
-        visualModel, identifier);
+        visualModel, classIdentifier, onConfirmCallback);
     });
   };
 
@@ -486,7 +525,7 @@ function createActionsContext(
     if (modelInstance === null || modelInstance instanceof InMemorySemanticModel) {
       openCreateClassDialogAction(
         options, dialogs, classes, graph, notifications, visualModel,
-        diagram, modelInstance, null);
+        diagram, modelInstance, null, null);
     } else {
       notifications.error("Can not add to given model.");
     }
@@ -504,18 +543,24 @@ function createActionsContext(
     }
   };
 
-  const openCreateAttributeDialog = (model: string) => {
+  const openCreateAttributeDialogForModel = (model: string) => {
     const visualModel = graph.aggregatorView.getActiveVisualModel();
     const modelInstance = graph.models.get(model);
     if (modelInstance === null || modelInstance instanceof InMemorySemanticModel) {
       openCreateAttributeDialogAction(
-        options, dialogs, classes, graph, notifications, visualModel,
-        modelInstance);
+        options, dialogs, classes, graph, notifications,
+        visualModel, modelInstance);
     } else {
       notifications.error("Can not add to given model.");
     }
   };
 
+  const openEditNodeAttributesDialog = (nodeIdentifier: string) => {
+    withVisualModel(notifications, graph, (visualModel) => {
+      openEditNodeAttributesDialogAction(
+        dialogs, notifications, classes, options, visualModel, nodeIdentifier);
+    });
+  };
   // Visual model actions.
 
   const addSemanticEntitiesToVisualModel = (entities: EntityToAddToVisualModel[]): void => {
@@ -560,18 +605,62 @@ function createActionsContext(
     });
   };
 
+  const addAttributeToVisualModel = (attribute: string, domainClass: string | null): void => {
+    if(domainClass === null) {
+      notifications.error("Adding attribute to domain class which is null");
+      return;
+    }
+    withVisualModel(notifications, graph, (visualModel) => {
+      addSemanticAttributeToVisualModelAction(notifications, visualModel, domainClass, attribute, null);
+    });
+  };
+
+  const shiftAttributeUp = (attribute: string, domainNode: string | null): void => {
+    if(domainNode === null) {
+      notifications.error("Shifting attribute in domain node which is null");
+      return;
+    }
+    withVisualModel(notifications, graph, (visualModel) => {
+      shiftAttributePositionAction(notifications, visualModel, domainNode, attribute, ShiftAttributeDirection.UP, 1);
+    });
+  };
+
+  const shiftAttributeDown = (attribute: string, domainNode: string | null): void => {
+    if(domainNode === null) {
+      notifications.error("Shifting attribute in domain node which is null");
+      return;
+    }
+    withVisualModel(notifications, graph, (visualModel) => {
+      shiftAttributePositionAction(notifications, visualModel, domainNode, attribute, ShiftAttributeDirection.DOWN, 1);
+    });
+  };
+
   const removeFromVisualModel = (identifiers: string[]): void => {
     withVisualModel(notifications, graph, (visualModel) => {
       removeFromVisualModelAction(notifications, visualModel, identifiers);
     });
   };
 
+  const removeAttributesFromVisualModel = (attributes: string[]): void => {
+    withVisualModel(notifications, graph, (visualModel) => {
+      removeAttributesFromVisualModelAction(notifications, classes, visualModel, attributes);
+    });
+  };
+
   // ...
 
   const deleteFromSemanticModels = (entitiesToDelete: EntityToDelete[]) => {
     // We start be removing from the visual model.
     withVisualModel(notifications, graph, (visualModel) => {
-      removeFromVisualModelAction(notifications, visualModel, entitiesToDelete.map(entitiesToDelete => entitiesToDelete.identifier));
+      const entityToDeleteWithAttributeData = entitiesToDelete.map(entityToDelete =>
+        ({...entityToDelete,
+          isAttributeOrAttributeProfile: checkIfIsAttributeOrAttributeProfile(entityToDelete.identifier, graph.models, entityToDelete.sourceModel)
+        })
+      );
+      const attributesToBeDeleted = entityToDeleteWithAttributeData.filter(entity => entity.isAttributeOrAttributeProfile);
+      const notAttributesToBeDeleted = entityToDeleteWithAttributeData.filter(entity => !entity.isAttributeOrAttributeProfile);
+      removeFromVisualModelAction(notifications, visualModel, notAttributesToBeDeleted.map(entitiesToDelete => entitiesToDelete.identifier));
+      removeAttributesFromVisualModelAction(notifications, classes, visualModel, attributesToBeDeleted.map(entitiesToDelete => entitiesToDelete.identifier));
     });
     removeFromSemanticModelsAction(notifications, graph, entitiesToDelete);
   };
@@ -706,7 +795,7 @@ function createActionsContext(
 
     onChangeWaypointPositions: changeWaypointPositions,
 
-    onAddAttributeForNode: (node) => addAttributeForNode(node.externalIdentifier),
+    onAddAttributeForNode: (node) => openCreateAttributeDialogForClass(node.externalIdentifier, null),
 
     onCreateConnectionToNode: (source, target) => {
       openCreateConnectionDialog(source.externalIdentifier, target.externalIdentifier);
@@ -759,11 +848,30 @@ function createActionsContext(
     },
     onShowFilterSelection: () => {
       const selectionToFilter = getSelections(diagram, false, true);
-      openFilterSelectionDialog({ nodeSelection: selectionToFilter.nodeSelection, edgeSelection: selectionToFilter.edgeSelection, areVisualModelIdentifiers: true });
+      openFilterSelectionDialog({
+        nodeSelection: selectionToFilter.nodeSelection,
+        edgeSelection: selectionToFilter.edgeSelection,
+        areVisualModelIdentifiers: true
+      });
     },
     onCanvasOpenCreateClassDialog: (nodeIdentifier, positionToPlaceClassOn) => {
       withVisualModel(notifications, graph, (visualModel) => {
-        openCreateClassDialogWithModelDerivedFromClassAction(notifications, graph, dialogs, classes, options, diagram, visualModel, nodeIdentifier, positionToPlaceClassOn);
+        openCreateClassDialogWithModelDerivedFromClassAction(notifications, graph, dialogs, classes, options,
+          diagram, visualModel, nodeIdentifier, positionToPlaceClassOn, null);
+      });
+    },
+    onCanvasOpenCreateClassDialogWithAssociation: (nodeIdentifier, positionToPlaceClassOn, isCreatedClassTarget) => {
+      withVisualModel(notifications, graph, (visualModel) => {
+        openCreateClassDialogAndCreateAssociationAction(notifications, dialogs, classes, options, graph,
+          diagram, visualModel, nodeIdentifier, isCreatedClassTarget, positionToPlaceClassOn);
+      });
+    },
+    onCanvasOpenCreateClassDialogWithGeneralization: (nodeIdentifier, positionToPlaceClassOn, isCreatedClassParent) => {
+      withVisualModel(notifications, graph, (visualModel) => {
+        openCreateClassDialogAndCreateGeneralizationAction(
+          notifications, dialogs, classes, useClasses, options, graph, diagram,
+          visualModel, nodeIdentifier, isCreatedClassParent, positionToPlaceClassOn,
+        );
       });
     },
     onCreateNewViewFromSelection: () => {
@@ -797,7 +905,9 @@ function createActionsContext(
     openModifyDialog,
     openCreateClassDialog,
     openCreateAssociationDialog,
-    openCreateAttributeDialog,
+    openCreateAttributeDialogForModel,
+    openCreateAttributeDialogForClass,
+    openEditNodeAttributesDialog,
     openCreateProfileDialog,
     //
     addSemanticEntitiesToVisualModel,
@@ -806,7 +916,11 @@ function createActionsContext(
     addGeneralizationToVisualModel,
     addRelationToVisualModel,
     addRelationProfileToVisualModel,
+    addAttributeToVisualModel,
+    shiftAttributeUp,
+    shiftAttributeDown,
     removeFromVisualModel,
+    removeAttributesFromVisualModel,
     //
     deleteFromSemanticModels,
     centerViewportToVisualEntity,

applications/conceptual-model-editor/src/action/add-class-neighborhood-to-visual-model.ts

@@ -26,5 +26,5 @@ export const addClassNeighborhoodToVisualModelAction = (
     // We have to filter the source class, whose neighborhood we are adding, from the extension
     classesOrClassProfilesToAdd.push(...neighborhood.selectionExtension.nodeSelection.filter(node => node !== identifier).map(node => ({identifier: node, position: null})));
     addSemanticEntitiesToVisualModelAction(notifications, classes, graph, visualModel, diagram, classesOrClassProfilesToAdd);
-  })
+  });
 };

applications/conceptual-model-editor/src/action/add-class-profile-to-visual-model.ts

@@ -10,6 +10,7 @@ import { ClassesContextType } from "../context/classes-context";
 import { findPositionForNewNodesUsingLayouting } from "./layout-visual-model";
 import { findSourceModelOfEntity } from "../service/model-service";
 import { createLogger } from "../application";
+import { getVisualNodeContentBasedOnExistingEntities } from "./add-semantic-attribute-to-visual-model";
 
 const LOG = createLogger(import.meta.url);
 
@@ -43,20 +44,23 @@ export async function addSemanticClassProfileToVisualModelAction(
     entityIdentifier, model.getId(),
     isSemanticModelClassUsage, (entity) => {
       addSemanticClassProfileToVisualModelCommand(
-        visualModel, entity, model.getId(),
-        position);
+        classes, visualModel, entity,
+        model.getId(), position);
       addRelatedEntitiesAction(
         notifications, graph, visualModel, Object.values(entities),
         graph.models, entity);
     });
 }
 
 function addSemanticClassProfileToVisualModelCommand(
+  classes: ClassesContextType,
   visualModel: WritableVisualModel,
   entity: SemanticModelClassUsage,
   model: string,
   position: { x: number, y: number },
 ) {
+  const content = getVisualNodeContentBasedOnExistingEntities(
+    classes, entity);
   visualModel.addVisualNode({
     model: model,
     representedEntity: entity.id,
@@ -65,7 +69,7 @@ function addSemanticClassProfileToVisualModelCommand(
       y: position.y,
       anchored: null,
     },
-    content: [],
+    content,
     visualModels: [],
   });
 }

applications/conceptual-model-editor/src/action/add-class-to-visual-model.ts

@@ -9,6 +9,7 @@ import { addRelatedEntitiesAction } from "./add-related-entities-to-visual-model
 import { findPositionForNewNodesUsingLayouting } from "./layout-visual-model";
 import { ClassesContextType } from "../context/classes-context";
 import { addVisualNode } from "../dataspecer/visual-model/command/add-visual-node";
+import { getVisualNodeContentBasedOnExistingEntities } from "./add-semantic-attribute-to-visual-model";
 
 export async function addSemanticClassToVisualModelAction(
   notifications: UseNotificationServiceWriterType,
@@ -28,7 +29,10 @@ export async function addSemanticClassToVisualModelAction(
   withAggregatedEntity(notifications, entities,
     entityIdentifier, modelIdentifier,
     isSemanticModelClass, (entity) => {
-      addVisualNode(visualModel, entity, modelIdentifier, position);
+      // TODO PRQuestion: How to handle this? Put it into the addVisualNode?
+      const content = getVisualNodeContentBasedOnExistingEntities(
+        classes, entity);
+      addVisualNode(visualModel, entity, modelIdentifier, position, content);
       addRelatedEntitiesAction(
         notifications, graph, visualModel, Object.values(entities),
         graph.models, entity);