[{"data":1,"prerenderedAt":534},["ShallowReactive",2],{"cycle-doc-qmap-c16-PLAN.md":3},{"cycle":4,"project":7,"path":10,"title":11,"toc":12,"ast":18},{"id":5,"title":6},"c16","View Contexts",{"id":8,"label":9},"qmap","Qmap","PLAN.md","c16.view-contexts — Cycle Plan",[13,14,15,16,17],"Context","What c16 Explores","Steps","Verification","Key Files to Reference",{"type":19,"children":20},"root",[21,29,44,49,60,80,85,95,102,107,160,166,215,221,257,263,275,281,330,335,416,421,460,465],{"type":22,"tag":23,"props":24,"children":26},"element","h2",{"id":25},"context",[27],{"type":28,"value":13},"text",{"type":22,"tag":30,"props":31,"children":32},"p",{},[33,35,42],{"type":28,"value":34},"QMap is now a production component (c15) with a props-driven API: ",{"type":22,"tag":36,"props":37,"children":39},"code",{"className":38},[],[40],{"type":28,"value":41},"\u003CQMap :actors :connections :groupBy \u002F>",{"type":28,"value":43},". But different consumers need fundamentally different configurations — a policy violation page needs a focused, non-interactive view highlighting specific flows; the marketing site needs an animated demo; a worker needs to render a static image for a report.",{"type":22,"tag":30,"props":45,"children":46},{},[47],{"type":28,"value":48},"The initial prompt asks: what's the best way to codify these \"views\" for simple use?",{"type":22,"tag":30,"props":50,"children":51},{},[52,58],{"type":22,"tag":53,"props":54,"children":55},"strong",{},[56],{"type":28,"value":57},"Answer:",{"type":28,"value":59}," Wrapper components. Each view is its own component that internally configures QMap with the right defaults. The system must support:",{"type":22,"tag":61,"props":62,"children":63},"ul",{},[64,70,75],{"type":22,"tag":65,"props":66,"children":67},"li",{},[68],{"type":28,"value":69},"Same data, different framing (security audit vs traffic overview)",{"type":22,"tag":65,"props":71,"children":72},{},[73],{"type":28,"value":74},"Different data shapes entirely (policy violation vs network map)",{"type":22,"tag":65,"props":76,"children":77},{},[78],{"type":28,"value":79},"Interactive browser use AND headless\u002Fworker image generation",{"type":22,"tag":23,"props":81,"children":83},{"id":82},"what-c16-explores",[84],{"type":28,"value":14},{"type":22,"tag":30,"props":86,"children":87},{},[88,93],{"type":22,"tag":53,"props":89,"children":90},{},[91],{"type":28,"value":92},"Core question:",{"type":28,"value":94}," What is the right \"view context\" abstraction that wrapper components use to configure QMap?",{"type":22,"tag":96,"props":97,"children":99},"h3",{"id":98},"view-context-shape-to-be-designed-in-the-experiment",[100],{"type":28,"value":101},"View Context Shape (to be designed in the experiment)",{"type":22,"tag":30,"props":103,"children":104},{},[105],{"type":28,"value":106},"A view context likely includes:",{"type":22,"tag":61,"props":108,"children":109},{},[110,120,130,140,150],{"type":22,"tag":65,"props":111,"children":112},{},[113,118],{"type":22,"tag":53,"props":114,"children":115},{},[116],{"type":28,"value":117},"Data selection",{"type":28,"value":119}," — which actors\u002Fconnections to show, filtering\u002Fhighlighting rules",{"type":22,"tag":65,"props":121,"children":122},{},[123,128],{"type":22,"tag":53,"props":124,"children":125},{},[126],{"type":28,"value":127},"Layout",{"type":28,"value":129}," — groupBy config, camera position\u002Fangle, frustumSize",{"type":22,"tag":65,"props":131,"children":132},{},[133,138],{"type":22,"tag":53,"props":134,"children":135},{},[136],{"type":28,"value":137},"Visual treatment",{"type":28,"value":139}," — highlight colors, flow emphasis, selection behavior",{"type":22,"tag":65,"props":141,"children":142},{},[143,148],{"type":22,"tag":53,"props":144,"children":145},{},[146],{"type":28,"value":147},"Interactivity",{"type":28,"value":149}," — selectable, camera controls enabled, click behavior",{"type":22,"tag":65,"props":151,"children":152},{},[153,158],{"type":22,"tag":53,"props":154,"children":155},{},[156],{"type":28,"value":157},"Rendering mode",{"type":28,"value":159}," — interactive (canvas in DOM) vs snapshot (offscreen → image)",{"type":22,"tag":96,"props":161,"children":163},{"id":162},"experiment-strategies-to-explore",[164],{"type":28,"value":165},"Experiment Strategies to Explore",{"type":22,"tag":167,"props":168,"children":169},"ol",{},[170,188,205],{"type":22,"tag":65,"props":171,"children":172},{},[173,178,180,186],{"type":22,"tag":53,"props":174,"children":175},{},[176],{"type":28,"value":177},"Strategy A: Config object",{"type":28,"value":179}," — ",{"type":22,"tag":36,"props":181,"children":183},{"className":182},[],[184],{"type":28,"value":185},"createViewContext(type, overrides)",{"type":28,"value":187}," returns a plain config object. Wrapper components spread it as QMap props.",{"type":22,"tag":65,"props":189,"children":190},{},[191,196,197,203],{"type":22,"tag":53,"props":192,"children":193},{},[194],{"type":28,"value":195},"Strategy B: Composable",{"type":28,"value":179},{"type":22,"tag":36,"props":198,"children":200},{"className":199},[],[201],{"type":28,"value":202},"useViewContext(type)",{"type":28,"value":204}," returns reactive refs + methods. Wrapper components get computed props that respond to data changes.",{"type":22,"tag":65,"props":206,"children":207},{},[208,213],{"type":22,"tag":53,"props":209,"children":210},{},[211],{"type":28,"value":212},"Strategy C: Slot-based",{"type":28,"value":214}," — QMap exposes named slots\u002Frender hooks. Wrapper components inject behavior via slots rather than props.",{"type":22,"tag":96,"props":216,"children":218},{"id":217},"example-wrapper-components-to-prototype",[219],{"type":28,"value":220},"Example Wrapper Components to Prototype",{"type":22,"tag":167,"props":222,"children":223},{},[224,235,246],{"type":22,"tag":65,"props":225,"children":226},{},[227,233],{"type":22,"tag":36,"props":228,"children":230},{"className":229},[],[231],{"type":28,"value":232},"\u003CQMapPolicyViolation>",{"type":28,"value":234}," — Takes a policy violation payload, highlights offending actors\u002Fflows in red, dims everything else, non-interactive, tight camera framing",{"type":22,"tag":65,"props":236,"children":237},{},[238,244],{"type":22,"tag":36,"props":239,"children":241},{"className":240},[],[242],{"type":28,"value":243},"\u003CQMapNetworkOverview>",{"type":28,"value":245}," — Full actor set, interactive, grouping controls exposed",{"type":22,"tag":65,"props":247,"children":248},{},[249,255],{"type":22,"tag":36,"props":250,"children":252},{"className":251},[],[253],{"type":28,"value":254},"\u003CQMapDemo>",{"type":28,"value":256}," — Curated actors, auto-rotating camera, scripted selection sequence for marketing",{"type":22,"tag":96,"props":258,"children":260},{"id":259},"files-to-create",[261],{"type":28,"value":262},"Files to Create",{"type":22,"tag":264,"props":265,"children":269},"pre",{"className":266,"code":268,"language":28},[267],"language-text","dev\u002Fexperiments\u002Fc16.view-contexts\u002F\n├── ExperimentsApp.vue              # Strategy switcher + demo harness\n├── shared\u002F\n│   ├── ExperimentBase.js           # Copy from c14 (useExperiment composable)\n│   ├── viewContext.js              # Core abstraction: createViewContext()\n│   ├── views\u002F\n│   │   ├── policyViolation.js      # View config for policy violation\n│   │   ├── networkOverview.js      # View config for full network map\n│   │   └── demo.js                 # View config for marketing demo\n│   └── data\u002F\n│       ├── policyViolationData.js  # Sample violation payload\n│       └── demoData.js             # Curated demo actors\n├── components\u002F\n│   ├── QMapPolicyViolation.vue     # Wrapper: policy violation view\n│   ├── QMapNetworkOverview.vue     # Wrapper: interactive overview\n│   └── QMapDemo.vue                # Wrapper: marketing demo\n",[270],{"type":22,"tag":36,"props":271,"children":273},{"__ignoreMap":272},"",[274],{"type":28,"value":268},{"type":22,"tag":96,"props":276,"children":278},{"id":277},"key-design-questions-to-answer",[279],{"type":28,"value":280},"Key Design Questions to Answer",{"type":22,"tag":167,"props":282,"children":283},{},[284,289,317],{"type":22,"tag":65,"props":285,"children":286},{},[287],{"type":28,"value":288},"How much of the view config is \"QMap props\" vs \"new behavior\"? (e.g., camera auto-animation isn't a QMap prop today)",{"type":22,"tag":65,"props":290,"children":291},{},[292,294,300,302,308,309,315],{"type":28,"value":293},"Should QMap gain new props (e.g., ",{"type":22,"tag":36,"props":295,"children":297},{"className":296},[],[298],{"type":28,"value":299},"highlights",{"type":28,"value":301},", ",{"type":22,"tag":36,"props":303,"children":305},{"className":304},[],[306],{"type":28,"value":307},"cameraPreset",{"type":28,"value":301},{"type":22,"tag":36,"props":310,"children":312},{"className":311},[],[313],{"type":28,"value":314},"interactive",{"type":28,"value":316},") or should wrapper components manipulate it externally?",{"type":22,"tag":65,"props":318,"children":319},{},[320,322,328],{"type":28,"value":321},"How does snapshot\u002Fimage rendering work? (offscreen canvas, ",{"type":22,"tag":36,"props":323,"children":325},{"className":324},[],[326],{"type":28,"value":327},"renderer.domElement.toDataURL()",{"type":28,"value":329},", or headless Three.js?)",{"type":22,"tag":23,"props":331,"children":333},{"id":332},"steps",[334],{"type":28,"value":15},{"type":22,"tag":167,"props":336,"children":337},{},[338,356,366,376,386,396,406],{"type":22,"tag":65,"props":339,"children":340},{},[341,346,348,354],{"type":22,"tag":53,"props":342,"children":343},{},[344],{"type":28,"value":345},"Scaffold c16",{"type":28,"value":347}," — Create ",{"type":22,"tag":36,"props":349,"children":351},{"className":350},[],[352],{"type":28,"value":353},"dev\u002Fexperiments\u002Fc16.view-contexts\u002F",{"type":28,"value":355}," with ExperimentsApp.vue and shared base",{"type":22,"tag":65,"props":357,"children":358},{},[359,364],{"type":22,"tag":53,"props":360,"children":361},{},[362],{"type":28,"value":363},"Design viewContext.js",{"type":28,"value":365}," — The core abstraction. Start with Strategy A (config object), evolve if needed",{"type":22,"tag":65,"props":367,"children":368},{},[369,374],{"type":22,"tag":53,"props":370,"children":371},{},[372],{"type":28,"value":373},"Build policyViolation view",{"type":28,"value":375}," — Simplest case: filtered data, highlight config, non-interactive",{"type":22,"tag":65,"props":377,"children":378},{},[379,384],{"type":22,"tag":53,"props":380,"children":381},{},[382],{"type":28,"value":383},"Build networkOverview view",{"type":28,"value":385}," — Interactive case: full data, grouping, selection",{"type":22,"tag":65,"props":387,"children":388},{},[389,394],{"type":22,"tag":53,"props":390,"children":391},{},[392],{"type":28,"value":393},"Build demo view",{"type":28,"value":395}," — Scripted animation case: auto-play, curated data",{"type":22,"tag":65,"props":397,"children":398},{},[399,404],{"type":22,"tag":53,"props":400,"children":401},{},[402],{"type":28,"value":403},"Wire ExperimentsApp",{"type":28,"value":405}," — Toggle between the three wrapper components",{"type":22,"tag":65,"props":407,"children":408},{},[409,414],{"type":22,"tag":53,"props":410,"children":411},{},[412],{"type":28,"value":413},"Document",{"type":28,"value":415}," — Write CYCLE.md with findings on which abstraction works best",{"type":22,"tag":23,"props":417,"children":419},{"id":418},"verification",[420],{"type":28,"value":16},{"type":22,"tag":61,"props":422,"children":423},{},[424,435,440,445,450,455],{"type":22,"tag":65,"props":425,"children":426},{},[427,433],{"type":22,"tag":36,"props":428,"children":430},{"className":429},[],[431],{"type":28,"value":432},"npm run dev",{"type":28,"value":434}," → navigate to c16 experiment page",{"type":22,"tag":65,"props":436,"children":437},{},[438],{"type":28,"value":439},"Toggle between three wrapper components in the experiment harness",{"type":22,"tag":65,"props":441,"children":442},{},[443],{"type":28,"value":444},"Each wrapper should render QMap with its distinct visual treatment",{"type":22,"tag":65,"props":446,"children":447},{},[448],{"type":28,"value":449},"Policy violation: focused, highlighted actors, no interaction",{"type":22,"tag":65,"props":451,"children":452},{},[453],{"type":28,"value":454},"Network overview: full interactive map",{"type":22,"tag":65,"props":456,"children":457},{},[458],{"type":28,"value":459},"Demo: auto-animated sequence",{"type":22,"tag":23,"props":461,"children":463},{"id":462},"key-files-to-reference",[464],{"type":28,"value":17},{"type":22,"tag":61,"props":466,"children":467},{},[468,479,490,501,512,523],{"type":22,"tag":65,"props":469,"children":470},{},[471,477],{"type":22,"tag":36,"props":472,"children":474},{"className":473},[],[475],{"type":28,"value":476},"src\u002Fcomponents\u002FQMap.vue",{"type":28,"value":478}," — Current props API (actors, connections, groupBy, selectable, etc.)",{"type":22,"tag":65,"props":480,"children":481},{},[482,488],{"type":22,"tag":36,"props":483,"children":485},{"className":484},[],[486],{"type":28,"value":487},"src\u002Fcomposables\u002FuseSceneReactivity.js",{"type":28,"value":489}," — How props drive scene updates",{"type":22,"tag":65,"props":491,"children":492},{},[493,499],{"type":22,"tag":36,"props":494,"children":496},{"className":495},[],[497],{"type":28,"value":498},"src\u002Fcomposables\u002FuseActorSelection.js",{"type":28,"value":500}," — Selection\u002Fhighlight system",{"type":22,"tag":65,"props":502,"children":503},{},[504,510],{"type":22,"tag":36,"props":505,"children":507},{"className":506},[],[508],{"type":28,"value":509},"src\u002Fcore\u002FCameraControls.js",{"type":28,"value":511}," — Camera manipulation API",{"type":22,"tag":65,"props":513,"children":514},{},[515,521],{"type":22,"tag":36,"props":516,"children":518},{"className":517},[],[519],{"type":28,"value":520},"dev\u002Fexperiments\u002Fc14.actor-expansion\u002FExperimentsApp.vue",{"type":28,"value":522}," — Latest experiment harness pattern",{"type":22,"tag":65,"props":524,"children":525},{},[526,532],{"type":22,"tag":36,"props":527,"children":529},{"className":528},[],[530],{"type":28,"value":531},"dev\u002Fexperiments\u002Fc14.actor-expansion\u002Fshared\u002FExperimentBase.js",{"type":28,"value":533}," — Composable to copy",1794599378807]