Add code link support for hierarchical document symbols #303

TheOneKevin · 2022-03-05T01:47:22Z

This PR adds the ability to create code links to hierarchical document symbols. The main contribution of this PR is the addition of a new command:

hediet.vscode-drawio.linkSymbolWithSelectedNode

Some notes:

This provides workarounds to resolve:
- issue about code link to a function(c/c++) #291
- Feature request: like Code Link, but can link to anything, not only to a symbol (class)? #167
- And possibly resolves more related issues. See the example added in 612c60a.
Currently, hierarchy paths are delimited by . which may cause issues in languages where . is a symbol. I can't think of any mainstream languages that do this, so for now it should be fine. A long-term solution is to enable escaping, but that adds unnecessary complexity.

- Added linkFileWithSelectedNode command to package.json - Changed command contributes in package.json to support category - Removed linkFileWithSelectedNode from the command palette (as it is a context menu only command and will error otherwise).

hediet

Many thanks for implementing this cool feature!

I left some comments.
I think it would also be cool if this somehow worked together with the #Symbol syntax.

I just read this code, didn't try it out yet. Will do that soon.

hediet · 2022-03-07T09:34:06Z

package.json

 			},
 			{
 				"command": "hediet.vscode-drawio.linkFileWithSelectedNode",
-				"title": "Draw.io: Link File With Selected Node In Active Diagram"
+				"title": "Draw.io: Link File With Selected Node",


I think the Draw.io: prefix is not necessary here.

hediet · 2022-03-07T09:36:19Z

package.json

+			"commandPalette": [
+				{
+					"when": "false",
+					"command": "hediet.vscode-drawio.linkFileWithSelectedNode"


Why removing this command from the command palette?

Invoking this from the palette will fail as it is expecting an extra argument only present when calling it from the context menu. Removed to avoid accidentally using it from the palette.

Ah, makes sense, thanks!

hediet · 2022-03-07T09:54:05Z

src/features/CodeLinkFeature.ts

 			path: path
 				.relative(relativeTo.fsPath, this.uri.fsPath)
 				.replace(/\\/g, "/"),


In case of a symbol, is the path neccessary here?

Ahh, the symbol is still relative to the document. Can we make it global? Otherwise, renaming a file will break the symbol reference.

Sure, I'll add a way to link it to a top level workspace symbol in the hierarchy. However, we should still allow linking to files as some language servers/symbol providers don't expose workspace symbols in a hierarchy.

hediet · 2022-03-07T09:57:54Z

src/features/CodeLinkFeature.ts

+				items.push(<QuickPickItem>{
+					label: `$(${symbolList[x.kind]}) ${x.name}`,
+					description: x.detail,
+					detail: curpath
+				});
+				recurse(x.children, curpath);


Maybe it makes sense to consider the selection? I.e. only symbols that intersect with the current selection.

How about a context menu entry in the editor? We can show the symbols at the cursor or selection when the command is called from the context menu (and if the command is called from the command palette, we can show every symbol)

Hmm, it would be great if we could show that context menu entry only if a node is selected in a draw.io diagram.

Sure, I'll add them as regular commands first then we'll see about the context menu.

hediet · 2022-03-07T09:59:11Z

src/features/CodeLinkFeature.ts

+const symbolList = [
+	'symbol-file',
+	'symbol-module',
+	'symbol-namespace',
+	'symbol-package',
+	'symbol-class',
+	'symbol-method',


Better documentation please or better name (e.g. symbolNameMap) ;)
Maybe a record Record<Symbol, string> is better here to indicate the purpose.

- Only shows symbols intersecting selections (if code is selected) - Allowed symbols to be linked without URI. -> This uses top-level workspace symbols to resolve the hierarchy -> Added command linkWsSymbolWithSelectedNode - Removed unneeded "Draw.io:" prefix

TheOneKevin · 2022-03-10T04:38:30Z

Updated with new changes 😄

hediet · 2022-03-10T08:47:00Z

Awesome! Can you update the changelog file and set a prerelease version? (See history)
Then it will get released automatically after I merge this.

- Added 1.6.5-alpha.1

hediet · 2022-03-11T09:11:23Z

Awesome! Did you test this feature?

hediet · 2022-03-11T09:15:04Z

src/features/CodeLinkFeature.ts

+const symbolNameMap: Record<SymbolKind, string> = [
+	'symbol-file',
+	'symbol-module',
+	'symbol-namespace',
+	'symbol-package',
+	'symbol-class',
+	'symbol-method',
+	'symbol-property',
+	'symbol-field',
+	'symbol-constructor',
+	'symbol-enum',
+	'symbol-interface',
+	'symbol-function',
+	'symbol-variable',
+	'symbol-constant',
+	'symbol-string',
+	'symbol-number',
+	'symbol-boolean',
+	'symbol-array',
+	'symbol-object',
+	'symbol-key',
+	'symbol-null',
+	'symbol-enum-member',
+	'symbol-struct',
+	'symbol-event',
+	'symbol-operator',
+	'symbol-type-parameter'
+];


Huh, I'm surprised this type-checks!
I think it would be better like this though:

const symbolNameMap: Record<SymbolKind, string> = { SymbolKind.file: 'symbol-file', SymbolKind.module: 'symbol-module', ... };

Otherwise I would need to review that the order of the symbols here matches with the numeric values of the SymbolKinds (which could change btw.).

Yup, good idea. I assumed SymbolKinds enum would never change but that's a bad assumption.

hediet · 2022-03-11T09:19:35Z

Please fix formatting, then I can merge this! Probably will do some refactoring later though.
Thanks a lot for this cool feature!

- Ran prettier on code. npm run lint passes :)

TheOneKevin · 2022-03-11T14:48:02Z

The only testing I did was with the files under examples/linking. I added some nodes to cover the new cases. Other than that, I ran Prettier so it should conform to the style guides now.

hediet · 2022-03-16T10:33:32Z

Thank you! Will soon be available in Draw.io insiders!

janklostermann · 2024-03-19T10:21:29Z

Thanks so much for this incredible plugin!

If I understood this feature right, it allows to link a node in a draw.io-drawing to another file (e.g. a CAD-File, or another drawio-File) within the VScode controlled folder (and/or?) workspace. Click on the node would then open the other file (within VSCode if appropriate)
I was very hopeful to have it already available, as in 2022 it was "soon be available".

Maybe I am just to stupid to find it or understand how it works.

Could you please add this feature and usecase to your documentation and usage examples to allow me and others to easily understand and use it?
(Or did I just did not see it? And you could point me to it?)

TheOneKevin · 2024-03-22T22:30:26Z

@janklostermann: Hey! Check out docs/code-link.md for examples on this. The examples/linking/ directory also contains examples on how to use this. If I remember correctly, this linking feature allows you to link symbols inside a document -- I believe you need a language server support for this? Not sure about arbitrary files.

janklostermann · 2024-03-23T14:41:21Z

@TheOneKevin That's exactly where I tried to find it. But as you already mentioned, it seems to support only symbols.

Are files of a folder or workspace considered as symbols? (I don't actually know what symbols mean exactly in this context.)
Otherwise an function extention might be needed to allow relative paths or links to files within the workspace, when symbols within these files are not available.

By the way, for a more specific usecase: Linking to another *.drawio[.png/.svg]:
Do these drawio-files (languages?) provide symbols?

That would already resolve my current problem to expanding a box in a .drawio.png-file by clicking on it to open another .drawio.png file, showing the content of that box. (needed, as neither png nor svg support multi-pages, and I would like to use one of these more generally compatible formats in my repository. Great thanks they exist!!!)

TheOneKevin added 4 commits March 4, 2022 20:02

Added type annotations to path.ts

00d2da9

Update code-link.md to reflect changes

25bc90a

Added C++ code link examples

ef8b7fe

hediet requested changes Mar 7, 2022

View reviewed changes

TheOneKevin added 2 commits March 9, 2022 23:33

Updated code-link.md documentation

0835f30

TheOneKevin requested a review from hediet March 10, 2022 04:38

Update changelog

ecd7fa4

- Added 1.6.5-alpha.1

hediet reviewed Mar 11, 2022

View reviewed changes

Fixed SymbolKind record to compute indicies

2b35e3c

- Ran prettier on code. npm run lint passes :)

hediet approved these changes Mar 16, 2022

View reviewed changes

hediet merged commit be6eded into hediet:master Mar 16, 2022

janklostermann mentioned this pull request Mar 19, 2024

Link not open #255

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add code link support for hierarchical document symbols #303

Add code link support for hierarchical document symbols #303

TheOneKevin commented Mar 5, 2022 •

edited

Loading

hediet left a comment

hediet Mar 7, 2022

hediet Mar 7, 2022

TheOneKevin Mar 7, 2022

hediet Mar 8, 2022

hediet Mar 7, 2022

hediet Mar 7, 2022

TheOneKevin Mar 7, 2022 •

edited

Loading

hediet Mar 7, 2022

TheOneKevin Mar 7, 2022

hediet Mar 8, 2022

TheOneKevin Mar 9, 2022

hediet Mar 7, 2022

TheOneKevin commented Mar 10, 2022

hediet commented Mar 10, 2022

hediet commented Mar 11, 2022

hediet Mar 11, 2022 •

edited

Loading

TheOneKevin Mar 11, 2022

hediet commented Mar 11, 2022

TheOneKevin commented Mar 11, 2022

hediet commented Mar 16, 2022

janklostermann commented Mar 19, 2024

TheOneKevin commented Mar 22, 2024

janklostermann commented Mar 23, 2024

Add code link support for hierarchical document symbols #303

Add code link support for hierarchical document symbols #303

Conversation

TheOneKevin commented Mar 5, 2022 • edited Loading

hediet left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TheOneKevin Mar 7, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TheOneKevin commented Mar 10, 2022

hediet commented Mar 10, 2022

hediet commented Mar 11, 2022

hediet Mar 11, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hediet commented Mar 11, 2022

TheOneKevin commented Mar 11, 2022

hediet commented Mar 16, 2022

janklostermann commented Mar 19, 2024

TheOneKevin commented Mar 22, 2024

janklostermann commented Mar 23, 2024

TheOneKevin commented Mar 5, 2022 •

edited

Loading

TheOneKevin Mar 7, 2022 •

edited

Loading

hediet Mar 11, 2022 •

edited

Loading