Code change:
<img width="980" alt="image" src="https://user-"
I suggest to move the docs into our wiki. PR to remove these files:

Related discussion:
text: <del> <svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="724px" height="1001px" viewBox="-0.5 -0.5 724 1001" content="&lt;mxfile&gt;&lt;diagram id=&quot;n5xL6N_UYSLJ1J9_o0bc&quot; name=&quot;Page-1&quot;&gt;7Vxbc9o4FP41PG7GtnyBxwbS7M603UzT3baPChbgqbFYIRLor1/ZlnyRBChBhgTCQ2Id28L6vqNzk0wPDOfrWwIXs884RmnPc+J1D4x6nhcEgP3NBZtSEPW5YEqSuBS5teA++Y240OHSVRKjZetCinFKk0VbOMZZhsa0JYOE4Kf2ZROctr91AadIEdyPYapKvycxnZXSfuDU8j9RMp2Jb3YdfuYBjn9NCV5l/Pt6HpgUn/L0HIq++PXLGYzxU0MEbnpgSDCm5dF8PURpDq2Arbzv45az1XMTlFGTG7zyhkeYrpB44uK56EZgQWZ4/rBigF4/zRKK7hdwnJ95YsQz2YzOU9Zy2aH63fxxHhGhaN0Q8We5RXiOKNmwS/jZiMPC1cYNefupQQIXzRr4CxnktE+rjuuhswM+ej0S/f1IoJgpCW9mOEOGw1/iFRnzLvg0oJBMEb8qKkV55zshIiiFNHlsa+ghIwbKiL+iLEaEyf5N0NMCE6pAwHik7WHDNJlm7HjMhs3uBdc52wmbSh/4iXkSx/nt1wQtk9/woejKYe0FTjJaPH9w3QtGeV8ripelMci7XlKCf6EhTjGpEbegZZVaCTUbqGpWzeimnnkW9CxQUP+CKXrA+BeTfkqWlMN/ntAHEvKOBnmvI+RdV4G+iykeqVNcuLXjz3GNuh1pzJ5/qjFHr8unuZJTq7zVEZzaYLuJ/4bmCwY8Ok874/n7QXfdrgyNf5RJJx6/ZWnAqWYdcI46aHsD5Lfe5apaK5AvKZDfd66cxsdrd1hywPuQQKseykx5DHA8pfmqgDmC+XLV9KSyXzcpmqPsTCNU2XzpQO8sQnXVxOBVaWB4TA1U46dblJuJ0SaD82TMjngh4Dz1MNgPfWfxumfiUbL4Q17v0ToUNm6y+ZFjeBWI5s/mudGaA1y2Nry1FbgXedoGVIEGKSE70F9VfkNU3EKJgdKJKh5K6QhIsy2QqbTn6jyThGwXwVuJeiWkVFPjUFL2smuRFNXnvpNi1JEvOxyLpBi45AYp4xQul8w5bbGGTVvYMI0HWUPTsPw0HCvUvEZrqGaNQ4KKDN3hl4qcfcn6uoOEhQSyEuyJxmK4nKGYNyZJmtoPGeTEydOEDNpwzZXn4YtihlAB8RvG6QMkClTFKk0BhrM/jG0HWD0PeCNmN/IbJzijDTlf7Wmjy+ShAwduxOTTfG7yL61Wf3bOs2dgL2krCFTsIw30wAbyatntJk4ovgjgg+CEwKsrV/cU0tXyQpQ+BKfDHhhEsM+DvAlOE7WW5Z4SGCeopoBb7+MYdF0tojuDDo6zgAE0C7PgZCsYQA33hjiuA4G9pQZtPUCjHuYlCZ3etjXbTHVtKKS0fFt5vYZCDjT6aKMmAQxK+8a1sa2IHXd+D6QQ11XhBF3ZTzVcqwq8/FJ9nPvKVd5GSAFkWgKFls5KwEBdOFSt7r58c53QH43jRrbJWnWymTf25pqtJaDXVXkD28zRc3NN2dGG3dUTxDddUtyiq113F7f4JhWbw+MWX1OL8T3D+WE9bvFNwuGDvaNGXbYolg0t6ktapNmS6GuUyLehQ97ZwxlpkrXO4NQU2NgVeYBRTAYYs3+jvz8rGF9AsCHVS0NNSN3ZdhlfTfH+WcRl4TOFG7zK6UmyCb5EYqQoMNKYn+6IMdhJ96aXgjzZGr04dNvXkcXQzWSj+p7Q/GJ4kTvqMqRWUya+8nBFipRWW7o5w3qskria7hkB3lUEDrdaQgffiRBZvCBCE2u5ooLdIiKwQ4SaDQgi4iT+ellcCLMtuND5ceBpuAgtEKHmopc6IyR3oHvxRxdN2ah1Bmr6cakstO1SpHsJqDMWdOtJYUo5Ri3ww/9WWJz4o9xt+YFd4LqLdX2SHU3z/4LLBUE5Op944lJ2zZ6q7L289iJYlixepFlW6I5ldV1BwVzNXFq1yjcULkuFzr5cLDGNlqPQvfK9fhC5/O/ubu3FzoHJK1tnVo7ua3yPthxd7a07aEJYyBrFgk69iPOzcUa/oNPYgp2/FtXceNjbve2waN0hkrCx5hUa8/UhUTZt1sQD07esjzRj5UDEeeGUlQsPVYxvf5KGx1nRCAYqe6GpvbW+ohGoWb1qmd52CX6gccxdleBDNTfnV4h4yRnOYDY1eSv17Eq9Ug1+4GkCpq7etQnVXP3s9FzjcDvTc/1SU6/czsL+rYoFjr9yjcxgWir/F2zyow/nrvauo0kHva42uoRqOnipSblMA9CYn6720YZbt+1fHA0DiQZd9TzSFW1t0KDLw2wWR7aavfcySUW4rkofeR0RrqaFX3KP4zkfCZy/uShMItZxhuxjh6dQ7FLYkb5HQUdOSpeEtKbluBp0PfPY8FnI46iTsdji4nwt9ruYzbt32ndtIuyK9khNlkxon0wcZzvt30mSb6x55/15vOteerHEO2vWv/dY1mXq39QEN/8D&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"> <defs/> <g> <path d="M 70 60 L 110 100 L 70 140 L 30 100 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <path d="M 170 110 L 170 173.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 170 178.88 L 166.5 171.88 L 170 173.63 L 173.5 171.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="120" y="90" width="100" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 100px; margin-left: 170px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;"> Render Viewport </div> </div> </div> </foreignObject> <text x="170" y="104" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Render Viewport </text> </switch> </g> <rect x="10" y="0" width="120" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 10px; margin-left: 70px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;"> Notebook List View </div> </div> </div> </foreignObject> <text x="70" y="14" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Notebook List View </text> </switch> </g> <path d="M 170 260 L 170 333.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 170 338.88 L 166.5 331.88 L 170 333.63 L 173.5 331.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <path d="M 210 220 L 393.63 220" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 398.88 220 L 391.88 223.5 L 393.63 220 L 391.88 216.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <path d="M 170 180 L 210 220 L 170 260 L 130 220 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="200" y="180" width="110" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 190px; margin-left: 255px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;"> Render Template </div> </div> </div> </foreignObject> <text x="255" y="194" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Render Template </text> </switch> </g> <path d="M 170 420 L 170 533.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 170 538.88 L 166.5 531.88 L 170 533.63 L 173.5 531.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <path d="M 210 380 L 393.63 380" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 398.88 380 L 391.88 383.5 L 393.63 380 L 391.88 376.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <path d="M 170 340 L 210 380 L 170 420 L 130 380 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="200" y="340" width="100" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 350px; margin-left: 250px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;"> Render Element </div> </div> </div> </foreignObject> <text x="250" y="354" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Render Element </text> </switch> </g> <path d="M 170 540 L 210 580 L 170 620 L 130 580 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="210" y="540" width="120" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 550px; margin-left: 270px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;"> Get Dynamic Height </div> </div> </div> </foreignObject> <text x="270" y="554" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Get Dynamic Height </text> </switch> </g> <path d="M 170 660 L 170 620" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 80 660 L 170 660" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 80 660 L 80 380" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 80 380 L 123.63 380" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 128.88 380 L 121.88 383.5 L 123.63 380 L 121.88 376.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="400" y="140" width="280" height="160" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 220px; margin-left: 401px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Create Cell Templates/Parts </div> </div> </div> </foreignObject> <text x="540" y="224" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Create Cell Templates/Parts </text> </switch> </g> <rect x="430" y="250" width="70" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 265px; margin-left: 431px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Toolbar </div> </div> </div> </foreignObject> <text x="465" y="269" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar </text> </switch> </g> <rect x="510" y="250" width="70" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 265px; margin-left: 511px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Editor </div> </div> </div> </foreignObject> <text x="545" y="269" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Editor </text> </switch> </g> <rect x="590" y="250" width="70" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 265px; margin-left: 591px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Statusbar </div> </div> </div> </foreignObject> <text x="625" y="269" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Statusbar </text> </switch> </g> <rect x="400" y="340" width="280" height="160" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="all"/> <path d="M 465 390 L 465 403.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 465 408.88 L 461.5 401.88 L 465 403.63 L 468.5 401.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="420" y="370" width="90" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 380px; margin-left: 421px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Code Cell </div> </div> </div> </foreignObject> <text x="465" y="384" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Code Cell </text> </switch> </g> <path d="M 465 410 L 480 425 L 465 440 L 450 425 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="490" y="415" width="100" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 425px; margin-left: 491px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Render Cell Parts </div> </div> </div> </foreignObject> <text x="540" y="429" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Render Cell Parts </text> </switch> </g> <path d="M 210 580 L 393.63 580" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 398.88 580 L 391.88 583.5 L 393.63 580 L 391.88 576.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="400" y="540" width="280" height="160" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="all"/> <path d="M 460 600 L 460 643.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 460 648.88 L 456.5 641.88 L 460 643.63 L 463.5 641.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <path d="M 460 560 L 480 580 L 460 600 L 440 580 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <path d="M 460 650 L 480 670 L 460 690 L 440 670 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="480" y="570" width="110" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 580px; margin-left: 481px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> CellPart read DOM </div> </div> </div> </foreignObject> <text x="535" y="584" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> CellPart read DOM </text> </switch> </g> <rect x="490" y="660" width="110" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 670px; margin-left: 491px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Update layout info </div> </div> </div> </foreignObject> <text x="545" y="674" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Update layout info </text> </switch> </g> <path d="M 240 670 L 440 670" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 240 670 L 240 586.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 240 581.12 L 243.5 588.12 L 240 586.37 L 236.5 588.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="490" y="440" width="120" height="32.73" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 456px; margin-left: 491px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Toolbar.renderCell </div> </div> </div> </foreignObject> <text x="550" y="460" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar.renderCell </text> </switch> </g> <rect x="499" y="450" width="131" height="35.73" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 129px; height: 1px; padding-top: 468px; margin-left: 500px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Toolbar.renderCell </div> </div> </div> </foreignObject> <text x="565" y="471" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar.renderCell </text> </switch> </g> <rect x="508" y="460" width="132" height="36" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 130px; height: 1px; padding-top: 478px; margin-left: 509px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Toolbar.didRenderCell </div> </div> </div> </foreignObject> <text x="574" y="482" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar.didRenderCell </text> </switch> </g> <rect x="490" y="590" width="110" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 605px; margin-left: 491px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Toolbar.renderCell </div> </div> </div> </foreignObject> <text x="545" y="609" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar.renderCell </text> </switch> </g> <rect x="499" y="600" width="110" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 615px; margin-left: 500px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Toolbar.renderCell </div> </div> </div> </foreignObject> <text x="554" y="619" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar.renderCell </text> </switch> </g> <rect x="508" y="610" width="110" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 625px; margin-left: 509px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> <font style="font-size: 11px"> Toolbar.prepareLayout </font> </div> </div> </div> </foreignObject> <text x="563" y="629" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar.prepareLay... </text> </switch> </g> <path d="M 0 740 L 721.43 740" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/> <rect x="400" y="790" width="280" height="210" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="all"/> <path d="M 460 690 L 459.93 783.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 459.92 788.88 L 456.43 781.88 L 459.93 783.63 L 463.43 781.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <path d="M 460 850 L 460 883.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/> <path d="M 460 888.88 L 456.5 881.88 L 460 883.63 L 463.5 881.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <path d="M 460 810 L 480 830 L 460 850 L 440 830 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="480" y="820" width="120" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 830px; margin-left: 481px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Cell Layout Change </div> </div> </div> </foreignObject> <text x="540" y="834" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Cell Layout Change </text> </switch> </g> <path d="M 460 890 L 480 910 L 460 930 L 440 910 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/> <rect x="480" y="900" width="200" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 910px; margin-left: 481px;"> <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Cell Part updateInternalLayoutNow </div> </div> </div> </foreignObject> <text x="580" y="914" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle"> Cell Part updateInternalLayoutNow </text> </switch> </g> <rect x="490" y="930" width="170" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 945px; margin-left: 491px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Toolbar.renderCell </div> </div> </div> </foreignObject> <text x="575" y="949" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar.renderCell </text> </switch> </g> <rect x="499" y="940" width="171" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 169px; height: 1px; padding-top: 955px; margin-left: 500px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Toolbar.renderCell </div> </div> </div> </foreignObject> <text x="585" y="959" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar.renderCell </text> </switch> </g> <rect x="508" y="950" width="172" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 170px; height: 1px; padding-top: 965px; margin-left: 509px;"> <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> <font style="font-size: 11px"> Toolbar.updateInternalLayoutNow </font> </div> </div> </div> </foreignObject> <text x="594" y="969" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle"> Toolbar.updateInternalLayout... </text> </switch> </g> <rect x="605" y="790" width="75" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 73px; height: 1px; padding-top: 800px; margin-left: 606px;"> <div data-drawio-colors="color: #00CCCC; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 204, 204); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> Next Frame </div> </div> </div> </foreignObject> <text x="643" y="804" fill="#00CCCC" font-family="Helvetica" font-size="12px" text-anchor="middle"> Next Frame </text> </switch> </g> <rect x="605" y="540" width="75" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 73px; height: 1px; padding-top: 550px; margin-left: 606px;"> <div data-drawio-colors="color: #00CCCC; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 204, 204); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> <font color="#009900"> DOM Read </font> </div> </div> </div> </foreignObject> <text x="643" y="554" fill="#00CCCC" font-family="Helvetica" font-size="12px" text-anchor="middle"> DOM Read </text> </switch> </g> <rect x="605" y="340" width="75" height="20" fill="none" stroke="none" pointer-events="all"/> <g transform="translate(-0.5 -0.5)"> <switch> <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 73px; height: 1px; padding-top: 350px; margin-left: 606px;"> <div data-drawio-colors="color: #00CCCC; " style="box-sizing: border-box; font-size: 0px; text-align: center;"> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 204, 204); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"> <font color="#ff0000"> DOM Write </font> </div> </div> </div> </foreignObject> <text x="643" y="354" fill="#00CCCC" font-family="Helvetica" font-size="12px" text-anchor="middle"> DOM Write </text> </switch> </g> </g> <switch> <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/> <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"> <text text-anchor="middle" font-size="10px" x="50%" y="100%"> Viewer does not support full SVG 1.1 </text> </a> </switch> </svg> </del>