This is a demonstration of how you can use the Toolkit to provide local context for some selected element. When you have a large dataset it can be difficult to navigate around - neighbourhood contextual information can help.
It's a straightforward process to set this up in the Toolkit. We use a few key capabilities of the Toolkit in this demonstration:
-
Each popup is a Surface that has a
Selectionas its data source, rather than the entire underlying toolkit. When the selection reloads, the associated Surface repaints itself. -
We use the
ElementDraggerhelper class to make our popups draggable -
We use a custom tag to draw out the formula in nodes that have one. Custom tags are a powerful feature of the vanilla Toolkit that allow you to achieve a composable UI like you get when using Angular, React, Vue, Svelte etc. Of course the Toolkit has a deep integration with each of those libraries so if you were doing this with a library integration you'd use a component from that library rather than a custom tag.