\begin{table}[ht]
	\centering
    \small
    \begin{longtable}{p{3cm} p{8cm} p{4cm}}
        \rowcolor{gray!50}
		\textbf{Term} & \textbf{Explanation} & \textbf{Example} \\
		Phase & One phase of the Sugiyama approach~\cite{sugiyama_methods_1981} & Node Placement \\
        \rowcolor{gray!25}
		Stage & One stage of the BK algorithm~\cite{brandes_fast_2001} & Balancing \\
		Step & Atomic part of a stage of the BK algorithm~\cite{brandes_fast_2001} & Computing one $x$ coordinate during balancing stage \\
		\rowcolor{gray!25}
        \appname & The name of the application for which this is the documentation & \\
        \member{sink} & See table~\ref{table:bk-variables} & \\
        \rowcolor{gray!25}
        \member{shift} & See table~\ref{table:bk-variables} & \\
        \member{root} & See table~\ref{table:bk-variables} & \\
        \rowcolor{gray!25}
        \member{align} & See table~\ref{table:bk-variables} & \\
        Extremal layout & Defines in which order the layers are traversed and if a node is aligned with its upper or lower median. & Leftmost lower \\
        \rowcolor{gray!25}
        Automatic execution & The state of the \code{AnimationController} where it repeatedly sends step commands with a certain delay & See section~\ref{sec:userInterface} \\
        Automatic backwards execution & Special case of automatic execution in backwards direction & See section~\ref{sec:userInterface} \\
        \rowcolor{gray!25}
        pseudocode & Code that does not clearly belong to a specific programming language.
        It can actually be executed, although we call it pseudocode. & see figure~\ref{fig:full-application-example} \\
        step overrun & The state of the \code{AnimationController} where it repeatedly sends step commands, but only inserts a delay after steps whose line of pseudocode is currently unfolded in the pseudocode view. & See section~\ref{sec:userInterface} \\
        \\\\
	\end{longtable}
	\caption{Glossary for the most difficult terms as we use them.}
	\label{table:glossary}
\end{table}

\begin{figure}[htp]
    \centering
    \includegraphics[width=0.33\linewidth]{img/random-graph-dialog}
    \caption[Random graph dialog]{Dialog for generating random graphs.}
    \label{fig:random-graph-dialog}
\end{figure}

\begin{figure}[htp]
    \centering
    \includegraphics[width=\linewidth]{img/debug-table}
    \caption[Debug Table]{An example for a debug table. The graph used is the same as in figure~\ref{fig:example}}
    \label{fig:debug-table}
\end{figure}

\begin{figure}[htp]
    \centering
    \includegraphics[width=0.33\linewidth]{img/preferences}
    \caption[Preferences]{The dialog for adjusting the preferences.}
    \label{fig:preferences}
\end{figure}

\begin{figure}[htp]
    \centering
    \includegraphics[width=0.33\linewidth]{img/error_disconnected}
    \caption[Error caused by disconnected graph]{An illustration of the error caused by the graph displayed in figure~\ref{fig:error_disconnected}.
    In the lowest layer the two nodes are drawn at the same position.}
    \label{fig:error_disconnected_img}
\end{figure}

\begin{figure}[htp]
    \begin{lstinputlisting}[language=json,emph={},basicstyle=\scriptsize\ttfamily,numberstyle=\tiny]{src/error_disconnected.json}
    \end{lstinputlisting}
    \caption[Disconnected graph causing an error]{Example graph where the node placement algorithm does not behave correctly, possibly because it is not connected.
    The error is illustrated in figure~\ref{fig:error_disconnected_img}.}
    \label{fig:error_disconnected}
\end{figure}