plot CDF

package.json

@@ -42,6 +42,10 @@
                 "command": "analysisResults.highlight",
                 "title": "Highlight item"
             },
+            {
+                "command": "analysisResults.plotValue",
+                "title": "Plot value"
+            },
             {
                 "command": "analysisResults.load",
                 "title": "Open analysis results"
@@ -194,7 +198,7 @@
                 {
                     "command": "analysisResults.copyValue",
                     "when": "view == analysisResults && viewItem =~ /notEmpty/ || view == analysisResultsCompView && viewItem =~ /notEmpty/",
-					"group": "copy"
+                    "group": "copy"
                 },
                 {
                     "command": "analysisResults.copyItem",
@@ -205,10 +209,14 @@
                     "command": "analysisResults.openInEditor",
                     "when": "view == analysisResults && viewItem =~ /notEmpty/ || view == analysisResultsCompView && viewItem =~ /notEmpty/"
                 },
-				{
-					"command": "analysisResults.highlight",
-					"when": "view == analysisResults && viewItem =~ /notRoot/ || view == analysisResultsCompView && viewItem =~ /notRoot/"
-				}
+                {
+                    "command": "analysisResults.highlight",
+                    "when": "view == analysisResults && viewItem =~ /notRoot/ || view == analysisResultsCompView && viewItem =~ /notRoot/"
+                },
+                {
+                    "command": "analysisResults.plotValue",
+                    "when": "view == analysisResults && viewItem =~ /plot/ || view == analysisResultsCompView && viewItem =~ /plot/"
+                }
             ],
             "editor/title": [
                 {
@@ -382,6 +390,7 @@
         "vscode-test": "^1.5.0"
     },
     "dependencies": {
+        "quickchart-js": "^1.0.7",
         "vscode-codicons": "0.0.15",
         "vscode-languageclient": "^7.0.0"
     }

src/analysisResults.ts

@@ -242,7 +242,8 @@ export class Result extends vscode.TreeItem {
 		private data: Result[],
 		public readonly collapsibleState: vscode.TreeItemCollapsibleState,
 		private parent: Result | null,
-		private isRoot: boolean = false
+		private isRoot: boolean = false,
+		private isPlottable: boolean = false
 	) {
 		super(label, collapsibleState);
 		if (value !== "") {
@@ -255,20 +256,26 @@ export class Result extends vscode.TreeItem {
 		this.isRoot = isRoot;
 
 		if (isRoot) {
-			this.iconPath = {
-				light: path.join(__filename, '..', '..', 'media', 'modest-icon.svg'),
-				dark: path.join(__filename, '..', '..', 'media', 'modest-icon.svg')
-			};
+			if (label.endsWith(".modest")) {
+				this.iconPath = {
+					light: path.join(__filename, '..', '..', 'media', 'modest-icon.svg'),
+					dark: path.join(__filename, '..', '..', 'media', 'modest-icon.svg')
+				};
+			}
+			// Icons for other types of model formats (e.g. JANI) can be added here...
+		}
+
+		if (label.trim() === "CDF") { // TODO: isPlottable should be determined server side
+			this.isPlottable = true;
 		}
 
 		var cVal = "";
 		cVal += this.value === "" ? "empty," : "notEmpty,";
 		cVal += this.isRoot ? "root," : "notRoot,";
+		cVal += this.isPlottable ? "plot," : "";
 		this.contextValue = cVal;
 	}
 
-
-
 	getParentName() {
 		return this.parent?.getLabel();
 	}

src/extension.ts

@@ -207,12 +207,10 @@ export function activate(context: ExtensionContext) {
 		"analysisResults.highlight",
 		(res: Result) => highlight(res)
 	);
-
-	function highlight(res: Result) {
-		res.highlight();
-		analysisResultsProvider.refresh();
-		analysisResultsCompProvider.refresh();
-	}
+	vscode.commands.registerCommand(
+		"analysisResults.plotValue",
+		(res: Result) => plotValue(res)
+	);
 
     vscode.commands.registerCommand(
         "analysisResults.load",
@@ -424,6 +422,60 @@ async function clearView(prov: AnalysisResultsProvider) {
 	}
 }
 
+function highlight(res: Result) {
+	res.highlight();
+	analysisResultsProvider.refresh();
+	analysisResultsCompProvider.refresh();
+}
+
+function plotValue(res: Result) {
+	const panel = vscode.window.createWebviewPanel(
+        'plotGraph',
+        `Plot of ${res.getLabel()} of ${res.getParentName()}`,
+        vscode.ViewColumn.One,
+		{
+			enableScripts: true
+		}
+	);
+
+	var dataPoints: {x: number, y: number}[] = [];
+	const value = res.getValue();
+	const regex = /\((\d+\.?d*),.(\d+\.?\d*)\)/gm;
+	let matches = (value.match(regex) || []).map(e => [e.replace(regex, '$1'), e.replace(regex, '$2')]);
+
+	matches.forEach((element) => {
+		dataPoints.push({x: Number(element[0]), y: Number(element[1])});
+	});
+
+	console.log(dataPoints);
+
+	const QuickChart = require('quickchart-js');
+
+	const myChart = new QuickChart();
+	myChart
+	.setConfig({
+		type: 'scatter',
+		data: {
+			datasets: [{
+				label: res.getParentName(),
+				data: dataPoints
+			}]
+		}
+	})
+	.setBackgroundColor('white'); // transparent
+
+	// Print the chart URL
+	console.log(myChart.getUrl());
+
+	panel.webview.html = `
+	<html>
+	<body>
+	<img src="${myChart.getUrl()}" />
+	</body>
+	</html>
+	`;
+}
+
 function pathExists(p: string): boolean {
     try {
         fs.accessSync(p);
@@ -432,4 +484,4 @@ function pathExists(p: string): boolean {
     }
     return true;
 }
-//#endregion
\ No newline at end of file
+//#endregion