Change icons and add key to react component

mff-uk · Jan 22, 2025 · 324d9d5 · 324d9d5
1 parent c83fb13
commit 324d9d5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/applications/conceptual-model-editor/src/application/localization-translations.ts b/applications/conceptual-model-editor/src/application/localization-translations.ts
@@ -234,6 +234,7 @@ export const translations: Record<string, string | Function> = {
   "class-hide-button": "Remove class from canvas",
   "class-profile-button": "Create class profile",
   "class-remove-button": "Remove class from semantic model",
+  "edit-node-attributes-visiblity-button": "Edit visibility of attributes on node",
   //
   "add-neighborhood-button.title": "Add entity's neighborhood (Classes or class profiles connected by either association or generalization)",
   //

diff --git a/applications/conceptual-model-editor/src/diagram/node/entity-node.tsx b/applications/conceptual-model-editor/src/diagram/node/entity-node.tsx
@@ -86,8 +86,8 @@ export const EntityNode = (props: NodeProps<Node<ApiNode>>) => {
           </div>
           {data.items.map(item =>
           {
-            return <li className="relative flex w-full flex-row justify-between z-50">
-              <EntityNodeItem key={item.identifier} item={item} />
+            return <li key={`${item.identifier}-li`} className="relative flex w-full flex-row justify-between z-50">
+              <EntityNodeItem item={item} />
               {props.selected !== true ? null :
                 <div>
                   <button onClick={(_) => moveAttributeUp(item.identifier)}>🔼</button>
@@ -162,14 +162,16 @@ function PrimaryNodeMenu(props: NodeProps<Node<ApiNode>>) {
         &nbsp;
         <button onClick={onCreateProfile} title={t("class-profile-button")}>🧲</button>
         &nbsp;
+        <button onClick={onEditAttributes} title={t("edit-node-attributes-visiblity-button")}>📏</button>
+        &nbsp;
       </NodeToolbar>
       <NodeToolbar isVisible={shouldShowToolbar} position={Position.Right} className="flex gap-2 entity-node-menu" >
         <Handle type="source" position={Position.Right} title={t("node-connection-handle")}>🔗</Handle>
       </NodeToolbar>
       {
         !isPartOfGroup ? null :
           <NodeToolbar isVisible={shouldShowToolbar} position={Position.Left} className="flex gap-2 entity-node-menu" >
-            <button onClick={onDissolveGroup} title={t("dissolve-group-button")}>❌</button>
+            <button onClick={onDissolveGroup} title={t("dissolve-group-button")}>⛓️‍💥</button>
           </NodeToolbar>
       }
       <NodeToolbar isVisible={shouldShowToolbar} position={Position.Bottom} className="flex gap-2 entity-node-menu" >
@@ -181,8 +183,6 @@ function PrimaryNodeMenu(props: NodeProps<Node<ApiNode>>) {
         &nbsp;
         <button onClick={onAddAttribute} title={addAttributeTitle} >➕</button>
         &nbsp;
-        <button onClick={onEditAttributes}>Edit Attributes</button>
-        &nbsp;
       </NodeToolbar>
     </>);
 }
@@ -215,7 +215,7 @@ function SelectionMenu(props: NodeProps<Node<ApiNode>>) {
       &nbsp;
     </NodeToolbar>
     <NodeToolbar isVisible={shouldShowMenu} position={Position.Right} className="flex gap-2 entity-node-menu" >
-      <button onClick={onCreateGroup} title={t("selection-group-button")}>🤝</button>
+      <button onClick={onCreateGroup} title={t("selection-group-button")}>⛓️</button>
     </NodeToolbar>
     <NodeToolbar isVisible={shouldShowMenu} position={Position.Bottom} className="flex gap-2 entity-node-menu" >
       <button onClick={onShowExpandSelection} title={t("selection-extend-button")} >📈</button>