feat(visualization): write

Signed-off-by: Matej Focko <mfocko@redhat.com>

implementation.tex

@@ -23,7 +23,9 @@ Apart from the abstract methods \texttt{RankedTree} provides following interface
 
 Apart from that we have also implemented class for representation of nodes that provides quite rich interface that is utilized during rebalancing and also in generic methods on generic tree.
 
-\section{Testing and validation}
+Implementation includes AVL (as described by \textit{Adelson-Velskij and Landis}~\cite{avl}), WAVL (as described by \textit{Haeupler et al.}~\cite{wavl}) and rAVL (as described by \textit{Sen et al.}~\cite{ravl}).
+
+\section{Testing and validation}~\label{chap:testing}
 
 From the beginning we have employed the techniques of property-based testing (done manually during the C\# implementation and via Hypothesis~\cite{hypothesis} for the Python implementation). The elementary requirement for testing and validation of the implemented algorithms was a \textbf{correct} \texttt{is\_correct\_node} method that validates properties of a specific rank-balanced tree and a good set of invariants. List of set invariants follows:
 \begin{enumerate}
@@ -41,4 +43,4 @@ From the beginning we have employed the techniques of property-based testing (do
         \end{itemize}
 \end{enumerate}
 
-We also admit abuse of property-based testing to find a \textit{minimal} sequence of operations when WAVL tree relaxation manifests. For that purpose we have implemented a \textit{comparator} class that takes two different instances of rank-balanced trees and provides rudimentary \texttt{insert} and \texttt{delete} interface enriched with \texttt{are\_same} (evaluates isomorphism and ranks) and \texttt{are\_similar} (evaluates just isomorphism) methods. While trying to find minimal counter-example, we have also discovered a bug in rebalance after deletion in the WAVL tree that caused enforcement of the AVL rank rule.
+We have also used property-based testing to find a \textit{minimal} sequence of operations when WAVL tree relaxation manifests.~\footnote{While trying to find minimal counter-example, we have also discovered a bug in rebalance after deletion in the WAVL tree that caused enforcement of the AVL rank rule.} For that purpose we have implemented a \textit{comparator} class that takes two different instances of rank-balanced trees and provides rudimentary \texttt{insert} and \texttt{delete} interface enriched with \texttt{are\_same} (evaluates isomorphism and ranks) and \texttt{are\_similar} (evaluates just isomorphism) methods. 

thesis.tex

@@ -7,7 +7,7 @@
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 
 \documentclass[
-  printed, %% The `digital` option enables the default options for the
+  digital, %% The `digital` option enables the default options for the
            %% digital version of a document. Replace with `printed`
            %% to enable the default options for the printed version
            %% of a document.

visualization.tex

@@ -1 +1,35 @@
 \chapter{Visualization}
+
+We will split the visualization into two parts: implementation and features.
+
+\section{Implementation}
+
+For the visualization we have considered multiple options. First of all we had a look at quite popular choices as:
+\begin{itemize}
+    \item d3.js
+    \item cytoscape.js
+    \item cola.js
+    \item spring.js
+\end{itemize}
+
+In the end, we have decided to use combination of d3 and d3-graphviz, which offers rendering from DOT format, as we had the conversion to DOT format included in the Python implementation. Another benefit was the ability of d3-graphviz to do transitions between different trees.
+
+For the ease of development, and also usage, we have considered developing the web app in the React. However we encountered issues with one of the dependencies of d3-graphviz that prevented us from that. Therefore the entire frontend of the web app is done with Bootstrap, which provides CSS and also UI elements.
+
+\section{Features}
+
+We started with a simple visualization of the operations, such as \texttt{insert} and \texttt{delete}, on the WAVL tree. Having the implementations in Python influenced our decision to visualize them in addition to WAVL.
+
+As mentioned in \autoref{chap:testing}, we have used property-based testing to find minimal counter-examples where AVL and WAVL differs. For that purpose we have implemented the \textit{comparator} class. Porting that class to JavaScript allowed us to visualize different trees at the same time.
+
+Last feature of the web page are \textit{predefined scenarios}. Motivation for creating predefined scenarios is simple and that is being able to trigger different parts of the algorithms that are used in rebalancing or triggering a deletion that causes differences between AVL and WAVL trees. For visualization we cover following scenarios:
+\begin{enumerate}
+    \item \textit{Single rotation} and \textit{double rotation} that happen as final part of the deletion rebalance in the WAVL tree.
+    \item \textit{Double demotion} that happens during the propagation part of the deletion rebalance in the WAVL tree.
+\end{enumerate}
+
+For visualization of two trees at once, we have decided to prepare following scenarios:
+\begin{enumerate}
+    \item \textit{Rank difference}, where AVL and WAVL trees differ in ranks after a deletion. This is caused by the relaxation of the \textit{AVL Rule} and allows to halt the deletion rebalancing sooner in the WAVL tree.
+    \item \textit{Different trees}, where AVL and WAVL trees differ not only in rank, but also are not isomorphic. This is caused by halting the deletion sooner as opposed to AVL tree where the rebalancing continues and rotation happens higher in the tree.
+\end{enumerate}