💡 Road to Richer UI components in Foam VS Code extension?

[cliffordfajardo]

Hi Foam team & community,
I simply wanted to share some thoughts on how we could perhaps create richer web views inside of Foam, if it makes sense and is of interest to others.

Recently Github/MSFT team have been enabling richer APIs and libraries to allow VS Code extension creators the ability to create rich web UI's within VS Code. For example. Microsoft and Github collaborated to create this library (vscode-webview-ui-toolkit), which allows extension authors to author Webviews with rich Javascript frameworks like React etc.

Video comes from this discussion I started on Twitter in this thread

001-react-in-vscode-extensions.mp4

One minor thing that is lacking is the ability to create the Foam Notes graph with custom filter buttons and toggles like this:
Credits to this article for the image: It’s Not Just a Pretty Gimmick: In Defense of Obsidian’s Graph View

Considerations

1. With the ability to create custom UI's (essentially mini web apps), it not careful, it would be easy to for Foam to grow in complexity and spiral out of focus/control.

Question(s)

1. Is any of this of interest to folks using Foam?
2. Maybe to address the point 1️⃣ in considerations section, an API from Foam's core code, can be created to others to build or embed their own UI's on top of Foam's API. In the long run, this would allow the Foam project to remain focused on creating the best Zettlekasten experience; focusing on nailing the API internals can only be a good thing

References

• React Webview UI Toolkit for VS Code
• It’s Not Just a Pretty Gimmick: In Defense of Obsidian’s Graph View
• Think Better with the Graph View + Live note-making session
• Twitter thread

[riccardoferretti]

Thanks for the pointer @cliffordfajardo, this is very useful!

Here are my comments:

With the ability to create custom UI's (essentially mini web apps), it not careful, it would be easy to for Foam to grow in complexity and spiral out of focus/control.

Agreed, and there has been some talk about what would be considered useful and in scope for Foam wrt to the dataviz graph.
You can get an idea of various proposals here: foam-dataviz Related to data visualization

Is any of this of interest to folks using Foam?

Yes, very much so!
As of today we have been using DAT only because it was an easy way to create some UI controls for the graph. A migration to the VS Code component library feels like a very good path to me.

Maybe to address the point 1️⃣ in considerations section, an API from Foam's core code, can be created to others to build or embed their own UI's on top of Foam's API. In the long run, this would allow the Foam project to remain focused on creating the best Zettlekasten experience; focusing on nailing the API internals can only be a good thing

Foam is about to publish an API (in alpha at first) that can be used by other extensions to augment the note taking/browsing experience, as well as add additional semantics (e.g. todos, calendars, ...) to Foam, while keeping the core lean, and focused on the parsing of metadata from the knowledge base, therefore exposing the model, and providing building blocks as commands/API.

A few examples:

• Support for Quarto #924
• Basic GTD Support Proposal #894

---

To sum up, yes, using a native VS Code feel for the graph sounds good.
The first step to me would be migration of the current view to this UI style (and get rid of DAT).
For further development, keep in mind what we want Foam core to include, and what hooks we want to expose to third party extensions built on top of it.
Any help/support/idea is always welcome.