Parcourir la source

remove progress chapter, generally shorten documentation and simplify class diagrams

Eren Yilmaz il y a 6 ans
Parent
commit
37821628e2

+ 43 - 31
doc/chapter/2architecture.tex

@@ -166,7 +166,7 @@ Additionally, there are multiple attributes that are used during the computation
     \item \member{dummy} specifies whether this node is a dummy node.
     \item \member{name} is the name of the node.
     \item The attributes \member{shift}, \member{sink},  \member{root} and  \member{align} correspond to the variables used by Brandes and Köpf~\cite{brandes_fast_2001}.
-    They are summarized in table~\ref{table:bk-variables}.
+    %They are summarized in table~\ref{table:bk-variables}.
     \item The attribute \member{xUndef} determines whether the x coordinate of the node has already been assigned a value.
     \item The attributes \member{x} and \member{y} are the coordinates of the node relative to its \member{parent}.
     \item The attributes \member{w} and \member{h} are the width and height of the node.
@@ -193,28 +193,29 @@ There you will find some less important (from a documentation point of view) att
 
 \begin{figure}[htp]
     \centering
-    \includegraphics[width=\linewidth,trim=0 7cm 0 0,clip]{img/graph.pdf}
-    \caption{Class diagram of the \code{graph} package.}
+    \includegraphics[width=0.95\linewidth,trim=0 2cm 0 0,clip]{img/graph.pdf}
+    \caption[Class diagram of the \code{graph} package]{Class diagram of the \code{graph} package. Getters, setters and constructors are omitted.
+    The package \code{graph.io} is displayed in figure~\ref{fig:io}}
     \label{fig:graph}
 \end{figure}
 
-\begin{table}[htp]
-    \begin{longtable}{|l|p{10cm}|}
-        \hline
-        Attribute & Explanation \\\hline\hline
-        \member{root} & The root node of the block of this node.
-        Unique for all nodes in the same block. \\\hline
-        \member{sink} & The topmost sink in the block graph that can be reached from the block that this node belongs to.
-        Only used for nodes that are the root of a block.
-        Unique for all nodes in the same class. \\\hline
-        \member{shift} & The shift of the class that this node belongs to.
-        Only used for nodes that are a sink of a class. \\\hline
-        \member{align} & The next node in the same block as this node.
-        The \member{align} of the last node in the block is the root node of the block again.\\\hline
-    \end{longtable}
-    \caption{Variables also used by Brandes and Köpf~\cite{brandes_fast_2001}}
-    \label{table:bk-variables}
-\end{table}
+%\begin{table}[htp]
+%    \begin{longtable}{|l|p{10cm}|}
+%        \hline
+%        Attribute & Explanation \\\hline\hline
+%        \member{root} & The root node of the block of this node.
+%        Unique for all nodes in the same block. \\\hline
+%        \member{sink} & The topmost sink in the block graph that can be reached from the block that this node belongs to.
+%        Only used for nodes that are the root of a block.
+%        Unique for all nodes in the same class. \\\hline
+%        \member{shift} & The shift of the class that this node belongs to.
+%        Only used for nodes that are a sink of a class. \\\hline
+%        \member{align} & The next node in the same block as this node.
+%        The \member{align} of the last node in the block is the root node of the block again.\\\hline
+%    \end{longtable}
+%    \caption{Variables also used by Brandes and Köpf~\cite{brandes_fast_2001}}
+%    \label{table:bk-variables}
+%\end{table}
 
 
 \section{The actual algorithm}\label{sec:theActualAlgorithm}
