Web Visualization of Big Tree Structures

Ing. Daniel Charvát

Bachelor's thesis

Abstract:

Od doby vzniku internetu výrazně narostla komplexnost webových aplikací. Moderní webové prohlížeče a výkonná zařízení umožnili vývoj webových služeb, které postupně nahrazují své předchůdce přímo instalované na stolní počítače. S tím úzce souvisí, že vzrostla komplexnost komponent nezbytných pro vývoj takových služeb. Příkladem je znovupoužitelná JavaScriptová komponenta, která umožňuje vizualizovat velké stromové struktury, a zároveň je příjemná k použití na malých i velkých zařízeních. V době psaní této práce neexistuje open-source JavaScriptové řešení, které by bylo zároveň dostatečně výkonné a příjemné k používání s desítkami tisíců stromových uzlů. Cílem této práce je tedy vytvořit výkonnou, responzivní, široce konfigurovatelnou a open-source JavaScriptovou komponentu, nazvanou Performant Vue Tree, která umožní vizualizaci velkých stromových struktur na webu. Za tímto účelem je využita technika zvaná Virtual scrolling, která umožňuje vykreslovat velký počet prvků, aniž by byl zahlcen DOM prohlížeče, a dále za pomocí Web Workers, které umožňují provádět vypočetní operace mimo hlavní vlákno prohlížeče.

Abstract:

Since the invention of the internet, the web applications have become significantly more complex. The modern browsers and computationally powerful devices enable development of web services that progressively substitute their desktop predecessors. Relatedly, the complexity of web components required to develop such web applications has increased as well. One such example is a reusable JavaScript component capable of visualizing big tree structures that is convenient to use on small and large screens alike. At the time of writing this thesis, there is no such open-sourced JavaScript solution that would be both performant enough and convenient to use with tens of thousands of tree nodes. Therefore, the main objective of this thesis is to create a powerful, responsive, highly configurable and open-sourced JavaScript component, called Performant Vue Tree, for visualization of big tree structures on the web. This is achieved mainly through virtual scrolling which is a technique of rendering a large number of elements without polluting the DOM, and through Web Workers that enable performing computations in a background thread of the browser.

Keywords

Big tree structures visualization, responsivity, Vue.js, Web Workers, Virtual Scrolling, Vizualizace velkých stromových struktur, responzivita

Language used: English

Date on which the thesis was submitted / produced: 12. 1. 2021

Thesis defence

• Date of defence: 18. 2. 2021
• Supervisor: doc. RNDr. Tomáš Pitner, Ph.D.
• Reader: Mgr. Luděk Bártek, Ph.D.

Masaryk University

Faculty of Informatics

Bachelor programme / field:
Informatics / Computer Systems and Data Processing