https://github.com/jsplumb-demonstrations/neighbourhood-views

Provides an example of how to render selections of the main dataset into separate canvases
https://github.com/jsplumb-demonstrations/neighbourhood-views

diagram diagramming javascript jointjs jsplumb svg typescript visualization

Last synced: about 21 hours ago
JSON representation

Provides an example of how to render selections of the main dataset into separate canvases

• Host: GitHub
• URL: https://github.com/jsplumb-demonstrations/neighbourhood-views
• Owner: jsplumb-demonstrations
• Created: 2024-04-01T23:14:05.000Z (8 months ago)
• Default Branch: 6.x
• Last Pushed: 2024-09-16T04:05:16.000Z (2 months ago)
• Last Synced: 2024-09-16T05:24:49.331Z (2 months ago)
• Topics: diagram, diagramming, javascript, jointjs, jsplumb, svg, typescript, visualization
• Language: JavaScript
• Homepage: https://jsplumbtoolkit.com/demonstrations/segmented-connectors
• Size: 18.6 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Neighbourhood views

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 `Selection` as its data source, rather than the entire underlying toolkit. When the selection reloads, the associated Surface repaints itself.

- We use the `ElementDragger` helper 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.