@@ -260,7 +261,8 @@ A class diagrams for the \code{processor} package is displayed in figure~\ref{fi
 \begin{figure}[htp]
     \centering
     \includegraphics[width=\linewidth,trim=0 5cm 0 0,clip]{img/processor.pdf}
-    \caption{Class diagram of the \code{processor} package.}
+    \caption[Class diagram of the \code{processor} package.]{Class diagram of the \code{processor} package.
+    Constructors and trivial getters and setters are omitted.}
     \label{fig:processor}
 \end{figure}
 
@@ -271,22 +273,32 @@ For an explanation of what is actually displayed, see chapter~\ref{ch:ui}
 \TODO{outdated}
 
 \begin{itemize}
-    \item The main window displays a \code{lane} of the class \code{JLayeredPane} and a \code{menue} of the class \code{JPanel}.
+    \item The main window displays a \code{JLayeredPane} on the right where the graph is shown and a \code{menu} of the class \code{JPanel} on the left, where \code{NiceButton}s and \code{PseudoCodeNode}s are located.
     The main window itself is a \code{JFrame} from the Swing library.
-    \item The \code{lane} display the current status of the graph.
-    \item The \code{menue} display \code{NiceButton}s and pseudocode.
-    \item \code{EdgeView} and \code{NodeView} are \code{JPanel}s, which means they can be drawn onto the \code{JFrame}.
+    \item Additionally a legend, class \code{LegendView}, that is another \code{JPanel} is displayed on the bottom.
+    \item The \code{PseudoCodeNode}s are rendered by the \code{PseudoCodeRenderer} class.
+    For example, this class highlights selected code lines.
+    \item \code{EdgeView} and \code{NodeView} are \code{JPanel}s, which means they can be drawn onto the \code{JLayeredPane}.
     For this they have to know about which part of the graph and which layout they belong to (some attributes).
     \item A \code{NiceButton} is a \code{JButton} that has an image on it.
-    \item For rendering the pseudocode we use a \code{PseudoCodeRenderer} that is a \code{DefaultTreeCellRenderer}.
-    For example, it sets line numbers and highlights selected code lines.
+    \item Next to the \code{PseudoCodeRenderer} is an object of the class \code{PseudoCodeLines}, that extends \code{JComponent}.
     \item A \code{RenderHelper} that contains some additional utility functions for the views.
+    \item Dialogs like the \code{OptionsDialog} and the \code{RandomGraphDialog} are \code{JDialog}s.
 \end{itemize}
-A class diagram of the packages \code{view} and \code{main} is displayed in figure~\ref{fig:view}.
+A class diagram of the package \code{view} is displayed in figure~\ref{fig:view}.
 
 \begin{figure}[htp]
     \centering
-    \includegraphics[width=0.9\linewidth,trim=0 8cm 0 0,clip]{img/main_and_view.pdf}
-    \caption{Class diagram of the packages \code{view} and \code{main}.}
+    \includegraphics[width=0.9\linewidth,trim=0 11cm 0 0,clip]{img/main_and_view.pdf}
+    \caption[Class diagram of the packages \code{view} and \code{main}]{Class diagram of the packages \code{view} and \code{main}.
+    Getters, setters and contructors are not omitted because most of them perform nontrivial computations.}
     \label{fig:view}
-\end{figure}
+\end{figure}
+
+
+\section{Known Issues}\label{sec:knownIssues}
+Only the most important unsolved issues are listed here.
+For a complete list, see \url{http://gogs.koljastrohm-games.com/GraphDrawer/NodeShuffler/issues}.
+\begin{itemize}
+    \item[\done] The most important issues were solved.
+\end{itemize}

+ 48 - 43
doc/chapter/3ui.tex

@@ -6,23 +6,27 @@ The current development status is displayed in figure~\ref{fig:full-application-
 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.
-    Currently a button to open the preferences dialog is located in the second row at the empty position.
-    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}
+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 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}
 
@@ -37,7 +41,8 @@ Figure~\ref{fig:originalpapergraph} compares our results to those of Brandes and
     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.}
+    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}
 
@@ -66,36 +71,37 @@ Figure~\ref{fig:originalpapergraph} compares our results to those of Brandes and
 \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}.
+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{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}) and also printlines its content. \\\hline
+    Alt + O & Opens the preferences dialog~\ref{fig:preferences}. \\\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 figure~\ref{fig:full-application-example}.}
+    \label{table:keys}
+\end{longtable}
 
-%\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}) and also printlines its content. \\\hline
-        Alt + O & Opens the preferences dialog~\ref{fig:preferences}. \\\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}
+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.
 
-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.
+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.
 Imagine the following scenario:
 \begin{enumerate}
     \item The user starts up \appname.
@@ -104,6 +110,5 @@ Imagine the following scenario:
     \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).
+    \item The algorithm stops again, when it reaches the beginning of the stage.
 \end{enumerate}

+ 0 - 73
doc/chapter/4progress.tex

