[{"data":1,"prerenderedAt":1517},["ShallowReactive",2],{"$fOoTcaSERxxWL2TyawSibiEnJwlmm7bzWHDogvgMoES0":3},{"newThing":4,"project":5,"cycle":9,"sections":21,"threads":1488,"otherDocs":1489,"documents":1490,"images":1491,"archiveItems":1514,"links":1515},"Google-Maps-style semantic zoom — Company → Teams → Apps by clicking",{"id":6,"label":7,"liveBase":8},"qmap","Qmap",null,{"id":10,"num":11,"dir":12,"name":13,"title":13,"focus":8,"status":14,"statusNote":8,"created":15,"completed":8,"mode":8,"report":8,"recordless":16,"thumbnail":17,"imageCount":18,"artifactCount":19,"lastActivity":20,"hasPickup":16,"hasInitialPrompt":16},"c4",4,"c4.semantic-zoom","semantic-zoom","archived","2026-03-23",false,"\u002Fcycles\u002Fqmap\u002Fc4-apps.png",5,0,"2026-08-15",[22,40,150,280,343,782,854,926,966,1300,1330],{"key":23,"title":24,"empty":16,"ast":25},"extra","Summary",{"type":26,"children":27},"root",[28,36],{"type":29,"tag":30,"props":31,"children":32},"element","p",{},[33],{"type":34,"value":35},"text","Exploring hierarchical decomposition and semantic zoom—how the visualization changes at different abstraction levels, from company-wide aggregates down to individual actors.",{"type":29,"tag":37,"props":38,"children":39},"hr",{},[],{"key":23,"title":41,"empty":16,"ast":42},"Core Concept",{"type":26,"children":43},[44,49,136,147],{"type":29,"tag":30,"props":45,"children":46},{},[47],{"type":34,"value":48},"Like Google Maps, the level of detail changes with scale:",{"type":29,"tag":50,"props":51,"children":52},"table",{},[53,77],{"type":29,"tag":54,"props":55,"children":56},"thead",{},[57],{"type":29,"tag":58,"props":59,"children":60},"tr",{},[61,67,72],{"type":29,"tag":62,"props":63,"children":64},"th",{},[65],{"type":34,"value":66},"Zoom Level",{"type":29,"tag":62,"props":68,"children":69},{},[70],{"type":34,"value":71},"Abstraction",{"type":29,"tag":62,"props":73,"children":74},{},[75],{"type":34,"value":76},"What's Shown",{"type":29,"tag":78,"props":79,"children":80},"tbody",{},[81,100,118],{"type":29,"tag":58,"props":82,"children":83},{},[84,90,95],{"type":29,"tag":85,"props":86,"children":87},"td",{},[88],{"type":34,"value":89},"Global",{"type":29,"tag":85,"props":91,"children":92},{},[93],{"type":34,"value":94},"Company-wide",{"type":29,"tag":85,"props":96,"children":97},{},[98],{"type":34,"value":99},"Aggregated traffic flows between companies",{"type":29,"tag":58,"props":101,"children":102},{},[103,108,113],{"type":29,"tag":85,"props":104,"children":105},{},[106],{"type":34,"value":107},"Regional",{"type":29,"tag":85,"props":109,"children":110},{},[111],{"type":34,"value":112},"Team-level",{"type":29,"tag":85,"props":114,"children":115},{},[116],{"type":34,"value":117},"Teams as containers, inter-team flows",{"type":29,"tag":58,"props":119,"children":120},{},[121,126,131],{"type":29,"tag":85,"props":122,"children":123},{},[124],{"type":34,"value":125},"Local",{"type":29,"tag":85,"props":127,"children":128},{},[129],{"type":34,"value":130},"Individual actors",{"type":29,"tag":85,"props":132,"children":133},{},[134],{"type":34,"value":135},"Apps, services, databases with detailed flows",{"type":29,"tag":30,"props":137,"children":138},{},[139,145],{"type":29,"tag":140,"props":141,"children":142},"strong",{},[143],{"type":34,"value":144},"Key insight:",{"type":34,"value":146}," The \"inside\" doesn't need to fit the \"outside\"—this is semantic space, not physical space. A team cube can expand to reveal 50 apps that take up more space than the original cube.",{"type":29,"tag":37,"props":148,"children":149},{},[],{"key":23,"title":151,"empty":16,"ast":152},"Nested Actors",{"type":26,"children":153},[154,161,174,180,241,247,252,277],{"type":29,"tag":155,"props":156,"children":158},"h3",{"id":157},"composite-pattern",[159],{"type":34,"value":160},"Composite Pattern",{"type":29,"tag":162,"props":163,"children":167},"pre",{"className":164,"code":166,"language":34},[165],"language-text","Actor (base)\n├── LeafActor (app, service, database, vendor)\n└── CompositeActor (team, company, region...)\n    └── children: Actor[]  ← can be leaves OR other composites\n",[168],{"type":29,"tag":169,"props":170,"children":172},"code",{"__ignoreMap":171},"",[173],{"type":34,"value":166},{"type":29,"tag":155,"props":175,"children":177},{"id":176},"visual-states",[178],{"type":34,"value":179},"Visual States",{"type":29,"tag":50,"props":181,"children":182},{},[183,199],{"type":29,"tag":54,"props":184,"children":185},{},[186],{"type":29,"tag":58,"props":187,"children":188},{},[189,194],{"type":29,"tag":62,"props":190,"children":191},{},[192],{"type":34,"value":193},"State",{"type":29,"tag":62,"props":195,"children":196},{},[197],{"type":34,"value":198},"Representation",{"type":29,"tag":78,"props":200,"children":201},{},[202,215,228],{"type":29,"tag":58,"props":203,"children":204},{},[205,210],{"type":29,"tag":85,"props":206,"children":207},{},[208],{"type":34,"value":209},"Collapsed",{"type":29,"tag":85,"props":211,"children":212},{},[213],{"type":34,"value":214},"Simplified cube with label + child count badge",{"type":29,"tag":58,"props":216,"children":217},{},[218,223],{"type":29,"tag":85,"props":219,"children":220},{},[221],{"type":34,"value":222},"Expanded",{"type":29,"tag":85,"props":224,"children":225},{},[226],{"type":34,"value":227},"Boundary outline containing positioned children",{"type":29,"tag":58,"props":229,"children":230},{},[231,236],{"type":29,"tag":85,"props":232,"children":233},{},[234],{"type":34,"value":235},"Leaf",{"type":29,"tag":85,"props":237,"children":238},{},[239],{"type":34,"value":240},"Full detail mesh (dodecahedron, prism, etc. from c2)",{"type":29,"tag":155,"props":242,"children":244},{"id":243},"container-fracturing",[245],{"type":34,"value":246},"Container Fracturing",{"type":29,"tag":30,"props":248,"children":249},{},[250],{"type":34,"value":251},"When drilling into a composite:",{"type":29,"tag":253,"props":254,"children":255},"ol",{},[256,262,267,272],{"type":29,"tag":257,"props":258,"children":259},"li",{},[260],{"type":34,"value":261},"Siblings fade\u002Fmute (context preserved but de-emphasized)",{"type":29,"tag":257,"props":263,"children":264},{},[265],{"type":34,"value":266},"Target cube \"fractures\" or splits",{"type":29,"tag":257,"props":268,"children":269},{},[270],{"type":34,"value":271},"Children emerge and settle into positions",{"type":29,"tag":257,"props":273,"children":274},{},[275],{"type":34,"value":276},"Flows re-route from aggregate to detailed endpoints",{"type":29,"tag":37,"props":278,"children":279},{},[],{"key":23,"title":281,"empty":16,"ast":282},"Flow Transformation",{"type":26,"children":283},[284,289,335,340],{"type":29,"tag":30,"props":285,"children":286},{},[287],{"type":34,"value":288},"Flows adapt to the current zoom level:",{"type":29,"tag":290,"props":291,"children":292},"ul",{},[293,309],{"type":29,"tag":257,"props":294,"children":295},{},[296,301,303],{"type":29,"tag":140,"props":297,"children":298},{},[299],{"type":34,"value":300},"Collapsed view:",{"type":34,"value":302}," Single thick line ",{"type":29,"tag":169,"props":304,"children":306},{"className":305},[],[307],{"type":34,"value":308},"Engineering ←→ Vendor",{"type":29,"tag":257,"props":310,"children":311},{},[312,317,319,325,327,333],{"type":29,"tag":140,"props":313,"children":314},{},[315],{"type":34,"value":316},"Expanded view:",{"type":34,"value":318}," Line fans out to actual connections (",{"type":29,"tag":169,"props":320,"children":322},{"className":321},[],[323],{"type":34,"value":324},"api → Vendor",{"type":34,"value":326},", ",{"type":29,"tag":169,"props":328,"children":330},{"className":329},[],[331],{"type":34,"value":332},"auth → Vendor",{"type":34,"value":334},")",{"type":29,"tag":30,"props":336,"children":337},{},[338],{"type":34,"value":339},"Aggregate flows \"unpack\" when their source\u002Ftarget expands.",{"type":29,"tag":37,"props":341,"children":342},{},[],{"key":23,"title":344,"empty":16,"ast":345},"Layout Agent",{"type":26,"children":346},[347,352,358,445,451,458,557,563,641,647,725,731,736,779],{"type":29,"tag":30,"props":348,"children":349},{},[350],{"type":34,"value":351},"A positioning system that handles spatial arrangement dynamically.",{"type":29,"tag":155,"props":353,"children":355},{"id":354},"triggers-responses",[356],{"type":34,"value":357},"Triggers & Responses",{"type":29,"tag":50,"props":359,"children":360},{},[361,377],{"type":29,"tag":54,"props":362,"children":363},{},[364],{"type":29,"tag":58,"props":365,"children":366},{},[367,372],{"type":29,"tag":62,"props":368,"children":369},{},[370],{"type":34,"value":371},"Trigger",{"type":29,"tag":62,"props":373,"children":374},{},[375],{"type":34,"value":376},"Action",{"type":29,"tag":78,"props":378,"children":379},{},[380,393,406,419,432],{"type":29,"tag":58,"props":381,"children":382},{},[383,388],{"type":29,"tag":85,"props":384,"children":385},{},[386],{"type":34,"value":387},"Composite expands",{"type":29,"tag":85,"props":389,"children":390},{},[391],{"type":34,"value":392},"Position children within expanded space",{"type":29,"tag":58,"props":394,"children":395},{},[396,401],{"type":29,"tag":85,"props":397,"children":398},{},[399],{"type":34,"value":400},"Composite collapses",{"type":29,"tag":85,"props":402,"children":403},{},[404],{"type":34,"value":405},"Animate children back into cube",{"type":29,"tag":58,"props":407,"children":408},{},[409,414],{"type":29,"tag":85,"props":410,"children":411},{},[412],{"type":34,"value":413},"Sibling expands",{"type":29,"tag":85,"props":415,"children":416},{},[417],{"type":34,"value":418},"Shift\u002Fcompress to make room",{"type":29,"tag":58,"props":420,"children":421},{},[422,427],{"type":29,"tag":85,"props":423,"children":424},{},[425],{"type":34,"value":426},"Actor added\u002Fremoved",{"type":29,"tag":85,"props":428,"children":429},{},[430],{"type":34,"value":431},"Reflow affected region",{"type":29,"tag":58,"props":433,"children":434},{},[435,440],{"type":29,"tag":85,"props":436,"children":437},{},[438],{"type":34,"value":439},"Window resize",{"type":29,"tag":85,"props":441,"children":442},{},[443],{"type":34,"value":444},"Rescale\u002Freposition as needed",{"type":29,"tag":155,"props":446,"children":448},{"id":447},"algorithm-options",[449],{"type":34,"value":450},"Algorithm Options",{"type":29,"tag":452,"props":453,"children":455},"h4",{"id":454},"force-directed-family",[456],{"type":34,"value":457},"Force-Directed Family",{"type":29,"tag":50,"props":459,"children":460},{},[461,482],{"type":29,"tag":54,"props":462,"children":463},{},[464],{"type":29,"tag":58,"props":465,"children":466},{},[467,472,477],{"type":29,"tag":62,"props":468,"children":469},{},[470],{"type":34,"value":471},"Algorithm",{"type":29,"tag":62,"props":473,"children":474},{},[475],{"type":34,"value":476},"Description",{"type":29,"tag":62,"props":478,"children":479},{},[480],{"type":34,"value":481},"Best For",{"type":29,"tag":78,"props":483,"children":484},{},[485,503,521,539],{"type":29,"tag":58,"props":486,"children":487},{},[488,493,498],{"type":29,"tag":85,"props":489,"children":490},{},[491],{"type":34,"value":492},"Spring-Embedder",{"type":29,"tag":85,"props":494,"children":495},{},[496],{"type":34,"value":497},"Nodes repel, edges act as springs",{"type":29,"tag":85,"props":499,"children":500},{},[501],{"type":34,"value":502},"General networks, organic feel",{"type":29,"tag":58,"props":504,"children":505},{},[506,511,516],{"type":29,"tag":85,"props":507,"children":508},{},[509],{"type":34,"value":510},"ForceAtlas2",{"type":29,"tag":85,"props":512,"children":513},{},[514],{"type":34,"value":515},"GPU-accelerated, smooth clustering",{"type":29,"tag":85,"props":517,"children":518},{},[519],{"type":34,"value":520},"Large dense graphs (10-10k nodes)",{"type":29,"tag":58,"props":522,"children":523},{},[524,529,534],{"type":29,"tag":85,"props":525,"children":526},{},[527],{"type":34,"value":528},"Kamada-Kawai",{"type":29,"tag":85,"props":530,"children":531},{},[532],{"type":34,"value":533},"Preserves graph-theoretic distance",{"type":29,"tag":85,"props":535,"children":536},{},[537],{"type":34,"value":538},"Relationship distances",{"type":29,"tag":58,"props":540,"children":541},{},[542,547,552],{"type":29,"tag":85,"props":543,"children":544},{},[545],{"type":34,"value":546},"Fruchterman-Reingold",{"type":29,"tag":85,"props":548,"children":549},{},[550],{"type":34,"value":551},"Attractive + repulsive with cooling",{"type":29,"tag":85,"props":553,"children":554},{},[555],{"type":34,"value":556},"Aesthetic drawing",{"type":29,"tag":452,"props":558,"children":560},{"id":559},"hierarchicallayered",[561],{"type":34,"value":562},"Hierarchical\u002FLayered",{"type":29,"tag":50,"props":564,"children":565},{},[566,584],{"type":29,"tag":54,"props":567,"children":568},{},[569],{"type":29,"tag":58,"props":570,"children":571},{},[572,576,580],{"type":29,"tag":62,"props":573,"children":574},{},[575],{"type":34,"value":471},{"type":29,"tag":62,"props":577,"children":578},{},[579],{"type":34,"value":476},{"type":29,"tag":62,"props":581,"children":582},{},[583],{"type":34,"value":481},{"type":29,"tag":78,"props":585,"children":586},{},[587,605,623],{"type":29,"tag":58,"props":588,"children":589},{},[590,595,600],{"type":29,"tag":85,"props":591,"children":592},{},[593],{"type":34,"value":594},"Sugiyama",{"type":29,"tag":85,"props":596,"children":597},{},[598],{"type":34,"value":599},"Nodes in layers, minimize edge crossings",{"type":29,"tag":85,"props":601,"children":602},{},[603],{"type":34,"value":604},"Directed flows, org charts",{"type":29,"tag":58,"props":606,"children":607},{},[608,613,618],{"type":29,"tag":85,"props":609,"children":610},{},[611],{"type":34,"value":612},"Reingold-Tilford",{"type":29,"tag":85,"props":614,"children":615},{},[616],{"type":34,"value":617},"Tree-specific, top-down",{"type":29,"tag":85,"props":619,"children":620},{},[621],{"type":34,"value":622},"Pure hierarchies",{"type":29,"tag":58,"props":624,"children":625},{},[626,631,636],{"type":29,"tag":85,"props":627,"children":628},{},[629],{"type":34,"value":630},"Radial\u002FTwopi",{"type":29,"tag":85,"props":632,"children":633},{},[634],{"type":34,"value":635},"Concentric circles from root",{"type":29,"tag":85,"props":637,"children":638},{},[639],{"type":34,"value":640},"Dependency chains",{"type":29,"tag":452,"props":642,"children":644},{"id":643},"space-filling",[645],{"type":34,"value":646},"Space-Filling",{"type":29,"tag":50,"props":648,"children":649},{},[650,668],{"type":29,"tag":54,"props":651,"children":652},{},[653],{"type":29,"tag":58,"props":654,"children":655},{},[656,660,664],{"type":29,"tag":62,"props":657,"children":658},{},[659],{"type":34,"value":471},{"type":29,"tag":62,"props":661,"children":662},{},[663],{"type":34,"value":476},{"type":29,"tag":62,"props":665,"children":666},{},[667],{"type":34,"value":481},{"type":29,"tag":78,"props":669,"children":670},{},[671,689,707],{"type":29,"tag":58,"props":672,"children":673},{},[674,679,684],{"type":29,"tag":85,"props":675,"children":676},{},[677],{"type":34,"value":678},"Treemap",{"type":29,"tag":85,"props":680,"children":681},{},[682],{"type":34,"value":683},"Nested rectangles, area = weight",{"type":29,"tag":85,"props":685,"children":686},{},[687],{"type":34,"value":688},"Proportions in hierarchy",{"type":29,"tag":58,"props":690,"children":691},{},[692,697,702],{"type":29,"tag":85,"props":693,"children":694},{},[695],{"type":34,"value":696},"Voronoi",{"type":29,"tag":85,"props":698,"children":699},{},[700],{"type":34,"value":701},"Each node claims surrounding space",{"type":29,"tag":85,"props":703,"children":704},{},[705],{"type":34,"value":706},"Territory\u002Fzone boundaries",{"type":29,"tag":58,"props":708,"children":709},{},[710,715,720],{"type":29,"tag":85,"props":711,"children":712},{},[713],{"type":34,"value":714},"Circle Packing",{"type":29,"tag":85,"props":716,"children":717},{},[718],{"type":34,"value":719},"Nested circles containing children",{"type":29,"tag":85,"props":721,"children":722},{},[723],{"type":34,"value":724},"Hierarchical containment",{"type":29,"tag":155,"props":726,"children":728},{"id":727},"recommended-approach",[729],{"type":34,"value":730},"Recommended Approach",{"type":29,"tag":30,"props":732,"children":733},{},[734],{"type":34,"value":735},"Hybrid strategy:",{"type":29,"tag":253,"props":737,"children":738},{},[739,749,759,769],{"type":29,"tag":257,"props":740,"children":741},{},[742,747],{"type":29,"tag":140,"props":743,"children":744},{},[745],{"type":34,"value":746},"Force-directed",{"type":34,"value":748}," for positioning siblings (organic, handles unknown cardinality)",{"type":29,"tag":257,"props":750,"children":751},{},[752,757],{"type":29,"tag":140,"props":753,"children":754},{},[755],{"type":34,"value":756},"Hierarchical constraints",{"type":34,"value":758}," to keep children within parent bounds",{"type":29,"tag":257,"props":760,"children":761},{},[762,767],{"type":29,"tag":140,"props":763,"children":764},{},[765],{"type":34,"value":766},"Semantic zoom",{"type":34,"value":768}," to swap representations at threshold",{"type":29,"tag":257,"props":770,"children":771},{},[772,777],{"type":29,"tag":140,"props":773,"children":774},{},[775],{"type":34,"value":776},"Animation choreography",{"type":34,"value":778}," for sequenced transitions",{"type":29,"tag":37,"props":780,"children":781},{},[],{"key":23,"title":783,"empty":16,"ast":784},"Semantic Zoom Techniques",{"type":26,"children":785},[786,791,851],{"type":29,"tag":30,"props":787,"children":788},{},[789],{"type":34,"value":790},"From ZUI research:",{"type":29,"tag":50,"props":792,"children":793},{},[794,809],{"type":29,"tag":54,"props":795,"children":796},{},[797],{"type":29,"tag":58,"props":798,"children":799},{},[800,805],{"type":29,"tag":62,"props":801,"children":802},{},[803],{"type":34,"value":804},"Technique",{"type":29,"tag":62,"props":806,"children":807},{},[808],{"type":34,"value":476},{"type":29,"tag":78,"props":810,"children":811},{},[812,825,838],{"type":29,"tag":58,"props":813,"children":814},{},[815,820],{"type":29,"tag":85,"props":816,"children":817},{},[818],{"type":34,"value":819},"Level of Refinement (LOR)",{"type":29,"tag":85,"props":821,"children":822},{},[823],{"type":34,"value":824},"Quick sketches at LOR 0, full detail at higher levels",{"type":29,"tag":58,"props":826,"children":827},{},[828,833],{"type":29,"tag":85,"props":829,"children":830},{},[831],{"type":34,"value":832},"Pixel-threshold culling",{"type":29,"tag":85,"props":834,"children":835},{},[836],{"type":34,"value":837},"Objects \u003C 1px hidden; tree traversal stops early",{"type":29,"tag":58,"props":839,"children":840},{},[841,846],{"type":29,"tag":85,"props":842,"children":843},{},[844],{"type":34,"value":845},"Structure transformation",{"type":29,"tag":85,"props":847,"children":848},{},[849],{"type":34,"value":850},"Objects change shape\u002Fdetail\u002Fpresence, not just scale",{"type":29,"tag":37,"props":852,"children":853},{},[],{"key":23,"title":855,"empty":16,"ast":856},"References",{"type":26,"children":857},[858,923],{"type":29,"tag":290,"props":859,"children":860},{},[861,873,883,893,903,913],{"type":29,"tag":257,"props":862,"children":863},{},[864],{"type":29,"tag":865,"props":866,"children":870},"a",{"href":867,"rel":868},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FForce-directed_graph_drawing",[869],"nofollow",[871],{"type":34,"value":872},"Force-Directed Graph Drawing - Wikipedia",{"type":29,"tag":257,"props":874,"children":875},{},[876],{"type":29,"tag":865,"props":877,"children":880},{"href":878,"rel":879},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FLayered_graph_drawing",[869],[881],{"type":34,"value":882},"Layered Graph Drawing - Wikipedia",{"type":29,"tag":257,"props":884,"children":885},{},[886],{"type":29,"tag":865,"props":887,"children":890},{"href":888,"rel":889},"https:\u002F\u002Finfovis-wiki.net\u002Fwiki\u002FSemantic_Zoom",[869],[891],{"type":34,"value":892},"Semantic Zoom - InfoVis Wiki",{"type":29,"tag":257,"props":894,"children":895},{},[896],{"type":29,"tag":865,"props":897,"children":900},{"href":898,"rel":899},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FZooming_user_interface",[869],[901],{"type":34,"value":902},"Zooming User Interface - Wikipedia",{"type":29,"tag":257,"props":904,"children":905},{},[906],{"type":29,"tag":865,"props":907,"children":910},{"href":908,"rel":909},"https:\u002F\u002Fjournals.plos.org\u002Fplosone\u002Farticle?id=10.1371\u002Fjournal.pone.0098679",[869],[911],{"type":34,"value":912},"ForceAtlas2 Paper - PLOS One",{"type":29,"tag":257,"props":914,"children":915},{},[916],{"type":29,"tag":865,"props":917,"children":920},{"href":918,"rel":919},"http:\u002F\u002Fwww.cs.umd.edu\u002Fprojects\u002Fhcil\u002Fpad++\u002Fpapers\u002Fspe-98-padimplementation\u002Fspe-98-padimplementation.pdf",[869],[921],{"type":34,"value":922},"Pad++ Implementation Paper",{"type":29,"tag":37,"props":924,"children":925},{},[],{"key":23,"title":927,"empty":16,"ast":928},"Relationship to Other Cycles",{"type":26,"children":929},[930,963],{"type":29,"tag":290,"props":931,"children":932},{},[933,943,953],{"type":29,"tag":257,"props":934,"children":935},{},[936,941],{"type":29,"tag":140,"props":937,"children":938},{},[939],{"type":34,"value":940},"c1.border-grouping:",{"type":34,"value":942}," Zones may become composite actors; ForceClustering strategy is relevant",{"type":29,"tag":257,"props":944,"children":945},{},[946,951],{"type":29,"tag":140,"props":947,"children":948},{},[949],{"type":34,"value":950},"c2.entity-meshes:",{"type":34,"value":952}," Leaf actors use these meshes; composites need new container representation",{"type":29,"tag":257,"props":954,"children":955},{},[956,961],{"type":29,"tag":140,"props":957,"children":958},{},[959],{"type":34,"value":960},"c3.data-flows:",{"type":34,"value":962}," Flows must support aggregation\u002Fdisaggregation based on zoom level",{"type":29,"tag":37,"props":964,"children":965},{},[],{"key":23,"title":967,"empty":16,"ast":968},"Progress",{"type":26,"children":969},[970,1105,1111,1289,1297],{"type":29,"tag":290,"props":971,"children":974},{"className":972},[973],"contains-task-list",[975,988,997,1006,1015,1024,1033,1042,1051,1060,1069,1078,1087,1096],{"type":29,"tag":257,"props":976,"children":979},{"className":977},[978],"task-list-item",[980,986],{"type":29,"tag":981,"props":982,"children":985},"input",{"checked":983,"disabled":983,"type":984},true,"checkbox",[],{"type":34,"value":987}," Test harness: HTML page with zoom radio buttons",{"type":29,"tag":257,"props":989,"children":991},{"className":990},[978],[992,995],{"type":29,"tag":981,"props":993,"children":994},{"checked":983,"disabled":983,"type":984},[],{"type":34,"value":996}," Test data: Hierarchical structure (1 Company → 12 Teams → ~166 Apps)",{"type":29,"tag":257,"props":998,"children":1000},{"className":999},[978],[1001,1004],{"type":29,"tag":981,"props":1002,"children":1003},{"checked":983,"disabled":983,"type":984},[],{"type":34,"value":1005}," Basic zoom level rendering (cubes at each level)",{"type":29,"tag":257,"props":1007,"children":1009},{"className":1008},[978],[1010,1013],{"type":29,"tag":981,"props":1011,"children":1012},{"checked":983,"disabled":983,"type":984},[],{"type":34,"value":1014}," ContainerRug class: flat labeled planes for parent context",{"type":29,"tag":257,"props":1016,"children":1018},{"className":1017},[978],[1019,1022],{"type":29,"tag":981,"props":1020,"children":1021},{"checked":983,"disabled":983,"type":984},[],{"type":34,"value":1023}," Grid layout for actors within containers",{"type":29,"tag":257,"props":1025,"children":1027},{"className":1026},[978],[1028,1031],{"type":29,"tag":981,"props":1029,"children":1030},{"checked":983,"disabled":983,"type":984},[],{"type":34,"value":1032}," Nested rugs at Apps level (company + team rugs)",{"type":29,"tag":257,"props":1034,"children":1036},{"className":1035},[978],[1037,1040],{"type":29,"tag":981,"props":1038,"children":1039},{"disabled":983,"type":984},[],{"type":34,"value":1041}," Design composite actor data model",{"type":29,"tag":257,"props":1043,"children":1045},{"className":1044},[978],[1046,1049],{"type":29,"tag":981,"props":1047,"children":1048},{"disabled":983,"type":984},[],{"type":34,"value":1050}," Implement CompositeActor class extending BaseMesh",{"type":29,"tag":257,"props":1052,"children":1054},{"className":1053},[978],[1055,1058],{"type":29,"tag":981,"props":1056,"children":1057},{"disabled":983,"type":984},[],{"type":34,"value":1059}," Collapsed state rendering (cube + badge)",{"type":29,"tag":257,"props":1061,"children":1063},{"className":1062},[978],[1064,1067],{"type":29,"tag":981,"props":1065,"children":1066},{"disabled":983,"type":984},[],{"type":34,"value":1068}," Expand\u002Fcollapse animation",{"type":29,"tag":257,"props":1070,"children":1072},{"className":1071},[978],[1073,1076],{"type":29,"tag":981,"props":1074,"children":1075},{"disabled":983,"type":984},[],{"type":34,"value":1077}," Layout agent prototype (force-directed with containment)",{"type":29,"tag":257,"props":1079,"children":1081},{"className":1080},[978],[1082,1085],{"type":29,"tag":981,"props":1083,"children":1084},{"disabled":983,"type":984},[],{"type":34,"value":1086}," Flow aggregation logic",{"type":29,"tag":257,"props":1088,"children":1090},{"className":1089},[978],[1091,1094],{"type":29,"tag":981,"props":1092,"children":1093},{"disabled":983,"type":984},[],{"type":34,"value":1095}," Semantic zoom thresholds",{"type":29,"tag":257,"props":1097,"children":1099},{"className":1098},[978],[1100,1103],{"type":29,"tag":981,"props":1101,"children":1102},{"disabled":983,"type":984},[],{"type":34,"value":1104}," Sibling muting on drill-down",{"type":29,"tag":155,"props":1106,"children":1108},{"id":1107},"test-data-distribution",[1109],{"type":34,"value":1110},"Test Data Distribution",{"type":29,"tag":50,"props":1112,"children":1113},{},[1114,1130],{"type":29,"tag":54,"props":1115,"children":1116},{},[1117],{"type":29,"tag":58,"props":1118,"children":1119},{},[1120,1125],{"type":29,"tag":62,"props":1121,"children":1122},{},[1123],{"type":34,"value":1124},"Team",{"type":29,"tag":62,"props":1126,"children":1127},{},[1128],{"type":34,"value":1129},"App Count",{"type":29,"tag":78,"props":1131,"children":1132},{},[1133,1146,1159,1172,1185,1198,1211,1224,1237,1250,1263,1276],{"type":29,"tag":58,"props":1134,"children":1135},{},[1136,1141],{"type":29,"tag":85,"props":1137,"children":1138},{},[1139],{"type":34,"value":1140},"Platform",{"type":29,"tag":85,"props":1142,"children":1143},{},[1144],{"type":34,"value":1145},"18",{"type":29,"tag":58,"props":1147,"children":1148},{},[1149,1154],{"type":29,"tag":85,"props":1150,"children":1151},{},[1152],{"type":34,"value":1153},"Payments",{"type":29,"tag":85,"props":1155,"children":1156},{},[1157],{"type":34,"value":1158},"12",{"type":29,"tag":58,"props":1160,"children":1161},{},[1162,1167],{"type":29,"tag":85,"props":1163,"children":1164},{},[1165],{"type":34,"value":1166},"Identity",{"type":29,"tag":85,"props":1168,"children":1169},{},[1170],{"type":34,"value":1171},"8",{"type":29,"tag":58,"props":1173,"children":1174},{},[1175,1180],{"type":29,"tag":85,"props":1176,"children":1177},{},[1178],{"type":34,"value":1179},"Search",{"type":29,"tag":85,"props":1181,"children":1182},{},[1183],{"type":34,"value":1184},"15",{"type":29,"tag":58,"props":1186,"children":1187},{},[1188,1193],{"type":29,"tag":85,"props":1189,"children":1190},{},[1191],{"type":34,"value":1192},"Analytics",{"type":29,"tag":85,"props":1194,"children":1195},{},[1196],{"type":34,"value":1197},"22",{"type":29,"tag":58,"props":1199,"children":1200},{},[1201,1206],{"type":29,"tag":85,"props":1202,"children":1203},{},[1204],{"type":34,"value":1205},"Mobile",{"type":29,"tag":85,"props":1207,"children":1208},{},[1209],{"type":34,"value":1210},"10",{"type":29,"tag":58,"props":1212,"children":1213},{},[1214,1219],{"type":29,"tag":85,"props":1215,"children":1216},{},[1217],{"type":34,"value":1218},"Infrastructure",{"type":29,"tag":85,"props":1220,"children":1221},{},[1222],{"type":34,"value":1223},"24",{"type":29,"tag":58,"props":1225,"children":1226},{},[1227,1232],{"type":29,"tag":85,"props":1228,"children":1229},{},[1230],{"type":34,"value":1231},"Data",{"type":29,"tag":85,"props":1233,"children":1234},{},[1235],{"type":34,"value":1236},"14",{"type":29,"tag":58,"props":1238,"children":1239},{},[1240,1245],{"type":29,"tag":85,"props":1241,"children":1242},{},[1243],{"type":34,"value":1244},"Frontend",{"type":29,"tag":85,"props":1246,"children":1247},{},[1248],{"type":34,"value":1249},"9",{"type":29,"tag":58,"props":1251,"children":1252},{},[1253,1258],{"type":29,"tag":85,"props":1254,"children":1255},{},[1256],{"type":34,"value":1257},"Backend",{"type":29,"tag":85,"props":1259,"children":1260},{},[1261],{"type":34,"value":1262},"16",{"type":29,"tag":58,"props":1264,"children":1265},{},[1266,1271],{"type":29,"tag":85,"props":1267,"children":1268},{},[1269],{"type":34,"value":1270},"DevOps",{"type":29,"tag":85,"props":1272,"children":1273},{},[1274],{"type":34,"value":1275},"7",{"type":29,"tag":58,"props":1277,"children":1278},{},[1279,1284],{"type":29,"tag":85,"props":1280,"children":1281},{},[1282],{"type":34,"value":1283},"Security",{"type":29,"tag":85,"props":1285,"children":1286},{},[1287],{"type":34,"value":1288},"11",{"type":29,"tag":30,"props":1290,"children":1291},{},[1292],{"type":29,"tag":140,"props":1293,"children":1294},{},[1295],{"type":34,"value":1296},"Total: ~166 apps",{"type":29,"tag":37,"props":1298,"children":1299},{},[],{"key":23,"title":1301,"empty":16,"ast":1302},"Open Questions",{"type":26,"children":1303},[1304,1327],{"type":29,"tag":253,"props":1305,"children":1306},{},[1307,1312,1317,1322],{"type":29,"tag":257,"props":1308,"children":1309},{},[1310],{"type":34,"value":1311},"What triggers zoom level change? Camera distance? User click? Both?",{"type":29,"tag":257,"props":1313,"children":1314},{},[1315],{"type":34,"value":1316},"Should expansion be animated or instant with fade?",{"type":29,"tag":257,"props":1318,"children":1319},{},[1320],{"type":34,"value":1321},"How deep can nesting go before UX degrades?",{"type":29,"tag":257,"props":1323,"children":1324},{},[1325],{"type":34,"value":1326},"How do zones (c1) and composite actors interact?",{"type":29,"tag":37,"props":1328,"children":1329},{},[],{"key":23,"title":1331,"empty":16,"ast":1332},"Lessons Learned",{"type":26,"children":1333},[1334,1340,1350,1383,1393,1404,1412,1483],{"type":29,"tag":155,"props":1335,"children":1337},{"id":1336},"scene-object-cleanup-threejs-vue",[1338],{"type":34,"value":1339},"Scene Object Cleanup (Three.js + Vue)",{"type":29,"tag":30,"props":1341,"children":1342},{},[1343,1348],{"type":29,"tag":140,"props":1344,"children":1345},{},[1346],{"type":34,"value":1347},"Problem:",{"type":34,"value":1349}," Objects weren't being removed when switching zoom levels, even though tracking arrays were cleared.",{"type":29,"tag":30,"props":1351,"children":1352},{},[1353,1358,1360,1366,1367,1373,1375,1381],{"type":29,"tag":140,"props":1354,"children":1355},{},[1356],{"type":34,"value":1357},"Root cause:",{"type":34,"value":1359}," Relying on tracking arrays (",{"type":29,"tag":169,"props":1361,"children":1363},{"className":1362},[],[1364],{"type":34,"value":1365},"renderedCubes",{"type":34,"value":326},{"type":29,"tag":169,"props":1368,"children":1370},{"className":1369},[],[1371],{"type":34,"value":1372},"renderedRugs",{"type":34,"value":1374},") to stay in sync with the actual Three.js scene is fragile. The ",{"type":29,"tag":169,"props":1376,"children":1378},{"className":1377},[],[1379],{"type":34,"value":1380},"removeObject",{"type":34,"value":1382}," helper from ExperimentBase wasn't reliably removing objects.",{"type":29,"tag":30,"props":1384,"children":1385},{},[1386,1391],{"type":29,"tag":140,"props":1387,"children":1388},{},[1389],{"type":34,"value":1390},"Solution:",{"type":34,"value":1392}," Clear directly from the scene, not from tracking arrays:",{"type":29,"tag":162,"props":1394,"children":1399},{"className":1395,"code":1396,"language":1397,"meta":171,"style":1398},"language-js","function clearScene() {\n  const scene = sceneManager.value?.getScene();\n  if (!scene) return;\n\n  \u002F\u002F Copy children array before modifying\n  const toRemove = [...scene.children].filter(obj => {\n    \u002F\u002F Keep lights, cameras, grid helpers\n    if (obj.isLight || obj.isCamera || obj.isGridHelper) return false;\n    return obj.isMesh || obj.isGroup;\n  });\n\n  toRemove.forEach(obj => {\n    scene.remove(obj);\n    \u002F\u002F Dispose recursively...\n  });\n}\n","js","undefined",[1400],{"type":29,"tag":169,"props":1401,"children":1402},{"__ignoreMap":171},[1403],{"type":34,"value":1396},{"type":29,"tag":30,"props":1405,"children":1406},{},[1407],{"type":29,"tag":140,"props":1408,"children":1409},{},[1410],{"type":34,"value":1411},"Key patterns:",{"type":29,"tag":253,"props":1413,"children":1414},{},[1415,1435,1467,1478],{"type":29,"tag":257,"props":1416,"children":1417},{},[1418,1420,1426,1428,1434],{"type":34,"value":1419},"Copy ",{"type":29,"tag":169,"props":1421,"children":1423},{"className":1422},[],[1424],{"type":34,"value":1425},"scene.children",{"type":34,"value":1427}," before iterating (",{"type":29,"tag":169,"props":1429,"children":1431},{"className":1430},[],[1432],{"type":34,"value":1433},"[...scene.children]",{"type":34,"value":334},{"type":29,"tag":257,"props":1436,"children":1437},{},[1438,1440,1446,1447,1453,1454,1460,1461],{"type":34,"value":1439},"Use Three.js type checks: ",{"type":29,"tag":169,"props":1441,"children":1443},{"className":1442},[],[1444],{"type":34,"value":1445},"obj.isMesh",{"type":34,"value":326},{"type":29,"tag":169,"props":1448,"children":1450},{"className":1449},[],[1451],{"type":34,"value":1452},"obj.isGroup",{"type":34,"value":326},{"type":29,"tag":169,"props":1455,"children":1457},{"className":1456},[],[1458],{"type":34,"value":1459},"obj.isLight",{"type":34,"value":326},{"type":29,"tag":169,"props":1462,"children":1464},{"className":1463},[],[1465],{"type":34,"value":1466},"obj.isGridHelper",{"type":29,"tag":257,"props":1468,"children":1469},{},[1470,1472],{"type":34,"value":1471},"Dispose geometry and materials recursively via ",{"type":29,"tag":169,"props":1473,"children":1475},{"className":1474},[],[1476],{"type":34,"value":1477},"obj.traverse()",{"type":29,"tag":257,"props":1479,"children":1480},{},[1481],{"type":34,"value":1482},"Don't trust wrapper functions—go straight to the scene when debugging",{"type":29,"tag":1484,"props":1485,"children":1486},"style",{},[1487],{"type":34,"value":171},[],[],[],[1492,1499,1503,1506,1510],{"src":1493,"kind":1494,"order":1495,"caption":1496,"capturedAt":1497,"route":1498},"\u002Fcycles\u002Fqmap\u002Fc4-company.png","hero",26,"Company level — the whole org as one block","2026-08-16T03:06:59.862Z","\u002Fexperiments\u002Fc4.semantic-zoom\u002F",{"src":1500,"kind":1494,"order":1501,"caption":1502,"capturedAt":1497,"route":1498},"\u002Fcycles\u002Fqmap\u002Fc4-teams.png",27,"Teams level after drilling in",{"src":17,"kind":1494,"order":1504,"caption":1505,"capturedAt":1497,"route":1498},28,"Apps level — the full decomposition",{"src":1507,"kind":1494,"order":1508,"caption":1509,"capturedAt":1497,"route":1498},"\u002Fcycles\u002Fqmap\u002Fc4-team-expanded.png",29,"A team expanded at app level (honest ceiling: 4 click-driven states)",{"src":1511,"kind":1512,"order":1513},"\u002Fcycles\u002Fqmap\u002Fc4.outcomes.png","legacy",100,[],[1516],{"route":1498,"href":8},1794599444792]