Various Diagram Fixes (#349)

* feat-fix(diagram): fix highlighting of ast diagram - #345

* feat-fix(diagram): fix off by one error in highlight- #346

* feat(diagram): move simplify dataflow into a toggle - #350

* test(util): test for selection to nodeid - #347

Author: gigalasr

package.json

@@ -170,12 +170,6 @@
         "icon": "$(graph)",
         "category": "flowR"
       },
-      {
-        "command": "vscode-flowr.dataflow-simplified",
-        "title": "Show Simplified Dataflow Graph",
-        "icon": "$(graph)",
-        "category": "flowR"
-      },
       {
         "command": "vscode-flowr.session.internal",
         "title": "Start Local flowR Shell",
@@ -624,10 +618,15 @@
             "Simplification passes that should be applied to the cfg diagram"
           ]
         },
-        "vscode-flowr.diagram.simplify": {
+        "vscode-flowr.diagram.simplifyCfg": {
           "type": "boolean",
           "default": true,
           "markdownDescription": "If set to true, cfg diagrams are simplified"
+        },
+        "vscode-flowr.diagram.simplifyDfg": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "If set to true, dfg diagrams are simplified"
         }
       }
     },
@@ -823,4 +822,4 @@
       "tsdoc/syntax": "off"
     }
   }
-}
+}

src/diagram.ts

@@ -22,10 +22,6 @@ export function registerDiagramCommands(context: vscode.ExtensionContext, output
 		const activeEditor = vscode.window.activeTextEditor;
 		return await coordinator.createDiagramPanel(FlowrDiagramType.Dataflow, activeEditor);
 	});
