Topoeditor node type field (#178)

asadarafat · web-flow · commit 137fdfcfc09a · 2025-06-28T09:53:34.000+02:00
* initial code of type field addition in node panel of topoeditor

* Provide default node attributes for Nokia SR Linux when a node is created in the TopoEditor.

* revert to default-type

* use clab.schema.json for defining srl and sros node

* retrive existing type from clab.yaml to nodePanel and tidy up icon dropdown contents

* bumped the version
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "icon": "resources/containerlab.png",
   "description": "Manages containerlab topologies in VS Code",
   "author": "SRL Labs",
-  "version": "0.13.5",
+  "version": "0.13.6",
   "homepage": "https://containerlab.dev/manual/vsc-extension/",
   "engines": {
     "vscode": "^1.100.0"
diff --git a/src/topoViewer/backend/topoViewerAdaptorClab.ts b/src/topoViewer/backend/topoViewerAdaptorClab.ts
@@ -329,6 +329,7 @@ export class TopoViewerAdaptorClab {
               image: nodeObj.image ?? '',
               index: nodeIndex.toString(),
               kind: nodeObj.kind ?? '',
+              type: nodeObj.type ?? '',
               labdir: `clab-${clabName}/`,
               labels: nodeObj.labels ?? {},
               longname: `clab-${clabName}-${nodeName}`,
diff --git a/src/topoViewer/backend/types/topoViewerType.ts b/src/topoViewer/backend/types/topoViewerType.ts
@@ -7,6 +7,7 @@
 export interface ClabNode {
     kind?: string;
     image?: string;
+    type?: string;
     group?: string;
     labels?: Record<string, any>;
 }
diff --git a/src/topoViewer/webview-ui/html-static/css/style.css b/src/topoViewer/webview-ui/html-static/css/style.css
@@ -414,8 +414,15 @@ body {
   /* Enables vertical scrolling */
 }
 
+#panel-node-type-dropdown-content {
+  max-height: 80px;
+  /* Adjust height to show about 4 items */
+  overflow-y: auto;
+  /* Enables vertical scrolling */
+}
+
 #panel-node-topoviewerrole-dropdown-content {
-  max-height: 100px;
+  max-height: 60px;
   /* Adjust height to show about 4 items */
   overflow-y: auto;
   /* Enables vertical scrolling */
diff --git a/src/topoViewerEditor/backend/topoViewerEditorWebUiFacade.ts b/src/topoViewerEditor/backend/topoViewerEditorWebUiFacade.ts
diff --git a/src/topoViewerEditor/webview-ui/managerCytoscapeStyle.ts b/src/topoViewerEditor/webview-ui/managerCytoscapeStyle.ts
@@ -492,20 +492,23 @@ export default async function loadCytoStyle(
 /**
  * Extracts node types from an array of Cytoscape style definitions.
  *
- * This function looks for selectors of the form:
+ * This function looks for selectors matching the pattern:
  *   node[topoViewerRole="someType"]
  * and returns an array of node types (e.g., "router", "default", "pe", etc.).
  *
- * @returns An array of extracted node types.
+ * Node types with topoViewerRole set to "dummyChild" or "group" are excluded.
+ *
+ * @returns An array of extracted node types, excluding "dummyChild" and "group".
  */
 export function extractNodeIcons(): string[] {
   const nodeTypes: string[] = [];
   const regex = /node\[topoViewerRole="([^"]+)"\]/;
+  const skipList = ['dummyChild', 'group'];
 
   for (const styleDef of cytoscapeStylesBase) {
     if (typeof styleDef.selector === 'string') {
       const match = styleDef.selector.match(regex);
-      if (match && match[1]) {
+      if (match && match[1] && !skipList.includes(match[1])) {
         nodeTypes.push(match[1]);
       }
     }
@@ -515,6 +518,7 @@ export function extractNodeIcons(): string[] {
 }
 
 
+
 /**
  * Generates an encoded SVG string to be used as a background image in Cytoscape.
  *
diff --git a/src/topoViewerEditor/webview-ui/managerViewportButtons.ts b/src/topoViewerEditor/webview-ui/managerViewportButtons.ts
@@ -292,7 +292,7 @@ export class ManagerViewportButtons {
       sourceEndpoint: "",
       targetEndpoint: "",
       containerDockerExtraAttribute: { state: "", status: "" },
-      extraData: { kind: "nokia_srlinux", longname: "", image: "", mgmtIpv4Address: "" },
+      extraData: { kind: "nokia_srlinux", longname: "", image: "", type: "", mgmtIpv4Address: "" },
     };
 
     // Get the current viewport bounds
diff --git a/src/topoViewerEditor/webview-ui/managerViewportPanels.ts b/src/topoViewerEditor/webview-ui/managerViewportPanels.ts
@@ -19,8 +19,10 @@ export class ManagerViewportPanels {
   public edgeClicked: boolean = false;
   // Variables to store the current selection for dropdowns.
   private panelNodeEditorKind: string = "nokia_srlinux";
+  private panelNodeEditorType: string = "";
+  private panelNodeEditorUseDropdownForType: boolean = false;
   private panelNodeEditorTopoViewerRole: string = "pe";
-
+  private nodeSchemaData: any = null;
   /**
    * Creates an instance of ManagerViewportPanels.
    * @param viewportButtons - The ManagerViewportButtons instance.
@@ -125,6 +127,12 @@ export class ManagerViewportPanels {
       panelNodeEditorImageLabel.value = 'ghcr.io/nokia/srlinux:latest';
     }
 
+    // Set the node type in the editor.
+    const extraData = node.data('extraData') || {};
+    this.panelNodeEditorKind = extraData.kind || this.panelNodeEditorKind;
+    this.panelNodeEditorType = extraData.type || '';
+    this.panelNodeEditorUseDropdownForType = false;
+
     // Set the node group in the editor.
     const panelNodeEditorGroupLabel = document.getElementById("panel-node-editor-group") as HTMLInputElement;
     if (panelNodeEditorGroupLabel) {
@@ -149,21 +157,24 @@ export class ManagerViewportPanels {
       }
       const jsonData = await response.json();
 
+      this.nodeSchemaData = jsonData;
+
       // Get kind enums from the JSON schema.
       const { kindOptions } = this.panelNodeEditorGetKindEnums(jsonData);
       console.log('Kind Enum:', kindOptions);
       // Populate the kind dropdown.
       this.panelNodeEditorPopulateKindDropdown(kindOptions);
 
+      const typeOptions = this.panelNodeEditorGetTypeEnumsByKindPattern(jsonData, `(${this.panelNodeEditorKind})`);
+      this.panelNodeEditorSetupTypeField(typeOptions);
+
       // Then call the function:
       const nodeIcons = extractNodeIcons();
       console.log("Extracted node icons:", nodeIcons);
 
       this.panelNodeEditorPopulateTopoViewerRoleDropdown(nodeIcons);
 
-      // List type enums based on a kind pattern.
-      const typeOptions = this.panelNodeEditorGetTypeEnumsByKindPattern(jsonData, '(srl|nokia_srlinux)');
-      console.log('Type Enum for (srl|nokia_srlinux):', typeOptions);
+
 
       // Register the close button event.
       const panelNodeEditorCloseButton = document.getElementById("panel-node-editor-close-button");
@@ -214,7 +225,7 @@ export class ManagerViewportPanels {
       const panelLinkEditorIdLabelSaveBtn = document.getElementById("panel-link-editor-save-button");
 
       // if (!panelLinkEditorIdLabel || !panelLinkEditor || !panelLinkEditorIdLabelSrcInput || !panelLinkEditorIdLabelTgtInput || !panelLinkEditorIdLabelCloseBtn || !panelLinkEditorIdLabelSaveBtn) {
-            if (!panelLinkEditorIdLabel || !panelLinkEditor || !panelLinkEditorIdLabelSrcInput || !panelLinkEditorIdLabelTgtInput || !panelLinkEditorIdLabelSaveBtn) {
+      if (!panelLinkEditorIdLabel || !panelLinkEditor || !panelLinkEditorIdLabelSrcInput || !panelLinkEditorIdLabelTgtInput || !panelLinkEditorIdLabelSaveBtn) {
 
         console.error("panelEdgeEditor: missing required DOM elements");
         return;
@@ -314,6 +325,8 @@ export class ManagerViewportPanels {
     // Get the input values.
     const nodeNameInput = document.getElementById("panel-node-editor-name") as HTMLInputElement;
     const nodeImageInput = document.getElementById("panel-node-editor-image") as HTMLInputElement;
+    const typeDropdownTrigger = document.querySelector("#panel-node-type-dropdown .dropdown-trigger button span");
+    const typeInput = document.getElementById("panel-node-editor-type-input") as HTMLInputElement;
 
     // Retrieve dropdown selections.
     const kindDropdownTrigger = document.querySelector("#panel-node-kind-dropdown .dropdown-trigger button span");
@@ -325,13 +338,23 @@ export class ManagerViewportPanels {
     const newName = nodeNameInput.value;                    // the new name
 
     // Build updated extraData, preserving other fields.
+    const typeValue = this.panelNodeEditorUseDropdownForType
+      ? (typeDropdownTrigger ? (typeDropdownTrigger as HTMLElement).textContent || '' : '')
+      : (typeInput ? typeInput.value : '');
+
     const updatedExtraData = {
       ...currentData.extraData,
       name: nodeNameInput.value,
       image: nodeImageInput.value,
       kind: kindDropdownTrigger ? kindDropdownTrigger.textContent : 'nokia_srlinux',
     };
 
+    if (this.panelNodeEditorUseDropdownForType || typeValue.trim() !== '') {
+      updatedExtraData.type = typeValue;
+    } else if ('type' in updatedExtraData) {
+      delete updatedExtraData.type;
+    }
+
     // Build the updated data object.
     const updatedData = {
       ...currentData,
@@ -428,6 +451,73 @@ export class ManagerViewportPanels {
         console.log(`${this.panelNodeEditorKind} selected`);
         dropdownTrigger.textContent = this.panelNodeEditorKind;
         dropdownContainer.classList.remove("is-active");
+        const typeOptions = this.panelNodeEditorGetTypeEnumsByKindPattern(this.nodeSchemaData, `(${option})`);
+        // Reset the stored type when kind changes
+        this.panelNodeEditorType = "";
+        this.panelNodeEditorSetupTypeField(typeOptions);
+      });
+
+    dropdownContent.appendChild(optionElement);
+    });
+  }
+
+  private panelNodeEditorSetupTypeField(options: string[]): void {
+    const dropdown = document.getElementById("panel-node-type-dropdown");
+    const input = document.getElementById("panel-node-editor-type-input") as HTMLInputElement;
+
+    if (!dropdown || !input) {
+      console.error("Type input elements not found in the DOM.");
+      return;
+    }
+
+    if (options.length > 0) {
+      dropdown.style.display = "";
+      input.style.display = "none";
+      this.panelNodeEditorUseDropdownForType = true;
+      // Ensure type matches available options
+      if (!options.includes(this.panelNodeEditorType)) {
+        this.panelNodeEditorType = options[0];
+      }
+      this.panelNodeEditorPopulateTypeDropdown(options);
+    } else {
+      dropdown.style.display = "none";
+      input.style.display = "";
+      this.panelNodeEditorUseDropdownForType = false;
+      input.value = this.panelNodeEditorType || "";
+      input.oninput = () => {
+        this.panelNodeEditorType = input.value;
+      };
+    }
+  }
+
+  private panelNodeEditorPopulateTypeDropdown(options: string[]): void {
+    const dropdownTrigger = document.querySelector("#panel-node-type-dropdown .dropdown-trigger button span");
+    const dropdownContent = document.getElementById("panel-node-type-dropdown-content");
+    const dropdownButton = document.querySelector("#panel-node-type-dropdown .dropdown-trigger button");
+    const dropdownContainer = dropdownButton ? dropdownButton.closest(".dropdown") : null;
+
+    if (!dropdownTrigger || !dropdownContent || !dropdownButton || !dropdownContainer) {
+      console.error("Dropdown elements not found in the DOM.");
+      return;
+    }
+
+    if (!options.includes(this.panelNodeEditorType)) {
+      this.panelNodeEditorType = options.length > 0 ? options[0] : "";
+    }
+    dropdownTrigger.textContent = this.panelNodeEditorType || "";
+    dropdownContent.innerHTML = "";
+
+    options.forEach(option => {
+      const optionElement = document.createElement("a");
+      optionElement.classList.add("dropdown-item", "label", "has-text-weight-normal", "is-small", "py-0");
+      optionElement.textContent = option;
+      optionElement.href = "#";
+
+      optionElement.addEventListener("click", (event) => {
+        event.preventDefault();
+        this.panelNodeEditorType = option;
+        dropdownTrigger.textContent = this.panelNodeEditorType;
+        dropdownContainer.classList.remove("is-active");
       });
 
       dropdownContent.appendChild(optionElement);
@@ -525,13 +615,18 @@ export class ManagerViewportPanels {
           condition.if.properties.kind &&
           condition.if.properties.kind.pattern === pattern
         ) {
-          if (
-            condition.then &&
-            condition.then.properties &&
-            condition.then.properties.type &&
-            condition.then.properties.type.enum
-          ) {
-            return condition.then.properties.type.enum;
+          if (condition.then && condition.then.properties && condition.then.properties.type) {
+            const typeProp = condition.then.properties.type;
+            if (typeProp.enum) {
+              return typeProp.enum;
+            }
+            if (Array.isArray(typeProp.anyOf)) {
+              for (const sub of typeProp.anyOf) {
+                if (sub.enum) {
+                  return sub.enum;
+                }
+              }
+            }
           }
         }
       }
diff --git a/src/topoViewerEditor/webview-ui/template/vscodeHtmlTemplate.ts b/src/topoViewerEditor/webview-ui/template/vscodeHtmlTemplate.ts
@@ -1122,50 +1122,81 @@ export function getHTMLTemplate(
               </div>
             </div>
 
-            <!-- TopoViewer Role or Icons Dropdown -->
+            <!-- Image -->
             <div class="column my-auto is-11">
               <div class="panel-content">
                 <div class="columns is-mobile is-multiline py-auto">
                   <div class="column is-full-mobile is-half-tablet is-4 p-1">
-                    <label for="panel-node-topoviewerrole-dropdown"
-                      class="label is-size-7 has-text-right has-text-weight-medium">
-                      Icons
+                    <label for="panel-node-editor-image" class="label is-size-7 has-text-right has-text-weight-medium">
+                      Image
                     </label>
                   </div>
                   <div class="column is-8 p-1 pl-3">
-                    <div class="dropdown is-hoverable" id="panel-node-topoviewerrole-dropdown">
+                    <input type="text" id="panel-node-editor-image"
+                      class="input is-size-7 has-text-left link-impairment-widht has-text-weight-normal" />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Type Dropdown -->
+            <div class="column my-auto is-11">
+              <div class="panel-content">
+                <div class="columns is-mobile is-multiline py-auto">
+                  <div class="column is-full-mobile is-half-tablet is-4 p-1">
+                    <label for="panel-node-type-dropdown" class="label is-size-7 has-text-right has-text-weight-medium">
+                      Type
+                    </label>
+                  </div>
+                  <div class="column is-8 p-1 pl-3">
+                    <div class="dropdown is-hoverable" id="panel-node-type-dropdown">
                       <div class="dropdown-trigger">
-                        <button class="button is-size-7" type="button" aria-haspopup="true"
-                          aria-controls="dropdown-menu-topoviewerrole">
-                          <span>Select Icons</span>
+                        <button class="button is-size-7" type="button" aria-haspopup="true" aria-controls="dropdown-menu">
+                          <span>Select Type</span>
                           <span class="icon is-small">
                             <i class="fas fa-angle-down" aria-hidden="true"></i>
                           </span>
                         </button>
                       </div>
-                      <div class="dropdown-menu" id="dropdown-menu-topoviewerrole" role="menu">
-                        <div class="dropdown-content" id="panel-node-topoviewerrole-dropdown-content">
+                      <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                        <div class="dropdown-content" id="panel-node-type-dropdown-content">
                           <!-- Dropdown items go here -->
                         </div>
                       </div>
                     </div>
+                    <input type="text" id="panel-node-editor-type-input" class="input is-size-7 has-text-left link-impairment-widht has-text-weight-normal" style="display:none;" />
                   </div>
                 </div>
               </div>
             </div>
 
-            <!-- Image -->
+            <!-- TopoViewer Role or Icons Dropdown -->
             <div class="column my-auto is-11">
               <div class="panel-content">
                 <div class="columns is-mobile is-multiline py-auto">
                   <div class="column is-full-mobile is-half-tablet is-4 p-1">
-                    <label for="panel-node-editor-image" class="label is-size-7 has-text-right has-text-weight-medium">
-                      Image
+                    <label for="panel-node-topoviewerrole-dropdown"
+                      class="label is-size-7 has-text-right has-text-weight-medium">
+                      Icons
                     </label>
                   </div>
                   <div class="column is-8 p-1 pl-3">
-                    <input type="text" id="panel-node-editor-image"
-                      class="input is-size-7 has-text-left link-impairment-widht has-text-weight-normal" />
+                    <div class="dropdown is-hoverable" id="panel-node-topoviewerrole-dropdown">
+                      <div class="dropdown-trigger">
+                        <button class="button is-size-7" type="button" aria-haspopup="true"
+                          aria-controls="dropdown-menu-topoviewerrole">
+                          <span>Select Icons</span>
+                          <span class="icon is-small">
+                            <i class="fas fa-angle-down" aria-hidden="true"></i>
+                          </span>
+                        </button>
+                      </div>
+                      <div class="dropdown-menu" id="dropdown-menu-topoviewerrole" role="menu">
+                        <div class="dropdown-content" id="panel-node-topoviewerrole-dropdown-content">
+                          <!-- Dropdown items go here -->
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/topoViewerEditor/webview-ui/topoViewerEditorEngine.ts b/src/topoViewerEditor/webview-ui/topoViewerEditorEngine.ts
@@ -46,8 +46,9 @@ export interface NodeData {
   };
   extraData?: {
     kind?: string;
-    longname?: string;
     image?: string;
+    type?: string
+    longname?: string;
     mgmtIpv4Address?: string;
   };
 }

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`export interface ClabNode {`
`8`	`8`	`kind?: string;`
`9`	`9`	`image?: string;`
	`10`	`+ type?: string;`
`10`	`11`	`group?: string;`
`11`	`12`	`labels?: Record<string, any>;`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -492,20 +492,23 @@ export default async function loadCytoStyle(`
`492`	`492`	`/**`
`493`	`493`	`* Extracts node types from an array of Cytoscape style definitions.`
`494`	`494`	`*`
`495`		`- * This function looks for selectors of the form:`
	`495`	`+ * This function looks for selectors matching the pattern:`
`496`	`496`	`* node[topoViewerRole="someType"]`
`497`	`497`	`* and returns an array of node types (e.g., "router", "default", "pe", etc.).`
`498`	`498`	`*`
`499`		`- * @returns An array of extracted node types.`
	`499`	`+ * Node types with topoViewerRole set to "dummyChild" or "group" are excluded.`
	`500`	`+ *`
	`501`	`+ * @returns An array of extracted node types, excluding "dummyChild" and "group".`
`500`	`502`	`*/`
`501`	`503`	`export function extractNodeIcons(): string[] {`
`502`	`504`	`const nodeTypes: string[] = [];`
`503`	`505`	`const regex = /node\[topoViewerRole="([^"]+)"\]/;`
	`506`	`+ const skipList = ['dummyChild', 'group'];`
`504`	`507`
`505`	`508`	`for (const styleDef of cytoscapeStylesBase) {`
`506`	`509`	`if (typeof styleDef.selector === 'string') {`
`507`	`510`	`const match = styleDef.selector.match(regex);`
`508`		`- if (match && match[1]) {`
	`511`	`+ if (match && match[1] && !skipList.includes(match[1])) {`
`509`	`512`	`nodeTypes.push(match[1]);`
`510`	`513`	`}`
`511`	`514`	`}`
`@@ -515,6 +518,7 @@ export function extractNodeIcons(): string[] {`
`515`	`518`	`}`
`516`	`519`
`517`	`520`
	`521`	`+`
`518`	`522`	`/**`
`519`	`523`	`* Generates an encoded SVG string to be used as a background image in Cytoscape.`
`520`	`524`	`*`