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 close 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
+"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/runtime~main.760d47b8.js b/assets/js/runtime~main.af8c9e55.js
similarity index 98%
rename from assets/js/runtime~main.760d47b8.js
rename to assets/js/runtime~main.af8c9e55.js
index a368593..9d13912 100644
--- a/assets/js/runtime~main.760d47b8.js
+++ b/assets/js/runtime~main.af8c9e55.js
@@ -1 +1 @@
-(()=>{"use strict";var e,a,c,t,r,f={},d={};function o(e){var a=d[e];if(void 0!==a)return a.exports;var c=d[e]={id:e,loaded:!1,exports:{}};return f[e].call(c.exports,c,c.exports,o),c.loaded=!0,c.exports}o.m=f,o.c=d,e=[],o.O=(a,c,t,r)=>{if(!c){var f=1/0;for(i=0;iclearControl when elements should be cleared.
| Value | Example | Description |
|---|---|---|
false (default) | clear: false | Elements will remain once drawn. |
true | clear: true | Elements will clear immediately after the step they're drawn. |
string | clear: closing | Clear once the event of a particular type (e.g. closing) is encountered. |
views:
main:
- $: circle
x: ${{ $.step }}
y: 1
radius: 0.25
fill: ${{ colors.blue }}
clear: close
events:
- { type: open, id: 1 }
- { type: generate, id: 1 }
- { type: close, id: 1, message: Open and close events should be cleared }
views:
main:
- $: circle
x: ${{ $.step }}
y: 1
radius: 0.25
fill: ${{ colors.blue }}
clear: close
events:
- { type: open, id: 1 }
- { type: generate, id: 1 }
- { type: close, id: 1, message: Open and generate events should be cleared }
$forRepeat a view based on a value.
views:
main:
- $: circle
x: ${{ $.i }}
y: 1
radius: 0.25
fill: ${{ $.colors[$.i] }}
$info:
color: ${{ $.colors[$.i] }}
$for:
$let: i # Optional, default `i`
$from: 0 # Optional, default 0
$step: 1 # Optional, default 1
$to: ${{ $.colors.length }} # Required, number
events:
- { type: event, colors: [red, green, blue, orange] }