Add YANG visualization support

Added support for YANG Tree Diagram and PlantUML source text generation. Also added extension icon and YANG Tree Diagram file icons. Signed-off-by: Siddharth Sharma <[email protected]>
esmasth · Sep 29, 2024 · 003e908 · 003e908
1 parent 3927c88
commit 003e908
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.5.0]
+
+### Added
+
+- Support for YANG Tree Diagram generation
+- Support for PlantUML Diagram source generation
+- YANG Tree Diagram file icon
+- Extension icon
+
 ## [0.4.0]
 
 ### Added

diff --git a/README.md b/README.md
@@ -64,6 +64,16 @@ This extension contributes the following commands:
   it merely reinitiates the TCP connection and hence TCP server should already
   be initiated.
 
+* `pyang.trigger.tree.diagram`
+  > `pyang: Generate YANG Tree Diagram` generates the YANG Tree diagram source
+  text corresponding to the YANG file in the active editor, and brings the
+  generated file into focus.
+
+* `pyang.trigger.puml.diagram`
+  > `pyang: Generate PlantUML Diagram` generates the PlantUML diagram source
+  text corresponding to the YANG file in the active editor, and brings the
+  generated file into focus.
+
 ## Known Issues
 
 Missing `pyang` or older installations that do not meet requirements are not

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "pyang",
     "displayName": "pyang",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "publisher": "sid-sharma",
     "description": "YANG Language Support using pyang",
     "author": {
@@ -11,7 +11,8 @@
     "categories": [
         "Programming Languages",
         "Linters",
-        "Formatters"
+        "Formatters",
+        "Visualization"
     ],
     "pricing": "Free",
     "engines": {
@@ -46,6 +47,10 @@
                     ".yangtree",
                     ".ytd"
                 ],
+                "icon": {
+                    "dark": "./resources/yangtree.svg",
+                    "light": "./resources/yangtree.svg"
+                },
                 "configuration": "./yangtree.language-configuration.json"
             }
         ],
@@ -66,6 +71,16 @@
                 "command": "pyang.client.restart",
                 "title": "Restart Language Server",
                 "category": "pyang"
+            },
+            {
+                "command": "pyang.trigger.tree.diagram",
+                "title": "Generate YANG Tree Diagram",
+                "category": "pyang"
+            },
+            {
+                "command": "pyang.trigger.puml.diagram",
+                "title": "Generate PlantUML Diagram",
+                "category": "pyang"
             }
         ],
         "configuration": {
@@ -114,6 +129,7 @@
         "@types/vscode": "^1.89.0",
         "vscode-languageclient": "^7.0.0"
     },
+    "icon": "resources/pyang.png",
     "scripts": {
         "compile": "npm run check-types && node esbuild.js",
         "check-types": "tsc --noEmit",

diff --git a/resources/pyang.png b/resources/pyang.png
diff --git a/resources/yangtree.svg b/resources/yangtree.svg
diff --git a/src/extension.ts b/src/extension.ts
@@ -16,6 +16,10 @@ import {
 let client: LanguageClient;
 const restartCmd = 'pyang.client.restart'
 const showReferencesCmd = 'pyang.show.references'
+const triggerTreeDiagramCmd = 'pyang.trigger.tree.diagram'
+const triggerPumlDiagramCmd = 'pyang.trigger.puml.diagram'
+const generateTreeDiagramCmd = 'pyang.generate.tree.diagram'
+const generatePumlDiagramCmd = 'pyang.generate.puml.diagram'
 const config = vscode.workspace.getConfiguration('pyang');
 const debug = config.get<boolean>('debug.server.enable', false)
 const debugHost = config.get<string>('debug.server.host', "127.0.0.1")
@@ -43,19 +47,57 @@ export function activate(context: vscode.ExtensionContext) {
 
     });
 
-    const restartCmdHandler = async () => {
-        await client.stop();
-        client.start();
-    };
+    context.subscriptions.push(vscode.commands.registerCommand(restartCmd,
+        async () => {
+            await client.stop();
+            client.start();
+        }
+    ));
+
+    context.subscriptions.push(vscode.commands.registerCommand(triggerTreeDiagramCmd,
+        async () => {
+            const command = generateTreeDiagramCmd;
+            const activeEditor = vscode.window.activeTextEditor;
+            if (!activeEditor) {
+                return;
+            }
+            const uri = activeEditor.document.uri.toString();
+            const args = [uri];
+
+            try {
+                await vscode.commands.executeCommand(command, ...args);
+            } catch (error) {
+                vscode.window.showErrorMessage(`Error executing command: ${error}`);
+            }
+        }
+    ));
+
+    context.subscriptions.push(vscode.commands.registerCommand(triggerPumlDiagramCmd,
+        async () => {
+            const command = generatePumlDiagramCmd;
+            const activeEditor = vscode.window.activeTextEditor;
+            if (!activeEditor) {
+                return;
+            }
+            const uri = activeEditor.document.uri.toString();
+            const args = [uri];
 
-    context.subscriptions.push(vscode.commands.registerCommand(restartCmd, restartCmdHandler));
+            try {
+                await vscode.commands.executeCommand(command, ...args);
+            } catch (error) {
+                vscode.window.showErrorMessage(`Error executing command: ${error}`);
+            }
+        }
+    ));
 
-    vscode.commands.registerCommand(showReferencesCmd, (uri: string, position: Position, locations: Location[]) => {
-        vscode.commands.executeCommand('editor.action.showReferences',
-            vscode.Uri.parse(uri),
-            client.protocol2CodeConverter.asPosition(position),
-            locations.map(client.protocol2CodeConverter.asLocation));
-    })
+    context.subscriptions.push(vscode.commands.registerCommand(showReferencesCmd,
+        async (uri: string, position: Position, locations: Location[]) => {
+            await vscode.commands.executeCommand('editor.action.showReferences',
+                vscode.Uri.parse(uri),
+                client.protocol2CodeConverter.asPosition(position),
+                locations.map(client.protocol2CodeConverter.asLocation));
+        }
+    ));
 }
 
 export function deactivate(): Thenable<void> | undefined {