feat: optimize parse tree display in panel

package.json

@@ -67,7 +67,7 @@
 		"pre-commit": "npx pretty-quick --staged"
 	},
 	"dependencies": {
-		"dt-sql-parser": "4.0.2"
+		"dt-sql-parser": "4.1.0-beta.4"
 	},
 	"peerDependencies": {
 		"monaco-editor": ">=0.31.0"

src/baseSQLWorker.ts

@@ -2,6 +2,7 @@ import { BasicSQL } from 'dt-sql-parser/dist/parser/common/basicSQL';
 import { worker } from './fillers/monaco-editor-core';
 import { Suggestions, ParseError, EntityContext } from 'dt-sql-parser';
 import { Position } from './fillers/monaco-editor-core';
+import type { SerializedTreeNode } from './languageService';
 
 export interface ICreateData {
 	languageId: string;
@@ -23,16 +24,6 @@ export abstract class BaseSQLWorker {
 		return Promise.resolve([]);
 	}
 
-	async parserTreeToString(code: string): Promise<string> {
-		if (code) {
-			const parser = this.parser.createParser(code);
-			const parseTree = parser.program();
-			const result = parseTree.toStringTree(parser);
-			return Promise.resolve(result);
-		}
-		return Promise.resolve('');
-	}
-
 	async doCompletion(code: string, position: Position): Promise<Suggestions | null> {
 		code = code || this.getTextDocument();
 		if (code) {
@@ -67,6 +58,43 @@ export abstract class BaseSQLWorker {
 		return Promise.resolve(null);
 	}
 
+	async getSerializedParseTree(code: string): Promise<SerializedTreeNode | null> {
+		if (!code) return Promise.resolve(null);
+
+		const parser = this.parser.createParser(code);
+		const parseTree = parser.program();
+		const ruleNames = parser.ruleNames;
+		const symbolicNames: string[] = (parser as any).symbolicNames || [];
+
+		// 只保留必要信息, 避免worker通信传输失败
+		function serializeNode(node: any): SerializedTreeNode | null {
+			if (!node) return null;
+
+			const isRuleNode = !node.symbol;
+			const text = isRuleNode
+				? ''
+				: (symbolicNames[node.symbol?.type] ? symbolicNames[node.symbol.type] + ': ' : '') +
+					node.symbol?.text;
+
+			const serializedNode: SerializedTreeNode = {
+				ruleName: isRuleNode ? ruleNames[node.ruleIndex] : node.constructor.name,
+				text,
+				children: []
+			};
+
+			for (let i = 0; i < node.getChildCount(); i++) {
+				const child = node.getChild(i);
+				if (child) {
+					serializedNode.children.push(serializeNode(child)!);
+				}
+			}
+
+			return serializedNode;
+		}
+
+		return Promise.resolve(serializeNode(parseTree));
+	}
+
 	private getTextDocument(): string {
 		const model = this._ctx.getMirrorModels()[0]; // When there are multiple files open, this will be an array
 		return model && model.getValue();

src/languageService.ts

@@ -7,6 +7,12 @@ import { WorkerManager } from './workerManager';
 import { BaseSQLWorker } from './baseSQLWorker';
 import { Position, Uri, editor } from './fillers/monaco-editor-core';
 
+export interface SerializedTreeNode {
+	ruleName: string;
+	text?: string;
+	children: SerializedTreeNode[];
+}
+
 export class LanguageService<T extends BaseSQLWorker = BaseSQLWorker> {
 	private workerClients: Map<string, WorkerManager<T>> = new Map();
 
@@ -20,13 +26,13 @@ export class LanguageService<T extends BaseSQLWorker = BaseSQLWorker> {
 		});
 	}
 
-	public parserTreeToString(language: string, model: editor.IReadOnlyModel | string) {
+	public getSerializedParseTree(language: string, model: editor.IReadOnlyModel | string) {
 		const text = typeof model === 'string' ? model : model.getValue();
 		const uri = typeof model === 'string' ? void 0 : model.uri;
 
 		const clientWorker = this.getClientWorker(language, uri as Uri);
 		return clientWorker.then((worker) => {
-			return worker.parserTreeToString(text);
+			return worker.getSerializedParseTree(text);
 		});
 	}
 

src/main.ts

@@ -13,6 +13,9 @@ export type {
 	Suggestions,
 	TextSlice,
 	ParseError,
+	StmtContext,
 	EntityContext,
-	StmtContext
+	CommonEntityContext,
+	ColumnEntityContext,
+	FuncEntityContext
 } from 'dt-sql-parser';

website/package.json

@@ -12,6 +12,9 @@
 	"dependencies": {
 		"@dtinsight/molecule": "^1.3.4",
 		"@jcubic/lips": "^0.20.3",
+		"@types/dagre": "^0.7.52",
+		"@xyflow/react": "^12.4.2",
+		"dagre": "^0.8.5",
 		"monaco-editor": "0.31.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",