@@ -1,73 +0,0 @@
-\section{Features}\label{sec:features}
-
-The following features are either planned (\planned), under construction (\progress) or done (\done):
-\begin{itemize}
-    \item[\done] Reading a graph from an input file as described in section~\ref{sec:inputFileFormat}.
-    \item[\done] Creating random graphs for testing purposes.
-    \begin{itemize}
-        \item[\done] Saving those randomly created graphs.
-    \end{itemize}
-    \item[\done] Drawing a graph with specified node sizes and positions.
-    \item[\done] Running the node placement algorithm by Brandes and Köpf~\cite{brandes_fast_2001}.
-    \begin{itemize}
-        \item[\done] Calculating the conflicts between edges.
-        \begin{itemize}
-            \item[\done] Differentiating between dummy nodes and non-dummy nodes.
-        \end{itemize}
-        \item[\done] Calculating the blocks.
-        \item[\done] Compacting the layout.
-        \item[\done] Combining the layouts.
-    \end{itemize}
-    \item[\done] Illustrating the progress while the algorithm is running in the form of
-    \begin{itemize}
-        \item[\done] Drawing the nodes at their current position.
-        \begin{itemize}
-            \item[\done] Hovering the mose over a node to highlight it in all layouts.
-            \item[\done] Drawing the nodes in the color of their blocks.
-            \item[\done] Drawing a colored background to show the class assignments.
-            \item[\done] Drawing dummy nodes differently from other nodes.
-        \end{itemize}
-        \item[\done] Drawing the edges just as plain straight lines.
-        \begin{itemize}
-            \item[\done] Drawing the conflicted edges in a different color.
-        \end{itemize}
-        \item[\planned] Drawing the edges of the block graph (yet another color, low priority).
-        \item[\done] Drawing the four extremal layouts and the combined layout separately.
-        \begin{itemize}
-            \item[\done] Optionally, drawing the only the extremal layout the algorithm is currently working on.
-        \end{itemize}
-        \item[\done] Showing pseudocode and the position where the algorithm currently is.
-        \begin{itemize}
-            \item[\done] Clicking on the pseudocode to set a breakpoint at (not \reserved{goto}) a specific location.
-            \item[\done] Customizing the font size of the code.
-        \end{itemize}
-        \item[\done] Showing a legend to explain the shapes and colors.
-        \item[\done] Showing tooltips when hovering over code lines and nodes in the graph that show the state of the variables.
-    \end{itemize}
-    \item[\done] Running the algorithm step by step manually.
-    \item[\done] Running the algorithm step by step with configurable delay (\enquote{automatic execution}).
-    \item[\done] Running the algorithm only on the expanded parts of the source code (\enquote{step overrun}).
-    \begin{itemize}
-        \item[\done] Right clicking the code to expand or collapse all lines up to a specified level.
-    \end{itemize}
-    \item[\done] Using debugger-like commands such as \enquote{step into}, \enquote{step over}, \enquote{step out}.
-    \item[\done] Running the algorithm backwards, both manually and automatic, using \enquote{step backwards into}, \enquote{step backwards over}, \enquote{step backwards out}.
-    \item[\done] Adding buttons and other graphical elements to support the user interface (low priority, see figure~\ref{fig:sketch}).
-    Currently there is only keyboard input (cf.\ section~\ref{sec:userInterface}).
-    \begin{itemize}
-        \item[\done] Displaying the buttons.
-        \item[\done] Making all the buttons work.
-    \end{itemize}
-    \item[\done] Working with hierarchical graphs.
-    \item[\done] Scaling the display with the (adjustable) window size.
-    \item[\planned] Working with disconnected graphs (cf.\ section~\ref{sec:assumptions}), either by modifying the algorithm or by processing the connected components one by one (low priority).
-    \item[\done] Creating ElkNode~\cite{noauthor_elk:_2018} objects from LayeredGraphNode (\ref{sec:graph}) objects.
-    \item[\planned] Creating LayeredGraphNode (\ref{sec:graph}) objects from ElkNode~\cite{noauthor_elk:_2018} objects (low priority).
-\end{itemize}
-
-\section{Known Issues}\label{sec:knownIssues}
-Only the most important unsolved issues are listed here.
-For a complete list, see \url{http://gogs.koljastrohm-games.com/GraphDrawer/NodeShuffler/issues}.
-\begin{itemize}
-    \item[\done] The most important issues were solved.
-\end{itemize}

+ 0 - 0
doc/chapter/5retrospection.tex → doc/chapter/4retrospection.tex


+ 0 - 0
doc/chapter/6contributors.tex → doc/chapter/5contributors.tex


+ 2 - 5
doc/doc.tex

@@ -257,14 +257,11 @@ frame=tb}
     \chapter{UI and visuals}\label{ch:ui}
     \input{chapter/3ui}
 
-    \chapter{Current Progress}\label{ch:progress}
-    \input{chapter/4progress}
-
     \chapter{Retrospection}
-    \input{chapter/5retrospection}
+    \input{chapter/4retrospection}
 
     \chapter{Contributors}
-    \input{chapter/6contributors}
+    \input{chapter/5contributors}
 
     \appendix
     \chapter{Appendix}\label{ch:appendix}

BIN
doc/img/graph.pdf


BIN
doc/img/main_and_view.pdf


BIN
doc/img/processor.pdf


BIN
doc/vpp/codeline.vpp


BIN
doc/vpp/graph.vpp


BIN
doc/vpp/io.vpp


BIN
doc/vpp/processor.vpp


BIN
doc/vpp/view.vpp