Visualize how an application interract with others

[jonaslagoni]

I want to propose adding a new visualization view to the plugin, that enables you to get a better view of how an application interacts with other defined applications.

I propose to integrate https://github.com/asyncapi/EDAVisualiser/ and it's application focus view into the vs-code plugin.

Because this feature needs information about who the "others" are i.e. a list of related AsyncAPI documents in your system, I propose we add a setting (that can be saved in workspaces) where you have to manually add an entry of remote or local paths to AsyncAPI documents. Not sure if there is any other way to achieve it 🤔

Blocked by (using this as the initial feature request) #234

I am willing to help maintain the integration long term as well as write the integration 🙂

[ivangsa]

hey @jonaslagoni this sounds like an awesome feature to add..

currently there is also a work in progress feature to add another alternative preview with "mermaidjs diagrams" for channels, messages and schema types #230 (never mind the title of the PR ;-) it is about adding that new preview) which is being activelty coded by @nikhilkalburgi as part of the gsoc 2024

• Regarding switching between views we can create a nested "Title bar menu" named "AsyncAPI Preview" with 3 nested entries and maybe a default preview button that can be configured in the extension settings... We will find out the best way to achieve this..

• Regarding the `information about "other" APIs", how does the EDAVisualizer works outside vscode? I mean, how it gets that "others" information? maybe we can store that information in an vscode-agnostic format so it can also be started outside vscode.. (just saying...)

It sounds like a great feature to me.

Currently I'm the maintainer of this repo, reviewing gsoc PRs but I'm not actively developing the extension myself..

Count on me to review and integrate PRs or sync efforts or else..

[jonaslagoni]

Regarding switching between views we can create a nested "Title bar menu" named "AsyncAPI Preview" with 3 nested entries and maybe a default preview button that can be configured in the extension settings... We will find out the best way to achieve this..

Makes sense 👍 We can always change it afterwards 🤙

Regarding the `information about "other" APIs", how does the EDAVisualizer works outside vscode? I mean, how it gets that "others" information? maybe we can store that information in an vscode-agnostic format so it can also be started outside vscode.. (just saying...)

There are a few ways, I would suggest we add a setting similar to asyncapi.preview.externals: [] configuration which contains links (relative to the root workspace, or remote (as seen here: https://github.com/asyncapi/EDAVisualiser/blob/master/examples/simple-react/src/gamingapi/apps.js)).

Technically, we could store it as an AsyncAPI extension such as x-external-applications so you always have all the information right in your AsyncAPI document.

How does that sound @ivangsa?

[jonaslagoni]

If we want it as an extension, we could technically add the feature as part of the https://github.com/asyncapi/EDAVisualiser instead of here 🤔

[ivangsa]

Sounds good 👍

I would add an external configuration file (not inside vscode settings)... also not everybody would be able to edit the asyncapi files (or keep the changes after fetching upstream changes)...

Later we could convert the preview extension as a vscode web extension so it can be used with github codespaces, gitpod... etc. For that we can not use nodejs APIs to access workspace resources (like yml files) only the vscode workspace API.

I may be able to review existing code to make this happen.

[ibishal]

Hey @jonaslagoni @ivangsa , i would like to propose this as an project idea for this year mentorship program, may I ?