Page Not Found
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
context property",id:"context-property",level:3},{value:"components property",id:"components-property",level:3},{value:"views property",id:"views-property",level:3},{value:"Example Search Trace",id:"example-search-trace",level:3},{value:"Event Record (Event List) Event",id:"event-record-event-list-event",level:2},{value:"Event",id:"event",level:3}];function h(e){const n={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"search-trace",children:"Search Trace"}),"\n",(0,r.jsx)(n.h2,{id:"context",children:"Context"}),"\n",(0,r.jsx)(n.h2,{id:"render-definition",children:"Render Definition"}),"\n",(0,r.jsx)(n.p,{children:"The Render Definition is a template syntax that offers a minimalistic way to detail the visualization of the events."}),"\n",(0,r.jsx)(n.p,{children:"It comprises three properties."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"views"})," is a required property which contains information on the rendering processes of the individual views."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"context"})," is an optional property which can be used to provide additional information for the components."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"components"})," is optional property which can contain user defined visualization elements."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["The structure for the ",(0,r.jsx)(n.code,{children:"RenderDefinition"})," is defined below,"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"type View = {\n renderer: string;\n component: Component;\n};\n\ntype RenderDefinition = {\n context?: ContextDefinition;\n components?: { [K: string]: Component[] };\n views: { main: View; secondary: View };\n};\n"})}),"\n",(0,r.jsxs)(n.h3,{id:"context-property",children:[(0,r.jsx)(n.code,{children:"context"})," property"]}),"\n",(0,r.jsx)(n.p,{children:"The context property provides an additional variable environment for components. It can be used to provide new general values and override the default context variables (eg. Changing the colours for the different types of Events.)"}),"\n",(0,r.jsxs)(n.p,{children:["Refer to ",(0,r.jsx)(n.a,{href:"./context.md",children:"context.md"})," for more ",(0,r.jsx)(n.code,{children:"ContextDefinition"})," detail."]}),"\n",(0,r.jsx)(n.h3,{id:"components-property",children:"components property"}),"\n",(0,r.jsxs)(n.p,{children:["The components property is a object of ",(0,r.jsx)(n.a,{href:"#components",children:"Component"})," definitions. The key is the name of the component and the value is list of ",(0,r.jsx)(n.a,{href:"#components",children:"Component"})," which are compose together. This is where the user can create custom element to render each of events. Custom components must be recurse back to inbuilts primitive components."]}),"\n",(0,r.jsxs)(n.p,{children:["Refer to ",(0,r.jsx)(n.a,{href:"../../4-user-guide/renderer/standard-renderers.md",children:"standard-renderers.md"})," for more detail."]}),"\n",(0,r.jsx)(n.h3,{id:"views-property",children:"views property"}),"\n",(0,r.jsx)(n.p,{children:"The views property which is a object of view definitions. The key is the view name and the value is the view information object. Each view defines what component will be displayed in individual window which can be resized."}),"\n",(0,r.jsxs)(n.p,{children:["A view consist a component (which can be comprise of many components) and the name of the renderer it will utilize to draw this component. This component can either be user defined component from the ",(0,r.jsx)(n.a,{href:"#components-property",children:"components property"})," or a prefined component from ",(0,r.jsx)(n.a,{href:"#",children:"renderer"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"Below is an example for the usage of a prefined component."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'type RendererDefinition = {\n views: { main: { renderer: "2d-pixi"; component: { $: "tree" } } };\n};\n'})}),"\n",(0,r.jsxs)(n.p,{children:["Refer to ",(0,r.jsx)(n.a,{href:"../../4-user-guide/renderer/standard-renderers.md",children:"standard-renderers.md"})," for more detail on the usage of prefined components."]}),"\n",(0,r.jsx)(n.p,{children:"\xa0"}),"\n",(0,r.jsx)(n.h3,{id:"example-search-trace",children:"Example Search Trace"}),"\n",(0,r.jsx)(n.p,{children:"Below is an example renderer definition that specifies that each step in the search trace should be rendered as boxes with their IDs inside."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'const myTrace = {\n "version": "1.0.5",\n "render": {\n "components": {},\n "views": {\n "main": {\n "components": [\n {\n "$": "rect",\n "fill": "{{$.color[$.event.type]}}",\n "width": 1,\n "height": 1,\n "x": "{{\'x\' in $.event ? $.event.x : 0}}",\n "y": "{{\'y\' in $.event ? $.event.y : 0}}"\n }\n ]\n }\n }\n },\n "events": [\n ...\n {\n "type": "generating",\n "id": 1640,\n "g": 0.00001,\n "f": 0.000320711,\n "pId": 1736,\n "x": 8,\n "y": 14\n },\n ...\n ]\n};\n'})}),"\n",(0,r.jsx)(n.p,{children:"\xa0"}),"\n",(0,r.jsxs)(n.h2,{id:"event-record-event-list-event",children:["Event Record (Event List) ",Event]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"Event"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["Each of the events in the ",(0,r.jsx)(n.code,{children:"events"})," can be rendered/animated to show the process of the search, this is done by providing the variables of the event to the respectives components. The rendering process will be follow linear progression through the ",(0,r.jsx)(n.code,{children:"events"})]}),"\n",(0,r.jsx)(n.h3,{id:"event",children:"Event"}),"\n",(0,r.jsxs)(n.p,{children:["An ",(0,r.jsx)(n.code,{children:"Event"})," is an object describing a node at a particular state in search.\n",(0,r.jsx)(n.code,{children:"Events"})," have a couple standard properties including"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"})," an unique identifier for the node"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"pId"})," the id for the parent of the current node"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"f"})," bound on total cost from start to target from current node"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"g"})," associated cost (g-value)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"h"})," estimated cost (h-valye)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"type"})," which signifies state of the node"]}),"\n"]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Events Types"}),(0,r.jsx)(n.th,{children:"Definition"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"source"}),(0,r.jsx)(n.td,{children:"A Beginning Node of the Search Trace"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"destination"}),(0,r.jsx)(n.td,{children:"A Ending Node of the Search Trace"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"generating"}),(0,r.jsx)(n.td,{children:"A Node that has just been discovered"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"updating"}),(0,r.jsx)(n.td,{children:"A Node thats information is being updated"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"expanding"}),(0,r.jsx)(n.td,{children:"Current Node which is simulating all actions avaiable to it"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"closing"}),(0,r.jsx)(n.td,{children:"Node is done expanding"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"end"}),(0,r.jsx)(n.td,{children:"End node of the search process"})]})]})]}),"\n",(0,r.jsxs)(n.p,{children:["These standard properties will be displayed in visualiser's Info Panel and node's popups for easy inspection.",(0,r.jsx)(n.br,{}),"\n","Events will generally contain more information such as x and y positions that are required for the rendering of the Search Trace. Those custom/additional properties will be provided to the component when rendering."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'export type TraceEventType =\n | "source"\n | "destination"\n | "generating"\n | "updating"\n | "closing"\n | "expanding"\n | "end";\n\nexport type TraceEvent = {\n type: TraceEventType;\n id: number | string;\n pId?: number | string | null;\n f?: number;\n g?: number;\n h?: number;\n [key: string]: any;\n};\n'})})]})}function l(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>d,a:()=>o});var r=t(7294);const i={},s=r.createContext(i);function o(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/6f3fa7c4.9e0ac90b.js b/assets/js/6f3fa7c4.9e0ac90b.js
new file mode 100644
index 0000000..b89f76f
--- /dev/null
+++ b/assets/js/6f3fa7c4.9e0ac90b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[2378],{822:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>l,frontMatter:()=>s,metadata:()=>d,toc:()=>a});var r=t(5893),i=t(1151);const s={},o="Search Trace",d={id:"api/search-trace",title:"Search Trace",description:"Context",source:"@site/docs/6-api/search-trace.md",sourceDirName:"6-api",slug:"/api/search-trace",permalink:"/docs/api/search-trace",draft:!1,unlisted:!1,editUrl:"https://github.com/path-visualiser/path-visualiser.github.io/tree/master/docs/6-api/search-trace.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Standard Renderers",permalink:"/docs/api/renderer/standard-renderers"},next:{title:"Posthoc Adapter Protocol",permalink:"/docs/api/visualiser-adapter-protocol"}},c={},a=[{value:"Context",id:"context",level:2},{value:"Render Definition",id:"render-definition",level:2},{value:"context property",id:"context-property",level:3},{value:"components property",id:"components-property",level:3},{value:"views property",id:"views-property",level:3},{value:"Example Search Trace",id:"example-search-trace",level:3},{value:"Event Record (Event List) Event",id:"event-record-event-list-event",level:2},{value:"Event",id:"event",level:3}];function h(e){const n={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"search-trace",children:"Search Trace"}),"\n",(0,r.jsx)(n.h2,{id:"context",children:"Context"}),"\n",(0,r.jsx)(n.h2,{id:"render-definition",children:"Render Definition"}),"\n",(0,r.jsx)(n.p,{children:"The Render Definition is a template syntax that offers a minimalistic way to detail the visualization of the events."}),"\n",(0,r.jsx)(n.p,{children:"It comprises three properties."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"views"})," is a required property which contains information on the rendering processes of the individual views."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"context"})," is an optional property which can be used to provide additional information for the components."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"components"})," is optional property which can contain user defined visualization elements."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["The structure for the ",(0,r.jsx)(n.code,{children:"RenderDefinition"})," is defined below,"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"type View = {\n renderer: string;\n component: Component;\n};\n\ntype RenderDefinition = {\n context?: ContextDefinition;\n components?: { [K: string]: Component[] };\n views: { main: View; secondary: View };\n};\n"})}),"\n",(0,r.jsxs)(n.h3,{id:"context-property",children:[(0,r.jsx)(n.code,{children:"context"})," property"]}),"\n",(0,r.jsx)(n.p,{children:"The context property provides an additional variable environment for components. It can be used to provide new general values and override the default context variables (eg. Changing the colours for the different types of Events.)"}),"\n",(0,r.jsxs)(n.p,{children:["Refer to ",(0,r.jsx)(n.a,{href:"./context.md",children:"context.md"})," for more ",(0,r.jsx)(n.code,{children:"ContextDefinition"})," detail."]}),"\n",(0,r.jsx)(n.h3,{id:"components-property",children:"components property"}),"\n",(0,r.jsxs)(n.p,{children:["The components property is a object of ",(0,r.jsx)(n.a,{href:"#components",children:"Component"})," definitions. The key is the name of the component and the value is list of ",(0,r.jsx)(n.a,{href:"#components",children:"Component"})," which are compose together. This is where the user can create custom element to render each of events. Custom components must be recurse back to inbuilts primitive components."]}),"\n",(0,r.jsxs)(n.p,{children:["Refer to ",(0,r.jsx)(n.a,{href:"../../4-user-guide/renderer/standard-renderers.md",children:"standard-renderers.md"})," for more detail."]}),"\n",(0,r.jsx)(n.h3,{id:"views-property",children:"views property"}),"\n",(0,r.jsx)(n.p,{children:"The views property which is a object of view definitions. The key is the view name and the value is the view information object. Each view defines what component will be displayed in individual window which can be resized."}),"\n",(0,r.jsxs)(n.p,{children:["A view consist a component (which can be comprise of many components) and the name of the renderer it will utilize to draw this component. This component can either be user defined component from the ",(0,r.jsx)(n.a,{href:"#components-property",children:"components property"})," or a prefined component from ",(0,r.jsx)(n.a,{href:"#",children:"renderer"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"Below is an example for the usage of a prefined component."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'type RendererDefinition = {\n views: { main: { renderer: "2d-pixi"; component: { $: "tree" } } };\n};\n'})}),"\n",(0,r.jsxs)(n.p,{children:["Refer to ",(0,r.jsx)(n.a,{href:"../../4-user-guide/renderer/standard-renderers.md",children:"standard-renderers.md"})," for more detail on the usage of prefined components."]}),"\n",(0,r.jsx)(n.p,{children:"\xa0"}),"\n",(0,r.jsx)(n.h3,{id:"example-search-trace",children:"Example Search Trace"}),"\n",(0,r.jsx)(n.p,{children:"Below is an example renderer definition that specifies that each step in the search trace should be rendered as boxes with their IDs inside."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'const myTrace = {\n "version": "1.0.5",\n "render": {\n "components": {},\n "views": {\n "main": {\n "components": [\n {\n "$": "rect",\n "fill": "{{$.color[$.event.type]}}",\n "width": 1,\n "height": 1,\n "x": "{{\'x\' in $.event ? $.event.x : 0}}",\n "y": "{{\'y\' in $.event ? $.event.y : 0}}"\n }\n ]\n }\n }\n },\n "events": [\n ...\n {\n "type": "generating",\n "id": 1640,\n "g": 0.00001,\n "f": 0.000320711,\n "pId": 1736,\n "x": 8,\n "y": 14\n },\n ...\n ]\n};\n'})}),"\n",(0,r.jsx)(n.p,{children:"\xa0"}),"\n",(0,r.jsxs)(n.h2,{id:"event-record-event-list-event",children:["Event Record (Event List) ",Event]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"Event"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["Each of the events in the ",(0,r.jsx)(n.code,{children:"events"})," can be rendered/animated to show the process of the search, this is done by providing the variables of the event to the respectives components. The rendering process will be follow linear progression through the ",(0,r.jsx)(n.code,{children:"events"})]}),"\n",(0,r.jsx)(n.h3,{id:"event",children:"Event"}),"\n",(0,r.jsxs)(n.p,{children:["An ",(0,r.jsx)(n.code,{children:"Event"})," is an object describing a node at a particular state in search.\n",(0,r.jsx)(n.code,{children:"Events"})," have a couple standard properties including"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"id"})," an unique identifier for the node"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"pId"})," the id for the parent of the current node"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"f"})," bound on total cost from start to target from current node"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"g"})," associated cost (g-value)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"h"})," estimated cost (h-valye)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"type"})," which signifies state of the node"]}),"\n"]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Events Types"}),(0,r.jsx)(n.th,{children:"Definition"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"source"}),(0,r.jsx)(n.td,{children:"A Beginning Node of the Search Trace"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"destination"}),(0,r.jsx)(n.td,{children:"A Ending Node of the Search Trace"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"generating"}),(0,r.jsx)(n.td,{children:"A Node that has just been discovered"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"updating"}),(0,r.jsx)(n.td,{children:"A Node thats information is being updated"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"expanding"}),(0,r.jsx)(n.td,{children:"Current Node which is simulating all actions avaiable to it"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"closing"}),(0,r.jsx)(n.td,{children:"Node is done expanding"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"end"}),(0,r.jsx)(n.td,{children:"End node of the search process"})]})]})]}),"\n",(0,r.jsxs)(n.p,{children:["These standard properties will be displayed in visualiser's Info Panel and node's popups for easy inspection.",(0,r.jsx)(n.br,{}),"\n","Events will generally contain more information such as x and y positions that are required for the rendering of the Search Trace. Those custom/additional properties will be provided to the component when rendering."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'export type TraceEventType =\n | "source"\n | "destination"\n | "generating"\n | "updating"\n | "closing"\n | "expanding"\n | "end";\n\nexport type TraceEvent = {\n type: TraceEventType;\n id: number | string;\n pId?: number | string | null;\n f?: number;\n g?: number;\n h?: number;\n [key: string]: any;\n};\n'})})]})}function l(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>d,a:()=>o});var r=t(7294);const i={},s=r.createContext(i);function o(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/7163198f.3f4f897f.js b/assets/js/7163198f.3f4f897f.js
new file mode 100644
index 0000000..eeb869a
--- /dev/null
+++ b/assets/js/7163198f.3f4f897f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[7005],{6265:(e,n,t)=>{t.d(n,{ZP:()=>i});var r=t(5893),s=t(1151);function a(e){const n={li:"li",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["In the ",(0,r.jsx)(n.strong,{children:"Layer"})," panel, click ",(0,r.jsx)(n.strong,{children:"+ Layer"})," to add a new layer."]}),"\n",(0,r.jsx)(n.li,{children:"Click the pencil icon to edit the layer."}),"\n",(0,r.jsxs)(n.li,{children:["For ",(0,r.jsx)(n.strong,{children:"Type"}),", choose ",(0,r.jsx)(n.strong,{children:"Trace"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:["For ",(0,r.jsx)(n.strong,{children:"Trace"}),", choose ",(0,r.jsx)(n.strong,{children:"Choose File"}),", then pick the search trace from your system."]}),"\n",(0,r.jsxs)(n.li,{children:["Close the ",(0,r.jsx)(n.strong,{children:"Edit Layer"})," modal."]}),"\n",(0,r.jsxs)(n.li,{children:["In the ",(0,r.jsx)(n.strong,{children:"Viewport"})," panel, click ",(0,r.jsx)(n.strong,{children:"Fit"})," to fit the map to the viewport."]}),"\n"]})}function i(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},7018:(e,n,t)=>{t.d(n,{ZP:()=>l});var r=t(5893),s=t(1151);const a=t.p+"assets/images/step-through-trace-acf140b666c50587044d8b193da3b200.png";function i(e){const n={li:"li",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["In the ",(0,r.jsx)(n.strong,{children:"Steps"})," panel, choose the search trace layer from the layer dropdown. Here, the layer is named ",(0,r.jsx)(n.strong,{children:e.traceName??"Cross Example"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:["Click ",(0,r.jsx)(n.strong,{children:"Play"}),"."]}),"\n"]}),"\n",(0,r.jsx)("img",{src:e.image??a,alt:"Step through trace"})]})}function l(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}},3199:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>d,default:()=>x,frontMatter:()=>c,metadata:()=>h,toc:()=>p});var r=t(5893),s=t(1151),a=t(3992),i=t(425),l=t(6265),o=t(7018);const c={},d="Single Agent Grid Search",h={id:"tutorials/single-agent-grid",title:"Single Agent Grid Search",description:"Follow these steps to visualise a single-agent search, in our case A\\*, on a grid map.",source:"@site/docs/4-tutorials/single-agent-grid.mdx",sourceDirName:"4-tutorials",slug:"/tutorials/single-agent-grid",permalink:"/docs/tutorials/single-agent-grid",draft:!1,unlisted:!1,editUrl:"https://github.com/path-visualiser/path-visualiser.github.io/tree/master/docs/4-tutorials/single-agent-grid.mdx",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Tutorials",permalink:"/docs/category/tutorials"},next:{title:"Decision Tree Search",permalink:"/docs/tutorials/tile"}},u={},p=[{value:"Prepare the Map",id:"prepare-the-map",level:2},{value:"Load the Map",id:"load-the-map",level:2},{value:"Prepare the Search Trace",id:"prepare-the-search-trace",level:2},{value:"Load the Search Trace",id:"load-the-search-trace",level:2},{value:"Adding the Query",id:"adding-the-query",level:2},{value:"Adding Source and Destination",id:"adding-source-and-destination",level:2},{value:"Step through the Search Trace",id:"step-through-the-search-trace",level:2}];function g(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"single-agent-grid-search",children:"Single Agent Grid Search"}),"\n",(0,r.jsx)(n.p,{children:"Follow these steps to visualise a single-agent search, in our case A*, on a grid map."}),"\n",(0,r.jsx)(n.h2,{id:"prepare-the-map",children:"Prepare the Map"}),"\n",(0,r.jsxs)(n.p,{children:["We support grid maps as ",(0,r.jsx)(n.code,{children:".grid"})," files. A ",(0,r.jsx)(n.code,{children:".grid"})," file is a text file that looks like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-txt",metastring:'title="cross.grid"',children:"type octile\nheight 5\nwidth 5\nmap\n.....\n..@..\n.@@@.\n..@..\n.....\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Save this file as ",(0,r.jsx)(n.code,{children:"cross.grid"})," to your system."]}),"\n",(0,r.jsx)(n.h2,{id:"load-the-map",children:"Load the Map"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["In the ",(0,r.jsx)(n.strong,{children:"Layer"})," panel, click ",(0,r.jsx)(n.strong,{children:"+ Layer"})," to add a new layer."]}),"\n",(0,r.jsx)(n.li,{children:"Click the pencil icon to edit the layer."}),"\n",(0,r.jsxs)(n.li,{children:["For ",(0,r.jsx)(n.strong,{children:"Type"}),", choose ",(0,r.jsx)(n.strong,{children:"Map"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:["For ",(0,r.jsx)(n.strong,{children:"Source"}),", choose ",(0,r.jsx)(n.strong,{children:"Import Map"}),", then pick ",(0,r.jsx)(n.code,{children:"cross.grid"})," from your system."]}),"\n",(0,r.jsxs)(n.li,{children:["Close the ",(0,r.jsx)(n.strong,{children:"Edit Layer"})," modal."]}),"\n",(0,r.jsxs)(n.li,{children:["In the ",(0,r.jsx)(n.strong,{children:"Viewport"})," panel, click ",(0,r.jsx)(n.strong,{children:"Fit"})," to fit the map to the viewport."]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"This should be the result:"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Loaded map",src:t(8907).Z+"",width:"2560",height:"1528"})}),"\n",(0,r.jsx)(n.h2,{id:"prepare-the-search-trace",children:"Prepare the Search Trace"}),"\n",(0,r.jsx)(n.p,{children:"You can generate the search trace in a number of ways depending on your solver."}),"\n",(0,r.jsxs)(a.Z,{children:[(0,r.jsxs)(i.Z,{value:"raw",label:"Demo Search Trace",children:[(0,r.jsxs)(n.p,{children:["Download ",(0,r.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:t(6344).Z+"",children:"this"})," pre-computed search trace."]}),(0,r.jsx)(n.p,{children:"The file should start like this:"}),(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="example.trace.yaml"',children:'render:\n components:\n tile:\n - $: rect\n width: 1\n height: 1\n x: "{{$.event.x}}"\n y: "{{$.event.y}}"\n fill: "{{$.color[$.event.type]}}"\n views:\n main:\n components:\n - $: tile\n path:\n pivot:\n x: "{{$.event.x + 0.5}}"\n y: "{{$.event.y + 0.5}}"\n scale: 0.3\nevents:\n - type: source\n id: 96\n x: 0\n y: 0\n - type: destination\n id: 228\n x: 4\n y: 4\n'})}),(0,r.jsx)(n.p,{children:"The search trace contains a record of the events that occured during the search and how to visualise them."}),(0,r.jsx)(n.h2,{id:"load-the-search-trace",children:"Load the Search Trace"}),(0,r.jsx)(l.ZP,{})]}),(0,r.jsx)(i.Z,{value:"warthog",label:"Warthog",children:(0,r.jsx)(n.p,{children:"TODO: explain on how warthog can be download and used through the terminal and produce a search trace"})}),(0,r.jsxs)(i.Z,{value:"query",label:"Query",children:[(0,r.jsx)(n.p,{children:"By default, Visualiser is bundled with a WebAssembly version of Warthog, a solver for grid maps."}),(0,r.jsxs)(n.p,{children:["Check that ",(0,r.jsx)(n.strong,{children:"Warthog (WebAssembly)"})," is enabled in the ",(0,r.jsx)(n.strong,{children:"Settings"})," panel, in the ",(0,r.jsx)(n.strong,{children:"Connections"})," tab."]}),(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Alt text",src:t(7195).Z+"",width:"1431",height:"147"})}),(0,r.jsx)(n.h2,{id:"adding-the-query",children:"Adding the Query"}),(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["In the ",(0,r.jsx)(n.strong,{children:"Layer"})," panel, click ",(0,r.jsx)(n.strong,{children:"+ Layer"})," to add a new layer."]}),"\n",(0,r.jsx)(n.li,{children:"Click the pencil icon to edit the layer."}),"\n",(0,r.jsxs)(n.li,{children:["For ",(0,r.jsx)(n.strong,{children:"Type"}),", choose ",(0,r.jsx)(n.strong,{children:"Query"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:["For ",(0,r.jsx)(n.strong,{children:"Algorithm"}),", choose the algorithm that you want to visualise."]}),"\n",(0,r.jsxs)(n.li,{children:["For ",(0,r.jsx)(n.strong,{children:"Map"}),", choose a map that you have chose."]}),"\n",(0,r.jsxs)(n.li,{children:["Close the ",(0,r.jsx)(n.strong,{children:"Edit Layer"})," modal."]}),"\n"]}),(0,r.jsx)(n.h2,{id:"adding-source-and-destination",children:"Adding Source and Destination"}),(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Left click on any part of the map that you wanted to be set as a source, then ",(0,r.jsx)(n.strong,{children:"Set as Source"})]}),"\n",(0,r.jsxs)(n.li,{children:["Do the same for the destination click ",(0,r.jsx)(n.strong,{children:"Set as Destination"})]}),"\n",(0,r.jsx)(n.li,{children:"A green pixel will show up marking the source"}),"\n"]}),(0,r.jsxs)(n.p,{children:["A demonstration on how to add a query, destination and source is provided in this ",(0,r.jsx)(n.a,{href:"https://youtu.be/7hFjyrnAVkA",children:"Video"})]})]})]}),"\n",(0,r.jsx)(n.h2,{id:"step-through-the-search-trace",children:"Step through the Search Trace"}),"\n",(0,r.jsx)(o.ZP,{}),"\n",(0,r.jsx)(n.p,{children:"\xa0"}),"\n",(0,r.jsxs)(n.p,{children:["A demonstration on how to import a map and a trace is provided in this ",(0,r.jsx)(n.a,{href:"https://youtu.be/MkA-Qf2TAZQ",children:"Video"}),"\n\xa0"]}),"\n",(0,r.jsx)(n.p,{children:"You have now visualised an A* search on a grid map."})]})}function x(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var r=t(6905);const s={tabItem:"tabItem_Ymn6"};var a=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var r=t(7294),s=t(6905),a=t(2957),i=t(6550),l=t(1270),o=t(5238),c=t(3609),d=t(2560);function h(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad clear",id:"clear",level:3},{value:"$for",id:"for",level:3},{value:"$if",id:"if",level:3},{value:"$info",id:"info",level:3},{value:"API",id:"api",level:2}];function o(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"search-trace",children:"Search trace"}),"\n",(0,r.jsx)(n.p,{children:"The search trace is a YAML log of your algorithm's decisions. What, and how much, you want to log is up to you. Here are some ideas."}),"\n",(0,r.jsxs)("figure",{children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="single-agent-search.trace.yaml"',children:"version: 1.4.0\nevents:\n - { type: expand, id: 0, f: 0, g: 0 }\n - { type: generate, id: 1, pId: 0, f: 1, g: 1 }\n - { type: close, id: 0, f: 0, g: 0 }\n"})}),(0,r.jsx)("figcaption",{children:"Generic search events"})]}),"\n",(0,r.jsxs)("figure",{children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="agent-moves.trace.yaml"',children:"version: 1.4.0\nevents:\n - { type: move, agent: 47, id: 0, x: 0, y: 0 }\n - { type: move, agent: 18, id: 0, pId: 0, x: 5, y: 2 }\n"})}),(0,r.jsx)("figcaption",{children:"Multi-agent plan execution"})]}),"\n",(0,r.jsxs)("figure",{children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="rayscan.trace.yaml"',children:"version: 1.4.0\nevents:\n - { type: raycast, id: 1, x: 1, y: 2, rayX: 3, rayY: 4 }\n - { type: raycast, id: 1, x: 1, y: 2, rayX: 1, rayY: 4 }\n - { type: expand, id: 2, x: 3, y: 4 }\n"})}),(0,r.jsx)("figcaption",{children:"Algorithm-specific events"})]}),"\n",(0,r.jsx)(n.p,{children:"Since YAML is a superset of JSON, your traces can be in JSON too."}),"\n",(0,r.jsxs)("figure",{children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="single-agent-search.trace.json"',children:'version: 1.4.0\n{\n "events": [\n { "type": "expand", "id": 0, "f": 0, "g": 0 },\n { "type": "generate", "id": 1, "pId": 0, "f": 1, "g": 1 },\n { "type": "close", "id": 0, "f": 0, "g": 0 }\n ]\n}\n'})}),(0,r.jsx)("figcaption",{children:"Generic search events (JSON)"})]}),"\n",(0,r.jsxs)(n.p,{children:["Search traces should have the extensions ",(0,r.jsx)(n.code,{children:".trace.yaml"})," or ",(0,r.jsx)(n.code,{children:".trace.json"}),". It's required to declare ",(0,r.jsx)(n.code,{children:"version: 1.4.0"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"decision-tree",children:"Decision tree"}),"\n",(0,r.jsxs)(n.p,{children:["View your sequential decision-making processes as a tree or directed graph. Just provide ",(0,r.jsx)(n.code,{children:"id"})," and ",(0,r.jsx)(n.code,{children:"pId"}),"(parent ID) properties in your log."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="simple-tree.trace.yaml"',children:"version: 1.4.0\nevents:\n - { type: decision, id: a, pId: null }\n - { type: decision, id: b, pId: a }\n - { type: decision, id: c, pId: a }\n"})}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"type"})," property is optional, but should be a descriptive name of the kind of event that was logged."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Simple tree",src:i(1107).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.h2,{id:"custom-views",children:"Custom views"}),"\n",(0,r.jsxs)(n.p,{children:["Give your search trace a custom visual representation by adding a ",(0,r.jsx)(n.code,{children:"views"})," section to it."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'{2-9} title="custom-view.trace.yaml"',children:"version: 1.4.0\nviews:\n main:\n - $: rect # Show a rectangle...\n x: ${{ $.x }} # at this coordinate...\n y: ${{ $.y }} # at this coordinate...\n width: 1\n height: 1\n fill: ${{ theme.foreground }} # with this color \ud83c\udfa8\nevents:\n - { type: decision, id: a, x: 1, y: 1, pId: null }\n - { type: decision, id: b, x: 1, y: 3, pId: a }\n - { type: decision, id: c, x: 1, y: 5, pId: a }\n"})}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"main"})," view acts as the entry-point, and ",(0,r.jsx)(n.code,{children:"rect"})," is a primitive provided by the built-in 2D renderer."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Simple view",src:i(6234).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.p,{children:"It's that easy!"}),"\n",(0,r.jsx)(n.p,{children:"Custom views get you quickly going to creating something useful, but its also a language that is powerful enough to let you express complex visualisations."}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Complex view",src:i(1641).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsxs)(n.p,{children:["See the ",(0,r.jsx)(n.a,{href:"category/renderer",children:"2D renderer API reference"})," for a list of primitives provided by the built-in renderer."]}),"\n",(0,r.jsx)(n.h2,{id:"nested-views",children:"Nested views"}),"\n",(0,r.jsx)(n.p,{children:"Nesting allows you to create copies of some element without having to repeat yourself."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="nesting.trace.yaml',children:"version: 1.4.0\nviews:\n // highlight-next-line\n marker: # A marker is defined here, which just draws a circle\n - $: circle\n fill: ${{ $.color }}\n radius: 0.25\n x: ${{ $.x }}\n y: ${{ $.step }}\n main:\n // highlight-next-line\n - $: marker # Render a red marker\n color: red\n x: ${{ $.min }}\n // highlight-next-line\n - $: marker # Render a green marker\n color: green\n x: ${{ $.max }}\n\nevents:\n - { type: bound, step: 0, min: 1, max: 5 }\n - { type: bound, step: 1, min: 2, max: 5 }\n - { type: bound, step: 2, min: 2, max: 4 }\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Nest views by referencing other views with the ",(0,r.jsx)(n.code,{children:"$"})," property. You can also pass properties to them, which is accessible via the ",(0,r.jsx)(n.code,{children:"$"})," object in expressions."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Nesting",src:i(8557).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.h2,{id:"property-expressions",children:"Property expressions"}),"\n",(0,r.jsxs)(n.p,{children:["You can write expressions inside ",(0,r.jsx)(n.code,{children:"${{ }}"})," brackets to reference event information or values passed from a parent view."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="expression.trace.yaml',children:"version: 1.4.0\nviews:\n main:\n - $: rect\n width: 1\n height: 1\n // highlight-next-line\n fill: ${{ $.color }}\n $info:\n // highlight-next-line\n greeting: This rectangle is ${{ $.color }}\n\nevents:\n - { type: event, color: orange }\n"})}),"\n",(0,r.jsx)(n.p,{children:"If a property is a single expression, the property's value and type is taken from the result of the expression. But, if the property contains multiple expressions, or if there's text around the expressions, it becomes a concatenated string instead."}),"\n",(0,r.jsxs)(n.p,{children:["See the ",(0,r.jsx)(n.a,{href:"api/search-trace",children:"search trace API reference"})," for a list of properties available in expressions."]}),"\n",(0,r.jsx)(n.h2,{id:"special-properties",children:"Special properties"}),"\n",(0,r.jsx)(n.h3,{id:"clear",children:(0,r.jsx)(n.code,{children:"clear"})}),"\n",(0,r.jsx)(n.p,{children:"Control when elements should be cleared."}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Value"}),(0,r.jsx)(n.th,{children:"Usage"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"false"})," (default)"]}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"clear: false"})}),(0,r.jsx)(n.td,{children:"Event will remain once drawn."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"clear: true"})}),(0,r.jsx)(n.td,{children:"Event will clear immediately after the step they're drawn."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"clear: close"})}),(0,r.jsxs)(n.td,{children:["Event clears once another event of the same ",(0,r.jsx)(n.code,{children:"id"}),", and the specified type (e.g. ",(0,r.jsx)(n.code,{children:"close"}),"), is encountered."]})]})]})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="clear.trace.yaml"',children:"version: 1.4.0\nviews:\n main:\n - $: circle\n x: ${{ $.step }}\n y: 1\n radius: 0.25\n fill: ${{ colors.blue }}\n // highlight-next-line\n clear: close\nevents:\n - { type: open, id: 1 }\n - { type: generate, id: 1 }\n - { type: close, id: 1, message: Open and generate events should be cleared }\n"})}),"\n",(0,r.jsx)(n.h3,{id:"for",children:(0,r.jsx)(n.code,{children:"$for"})}),"\n",(0,r.jsx)(n.p,{children:"Repeat a view based on a value."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'{11-15} title="loop.trace.yaml"',children:"version: 1.4.0\nviews:\n main:\n - $: circle\n x: ${{ $.i }}\n y: 1\n radius: 0.25\n fill: ${{ $.colors[$.i] }}\n $info:\n color: ${{ $.colors[$.i] }}\n $for:\n $let: i # Optional, default `i`\n $from: 0 # Optional, default 0\n $step: 1 # Optional, default 1\n $to: ${{ $.colors.length }} # Required, number\nevents:\n - { type: event, colors: [red, green, blue, orange] }\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"For property",src:i(7786).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.h3,{id:"if",children:(0,r.jsx)(n.code,{children:"$if"})}),"\n",(0,r.jsx)(n.p,{children:"Conditionally render a view."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="if.trace.yaml"',children:"version: 1.4.0\nviews:\n main:\n - $: circle\n radius: 1\n x: 1\n y: 1\n fill: red\n // highlight-next-line\n $if: ${{ $.direction == 'left' }}\n - $: rect\n width: 1\n height: 1\n x: 1\n y: 1\n fill: red\n // highlight-next-line\n $if: ${{ $.direction == 'right' }}\nevents:\n - { type: event, direction: left }\n - { type: event, direction: right }\n"})}),"\n",(0,r.jsx)(n.h3,{id:"info",children:(0,r.jsx)(n.code,{children:"$info"})}),"\n",(0,r.jsx)(n.p,{children:"By default, clicking on elements in the viewport will show you info about the event that rendered it. However, you can define information that will only be shown when a specific part of the event was clicked."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'{9-11,17-19} title="info.trace.yaml',children:"version: 1.4.0\nviews:\n main:\n - $: circle\n fill: green\n radius: 0.25\n x: ${{ $.x + $.l }}\n y: 0\n $info:\n message: This is the left marker\n position: ${{ $.x }} + ${{ $.l }} = ${{ $.x + $.l }}\n - $: circle\n fill: red\n radius: 0.25\n x: ${{ $.x + $.r }}\n y: 0\n $info:\n message: This is the right marker\n position: ${{ $.x }} + ${{ $.r }} = ${{ $.x + $.r }}\nevents:\n - { type: bound, x: 10, l: 2, r: 4 }\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Info",src:i(950).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.h2,{id:"api",children:"API"}),"\n",(0,r.jsxs)(n.p,{children:["The search trace API defines how you can write and structure your search trace. ",(0,r.jsx)(n.a,{href:"api/search-trace",children:"See the search trace API"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["The renderer specifies what primitives are available and how you can use them. For the built-in renderer, see the ",(0,r.jsx)(n.a,{href:"category/renderer",children:"2D renderer API here"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["Check out the ",(0,r.jsx)(n.a,{href:"https://yaml.org/spec/1.2.2/",children:"YAML 1.2.2 documentation"})," for all the ways you can write YAML."]})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},1641:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/complex-view-223a700f28d621ab7a77e34f80eb04ab.png"},7786:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/for-property-c87fdd4573ea433dddda4426707b4d3f.png"},950:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/info-f11c5f6a5fd1de5c1f3ebce102c51725.png"},8557:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/nesting-0f619bb07e3d8ac6d111b03507c058f6.png"},6234:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/simple-rendering-1f8ae5ac70f6059ca50b2f10025fa150.png"},1107:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/simple-tree-ea8b85e47ad3d4081ec880110c7651b8.png"},1151:(e,n,i)=>{i.d(n,{Z:()=>c,a:()=>a});var r=i(7294);const s={},t=r.createContext(s);function a(e){const n=r.useContext(t);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(t.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/ef2725c4.e6cdd6bf.js b/assets/js/ef2725c4.e6cdd6bf.js
deleted file mode 100644
index 671f6a3..0000000
--- a/assets/js/ef2725c4.e6cdd6bf.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[6635],{957:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>t,metadata:()=>c,toc:()=>d});var r=i(5893),s=i(1151);const t={sidebar_position:1},a="Search trace",c={id:"search-trace",title:"Search trace",description:"The search trace is a YAML log of your algorithm's decisions. What, and how much, you want to log is up to you. Here are some ideas.",source:"@site/docs/2-search-trace.md",sourceDirName:".",slug:"/search-trace",permalink:"/docs/search-trace",draft:!1,unlisted:!1,editUrl:"https://github.com/path-visualiser/path-visualiser.github.io/tree/master/docs/2-search-trace.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Overview",permalink:"/docs/overview"},next:{title:"Posthoc visualiser",permalink:"/docs/category/posthoc-visualiser"}},l={},d=[{value:"Decision tree",id:"decision-tree",level:2},{value:"Custom views",id:"custom-views",level:2},{value:"Nested views",id:"nested-views",level:2},{value:"Property expressions",id:"property-expressions",level:2},{value:"Special properties",id:"special-properties",level:2},{value:"clear",id:"clear",level:3},{value:"$for",id:"for",level:3},{value:"$if",id:"if",level:3},{value:"$info",id:"info",level:3},{value:"API",id:"api",level:2}];function o(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"search-trace",children:"Search trace"}),"\n",(0,r.jsx)(n.p,{children:"The search trace is a YAML log of your algorithm's decisions. What, and how much, you want to log is up to you. Here are some ideas."}),"\n",(0,r.jsxs)("figure",{children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="single-agent-search.trace.yaml"',children:"events:\n - { type: expand, id: 0, f: 0, g: 0 }\n - { type: generate, id: 1, pId: 0, f: 1, g: 1 }\n - { type: close, id: 0, f: 0, g: 0 }\n"})}),(0,r.jsx)("figcaption",{children:"Generic search events"})]}),"\n",(0,r.jsxs)("figure",{children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="agent-moves.trace.yaml"',children:"events:\n - { type: move, agent: 47, id: 0, x: 0, y: 0 }\n - { type: move, agent: 18, id: 0, pId: 0, x: 5, y: 2 }\n"})}),(0,r.jsx)("figcaption",{children:"Multi-agent plan execution"})]}),"\n",(0,r.jsxs)("figure",{children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="rayscan.trace.yaml"',children:"events:\n - { type: raycast, id: 1, x: 1, y: 2, rayX: 3, rayY: 4 }\n - { type: raycast, id: 1, x: 1, y: 2, rayX: 1, rayY: 4 }\n - { type: expand, id: 2, x: 3, y: 4 }\n"})}),(0,r.jsx)("figcaption",{children:"Algorithm-specific events"})]}),"\n",(0,r.jsx)(n.p,{children:"Since YAML is a superset of JSON, your traces can be in JSON too."}),"\n",(0,r.jsxs)("figure",{children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="single-agent-search.trace.json"',children:'{\n "events": [\n { "type": "expand", "id": 0, "f": 0, "g": 0 },\n { "type": "generate", "id": 1, "pId": 0, "f": 1, "g": 1 },\n { "type": "close", "id": 0, "f": 0, "g": 0 }\n ]\n}\n'})}),(0,r.jsx)("figcaption",{children:"Generic search events (JSON)"})]}),"\n",(0,r.jsxs)(n.p,{children:["Search traces should have the extensions ",(0,r.jsx)(n.code,{children:".trace.yaml"})," or ",(0,r.jsx)(n.code,{children:".trace.json"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"decision-tree",children:"Decision tree"}),"\n",(0,r.jsxs)(n.p,{children:["View your sequential decision-making processes as a tree or directed graph. Just provide ",(0,r.jsx)(n.code,{children:"id"})," and ",(0,r.jsx)(n.code,{children:"pId"}),"(parent ID) properties in your log."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="simple-tree.trace.yaml"',children:"events:\n - { type: decision, id: a, pId: null }\n - { type: decision, id: b, pId: a }\n - { type: decision, id: c, pId: a }\n"})}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"type"})," property is optional, but should be a descriptive name of the kind of event that was logged."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Simple tree",src:i(1107).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.h2,{id:"custom-views",children:"Custom views"}),"\n",(0,r.jsxs)(n.p,{children:["Give your search trace a custom visual representation by adding a ",(0,r.jsx)(n.code,{children:"views"})," section to it."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'{1-8} title="custom-view.trace.yaml"',children:"views:\n main:\n - $: rect # Show a rectangle...\n x: ${{ $.x }} # at this coordinate...\n y: ${{ $.y }} # at this coordinate...\n width: 1\n height: 1\n fill: ${{ theme.foreground }} # with this color \ud83c\udfa8\nevents:\n - { type: decision, id: a, x: 1, y: 1, pId: null }\n - { type: decision, id: b, x: 1, y: 3, pId: a }\n - { type: decision, id: c, x: 1, y: 5, pId: a }\n"})}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"main"})," view acts as the entry-point, and ",(0,r.jsx)(n.code,{children:"rect"})," is a primitive provided by the built-in 2D renderer."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Simple view",src:i(6234).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.p,{children:"It's that easy!"}),"\n",(0,r.jsx)(n.p,{children:"Custom views get you quickly going to creating something useful, but its also a language that is powerful enough to let you express complex visualisations."}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Complex view",src:i(1641).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsxs)(n.p,{children:["See the ",(0,r.jsx)(n.a,{href:"category/renderer",children:"2D renderer API reference"})," for a list of primitives provided by the built-in renderer."]}),"\n",(0,r.jsx)(n.h2,{id:"nested-views",children:"Nested views"}),"\n",(0,r.jsx)(n.p,{children:"Nesting allows you to create copies of some element without having to repeat yourself."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="nesting.trace.yaml',children:"views:\n // highlight-next-line\n marker: # A marker is defined here, which just draws a circle\n - $: circle\n fill: ${{ $.color }}\n radius: 0.25\n x: ${{ $.x }}\n y: ${{ $.step }}\n main:\n // highlight-next-line\n - $: marker # Render a red marker\n color: red\n x: ${{ $.min }}\n // highlight-next-line\n - $: marker # Render a green marker\n color: green\n x: ${{ $.max }}\n\nevents:\n - { type: bound, step: 0, min: 1, max: 5 }\n - { type: bound, step: 1, min: 2, max: 5 }\n - { type: bound, step: 2, min: 2, max: 4 }\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Nest views by referencing other views with the ",(0,r.jsx)(n.code,{children:"$"})," property. You can also pass properties to them, which is accessible via the ",(0,r.jsx)(n.code,{children:"$"})," object in expressions."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Nesting",src:i(8557).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.h2,{id:"property-expressions",children:"Property expressions"}),"\n",(0,r.jsxs)(n.p,{children:["You can write expressions inside ",(0,r.jsx)(n.code,{children:"${{ }}"})," brackets to reference event information or values passed from a parent view."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="expression.trace.yaml',children:"views:\n main:\n - $: rect\n width: 1\n height: 1\n // highlight-next-line\n fill: ${{ $.color }}\n $info:\n // highlight-next-line\n greeting: This rectangle is ${{ $.color }}\n\nevents:\n - { type: event, color: orange }\n"})}),"\n",(0,r.jsx)(n.p,{children:"If a property is a single expression, the property's value and type is taken from the result of the expression. But, if the property contains multiple expressions, or if there's text around the expressions, it becomes a concatenated string instead."}),"\n",(0,r.jsxs)(n.p,{children:["See the ",(0,r.jsx)(n.a,{href:"api/search-trace",children:"search trace API reference"})," for a list of properties available in expressions."]}),"\n",(0,r.jsx)(n.h2,{id:"special-properties",children:"Special properties"}),"\n",(0,r.jsx)(n.h3,{id:"clear",children:(0,r.jsx)(n.code,{children:"clear"})}),"\n",(0,r.jsx)(n.p,{children:"Control when elements should be cleared."}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Value"}),(0,r.jsx)(n.th,{children:"Example"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"false"})," (default)"]}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"clear: false"})}),(0,r.jsx)(n.td,{children:"Elements will remain once drawn."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"clear: true"})}),(0,r.jsx)(n.td,{children:"Elements will clear immediately after the step they're drawn."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"clear: closing"})}),(0,r.jsxs)(n.td,{children:["Clear once the event of a particular type (e.g. ",(0,r.jsx)(n.code,{children:"closing"}),") is encountered."]})]})]})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="clear.trace.yaml"',children:"views:\n main:\n - $: circle\n x: ${{ $.step }}\n y: 1\n radius: 0.25\n fill: ${{ colors.blue }}\n // highlight-next-line\n clear: close\nevents:\n - { type: open, id: 1 }\n - { type: generate, id: 1 }\n - { type: close, id: 1, message: Open and generate events should be cleared }\n"})}),"\n",(0,r.jsx)(n.h3,{id:"for",children:(0,r.jsx)(n.code,{children:"$for"})}),"\n",(0,r.jsx)(n.p,{children:"Repeat a view based on a value."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'{10-14} title="loop.trace.yaml"',children:"views:\n main:\n - $: circle\n x: ${{ $.i }}\n y: 1\n radius: 0.25\n fill: ${{ $.colors[$.i] }}\n $info:\n color: ${{ $.colors[$.i] }}\n $for:\n $let: i # Optional, default `i`\n $from: 0 # Optional, default 0\n $step: 1 # Optional, default 1\n $to: ${{ $.colors.length }} # Required, number\nevents:\n - { type: event, colors: [red, green, blue, orange] }\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"For property",src:i(7786).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.h3,{id:"if",children:(0,r.jsx)(n.code,{children:"$if"})}),"\n",(0,r.jsx)(n.p,{children:"Conditionally render a view."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'title="if.trace.yaml"',children:"views:\n main:\n - $: circle\n radius: 1\n x: 1\n y: 1\n fill: red\n // highlight-next-line\n $if: ${{ $.direction == 'left' }}\n - $: rect\n width: 1\n height: 1\n x: 1\n y: 1\n fill: red\n // highlight-next-line\n $if: ${{ $.direction == 'right' }}\nevents:\n - { type: event, direction: left }\n - { type: event, direction: right }\n"})}),"\n",(0,r.jsx)(n.h3,{id:"info",children:(0,r.jsx)(n.code,{children:"$info"})}),"\n",(0,r.jsx)(n.p,{children:"By default, clicking on elements in the viewport will show you info about the event that rendered it. However, you can define information that will only be shown when a specific part of the event was clicked."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",metastring:'{8-11,17-20} title="info.trace.yaml',children:"views:\n main:\n - $: circle\n fill: green\n radius: 0.25\n x: ${{ $.x + $.l }}\n y: 0\n $info:\n message: This is the left marker\n position: ${{ $.x }} + ${{ $.l }} = ${{ $.x + $.l }}\n - $: circle\n fill: red\n radius: 0.25\n x: ${{ $.x + $.r }}\n y: 0\n $info:\n message: This is the right marker\n position: ${{ $.x }} + ${{ $.r }} = ${{ $.x + $.r }}\nevents:\n - { type: bound, x: 10, l: 2, r: 4 }\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Info",src:i(950).Z+"",width:"2560",height:"1600"})}),"\n",(0,r.jsx)(n.h2,{id:"api",children:"API"}),"\n",(0,r.jsxs)(n.p,{children:["The search trace API defines how you can write and structure your search trace. ",(0,r.jsx)(n.a,{href:"api/search-trace",children:"See the search trace API"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["The renderer specifies what primitives are available and how you can use them. For the built-in renderer, see the ",(0,r.jsx)(n.a,{href:"category/renderer",children:"2D renderer API here"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["Check out the ",(0,r.jsx)(n.a,{href:"https://yaml.org/spec/1.2.2/",children:"YAML 1.2.2 documentation"})," for all the ways you can write YAML."]})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},1641:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/complex-view-223a700f28d621ab7a77e34f80eb04ab.png"},7786:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/for-property-c87fdd4573ea433dddda4426707b4d3f.png"},950:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/info-f11c5f6a5fd1de5c1f3ebce102c51725.png"},8557:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/nesting-0f619bb07e3d8ac6d111b03507c058f6.png"},6234:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/simple-rendering-1f8ae5ac70f6059ca50b2f10025fa150.png"},1107:(e,n,i)=>{i.d(n,{Z:()=>r});const r=i.p+"assets/images/simple-tree-ea8b85e47ad3d4081ec880110c7651b8.png"},1151:(e,n,i)=>{i.d(n,{Z:()=>c,a:()=>a});var r=i(7294);const s={},t=r.createContext(s);function a(e){const n=r.useContext(t);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(t.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/main.128a9183.js b/assets/js/main.128a9183.js
new file mode 100644
index 0000000..c7f7b23
--- /dev/null
+++ b/assets/js/main.128a9183.js
@@ -0,0 +1,2 @@
+/*! For license information please see main.128a9183.js.LICENSE.txt */
+(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[179],{997:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(7294);var r=n(8356),o=n.n(r),a=n(6887);const i={"00a4425a":[()=>n.e(879).then(n.bind(n,528)),"@site/docs/3-visualiser/3-1-user-guide/interface.md",528],"01a85c17":[()=>Promise.all([n.e(532),n.e(4013)]).then(n.bind(n,2864)),"@theme/BlogTagsListPage",2864],"029c79a8":[()=>Promise.all([n.e(532),n.e(7987)]).then(n.bind(n,3395)),"@site/docs/4-tutorials/tile.mdx",3395],"0ec73681":[()=>n.e(5868).then(n.bind(n,4621)),"@site/docs/6-api/renderer/protocol.md",4621],"1429b7e2":[()=>n.e(8756).then(n.t.bind(n,3181,19)),"~docs/default/category-docs-tutorialsidebar-category-user-guide-a78.json",3181],"14eb3368":[()=>Promise.all([n.e(532),n.e(9817)]).then(n.bind(n,853)),"@theme/DocCategoryGeneratedIndexPage",853],15503985:[()=>n.e(4626).then(n.bind(n,7387)),"@site/docs/6-api/renderer/standard-renderers.md",7387],17896441:[()=>Promise.all([n.e(532),n.e(4885),n.e(7918)]).then(n.bind(n,2889)),"@theme/DocItem",2889],"1dec2e7b":[()=>n.e(1567).then(n.bind(n,3140)),"@site/docs/1-overview.md",3140],"1df93b7f":[()=>Promise.all([n.e(333),n.e(3237)]).then(n.bind(n,7648)),"@site/src/pages/index.tsx",7648],"30a24c52":[()=>n.e(453).then(n.t.bind(n,8605,19)),"~blog/default/blog-tags-hello-039.json",8605],"3bc5039f":[()=>n.e(4473).then(n.bind(n,297)),"@site/docs/6-api/renderer/components.md",297],"458816ec":[()=>n.e(9985).then(n.bind(n,665)),"@site/docs/3-visualiser/3-1-user-guide/steps.md",665],"46eee094":[()=>n.e(5265).then(n.t.bind(n,6187,19)),"~docs/default/category-docs-tutorialsidebar-category-contributing-2d3.json",6187],"4cd738bd":[()=>n.e(8322).then(n.t.bind(n,4876,19)),"~docs/default/category-docs-tutorialsidebar-category-tutorials-d5c.json",4876],"53fa505f":[()=>n.e(6663).then(n.t.bind(n,4469,19)),"/home/runner/work/path-visualiser.github.io/path-visualiser.github.io/.docusaurus/docusaurus-plugin-content-blog/default/plugin-route-context-module-100.json",4469],"55f71885":[()=>n.e(6277).then(n.bind(n,1562)),"@site/docs/3-visualiser/3-1-user-guide/viewport.md",1562],"5e95c892":[()=>n.e(9661).then(n.bind(n,4942)),"@theme/DocsRoot",4942],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],66406991:[()=>n.e(110).then(n.t.bind(n,711,19)),"~blog/default/blog-tags-hello-039-list.json",711],68647428:[()=>n.e(5039).then(n.bind(n,5247)),"@site/docs/3-visualiser/3-1-user-guide/tree.md",5247],"6875c492":[()=>Promise.all([n.e(532),n.e(4885),n.e(864),n.e(8610)]).then(n.bind(n,4883)),"@theme/BlogTagsPostsPage",4883],"6c945e85":[()=>n.e(1070).then(n.bind(n,8158)),"@site/docs/6-api/visualiser-adapter-protocol.md",8158],"6f3fa7c4":[()=>n.e(2378).then(n.bind(n,822)),"@site/docs/6-api/search-trace.md",822],"7163198f":[()=>Promise.all([n.e(532),n.e(7005)]).then(n.bind(n,3199)),"@site/docs/4-tutorials/single-agent-grid.mdx",3199],"814f3328":[()=>n.e(2535).then(n.t.bind(n,5641,19)),"~blog/default/blog-post-list-prop-default.json",5641],"8e97e476":[()=>n.e(5498).then(n.bind(n,1940)),"@site/docs/6-api/renderer/execution-context.md",1940],"8f3a0c2f":[()=>n.e(5234).then(n.t.bind(n,5745,19)),"/home/runner/work/path-visualiser.github.io/path-visualiser.github.io/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",5745],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],"988781e2":[()=>n.e(9493).then(n.t.bind(n,6800,19)),"~docs/default/category-docs-tutorialsidebar-category-api-2c3.json",6800],"9c7a41f4":[()=>n.e(3480).then(n.bind(n,2211)),"@site/docs/3-visualiser/overview.md",2211],"9cde8b2f":[()=>n.e(9340).then(n.t.bind(n,7537,19)),"~docs/default/category-docs-tutorialsidebar-category-posthoc-visualiser-1e7.json",7537],"9e4087bc":[()=>n.e(3608).then(n.bind(n,8151)),"@theme/BlogArchivePage",8151],a6aa9e1f:[()=>Promise.all([n.e(532),n.e(4885),n.e(864),n.e(3089)]).then(n.bind(n,9928)),"@theme/BlogListPage",9928],a7023ddc:[()=>n.e(1713).then(n.t.bind(n,3457,19)),"~blog/default/blog-tags-tags-4c2.json",3457],a7bd4aaa:[()=>n.e(8518).then(n.bind(n,604)),"@theme/DocVersionRoot",604],a94703ab:[()=>Promise.all([n.e(532),n.e(4368)]).then(n.bind(n,3699)),"@theme/DocRoot",3699],aff2e64c:[()=>n.e(644).then(n.bind(n,1032)),"@site/docs/6-api/renderer/2D-renderer.md",1032],b2b675dd:[()=>n.e(533).then(n.t.bind(n,8017,19)),"~blog/default/blog-c06.json",8017],b2f554cd:[()=>n.e(1477).then(n.t.bind(n,10,19)),"~blog/default/blog-archive-80c.json",10],b763b81d:[()=>n.e(1439).then(n.bind(n,4816)),"@site/blog/2023-11-18-todo/index.md?truncated=true",4816],b83e3081:[()=>n.e(6640).then(n.bind(n,47)),"@site/docs/3-visualiser/3-1-user-guide/settings.mdx",47],bdf3e333:[()=>n.e(4176).then(n.bind(n,1706)),"@site/docs/3-visualiser/3-1-user-guide/debugger.mdx",1706],bfde10d3:[()=>n.e(8429).then(n.t.bind(n,229,19)),"~docs/default/category-docs-tutorialsidebar-category-renderer-935.json",229],c5b27c7c:[()=>n.e(5253).then(n.t.bind(n,3769,19)),"/home/runner/work/path-visualiser.github.io/path-visualiser.github.io/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],c695d9ce:[()=>n.e(1169).then(n.bind(n,5501)),"@site/docs/3-visualiser/3-1-user-guide/layers.mdx",5501],cc37995b:[()=>n.e(8046).then(n.bind(n,198)),"@site/docs/6-api/renderer/2D-inbuilts.md",198],ccc49370:[()=>Promise.all([n.e(532),n.e(4885),n.e(864),n.e(6103)]).then(n.bind(n,324)),"@theme/BlogPostPage",324],deaa081a:[()=>n.e(4223).then(n.bind(n,4214)),"@site/blog/2023-11-18-todo/index.md",4214],e00b1594:[()=>n.e(3740).then(n.bind(n,34)),"@site/docs/7-contributing/overview.md",34],ef2725c4:[()=>n.e(6635).then(n.bind(n,957)),"@site/docs/2-search-trace.md",957]};var l=n(5893);function s(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,l.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,l.jsx)("p",{children:String(t)}),(0,l.jsx)("div",{children:(0,l.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,l.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,l.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,l.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,l.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var u=n(5304),c=n(9656);function d(e,t){if("*"===e)return o()({loading:s,loader:()=>n.e(868).then(n.bind(n,4336)),modules:["@theme/NotFound"],webpack:()=>[4336],render(e,t){const n=e.default;return(0,l.jsx)(c.z,{value:{plugin:{name:"native",id:"default"}},children:(0,l.jsx)(n,{...t})})}});const r=a[`${e}-${t}`],d={},p=[],f=[],m=(0,u.Z)(r);return Object.entries(m).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:s,loader:d,modules:p,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const l=n.split(".");l.slice(0,-1).forEach((e=>{i=i[e]})),i[l[l.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;return delete o.__context,(0,l.jsx)(c.z,{value:i,children:(0,l.jsx)(a,{...o,...n})})}})}const p=[{path:"/blog",component:d("/blog","416"),exact:!0},{path:"/blog/archive",component:d("/blog/archive","0b6"),exact:!0},{path:"/blog/tags",component:d("/blog/tags","9ee"),exact:!0},{path:"/blog/tags/hello",component:d("/blog/tags/hello","76c"),exact:!0},{path:"/blog/todo",component:d("/blog/todo","a7f"),exact:!0},{path:"/docs",component:d("/docs","94a"),routes:[{path:"/docs",component:d("/docs","32c"),routes:[{path:"/docs",component:d("/docs","127"),routes:[{path:"/docs/api/renderer/2D-inbuilts",component:d("/docs/api/renderer/2D-inbuilts","be1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/api/renderer/2D-renderer",component:d("/docs/api/renderer/2D-renderer","392"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/api/renderer/components",component:d("/docs/api/renderer/components","6af"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/api/renderer/execution-context",component:d("/docs/api/renderer/execution-context","614"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/api/renderer/protocol",component:d("/docs/api/renderer/protocol","5d8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/api/renderer/standard-renderers",component:d("/docs/api/renderer/standard-renderers","704"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/api/search-trace",component:d("/docs/api/search-trace","0eb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/api/visualiser-adapter-protocol",component:d("/docs/api/visualiser-adapter-protocol","1c5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/category/api",component:d("/docs/category/api","664"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/category/contributing",component:d("/docs/category/contributing","9f4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/category/posthoc-visualiser",component:d("/docs/category/posthoc-visualiser","7e6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/category/renderer",component:d("/docs/category/renderer","8e1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/category/tutorials",component:d("/docs/category/tutorials","f40"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/category/user-guide",component:d("/docs/category/user-guide","2a4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/contributing/overview",component:d("/docs/contributing/overview","c6a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/overview",component:d("/docs/overview","285"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/search-trace",component:d("/docs/search-trace","4b0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/tutorials/single-agent-grid",component:d("/docs/tutorials/single-agent-grid","33d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/tutorials/tile",component:d("/docs/tutorials/tile","c5c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/visualiser/3-1-user-guide/debugger",component:d("/docs/visualiser/3-1-user-guide/debugger","2da"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/visualiser/3-1-user-guide/interface",component:d("/docs/visualiser/3-1-user-guide/interface","5a3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/visualiser/3-1-user-guide/layers",component:d("/docs/visualiser/3-1-user-guide/layers","c0e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/visualiser/3-1-user-guide/settings",component:d("/docs/visualiser/3-1-user-guide/settings","9ec"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/visualiser/3-1-user-guide/steps",component:d("/docs/visualiser/3-1-user-guide/steps","256"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/visualiser/3-1-user-guide/tree",component:d("/docs/visualiser/3-1-user-guide/tree","4cf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/visualiser/3-1-user-guide/viewport",component:d("/docs/visualiser/3-1-user-guide/viewport","b93"),exact:!0,sidebar:"tutorialSidebar"},{path:"/docs/visualiser/overview",component:d("/docs/visualiser/overview","d58"),exact:!0,sidebar:"tutorialSidebar"}]}]}]},{path:"/",component:d("/","c1c"),exact:!0},{path:"*",component:d("*")}]},5351:(e,t,n)=>{var r,o;!function(){var a,i,l,s,u,c,d,p,f,m,h,g,y,v,b,w,k,S,x,_,E,O,j,C,P,T,I,A,N,L,R=function(e){var t=new R.Builder;return t.pipeline.add(R.trimmer,R.stopWordFilter,R.stemmer),t.searchPipeline.add(R.stemmer),e.call(t,t),t.build()};R.version="2.3.9",R.utils={},R.utils.warn=(a=this,function(e){a.console&&console.warn&&console.warn(e)}),R.utils.asString=function(e){return null==e?"":e.toString()},R.utils.clone=function(e){if(null==e)return e;for(var t=Object.create(null),n=Object.keys(e),r=0;rYour Docusaurus site did not load properly.
\nA very common reason is a wrong site baseUrl configuration.
\nCurrent configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\nWe suggest trying baseUrl =
\n.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},2885:(e,t,n)=>{const r=n(9901),o=n(9642),a=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...a,...Object.keys(Prism.languages)];o(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(6500).resolve(t)],delete Prism.languages[e],n(6500)(t),a.add(e)}))}i.silent=!1,e.exports=i},6854:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,o,a){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof a&&!a(e))return e;for(var o,l=i.length;-1!==n.code.indexOf(o=t(r,l));)++l;return i[l]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var o=0,a=Object.keys(n.tokenStack);!function i(l){for(var s=0;sYour Docusaurus site did not load properly.
\nA very common reason is a wrong site baseUrl configuration.
\nCurrent configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\nWe suggest trying baseUrl =
\n