Note that since the application is still under construction, so not all screenshots may be up to date.

\section{Graphical presentation of the running algorithm}\label{sec:graphicalPresentationOfTheRunningAlgorithm}
A first sketch of how we want \appname\ to look is shown in figure~\ref{fig:sketch}.
The current development status is displayed in figure~\ref{fig:full-application-example}.
Another example graph and an explanation of the shapes and colors is provided in figure~\ref{fig:example}.
Figure~\ref{fig:originalpapergraph} compares our results to those of Brandes and Köpf~\cite{brandes_fast_2001}.

\begin{figure}[htp]
    \centering
    \includegraphics[width=\linewidth]{img/skizze}
    \caption[First sketch of the planned layout]{A first sketch of the planned layout, created with Microsoft Paint.
    The buttons are (first row, from left to right): step over, step into, step out, run, pause, debug; and (second row, from left to right): step back over, step back into, step back out, run backwards, load graph, save graph, generate random graph.
    The actions corresponding to the buttons are the same as described for the keyboard input in table~\ref{table:keys}, at least for the features that are already implemented (all of them).
    The left four rectangles show the progress of the four extremal layouts.
    The right rectangle shows pseudocode of the algorithm and the position of the current step.}
    \label{fig:sketch}
\end{figure}

\begin{figure}[htp]
    \centering
    \includegraphics[width=\linewidth]{img/full-application-example}
    \caption[Full application window]{The full window of the application before any steps of the algorithm have been executed.
    The displayed graph has been loaded from figure~\ref{fig:json-example}.}
    \label{fig:full-application-example}
\end{figure}

\begin{figure}[htp]
    \centering
    \includegraphics[width=0.6\linewidth]{img/example}
    \caption[A simple graph with 5 nodes]{A simple graph with 5 nodes after the four extremal layout have been computed, but not balanced yet.
    The vertical directions are down (upper row), up (lower row) and the horizontal directions are left (left column) and right (right column).
    The background colors of the nodes display which block they belong to: For example the two red nodes on the upper right are in the same block.
    Round nodes are the roots of the blocks.
    A colored circle on a node indicates the class that this node belongs to and is also the color of the associated sink in the block graph.
    The node that is currently in the focus of the algorithm (whatever this means for the current stage) is highlighted in black color.
    Although edges are not drawn during the node placement phase we added them here as straight lines to improve readability.}
    \label{fig:example}
\end{figure}

\begin{figure}
    \centering
    \begin{subfigure}{\textwidth}
        \centering
        \includegraphics[width=\linewidth]{img/bk-example-theirs}
        \caption{An example graph directly taken from the paper of Brandes and Köpf~\cite{brandes_fast_2001}.}
        \label{fig:theirs}
    \end{subfigure}\\\vspace{4mm}
    \begin{subfigure}{\textwidth}
        \centering
        \includegraphics[width=0.4\linewidth]{img/bk-example-ours}
        \caption[The same graph as~\ref{fig:theirs}, displayed by \appname.]{The same graph as~\ref{fig:theirs}, displayed by \appname.
        The layouts are leftmost (first column), rightmost (third column), upper (first row) and lower (third row), respectively.
        The balanced layout is in the center.}
        \label{fig:ours}
    \end{subfigure}\\\vspace{4mm}
    \caption[Comparison to Brandes and Köpf]{Comparison of the implementation to the results of Brandes and Köpf~\cite{brandes_fast_2001}}
    \label{fig:originalpapergraph}
\end{figure}


\section{User interface}\label{sec:userInterface}
Currently the two main ways to interact with the application are keyboard events and graphical button-clicking.
The possible keyboard inputs are listed in table~\ref{table:keys}.
These can also be used by clicking on one of the buttons displayed in figures~\ref{fig:sketch} and~\ref{fig:full-application-example}.

%\begin{table}[htp]
    \begin{longtable}{|l|p{12cm}|}
        \hline
        Key & Action \\\hline\hline
        Alt + Left arrow key & Perform one forward step of the algorithm, \enquote{step into}. \\\hline
        Alt + Right arrow key & Perform one \enquote{step into} in backwards direction---i.e.\ undo one step of the algorithm. \\\hline
        Alt + Up arrow key & Perform one \enquote{step over} in backwards direction. \\\hline
        Alt + Down arrow key & Perform one \enquote{step over} in forwards direction. \\\hline
        Alt + Page down & Perform one \enquote{step out} in forwards direction. \\\hline
        Alt + Page up & Perform one \enquote{step out} in backwards direction. \\\hline
        Alt + P & Activate automatic forwards execution. \\\hline
        Alt + R & Activate automatic backwards execution. \\\hline
        Alt + Pause & Pause automatic execution. \\\hline
        Alt + G & Generate a random graph (opens dialog window~\ref{fig:random-graph-dialog}).
        Ensures that the generated graph is connected.\\\hline
        Alt + S & Save the current graph to a file (opens a dialog window). \\\hline
        Alt + L & Load a graph from a file (opens a dialog window). \\\hline
        Alt + D & Show a debug table (opens window~\ref{fig:debug-table}). \\\hline
        \caption[Overview of the available keyboard commands]{Overview of the available keyboard commands.
        The lazy user might not want to learn these by rote but instead use the buttons displayed in figures~\ref{fig:sketch} and~\ref{fig:full-application-example}.}
        \label{table:keys}
    \end{longtable}
%\end{table}

One interaction that is available neither on keyboard nor on a button is setting breakpoints.
For this, the user performs a triple click on one of the lines in the pseudocode.
Upon reaching the beginning of that stage (beginning in running direction) the automatic execution pauses.
Imagine the following scenario:
\begin{enumerate}
    \item The user starts up \appname.
    \item The user sets a breakpoint on \enquote{Extremal Layout: leftmost lower} (this is the third extremal layout in the order they are computed).
    \item The user activates automatic forwards execution.
    \item The algorithm pauses when reaching the first step of \enquote{Extremal Layout: leftmost lower}.
    \item The user activates automatic forwards execution again.
    \item After the stage of \enquote{Extremal Layout: leftmost lower} is roughly halfway finished, the user pauses the automatic execution and activates automatic \emph{backwards} execution.
    \item The algorithm would stop at the last step of \enquote{Extremal Layout: leftmost lower} (which is the first step in backwards direction), but this is obviously not reached from the middle of that stage.
    So the algorithm just runs backwards to the beginning of whole BK Node Placement Algorithm (first step of the preprocessing).
\end{enumerate}