added steps, layers, debugging, and settings panel documentation, set…

…ting need further development
ShortestPathLab · Feb 22, 2024 · da58a4a · da58a4a
1 parent d40831e
commit da58a4a
Show file tree

Hide file tree

Showing 19 changed files with 106 additions and 15 deletions.
diff --git a/docs/3-getting started/concepts/search-trace.md b/docs/3-getting started/concepts/search-trace.md
@@ -119,7 +119,7 @@ const myTrace = {
 
 &nbsp;
 
-## Event Record (Event List)
+## Event Record (Event List) {Event}
 
 The `events` is an array of objects each of which describes the state of a node at a particular stage in a search. Each object in this array is an `Event`.
 

diff --git a/docs/4-user-guide/advanced-breakpoint.png b/docs/4-user-guide/advanced-breakpoint.png
diff --git a/docs/4-user-guide/breakpoint.png b/docs/4-user-guide/breakpoint.png
diff --git a/docs/4-user-guide/debugger.md b/docs/4-user-guide/debugger.md
diff --git a/docs/4-user-guide/debugger.mdx b/docs/4-user-guide/debugger.mdx
@@ -0,0 +1,37 @@
+# Debugger Panel
+
+Visualiser's Debugger panel is able to set breakpoints which stops the search trace or query at a specified condition.
+
+![Alt text](debugger.png)
+
+## Adding a Breakpoint
+- click on the + Breakpoint button, this gives you a new breakpoint like below.
+![Alt text](breakpoint.png)
+- Event dropdown: This filters the events based on the event types.
+- Property: The value that is being compared with.
+- Condition: The condition for comparison, (changed mean that the value have changed compared to the previous value)
+- Reference: Being the reference value for the comparison.
+- Swtich: To indicate whether a breakpoint is active.
+
+A demonstration [video](https://youtu.be/1iRMrrw9Dl0) shows on how to set a standart breakpoint and stepping thhrough the breakpoints
+
+## Adding an Advance breakpoint
+- Go on the Advanced tab.
+- Within this tab is a function snippet where the parameters can be used to make a customised breakpoint.
+
+![Alt text](advanced-breakpoint.png)
+
+- A use case would be using an if statement and return true for a certain condtion of a breakpoint.
+- For further trying and error within this advanced breakpoint editor, use print statements (console.log) to print values of the parameters, the output of these print statements can be seen in teh web console (Inspect the web).
+
+A demonstration [video](https://youtu.be/Pe50r0x4xFk) shows a use case for the advanced breakpoint editor.
+
+## Stepping through the breakpoints
+- To step through the trace and jump to the next breakpoint, make a new steps panel by splitting an existing panel, 
+- Scroll the header of the panel sideways to reveal the jump to next breakpoint button.
+- Red dots on the steps indicates that the breakpoint will hit on that step.
+![Alt text](jump-to-next-breakpoint.png)
+
+
+## Changing traces for the debugger
+- Change the trace by choosing it through the dropdown on the debugger panel.
diff --git a/docs/4-user-guide/debugger.png b/docs/4-user-guide/debugger.png
diff --git a/docs/4-user-guide/image.png b/docs/4-user-guide/image.png
diff --git a/docs/4-user-guide/jump-to-next-breakpoint.png b/docs/4-user-guide/jump-to-next-breakpoint.png
diff --git a/docs/4-user-guide/layer-edit-modal.png b/docs/4-user-guide/layer-edit-modal.png
diff --git a/docs/4-user-guide/layer-highligthed.png b/docs/4-user-guide/layer-highligthed.png
diff --git a/docs/4-user-guide/layers.md b/docs/4-user-guide/layers.md
diff --git a/docs/4-user-guide/layers.mdx b/docs/4-user-guide/layers.mdx
@@ -0,0 +1,30 @@
+---
+sidebar_position: 4
+---
+
+# Layers Panel
+
+Visualiser's layers panel shows all layers that are present. Each layer could either be a [trace](../6-api/search-trace.md), [map, or query](../5-tutorials/single-agent-grid).
+![Alt text](layer-highligthed.png)
+this is the layers panel.
+
+## Adding a Layer 
+- Click the + Layer button within the layers panel.
+- A untitled Trace Layer will be added to the layers panel.
+
+## Editing the Layer
+- Click the edit (pencil) icon.
+- A modal will come up like down below.
+![Alt text](layer-edit-modal.png)
+
+- Within this modal, there are options to change the layer it self such as the transperancy and the display mode.
+- There is also an option to change the type of the layer. A more detailed example is available in the [single agent search tutorial](../5-tutorials/single-agent-grid.mdx)
+
+## Other additional features
+- To adjust the orders of the layers, drag the 2 stripes icon of the layer to the desired order, this affects on how the layers are shown within the viewport panel.
+- To fit the layer to the viewport panel, click on the options (3 dots) on each individual layer and click on Fit Layer.
+
+
+
+
+
diff --git a/docs/4-user-guide/settings.md b/docs/4-user-guide/settings.md
diff --git a/docs/4-user-guide/settings.mdx b/docs/4-user-guide/settings.mdx
@@ -0,0 +1,19 @@
+# Settings Panel
+
+Visualiser's setting panel gives the flexibillity to customise the web application.
+
+![Alt text](settings.png)
+
+## General
+
+- To speed up the playback speed of the search trace within the view port, adjust the speed using the playback rate slider.
+- To show the explore page at the start can be done within the page aswell by clickng the switch.
+
+## Adding or Editing an Existing Solver
+
+within the connections tab,
+
+- To add a solver, click the + Add Solver button, this adds a new solver.
+- To change the existing solver, press the edit (pencil) icon and add the URL and the connection type needed.
+
+[TODO, more info on adding a solver and renderers]
diff --git a/docs/4-user-guide/settings.png b/docs/4-user-guide/settings.png
diff --git a/docs/4-user-guide/steps-header.png b/docs/4-user-guide/steps-header.png
diff --git a/docs/4-user-guide/steps-horizontal-scrollbar.png b/docs/4-user-guide/steps-horizontal-scrollbar.png
diff --git a/docs/4-user-guide/steps.md b/docs/4-user-guide/steps.md
@@ -4,4 +4,22 @@ sidebar_position: 5
 
 # Steps Panel
 
-[TODO]
+Visualiser's steps panel shows a list of steps of the current chosen trace.
+![Alt text](steps.png)
+
+## Navigating Through the Steps
+
+![Alt text](steps-header.png)
+
+- Dropdown: Changing the trace for the steps panel.
+- Left and Right Arrows: move 1 step back and forward.
+- Play: Play the search trace.
+- Skip: Jump to the next breakpoint.
+- Stop: Stops the playing trace.
+
+## Other Additional Details
+
+- Seeing each step info: Hover over the &#123; &#125; sign when hovering on a step.
+- Unable to see the play button or the panel seems to be cut off ? There is a horizonatal scrollbar show the unseen part of the panel header.
+
+  ![Alt text](steps-horizontal-scrollbar.png)
diff --git a/docs/4-user-guide/steps.png b/docs/4-user-guide/steps.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,7 +119,7 @@ const myTrace = { @@
     &nbsp;
-    ## Event Record (Event List)
+    ## Event Record (Event List) {Event}
     The `events` is an array of objects each of which describes the state of a node at a particular stage in a search. Each object in this array is an `Event`.
@@ Expand Down @@