High-performance graphical view filtering with Sprotty

on YouTube ↗34m

" summary

Sprotty renders a diagram model in the browser while avoiding DOM overload by skipping elements outside the viewport (viewport culling), swapping simplified SVG representations at zoom thresholds (example code uses zoom <0.2, 0.2–0.5, >0.5) (client-side level-of-detail), and driving domain-aware filters and a preprocessing step that annotates display states (highlight, faded, none). Hierarchical nesting enables lazy-loading of subgraphs and port-aware layouts; layout uses the Eclipse Layout Kernel (ELK) transpiled to JavaScript (nested graphs).

AI-written summary · about

" chapters (8)

1. 0:00Introduction to graphical views
2. 1:31Performance challenges
3. 3:48Level of detail optimization
4. 10:09Smart filtering strategies
5. 18:39Model pre-processing
6. 21:26Hierarchical nesting
7. 26:01Layout and implementation
8. 29:20Summary and Q&A

" related talks

• 34mLucky in the Cloud With DiagramsMiro Spönemann, Jan Koehnlein · EclipseCon Europe 2018
• 43mVisualizations using SVG, Canvas, and WebGL in VueChris Fritz · VueConf TO 2018
• 24mCreating Interactive Data Visualizations for the WebNicolas Garcia Belmonte · JSConf.eu 2010
• 43mThe Future of Data Visualization on the WebAlan Mendelevich · NDC Oslo 2018
• 37mSupporting Data Journalism through Compilers for Visual InputsParker Ziegler · Strange Loop 2023
• 38mThinking DSLs for Massive VisualizationLeo Meyerovich · Strange Loop 2013
• 46mArchitectural Decisions for Interactive VizAmit Kapoor, Bargava Subramanian · ODSC India 2018
• 51mDiagrams as code 2.0Simon Brown · JNation 2022