-	registerCommand(context, 'vscode-flowr.dataflow-simplified', async() => {
-		const activeEditor = vscode.window.activeTextEditor;
-		return await coordinator.createDiagramPanel(FlowrDiagramType.Dataflow, activeEditor, true);
-	});
 	registerCommand(context, 'vscode-flowr.ast', async() => {
 		const activeEditor = vscode.window.activeTextEditor;
 		return await coordinator.createDiagramPanel(FlowrDiagramType.Ast, activeEditor);
@@ -43,10 +39,9 @@ enum FlowrDiagramType {
 }
 
 interface DiagramPanelInformation {
-	type:     FlowrDiagramType;
-	panel:    vscode.WebviewPanel;
-	simplify: boolean;
-	options:  typeof DefaultDiagramOptions;
+	type:    FlowrDiagramType;
+	panel:   vscode.WebviewPanel;
+	options: typeof DefaultDiagramOptions;
 }
 
 interface ContentUpdateMessage {
@@ -78,21 +73,21 @@ class DiagramUpdateCoordinator {
 		this.output = output;
 	}
 
-	public async createDiagramPanel(type: FlowrDiagramType, editor: vscode.TextEditor | undefined, simplify: boolean = false) {
+	public async createDiagramPanel(type: FlowrDiagramType, editor: vscode.TextEditor | undefined) {
 		if(!editor) {
 			return;
 		}
 
 		const title = `${nameFromDiagramType(type)} (${path.basename(editor.document.fileName)})`;
 		const options = optionsFromDiagramType(type);
-		const mermaid = await diagramFromTypeAndEditor(type, editor, simplify, options);
+		const mermaid = await diagramFromTypeAndEditor(type, editor, options);
 		const panel = createDiagramWebview(type as string, title, mermaid, this.output, options);
 
 		if(!panel) {
 			return undefined;
 		}
 
-		const info = { type, panel, simplify, options } satisfies DiagramPanelInformation;
+		const info = { type, panel, options } satisfies DiagramPanelInformation;
 
 		// Stop tracking panel when user closes it
 		panel.onDidDispose(() => {
@@ -102,7 +97,6 @@ class DiagramUpdateCoordinator {
 		// Handle settings update messages from panel
 		panel.webview.onDidReceiveMessage((msg: WebviewMessage) => {
 			const key = `${DiagramSettingsPrefix}.${msg.key}`;
-			console.log(`Update: ${JSON.stringify(msg)}`);
 			if(msg.keyInSet) { // If setKey is set, the checkboxes are grouped into an array 
 				const current = new Set(getConfig().get<string[]>(key, []));
 				if(msg.value) {
@@ -157,7 +151,7 @@ class DiagramUpdateCoordinator {
 	}
 
 	public async updateWebviewPanel(info: DiagramPanelInformation, textEditor: vscode.TextEditor) {
-		const mermaid = await diagramFromTypeAndEditor(info.type, textEditor, info.simplify, info.options);
+		const mermaid = await diagramFromTypeAndEditor(info.type, textEditor, info.options);
 		info.panel.webview.postMessage({
 			type:    'content_update',
 			content: mermaid
@@ -194,12 +188,24 @@ const DefaultDiagramOptions = {
 	} as DiagramOptionsCheckbox,
 } satisfies DiagramOptions;
 
+const DFGDiagramOptions = {
+	// Default options for mode and sync
+	...DefaultDiagramOptions,
+	simplifyDfg: {
+		type:         'checkbox',
+		key:          DiagramSettingsKeys.SimplifyDfg,
+		displayText:  'Simplify',
+		default:      true,
+		currentValue: true
+	} as DiagramOptionsCheckbox,
+} satisfies DiagramOptions; 
+
 const CFGDiagramOptions = {
 	// Default options for mode and sync
 	...DefaultDiagramOptions,
-	simplify: {
+	simplifyCfg: {
 		type:         'checkbox',
-		key:          DiagramSettingsKeys.Simplify,
+		key:          DiagramSettingsKeys.SimplifyCfg,
 		displayText:  'Simplify',
 		default:      true,
 		currentValue: true
@@ -220,7 +226,7 @@ function optionsFromDiagramType(type: FlowrDiagramType) {
 
 	switch(type) {
 		case FlowrDiagramType.Dataflow: 
-			options = DefaultDiagramOptions; 
+			options = DFGDiagramOptions; 
 			break;
 		case FlowrDiagramType.Controlflow: 
 			options = CFGDiagramOptions;
@@ -259,13 +265,16 @@ function simplificationPassesFromOptions(options: DiagramOptions): CfgSimplifica
 	return passes;
 }
 
-async function diagramFromTypeAndEditor(type: FlowrDiagramType, editor: vscode.TextEditor, simplified: boolean, options: typeof DefaultDiagramOptions): Promise<string> {
+async function diagramFromTypeAndEditor(type: FlowrDiagramType, editor: vscode.TextEditor, options: typeof DefaultDiagramOptions): Promise<string> {
 	const session = await getFlowrSession();
 	switch(type) {
-		case FlowrDiagramType.Dataflow: return await session.retrieveDataflowMermaid(editor.document, editor.selections, options.mode.currentValue, simplified);
+		case FlowrDiagramType.Dataflow: {
+			const opts = options as typeof DFGDiagramOptions;
+			return await session.retrieveDataflowMermaid(editor.document, editor.selections, options.mode.currentValue, opts.simplifyDfg.currentValue);
+		} 	
 		case FlowrDiagramType.Controlflow: {
 			const opts = options as typeof CFGDiagramOptions;
-			return await session.retrieveCfgMermaid(editor.document, editor.selections, opts.mode.currentValue, opts.simplify.currentValue, simplificationPassesFromOptions(opts));
+			return await session.retrieveCfgMermaid(editor.document, editor.selections, opts.mode.currentValue, opts.simplifyCfg.currentValue, simplificationPassesFromOptions(opts));
 		}
 		case FlowrDiagramType.Ast: return await session.retrieveAstMermaid(editor.document, editor.selections, options.mode.currentValue);
 		default: assert(false);

src/flowr/internal-session.ts

@@ -261,7 +261,7 @@ export class FlowrInternalSession implements FlowrSession {
 
 			return normalizedAstToMermaid(result.ast, {
 				includeOnlyIds: selectionMode === 'hide' ? selectionNodes : undefined,
-				mark:           selectionMode === 'highlight' ? new Set(selectionNodes?.values().map(v => String(v))) : undefined,
+				mark:           selectionMode === 'highlight' ? new Set(selectionNodes) : undefined,
 			});
 		}, 'ast', true, '');
 	}

src/flowr/utils.ts

@@ -11,6 +11,8 @@ import { visitAst } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/process
 import type { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model';
 import type { DiagramSelectionMode } from '../diagram';
 import type { CfgSimplificationPassName } from '@eagleoutice/flowr/control-flow/cfg-simplification';
+import { RType } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/type';
+import type { RExpressionList } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/nodes/r-expression-list';
 
 // Contains utility functions and a common interface for the two FlowrSession implementations
 
@@ -89,24 +91,45 @@ export function rangeToVscodeRange(range: SourceRange): vscode.Range {
 	return new vscode.Range(range[0] - 1, range[1] - 1, range[2] - 1, range[3]);
 }
 
-export function selectionsToNodeIds(root: (RNode<ParentInformation> | RNode<ParentInformation>[]), selections: readonly vscode.Selection[]): ReadonlySet<NodeId> | undefined {
-	if(selections.length === 0 || selections[0].isEmpty) {
+export function selectionsToNodeIds(root: (RNode<ParentInformation> | RNode<ParentInformation>[]), selectionsRaw: readonly vscode.Selection[]): ReadonlySet<NodeId> | undefined {
+	if(selectionsRaw.length === 0 || selectionsRaw[0].isEmpty) {
 		return undefined;
 	}
 
 	const result = new Set<NodeId>();
-	
+	const maybeIncluded = new Array<RExpressionList<ParentInformation>>();
+
+	// By default the end of the selection extends one more coloumn
+	// Thus we subtract one so that the selection really only includes the selected chars
+	const selections = selectionsRaw.map(sel => sel.with(
+		sel.start, 
+		sel.end.with(sel.end.line, Math.max(sel.end.character - 1, 0))
+	));
+
 	visitAst(root, node => {
-		if(!node.info.fullRange) {
+		if(node.type === RType.ExpressionList) {
+			maybeIncluded.push(node);
 			return;
 		}
 
-		const range = rangeToVscodeRange(node.info.fullRange);
+		const location = node.location ?? node.info.fullRange;
+		if(location === undefined) {
+			return;
+		}
+		
+		const range = rangeToVscodeRange(location);
 		if(selections.some(sel => sel.intersection(range) !== undefined)) {
 			result.add(node.info.id);
 		}
 	});
 
+	for(const maybe of maybeIncluded) {
+		const shouldBeIncluded = maybe.children.length !== 0 && maybe.children.every(c => result.has(c.info.id));
+		if(shouldBeIncluded) {
+			result.add(maybe.info.id);
+		}
+	}
+
 	return result;
 }
 

src/settings.ts

@@ -66,7 +66,9 @@ export enum DiagramSettingsKeys {
     Sync = 'sync',
     Mode = 'mode',
 	SimplificationPasses = 'cfgSimplificationPasses',
-	Simplify = 'simplify'
+	SimplifyCfg = 'simplifyCfg',
+	SimplifyDfg = 'simplifyDfg'
+
 }
 
 export const DiagramSettingsPrefix = 'diagram';

src/test/utils.test.ts

@@ -0,0 +1,40 @@
+import { FlowrInlineTextFile } from '@eagleoutice/flowr/project/context/flowr-file';
+import { FlowrAnalyzerBuilder } from '@eagleoutice/flowr/project/flowr-analyzer-builder';
+import { describe, it, suite } from 'mocha';
+import { selectionsToNodeIds } from '../flowr/utils';
+import { FlowrAnalyzerPluginDefaults } from '@eagleoutice/flowr/project/plugins/flowr-analyzer-plugin-defaults';
+import assert from 'assert';
+import * as vscode from 'vscode';
+
+
+suite('util', () => {
+	describe('selection to node ids', () => {
+		const cases = [
+			{ selections: [], expected: undefined },
+			{ selections: [new vscode.Selection(0, 0, 0, 2)], expected: [0] },
+			{ selections: [new vscode.Selection(0, 0, 0, 3)], expected: [2, 0] },
+			{ selections: [new vscode.Selection(0, 0, 0, 3), new vscode.Selection(1, 0, 1, 3),], expected: [2, 0, 5, 3] },
+
+		];
+
+
+		cases.forEach(({ selections, expected }) => {
+			it(`should only include selected nodeids ${expected?.join(', ') ?? '(none)'}`, async() => {
+				const analyzer = await new FlowrAnalyzerBuilder()
+					.setEngine('tree-sitter')
+					.unregisterPlugins(...FlowrAnalyzerPluginDefaults())
+					.build();
+
+				analyzer.addFile(new FlowrInlineTextFile('a.R', `x <- 5
+y <- 10
+z <- 23
+					`));
+				analyzer.addRequest({ request: 'file', content: 'a.R' });
+
+				const ast = await analyzer.normalize();
+				const actual = selectionsToNodeIds(ast.ast.files.map(a => a.root), selections);
+				assert.deepEqual(actual?.values().toArray(), expected);
+			});
+		});
+	});
+});