diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/adapter.png b/blog/2023-09-22-changelog/assets/22-09-2023/adapter.png new file mode 100644 index 0000000..9149b0b Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/adapter.png differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/aux-1.png b/blog/2023-09-22-changelog/assets/22-09-2023/aux-1.png new file mode 100644 index 0000000..fe70cfc Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/aux-1.png differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/basic.gif b/blog/2023-09-22-changelog/assets/22-09-2023/basic.gif new file mode 100644 index 0000000..f4927ea Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/basic.gif differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/basic.mkv b/blog/2023-09-22-changelog/assets/22-09-2023/basic.mkv new file mode 100644 index 0000000..8c82558 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/basic.mkv differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/comparison.gif b/blog/2023-09-22-changelog/assets/22-09-2023/comparison.gif new file mode 100644 index 0000000..3ba9c75 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/comparison.gif differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/comparison.mkv b/blog/2023-09-22-changelog/assets/22-09-2023/comparison.mkv new file mode 100644 index 0000000..3fb724b Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/comparison.mkv differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/interactive.gif b/blog/2023-09-22-changelog/assets/22-09-2023/interactive.gif new file mode 100644 index 0000000..9e6314b Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/interactive.gif differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/interactive.mkv b/blog/2023-09-22-changelog/assets/22-09-2023/interactive.mkv new file mode 100644 index 0000000..30f7737 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/interactive.mkv differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/large-map-florida.gif b/blog/2023-09-22-changelog/assets/22-09-2023/large-map-florida.gif new file mode 100644 index 0000000..333c103 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/large-map-florida.gif differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/large-map-florida.mkv b/blog/2023-09-22-changelog/assets/22-09-2023/large-map-florida.mkv new file mode 100644 index 0000000..7020643 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/large-map-florida.mkv differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/logo64.png b/blog/2023-09-22-changelog/assets/22-09-2023/logo64.png new file mode 100644 index 0000000..e07904e Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/logo64.png differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/map.png b/blog/2023-09-22-changelog/assets/22-09-2023/map.png new file mode 100644 index 0000000..bc94ce4 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/map.png differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/nine-tile.png b/blog/2023-09-22-changelog/assets/22-09-2023/nine-tile.png new file mode 100644 index 0000000..3ad3c5e Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/nine-tile.png differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/polyanya.png b/blog/2023-09-22-changelog/assets/22-09-2023/polyanya.png new file mode 100644 index 0000000..a69b6a1 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/polyanya.png differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/query.gif b/blog/2023-09-22-changelog/assets/22-09-2023/query.gif new file mode 100644 index 0000000..e481f59 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/query.gif differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/query.mkv b/blog/2023-09-22-changelog/assets/22-09-2023/query.mkv new file mode 100644 index 0000000..4e9918f Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/query.mkv differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/query.png b/blog/2023-09-22-changelog/assets/22-09-2023/query.png new file mode 100644 index 0000000..ea3f4b0 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/query.png differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/renderer.gif b/blog/2023-09-22-changelog/assets/22-09-2023/renderer.gif new file mode 100644 index 0000000..ee788fe Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/renderer.gif differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/renderer.mkv b/blog/2023-09-22-changelog/assets/22-09-2023/renderer.mkv new file mode 100644 index 0000000..f99ea57 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/renderer.mkv differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/renderer.png b/blog/2023-09-22-changelog/assets/22-09-2023/renderer.png new file mode 100644 index 0000000..74d1116 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/renderer.png differ diff --git a/blog/2023-09-22-changelog/assets/22-09-2023/trace.png b/blog/2023-09-22-changelog/assets/22-09-2023/trace.png new file mode 100644 index 0000000..e51f467 Binary files /dev/null and b/blog/2023-09-22-changelog/assets/22-09-2023/trace.png differ diff --git a/blog/2023-09-22-changelog/index.md b/blog/2023-09-22-changelog/index.md new file mode 100644 index 0000000..a6fc6d0 --- /dev/null +++ b/blog/2023-09-22-changelog/index.md @@ -0,0 +1,205 @@ +--- +slug: 1.0.4 +title: Posthoc v1.0.4 +authors: [kzheng] +tags: [changelog, v1.0.4] +--- + +## Changes + +### Architecture Changes + +#### UI Overhaul + +Waypoint is completely rebuilt to support dynamic and reconfigurable panels, so you can adjust the UI to fit your workflow or use case. Check out the [use cases](#use-cases) section for examples. + +![aux-1](./assets/22-09-2023/aux-1.png) + +#### Layers + +Visualise what you need by adding it as a layer to the app. + +##### Trace Layer + +The **Trace** layer renders a search trace. Search traces are JSON documents produced by pathfinding solvers that record steps in the search process. +![trace](./assets/22-09-2023/trace.png) + +##### Map Layer + +The **Map** layer renders maps in a supported format. + +![map](./assets/22-09-2023/map.png) + +##### Query Layer + +The **Query** layer interfaces with solvers to display search traces for arbitrary problem instances. + +![query](./assets/22-09-2023/query.png) + +#### Extensible Renderer System + +Renderers (a.k.a. the Viewport panel) can now be added to Waypoint via extensions (the exact implementation is work-in-progress). This will allow for future renderers to be added with ease (for example, a 3D renderer). + +![renderer](./assets/22-09-2023/renderer.png) + +#### Layers Panel + +Manage view layers using the **Layers** panel. + +#### Viewport Panel + +The **Viewport** panel renders your layers by making use of an installed renderer (by default, the 2D renderer). You can choose which layers to render, as well as auto-fit the contents to the viewport, or display the contents at 1:1 scale. + +#### Tree Panel + +If your pathfinding search problem does not have a convenient spatial embedding (or if you just wanted to), you can also visualise any search trace in a hierarchal format with the **Tree** panel. You can choose how many nodes to render at once. + +#### Steps Panel + +View and replay the recorded events of the search process using the **Steps** panel. + +#### Debugger Panel + +Debug a search trace using the **Debugger** panel. This feature is currently non-functional in version 1.0.4. + +#### Settings Panel + +Manage connections to solvers and renderers in the **Settings** panel. + +#### Logs Panel + +Waypoint will keep a record of all alerts in the **Logs** panel. + +### Features + +#### 2D Renderer (Built-in) + +The basic 2D renderer is built to be reliable and highly performant. Internally, it delegates rendering to background processes. The main process figures out which sections of the screen needs to be repainted (and what resolution) and requests those tiles from the subprocesses. + +![renderer](./assets/22-09-2023/renderer.gif?raw=true) + +[Click here for full size](./assets/22-09-2023/renderer.mkv) + +#### Grid, Network (XY), Poly, Mesh Map Support + +There is built-in support for grid (`.grid/.map`), network (`.co/.gr/.xy`), mesh (`.mesh`), and polygon (`.poly`) map files. Conversions may be required. + +| | Grid | Network | Mesh | Poly | +| -------------------- | ------------------------------------- | --------------------------------------------------- | ------------------------------------- | ------------- | +| Conversions required | Rename your `*.map` files to `*.grid` | Use `dimacs2xy` to convert `.co/.gr` files to `.xy` | Update your `.mesh` file to version 3 | None required | + +#### Large Map Rendering Support + +The renderer and map parser performs optimisations to handle the rendering of large maps. + +![large-map-florida](./assets/22-09-2023/large-map-florida.gif?raw=true) + +[Click here for full size](./assets/22-09-2023/large-map-florida.mkv) + +### Use Cases + +#### Visualising a Search Trace + +Load a search trace and map into Waypoint. + +![basic](./assets/22-09-2023/basic.gif?raw=true) + +[Click here for full size](./assets/22-09-2023/basic.mkv) + +#### Interacting with a Search Trace (Viewport, Steps and Tree) + +Move around a search trace through the Viewport, Tree, and Steps panel. + +![interactive](./assets/22-09-2023/interactive.gif?raw=true) + +[Click here for full size](./assets/22-09-2023/interactive.mkv) + +#### Creative Use of the Search Trace Format (Polyanya) + +The example uses the search trace format to tell the renderer to draw each event in the search process as a triangle. + +![polyanya](./assets/22-09-2023/polyanya.png) + +#### Creative Use of the Search Trace Format (9-Tile) + +This example uses the search trace format to tell the renderer how to display the current state of a 9-tile puzzle. + +![nine-tile](./assets/22-09-2023/nine-tile.png) + +#### Running a Search Query + +This example runs a query using Warthog (WebAssembly) over a grid map. + +![query](./assets/22-09-2023/query.gif?raw=true) + +[Click here for full size](./assets/22-09-2023/query.mkv) + +#### Comparison of Two Traces + +This example compares the search process of two A\* implementations, one as a Search Trace file, and another as a query. We display these side-by-side. + +![comparison](./assets/22-09-2023/comparison.gif?raw=true) + +[Click here for full size](./assets/22-09-2023/comparison.mkv) + +### Releases + +#### Waypoint Standalone (Electron) for Windows + +Get Waypoint as a standalone application for Windows. + +[View Releases](https://github.com/path-visualiser/app/releases) + +#### Waypoint Standalone (Electron) for Linux + +Get Waypoint as a standalone application for Linux. + +[View Releases](https://github.com/path-visualiser/app/releases) + +#### Waypoint PWA (Github Pages) + +Use Waypoint in your browser, or install it as a web app. + +[Open Waypoint](https://path-visualiser.github.io/app/) + +#### Warthog (WebAssembly) Solver Adapter + +This is the Warthog solver compiled to WebAssembly. Add this URL as a **Web Worker** connection in Waypoint (it should also be there by default). + +`https://cdn.jsdelivr.net/gh/path-visualiser/app@adapter-warthog-wasm-dist/warthog-wasm.mjs` + +#### Warthog (Socket.io/WebSocket) Solver Adapter + +This is the Warthog solver running behind an adapter server. The adapter translates requests into Warthog problem instances, and converts Warthog output into the search trace format. The visualiser and solver communicates through a WebSocket channel. + +```shell +git clone https://github.com/path-visualiser/app +cd ./app/adapter-warthog-websocket +npm i +npm start +``` + +Then, as prompted, add the server's URL as a **Socket.io** connection in Waypoint. + +#### Iron Harvest Map Adapter + +This is an example adapter that exclusively serves iron harvest grid maps to demonstrate how you could serve maps as well as run search queries. + +```shell +git clone https://github.com/path-visualiser/app +cd ./app/adapter-iron-harvest +npm i +npm start +``` + +Then, as prompted, add the server's URL as a **Socket.io** connection in Waypoint. + +### Known Issues + +#### Freeze on Large Search Traces + +Waypoint may freeze when the search trace contains too many steps. This is due to the inefficient way the path is currently calculated. + +#### Cannot Choose Source and Destination Nodes for Queries on Network Maps + +Currently, queries on the network maps will force the source and destination nodes to be `0`. diff --git a/blog/2023-11-18-todo/index.md b/blog/2023-11-18-todo/index.md deleted file mode 100644 index 168c355..0000000 --- a/blog/2023-11-18-todo/index.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -slug: todo -title: Todo -authors: [kzheng] -tags: [hello] ---- - -[TODO] diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-drag-and-drop.mp4 b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-drag-and-drop.mp4 new file mode 100644 index 0000000..07cafd7 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-drag-and-drop.mp4 differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-empty-panels.mp4 b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-empty-panels.mp4 new file mode 100644 index 0000000..0e4f258 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-empty-panels.mp4 differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-error-handling.mp4 b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-error-handling.mp4 new file mode 100644 index 0000000..7fca365 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-error-handling.mp4 differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-fit.mp4 b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-fit.mp4 new file mode 100644 index 0000000..195762d Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-fit.mp4 differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-layer-panel.mp4 b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-layer-panel.mp4 new file mode 100644 index 0000000..3d9debc Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-layer-panel.mp4 differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-performance.mp4 b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-performance.mp4 new file mode 100644 index 0000000..2958507 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/1.2.0-performance.mp4 differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/debugger.png b/blog/2024-03-01-changelog/assets/1-03-2024/debugger.png new file mode 100644 index 0000000..4a88b19 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/debugger.png differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/event-properties.png b/blog/2024-03-01-changelog/assets/1-03-2024/event-properties.png new file mode 100644 index 0000000..728cc19 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/event-properties.png differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/explore-page-modal.png b/blog/2024-03-01-changelog/assets/1-03-2024/explore-page-modal.png new file mode 100644 index 0000000..d4ab524 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/explore-page-modal.png differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/explore-page.png b/blog/2024-03-01-changelog/assets/1-03-2024/explore-page.png new file mode 100644 index 0000000..bd0d49f Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/explore-page.png differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/improved-ui.png b/blog/2024-03-01-changelog/assets/1-03-2024/improved-ui.png new file mode 100644 index 0000000..1004744 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/improved-ui.png differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/publish-workspace.png b/blog/2024-03-01-changelog/assets/1-03-2024/publish-workspace.png new file mode 100644 index 0000000..29362a9 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/publish-workspace.png differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/steps-filter.png b/blog/2024-03-01-changelog/assets/1-03-2024/steps-filter.png new file mode 100644 index 0000000..a29114e Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/steps-filter.png differ diff --git a/blog/2024-03-01-changelog/assets/1-03-2024/steps-panel.png b/blog/2024-03-01-changelog/assets/1-03-2024/steps-panel.png new file mode 100644 index 0000000..b49dd69 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/1-03-2024/steps-panel.png differ diff --git a/blog/2024-03-01-changelog/assets/screenshot.png b/blog/2024-03-01-changelog/assets/screenshot.png new file mode 100644 index 0000000..5291d76 Binary files /dev/null and b/blog/2024-03-01-changelog/assets/screenshot.png differ diff --git a/blog/2024-03-01-changelog/index.md b/blog/2024-03-01-changelog/index.md new file mode 100644 index 0000000..905db37 --- /dev/null +++ b/blog/2024-03-01-changelog/index.md @@ -0,0 +1,116 @@ +--- +slug: 1.2.0 +title: Posthoc v1.2.0 +authors: [kzheng] +tags: [changelog, v1.2.0] +--- + +## UI + +### General UI Improvements + +We generally improved the UI, including the addition of a sidebar, to deliver a sleeker and more comfortable experience. + +![Alt text](./assets/1-03-2024/improved-ui.png) + +We improved the usability of the UI under different conditions like when the window gets too small. + +### Empty Panel Copy + +We added copy and a subtle design to panels that are empty to indicate that an action (like loading a trace) is required before they become active. + +[Clip: Empty Panels](./assets/1-03-2024/1.2.0-empty-panels.mp4) + +### Layer Editor Panel Redesign + +Previously, the layer editor is presented as a modal. It required multiple clicks to load a file and the interface is a bit confusing. In this version, the layer editor is redesigned as a popover and is significantly more usable. + +[Clip: Layer Editor](./assets/1-03-2024/1.2.0-layer-panel.mp4) + +### Steps Panel Redesign + +Previously, the playback controls tend to be hidden from immediate sight due to all controls being on the main toolbar. In this version, the playback controls are separated into their own island. + +![Steps Panel](./assets/1-03-2024/steps-panel.png) + +### Event Properties View + +We added a way to view all of the properties of an event. This can be opened through clicking on **See All Properties** of an event in the Steps panel. + +![Event Properties](./assets/1-03-2024/event-properties.png) + +### Panel Management + +We added the ability reorganise your panels by moving them around. You can do this by dragging the handle in the top left corner. + +## System + +### Error Handling + +We introduced a per-layer error API that displays an error label when a layer encounters a problem. For example, if a map couldn't load correctly. + +[Clip: Error Handling](./assets/1-03-2024/1.2.0-error-handling.mp4) + +### Workspaces + +We introduced a simple import/export mechanism for quickly sharing or restoring your work. This can be found in the title bar menu (**Workspace** > **Open Workspace**, **Workspace** > **Save Workspace**). + +### Publish Workspaces + +We designed a simple way to export your workspaces with metadata. In the future, you'll be able to upload these to a community repository. + +![Publish Workspace](./assets/1-03-2024/publish-workspace.png) + +### Drag and Drop + +You can now drag and drop any assortment of files into the visualiser. + +[Clip: Drag and Drop](./assets/1-03-2024/1.2.0-drag-and-drop.mp4) + +### Filesystem Bridge Adapter (Experimental) + +To help with development and debugging workflows, we provided a way to see live update of search traces. With the right tooling, you'll be able to make changes to your code and then immediately see its visualisation. We're still refining this feature. + +## Features + +### Explore + +We added a hub for new users to try out built-in visualisations. + +![Explore Page](./assets/1-03-2024/explore-page.png) + +For new users, this panel would display on start-up. + +![Explore Page Modal](./assets/1-03-2024/explore-page-modal.png) + +### Fit to Viewport + +We introduced a way to fit specific layers to the viewport. + +[Clip: Fit to Viewport](./assets/1-03-2024/1.2.0-fit.mp4) + +### Filter Steps by Type + +We added the ability to filter events in the Steps view by event type. + +![Steps Filter](./assets/1-03-2024/steps-filter.png) + +### Debugger Improvements + +The debugger was updated with some new features. In the standard editor, you can now specify to break when a value changed from its parent. In the advanced editor, you now get access to `parent` and `children` variables. + +![Debugger](./assets/1-03-2024/debugger.png) + +## 2D Renderer + +### Performance Improvements + +We slightly improved perceived performance by increasing resolution when playback is paused and decreasing resolution when it is playing. We also implement dynamic framerate so the playback should feel more consistent. + +# Known Issues + +See issues on [our bug tracker](https://github.com/path-visualiser/app/issues). + +# Releases + +See releases for v1.2.0 [here](https://github.com/path-visualiser/app/releases/tag/v1.2.0). diff --git a/blog/2024-05-08-changelog/index.md b/blog/2024-05-08-changelog/index.md new file mode 100644 index 0000000..c5ad210 --- /dev/null +++ b/blog/2024-05-08-changelog/index.md @@ -0,0 +1,8 @@ +--- +slug: 1.2.4 +title: Posthoc v1.2.4 +authors: [kzheng] +tags: [changelog, v1.2.4] +--- + +[Todo] diff --git a/blog/authors.yml b/blog/authors.yml index 952673e..abfee8b 100644 --- a/blog/authors.yml +++ b/blog/authors.yml @@ -1,5 +1,5 @@ kzheng: name: Kevin Zheng - title: Visualiser maintainer + title: Posthoc lead developer url: https://github.com/spaaaacccee image_url: https://github.com/spaaaacccee.png diff --git a/docs/1-overview.md b/docs/1-overview.md index e65ff46..f40073c 100644 --- a/docs/1-overview.md +++ b/docs/1-overview.md @@ -6,7 +6,7 @@ sidebar_position: 1 **Posthoc** is a way to build quick-and-dirty visualisations ✨ for sequential decision-making algorithms, such as search algorithms 🚀. -![Alt text](image-1.png) +![Alt text](overview.png) It's easy to get started. @@ -22,33 +22,39 @@ It's easy to get started. Play back, step-through, and inspect the decisions of your algorithm. See your algorithm as a decision tree by annotating your log with `id` and `pId` properties, or view it in context by including declarative rendering instructions in your trace. -![9 tile](image-2.png) +![9 tile](nine-tile.png) ### Use built-in debugging tools Pinpoint when an invariant is violated, where a point of interest is, or where things go wrong, during algorithm execution. Do so by setting regular breakpoints or breakpoint expressions. -![Rayscan debugging](image-3.png) +![Rayscan debugging](rayscan-debugging.png) ### Compare with a baseline Identify where your algorithm has deviated from a known good baseline by comparing traces side-by-side or superimposed. -![Comparison](image-4.png) +![Comparison](comparison-with-baseline.png) ## Collaborate and share ### Discuss ideas with your team -Present your ideas to your team and problem-solve together. +Visually present your work to other people to solve problems and exchange ideas. + +![Discuss ideas with your team](discuss-ideas-with-your-team.png) ### Help students learn -Walk through algorithms and techniques visually with students. +Walk through algorithms and techniques with students. + +![Help students learn](help-students-learn.png) ### Share your work -Let the world discover your work. +Let the wider community discover your work. + +![Share your work](share-your-work.png) ## Why we built Posthoc diff --git a/docs/2-search-trace.md b/docs/2-search-trace.md index 2450791..b3caafa 100644 --- a/docs/2-search-trace.md +++ b/docs/2-search-trace.md @@ -188,8 +188,8 @@ views: clear: close events: - { type: open, id: 1 } - - { type: generate, id: 1 } - - { type: close, id: 1, message: Open and generate events should be cleared } + - { type: expand, id: 1 } + - { type: close, id: 1, message: Open and expand events should be cleared } ``` ### `$for` diff --git a/docs/3-visualiser/3-1-user-guide/_category_.json b/docs/3-visualiser/3-1-user-guide/_category_.json index 6433392..57315ec 100644 --- a/docs/3-visualiser/3-1-user-guide/_category_.json +++ b/docs/3-visualiser/3-1-user-guide/_category_.json @@ -1,6 +1,6 @@ { "label": "User Guide", - "position": 5, + "position": 3, "collapsed": true, "link": { "type": "generated-index" diff --git a/docs/3-visualiser/3-1-user-guide/debugger.mdx b/docs/3-visualiser/3-1-user-guide/debugger.mdx deleted file mode 100644 index a9d1887..0000000 --- a/docs/3-visualiser/3-1-user-guide/debugger.mdx +++ /dev/null @@ -1,40 +0,0 @@ -# Debugger - -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/3-visualiser/3-1-user-guide/extensions.md b/docs/3-visualiser/3-1-user-guide/extensions.md new file mode 100644 index 0000000..2e602a6 --- /dev/null +++ b/docs/3-visualiser/3-1-user-guide/extensions.md @@ -0,0 +1,48 @@ +--- +sidebar_position: 3 +--- + +# Extensions + +## Adapters + +Adapters implement the [visualiser adapter protocol](.) to connect solvers to Posthoc. + +### Built-in adapters + +| Name | URL | Connection Type | Description | +| ---------- | ----------------------- | --------------- | -------------------------------- | +| Basic Maps | `internal://basic-maps` | Internal | A collection of basic grid maps. | + +### Other adapters + +| Name | URL | Connection Type | Description | +| --------------------- | -------------------------------------------------------------------------------------------- | --------------- | ------------------------------------ | +| Warthog (WebAssembly) | `https://cdn.jsdelivr.net/gh/path-visualiser/app@adapter-warthog-wasm-dist/warthog-wasm.mjs` | Web Worker | Solver adapter for Warthog & Roadhog | + +[You can find more adapters here.](https://github.com/path-visualiser/app) + +## Renderers + +Renderers are used by the **viewport** view to render visualisations. They're defined by the primitives they support. For example, the **Pixel** renderer supports drawing `rect`, `circle` etc., so any map or search trace that compiles to those primitives can be drawn by **Pixel**. The API for renderers are yet to be finalised. We'll soon let you define custom renderers. + +### Built-in renderers + +| Name | URL | Connection Type | Description | +| ----- | ------------------------ | --------------- | --------------------------------------------------------------------------------- | +| Pixel | `internal://d2-renderer` | Internal | Comfortably performant 2D renderer. Provides `rect`, `circle`, `path`, `polygon`. | + +## Map support + +Maps are an escape-hatch from search traces, and allows you to hard-code a visualisation for any filetype. + +Posthoc supports the following map formats by default. This list also shows up in **Settings view > Extensions > Map support**. We'll soon let you define custom formats via extensions. + +### Built-in map formats + +| Format | Extension | Description | +| ------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Grid | `*.grid`, `*.map` | Moving AI grid map format. [Learn about this format here.](https://movingai.com/benchmarks/formats.html) | +| Network | `*.xy` | A single-file alternative of the DIMACS network graph format, obtained using `dimacs2xy` of the Warthog library. [Learn about XY and `dimacs2xy` here.](https://bitbucket.org/dharabor/pathfinding/src/neomaster/warthog) | +| Mesh | `*.mesh` | [Learn about mesh maps here.](https://bitbucket.org/shortestpathlab/benchmarks/src/master/mesh-maps) | +| Poly | `*.poly` | [Learn about poly maps here.](https://bitbucket.org/shortestpathlab/benchmarks/src/master/poly-maps/) | diff --git a/docs/3-visualiser/3-1-user-guide/image-1.png b/docs/3-visualiser/3-1-user-guide/image-1.png new file mode 100644 index 0000000..d7ce845 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/image-1.png differ diff --git a/docs/3-visualiser/3-1-user-guide/image-2.png b/docs/3-visualiser/3-1-user-guide/image-2.png new file mode 100644 index 0000000..9062ee1 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/image-2.png differ diff --git a/docs/3-visualiser/3-1-user-guide/image-3.png b/docs/3-visualiser/3-1-user-guide/image-3.png new file mode 100644 index 0000000..22c4c27 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/image-3.png differ diff --git a/docs/3-visualiser/3-1-user-guide/image-4.png b/docs/3-visualiser/3-1-user-guide/image-4.png new file mode 100644 index 0000000..010bddb Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/image-4.png differ diff --git a/docs/3-visualiser/3-1-user-guide/image-5.png b/docs/3-visualiser/3-1-user-guide/image-5.png new file mode 100644 index 0000000..a12ca0b Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/image-5.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-drag-and-drop.png b/docs/3-visualiser/3-1-user-guide/interface-drag-and-drop.png new file mode 100644 index 0000000..8e97506 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-drag-and-drop.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-titlebar-workspace-export-workspace.png b/docs/3-visualiser/3-1-user-guide/interface-titlebar-workspace-export-workspace.png new file mode 100644 index 0000000..1b72bb8 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-titlebar-workspace-export-workspace.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-debugger-advanced.png b/docs/3-visualiser/3-1-user-guide/interface-views-debugger-advanced.png new file mode 100644 index 0000000..8ba5b06 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-debugger-advanced.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-debugger.png b/docs/3-visualiser/3-1-user-guide/interface-views-debugger.png new file mode 100644 index 0000000..aeb2b07 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-debugger.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-events.png b/docs/3-visualiser/3-1-user-guide/interface-views-events.png new file mode 100644 index 0000000..b4a38b8 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-events.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-explore.png b/docs/3-visualiser/3-1-user-guide/interface-views-explore.png new file mode 100644 index 0000000..7c66ea8 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-explore.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-graph.png b/docs/3-visualiser/3-1-user-guide/interface-views-graph.png new file mode 100644 index 0000000..2891f96 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-graph.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-layers-layer.png b/docs/3-visualiser/3-1-user-guide/interface-views-layers-layer.png new file mode 100644 index 0000000..08be17b Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-layers-layer.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-layers.png b/docs/3-visualiser/3-1-user-guide/interface-views-layers.png new file mode 100644 index 0000000..c13dc3a Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-layers.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-logs.png b/docs/3-visualiser/3-1-user-guide/interface-views-logs.png new file mode 100644 index 0000000..c8f6430 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-logs.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-settings.png b/docs/3-visualiser/3-1-user-guide/interface-views-settings.png new file mode 100644 index 0000000..360ee05 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-settings.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-source.png b/docs/3-visualiser/3-1-user-guide/interface-views-source.png new file mode 100644 index 0000000..991a172 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-source.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface-views-viewport.png b/docs/3-visualiser/3-1-user-guide/interface-views-viewport.png new file mode 100644 index 0000000..c2c4138 Binary files /dev/null and b/docs/3-visualiser/3-1-user-guide/interface-views-viewport.png differ diff --git a/docs/3-visualiser/3-1-user-guide/interface.md b/docs/3-visualiser/3-1-user-guide/interface.md index 49d21d4..8c88d74 100644 --- a/docs/3-visualiser/3-1-user-guide/interface.md +++ b/docs/3-visualiser/3-1-user-guide/interface.md @@ -1,49 +1,212 @@ --- -sidebar_position: 2 +sidebar_position: 1 --- # UI -Posthoc's interface is made of composable panels. You can add, remove, and rearrange the UI to your desire. This allows Posthoc to support a range of tasks, whether you're using it to learn, showcase, or debug algorithms. +Posthoc's interface is composed of views, a titlebar, and a sidebar. You can add, remove, and rearrange views to your desire. -![Alt text](interface.png) +## Explore -![Alt text](interface-labeled.png) +Explore Posthoc and its community creations via examples and guides. -## Core Panels +![Screenshot of explore view](interface-views-explore.png) -When you first open Posthoc, it displays the following panels: +## Layers -### Recipes +Add, edit, and remove layers. The options available to a layer depends on the layer type. +[Read more about layers here.](.) -### Layers +![Screenshot of layer](interface-views-layers-layer.png) -Allows you to inspect and edit the layers that are currently being rendered. +### General options -[See more information on the Layers Panel](./layers). +| Name | Description | +| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Layer name | A name for the layer. If empty, one will be auto-generated. | +| Transparency | How see-through this layer will be in the viewport. | +| Display mode | How this layer will blend with its background in the viewport. [These are the options provided.](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) | -### Viewport +### Trace options -Displays the visualisation. +Load a [search trace](.) file. -[See more information on the Viewport Panel](./viewport). +| Name | Description | +| ------ | ----------------------------------------------- | +| Source | The search trace that gets drawn on this layer. | -### Steps +### Map options -Displays the steps of the visualisation. +Load a [map](.). -[See more information on the Steps Panel](./steps). +| Name | Description | +| ------------------- | ----------------------------------------------------- | +| Map | The map that gets drawn on this layer. | +| Tile color for "\*" | Grid maps only. The color to use for a specific tile. | -## Customising Panels +### Query options -### Choosing Content for a Panel +Make a query using the [visualiser adapter protocol](.). -You can choose what content to display in a panel by clicking the dropdown menu on the top left. +| Name | Description | +| ---- | -------------------------------------- | +| Map | The map that gets drawn on this layer. | + +## Events + +Browse the events of a search trace. + +![Screenshot of events view](interface-views-events.png) + +### Toolbar items + +| Name | Description | Default | +| ---------- | -------------------------------------- | ---------------------------- | +| Layer | The layer to show events for. | The first layer with events. | +| Event Type | Show only events that match this type. | Show all events. | + +## Viewport + +![Screenshot of viewport view](interface-views-viewport.png) + +### Toolbar items + +| Name | Description | Default | +| -------- | ---------------------------------------------------- | ------------------- | +| Layers | The layers to render. | Render all layers. | +| Renderer | The renderer to use. [Read more about renderers.](.) | Pick automatically. | + +## Graph + +Visualise search traces as decision trees. + +For this to work, events in search traces must have `id` and `pId` properties. An `id` uniquely identifies a node in the search. `pId` is the parent node's `id`. + +Since events with the same `id` might have multiple `pId`s, this makes it a directed graph rather than a tree, strictly speaking. + +![Screenshot of graph view](interface-views-graph.png) + +### Toolbar items + +| Name | Description | Default | +| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | +| Layer | The layer to draw a tree for. | The first layer with events. | +| Layout | How the layout should be calculated.
**Directed graph:** Organise the nodes, taking into account all associations, so that that overlapping edges a minimised.
**Tree:** Organise the nodes such that if there's multiple parents for a single node, use only the one that appears last. | Show as a tree. | +| Tracked property | Select a numeric property to use to render a heat scale. | Off, use event colors instead. | + +## Source + +See the underlying files and data for each layer. + +![Screenshot of source view](interface-views-source.png) + +### Toolbar items + +| Name | Description | Default | +| ----- | ----------------------------------- | ---------------------------------- | +| Layer | The layer to show source files for. | The first layer with source files. | + +## Debugger + +Set breakpoints and points of interest. + +### Standard debugger + +Specify when playback should pause. + +![Screenshot of debugger view](interface-views-debugger.png) + +### Advanced debugger + +Specify when playback should pause via a function. If `shouldBreak()` returns true, a breakpoint is added. + +![Screenshot of debugger view, advanced](interface-views-debugger-advanced.png) + +| Argument | Description | +| ---------- | ------------------------------- | +| `step` | `int` The current step. | +| `event` | `event` The current event. | +| `events` | `event[]` List of all events. | +| `parent` | `event` The parent event. | +| `children` | `event[]` List of child events. | + +### Toolbar items + +| Name | Description | Default | +| ----- | --------------------------------- | ---------------------------- | +| Layer | The layer to set breakpoints for. | The first layer with events. | + +## Logs + +Displays important messages and errors. + +![Screenshot of logs view](interface-views-logs.png) + +## Settings + +Configure Posthoc. + +![Screenshot of settings view](interface-views-settings.png) + +### General settings + +| Setting | Description | +| ----------------------------- | ------------------------------------------------------------------------------- | +| Playback rate | Set playback rate. 1x is 60 events per second. | +| Acrylic | Use a subtle frosted glass effect. Turn this off for a small performance boost. | +| Dark mode | Whether the UI should use a dark colour palette. | +| Accent | Choose a theme color for Posthoc. | +| Show explore on start-up | Whether to show the Explore page when Posthoc is launched. | +| Reset settings and extensions | Completely reset Posthoc's settings and extensions. | + +### Extensions + +Manage connected solvers, adapters, renderers, and map parsers. [Read more about extensions here.](.) + +## Customising views + +### Choosing content for a views + +You can choose what content to display in views by clicking the dropdown menu on the top left. ![Alt text](page-select.png) -### Add and Remove Panels +### Add and remove views -You can find panel controls in the extras menu on the top right. Add more panels by splitting existing menus horizontally or vertically. +You can find views controls in the extras menu on the top right. Add more panels by splitting existing menus horizontally or vertically. ![Alt text](split.png) + +You can also add a view using **View > Add panel to the right** and **View > Add panel below** in the title bar. + +## Titlebar + +The titlebar gives you commands that control Posthoc as a whole. + +### View menu + +| Item | Description | +| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Add panel to the right | Create an empty view on the far right edge. | +| Add panel below | Create an empty view on the bottom edge. | +| Reset layout | Reset the panels to the original configuration. Depending on the screen size, this could be a vertical two-panel layout or a horizontal three-panel layout. | + +### Workspace menu + +![Alt text](interface-titlebar-workspace-export-workspace.png) + +| Item | Description | +| ---------------- | --------------------------------------------------------------------------------------------------------------- | +| Open workspace | Select a \*.workspace file to load. | +| Add panel below | Save the current project as a \*.workspace file. | +| Export workspace | Save the current project as a _.workspace and _.workspace.meta file. [Read more about exporting workspaces.](.) | + +## Sidebar + +The sidebar gives you quick access to Explore and Settings. In the future, you'll be able to pin items to the sidebar for quick access, and pop sidebar panels out into the main area. + +## Drag and drop + +You can import any supported file by dropping them into Posthoc. + +![Drag and drop](interface-drag-and-drop.png) diff --git a/docs/3-visualiser/3-1-user-guide/layers.md b/docs/3-visualiser/3-1-user-guide/layers.md new file mode 100644 index 0000000..8ede670 --- /dev/null +++ b/docs/3-visualiser/3-1-user-guide/layers.md @@ -0,0 +1,53 @@ +--- +sidebar_position: 2 +--- + +# Layers + +Posthoc uses a layering system to help you create complex visualisations with tons of parts. + +A lot of the time, you might want to overlay a search trace on top of a map. But you can stack as many search traces, maps, or queries on top of each other as you want. + +## Layer type + +Layers are designed as subsystems. They're independently responsible for accepting some input, processing it, and returning visualisable content to Posthoc, like what to draw, and what events there were. + +Most views, like **graph**, **events**, and **debugger** needs you to choose a layer. They'll only allow you to choose layers with relevant content. For example, **events** would only allow you to choose **trace** and **query** layers because they contain a list of events. + +### Trace + +You can import a search trace file into a trace layer via **Trace > Choose Trace > Import Trace**. Search trace files have the extensions `*.trace.yaml` or `*.trace.json`. Some extensions may provide search traces directly, which appear below the **Import Trace** option. + +![Alt text](image-3.png) + +When a search trace loads, you're given a quick preview of the file that was loaded. + +Trace layers are supported by **event**, **viewport**, **graph**, **source**, and **debugger** views. + +### Map + +Maps are a separate list of filetypes that we thought deserved first-class support. Typically, these represent domains for pathfinding search, like grids, networks, and meshes. + +![Alt text](image-4.png) + +It's optional to use maps because you might not be doing pathfinding search. We recommend you to use search traces for visualisation. But if you have files in a supported map format, it might be more convenient to use a map layer. You can import map files a map layer via **Source > Choose Map > Import Map**. + +[Read about built-in map support here.](./extensions#map-support) + +### Query + +Query layers interact with extensions that implement the [visualiser adapter protocol](.). The query layer and the visualiser adapter protocol should allow you to interactively call your solver, complete with custom parameters and inputs. + +![Alt text](image-5.png) + +We're yet to finalise this API. Currently, as proof-of-concept, the query layer allows you to run single-agent pathfinding problems on grid maps. + +## Layer order + +You can rearrange layers to change rendering order. Layers that are lower on the list are drawn over layers that are higher on the list. + +## Layer mode + +Layers can blend with existing layers in different ways. The default, **source over**, draws the current layer on top of existing layers. Layer modes like **multiply**, **difference**, **xor** can help you spot differences between search traces. + +[A complete list of layer modes can be found here.](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) diff --git a/docs/3-visualiser/3-1-user-guide/layers.mdx b/docs/3-visualiser/3-1-user-guide/layers.mdx deleted file mode 100644 index d77b048..0000000 --- a/docs/3-visualiser/3-1-user-guide/layers.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -sidebar_position: 4 ---- - -# Layers - -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/3-visualiser/3-1-user-guide/settings.mdx b/docs/3-visualiser/3-1-user-guide/settings.mdx deleted file mode 100644 index 4729e3d..0000000 --- a/docs/3-visualiser/3-1-user-guide/settings.mdx +++ /dev/null @@ -1,19 +0,0 @@ -# Settings - -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/3-visualiser/3-1-user-guide/steps.md b/docs/3-visualiser/3-1-user-guide/steps.md deleted file mode 100644 index 58d28c8..0000000 --- a/docs/3-visualiser/3-1-user-guide/steps.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_position: 5 ---- - -# Steps - -Posthoc'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 { } 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/3-visualiser/3-1-user-guide/tree.md b/docs/3-visualiser/3-1-user-guide/tree.md deleted file mode 100644 index eab0536..0000000 --- a/docs/3-visualiser/3-1-user-guide/tree.md +++ /dev/null @@ -1,3 +0,0 @@ -# Tree - -[TODO] diff --git a/docs/3-visualiser/3-1-user-guide/viewport.md b/docs/3-visualiser/3-1-user-guide/viewport.md deleted file mode 100644 index cd7db51..0000000 --- a/docs/3-visualiser/3-1-user-guide/viewport.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Viewport - -[TODO] - -Pipe Adapter - -Weighted A\* --> Map support ---> Edit Layer options to specify color of tile ---> Make changes to grid parser --> Multiple solution - -Layer name bug diff --git a/docs/3-visualiser/contributing.md b/docs/3-visualiser/contributing.md new file mode 100644 index 0000000..328c240 --- /dev/null +++ b/docs/3-visualiser/contributing.md @@ -0,0 +1,5 @@ +--- +sidebar_position: 4 +--- + +# Contributing diff --git a/docs/3-visualiser/overview.md b/docs/3-visualiser/overview.md index b2cd15f..1fc79fc 100644 --- a/docs/3-visualiser/overview.md +++ b/docs/3-visualiser/overview.md @@ -20,6 +20,6 @@ You can use Posthoc directly in a browser. Optionally, you can [install Posthoc as a web app](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Installing) so that it runs in its own window. -### Standalone Builds +### Standalone builds -Check the [releases](https://github.com/path-visualiser/app/releases) page for a list of latest Windows and Linux releases. +Check the [releases](https://github.com/path-visualiser/app/releases) page for a list of latest Windows and Linux releases. They work exactly the same as the web version, but you can get access to older versions of Posthoc. diff --git a/docs/4-tutorials/tile.mdx b/docs/4-tutorials/tile.mdx index 0f58ff0..9f8f166 100644 --- a/docs/4-tutorials/tile.mdx +++ b/docs/4-tutorials/tile.mdx @@ -1,12 +1,12 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; import LoadSearchTrace from "./_loading-search-trace.mdx"; -import StepThroughSearchTrace from "./_step-through-the-search-trace.mdx" -import nineTileAndDecisionTree from './nine-tile-and-decision-tree.png'; +import StepThroughSearchTrace from "./_step-through-the-search-trace.mdx"; +import nineTileAndDecisionTree from "./nine-tile-and-decision-tree.png"; -# Decision Tree Search +# Decision Tree -Visualiser comes with a built-in decision tree viewer for searches that may have no spatial embedding. +Posthoc comes with a built-in decision tree viewer for searches that may have no spatial embedding. As an example, the A\* algorithm can be used to solve a nine-tile puzzle more efficiently than backtracking. Its heuristic would be how similar the current board state is to the final board state. @@ -18,7 +18,6 @@ Follow these steps to visualise how an A\* search would play a nine-tile game, w Download [this](./tile.trace.yaml) pre-computed search trace. - The file should start like this: ```yaml title="tile.trace.yaml" @@ -28,24 +27,23 @@ render: components: # this represents each tile tile: - - - # sets the shape of the tile into a rectangle + - # sets the shape of the tile into a rectangle $: rect - + # sets the height and width width: 0.98 height: 0.98 # sets if the tile context is 0 a.k.a empty, it will set the text into '' text: "{{$[`${$.tile_x}${$.tile_y}`] === 0 ? '' : $[`${$.tile_x}${$.tile_y}`]}}" - + # the text position within the tile textX: 0.27 textY: 0.75 # sets if the tile context is 0 a.k.a empty, it will not fill the tile fill: "{{$[`${$.tile_x}${$.tile_y}`] ? $.themeTextPrimary : $.themeAccent}}" - + # font settings fontSize: 0.75 fontColor: "{{$.themeBackground}}" @@ -75,13 +73,12 @@ render: # sets the renderer as 2d-pixi and the tileboard as the component views: - main: - components: + main: + components: - $: tileboard events: - - - # "11" represents the xy coordinate, 11 means the most top left tile + - # "11" represents the xy coordinate, 11 means the most top left tile # 1 represents the value of the tile, 1 "11": 1 "12": 4 @@ -94,8 +91,7 @@ events: "33": 0 id: 1 type: "source" - - - "11": 1 + - "11": 1 "12": 4 "13": 6 "21": 2 @@ -106,7 +102,6 @@ events: "33": 8 id: 25 type: "destination" - ``` The search trace contains a record of the events that occured during the search and how to visualise them. @@ -121,10 +116,10 @@ The search trace contains a record of the events that occured during the search ## Viewing the Decision Tree -- On any panel, click the left-most dropdown and choose **Tree** to view the decision tree. +- On any panel, click the left-most dropdown and choose **Tree** to view the decision tree. - A tree should show up as down below. By default, the tree only shows nodes that are related to the current node. To view all nodes, click on the third dropdown from the left and choose **All**. - Explore the decisions by clicking through the nodes on the tree. ![Tree](decision-tree.png) -You have now visualised the decision tree of an A* algorithm as it tries to solve a nine tile game. \ No newline at end of file +You have now visualised the decision tree of an A\* algorithm as it tries to solve a nine tile game. diff --git a/docs/6-api/renderer/2D-inbuilts.md b/docs/6-api/_renderer/2D-inbuilts.md similarity index 100% rename from docs/6-api/renderer/2D-inbuilts.md rename to docs/6-api/_renderer/2D-inbuilts.md diff --git a/docs/6-api/renderer/2D-renderer.md b/docs/6-api/_renderer/2D-renderer.md similarity index 100% rename from docs/6-api/renderer/2D-renderer.md rename to docs/6-api/_renderer/2D-renderer.md diff --git a/docs/6-api/renderer/_category_.json b/docs/6-api/_renderer/_category_.json similarity index 100% rename from docs/6-api/renderer/_category_.json rename to docs/6-api/_renderer/_category_.json diff --git a/docs/6-api/renderer/components.md b/docs/6-api/_renderer/components.md similarity index 100% rename from docs/6-api/renderer/components.md rename to docs/6-api/_renderer/components.md diff --git a/docs/6-api/renderer/execution-context.md b/docs/6-api/_renderer/execution-context.md similarity index 100% rename from docs/6-api/renderer/execution-context.md rename to docs/6-api/_renderer/execution-context.md diff --git a/docs/6-api/renderer/protocol.md b/docs/6-api/_renderer/protocol.md similarity index 100% rename from docs/6-api/renderer/protocol.md rename to docs/6-api/_renderer/protocol.md diff --git a/docs/6-api/renderer/standard-renderers.md b/docs/6-api/_renderer/standard-renderers.md similarity index 100% rename from docs/6-api/renderer/standard-renderers.md rename to docs/6-api/_renderer/standard-renderers.md diff --git a/docs/6-api/pixel-renderer.md b/docs/6-api/pixel-renderer.md new file mode 100644 index 0000000..9be2889 --- /dev/null +++ b/docs/6-api/pixel-renderer.md @@ -0,0 +1 @@ +# Pixel diff --git a/docs/6-api/visualiser-adapter-protocol.md b/docs/6-api/visualiser-adapter-protocol.md index 046de74..2d3f230 100644 --- a/docs/6-api/visualiser-adapter-protocol.md +++ b/docs/6-api/visualiser-adapter-protocol.md @@ -1 +1 @@ -# Posthoc Adapter Protocol +# Visualiser Adapter Protocol diff --git a/docs/7-contributing/_category_.json b/docs/7-contributing/_category_.json deleted file mode 100644 index d0d37d8..0000000 --- a/docs/7-contributing/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Contributing", - "position": 7, - "collapsed": true, - "link": { - "type": "generated-index" - } -} diff --git a/docs/7-contributing/overview.md b/docs/7-contributing/overview.md deleted file mode 100644 index 0d2060c..0000000 --- a/docs/7-contributing/overview.md +++ /dev/null @@ -1,3 +0,0 @@ -# Overview - -[TODO] diff --git a/docs/image-4.png b/docs/comparison-with-baseline.png similarity index 100% rename from docs/image-4.png rename to docs/comparison-with-baseline.png diff --git a/docs/discuss-ideas-with-your-team.png b/docs/discuss-ideas-with-your-team.png new file mode 100644 index 0000000..ee1868e Binary files /dev/null and b/docs/discuss-ideas-with-your-team.png differ diff --git a/docs/help-students-learn.png b/docs/help-students-learn.png new file mode 100644 index 0000000..5b91a32 Binary files /dev/null and b/docs/help-students-learn.png differ diff --git a/docs/image-2.png b/docs/nine-tile.png similarity index 100% rename from docs/image-2.png rename to docs/nine-tile.png diff --git a/docs/overview.png b/docs/overview.png new file mode 100644 index 0000000..c003495 Binary files /dev/null and b/docs/overview.png differ diff --git a/docs/image-3.png b/docs/rayscan-debugging.png similarity index 100% rename from docs/image-3.png rename to docs/rayscan-debugging.png diff --git a/docs/share-your-work.png b/docs/share-your-work.png new file mode 100644 index 0000000..24ae910 Binary files /dev/null and b/docs/share-your-work.png differ diff --git a/src/components/theme.ts b/src/components/theme.ts index 6673988..9c904f9 100644 --- a/src/components/theme.ts +++ b/src/components/theme.ts @@ -56,7 +56,7 @@ export const makeTheme = (mode: "light" | "dark", theme?: AccentColor) => }, h1: { fontSize: "max(32px, min(46px, 6vw))", - fontWeight: 500, + fontWeight: 600, }, h2: { fontSize: "max(22px, min(32px, 4vw))", @@ -135,7 +135,7 @@ export function useAcrylic(color?: string): SxProps { export function usePaper(): (e?: number) => SxProps { return (elevation: number = 1) => ({ - boxShadow: "none", + boxShadow: "inset 0px 0px 0px 1px rgba(255,255,255,0.02)", borderRadius: 8, backdropFilter: "blur(32px)", background: "url(img/noise.png)", diff --git a/src/css/custom.css b/src/css/custom.css index 3982ef0..aa79a13 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -285,6 +285,10 @@ b { 0px 10px 48px 0px rgb(0 0 0 / 4%); } +.main-wrapper img.avatar__photo { + border-radius: 200px; +} + @media screen and (max-width: 997px) { .navbar__title { display: none; @@ -296,9 +300,12 @@ b { margin-top: var(--ifm-leading) !important; margin-bottom: 0 !important; } - div.col.docItemCol_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem-Layout-styles-module { + .docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocRoot-Layout-Main-styles-module { padding: 0 64px; } + .col--7 { + padding-right: 64px; + } #__docusaurus_skipToContent_fallback > div diff --git a/src/pages/app.tsx b/src/pages/app.tsx new file mode 100644 index 0000000..1fa6a90 --- /dev/null +++ b/src/pages/app.tsx @@ -0,0 +1,8 @@ +export default function App() { + return ( + + ); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8737cc8..3d6cc3e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -78,7 +78,7 @@ function AppBar({ showVideo }: SV) { const menu = l10n.sections.map(({ url, label }) => ( location.replace(url)} + onClick={() => (location.href = url)} > {label} @@ -118,6 +118,7 @@ function AppBar({ showVideo }: SV) { ...(top ? { ...paper(1), + // boxShadow: "inset 0px 1px 0px 1px rgba(255,255,255,0.05)", } : {}), width: 1000, diff --git a/static/img/complex-view-light.png b/static/img/complex-view-light.png new file mode 100644 index 0000000..7aa045b Binary files /dev/null and b/static/img/complex-view-light.png differ