User manual update

docs/theme.css

+/*Modified version of https://casual-effects.com/markdeep/latest/slate.css?*/
+
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap');
+
+body#md {
+    font-weight: 400;
+    font-size: 16px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 170%;
+}
+
+
+/* reset heading/link fonts to that of body */
+.md a,
+.md div.title, contents, .md .tocHeader,
+.md h1, .md h2, .md h3, .md h4, .md h5, .md h6,
+.md .nonumberh1, .md .nonumberh2, .md .nonumberh3, .md .nonumberh4, .md .nonumberh5, .md .nonumberh6,
+.md .shortTOC, .md .mediumTOC, .md .longTOC {
+    font-family: inherit;
+}
+
+.md div.title, .md div.subtitle, .md h1, .md h2, .md h3, .md h4, .md h5, .md h6, .md .tocHeader{
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: 300;
+}
+
+.md div.title {
+    font-size: 43px;
+    text-align: left;
+    margin-bottom: 0px;
+}
+
+.md div.subtitle {
+    text-align: left;
+    font-size: 115%;
+}
+
+.md div.afterTitles {
+    margin-top: 20px;
+    margin-left: -20px;
+    margin-right: -20px;
+    height: 0px;
+    border-bottom: 1px solid #000;
+    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
+}
+
+.md div.afterTitles + p {
+    margin-top: 30px;
+}
+
+.md h1, .md .tocHeader {
+    font-size: 175%;
+    margin-bottom: 25px;
+    margin-left:-20px;
+    margin-right:-20px;
+    padding-left:20px;
+    padding-top:25px;
+    border-bottom: none;
+    border-top:6px solid #5a5a5a;
+}
+
+.md div.tocHeader {
+    margin-bottom: -25px;
+}
+
+.md h2 {
+    font-size: 150%;
+    border: none;
+}
+
+.md h3, .md h4, .md h5, .md h6 {
+    font-size: 120%;
+}
+
+.md code {
+    font-size: 90%;
+    background: #eee;
+}
+
+.md code, .md pre {
+    font-family: 'Fira Code', monospace;
+}
+
+/* .md .longTOC {
+    font-family: 'Roboto', Arial, Helvetica, "sans serif";
+    font-weight: 300;
+} */
+
+
+.md pre.listing {
+    font-size: 100%;
+}
+
+.md pre.listing code {
+    font-weight: unset;
+    background: none;
+    color: unset;
+}
+
+.md pre.listing code .line {
+    padding-left: 2px;
+}
+
+/* Dark mode with side TOC on screen */
+/* @media screen { */
+    .md svg.diagram {
+        stroke: #ccc;
+        fill: #ccc;
+    }
+
+    .md svg.diagram .opendot {
+        fill: #000;
+    }
+
+    .md table.table {
+        box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
+        background-color: #2a2a2a;
+    }
+
+    .md table.table tr:nth-child(even) {
+        background-color: #202020;
+    }
+
+    .md table.table td, .md table.table th {
+        border: 1px solid #202020;
+    }
+
+    .md table.table th {
+        color: #000;
+    }
+
+    .md pre.listing {
+        background: #202020;
+        border: 1px solid #777;
+        box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
+    }
+
+    .md code {
+        color: #fff;
+        background: unset;
+    }
+
+    .md div.afterTitles {
+        border-bottom: 1px solid #fff;
+    }
+
+    .md div.title, .md div.subtitle, .md h1, .md h2, .md h3, .md h4, .md h5, .md h6, .md .tocHeader {
+        color: #fff;
+    }
+
+    .hljs-comment,.hljs-quote{color:#a0f0aa}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#cc6666}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#de935f}.hljs-attribute{color:#f0c674}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#b5bd68}.hljs-title,.hljs-section{color:#81a2be}.hljs-keyword,.hljs-selector-tag{color:#b294bb}.hljs{display:block;overflow-x:auto;background:#1d1f21;color:#c5c8c6;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
+    .hljs-function .hljs-title { color:#81a2be}
+
+    body {
+        color: #e3e3e3;
+        background: #2e2e2e;
+    }
+
+    .md div.title, .md h1, .md h2, .md h3, .md h4, .md h5, .md h6, .md .longTOC a, .md .longTOC code, .md a:link, .md a:visited {
+        text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
+    }
+
+    .md .admonition {
+        position: unset;
+        box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
+        background: #202020;
+        border: 1px solid rgba(68,138,255,1);
+        border-left: 2.5rem solid rgba(68,138,255,1);
+    }
+
+    .md .admonition-title {
+        border-bottom: 1px solid rgba(68,138,255,1);
+    }
+
+    .md .admonition.warn, .md .admonition.warning {
+        border: 1px solid rgba(255,170,0,1);
+        border-left: 2.5rem solid rgba(255,170,0,1);
+        background: #202020;
+    }
+
+    .md .admonition.warn .admonition-title, .md .admonition.warning .admonition-title {
+        border-bottom: 1px solid rgba(68,138,255,1);
+    }
+
+    .md .admonition.tip {
+        border: 1px solid rgba(68,138,255,1);
+        border-left: 2.5rem solid rgba(68,138,255,1);
+        background: #202020;
+    }
+    .md .admonition.tip .admonition-title {
+        border-bottom: 1px solid rgba(68,138,255,1);
+    }
+
+    .md .admonition.error {
+        border: 1px solid rgba(255,23,68,1);
+        border-left: 2.5rem solid rgba(255,23,68,1);
+        background: #202020;
+    }
+
+    .md .admonition.error .admonition-title {
+        border-bottom: 1px solid rgba(255,23,68,1);
+    }
+
+    .md .longTOC a, .md .longTOC code, .md a:link, .md a:visited, .md a:link code, .md a:visited code {
+        color: #80bfff !important;
+    }
+
+/* } */
+

docs/user_manual.md.html

 <meta charset="utf-8">
+<link rel="stylesheet" href="theme.css?">
 
                 **User manual**
               Design project group 14
@@ -22,14 +23,9 @@
 *                         \          /             *
 *                          '--------'              *
 ****************************************************
-
-!!! WARNING
-    This is a work in progress version of the user manual.
-
-
 Introduction
 ============
-This is the user manual for the Modest Toolset VSCode extension.
+This is the user manual for the Modest Toolset VSCode extension. It will go in-depth about the installation process and each feature of the extension.
 
 Installation
 ============
@@ -40,10 +36,10 @@ Start by installing the Modest Toolset VSCode extension from the VSCode marketpl
 After the extension has been installed open a modest file or the extension's sidebar. You will get an error message with a button that will take you to the settings. There you should enter the location where you installed the Modest Toolset. Make sure to provide the path to the executable itself, called `modest.exe` on Windows and `modest` on Linux and macOS.
 
 !!! WARNING
-    On macOS you may need to allow the Modest Toolset executable to run in the settings if you are not using a notarized version
+    On macOS you may need to allow the Modest Toolset executable to run in the settings if you are not using a notarised version
 
 ## Optional: Enabling the DOT viewer (Graphviz)
-To be able to use the DOT viewer you need to [install Graphviz](https://graphviz.org/download/). If Graphviz was added to your `Path` environment variable it should be possible for the extension to find it. If that is not the case edit the `Externals.defaults` file in the Modest Toolset installation location and set the `dot-path` option.
+To be able to use the DOT viewer you need to [install Graphviz](https://graphviz.org/download/). If Graphviz was added to your `Path` environment variable it should be possible for the extension to find it. If that is not the case edit the `Externals.defaults` file in the Modest Toolset installation location and set the `dot-path` option to the proper Graphviz directory.
 
 
 Features
@@ -55,78 +51,97 @@ Features
 - Autocomplete variables
 - Display the structure of a file in an outline
 - Display information about certain words when hovering over it
-- Renaming of variable, function and process names
+- Renaming of variable, function and process names (see section [Renaming symbols])
 - Code formatting
 - Code snippets
-- Refactoring support (extract constant/function/process/variable, surround with if/while/etc..) (See section [Refactoring])
+- Refactoring support (extract constant/function/process/variable, surround with if/while/etc..) (see section [Refactoring])
 - Document symbol highlighting
-- Graphical user interface to run tools on files (see section [Sidebar])
-- Automatically extract all possible parameters of every tool and populate the sidebar with corresponding input boxes to set these parameters.
-- Display a DOT file generated by Modest for the current file, updated in real time. (see section [DOT view])
-- Process output to allow it to be interactively shown. (see section [Analysis Results])
+- Graphical user interface to run tools on files (see section [Running tools])
+- Automatically extract all possible parameters of every tool and populate the sidebar with corresponding input boxes to set these parameters (see section [Parameters])
+- Display a DOT file generated by Modest for the current file, updated in real time (see section [DOT view])
+- Process output to allow it to be interactively shown (see section [Analysis Results])
 
 Usage
 =====
+This section provides an explanation of how to use some of the more complicated features of the Modest extension. For an explanation of the more common language features that are implemented by the extension refer to the [Visual Studio Code documentation](https://code.visualstudio.com/docs).
 
+## Running tools
+The sidebar, found by clicking the Modest Toolset logo in the bar on the left, is used to run tools from the Modest Toolset on your files. Figure [sidebar] shows the sidebar in action.
 
-## Sidebar
-
-!!! WARNING
-    This section is work in progress
-
-The sidebar found by clicking the Modest Toolset logo in the bar on the left is used to run tools from the Modest Toolset on your files.
-
-![Figure [sidebar]: The sidebar](sidebar.png)
+![Figure [sidebar]: The sidebar.](sidebar.png style="max-width:50%")
 
 ### Tool selection
-Next to the run button there is a dropdown that is automatically populated with the available tools.
+Next to the run button there is a dropdown that is automatically populated with the available tools. Selecting a tool will change the options available in the expandable sections below the dropdown.
 
 ### Open constants and extra parameters
-Below the tool selection there is an expandable section containing the constants in your file that do not have an assigned value. The values specified here will be passed to the tool using it's experiment parameter. Below the open constants section there is a section where additional parameters like intervals for sampling expressions may be provided. The open constants and extra paramters are saved for each file separately.
+Below the tool selection there is an expandable section containing the constants in your file that do not have an assigned value. The values specified here will be passed to the tool using it's experiment parameter. Below the open constants section there is a section where additional parameters like intervals for sampling expressions may be provided. The open constants and extra parameters are saved for each file separately.
 
 ### Parameters
-Below the additional parameters section the tool-specific parameters are shown. The available parameters are automatically gathered from your Modest Toolset installation. The parameters are saved for each tool separately.
+Below the additional parameters section the tool-specific parameters are shown. The available parameters are automatically gathered from your Modest Toolset installation. The parameters are saved for each tool separately. Categories and individual will show revert buttons when their content is not equal to the default.
+
+### Run progress
+When a tool run is in progress a progress bar (Figure [progress_bar]) is shown in the bottom right of the screen. It shows the current state of the tool run and also provides a cancel button. The cancel button will cancel the tool run as quick as possible. While the progress bar disappears immediately, depending on the tool it may take a while before it finishes running. To see further tool run progress updates, even after clicking cancel, check out the Modest Extension section in the output window.
+
+![Figure [progress_bar]: An example of a tool run that is in progress.](progress_bar.png)
+
+### Tool problems
+Tool runs can generate warnings and errors, these are shown in the problems window (Figure [problems]) and as highlights in the document. Individual tool problems can be dismissed by choosing the quick fix option or selecting the appropriate option in the right click menu. There are also quick fixes for dismissing all the tool problems in the file or simply all tool problems in general. The latter can also be done using the `Clear tool problems` button in the top right of the sidebar.
+
+![Figure [problems]: The problems window in action.](problems.png)
+
 
 ## DOT view
-When a Modest file is opened a button will apear on the top right which opens the DOT view. This button will open a side-by-side view of the currently opened file and a DOT file generated by the Modest Toolset. You can also `Alt+Click` on the button open the DOT view in a regular, larger window.
+When a Modest file is opened a button will appear on the top right which opens the DOT view (Figure [dot_view]). This button will open a side-by-side view of the currently opened file and a DOT file generated by the Modest Toolset. You can also `Alt+Click` on the button open the DOT view in a regular, larger window.
 
 The generated DOT is updated automatically when the original file is saved and there are no errors present.
 
 You can copy and/or save the generated DOT/svg by choosing the option in the context menu in the upper right corner.
 
-![Figure [dot_view]: The DOT view](dot_view.png)
+![Figure [dot_view]: The DOT view.](dot_view.png)
 
 ### Navigating the DOT view
 By clicking and dragging the mouse you can pan around. To zoom the view in and out you can scroll up and down.
 
-You can also zoom by clicking either of the zoom buttons on the top right of the window. If you're lost and can't find the DOT anymore (for example by changing one of the DOT options), press the Reset Location button on the top right to reset the view to the initial position.
+You can also zoom by clicking either of the zoom buttons on the top right of the window. If you're lost and can't find the graph (for example by changing one of the DOT options), press the Reset Location button on the top right to reset the view to the initial position.
 
 ### DOT Options
-To open the DOT options, press the button with the cog in the top right of the DOT view. In the dot view you'll see a minimize button to close the options again and a reset button to revert all the changed parameters.
+To open the DOT options (Figure [dot_options]), press the button with the cog in the top right of the DOT view. In the dot view you'll see a minimise button to close the options again and a reset button to revert all the changed parameters.
 
 You can change some aspects of the generated DOT by changing the parameters in the DOT options. Similar to the sidebar's options, these parameters are the same as the Toolset's. These options allow you to change things like hiding the entire behaviour in a node or flattening the model.
 
-![Figure [dot_options]: The DOT options window](dot_options.png)
+![Figure [dot_options]: The DOT options window.](dot_options.png)
 
 
+## Analysis Results
+There are two ways to view analysis results in the Analysis Results View (Figure [analysis_results]). You can open a results JSON file or you can run a tool on a Modest file. There is also a second view, which is called the Analysis Results Comparison View. Here you can also open a results JSON file or you can copy the results from the Analysis Results view.
 
+In the analysis view's context menu, you can:
+- Save results to a JSON or text file.
+- Open older analysis results.
+- Move analysis results to the Comparison View.
+- Open the JSON file directly in the editor.
+- Clear the view.
 
-## Analysis Results
+By right-clicking on an item in the view you can:
+- Copy the item, which copies a text representation of the item.
+- Copy the value of an item, if there is one.
+- Open the value directly in the editor.
+- Highlight item is to quickly see where an item is located in the tree.
+- Plot values (such as CDF).
 
-!!! WARNING
-    This section is work in progress
+![Figure [analysis_results]: An example of analysis results being shown in the Analysis Results View.](analysis_results.png)
 
-There are two ways to view analysis results in the analysis results view. You can open a results JSON file or you can run a Modest file.
-The second view is called the Analysis Results Comparison View. Here you can also open a results JSON file or you can move the results from the Analysis Results view.
-In the analysis view, you can save results to a JSON or text file, open the JSON file directly in the editor (open in editor), and clear view.
-For each item in the analysis results, copy item which copies a text representation of the item, copy value copies the value if there is one, highlight item is to remember/quickly see where an item was in the tree. Values that can be plotted such as CDF can be plotted by pressing 'Plot value'.
+### Plot View
+Some analysis results values, such as CDFs, can be plotted. These plots can be displayed in a Plot View, by right clicking on an item and selecting the option 'Plot value'. At the moment, plots can only be opened in separate views. Plots can be saved by pressing the save button in the top bar of the window on the right side.
+
+![Figure [plot_view]: A plot of the CDF of `QueueOverflowProbMax` is created by right clicking on the item in the Analysis Results View.](plot_view.png)
 
 ## Refactoring
 Refactoring options are accessed by selecting modest code, right clicking, and selecting "Refactor..." in the drop down menu (keyboard shortcut: `Ctrl+Shift+R`).
 
 ### Refactoring options
 - You can surround your selection with an if, while, block -statement or surround it with parenthesis.
-- There are also options to extract your selection to a constant, function, process, or variable. This can be extracted to the current scope, or to the main scope (if you are not in the main scope already).
+- There are also options to extract your selection to a constant, function, process, or variable. This can be extracted to the current scope, or to the main scope (if you are not in the main scope already)
 
 There will be no refactoring options if your selection is empty, or if your selection is entirely within a comment.
 
@@ -134,6 +149,8 @@ There will be no refactoring options if your selection is empty, or if your sele
 You can rename symbols by selecting a symbol, right clicking, and selecting "Rename Symbol" in the drop down menu (keyboard shortcut: `F2`).
 Once you enter a new name it will change all occurrences of the symbol selected.
 
+![Figure [rename_symbols]: The rename symbols feature in action.](rename_symbol.png)
+
 
 <script>
 window.markdeepOptions = {onLoad: function() {