Allow creation of groups with same label

Author: FloSch62

src/topoViewer/webview-ui/managerCopyPaste.ts

@@ -177,6 +177,7 @@ export class CopyPasteManager {
    * @param usedIds - Set of ids already used in the graph.
    * @param usedNames - Set of names already used in the graph.
    */
+  // eslint-disable-next-line aggregate-complexity/aggregate-complexity
   private createNode(el: any, usedIds: Set<string>, usedNames: Set<string>) {
     const isTemplateNode = el.data.id.startsWith('nodeId-');
     let newId: string;
@@ -191,11 +192,16 @@ export class CopyPasteManager {
         .reduce((max, current) => Math.max(max, current), 0);
       newId = `nodeId-${maxId + 1}`;
     } else {
-      newId = this.getUniqueId(el.data.name || el.data.id, usedIds, el.data.topoViewerRole === 'group');
-      nodeName = newId;
+      const isGroup = el.data.topoViewerRole === 'group';
+      newId = this.getUniqueId(el.data.name || el.data.id, usedIds, isGroup);
+      if (isGroup) {
+        nodeName = el.data.name || el.data.label || newId.split(':')[0];
+      } else {
+        nodeName = newId;
+      }
     }
 
-    let nodeLabel = nodeName;
+    let nodeLabel = el.data.label || nodeName;
     if (newId.startsWith('dummy')) {
       nodeName = 'dummy';
       nodeLabel = 'dummy';

src/topoViewer/webview-ui/managerGroupManagement.ts

@@ -554,10 +554,19 @@ export class ManagerGroupManagement {
     }
   }
 
-  private ensureUniqueParentId(newParentId: string): void {
-    if (!this.cy.getElementById(newParentId).empty()) {
-      throw new Error(`A node with the new parent ID "${newParentId}" already exists.`);
+  private ensureUniqueParentId(newParentId: string): string {
+    const [group, levelStr] = newParentId.split(':');
+    let level = parseInt(levelStr, 10);
+    if (!level || isNaN(level)) level = 1;
+    let candidate = `${group}:${level}`;
+    while (!this.cy.getElementById(candidate).empty()) {
+      level++;
+      candidate = `${group}:${level}`;
     }
+    if (candidate !== newParentId) {
+      log.debug(`Adjusted parent ID to ensure uniqueness: ${candidate}`);
+    }
+    return candidate;
   }
 
   private replaceParentNode(
@@ -619,7 +628,7 @@ export class ManagerGroupManagement {
         throw new Error('Graph group or graph level input is empty.');
       }
 
-      const newParentId = `${graphGroup}:${graphLevel}`;
+      let newParentId = `${graphGroup}:${graphLevel}`;
       const labelPos = inputs.labelPositionEl.textContent?.trim().toLowerCase() || '';
       const style = this.buildParentStyle(newParentId, inputs);
 
@@ -632,7 +641,7 @@ export class ManagerGroupManagement {
         return;
       }
 
-      this.ensureUniqueParentId(newParentId);
+      newParentId = this.ensureUniqueParentId(newParentId);
       this.replaceParentNode(oldParentNode, parentNodeId, newParentId, graphGroup, graphLevel, style, labelPos);
       inputs.parentIdEl.textContent = newParentId;
       log.info(`Parent node updated successfully. New parent ID: ${newParentId}`);

src/topoViewer/webview-ui/utilities/idUtils.ts

@@ -47,6 +47,16 @@ export function generateSpecialNodeId(baseName: string, usedIds: Set<string>): s
 }
 
 export function generateRegularNodeId(baseName: string, usedIds: Set<string>, isGroup: boolean): string {
+  if (isGroup) {
+    let num = 1;
+    let id = `${baseName}:${num}`;
+    while (usedIds.has(id)) {
+      num++;
+      id = `${baseName}:${num}`;
+    }
+    return id;
+  }
+
   let i = baseName.length - 1;
   while (i >= 0 && baseName[i] >= '0' && baseName[i] <= '9') i--;
   const hasNumber = i < baseName.length - 1;
@@ -55,12 +65,7 @@ export function generateRegularNodeId(baseName: string, usedIds: Set<string>, is
   if (hasNumber) {
     num = parseInt(baseName.slice(i + 1), 10);
   } else {
-    num = isGroup ? 0 : 1;
-  }
-
-  if (isGroup) {
-    while (usedIds.has(`${base}${num || ''}:1`)) num++;
-    return `${base}${num || ''}:1`;
+    num = 1;
   }
   while (usedIds.has(`${base}${num}`)) num++;
   return `${base}${num}`;

test/unit/topoViewer/managerCopyPaste.duplicateGroupLabel.test.ts

@@ -0,0 +1,42 @@
+/* eslint-env mocha */
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+import cytoscape from 'cytoscape';
+import { CopyPasteManager } from '../../../src/topoViewer/webview-ui/managerCopyPaste';
+import { ManagerGroupStyle } from '../../../src/topoViewer/webview-ui/managerGroupStyle';
+import { ManagerFreeText } from '../../../src/topoViewer/webview-ui/managerFreeText';
+
+(globalThis as any).window = globalThis;
+
+describe('CopyPasteManager duplicate groups', () => {
+  it('keeps label and generates sequential ids on paste', () => {
+    const cy = cytoscape({ headless: true, elements: [
+      { data: { id: 'test:1', name: 'test', label: 'test', topoViewerRole: 'group', extraData: {
+        clabServerUsername: '', weight: '', name: '', topoViewerGroup: 'test', topoViewerGroupLevel: '1'
+      } } }
+    ]});
+    const messageSender = { sendMessageToVscodeEndpointPost: async () => ({}) } as any;
+    const groupStyle = new ManagerGroupStyle(cy, messageSender);
+    const freeText = { addFreeTextAnnotation: () => {}, getAnnotations: () => [] } as unknown as ManagerFreeText;
+    const mgr = new CopyPasteManager(cy, messageSender, groupStyle, freeText);
+
+    const copyData = {
+      elements: [
+        { group: 'nodes', data: { id: 'test:1', name: 'test', label: 'test', topoViewerRole: 'group', extraData: {
+          clabServerUsername: '', weight: '', name: '', topoViewerGroup: 'test', topoViewerGroupLevel: '1'
+        } }, position: { x: 0, y: 0 } }
+      ],
+      annotations: { groupStyleAnnotations: [], freeTextAnnotations: [], cloudNodeAnnotations: [], nodeAnnotations: [] },
+      originalCenter: { x: 0, y: 0 }
+    };
+
+    mgr.performPaste(copyData);
+
+    const ids = cy.nodes().map(n => n.id());
+    expect(ids).to.include('test:1');
+    expect(ids).to.include('test:2');
+    const newGroup = cy.getElementById('test:2');
+    expect(newGroup.data('name')).to.equal('test');
+    expect(newGroup.data('label')).to.equal('test');
+  });
+});

test/unit/topoViewer/managerGroupManagement.allowDuplicateLabel.test.ts

@@ -0,0 +1,45 @@
+/* eslint-env mocha */
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+import cytoscape from 'cytoscape';
+import { ManagerGroupManagement } from '../../../src/topoViewer/webview-ui/managerGroupManagement';
+import { ManagerGroupStyle } from '../../../src/topoViewer/webview-ui/managerGroupStyle';
+
+(globalThis as any).window = globalThis;
+
+describe('ManagerGroupManagement duplicate group labels', () => {
+  it('allows creating groups with identical labels by generating unique ids', async () => {
+    const cy = cytoscape({ headless: true, elements: [
+      { data: { id: 'group1:1', name: 'group1', topoViewerRole: 'group', extraData: {
+        clabServerUsername: '', weight: '', name: '', topoViewerGroup: 'group1', topoViewerGroupLevel: '1'
+      } } },
+      { data: { id: 'group2:1', name: 'group2', topoViewerRole: 'group', extraData: {
+        clabServerUsername: '', weight: '', name: '', topoViewerGroup: 'group2', topoViewerGroupLevel: '1'
+      } } }
+    ]});
+    const messageSender = { sendMessageToVscodeEndpointPost: async () => ({}) } as any;
+    const styleManager = new ManagerGroupStyle(cy, messageSender);
+    const mgr = new ManagerGroupManagement(cy, styleManager, 'edit');
+
+    const elements: Record<string, any> = {
+      'panel-node-editor-parent-graph-group-id': { textContent: 'group2:1' },
+      'panel-node-editor-parent-graph-group': { value: 'group1' },
+      'panel-node-editor-parent-graph-level': { value: '1' },
+      'panel-node-editor-parent-label-dropdown-button-text': { textContent: 'top-center' },
+      'panel-node-editor-parent-bg-color': { value: '#d9d9d9' },
+      'panel-node-editor-parent-border-color': { value: '#DDDDDD' },
+      'panel-node-editor-parent-border-width': { value: '0.5' },
+      'panel-node-editor-parent-text-color': { value: '#EBECF0' }
+    };
+    (globalThis as any).document = { getElementById: (id: string) => elements[id] } as any;
+    (globalThis as any).sendMessageToVscodeEndpointPost = async () => {};
+
+    await mgr.nodeParentPropertiesUpdate();
+
+    const ids = cy.nodes().map(n => n.id());
+    expect(ids).to.include('group1:1');
+    expect(ids).to.include('group1:2');
+    const group1Nodes = cy.nodes().filter(n => n.data('name') === 'group1');
+    expect(group1Nodes.length).to.equal(2);
+  });
+});