NodeShuffler/doc/chapter/3ui.tex

Note that 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}
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}.

Some features that are not visible from the screenshots:
\begin{itemize}
    \item Hovering the mose over a node highlights it in all layouts.
    \item It is possible to configure the view to only show the extremal layout the algorithm is currently working on.
    This can be helpful when working with large graphs on small screens.
    \item Tooltips are shown when hovering over code lines and nodes in the graph,
    These tooltips show the state of the variables.
    \item The display scales with the size of the window.
\end{itemize}

To avoid clutter we do not draw the edges of the block graph.

\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}.
    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, preferences, 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: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 upper (upper row), lower (lower row) and the horizontal directions are leftmost (left column) and rightmost (right column).
    The colors of the nodes display which block they belong to: For example the two red nodes in the leftmost upper extremal layout are in the same block.
    Grey nodes are their own blocks consisting of only one node.
    Round nodes are the roots of the blocks.
    The background color of a node indicates the class that this node belongs to.
    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.
    If any edge was marked as conflicted, it would have been drawn in red color.
    To provide this information to the user at runtime a legend has been added, which is visible in figure~\ref{fig:full-application-example}}.
    \label{fig:example}
\end{figure}

\begin{figure}[htp]
    \centering
    \begin{subfigure}{\textwidth}
        \centering
        \includegraphics[width=0.9\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.75\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.
        The narrower nodes are dummy nodes.}
        \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}.
To improve the user experience even further, these can also be used by clicking on one of the buttons displayed in figure~\ref{fig:full-application-example}.

\begin{table}[htp]
    \centering
    \small
    \begin{longtable}{l p{12cm}}
        \rowcolor{gray!50}
        \textbf{Key} & \textbf{Action} \\
        Alt + Left arrow key & Perform one forward step of the algorithm, \enquote{step into}. \\
        \rowcolor{gray!25}
        Alt + Right arrow key & Perform one \enquote{step into} in backwards direction---i.e.\ undo one step of the algorithm. \\
        Alt + Up arrow key & Perform one \enquote{step over} in backwards direction. \\
        \rowcolor{gray!25}
        Alt + Down arrow key & Perform one \enquote{step over} in forwards direction. \\
        Alt + Page down & Perform one \enquote{step out} in forwards direction. \\
        \rowcolor{gray!25}
        Alt + Page up & Perform one \enquote{step out} in backwards direction. \\
        Alt + P & Activate automatic forwards execution. \\
        \rowcolor{gray!25}
        Alt + R & Activate automatic backwards execution. \\
        Alt + Pause & Pause automatic execution. \\
        \rowcolor{gray!25}
        Alt + G & Generate a random graph (opens dialog window~\ref{fig:random-graph-dialog}).
        Ensures that the generated graph is connected.\\
        Alt + S & Save the current graph to a file (opens a dialog window). \\
        \rowcolor{gray!25}
        Alt + L & Load a graph from a file (opens a dialog window). \\
        Alt + D & Show a debug table (opens window~\ref{fig:debug-table}) and also printlines its content. \\
        \rowcolor{gray!25}
        Alt + O & Opens the preferences dialog~\ref{fig:preferences}. \\
    \end{longtable}
    \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 figure~\ref{fig:full-application-example}.}
    \label{table:keys}
\end{table}

The decision to open new windows was made to save room in each single window.
For example the fields for generating a random graph are rarely used, so the were chosen to be displayed in a separate dialog when needed.

There is one interaction that is available neither on keyboard nor on a button: Breakpoints.
For this, the user performs a triple click on one of the lines in the pseudocode or a single click on one of the line numbers.
Upon reaching the beginning of that stage (beginning in forwards direction) the automatic execution pauses.