[{"data":1,"prerenderedAt":284},["ShallowReactive",2],{"$ff7ECtcw76OkMlK49-tkRLvynzyjMuYFk1Qy3YZs71yQ":3},{"newThing":4,"project":5,"cycle":9,"sections":23,"threads":235,"otherDocs":236,"documents":237,"images":238,"archiveItems":281,"links":282},"Composable flow decorators — ArrowIndicator and PulseIndicator",{"id":6,"label":7,"liveBase":8},"qmap","Qmap",null,{"id":10,"num":11,"dir":12,"name":13,"title":14,"focus":15,"status":16,"statusNote":8,"created":17,"completed":8,"mode":8,"report":8,"recordless":18,"thumbnail":19,"imageCount":20,"artifactCount":21,"lastActivity":22,"hasPickup":18,"hasInitialPrompt":18},"c20",20,"c20.dataflow-arrows","dataflow-arrows","Dataflow Arrows","Directional arrow indicators on dataflow lines","unlisted","2026-03-30",false,"\u002Fcycles\u002Fqmap\u002Fc20-arrows-distributed.png",10,0,"2026-08-15",[24,38,48,188],{"key":25,"title":26,"empty":18,"ast":27},"why","Why",{"type":28,"children":29},"root",[30],{"type":31,"tag":32,"props":33,"children":34},"element","p",{},[35],{"type":36,"value":37},"text","Dashed-line flows show direction via dash offset, but the cue is subtle and can be ambiguous — especially when flows cross or at certain camera angles. Directional arrows make flow direction immediately obvious. This cycle compared rendering approaches to find the best balance of clarity, performance, and fit with the existing line style.",{"key":39,"title":40,"empty":18,"ast":41},"objective","Objective",{"type":28,"children":42},[43],{"type":31,"tag":32,"props":44,"children":45},{},[46],{"type":36,"value":47},"Prototype arrow strategies on a bezier flow curve in a standalone Three.js harness, then productionize the winners as opt-in decorators on LineFlow with full config-schema tuning.",{"key":49,"title":50,"empty":18,"ast":51},"key-changes","Key Changes",{"type":28,"children":52},[53],{"type":31,"tag":54,"props":55,"children":56},"ul",{},[57],{"type":31,"tag":58,"props":59,"children":60},"li",{},[61,63,70,72],{"type":36,"value":62},"2026-04-16 — Landed in the ",{"type":31,"tag":64,"props":65,"children":67},"code",{"className":66},[],[68],{"type":36,"value":69},"c18-c22",{"type":36,"value":71}," batch commit (work recorded as starting 2026-03-30):\n",{"type":31,"tag":54,"props":73,"children":74},{},[75,88,115,134,139,160],{"type":31,"tag":58,"props":76,"children":77},{},[78,80,86],{"type":36,"value":79},"Four experimental strategies in ",{"type":31,"tag":64,"props":81,"children":83},{"className":82},[],[84],{"type":36,"value":85},"dev\u002Fexperiments\u002Fc20.dataflow-arrows\u002Fstrategies\u002F",{"type":36,"value":87},": ConeArrows (one draw call per cone), InstancedConeArrows (single draw call — performance winner), SpriteArrows (camera-facing, always readable), SlidingArrow (single cone with comet trail — promoted to ArrowIndicator sliding mode)",{"type":31,"tag":58,"props":89,"children":90},{},[91,97,99,105,107,113],{"type":31,"tag":64,"props":92,"children":94},{"className":93},[],[95],{"type":36,"value":96},"src\u002Fflows\u002FArrowIndicator.js",{"type":36,"value":98}," — cone-mesh directional arrows as a decorator on LineFlow; ",{"type":31,"tag":64,"props":100,"children":102},{"className":101},[],[103],{"type":36,"value":104},"distributed",{"type":36,"value":106}," and ",{"type":31,"tag":64,"props":108,"children":110},{"className":109},[],[111],{"type":36,"value":112},"sliding",{"type":36,"value":114}," modes; tangent-aligned via quaternion rotation",{"type":31,"tag":58,"props":116,"children":117},{},[118,124,126,132],{"type":31,"tag":64,"props":119,"children":121},{"className":120},[],[122],{"type":36,"value":123},"src\u002Fflows\u002FPulseIndicator.js",{"type":36,"value":125}," — gradient pulse sweep via TubeGeometry + custom ShaderMaterial (",{"type":31,"tag":64,"props":127,"children":129},{"className":128},[],[130],{"type":36,"value":131},"fract(uPulse - vT)",{"type":36,"value":133}," moving band, multi-pulse support)",{"type":31,"tag":58,"props":135,"children":136},{},[137],{"type":36,"value":138},"LineFlow integration — both decorators opt-in, wired into update\u002Frebuild\u002FsetState\u002Fdispose; arrow color syncs with flow state; live setters for speed\u002Fopacity",{"type":31,"tag":58,"props":140,"children":141},{},[142,144,150,152,158],{"type":36,"value":143},"Config schema expansion in ",{"type":31,"tag":64,"props":145,"children":147},{"className":146},[],[148],{"type":36,"value":149},"qmapConfigSchema.js",{"type":36,"value":151}," — full line\u002Farrow\u002Fpulse control set, plus the ",{"type":31,"tag":64,"props":153,"children":155},{"className":154},[],[156],{"type":36,"value":157},"visibleWhen",{"type":36,"value":159}," field so the Configurator hides sub-controls when a parent toggle is off",{"type":31,"tag":58,"props":161,"children":162},{},[163,165,171,173,179,180,186],{"type":36,"value":164},"QMap props (",{"type":31,"tag":64,"props":166,"children":168},{"className":167},[],[169],{"type":36,"value":170},"showArrows",{"type":36,"value":172},", ",{"type":31,"tag":64,"props":174,"children":176},{"className":175},[],[177],{"type":36,"value":178},"showPulse",{"type":36,"value":172},{"type":31,"tag":64,"props":181,"children":183},{"className":182},[],[184],{"type":36,"value":185},"showLine",{"type":36,"value":187},", line dash\u002Fopacity settings) with live watchers and a re-apply pattern for highlighted dataflows",{"key":189,"title":190,"empty":18,"ast":191},"outcome","Outcome",{"type":28,"children":192},[193],{"type":31,"tag":32,"props":194,"children":195},{},[196,198,204,205,211,212,218,219,225,227,233],{"type":36,"value":197},"Two production-ready decorators (ArrowIndicator + PulseIndicator) integrated into LineFlow and absorbed into the dataflow config schema, tunable via DevConfigurator. The decorator lifecycle (",{"type":31,"tag":64,"props":199,"children":201},{"className":200},[],[202],{"type":36,"value":203},"attach",{"type":36,"value":172},{"type":31,"tag":64,"props":206,"children":208},{"className":207},[],[209],{"type":36,"value":210},"rebuild",{"type":36,"value":172},{"type":31,"tag":64,"props":213,"children":215},{"className":214},[],[216],{"type":36,"value":217},"update",{"type":36,"value":172},{"type":31,"tag":64,"props":220,"children":222},{"className":221},[],[223],{"type":36,"value":224},"dispose",{"type":36,"value":226},") proved easy to extend. c21 consolidated this further: LineFlow gained ",{"type":31,"tag":64,"props":228,"children":230},{"className":229},[],[231],{"type":36,"value":232},"applyConfig()",{"type":36,"value":234}," and became fully self-managing, with indicators created exclusively through it and QMap's per-property flow watchers removed.",[],[],[],[239,246,250,253,257,261,265,269,273,277],{"src":240,"kind":241,"order":242,"caption":243,"capturedAt":244,"route":245},"\u002Fcycles\u002Fqmap\u002Fc20-line.png","hero",34,"The bare flow line","2026-08-15T23:43:05.086Z","\u002Fexperiments\u002Fc20.dataflow-arrows\u002F",{"src":247,"kind":241,"order":248,"caption":249,"capturedAt":244,"route":245},"\u002Fcycles\u002Fqmap\u002Fc20-dashed.png",35,"Dashed line — direction by drift",{"src":19,"kind":241,"order":251,"caption":252,"capturedAt":244,"route":245},36,"Distributed arrows riding the curve",{"src":254,"kind":241,"order":255,"caption":256,"capturedAt":244,"route":245},"\u002Fcycles\u002Fqmap\u002Fc20-arrows-sliding.png",37,"Sliding arrow with decay trail",{"src":258,"kind":241,"order":259,"caption":260,"capturedAt":244,"route":245},"\u002Fcycles\u002Fqmap\u002Fc20-pulse-comet.png",38,"Comet pulse",{"src":262,"kind":241,"order":263,"caption":264,"capturedAt":244,"route":245},"\u002Fcycles\u002Fqmap\u002Fc20-pulse-mountain.png",39,"Mountain pulse — the shader wave",{"src":266,"kind":241,"order":267,"caption":268,"capturedAt":244,"route":245},"\u002Fcycles\u002Fqmap\u002Fc20-cone-meshes.png",40,"Experimental: cone meshes",{"src":270,"kind":241,"order":271,"caption":272,"capturedAt":244,"route":245},"\u002Fcycles\u002Fqmap\u002Fc20-sprite-arrows.png",41,"Experimental: sprite arrows",{"src":274,"kind":241,"order":275,"caption":276,"capturedAt":244,"route":245},"\u002Fcycles\u002Fqmap\u002Fc20-high-arc.png",42,"Curve height 4 — the ballistic arc",{"src":278,"kind":241,"order":279,"capturedAt":280,"route":245},"\u002Fcycles\u002Fqmap\u002Fc20-dataflow-arrows.png",4999,"2026-08-15T16:38:24.009Z",[],[283],{"route":245,"href":8},1794599360400]