Skip to content

Instantly share code, notes, and snippets.

@alloy

alloy/Pure vs Fragmentized Component Trees and Propagated vs Connected Data Propagation.svg

Last active April 12, 2022 11:28
Show Gist options
  • Save alloy/2bb8c280e6ecb74241c33e0daebd14f2 to your computer and use it in GitHub Desktop.
Save alloy/2bb8c280e6ecb74241c33e0daebd14f2 to your computer and use it in GitHub Desktop.
Download ZIP
I’ve been drawing up an overview of pure vs GraphQL fragmentized [React] UI components, different ways to propagate data through the tree, and the associated maintenance/performance considerations.
Display the source blob
Display the rendered blob
Raw
Pure vs Fragmentized Component Trees and Propagated vs Connected Data Propagation.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4937.274 3233.035" width="9874.547" height="6466.07" xmlns:v="https://vecta.io/nano"><style><![CDATA[.B{direction:ltr}.C{font-size:20px}.D{fill:none}.E{font-family:Virgil, Segoe UI Emoji}.F{fill:#e535ab}.G{fill:#000}.H{font-family:Cascadia, Segoe UI Emoji}.I{text-anchor:middle}.J{stroke:#000}.K{font-size:36px}.L{stroke:#e535ab}.M{stroke-dasharray:12 8}.N{stroke:#61dafb}.O{stroke-width:1.5}.P{stroke:#d9480f}.Q{fill:#61dafb}.R{fill:#d3d3d3}.S{fill:#d9480f}.T{stroke:#d3d3d3}.U{fill-opacity:.1}.V{stroke-opacity:.1}]]></style><defs><style>@font-face{font-family:"Virgil";src:url("https://excalidraw.com/Virgil.woff2")} @font-face{font-family:"Cascadia";src:url("https://excalidraw.com/Cascadia.woff2")}</style></defs><path fill="#fff" d="M0 0h4937.273v3233.035H0z"/><g class="U"><path d="M3385.165 2126.814l1190.975-.283-3.225 936.428-1186.527-2.719" class="R"/><path d="M3385.496 2126.9l1188.75-.226m-1189.448-.405l1190.367.167m-1.043-.772l.577 935.995m-.02-934.858c-3.56 189.263-3.517 378.13-.087 934.678m-.431.215c-254.117-5.202-507.369-4.213-1189.272-.385m1189.616.373l-1189.611.186m.024.212l.007-936.244m.058 935.681l-.226-934.731" class="D J V"/><path d="M3379.738 1160.168l1192.11-1.117-.363 872.423-1190.58.396" class="R"/><path d="M3379.834 1160.397c309.233 5.12 618.391 5.305 1190.109-.131m-1189.501.704l1189.64.186m.139.221l-.593 871.243m.508-872.06l-.098 872.158m-.234.117c-322.549-5.14-645.329-4.567-1188.644-.807m1188.932.471l-1189.892.477m.22-.5l-.688-871.434m.389 871.243l.599-871.7" class="D J V"/><path d="M925.425 1157.986l2048.975-.32-1.645 1903.064-2046.687-1.193" class="R"/><path d="M927.233 1157.97l2047.008.057m-2046.992.723l2046.62-.071m.576.014l-.859 1900.74m.428-1900.402l.235 1899.761m-.743.588c-440.665-1.73-882.566-1.305-2047.136.184m2047.996-.408c-461.748-.127-923.466-.714-2047.481.1m-.006.497l.128-1901.491m-.503 1900.552l.594-1900.5" class="D J V"/></g><path d="M1231.494 532.441c12.395-2.193 30.147-2.637 44.819-2.272s30.55 1.909 43.213 4.458 24.941 6.747 32.766 10.836 12.693 8.984 14.182 13.698-.478 10.005-5.249 14.587-12.971 9.597-23.373 12.904-24.882 5.653-39.041 6.938-31.25 1.463-45.917.775-29.851-2.407-42.083-4.906-24.104-5.957-31.309-10.089-11.382-9.944-11.924-14.701 2.933-9.382 8.672-13.841 15.988-9.789 25.76-12.91 26.857-4.97 32.87-5.816 2.952-.029 3.21.738m51.986.202c13.758.479 28.745 1.063 40.109 3.985s21.816 8.986 28.073 13.551 9.858 9.148 9.47 13.838-5.161 10.197-11.793 14.3-16.335 7.649-27.999 10.317-27.419 4.906-41.982 5.688-30.876.183-45.398-.994-30.785-3.128-41.737-6.068-19.007-7.141-23.975-11.575-7.079-10.17-5.836-15.026 6.134-9.876 13.294-14.107 17.465-8.857 29.665-11.282 30.411-2.486 43.535-3.268 29.453-1.348 35.211-1.425.024.122-.661.966" class="D J"/><text x="1269.43" y="568.465" class="B C E G I">AppBarContainer</text><path d="M1258.208 654.168c13.812-.898 31.196.216 44.971 2.042s27.857 5.319 37.675 8.916 17.279 8.114 21.235 12.669 4.836 9.872 2.5 14.66-8.019 10.228-16.521 14.063-21.309 6.919-34.492 8.946-29.791 3.104-44.604 3.219-30.805-.728-44.277-2.527-27.274-4.586-36.559-8.264-16.118-9.161-19.152-13.805-2.397-9.349.95-14.058 9.776-10.375 19.13-14.195 23.704-6.865 36.996-8.722 34.242-2.353 42.759-2.422 8.419 1.298 8.342 2.008m-37.239-1.629c12.998-1.679 30.944.374 45.456 1.555s29.927 2.71 41.614 5.529 21.728 7.255 28.511 11.384 11.851 8.807 12.189 13.393-3.723 9.925-10.164 14.124-16.536 8.034-28.483 11.07-28.746 5.943-43.198 7.146-29.688 1.286-43.512.077-28.286-4.117-39.437-7.33-21.245-7.439-27.472-11.947-10.463-10.538-9.894-15.102 5.803-8.11 13.307-12.283 21.351-9.917 31.716-12.752 25.586-3.919 30.47-4.259-1.241 1.758-1.162 2.22" class="D J"/><text x="1266.43" y="692.465" class="B C E G I">BarComponent</text><path d="M1412.355 765.991c12.669-1.876 30.742-1.684 45.249-1.064s29.526 2.238 41.797 4.783 23.931 6.329 31.827 10.487 14.002 9.746 15.55 14.462-.883 9.596-6.263 13.834-15.155 8.391-26.015 11.592-24.964 6.083-39.145 7.612-31.429 2.351-45.937 1.559-29.414-3.523-41.115-6.316-22.104-6.168-29.088-10.439-12.296-10.304-12.814-15.191 3.557-9.92 9.705-14.128 16.313-8.385 27.186-11.116 29.688-4.375 38.049-5.272 11.662-.55 12.118-.107m54.856 2.291c13.386 1.728 26.787 4.892 36.015 8.528s15.901 8.769 19.351 13.284 4.533 9.343 1.349 13.804-11.028 9.373-20.457 12.962-22.329 6.506-36.116 8.573-31.838 3.754-46.604 3.828-29.443-1.115-41.991-3.382-24.754-6.237-33.302-10.219-15.152-8.843-17.982-13.673-3.06-10.937 1.003-15.31 12.996-7.422 23.371-10.93 24.958-8.155 38.882-10.117 32.042-2.114 44.662-1.657 26.1 3.886 31.057 4.397-.855-1.482-1.315-1.332" class="D J"/><text x="1446.43" y="802.465" class="B C E G I">BarItemComponent</text><path d="M1409.027 879.033c11.759-2.275 28.582-3.282 43.115-3.245s30.698 1.243 44.083 3.47 27.09 6.137 36.226 9.896 15.838 8.207 18.587 12.657 1.766 9.506-2.094 14.046-11.318 9.474-21.064 13.192-23.86 7.321-37.41 9.12-29.477 2.005-43.893 1.673-29.786-1.216-42.6-3.663-26.018-6.946-34.285-11.018-13.389-8.845-15.317-13.416-.523-9.802 3.752-14.012 12.218-8.123 21.895-11.249 28.925-6.153 36.165-7.504 6.591-.964 7.272-.604m-4.551.207c12.59-1.981 29.695-1.886 44.472-1.435s31.609 1.729 44.192 4.144 23.768 6.365 31.311 10.345 13.043 8.722 13.945 13.537-3.154 10.738-8.529 15.353-13.337 9.203-23.722 12.337-24.534 5.297-38.589 6.467-30.862 1.538-45.74.552-31.475-3.841-43.527-6.466-22.289-5.068-28.785-9.283-9.951-11.026-10.191-16.006 2.964-9.913 8.749-13.872 16.802-7.027 25.964-9.885 23.743-6.135 29.007-7.26 1.97.105 2.576.509" class="D J"/><text x="1452.43" y="913.465" class="B C E G I">IconComponent</text><path d="M1037.843 768.756c11.606-2.415 29.055-3.372 43.951-3.284s31.982 1.764 45.423 3.817 26.259 4.973 35.225 8.501 15.577 8.076 18.568 12.666 3.047 10.141-.621 14.873-11.891 9.949-21.384 13.515-22.362 6.054-35.574 7.881-28.986 3.422-43.697 3.083-31.698-2.671-44.574-5.121-24.381-5.811-32.683-9.577-14.571-8.632-17.126-13.02-2.552-8.992 1.792-13.308 14.707-9.179 24.273-12.587 26.075-6.434 33.123-7.86 8.552-1.134 9.165-.698m64.98.892c13.756 1.065 28.874 4.064 39.104 7.384s18.094 8.074 22.276 12.533 5.594 9.454 2.82 14.224-10.848 10.342-19.46 14.398-19.695 7.762-32.214 9.937-28.252 3.105-42.899 3.113-31.176-.954-44.982-3.065-28.32-6.121-37.857-9.605-16.313-6.669-19.368-11.299-2.381-11.618 1.04-16.485 10.573-9.375 19.488-12.716 21.025-5.294 34.005-7.33 30.699-4.403 43.872-4.888 29.698 1.632 35.167 1.979-1.775-.338-2.354.105" class="D J"/><text x="1083.43" y="802.965" class="B C E G I">BarItemComponent</text><path d="M1078.398 876.653c13.922-.804 32.162.827 46.14 2.472s27.714 4.158 37.724 7.395 18.007 7.55 22.336 12.026 5.952 10.012 3.643 14.831-9.106 10.244-17.501 14.08-20.269 6.711-32.868 8.936-28.015 4.308-42.725 4.412-32.048-1.739-45.534-3.791-25.982-5.024-35.379-8.52-17.092-8.152-21.004-12.451-5.476-8.917-2.472-13.345 11.354-9.446 20.499-13.223 21.56-7.262 34.37-9.435 34.269-3.135 42.489-3.6 6.817.237 6.831.812m19.892.448c14.114.494 28.849 3.576 40.012 6.566s21.448 6.937 26.965 11.374 6.851 10.323 6.137 15.251-3.787 10.244-10.422 14.317-17.401 7.58-29.386 10.122-27.611 4.594-42.524 5.132-32.772-.639-46.958-1.902-27.869-2.379-38.159-5.673-18.667-9.401-23.583-14.09-7.099-9.686-5.91-14.045 5.596-8.069 13.047-12.11 18.909-9.326 31.659-12.137 32.006-3.99 44.839-4.728 26.59.123 32.155.303 1.645-.175 1.235.778" class="D J"/><text x="1089.43" y="913.965" class="B C E G I">IconComponent</text><g class="D J"><path d="M1203.052 719.449l-100.057 41.523m102.062-42.679l-103.239 44.22"/><path d="M1123.393 741.313c-7.823 9.853-14.542 17.034-21.215 20.845m20.794-19.406c-5.229 4.833-10.355 10.867-21.246 18.942"/><path d="M1131.424 760.197c-10.765 2.815-20.466 2.984-29.246 1.96m28.825-.522c-7.412-.315-14.73.563-29.277.058m-14.507 71.837l-.782 36.391m-.788-37.665c-.258 5.765-.378 30.138-.157 36.044"/><path d="M1078.671 851.932c3.702 5.82 5.056 9.442 6.51 15.896m-5.251-15.91c1.156 5.625 3.366 9.617 4.845 17.217m5.871-17.348c.365 5.839-1.618 9.502-5.464 16.041m6.724-16.055c-2.371 5.575-3.687 9.61-7.13 17.362m250.219-150.164l98.144 36.773m-96.171-37.815c16.305 5.853 79.805 29.711 95.725 36.144"/><path d="M1402.71 755.049c9.489-.147 16.48-1.507 29.444-1.085m-29.459-.575c10.167.421 18.528-.583 30.953-.028"/><path d="M1410.124 735.914c7.461 4.972 12.459 8.759 22.029 18.05m-22.045-19.71l23.538 19.107m12.791 80.56l.854 33.747m-2.31-34.29c.114 5.55 1.645 26.773 1.813 32.537m-5.284-14.433c1.459 3.505 2.037 7.161 5.191 14.608m-6.602-15.099c1.967 2.677 2.428 7.052 6.09 15.55"/><path d="M1453.123 850.876c-1.823 3.677-4.524 7.504-6.422 15.214m5.011-15.705c-.614 2.811-2.738 7.321-5.523 16.156"/></g><path d="M1295.213 536.122c13.49.672 28.163 2.975 38.742 5.948s19.962 7.571 24.731 11.893 5.793 9.793 3.879 14.038-7.129 7.867-15.365 11.431-21.263 7.749-34.056 9.958-28.407 3.454-42.703 3.298-30.286-2.371-43.072-4.233-24.929-3.61-33.646-6.935-15.768-8.871-18.659-13.014-2.425-7.68 1.309-11.843 11.43-9.945 21.095-13.136 23.379-4.691 36.891-6.008 31.187-2.129 44.181-1.897 25.631 2.242 33.782 3.288 15.739 2.647 15.123 2.986m-33.891-5.553c13.803 1.081 28.744 4.214 39.416 7.134s19.551 6.762 24.616 10.386 7.363 7.225 5.773 11.36-7.723 9.444-15.312 13.45-17.787 8.203-30.223 10.584-29.759 3.735-44.396 3.698-30.511-1.87-43.425-3.918-24.755-5.318-34.059-8.372-18.163-5.811-21.763-9.952-3.168-10.734.16-14.894 10.486-6.799 19.807-10.065 22.381-7.611 36.118-9.53 35.739-2.111 46.306-1.981 14.655 2.19 17.096 2.762-1.991.567-2.449.669m217.944-109.889l236.178-1.145m-237.306-.29l235.016 1.155m1.544-1.632c-1.402 82.316-1.001 165.569-.086 281.232m-.508-280.961l.008 280.87m.582-1.476l-237.811 1.607m236.555-.248c-88.106-1.959-178.395-2.324-234.596-.326m-1.557-1.344c-1.896-60.646.36-121.485 1.202-279.741m-.757 280.78l.837-280.029" class="L D"/><g transform="matrix(1 0 0 1 1512.930011 431.714803)" class="B C F H"><text y="19" x="0">query AppBarQuery {</text><text y="43" x="0"> launchTileBar {</text><text y="67" x="0"> edges {</text><text y="91" x="0"> node {</text><text y="115" x="0"> icon {</text><text y="139" x="0"> src</text><text y="163" x="0"> }</text><text y="187" x="0"> }</text><text y="211" x="0"> }</text><text y="235" x="0"> }</text><text y="259" x="0">}</text></g><g class="D"><path d="M1363.287 561.522l143.887 2.337m-142.024-.348l144.339-1.174" class="L"/><g class="J"><path d="M1264.035 597.258c-.031 8.44 1.479 42.638 1.814 51.135m-.083-52.42c-.205 8.091-.398 42.288-.383 50.654m-9.245-21.985c5.225 9.607 8.294 17.623 8.083 23.872m-7.862-25.634c4.255 8.559 6.399 17.166 8.106 23.878"/><path d="M1273.239 624.69c-1.48 9.46-5.117 17.458-9.018 23.824m9.239-25.586c-1.793 8.69-5.696 17.28-8.995 23.829"/></g><g class="N"><path d="M1270.766 658.692c13.738-.438 29.784 1.254 42.323 3.457s24.932 5.965 32.911 9.765 13.228 8.942 14.965 13.031.322 7.716-4.546 11.499-14.155 8.17-24.662 11.198-24.559 5.579-38.379 6.971-30.202 2.233-44.542 1.381-29.855-3.69-41.5-6.49-21.997-6.63-28.371-10.31-10.102-7.507-9.873-11.769 4.36-9.884 11.248-13.806 18.152-7.404 30.08-9.723 30.893-3.262 41.489-4.189 18.134-1.558 22.09-1.375 1.674 1.829 1.644 2.475m-24.344-2.019c13.06-1.016 28.31-.755 41.839.611s28.854 4.446 39.337 7.582 18.562 7.437 23.563 11.237 7.896 7.556 6.445 11.563-6.824 8.995-15.154 12.478-22.011 6.382-34.829 8.419-27.466 3.275-42.079 3.807-32.459 1.075-45.594-.611-24.601-6.131-33.218-9.506-15.449-6.762-18.479-10.741-3.292-8.923.3-13.129 11.811-9.041 21.251-12.107 26.335-4.97 35.389-6.287 15.603-1.395 18.937-1.612.798-.211 1.069.309m-121.683 112.086c12.774 1.443 24.984 3.997 33.504 7.487s15.536 8.985 17.619 13.452-.43 9.388-5.118 13.354-12.797 7.571-23.01 10.441-24.405 5.622-38.271 6.778-30.691.981-44.923.159-28.861-2.679-40.47-5.093-22.493-5.633-29.181-9.391-10.835-8.956-10.945-13.159 3.848-8.362 10.29-12.057 16.826-7.64 28.357-10.11 26.88-4.009 40.832-4.71 32.076-.104 42.877.506 17.746 2.597 21.928 3.152 4.001-.079 3.164.176m-11.214-1.946c13.253 1.256 26.037 4.317 34.884 7.77s15.147 8.563 18.198 12.949 3.505 9.267.109 13.366-10.668 8.479-20.488 11.229-24.572 3.697-38.427 5.271-30.474 4.331-44.702 4.175-28.741-2.404-40.665-5.115-23.145-7.665-30.878-11.146-14.371-5.663-15.52-9.743 2.775-10.845 8.626-14.735 15.38-6.004 26.483-8.606 26.078-5.813 40.132-7.008 33.71-.623 44.195-.158 16.016 2.79 18.716 2.947-1.898-1.965-2.515-2.009m-20.152 109.844c13.806-.061 28.706 2.336 40.853 4.609s24.779 5.299 32.025 9.031 10.955 9.023 11.451 13.365-2.476 8.927-8.475 12.687-16.34 7.126-27.517 9.873-25.554 5.462-39.548 6.608-30.422 1.439-44.415.27-28.431-4.239-39.542-7.287-21.789-7.188-27.125-11-6.332-7.864-4.893-11.873 6.19-8.388 13.524-12.182 18.024-8.305 30.48-10.58 33.376-2.621 44.257-3.07 16.958.155 21.029.377 3.536.492 3.395.954m-8.211-2.665c13.882-.45 31.938 1.465 44.086 4.085s21.536 7.647 28.803 11.636 13.685 8.378 14.799 12.297-2.311 7.424-8.114 11.216-15.627 8.461-26.707 11.536-25.56 6.111-39.777 6.917-31.159-1.116-45.522-2.081-29.693-.957-40.654-3.707-19.871-8.573-25.113-12.792-7.256-8.243-6.337-12.518 4.605-9.518 11.85-13.133 19.252-6.32 31.623-8.554 32.039-4.152 42.6-4.852 17.717.212 20.764.651-2.204 1.667-2.482 1.981m343.145-113.441c13.637-.437 29.393 1.228 42.483 2.824s26.794 3.631 36.055 6.755 16.197 7.772 19.507 11.988 3.744 9.048.358 13.309-11.296 9.182-20.677 12.258-22.489 4.624-35.605 6.198-28.546 3.521-43.088 3.242-31.534-2.72-44.164-4.919-23.862-4.934-31.616-8.28-13.642-7.392-14.911-11.794 1.92-10.638 7.294-14.616 14.364-6.611 24.95-9.248 26.026-5.288 38.564-6.571 28.084-1.278 36.667-1.129 15.058 1.398 14.832 2.023m11.813 1.293c12.876 1.342 26.715 4.451 36.092 7.593s16.916 7.097 20.173 11.258 3.002 9.867-.627 13.712-11.638 6.11-21.152 9.353-22.507 8.114-35.93 10.108-30.146 2.587-44.611 1.854-30.178-3.954-42.175-6.252-22.12-4.351-29.808-7.541-14.908-7.498-16.325-11.601 2.378-9.011 7.822-13.02 14.026-7.853 24.845-11.034 26.338-6.867 40.072-8.05 31.848.403 42.331.95 17.16 2.15 20.571 2.334.519-1.389-.107-1.233"/><path d="M1487.43 882.192c13.394 1.051 27.143 4.809 36.829 7.752s17.411 5.807 21.291 9.904 4.793 10.274 1.989 14.678-9.92 8.677-18.815 11.743-21.745 4.912-34.552 6.651-27.828 3.623-42.288 3.783-31.668-.899-44.469-2.823-24.13-5.212-32.334-8.722-14.832-7.914-16.892-12.342.098-10.156 4.532-14.227 11.849-7.433 22.07-10.2 25.226-4.967 39.26-6.4 33.678-2.163 44.942-2.196 18.367 1.297 22.642 1.998 3.566 1.639 3.004 2.209m-41.929-5.126c13.565-.092 30.357 3.047 43.304 5.026s25.752 3.767 34.375 6.847 14.643 7.305 17.362 11.633 3.033 9.898-1.047 14.335-13.346 9.113-23.43 12.282-23.164 5.396-37.072 6.734-32.139 2.042-46.375 1.297-27.552-3.423-39.042-5.771-22.538-4.919-29.902-8.317-13.572-7.497-14.281-12.074 3.84-11.514 10.025-15.388 15.691-5.241 27.086-7.858 31.276-6.739 41.287-7.844 15.849 1.083 18.782 1.217-.887-.885-1.187-.415m-165.028-288.49c.178 11.472.242 56.313.011 67.485m-1.398-68.453l.764 66.687"/><path d="M1276.416 630.803c3.011 3.904 4.658 10.287 11.014 28.198m-10.997-30.027c3.329 10.103 7.114 21.569 10.165 28.334"/><path d="M1296.934 630.428c-1.573 4.011-4.505 10.478-9.504 28.573m9.521-30.402c-4.073 10.237-7.692 21.838-10.353 28.709m74.615 48.498l107.48 41.399m-108.709-41.991l107.484 43.358"/><path d="M1438.922 746.767c4.425-.366 10.22 2.928 29.101.341m-29.709 1.305c11.018-1.142 20.419-1.134 28.244.9"/><path d="M1446.532 727.709c2.911 3.73 7.081 11.092 21.491 19.399m-22.099-17.753c8.207 5.823 14.854 12.728 20.633 19.958m1.88 79.264l-.452 47.783m2.476-48.347c.031 7.942-2.458 38.75-3.004 46.692"/><path d="M1462.488 853.019c1.255 4.536-.041 10.438 6.761 21.005m-7.788-22.495c.555 7.168 2.564 14.552 6.551 22.178"/><path d="M1478.804 854.228c-2.293 4.227-7.142 9.865-9.555 19.796m8.529-21.287c-4.222 6.95-6.996 13.98-9.765 20.97M1011.62 440.025l70.863.245m-71.864-1.403c12.116-.262 61.92-.363 74.056-.225"/></g></g><text y="444.958" x="1096.294" class="B C E Q">React Props</text><g class="D"><g class="N"><path d="M1252.069 715.882l-111.895 50.345m110.747-48.192l-111.901 49.449"/><path d="M1159.109 745.962c-6.472 6.17-11.962 16.142-21.038 21.729m22.307-21.693c-8.229 8.804-16.437 16.756-21.283 21.752m28.385-3.051c-9.069.18-17.254 4.122-29.409 2.992m30.678-2.957c-11.34 1.612-22.738 2.426-29.654 3.015m-28.857 59.088c-.04 8.535-.99 41.467-1.487 49.464m.076-50.012l-.736 48.316"/><path d="M1101.35 852.137c1.313 2.256.538 9.8 6.796 23.322m-7.521-25.147c.73 9.06 5.085 14.628 8.313 23.956"/><path d="M1118.326 852.258c-2.142 2.244-6.373 9.763-10.181 23.201m9.456-25.025c-4.502 8.886-5.381 14.417-8.663 23.835"/></g><path d="M1012.791 474.579l72.41-1.205m-73.846.1l72.754 1.223" class="L"/></g><text y="479.535" x="1098.294" class="B C E F">GraphQL Operation</text><g transform="matrix(1 0 0 1 1029.380671 252.535235)" class="B E G I K"><text x="304" y="32">Pure Component Tree</text><text x="304" y="77">with separated data requirements</text><text x="304" y="122">and propagated data</text></g><g transform="matrix(1 0 0 1 2806.055885 582.894209)" class="B C F H"><text y="19" x="0">fragment TileBar on TileBarConnection {</text><text y="43" x="0"> edges {</text><text y="67" x="0"> node {</text><text y="91" x="0"> ...TileBarItem</text><text y="115" x="0"> }</text><text y="139" x="0"> }</text><text y="163" x="0">}</text></g><path d="M2419.076 538.794c11.751-2.301 28.486-2.393 43.171-2.5s31.635.123 44.938 1.856 25.692 4.976 34.88 8.542 16.87 8.088 20.249 12.855 3.48 10.956.026 15.746-11.487 9.451-20.749 12.998-21.59 6.552-34.82 8.285-29.861 2.32-44.564 2.111-30.641-1.207-43.65-3.365-25.874-5.843-34.406-9.585-14.161-8.114-16.788-12.866-2.867-11.098 1.029-15.646 12.99-8.307 22.35-11.646 26.871-7.159 33.811-8.391 7.081.478 7.826.998m28.493-2.659c13.527-.461 31.174 1.158 44.593 2.875s26.529 3.978 35.919 7.426 17.144 8.633 20.423 13.258 2.323 9.806-.752 14.493-8.4 10.006-17.697 13.627-24.319 6.129-38.086 8.099-30.15 3.433-44.514 3.723-29.025-.062-41.669-1.988-25.301-5.744-34.191-9.57-16.602-8.592-19.146-13.386-.597-10.861 3.881-15.375 12.938-8.201 22.986-11.711 25.637-7.198 37.299-9.349 27.388-3.374 32.672-3.561-1.069 1.874-.965 2.435" class="D J"/><text x="2467.044" y="572.84" class="B C E G I">AppBarContainer</text><path d="M2449.876 660.6c13.606-1.084 31.768-1.015 45.684.218s27.38 3.974 37.808 7.178 19.766 7.428 24.757 12.044 6.989 10.772 5.189 15.656-8.085 9.782-15.991 13.646-18.993 7.33-31.445 9.538-28.604 3.385-43.263 3.713-30.981-.074-44.692-1.744-27.742-4.875-37.577-8.278-17.173-7.509-21.436-12.141-6.404-10.98-4.142-15.652 8.986-8.613 17.718-12.382 22.824-8.155 34.67-10.23 29.657-1.762 36.405-2.219 3.883-1.123 4.083-.528m-17.78.943c13.296-1.736 30.938-2.34 45.365-1.489s29.815 3.586 41.194 6.593 20.654 7.067 27.08 11.446 11.826 10.138 11.48 14.824-6.351 9.104-13.555 13.294-18.13 8.641-29.666 11.849-25.421 6.308-39.554 7.401-30.854.482-45.243-.846-30.17-3.791-41.096-7.119-19.395-8.469-24.459-12.852-7.23-8.709-5.924-13.45 6.3-10.521 13.755-14.993 20.785-9.456 30.975-11.838 24.83-1.876 30.162-2.453 1.304-1.427 1.829-1.005" class="D J"/><text x="2464.044" y="696.84" class="B C E G I">BarComponent</text><path d="M2633.467 769.427c13.659-1.199 30.314-.14 44.048 1.376s28.073 4.15 38.36 7.719 18.964 9.004 23.361 13.696 5.099 9.887 3.018 14.454-7.308 9.286-15.502 12.948-20.817 6.79-33.661 9.024-28.691 4.082-43.401 4.378-31.419-.822-44.863-2.602-26.063-4.392-35.803-8.077-18.681-9.438-22.639-14.034-4.156-8.964-1.112-13.543 10.214-10.3 19.375-13.932 22.301-5.84 35.594-7.86 34.929-3.937 44.165-4.261 11.323 1.831 11.253 2.319m-6.964-2.913c14.124-.419 31.167 1.978 43.93 4.335s24.084 5.815 32.649 9.806 16.632 9.499 18.738 14.139-1.158 9.209-6.098 13.705-13.615 9.469-23.541 13.271-22.512 7.689-36.019 9.542-30.147 2.131-45.024 1.574-31.812-2.21-44.238-4.916-23.048-7.283-30.316-11.319-12.143-8.161-13.295-12.902 1.135-10.723 6.386-15.542 14.516-10.26 25.119-13.372 26.24-3.943 38.497-5.301 29.311-2.652 35.045-2.846-.22 1.165-.639 1.687" class="D J"/><text x="2644.044" y="806.84" class="B C E G I">BarItemComponent</text><path d="M2694.915 883.384c13.031 1.519 26.114 5.219 35.009 9.167s15.732 9.687 18.357 14.522 1.258 10.043-2.611 14.488-10.97 8.883-20.6 12.183-23.547 5.912-37.181 7.618-29.929 2.908-44.621 2.619-30.911-2.05-43.532-4.352-23.913-5.422-32.194-9.46-15.33-10.059-17.493-14.765-.293-9.048 4.514-13.472 13.796-9.829 24.326-13.073 24.838-4.912 38.853-6.391 31.176-3.047 45.236-2.482 31.795 4.867 39.12 5.871 5.668-.035 4.828.153m-52.128-6.657c13.995-.197 29.704 1.631 42.806 4.037s27.445 6.538 35.811 10.397 12.629 8.079 14.384 12.758.315 10.402-3.857 15.314-11.3 10.494-21.174 14.155-23.956 6.232-38.066 7.811-31.912 2.344-46.596 1.663-29.419-3.21-41.507-5.749-23.477-5.407-31.019-9.484-12.834-9.852-14.233-14.978.78-11.451 5.84-15.778 13.629-7.024 24.517-10.183 28.482-7.273 40.806-8.77 27.87-.096 33.14-.209-1.18-.951-1.521-.472" class="D J"/><text x="2650.044" y="917.84" class="B C E G I">IconComponent</text><path d="M2275.491 769.271c13.955-.539 31.311 1.712 44.755 3.767s26.236 5.087 35.91 8.566 18.279 7.964 22.133 12.311 3.966 9.218.989 13.768-9.801 9.761-18.852 13.529-22.302 6.942-35.456 9.077-28.59 3.863-43.469 3.731-32.334-2.388-45.805-4.522-26.131-4.566-35.019-8.279-15.571-9.457-18.312-13.997-2.027-8.726 1.867-13.241 11.773-10.377 21.496-13.853 22.484-5.173 36.842-7.003 38.356-3.613 49.303-3.98 16.472 1.224 16.379 1.78m-69.769.714c12.392-2.176 32.055-2.336 46.789-2.203s29.006.768 41.613 3.002 25.095 6.154 34.033 10.405 16.795 10.182 19.595 15.102 1.685 9.92-2.79 14.419-13.991 9.275-24.056 12.575-22.898 5.54-36.332 7.226-29.695 3.366-44.272 2.89-30.514-2.858-43.193-5.747-24.731-7.672-32.879-11.585-14.474-7.237-16.011-11.889 1.627-11.503 6.793-16.024 15.725-8.056 24.201-11.105 22.093-6.22 26.657-7.188-.285.594.729 1.376" class="D J"/><text x="2281.044" y="807.34" class="B C E G I">BarItemComponent</text><path d="M2265.022 882.252c13.219-1.242 30.274-.907 44.66.102s30.169 3.156 41.659 5.952 21.266 6.584 27.281 10.82 9.357 9.84 8.807 14.597-5.22 9.719-12.11 13.941-17.092 8.767-29.23 11.394-28.781 3.636-43.596 4.365-31.253 1.342-45.295.008-28.315-4.879-38.962-8.013-19.777-6.418-24.917-10.788-7.338-10.813-5.921-15.435 6.773-8.24 14.421-12.295 20.024-9.305 31.466-12.036 30.063-3.698 37.186-4.352 5.434-.155 5.551.427m-21.781 1.361c12.679-1.981 28.602-2.969 42.845-2.419s29.886 2.744 42.616 5.714 25.796 7.799 33.768 12.105 13.049 9.053 14.061 13.731-2.598 10.102-7.986 14.338-13.815 7.892-24.344 11.078-24.788 6.759-38.828 8.039-30.791.879-45.409-.357-30.134-4.358-42.302-7.062-23.895-5.026-30.705-9.161-9.876-10.849-10.155-15.652 2.688-8.872 8.48-13.164 16.989-9.735 26.268-12.592 24.047-4.053 29.404-4.547 1.895 1.168 2.734 1.586" class="D J"/><text x="2287.044" y="918.34" class="B C E G I">IconComponent</text><g class="D J"><path d="M2400.507 723.818l-100.201 41.461m102.123-42.62l-99.798 44.126"/><path d="M2323.999 744.871c-6.132 8.377-13.726 14.361-20.501 22.095m20.587-20.668c-7.375 7.655-14.053 12.783-22.446 19.607"/><path d="M2332.211 763.678c-8.41 2.901-18.378 3.445-28.713 3.289m28.799-1.861c-9.971 1.47-19.366.377-30.658.801m-16.812 71.695l-.844 36.494m-.729-34.267c-.181 5.755-.65 27.155-.25 32.542"/><path d="M2275.632 855.947c3.667 2.914 5.228 8.954 7.531 16.963m-6.281-17.164c2.186 4.322 2.172 7.154 5.353 16.592"/><path d="M2287.605 855.722c.7 2.948-.706 9.043-4.443 17.188m5.693-17.389c-.641 4.342-3.483 7.228-6.621 16.816m250.072-149.057l98.247 35.134m-96.434-36.211c16.295 6.031 79.872 31.387 95.883 37.305"/><path d="M2599.908 760.192c6.36.332 16.306-.601 30.711-1.961m-30.94 1.612c10.858-1.575 20.035-1.453 30.286-.907"/><path d="M2607.295 741.047c4.437 5.182 12.493 9.145 23.323 17.184m-23.552-17.533c8.256 5.045 14.884 11.774 22.899 18.239m14.018 79.159l-.785 34m-.706-34.649c.292 5.641 2.711 27.028 2.974 32.924"/><path d="M2639.448 853.724c1.905 6.294 2.986 10.437 4.934 17.414m-5.23-16.063c.505 3.238 2.372 8.259 5.83 14.606m6.057-16.9c-1.369 6.554-3.556 10.963-6.657 18.357m6.36-17.006c-2.651 3.456-3.943 8.735-5.76 15.548"/></g><path d="M2495.473 540.107c13.443.802 27.826 4.202 37.994 7.288s18.451 7.073 23.016 11.23 6.718 9.579 4.37 13.715-9.783 7.643-18.461 11.099-20.879 7.625-33.606 9.639-28.472 2.319-42.757 2.445-30.123.183-42.953-1.686-25.42-6.155-34.027-9.526-15.057-6.426-17.615-10.702-1.943-10.577 2.27-14.955 12.953-8.237 23.008-11.312 23.901-5.774 37.323-7.14 32.37-1.074 43.206-1.055 17.558.535 21.811 1.169 4.21 2.172 3.708 2.635m-72.431-.08c12.482-1.656 29.803-2.41 43.886-2.071s28.409 2.009 40.608 4.105 24.754 4.811 32.587 8.471 13.166 9.261 14.41 13.493-1.382 8.361-6.946 11.901-15.295 6.468-26.438 9.343-26.511 6.836-40.419 7.904-29.136-.442-43.028-1.495-28.933-2.068-40.322-4.825-22.053-7.723-28.012-11.719-8.956-8.267-7.745-12.258 7.45-7.901 15.01-11.69 22.788-9.095 30.352-11.044 12.133-.618 15.031-.649 1.926-.061 2.356.464m369.447-106.325l471.866-.21m-472.785-.618l472.928.637m1.761-1.124c-4.287 39.629-4.042 78.084-3.147 131.538m.794-129.961c-.498 32.451-.992 66.286.495 132.232m-.229.228c-185.869 1.384-372.085 1.918-471.696-.709m472.281.121l-473.175-.603m.801-.773c-1.335-34.09.845-70.613-2.042-129.276m2.574 131.307c-1.466-36.782-.802-74.886-.964-133.652" class="L D"/><g transform="matrix(1 0 0 1 2805.543647 441.089803)" class="B C F H"><text y="19" x="0">query AppBarQuery {</text><text y="43" x="0"> launchTileBar {</text><text y="67" x="0"> ...TileBar</text><text y="91" x="0"> }</text><text y="115" x="0">}</text></g><g class="D"><path d="M2562.064 567.199l239.604-2.043m-240.79 1.055l240.036.081" class="L"/><g class="J"><path d="M2462.652 602.459l-.875 50.171m-.528-51.022c.065 7.933 2.833 40.49 2.837 49.184"/><path d="M2455.072 626.445c3.882 9.094 6.874 17.361 10.84 24.707m-11.494-24.001c1.111 5.495 4.479 10.702 9.043 23.584"/><path d="M2472.154 625.651c-2.317 9.397-5.527 17.953-6.242 25.501m5.589-24.795c-2.651 5.519-3.036 10.901-8.04 24.378"/></g><g class="N"><path d="M2485.007 665.123c13.8.323 29.5 1.664 40.528 4.069s19.9 6.44 25.642 10.36 9.602 8.825 8.809 13.159-6.398 9.104-13.565 12.848-17.353 7.272-29.437 9.617-28.748 4.045-43.067 4.455-29.236-.553-42.849-1.999-28.722-3.67-38.829-6.679-17.838-7.148-21.812-11.377-4.784-9.706-2.029-13.998 9.77-8.422 18.559-11.753 20.952-6.468 34.178-8.235 33.788-2.069 45.175-2.366 18.596.226 23.146.582 4.369.814 4.156 1.553m-1.089-.222c13.439 1.042 27.264 4.143 37.802 7.119s20.539 6.879 25.427 10.738 6.057 8.475 3.896 12.416-8.909 7.645-16.863 11.228-18.302 8.037-30.862 10.268-29.94 3.233-44.494 3.117-29.594-1.84-42.83-3.812-27.376-5.067-36.584-8.019-15.84-5.832-18.664-9.69-1.782-9.202 1.717-13.455 9.716-9.063 19.28-12.064 24.411-4.181 38.106-5.944 33.373-4.181 44.06-4.634 17.136 1.536 20.063 1.915-2.059-.366-2.502.358m-221.281 109.267c13.258-1.077 29.322-1.253 42.717.082s27.505 4.871 37.655 7.93 18.777 6.307 23.244 10.423 5.807 10.063 3.558 14.272-8.565 7.496-17.053 10.984-20.935 8.058-33.874 9.946-29.315 1.62-43.761 1.381-30.043-.959-42.914-2.815-25.473-4.989-34.309-8.321-16.051-7.476-18.706-11.672-1.425-9.633 2.772-13.506 12.369-6.68 22.407-9.729 26.907-6.861 37.818-8.569 21.47-1.73 27.645-1.677 9.047 1.286 9.406 1.993m38.568 2.156c13.282 1.393 26.252 5.875 35.06 9.202s15.313 7.03 17.788 10.758 1.424 7.491-2.939 11.613-13.379 10.007-23.237 13.119-22.448 4.203-35.911 5.553-30.172 3.057-44.867 2.545-30.997-3.223-43.306-5.618-23.72-5.368-30.547-8.752-9.978-7.239-10.419-11.55 2.049-10.498 7.771-14.321 15.17-6.222 26.564-8.619 27.834-4.932 41.796-5.762 31.736.644 41.974.782 16.384-.384 19.455.047-.598 2.269-1.031 2.542m-25.055 106.381c13.715-.318 28.841 1.877 41.018 4.187s24.616 5.929 32.049 9.675 11.466 8.497 12.55 12.8-.471 9.085-6.05 13.016-16.47 7.889-27.426 10.571-24.198 4.496-38.31 5.522-32.004 1.501-46.367.633-28.736-2.964-39.808-5.842-20.96-7.407-26.623-11.429-8.213-8.501-7.355-12.701 5.021-8.909 12.504-12.496 20.223-6.712 32.392-9.026 29.199-4.197 40.626-4.858 21.787.371 27.935.893 9.008 1.587 8.952 2.234m-48.31-.609c13.013-1.292 31.481-1.091 45.536-.26s28.106 2.802 38.795 5.248 19.516 5.486 25.336 9.428 10.399 9.856 9.583 14.223-7.12 8.639-14.483 11.978-17.553 5.993-29.691 8.053-28.697 3.513-43.137 4.305-30.24 1.653-43.503.448-26.171-4.418-36.078-7.679-19.429-8.006-23.361-11.888-3.235-7.078-.232-11.407 9.332-10.908 18.253-14.563 26.608-5.781 35.271-7.364 13.509-2.176 16.71-2.137 2.262 1.632 2.495 2.372m361.789-115.09c13.031-1.109 30.6.563 44.455 1.855s28.178 2.869 38.675 5.896 19.497 8.233 24.309 12.264 6.476 7.666 4.565 11.926-7.77 10.192-16.027 13.636-20.851 5.26-33.515 7.027-28.097 3.406-42.468 3.576-30.461-.836-43.758-2.557-26.903-4.426-36.023-7.772-15.813-8.341-18.697-12.306-2.467-7.422 1.393-11.488 12.101-9.51 21.768-12.908 25.384-6.162 36.233-7.478 22.33-.436 28.86-.422 10.028.217 10.323.51m39.48 2.999c13.082 1.321 25.764 4.125 34.447 7.049s15.23 6.275 17.648 10.498.82 10.741-3.139 14.836-10.903 6.73-20.615 9.734-23.758 6.834-37.655 8.293-31.091.994-45.725.464-30.301-1.616-42.079-3.641-21.634-4.757-28.589-8.508-12.182-9.818-13.137-13.999 1.42-7.491 7.402-11.087 17.514-7.877 28.494-10.49 23.574-4.022 37.385-5.192 34.828-2.19 45.486-1.827 15.221 3.741 18.463 4.005 1.402-2.523.987-2.423"/><path d="M2692.624 886.499c12.941 1.433 26.63 5.131 35.388 8.616s14.495 8.05 17.163 12.294 2.922 9.085-1.153 13.173-13.441 8.335-23.296 11.356-22.182 5.295-35.834 6.768-31.435 2.479-46.075 2.071-29.735-2.016-41.764-4.52-23.312-6.692-30.406-10.506-11.415-8.173-12.154-12.376 1.658-9.038 7.719-12.838 17.419-7.271 28.648-9.962 24.842-5.287 38.725-6.187 32.745-.037 44.574.787 21.164 3.2 26.396 4.153 5.987 1.169 4.998 1.566m-37.736-5.114c13.755.104 28.753 2.226 40.04 4.447s20.981 5.057 27.683 8.877 12.368 9.666 12.527 14.04-5.07 8.73-11.573 12.203-15.862 6.344-27.44 8.637-27.728 4.048-42.028 5.123-30.2 2.259-43.774 1.325-27.07-3.871-37.67-6.932-21.073-7.636-25.934-11.431-5.272-6.965-3.233-11.338 7.34-11.076 15.468-14.897 20.927-6.058 33.3-8.029 30.478-3.522 40.939-3.797 18.73 1.72 21.829 2.15-2.659.339-3.236.43M2484.649 597.41l.163 64.896m1.831-65.367c-.094 11.058-2.504 55.393-2.665 66.399"/><path d="M2476.583 635.149c-.861 5.466 1.498 15.154 6.253 26.56m-8.703-26.977c4.134 7.509 4.959 15.997 9.067 28.713m13.891-27.542c-6.451 5.193-9.68 14.676-14.255 25.806m11.804-26.223c-1.55 7.281-6.406 15.561-11.44 27.959m76.283 46.088l106.388 41.182m-107.272-42.114l109.479 43.026"/><path d="M2638.451 749.148c7.243-.147 18.741.75 27.998 2.02m-28.415.415c9.899-1.241 20.786-.817 30.152-.699"/><path d="M2646.028 730.077c4.757 6.021 13.832 13.016 20.421 21.091m-20.838-18.656c7.276 5.267 15.559 12.246 22.574 18.372m-1.581 80.187l-2.996 47.718m1.65-45.609l.437 46.593"/><path d="M2655.906 855.315c2.237 7.896 5.04 12.344 9.33 25.332m-6.895-23.813c.51 7.119 3.012 13.646 6.611 22.09m7.315-23.612c-2.132 7.926-3.698 12.375-7.031 25.335m9.466-23.816c-4.247 7.111-6.502 13.639-9.75 22.092m-457.553-440.441c11.763-.195 60.468.352 72.635.236m-70.94 1.754l73.098-.24"/></g></g><text y="444.958" x="2293.907" class="B C E Q">React Props</text><g class="D"><g class="N"><path d="M2448.034 721.09l-110.539 49.068m112.186-50.137l-109.833 51.162"/><path d="M2361.152 748.995c-6.46 5.118-8.655 10.018-22.557 22.075m22.747-21.711l-22.183 20.912"/><path d="M2369.679 767.661c-8.149.942-12.217 1.74-31.084 3.409m31.274-3.045l-30.71 2.246m-31.443 59.308c-.289 8.396-2.647 41.646-2.876 50.008m1.394-47.753l.805 49.145"/><path d="M2297.203 856.105c2.223 7.175 4.244 9.715 9.723 26.533m-9.359-24.796c2.028 4.927 4.539 10.981 8.56 22.443"/><path d="M2314.179 855.955c-1.188 7.198-2.576 9.769-7.254 26.683m7.618-24.947c-2.277 4.984-4.071 11.077-8.417 22.593"/></g><path d="M2209.677 473.611l73.136.593m-71.295 1.509l70.202-3.356" class="L"/></g><text y="479.535" x="2295.907" class="B C E F">GraphQL Operation/Fragments</text><g class="D L"><path d="M2452.738 666.936c12.974-.92 29.123-.888 42.251.386s26.986 4.488 36.517 7.26 17.064 5.662 20.67 9.372 4.31 8.954.969 12.889-11.442 8.003-21.016 10.723-23.165 4.168-36.426 5.598-29.021 3.167-43.141 2.982-29.968-1.694-41.574-4.093-21.426-6.701-28.063-10.298-11.291-7.584-11.756-11.284 3.069-7.695 8.964-10.918 15.068-6.121 26.405-8.419 33.694-4.52 41.621-5.37 4.284.001 5.94.275 3.642.798 3.991 1.369m34.638.685c13.221.768 28.797 3.965 38.484 6.418s16.018 4.814 19.638 8.303 4.864 8.578 2.082 12.634-9.793 8.699-18.778 11.7-21.892 5.053-35.129 6.307-29.905 1.435-44.292 1.216-29.947-.547-42.033-2.532-23.643-6.144-30.484-9.377-10.149-6.155-10.565-10.016 2.652-9.605 8.07-13.151 13.735-5.863 24.436-8.124 25.643-4.675 39.774-5.441 36.729.804 45.014.845 4.293-.879 4.697-.603-1.49 1.507-2.271 2.258m146.64 107.97c13.199-.325 30.136.746 43.112 2.386s25.686 4.568 34.746 7.455 16.744 6.199 19.612 9.872 1.875 8.524-2.404 12.165-13.25 7.127-23.27 9.682-23.555 4.36-36.845 5.646-28.938 2.632-42.893 2.074-29.515-3.036-40.839-5.423-20.929-5.523-27.104-8.899-9.983-7.468-9.944-11.357 3.391-8.774 10.177-11.975 18.746-5.376 30.537-7.227 31.094-2.984 40.21-3.879 10.606-1.414 14.485-1.491 8.787.586 8.791 1.026m-29.065.825c13.082-1.118 30.673-2.615 44.579-1.581s28.898 4.745 38.854 7.788 17.065 6.702 20.882 10.469 4.484 8.396 2.023 12.131-8.566 7.259-16.786 10.276-19.999 6.593-32.536 7.827-28.155.061-42.686-.422-31.917-.914-44.503-2.475-23.6-3.816-31.01-6.893-11.999-7.727-13.449-11.567-.6-8.008 4.747-11.471 16.477-6.918 27.338-9.312 30.699-4.091 37.827-5.052 4.202-.818 4.944-.715-.62.853-.49 1.331m-308.777 1.146c12.544 1.453 25.62 5.111 34.271 8.216s15.459 6.726 17.637 10.413-.123 8.086-4.567 11.706-11.981 7.334-22.1 10.015-24.902 5.004-38.615 6.069-29.648.977-43.665.319-29.188-1.977-40.438-4.264-21.316-6.037-27.06-9.459-8.264-7.201-7.403-11.072 5.348-8.775 12.571-12.155 18.803-6.147 30.767-8.126 27.017-3.459 41.016-3.752 32.729 1.181 42.979 1.997 13.731 1.962 18.519 2.901 10.87 2.587 10.21 2.736m-81.335-7.03c13.209-1.151 29.294-.93 42.861-.04s28.069 2.881 38.542 5.379 19.929 6.062 24.297 9.611 3.807 7.563 1.91 11.685-5.42 9.679-13.288 13.045-21.083 5.637-33.919 7.15-28.949 2.088-43.098 1.931-29.361-.984-41.798-2.873-24.635-5.426-32.825-8.463-14.14-6.108-16.317-9.763-1.529-8.606 3.256-12.168 14.808-6.827 25.452-9.207 30.958-4.044 38.414-5.073 5.126-1.184 6.323-1.103.583 1.129.855 1.589m538.863-201.871l471.402.6m-471.052.009l470.932-.353m1.758 1.384c-.373 38.45.137 81.177-2.548 180.338m1-182.225c-1.663 68.798-1.791 138.234.003 181.067m.334.76c-98.956.392-196.68.492-471.993-.539m471.639.669l-471.224.184m-.543.355c-1.37-51.36-1.174-97.905 1.311-180.021m-1.286 179.677l.959-182.034"/><path d="M2554.247 689.312l246.134.58m-244.277 1.729l243.151-.192m1.901 78.672l470.044.578m-470.938-.171l470.481-.062m.774-.69c-1.658 39.497-1.544 79.304-.937 130.371m-.333-130.199c2.19 47.946 2.01 93.861 1.576 130.926m-1.272.204c-154.811-.682-308.1-1.613-469.52.162m470.396.222l-470.824.032m-.707.422c.791-28.467.091-54.618.42-130.445m.644 130.382c-1.541-52.897-.989-103.789-1.412-131.185"/></g><g transform="matrix(1 0 0 1 2806.055885 775.278824)" class="B C F H"><text y="19" x="0">fragment TileBarItem on TileBarNode {</text><text y="43" x="0"> icon {</text><text y="67" x="0"> src</text><text y="91" x="0"> }</text><text y="115" x="0">}</text></g><path d="M2735.493 799.545c10.548-.297 54.181-.976 65.085-.862m-63.382-.367c10.273-.181 51.702 1.648 62.183 1.672m.188 4.303l-50.079 1.144m51.902.951c-8.617.396-43.669.6-52.461.668m-211.989-3.149c-27.342.033-137.653-.096-165.19.062m164.195 2.235c-27.381.307-137.157-.133-164.562-.665" class="D L"/><g transform="matrix(1 0 0 1 2413.936227 252.535235)" class="B E G I K"><text x="294.5" y="32">Fragmentized Component Tree</text><text x="294.5" y="77">with colocated data requirements</text><text x="294.5" y="122">and propagated data</text></g><g transform="matrix(1 0 0 1 4043.275388 776.237651)" class="B C F H"><text y="19" x="0">fragment TileBarItem on TileBarNode {</text><text y="43" x="0"> icon {</text><text y="67" x="0"> src</text><text y="91" x="0"> }</text><text y="115" x="0">}</text></g><g transform="matrix(1 0 0 1 4043.275388 583.853036)" class="B C F H"><text y="19" x="0">fragment TileBar on TileBarConnection {</text><text y="43" x="0"> edges {</text><text y="67" x="0"> node {</text><text y="91" x="0"> ...TileBarItem</text><text y="115" x="0"> }</text><text y="139" x="0"> }</text><text y="163" x="0">}</text></g><path d="M3691.94 536.974c13.711-.66 30.659.453 44.436 1.925s27.859 3.634 38.228 6.903 19.641 8.285 23.985 12.715 4.379 9.286 2.08 13.864-7.42 9.5-15.872 13.603-21.662 8.518-34.842 11.014-29.595 3.979-44.238 3.962-30.332-2.187-43.619-4.06-26.518-3.581-36.101-7.181-17.754-9.86-21.399-14.424-3.749-8.585-.472-12.958 10.757-9.355 20.138-13.284 23.28-8.208 36.147-10.291 32.773-1.811 41.053-2.208 8.621-.794 8.625-.178m31.59 3.122c12.961 1.107 25.921 3.732 35.302 7.055s17.164 8.162 20.984 12.881 4.981 10.552 1.938 15.432-11.095 9.906-20.197 13.846-21.398 7.675-34.415 9.795-29.215 3.24-43.687 2.926-29.796-2.691-43.15-4.809-27.667-4.24-36.972-7.901-16.189-9.056-18.853-14.063-1.345-11.488 2.864-15.98 12.686-7.718 22.391-10.969 22.105-6.814 35.834-8.541 33.312-1.927 46.539-1.819 27.689 2.091 32.824 2.464-1.151-.556-2.015-.226" class="D J"/><text x="3704.263" y="573.799" class="B C E G I">AppBarContainer</text><path d="M3653.282 664.635c11.626-2.705 29.279-4.558 44.263-4.87s32.215 1.134 45.639 3.003 25.524 4.645 34.906 8.207 17.955 8.323 21.385 13.164 2.731 11.045-.804 15.882-11.193 9.692-20.41 13.138-21.699 5.539-34.892 7.539-29.427 4.571-44.269 4.459-31.607-2.956-44.783-5.132-25.703-4.346-34.271-7.924-14.789-8.652-17.136-13.54-.999-11.186 3.053-15.785 12.66-8.465 21.259-11.808 24.372-7.111 30.335-8.248 4.468.666 5.443 1.422m49.443-4.565c13.885-.173 30.172 2.286 42.646 5.034s24.758 7.117 32.199 11.45 11.389 9.617 12.45 14.547-.823 10.591-6.087 15.035-14.775 8.762-25.495 11.629-24.456 4.305-38.829 5.57-32.524 2.791-47.41 2.023-30.244-3.433-41.907-6.633-21.713-8.427-28.071-12.568-9.812-7.848-10.073-12.278 2.096-10.109 8.508-14.3 18.167-7.988 29.962-10.847 28.569-5.037 40.81-6.304 27.237-1.163 32.634-1.298.064.088-.251.489" class="D J"/><text x="3701.263" y="697.799" class="B C E G I">BarComponent</text><path d="M3906.449 770.816c14.173.527 30.108 3.956 41.221 6.977s19.742 6.88 25.46 11.15 9.684 9.511 8.85 14.47-6.329 10.943-13.853 15.283-19.182 8.321-31.294 10.758-26.977 3.18-41.376 3.866-30.909 1.709-45.021.248-28.99-5.734-39.65-9.017-19.524-6.469-24.306-10.685-6.316-9.684-4.385-14.61 8.027-10.916 15.971-14.945 19.304-6.798 31.691-9.229 29.132-4.93 42.634-5.361 31.239 2.103 38.379 2.775 4.874.893 4.462 1.256m-15.948-3.826c14.193.547 30.637 3.75 42.336 6.874s21.31 7.425 27.857 11.873 11.102 10.026 11.428 14.811-3.294 9.939-9.47 13.902-15.778 6.982-27.585 9.873-28.43 6.42-43.255 7.472-31.575.401-45.695-1.156-28.196-5.175-39.023-8.189-20.115-5.845-25.942-9.895-9.911-9.767-9.018-14.403 6.92-9.377 14.378-13.414 18.485-7.985 30.368-10.809 28.463-5.129 40.932-6.134 28.405.087 33.882.106-.68-.686-1.019.007" class="D J"/><text x="3881.263" y="807.799" class="B C E G I">BarItemComponent</text><path d="M3916.208 882.228c13.848.732 27.502 3.419 38.362 6.533s21.421 7.502 26.795 12.149 6.975 10.798 5.451 15.735-7.044 10.069-14.595 13.89-18.497 6.464-30.713 9.035-27.829 5.853-42.582 6.392-31.942-1.58-45.936-3.159-27.901-3.159-38.026-6.316-18.399-7.897-22.722-12.628-5.28-11.019-3.218-15.756 7.505-8.77 15.591-12.667 20.108-8.496 32.929-10.72 30.411-2.476 43.999-2.622 31.018 1.484 37.529 1.745 2.124-.379 1.536-.182m-65.496-.717c12.759-1.609 29.5-1.549 44.059-.694s30.829 3.13 43.299 5.823 23.918 6.537 31.525 10.338 13.333 7.773 14.117 12.465-3.399 11.241-9.411 15.688-15.765 8.263-26.658 10.996-24.852 4.112-38.703 5.404-29.925 2.961-44.404 2.348-30.859-3.25-42.471-6.025-20.865-6.488-27.196-10.621-10.433-9.318-10.791-14.175 2.472-10.564 8.641-14.967 18.78-8.581 28.373-11.452 24.126-5.188 29.183-5.777.3 1.394 1.159 2.244" class="D J"/><text x="3887.263" y="918.799" class="B C E G I">IconComponent</text><path d="M3490.723 771.035c13.067-1.748 31.986-1.615 46.501-.505s29.029 4.11 40.586 7.164 21.971 7.183 28.755 11.161 11.52 7.971 11.951 12.709-2.973 11.446-9.366 15.714-17.352 6.949-28.988 9.897-26.574 6.555-40.828 7.794-30.606 1.007-44.697-.363-28.514-4.753-39.854-7.854-21.987-6.429-28.182-10.751-9.584-10.561-8.993-15.183 5.255-8.686 12.536-12.548 19.787-7.803 31.153-10.626 29.616-5.174 37.045-6.313 7.344-.932 7.53-.523m-20.654 2.319c12.752-1.64 31.189-1.373 46.009-.668s30.452 2.548 42.91 4.896 24.698 5.116 31.839 9.19 10.463 10.462 11.009 15.252-2.251 9.522-7.734 13.489-14.463 7.151-25.16 10.314-24.793 7.155-39.023 8.667-32.039 1.238-46.358.405-28.114-2.628-39.553-5.401-22.262-6.877-29.079-11.235-11.508-10.045-11.823-14.913 3.646-9.926 9.934-14.294 18.101-9.344 27.794-11.913 24.957-3.092 30.363-3.503 1.484.63 2.074 1.036" class="D J"/><text x="3518.263" y="808.299" class="B C E G I">BarItemComponent</text><path d="M3506.821 881.546c13.51-1.031 30.387.505 44.301 2.021s28.161 4.14 39.183 7.071 21.271 6.116 26.95 10.511 8.336 11.158 7.124 15.861-6.807 8.288-14.394 12.358-18.958 9.246-31.125 12.063-27.483 4.497-41.88 4.839-30.526-1.18-44.499-2.789-28.72-3.507-39.337-6.862-19.656-8.89-24.367-13.269-6.087-8.609-3.899-13.001 8.779-9.293 17.031-13.354 19.937-8.343 32.484-11.011 34.023-4.272 42.801-4.993 9.914.007 9.866.665m-4.365 1.521c14.196-.455 31.274 1.121 44.792 2.873s27.404 3.951 36.318 7.64 14.499 9.799 17.166 14.494 2.285 9.497-1.163 13.679-10.358 7.769-19.526 11.412-21.962 8.289-35.482 10.448-31.064 2.655-45.636 2.503-29.194-1.218-41.8-3.416-25.176-5.765-33.833-9.772-15.658-9.458-18.108-14.271-.887-9.985 3.409-14.605 12.242-9.875 22.369-13.115 26.201-5.014 38.394-6.324 29.148-1.218 34.767-1.538-.745-.651-1.055-.385" class="D J"/><text x="3524.263" y="919.299" class="B C E G I">IconComponent</text><g class="D J"><path d="M3637.816 724.586l-100.717 42.787m102.686-44.046c-16.342 6.523-83.905 35.129-100.585 42.488"/><path d="M3560.356 743.302c-2.724 5.307-10.011 13.107-22.422 23.887m23.968-22.484c-8.762 6.868-14.359 14.207-21.98 21.825m28.548-4.379c-4.852.661-14.127 3.844-30.536 5.038m32.082-3.635c-11.289.738-19.537 1.916-30.094 2.976m-18.066 71.604c-.138 5.748.596 29.066.482 35.21m1.505-33.207l-1.889 34.243"/><path d="M3515.434 859.117c2.052 4.63 6.277 9.966 7.723 15.733m-6.495-17.844c1.241 5.234 2.904 8.987 5.918 16.864"/><path d="M3527.38 859.956c-2.425 4.275-2.68 9.296-4.223 14.894m5.452-17.005c-1.549 5.142-2.672 8.699-6.028 16.025m246.517-148.497c16.04 6.04 80.526 29.074 96.963 34.755m-95.374-35.237l97.584 36.727"/><path d="M3840.064 759.784c5.952 3.117 12.73 3.385 28.746.5m-31.157.614c11.697.859 21.652 1.52 30.037.504"/><path d="M3847.238 740.558c3.999 8.106 8.89 13.433 21.571 19.726m-23.982-18.612c9.435 7.327 16.962 14.495 22.863 19.731m14.648 75.941c.053 5.978-.859 29.694-1.164 35.657m.269-33.544c-.077 5.736-1.524 26.497-1.264 31.79m-6.883-16.203c3.662 3.279 5.308 9.087 5.749 16.856m-4.802-15.946c2.575 6.083 5.206 11.189 5.753 15.507"/><path d="M3884.922 855.251c.571 3.328-.877 9.082-5.878 16.65m6.825-15.74c-1.92 5.931-3.786 10.958-5.874 15.301"/></g><path d="M3730.572 540.842c13.672.801 28.206 5.227 38.487 8.2s18.549 5.577 23.204 9.635 6.469 10.234 4.725 14.718-7.277 8.886-15.188 12.184-19.608 5.613-32.277 7.606-29.112 4.221-43.74 4.35-30.972-1.85-44.029-3.579-25.675-3.693-34.313-6.796-14.779-7.46-17.514-11.818-2.695-9.881 1.102-14.329 12.113-9.076 21.682-12.358 22.437-5.943 35.734-7.33 32.8-.983 44.051-.997 18.674.462 23.456.913 5.634 1.188 5.237 1.793m-4.26.377c12.812 1.204 26.277 3.962 35.939 6.796s18.063 5.999 22.029 10.207 4.865 10.566 1.767 15.041-11.382 8.413-20.352 11.809-20.59 6.746-33.464 8.562-29.177 2.702-43.776 2.333-31.127-2.255-43.818-4.552-24.323-5.509-32.329-9.227-14.084-8.984-15.709-13.084.596-7.833 5.957-11.513 15.564-7.557 26.212-10.566 24.154-6.055 37.677-7.489 33.262-1.397 43.461-1.117 14.777 2.214 17.732 2.798.548.589.001.708m300.034-107.638l469.87.085m-470.335.811c112.013-2.538 223.346-2.161 469.221-.635m2.259.811l-3.533 130.511m2.052-131.251c.439 38.209.278 76.661-.626 131.837m.008-.017l-468.641 1.313m468.839-.591c-178.916-.205-357.974-.048-469.354.397m-1.177-.692l1.562-133.116m-.608 132.578c-1.014-32.309-.841-66.743-.662-131.892" class="L D"/><g transform="matrix(1 0 0 1 4042.76315 442.04863)" class="B C F H"><text y="19" x="0">query AppBarQuery {</text><text y="43" x="0"> launchTileBar {</text><text y="67" x="0"> ...TileBar</text><text y="91" x="0"> }</text><text y="115" x="0">}</text></g><g class="D"><path d="M3798.004 568.873l240.836-2.794m-239.033 2.182l238.254-1.065" class="L"/><g class="J"><path d="M3700.588 603.371l-1.626 50.139m.599-51.015c.07 8.238 1.522 40.654 1.692 49.135"/><path d="M3692.461 627.101l7.837 26.371m-8.956-25.252c3.93 6.688 5.919 14.454 10.659 24.224"/><path d="M3709.553 626.53c-2.701 11.642-7.328 17.187-9.255 26.942m8.135-25.823c-1.428 6.989-4.8 14.935-6.433 24.795"/></g><g class="N"><path d="M3718.824 664.499c13.781.469 30.529 3.216 42.191 6.009s21.817 6.987 27.779 10.751 8.419 7.846 7.995 11.836-3.689 8.375-10.535 12.102-18.775 7.57-30.54 10.261-26.001 5.191-40.051 5.884-30.372-.311-44.244-1.726-28.494-3.603-38.988-6.761-19.409-7.989-23.978-12.189-5.792-8.932-3.437-13.01 9.135-8.202 17.563-11.46 20.193-6.287 33.007-8.09 32.431-2.383 43.875-2.728 19.88.553 24.791.658 5.2-.479 4.678-.026m-170.614 111.977c13.193 1.533 26.493 4.813 35.677 7.882s16.582 6.459 19.431 10.527 1.7 9.815-2.337 13.883-12.194 7.296-21.88 10.525-23.007 7.042-36.24 8.85-28.834 2.553-43.158 1.998-30.483-2.752-42.785-5.326-23.447-6.374-31.027-10.119-13.247-8.26-14.455-12.356 1.524-8.308 7.21-12.219 15.724-8.481 26.908-11.248 25.975-4.51 40.192-5.357 33.236-.375 45.109.275 20.916 2.957 26.124 3.622 5.925.24 5.122.366" class="M O"/><path d="M3499.905 887.516c13.1-1.273 30.473-.656 44.413.121s27.922 2.164 39.225 4.537 22.477 5.873 28.589 9.703 8.439 8.785 8.084 13.275-3.579 9.862-10.215 13.665-17.553 6.814-29.598 9.152-28.028 4.447-42.675 4.88-31.397-.742-45.207-2.283-27.661-4.042-37.653-6.965-17.923-6.718-22.297-10.572-6.247-8.529-3.945-12.551 9.093-8.207 17.761-11.58 22.528-6.557 34.246-8.657 27.441-3.533 36.063-3.943 15.809.95 15.671 1.48m-16.442-1.763c13.828-.679 30.536 1.789 44.089 3.608s27.483 4.38 37.23 7.305 17.614 6.362 21.248 10.244 3.636 9.008.557 13.048-9.905 7.897-19.027 11.195-22.733 6.49-35.704 8.592-27.997 4.107-42.119 4.02-29.824-2.173-42.611-4.541-25.659-6.177-34.114-9.663-14.813-7.328-16.62-11.251.787-8.324 5.779-12.284 14.097-8.261 24.17-11.474 26.772-6.639 36.272-7.804 17.301 1.012 20.725.811-.123-2.501-.181-2.016"/><path d="M3852.67 776.617c12.856-1.877 30.85-2.887 45.087-2.303s28.838 3.352 40.336 5.811 21.992 5.103 28.652 8.943 10.89 9.589 11.31 14.097-2.498 9.294-8.794 12.949-17.36 6.737-28.981 8.979-26.353 3.827-40.745 4.469-31.558.463-45.609-.613-28.264-2.934-38.696-5.842-19.147-7.609-23.9-11.605-6.498-8.327-4.614-12.371 7.848-8.527 15.918-11.892 23.135-6.2 32.5-8.298 18.44-3.557 23.695-4.289 7.387-.649 7.831-.107" class="M O"/><path d="M3866.311 886.975c12.77-1.418 29.311-1.717 43.331-1.001s29.698 2.591 40.789 5.3 19.943 6.807 25.76 10.952 9.738 9.612 9.144 13.921-5.279 8.345-12.711 11.932-19.431 7.432-31.883 9.586-28.322 3.056-42.825 3.341-30.768-.246-44.192-1.63-26.545-3.739-36.355-6.672-18.534-7.006-22.505-10.921-4.222-8.466-1.318-12.571 9.727-8.525 18.741-12.057 25.905-7.396 35.342-9.133 17.05-1.04 21.28-1.288 3.699-.404 4.098-.2m34.699.802c13.831.658 29.612 2.942 41.082 5.328s21.731 5.359 27.734 8.987 8.857 8.654 8.285 12.78-4.7 8.27-11.716 11.974-18.661 7.509-30.378 10.251-25.932 5.553-39.92 6.203-30.208-.61-44.013-2.302-28.41-4.833-38.814-7.849-19.341-6.491-23.61-10.251-4.547-8.173-2.002-12.313 9.102-8.829 17.269-12.526 19.005-7.846 31.73-9.652 33.954-.646 44.619-1.182 16.357-2.234 19.371-2.034-.864 2.413-1.286 3.237"/><g class="O"><path d="M3721.519 596.7c-.064 11.294 1.207 56.294 1.401 67.692" class="M"/><path d="M3711.062 638.286c5.296 10.481 10.67 18.677 11.426 26.612m9.09-27.081c-2.64 10.535-5.2 18.913-9.09 27.081"/><path d="M3795.035 711.381l109.184 42.351" class="M"/><path d="M3876.064 753.556c6.988 1.412 11.762-.342 28.66-1.3m-21.353-17.877c5.07 6.099 8.044 9.067 21.352 17.876"/></g><path d="M3904.713 833.158c.004 8.207-1.261 40.607-1.827 48.505m.948-49.464c-.013 7.927-1.442 39.538-1.44 47.792m-7.349-21.224c2.864 2.713 2.813 9.778 5.873 19.854m-5.184-21.05c1.178 6.313 2.504 11.515 5.857 21.772"/><path d="M3911.401 859.171c-1.026 2.767-4.969 9.736-10.483 19.45m11.171-20.646c-3.326 6.335-6.502 11.426-10.499 21.369"/><path d="M3445.746 430.832l73.422-2.476" class="M O"/></g></g><text y="435.094" x="3531.127" class="B C E Q">Fragment References as React Props</text><g class="D"><g class="N"><g class="O"><path d="M3687.168 721.395l-112.028 51.002" class="M"/><path d="M3595.42 750.985c-4.905 5.692-13.508 13.253-18.786 23.041m27.254-4.348c-7.697-.112-18.957 1.586-27.255 4.349"/></g><path d="M3544.281 830.963c-.418 7.976-.598 40.713-.942 48.973m2.776-50.155l-3.565 51.228"/><path d="M3534.963 857.749c1.791 7.015 5.435 18.727 9.216 25.186m-9.682-26.341c2.391 7.702 5.382 16.051 7.218 24.86"/><path d="M3551.913 858.71c-4.527 6.559-7.194 17.913-7.734 24.225m7.267-25.38c-3.118 7.455-5.638 15.492-9.732 23.899"/></g><path d="M3447.322 465.475l72.101-2.034m-70.037 1.148l72.284-.042" class="L"/></g><text y="469.958" x="3533.127" class="B C E F">GraphQL Operation/Fragments</text><g class="D L"><path d="M3689.364 667.447c13.061-.877 29.442.318 42.433 1.484s26.1 2.88 35.515 5.511 17.239 6.512 20.973 10.275 4.561 8.432 1.429 12.305-11.046 7.882-20.218 10.929-21.848 5.862-34.81 7.353-28.991 2.111-42.963 1.592-28.774-2.669-40.869-4.708-24.332-4.313-31.703-7.529-11.985-7.727-12.524-11.764 3.082-9.057 9.29-12.454 16.74-5.804 27.958-7.928 31.194-4.02 39.349-4.814 7.394-.02 9.579.05 3.548.066 3.53.375m2.483-1.243c13.643-.05 31.279 2.379 44.235 4.172s25.406 3.826 33.501 6.584 13.406 6.213 15.07 9.966-.447 8.717-5.09 12.554-12.631 7.848-22.772 10.464-24.079 4.49-38.076 5.23-31.89-.137-45.903-.788-27.377-.608-38.176-3.115-20.842-8.469-26.615-11.932-9.001-5.436-8.025-8.844 6.409-8.051 13.879-11.609 18.765-7.785 30.944-9.737 34.153-1.675 42.13-1.975 4.653.256 5.732.175.919-.917.742-.661m214.87 111.211c12.977.661 26.789 3.212 35.976 5.948s15.958 6.663 19.146 10.465 3.251 8.679-.019 12.348-10.433 6.839-19.599 9.668-22.338 5.774-35.397 7.309-28.904 2.146-42.958 1.901-29.368-1.139-41.369-3.369-23.768-6.424-30.64-10.015-10.28-7.839-10.589-11.535 2.783-7.467 8.737-10.642 15.563-6.129 26.989-8.405 27.378-4.735 41.571-5.252 34.654 1.635 43.588 2.149 7.683.737 10.018.939 4.733.035 3.989.272m-45.376-2.39c13.773-.093 31.424 1.392 44.205 2.968s24.419 3.704 32.481 6.486 13.714 6.348 15.891 10.21 1.436 9.13-2.828 12.965-12.575 7.744-22.759 10.046-24.473 2.827-38.348 3.762-31.115 2.412-44.904 1.843-26.621-2.692-37.83-5.258-23.657-6.58-29.423-10.143-6.377-7.444-5.173-11.235 5.466-8.241 12.4-11.509 17.147-6.284 29.199-8.097 35.076-2.429 43.116-2.78 4.453.785 5.121.674-.993-1.569-1.115-1.339m-326.962 3.616c12.606.939 25.335 3.245 34.191 6.004s15.929 6.742 18.945 10.55 2.999 8.476-.846 12.3-12.506 7.729-22.228 10.645-22.877 5.546-36.102 6.853-29.358 1.704-43.245.989-28.396-3.075-40.079-5.277-23.294-4.627-30.018-7.936-10.522-7.879-10.324-11.918 4.642-9.011 11.51-12.32 18.045-5.571 29.697-7.536 26.056-3.824 40.215-4.253 34.704 1.076 44.739 1.679 11.531 1.327 15.471 1.937 9.099 1.479 8.17 1.724m-75.264-3.96c13.221-1.063 30.634-1.45 44.23-.791s27.168 2.175 37.344 4.741 18.748 6.826 23.71 10.655 7.672 8.53 6.066 12.321-7.243 7.591-15.697 10.424-22.313 4.685-35.026 6.573-27.217 4.849-41.25 4.753-30.134-3.607-42.949-5.327-25.653-2.264-33.939-4.992-13.851-7.285-15.776-11.377-.538-9.595 4.23-13.177 13.793-6.017 24.374-8.313 31.673-4.311 39.108-5.467 4.827-1.34 5.505-1.466-1.585.507-1.437.71m543.288-199.198c107.864-2.57 216.362-3.27 466.791-1.601m-467.907.93l468.822-.284m.052-.302c-.655 42.61 1.736 82.619.237 182.933m-.621-182.493c1.462 65.934 1.039 131.551-.077 181.35m.3-1.04l-467.562.708m467.745-.275c-115.332.38-229.075.458-468.238-.3m-.079 1.632c1.79-48.186-.651-94.529-.459-183.886m1.198 182.723c-1.344-53.006-2.199-105.013-1.554-180.186"/><path d="M3793.277 691.154l244.51.161m-245.362-1.049l244.335-.83m.633 82.151l469.308-.371m-468.781.075l469.239-.491m.456 1.221c-1.683 41.776.739 84.412.83 131.952m-1.659-133.165l.964 132.124m-.763.506l-469.861-.384m469.457.152l-469.278-.188m.026-1.501c-.589-39.785-2.475-80.531 1.045-130.53m-1.425 131.315l.177-130.241"/><path d="M3974.124 799.775c10.589-.264 52.808-.679 63.371-.655m-64.586 2.703l66.889-1.672m-3.37 5.306c-8.725-.207-42.987-.121-51.424.004m53.059 2.201l-50.853-1.071m-214.715-2.087l-165.41.192m167.201 1.916c-27.432.335-137.024-.139-164.897-.466"/></g><g transform="matrix(1 0 0 1 3651.15573 252.535235)" class="B E G I K"><text x="294.5" y="32">Fragmentized Component Tree</text><text x="294.5" y="77">with colocated data requirements</text><text x="294.5" y="122">and “connected” data</text></g><path d="M3449.269 394.378l71.113-.788m-72.225-.484c12.526-.043 62.106 1.879 74.437 1.858" class="D N"/><text y="399.535" x="3534.153" class="B C E Q">React Props</text><path d="M3448.243 499.781l72.178-1.492" class="D L M O"/><text y="504.535" x="3533.153" class="B C E F">GraphQL Client Store Connection</text><g class="D L"><path d="M4154.212 926.856c16.473-4.375 40.657-7.204 61.987-8.639s44.715-1.082 65.989.028 42.238 3.25 61.657 6.634 39.322 8.406 54.854 13.671 28.836 11.348 38.334 17.918 15.374 14.094 18.654 21.501 4.499 15.753 1.028 22.941-11.707 13.884-21.851 20.185-23.776 12.508-39.012 17.622-33.324 9.766-52.402 13.062-40.841 5.573-62.069 6.714-44.131 1.251-65.3.132-42.713-3.511-61.714-6.848-37.186-8.036-52.29-13.17-28.882-11.036-38.334-17.632-15.476-14.658-18.382-21.946-2.899-14.518.943-21.781 11.779-15.057 22.114-21.802 23.839-13.449 39.895-18.668 44.943-10.636 56.441-12.646 10.993-.586 12.549.587m43.888-4.681c19.801-2.28 43.726-2.498 64.945-1.544s43.372 3.654 62.369 7.268 36.797 9.153 51.608 14.416 27.923 10.832 37.257 17.163 15.506 13.634 18.752 20.823 4.55 15.146.724 22.31-13.316 14.127-23.676 20.67-22.967 13.512-38.484 18.592-34.922 8.412-54.616 11.889-42.465 7.595-63.55 8.975-42.249.952-62.962-.692-42.365-5.542-61.315-9.171-37.367-7.372-52.387-12.603-28.262-12.032-37.729-18.781-16.447-14.566-19.072-21.712-1.123-14.103 3.32-21.16 12.827-14.379 23.335-21.179 23.971-14.247 39.714-19.62 36.196-9.728 54.744-12.618 47.301-4.499 56.546-4.724-1.405 2.23-1.08 3.376m288.255-72.214c5.583 14.907 40.267 67.725 33.737 87.265s-60.706 24.821-72.916 29.975m40.634-118.088c5.498 14.692 38.22 66.715 31.447 86.58s-60.139 27.002-72.083 32.611"/><path d="M4494.638 951.048c-6.405 4.772-14.939 8.916-25.342 16.202m23.427-16.406c-7.261 5.403-15.688 9.763-24.36 16.122"/><path d="M4500.439 970.733c-7.706-.344-17.732-1.26-31.143-3.482m29.227 3.278c-8.909-.841-19.165-2.69-30.16-3.562m43.105-273.526c12.523 43.604 81.903 212.319 74.442 262.73s-99.628 33.373-119.209 39.732m43.556-303.539c12.474 44.297 82.683 214.892 75.246 265.165s-99.89 30.218-119.872 36.469"/><path d="M4493.354 984.5c-8.204.583-14.077 6.61-28.971 8.097m28.807-9.263c-7.047 1.979-12.535 5.21-27.87 11.579"/><path d="M4494.052 1005.01c-8.579-5.187-14.649-4.934-29.668-12.413m29.505 11.246c-7.326-3.007-12.983-4.764-28.567-8.931m44.273-450.733c23.366 81.725 146.431 411.326 140.389 491.11s-147.306-10.453-176.642-12.406m38.158-479.579c23.336 82.379 144.091 412.978 138.115 493.131s-144.694-9.711-173.972-12.218"/><path d="M4506.183 1026.551c-9.87-3.994-16.654-3.086-29.343-.81m28.584-.628c-7.43-.246-13.209-.225-30.397-.282m23.82 20.885c-8.068-9.122-12.876-13.374-22.007-19.975m21.248 18.538c-5.852-4.795-9.908-9.273-23.061-19.448"/></g><text x="4250.881" y="996.535" font-size="28" class="B E F I">GraphQL Client Store</text><g class="D"><g class="L O"><path d="M4066.755 942.824c-11.06-12.881-51.662-24.78-64.059-76.89s24.726-188.428-10.323-235.77-166.585-39.933-199.969-48.282" class="M"/><path d="M3822.797 574.19c-11.322 3.797-25.85 5.123-28.98 6.343m26.925 14.075c-10.706-4.314-24.415-11.119-26.925-14.075"/><path d="M4052.962 960.923c-7.4-6.274-34.09-17.328-45.764-37.589s-17.095-65.709-24.282-83.981-15.816-21.092-18.84-25.654" class="M"/><path d="M3989.327 826.957c-4.495-5.584-12.263-6.927-24.125-11.758m9.517 26.171c-.327-9.703-4.054-15.032-9.517-26.171"/><path d="M4038.2 989.067c-48.277-6.469-234.206 7.132-289.77-38.145s-36.283-194.604-43.613-233.516" class="M"/><path d="M3716.15 744.453c-4.711-5.926-4.878-13.045-10.635-26.169m-9.872 26.916c.085-5.984 4.719-13.278 9.872-26.916"/><path d="M4044.63 1011.2c-51.66-2.699-249.483 4.081-310.755-17.978s-35.294-85.235-56.876-114.379-60.266-50.154-72.617-60.486" class="M"/><path d="M3635.249 826.308c-8.495-1.971-21.033-3.693-30.33-9.598"/><path d="M3623.365 843.038c-4.886-7.004-13.902-13.684-18.446-26.328"/></g><path d="M1290.485 1510.8c13.933.561 28.7 3.21 39.595 6.318s20.32 7.869 25.771 12.334 7.94 9.598 6.934 14.452-5.393 10.579-12.971 14.668-19.988 7.423-32.498 9.866-28.104 4.173-42.563 4.789-30.495.56-44.191-1.094-27.45-5.483-37.987-8.828-20.593-6.999-25.233-11.242-4.746-9.535-2.606-14.214 7.117-9.946 15.444-13.862 21.744-7.151 34.515-9.633 28.222-4.696 42.112-5.263 33.432 1.3 41.231 1.86 6.125.823 5.567 1.498m-85.062 1.541c11.592-2.125 26.311-2.772 40.989-3.134s33.283-.976 47.08.961 26.674 6.716 35.702 10.662 15.403 8.551 18.465 13.016 3.535 9.467-.096 13.775-12.139 8.73-21.692 12.072-22.166 5.991-35.628 7.976-30.522 3.763-45.14 3.933-29.606-.682-42.567-2.914-26.541-6.48-35.201-10.476-14.72-8.864-16.756-13.496-.075-9.842 4.541-14.296 15.136-9.073 23.157-12.432 20.511-6.806 24.971-7.72.858 1.345 1.787 2.234" class="J"/></g><text x="1265.155" y="1547.001" class="B C E G I">AppBarContainer</text><path d="M1291.684 1634.258c13.793.821 28.363 4.426 39.073 7.756s19.906 7.645 25.183 12.223 8.039 10.516 6.478 15.246-7.848 9.264-15.842 13.131-19.749 7.54-32.121 10.072-27.641 4.76-42.107 5.121-30.683-1.311-44.689-2.957-29.249-3.712-39.345-6.92-17.047-7.807-21.23-12.329-6.303-10.134-3.868-14.801 9.96-9.214 18.482-13.204 19.805-8.299 32.649-10.731 30.922-3.523 44.414-3.863 29.972 1.187 36.538 1.821 3.582 1.479 2.862 1.984m-64.452-.77c13.023-1.928 33.078-3.478 47.999-2.666s29.941 4.442 41.53 7.537 21.471 6.971 28.005 11.035 11.158 8.908 11.196 13.345-4.527 9.305-10.966 13.281-16.128 7.581-27.67 10.575-27.297 6.043-41.585 7.389-29.856 1.819-44.145.69-30.217-4.271-41.588-7.465-21.065-7.401-26.64-11.697-7.787-9.425-6.811-14.077 5.868-9.535 12.669-13.839 18.2-9.49 28.135-11.986 26.123-2.733 31.475-2.99.341 1.149.64 1.445" class="D J"/><text x="1262.155" y="1671.001" class="B C E G I">BarComponent</text><path d="M1444.183 1743.209c14.057-.288 30.931 1.387 44.163 3.724s26.563 6.458 35.232 10.301 14.372 8.239 16.781 12.755 1.603 9.758-2.329 14.341-11.541 9.767-21.264 13.16-23.141 5.456-37.074 7.201-31.814 3.425-46.522 3.27-29.192-1.766-41.725-4.199-25.535-6.428-33.473-10.401-12.409-8.605-14.154-13.436-1.107-10.911 3.685-15.549 14.482-8.983 25.069-12.277 25.065-6.169 38.451-7.485 33.871-.345 41.868-.415 6.452-.61 6.115-.004m13.595.028c14.262.798 28.706 5.488 39.236 8.988s18.92 7.736 23.945 12.013 7.814 9.233 6.204 13.649-7.976 9.124-15.865 12.849-18.974 6.932-31.47 9.496-28.956 5.059-43.506 5.884-29.988.702-43.792-.932-28.793-5.293-39.034-8.871-18.379-8.117-22.409-12.597-4.39-9.687-1.772-14.288 9.279-9.29 17.481-13.316 19.027-8.657 31.732-10.838 31.463-2.237 44.5-2.247 28.369 2.077 33.724 2.187-.901-2.035-1.592-1.526" class="D J"/><text x="1442.155" y="1781.001" class="B C E G I">BarItemComponent</text><path d="M1413.674 1856.265c12.794-1.829 31.22-1.465 45.815-.922s29.479 1.787 41.757 4.179 24.058 6.102 31.911 10.174 13.651 9.658 15.209 14.256-.386 8.916-5.858 13.336-16.168 9.744-26.973 13.184-23.868 6.114-37.858 7.458-31.626 1.395-46.081.606-28.664-2.446-40.648-5.34-24.189-7.68-31.255-12.026-10.686-9.344-11.143-14.051 2.367-10.071 8.405-14.192 17.424-7.595 27.823-10.533 27.549-6.168 34.57-7.095 6.837 1.101 7.559 1.531m65.942 1.9c13.037 1.79 25.162 5.469 34.071 9.046s16.542 8.081 19.383 12.418 1.445 9.323-2.341 13.605-10.794 8.441-20.378 12.084-23.697 7.568-37.123 9.773-28.73 3.696-43.429 3.459-31.795-2.428-44.765-4.878-25.024-5.97-33.059-9.825-13.313-8.7-15.152-13.304-.09-9.664 4.118-14.323 11.135-10.316 21.129-13.629 24.849-5.056 38.836-6.249 32.311-.9 45.088-.911 26.495.253 31.576.845-.683 1.984-1.09 2.707" class="D J"/><text x="1448.155" y="1892.001" class="B C E G I">IconComponent</text><path d="M1064.967 1745.027c13.559-1.097 30.264-.747 44.124.555s28.257 3.94 39.034 7.257 20.401 8.31 25.624 12.645 7.53 8.661 5.711 13.361-8.712 10.632-16.626 14.84-18.404 7.965-30.858 10.406-29.275 3.827-43.865 4.239-29.91.069-43.671-1.767-28.775-5.6-38.896-9.247-17.671-8.125-21.833-12.636-5.582-9.963-3.139-14.432 9.383-8.557 17.795-12.38 20.926-8.432 32.68-10.554 30.446-1.579 37.839-2.18 6.116-1.934 6.519-1.423m-18.307 2.098c13.133-1.584 31.433-1.468 45.551-.645s27.977 2.858 39.158 5.579 21.93 6.388 27.93 10.744 8.499 10.347 8.074 15.393-3.672 10.737-10.624 14.886-19.021 7.429-31.089 10.008-27.158 4.679-41.32 5.465-29.916.555-43.654-.751-27.753-3.705-38.772-7.084-21.907-8.875-27.341-13.191-6.787-8.43-5.261-12.702 6.88-8.698 14.419-12.929 20.501-10.046 30.817-12.461 25.474-1.68 31.081-2.026 2.073-.119 2.559-.049" class="D J"/><text x="1079.155" y="1781.501" class="B C E G I">BarItemComponent</text><path d="M1075.259 1855.238c13.601-1.027 31.06.047 44.977 1.769s28.285 5.213 38.526 8.56 18.875 6.995 22.922 11.517 3.765 10.74 1.361 15.617-7.356 9.824-15.789 13.643-21.926 7.056-34.809 9.273-27.769 4.004-42.488 4.029-32.281-1.766-45.828-3.879-26.104-5.18-35.457-8.799-17.211-8.512-20.657-12.913-3.054-8.898-.02-13.491 9.18-10.471 18.226-14.067 23.094-5.431 36.051-7.507 33.397-4.541 41.687-4.947 8.195 1.675 8.052 2.512m27.962.701c13.441.825 26.491 3.938 36.486 7.066s19.107 7.147 23.481 11.701 4.919 10.63 2.761 15.624-7.274 10.485-15.71 14.342-21.906 6.694-34.903 8.802-28.733 3.612-43.078 3.844-29.858-.625-42.996-2.454-26.074-4.756-35.833-8.519-18.951-9.581-22.724-14.064-3.162-8.646.085-12.833 10.43-8.379 19.397-12.292 21.331-9.157 34.404-11.186 30.787-1.037 44.034-.987 29.89 1.315 35.448 1.292-1.323-1.742-2.1-1.426" class="D J"/><text x="1085.155" y="1892.501" class="B C E G I">IconComponent</text><g class="D J"><path d="M1198.919 1699.157l-98.966 40.041m97.385-40.582l-97.915 41.96"/><path d="M1122.912 1721.388c-8.023 4.343-13.82 9.602-22.187 20.091m21.151-20.81c-8.377 6.917-17.196 16.096-21.786 19.55"/><path d="M1130.979 1740.257c-10.193-.765-18.167-.6-30.254 1.222m29.219-1.941c-11.395-.466-23.343 1.397-29.853.681m-15.975 73.079c-.209 5.89-1.898 28.618-2.264 34.309m1.31-34.936l-2.417 36.529"/><path d="M1076.992 1831.955c.413 5.029 1.624 11.487 4.543 18.781m-5.173-17.642c.298 3.743 2.558 7.985 4.07 15.696"/><path d="M1088.942 1832.726c-3.121 4.897-5.447 11.126-7.407 18.01m6.778-16.871c-2.584 3.625-3.214 7.68-7.881 14.925m251.52-151.592l96.062 35.985m-97.102-37.19c16.053 5.886 80.187 32.557 96.21 38.603"/><path d="M1396.63 1733.864c8.534-.223 18.648 1.037 32.246-.433m-30.945.006c6.221 1.239 12.974.107 28.722 1.491"/><path d="M1404.229 1714.802c6.554 5.178 14.535 11.789 24.647 18.63m-23.346-19.057c4.67 5.448 9.763 8.479 21.122 20.554m15.2 76.678c-.2 5.524-.115 28.093.066 33.833m1.976-34.823l-3.048 36.328"/><path d="M1436.349 1830.256c1.638 7.67 4.259 14.27 3.507 15.301m-3.87-14.571c2.797 5.969 3.324 10.835 5.143 15.515"/><path d="M1447.947 1831.095c-2.776 7.322-4.564 13.603-8.091 14.462m7.728-13.732c-1.345 5.763-4.955 10.329-6.456 14.676"/></g><path d="M1262.079 1512.928c13.389-.509 28.783 1.824 41.74 3.897s27.104 5.16 36.002 8.541 14.622 7.549 17.386 11.747 3.195 9.468-.805 13.441-13.281 7.449-23.194 10.395-22.84 5.803-36.283 7.282-30.1 1.92-44.377 1.594-29.127-1.18-41.285-3.554-24.404-7.03-31.662-10.692-11.484-6.909-11.889-11.282 3.307-11.02 9.457-14.958 16.413-6.275 27.446-8.667 27.891-4.502 38.751-5.683 20.753-1.326 26.411-1.401 7.714.606 7.539.952m-34.043-.693c13.199-.89 31.665.189 45.54 1.325s27.166 2.767 37.714 5.49 20.091 6.822 25.573 10.849 8.476 8.988 7.323 13.312-6.179 9.191-14.242 12.627-21.506 5.74-34.135 7.987-27.43 4.827-41.638 5.494-30.264.441-43.612-1.492-27.103-6.795-36.481-10.106-16.938-5.816-19.788-9.763-.956-9.307 2.687-13.921 9.919-10.343 19.172-13.767 27.682-5.535 36.345-6.777 12.64-.611 15.633-.674 1.569.132 2.327.295" class="D P"/><g class="J D"><path d="M1261.197 1577.304l-1.24 47.968m.066-48.46l2.279 49.484"/><path d="M1254.581 1601.995c-.443 9.077 5.202 16.357 7.219 25.227m-9.442-23.73c3.865 8.94 7.669 18.526 10.472 21.845"/><path d="M1271.669 1601.317c-5.477 9.354-4.87 16.834-9.869 25.905m7.645-24.408c-2.918 9.148-5.902 19.004-6.616 22.523"/></g><g class="P D"><path d="M1224.482 1639.723c12.036-1.92 29.201-1.275 43.629-1.041s30.582.42 42.939 2.441 23.509 6.072 31.2 9.689 13.376 7.784 14.948 12.011-.61 9.552-5.513 13.349-13.267 6.726-23.906 9.43-26.084 5.379-39.93 6.797-28.85 2.267-43.146 1.708-31.154-2.302-42.631-5.063-20.295-7.647-26.232-11.499-9.565-7.566-9.387-11.611 3.763-8.838 10.453-12.66 21.035-7.876 29.688-10.273 17.386-3.332 22.233-4.108 6.332-1.032 6.851-.548m22.183-1.446c13.519-.228 30.524 1.979 43.708 4.086s26.295 5.497 35.398 8.551 16.403 5.826 19.222 9.775 1.323 9.663-2.305 13.916-10.26 8.587-19.462 11.599-22.073 5.122-35.752 6.473-31.905 1.704-46.322 1.636-28.142.078-40.175-2.047-24.07-6.881-32.023-10.703-14.39-7.852-15.695-12.228 2.069-10.247 7.864-14.027 15.867-6.322 26.908-8.651 29.77-4.104 39.339-5.327 14.858-1.589 18.073-2.013.664-.987 1.218-.533"/><path d="M1105.888 1749.247c13.664.7 29.461 3.925 40.026 6.658s18.475 5.963 23.366 9.738 7.573 8.706 5.981 12.909-7.592 8.599-15.535 12.309-19.401 7.844-32.123 9.953-29.592 2.4-44.211 2.701-30.51.894-43.504-.891-25.492-6.532-34.458-9.819-15.976-6.079-19.334-9.904-4.301-8.804-.813-13.046 12.083-9.095 21.739-12.408 22.897-5.731 36.198-7.47 32.691-2.74 43.609-2.964 17.954 1.287 21.9 1.623 2.234-.113 1.776.39m4.342 112.814c13.526.789 28.313 2.517 38.527 5.364s18.251 7.646 22.759 11.716 6.258 8.496 4.288 12.708-8.061 9.25-16.104 12.567-19.452 5.473-32.156 7.336-29.675 3.446-44.067 3.84-29.078.069-42.284-1.476-27.969-4.295-36.955-7.792-14.381-9.006-16.959-13.187-2.19-8 1.492-11.896 11.015-8.253 20.605-11.48 23.561-6.176 36.934-7.882 31.462-2.209 43.302-2.354 22.051.849 27.737 1.485 6.942 1.669 6.383 2.33" class="M O"/><path d="M1481.163 1750.623c13.214 1.017 25.415 3.548 34.691 6.573s17.49 7.465 20.967 11.576 3.174 8.797-.103 13.094-10.097 9.44-19.557 12.688-23.745 5.051-37.208 6.799-29.376 4.031-43.565 3.689-29.314-3.582-41.571-5.738-23.933-3.949-31.973-7.198-14.686-7.951-16.265-12.296 1.497-9.702 6.788-13.775 14.383-7.668 24.958-10.66 24.742-6.039 38.491-7.293 31.206-.767 44.004-.232 25.258 2.192 32.784 3.443 13.003 3.67 12.369 4.063m-69.941-7.672c13.946-.684 31.49.714 44.636 2.146s24.95 3.165 34.244 6.446 17.814 8.719 21.518 13.239 4.017 9.969.704 13.882-11.19 6.325-20.583 9.594-22.848 8.072-35.775 10.025-27.447 2.358-41.784 1.689-31.472-3.418-44.24-5.704-24.233-4.771-32.37-8.01-14.902-7.316-16.45-11.425 1.747-8.951 7.163-13.229 14.847-9.474 25.332-12.435 28.249-4.567 37.578-5.331 15.141.907 18.401.748.685-1.81 1.158-1.702m2.345 110.906c13.308-1.026 29.802.614 43.239 2.102s27.404 3.741 37.387 6.824 18.144 7.791 22.51 11.676 6.188 7.625 3.689 11.63-10.102 8.746-18.684 12.397a143.4 143.4 0 0 1-32.809 9.508c-13.038 2.128-30.926 3.458-45.421 3.262s-28.967-2.475-41.549-4.435-25.275-4.092-33.946-7.324-15.616-7.806-18.077-12.069-.901-9.287 3.308-13.505 11.956-8.584 21.949-11.805 25.52-6.149 38.008-7.519 27.745-.912 36.922-.703 18.245 1.489 18.141 1.957m-48.255.413c12.969-1.69 30.761-3.051 44.755-2.374s27.819 3.631 39.208 6.435 22.69 6.694 29.124 10.392 10.26 7.773 9.482 11.798-7.128 8.333-14.146 12.351-16.237 9.26-27.963 11.759-27.591 2.885-42.394 3.231-32.582.402-46.424-1.156-26.89-5.275-36.629-8.192-17.646-5.7-21.802-9.306-5.274-8.077-3.137-12.331 7.42-9.412 15.959-13.197 26.008-7.748 35.274-9.509 17.233-1.149 20.326-1.055-1.821 1.239-1.767 1.619m-140.076-291.222l-.848 68.422m-.11-69.625c-.264 10.864-.548 56.595-.546 68.115"/><path d="M1271.952 1609.785c6.24 10.397 7.201 18.192 11.319 26.258m-10.29-28.143c1.962 8.97 6.506 18.712 8.664 30.085"/><path d="M1292.473 1609.863c-1.079 10.533-7.438 18.299-9.202 26.18m10.231-28.066c-4.292 9.037-6.003 18.756-11.857 30.007m74.554 46.05l109.913 42.834m-107.871-43.587c18.027 6.653 89.988 34.678 107.535 41.886"/><path d="M1436.718 1726.22c11.24-2.264 19.789-.562 28.015-.958m-29.901-1.455c7.966 1.515 16.655-.203 31.842 2.217m-22.367-18.87c8.653 4.599 14.463 13.182 20.427 18.108m-22.312-20.522c6.14 6.357 12.918 9.44 24.254 21.284m-1.62 81.338l-1.344 46.213m.177-46.646c-.462 8.14-.27 40.401-.704 47.958"/><path d="M1457.425 1833.581c.207 6.286 4.512 14.775 5.856 20.342m-8.27-22.226c4.222 9.01 4.933 17.113 9.032 22.744"/><path d="M1473.782 1833.926c-6.001 6.231-7.906 14.589-10.502 19.998m8.088-21.881c-1.412 8.734-6.334 16.719-7.326 22.399m-456.401-425.311l71.131-2.273m-71.977 1.649l70.804-.407"/></g><text y="1433.494" x="1092.019" class="B C E S">Update</text><g class="D O P"><path d="M1246.771 1694.734l-110.081 49.936" class="M"/><path d="M1157.152 1724.308c-8.467 7.708-16.888 16.852-19.406 18.446m27.915.228c-11.972.259-23.773 1.985-27.915-.228"/><path d="M1103.31 1804.823c-.562 8.348-1.682 40.969-2.008 49.258" class="M"/><path d="M1094.348 1829.417c2.141 8.781 5.728 19.465 5.038 23.727m11.927-23.098c-4.08 8.47-6.717 18.924-11.927 23.098"/></g><g transform="matrix(1 0 0 1 1070.106002 1205.942887)" class="B E G I K"><text x="198" y="32">Pure Component Tree</text><text x="198" y="77">with propagated data</text><text x="198" y="122">and updating a node</text><text x="198" y="167">“worst-case” scenario</text></g><path d="M1005.777 1462.977l73.566-.813" class="D M O P"/><text y="1468.071" x="1092.153" class="B C E S">Unnecessary Update</text><path d="M2417.812 1517.449c11.873-2.34 27.75-1.539 42.5-1.477s32.78-.224 46 1.853 24.632 6.781 33.323 10.609 16.085 7.919 18.822 12.359 1.365 9.846-2.397 14.283-10.621 8.563-20.172 12.336-23.521 8.466-37.131 10.306-29.792 1.323-44.53.736-31.187-1.842-43.899-4.259-24.039-6.58-32.374-10.246-15.617-7.209-17.637-11.75.78-10.986 5.515-15.496 13.76-8.375 22.895-11.565 25.704-6.269 31.914-7.577 4.629-.912 5.345-.27m68.405.69c13.907 1.379 27.856 5.112 38.12 8.19s18.755 6.005 23.46 10.281 6.872 10.52 4.774 15.376-8.74 10.009-17.365 13.76-21.309 6.265-34.386 8.748-29.43 5.523-44.076 6.149-30.596-.138-43.802-2.393-26.045-7.443-35.434-11.137-16.857-6.615-20.895-11.025-6.284-10.552-3.332-15.435 12.155-9.969 21.044-13.861 19.228-7.468 32.292-9.491 32.878-2.778 46.089-2.643 27.785 2.867 33.18 3.452-.185-.173-.812.057" class="D J"/><text x="2462.381" y="1552.65" class="B C E G I">AppBarContainer</text><path d="M2490.028 1641.611c13.771.98 30.036 2.755 40.586 6.023s18.061 9.066 22.713 13.586 7.037 9.041 5.196 13.532-8.303 9.576-16.242 13.41-18.923 6.954-31.392 9.598-28.752 5.85-43.423 6.265-30.878-1.763-44.601-3.78-27.905-4.764-37.734-8.321-17.063-8.739-21.24-13.02-6.38-8.161-3.82-12.666 10.382-10.536 19.178-14.367 20.611-6.473 33.598-8.622 30.594-3.848 44.324-4.272 31.253 1.046 38.053 1.726 3.282 1.849 2.747 2.353m-59.54-1.757c13.302-1.72 30.847-2.874 45.258-1.954s29.97 4.26 41.209 7.476 20.62 7.654 26.226 11.817 8.285 8.299 7.411 13.161-5.679 11.528-12.658 16.012-17.567 8.605-29.214 10.895-26.412 2.242-40.671 2.847-30.545 2.024-44.883.783-30.482-4.733-41.144-8.226-17.585-8.166-22.828-12.734-9.945-10.05-8.631-14.675 8.47-9.456 16.52-13.075 21.275-6.426 31.775-8.641 26-3.795 31.229-4.648.053-.669.145-.466" class="D J"/><text x="2459.381" y="1676.65" class="B C E G I">BarComponent</text><path d="M2598.579 1751.342c12.149-2.343 28.373-1.787 42.895-1.592s31.259.759 44.24 2.763 24.856 5.565 33.646 9.262 16.363 8.039 19.096 12.922 1.416 11.807-2.703 16.378-12.023 7.843-22.011 11.046-24.236 6.518-37.913 8.173-29.332 1.904-44.15 1.756-32.068-.344-44.758-2.644-23.45-7.15-31.38-11.156-14.418-8.213-16.199-12.881.408-10.513 5.514-15.128 13.458-9.329 25.123-12.558 34.251-5.429 44.865-6.816 18.487-1.982 18.818-1.509m39.15.848c13.811.82 28.792 5.131 39.084 8.676s18.363 8.269 22.664 12.593 5.412 8.532 3.143 13.355-8.579 11.331-16.754 15.583-19.897 8.019-32.298 9.932-27.694 1.387-42.109 1.547-30.516 1.075-44.38-.587-29.148-5.58-38.803-9.385-15.219-8.737-19.13-13.442-7.034-10.229-4.335-14.789 11.329-9.205 20.531-12.57 21.577-5.699 34.679-7.621 31.084-3.376 43.931-3.914 27.952.606 33.148.685-1.61-.812-1.973-.213" class="D J"/><text x="2639.381" y="1786.65" class="B C E G I">BarItemComponent</text><path d="M2684.76 1863.394c13.229 1.418 27.296 4.35 36.765 7.758s16.346 8.227 20.05 12.688 5.055 9.226 2.169 14.076-10.37 11.276-19.483 15.023-21.866 5.702-35.199 7.46-30.114 3.207-44.801 3.093-30.039-1.898-43.324-3.776-27.458-3.855-36.387-7.491-14.471-9.65-17.183-14.323-2.912-9.188.909-13.718 12.077-9.763 22.019-13.462 23.956-7.106 37.636-8.733 31.07-1.132 44.442-1.026 29.791 1.071 35.789 1.662.903 1.247.2 1.884m3.141-.761c13.123 1.769 25.288 5.887 33.833 9.495s14.91 7.373 17.438 12.153 1.542 11.633-2.269 16.523-11.231 9.719-20.597 12.821-22.264 4.136-35.595 5.792-29.436 4.31-44.39 4.143-32.639-2.525-45.336-5.142-22.565-6.489-30.843-10.558-16.727-9.249-18.824-13.855 1.28-9.695 6.241-13.779 13.236-7.558 23.523-10.724 24.37-6.46 38.2-8.274 32.13-2.562 44.78-2.609 25.68 1.611 31.122 2.325 1.802 1.075 1.533 1.958" class="D J"/><text x="2645.381" y="1897.65" class="B C E G I">IconComponent</text><path d="M2240.202 1751.505c12.449-2.242 29.427-2.547 44.197-2.237s31.653 1.406 44.424 4.094 24.284 8.015 32.201 12.033 13.727 7.67 15.302 12.078-.89 10-5.854 14.369-13.186 8.325-23.929 11.843-26.437 7.699-40.526 9.264-29.49.862-44.007.127-30.889-1.877-43.091-4.541-23.112-7.154-30.122-11.441-11.218-9.735-11.939-14.283 1.771-8.686 7.614-13.009 14.736-9.711 27.44-12.929 36.903-5.358 48.784-6.375 22.021-.237 22.502.275m-30.327.243c12.866-1.672 30.152-2.426 44.237-1.256s28.736 4.992 40.273 8.276 22.329 7.601 28.953 11.43 10.772 6.976 10.787 11.542-3.708 11.524-10.701 15.853-19.503 7.582-31.257 10.124-24.719 4.435-39.266 5.129-33.727.249-48.019-.968-27.076-3.572-37.73-6.339-20.653-6.069-26.195-10.258-8.093-9.911-7.056-14.878 6.077-10.553 13.28-14.927 19.368-8.94 29.942-11.317 27.765-2.733 33.5-2.945.854 1.207.911 1.673" class="D J"/><text x="2276.381" y="1787.15" class="B C E G I">BarItemComponent</text><path d="M2310.617 1861.521c13.924.735 29.678 3.36 40.619 6.821s19.817 9.49 25.026 13.943 7.685 8.362 6.23 12.778-7.267 9.768-14.96 13.716-18.588 7.216-31.199 9.971-29.755 5.941-44.468 6.557-30.043-1.184-43.81-2.859-28.562-3.791-38.797-7.192-18.384-8.543-22.612-13.214-5.06-10.313-2.755-14.813 8.095-8.336 16.585-12.187 21.547-8.61 34.357-10.924 28.923-2.756 42.503-2.96 31.865 1.269 38.975 1.736 4.43.479 3.684 1.062m-31.364-3.864c13.764-.005 29.929 3.584 42.682 6.3s25.342 6.506 33.84 9.997 14.986 6.419 17.149 10.946.841 11.619-4.171 16.217-15.553 8.31-25.9 11.373-22.178 5.647-36.182 7.006-33.118 1.695-47.841 1.152-28.523-2.189-40.495-4.411-23.86-5.032-31.335-8.919-12.401-9.433-13.515-14.402 1.553-10.733 6.828-15.412 13.647-9.628 24.821-12.664 29.491-4.622 42.22-5.553 28.9.094 34.156-.032-2.145-1.199-2.62-.725" class="D J"/><text x="2282.381" y="1898.15" class="B C E G I">IconComponent</text><g class="D J"><path d="M2397.083 1703.709l-101.06 40.498m99.972-41.615l-101.108 42.657"/><path d="M2316.711 1724.312c-6.434 4.315-8.698 8.071-21.092 22.876m20.662-21.573c-8.316 5.611-14.356 14.015-21.627 18.931"/><path d="M2324.626 1743.246c-8.13.079-12.185-.448-29.007 3.943m28.577-2.639c-11.018-1.135-19.88.522-29.542-.002m-14.41 73.244l-1.807 34.75m.276-35.984c.197 5.704 1.781 31.168 1.941 37.203"/><path d="M2273.378 1836.233c1.422 6.435 2.372 10.111 8.974 18.515m-7.833-18.003c.17 5.473 2.787 8.38 5.52 17.488"/><path d="M2285.34 1835.671c-1.569 6.562-3.613 10.378-2.989 19.077m4.13-18.566c-2.671 5.528-2.897 8.569-6.442 18.05m247.983-152.025l96.504 37.554m-94.491-35.434l96.884 33.675"/><path d="M2595.351 1737.486c13.49-.934 23.836 2.685 32.695-.733m-32.111.812c10.859.794 18.833-.28 31.522.123"/><path d="M2602.049 1718.088c11.064 6.007 19.006 16.588 25.997 18.664m-25.413-18.585l24.824 19.521m10.98 78.855c.138 5.541 1.404 27.531 1.634 33.493m.071-31.197c.052 5.679-.513 26.859-.656 32.149m-6.255-15.143c.79 4.339 5.575 9.328 5.194 15.164m-5.127-15.438c2.361 2.927 2.838 7.36 5.922 15.262"/><path d="M2644.856 1836.149c-2.564 4.16-1.134 9.061-6.431 14.86m6.498-15.133c-.365 2.741-2.611 7.102-5.703 14.958"/></g><path d="M2418.656 1521.547c11.53-2.478 28.261-3.012 42.679-3.053s31.177.601 43.828 2.809 23.702 6.836 32.075 10.439 15.855 6.983 18.167 11.176.192 9.884-4.296 13.982-12.688 7.734-22.636 10.609-23.453 5.133-37.05 6.644-30.351 3.048-44.532 2.423-28.733-3.646-40.555-6.174-23.664-5.345-30.376-8.992-9.897-8.579-9.897-12.889 3.783-9.188 9.896-12.971 18.187-7.325 26.783-9.722 18.941-3.705 24.791-4.661 9.846-1.33 10.31-1.074m66.56.881c13.13 1.307 26.022 6.719 34.313 10.313s12.974 7.282 15.435 11.25 3.676 8.616-.671 12.559-15.26 7.954-25.415 11.097-22.192 5.984-35.515 7.762-30.099 3.315-44.419 2.905-29.605-2.645-41.499-5.369-22.766-6.873-29.864-10.972-12.546-9.423-12.725-13.622 4.994-8.102 11.653-11.575 17.249-6.586 28.299-9.264 24.222-5.941 38.004-6.803 34.378 1.208 44.685 1.629 14.63.365 17.157.897-1.175 1.652-1.992 2.299" class="D P"/><g class="J D"><path d="M2458.572 1580.785c.23 8.629-.249 43.884-.252 52.279m-.845-50.25c.193 8.378.016 40.528.127 48.738"/><path d="M2447.119 1608.82c5.588 5.54 4.31 9.634 9.17 24.145m-7.089-25.111c.592 5.421 2.717 9.423 8.742 23.163"/><path d="M2464.22 1608.765c1.802 5.651-3.262 9.756-7.931 24.2m10.011-25.165c-2.85 5.574-4.166 9.587-8.359 23.218"/></g><g class="P D"><path d="M2504.076 1645.9c12.858 1.443 26.061 4.566 34.296 8.263s13.017 9.607 15.115 13.918 1.935 7.973-2.531 11.947-13.953 8.893-24.262 11.899-24.023 4.989-37.592 6.139-29.564 1.236-43.823.764-29.965-1.156-41.727-3.595-21.98-7.253-28.843-11.036-12.038-7.583-12.334-11.662 4.072-8.979 10.557-12.811 17.08-7.677 28.356-10.181 25.217-4.016 39.304-4.839 33.547-.501 45.214-.103 19.975 1.874 24.788 2.492 4.833.795 4.086 1.219m-9.871-1.216c12.581 1.63 23.261 4.443 31.752 7.615s17.041 7.396 19.196 11.419-1.683 8.629-6.265 12.717-11.336 8.422-21.227 11.812-24.33 7.003-38.117 8.527-30.208 1.502-44.605.621-29.657-3.159-41.775-5.907-24.283-6.948-30.932-10.585-9.087-7.411-8.961-11.237 3.85-7.841 9.717-11.717 14.406-8.886 25.483-11.539 26.571-3.572 40.975-4.381 34.991-1.045 45.447-.468 14.47 3.267 17.288 3.928-.014.066-.379.043m137.289 104.521c14.008-.474 32.169 2.291 45.175 4.261s24.385 4.229 32.858 7.561 15.634 8.084 17.976 12.435.612 9.577-3.921 13.673-13.32 7.813-23.275 10.9-22.767 6.328-36.454 7.623-31.282.725-45.664.145-28.875-1.448-40.63-3.627-22.964-5.538-29.902-9.447-11.355-9.646-11.728-14.008 3.404-8.459 9.49-12.166 15.89-7.364 27.027-10.077 29.026-5.312 39.794-6.204 19.709.586 24.817.852 5.691.56 5.827.741m22.562 1.473c13.108.945 26.703 1.565 36.341 4.55s17.48 8.995 21.485 13.357 4.919 8.722 2.545 12.815-8.104 8.471-16.787 11.746-21.966 6.351-35.308 7.904-29.953 1.327-44.742 1.415-31.319.63-43.992-.887-24.129-4.412-32.048-8.215-13.319-10.061-15.467-14.607-1.948-8.851 2.578-12.67 14.292-7.213 24.573-10.242 23.211-6.522 37.11-7.932 35.451-.98 46.285-.531 16.074 2.788 18.717 3.226-2.114-.683-2.857-.6m-57.587 110.716c12.472-1.568 31.22-2.836 45.594-2.298s28.844 3.103 40.649 5.524 23.104 5.46 30.178 9.003 11.78 7.868 12.264 12.252-3.276 10.213-9.359 14.052-15.672 6.414-27.138 8.983-27.465 5.448-41.659 6.434-29.78.621-43.505-.521-27.933-3.568-38.842-6.334-21.298-6.279-26.612-10.261-6.867-9.184-5.275-13.63 7.13-9.29 14.831-13.046 21.809-7.502 31.376-9.489 20.491-2.189 26.024-2.434 7.057.33 7.176.963m36.674-1.991c13.686.22 26.535 2.492 37.79 5.166s23.311 6.663 29.737 10.877 9.311 9.998 8.82 14.409-4.792 8.61-11.767 12.058-17.919 6.536-30.082 8.63-28.742 3.253-42.892 3.933-28.786 1.108-42.009.147-26.862-2.832-37.327-5.91-20.729-8.462-25.463-12.554-5.448-7.824-2.94-12.001 9.532-9.763 17.985-13.058 19.971-4.997 32.736-6.713 32.962-2.714 43.852-3.583l21.488-1.628c3.33.006-.834 1.132-1.507 1.665m-184.893-289.955l.383 66.557m-1.834-64.356c-.189 11.252.97 54.485 1.332 65.271"/><path d="M2467.893 1616.339c3.109 6.654 10.69 18.902 11.919 25.065m-10.267-27.012c3.527 11.155 8.087 19.787 10.297 28.89m8.564-27.535c-4.204 6.867-3.933 19.327-8.594 25.657m10.246-27.604c-3.733 11.328-6.431 20.169-10.216 29.483m73.095 46.692l108.049 40.619m-106.262-41.22l108.351 42.169m-28.575-2.799c3.843 4.028 13.28 2.099 27.17 3.876m-29.118-1.864c9.324.763 16.147-.13 30.996 1.457"/><path d="M2642.045 1709.661c2.053 8.513 9.697 11.117 19.625 22.959m-21.573-20.948c7.263 5.916 12.058 10.15 23.451 20.541m-.975 78.446c-.454 8.266-3.197 41.872-3.558 49.991m2.544-47.999l-.421 46.4"/><path d="M2651.362 1834.573c5.837 9.069 6.062 14.032 10.853 23.852m-8.842-21.249c2.919 5.181 4.003 12.528 8.434 22.296"/><path d="M2667.721 1834.848c.911 9.102-3.793 13.982-5.506 23.576m7.517-20.973c-1.694 5.016-5.22 12.285-7.924 22.021m-459.294-416.739c12.419-.248 62.636.584 74.909.478m-73.33 1.548l72.905-3.53"/></g><text y="1448.494" x="2289.244" class="B C E S">Update</text><g transform="matrix(1 0 0 1 2271.831332 1205.942887)" class="B E G I K"><text x="193.5" y="32">Pure Component Tree</text><text x="193.5" y="77">with propagated data</text><text x="193.5" y="122">and updating a node</text><text x="193.5" y="167">“best-case” scenario</text></g><g transform="matrix(1 0 0 1 4048.994208 1703.183951)" class="B C F H"><text y="19" x="0">fragment TileBarItem on TileBarNode {</text><text y="43" x="0"> icon {</text><text y="67" x="0"> src</text><text y="91" x="0"> }</text><text y="115" x="0">}</text></g><path d="M3692.456 1463.718c13.85-1.391 31.659-1.382 45.676-.053s27.949 4.479 38.427 8.026 19.263 8.902 24.441 13.256 7.817 8.42 6.627 12.866-5.979 9.864-13.767 13.811-20.382 7.455-32.957 9.87-27.913 4.135-42.493 4.62-31.225-.178-44.986-1.706-27.477-4.076-37.575-7.463-18.451-8.512-23.016-12.859-6.745-8.654-4.375-13.222 9.949-10.36 18.595-14.19 21.365-6.615 33.281-8.79 30.953-3.594 38.213-4.26 5.248-.304 5.352.267m-26.354 1.983c12.812-1.758 30.593-1.83 45.24-1.439s30.57 1.377 42.641 3.786 22.52 6.532 29.783 10.669 13.176 9.118 13.794 14.152-4.278 11.427-10.087 16.049-13.695 8.67-24.768 11.687-27.055 5.513-41.67 6.414-31.53.013-46.016-1.006-29.418-2.508-40.903-5.107-21.853-6.142-28.005-10.488-9.244-10.589-8.903-15.584 4.54-10.312 10.953-14.386 18.06-7.296 27.523-10.059 24.025-5.542 29.255-6.519 1.489-.015 2.126.654" class="D J"/><text x="3709.982" y="1500.745" class="B C E G I">AppBarContainer</text><path d="M3719.701 1586.494c14.001.005 29.739 2.797 41.832 5.684s23.189 7.646 30.727 11.636 13.071 7.848 14.502 12.3-.475 10.093-5.919 14.415-15.758 8.437-26.749 11.52-25.118 5.669-39.198 6.978-30.835 1.594-45.282.875-29.57-2.431-41.401-5.188-22.598-7.331-29.586-11.358-12.095-8.18-12.339-12.804 4.495-10.691 10.871-14.94 15.952-7.659 27.384-10.554 28.213-5.569 41.207-6.814 30.11-.762 36.759-.655 3.548.737 3.134 1.296m-1.673-.338c14.125-.018 30.379 1.588 42.261 4.082s22.056 6.695 29.033 10.882 12.535 9.199 12.828 14.237-4.964 11.408-11.071 15.989-14.286 8.557-25.568 11.494-27.43 5.328-42.121 6.128-31.61-.206-46.026-1.326-29.188-2.715-40.469-5.396-21.361-6.296-27.217-10.686-8.59-10.658-7.923-15.651 5.222-10.281 11.924-14.308 16.748-7.019 28.286-9.851 28.217-5.964 40.942-7.146 29.687-.211 35.412.057-.647.934-1.066 1.553" class="D J"/><text x="3706.982" y="1624.745" class="B C E G I">BarComponent</text><path d="M3890.15 1697.047c13.761-.018 30.088 2.754 43.079 4.905s26.011 4.431 34.869 8.005 15.848 8.855 18.28 13.438.596 9.632-3.686 14.061-12.091 9.051-22.008 12.516-23.81 6.468-37.495 8.272-29.99 2.936-44.616 2.549-30.376-2.575-43.142-4.87-25.634-5.011-33.454-8.896-12.025-9.759-13.465-14.415-.157-9.157 4.823-13.52 14.482-9.272 25.054-12.662 24.088-6.3 38.378-7.68 37.516-.727 47.363-.601 12.018.923 11.722 1.357m8.205-.769c13.535.919 26.656 4.647 36.678 8.15s19.487 8.011 23.456 12.865 2.913 11.324.358 16.259-7.102 9.594-15.686 13.351-22.414 7.273-35.815 9.19-29.792 2.248-44.591 2.312-30.942-.257-44.199-1.928-26.325-4.338-35.347-8.101-15.746-9.601-18.783-14.48-2.656-10.344.564-14.791 9.765-8.188 18.759-11.889 21.673-8.141 35.204-10.32 32.911-2.815 45.985-2.753 27.185 2.567 32.459 3.128-.068-.143-.814.235" class="D J"/><text x="3886.982" y="1734.745" class="B C E G I">BarItemComponent</text><path d="M3845.677 1812.943c11.647-2.566 29.551-4.829 44.488-5.207s31.798 1.045 45.135 2.941 25.68 4.877 34.889 8.435 16.976 8.327 20.367 12.916 3.272 9.924-.022 14.615-10.455 9.861-19.741 13.534-22.4 6.398-35.972 8.501-30.854 4.168-45.462 4.114-29.369-2.26-42.185-4.437-26.064-4.877-34.712-8.623-14.668-9.091-17.176-13.851-1.969-10.236 2.124-14.711 11.924-8.624 22.431-12.138 31.016-7.308 40.608-8.946 16.184-1.349 16.944-.88m42.816-.548c13.968.787 30.165 3.754 40.963 7.241s18.367 9.012 23.824 13.686 9.954 9.702 8.921 14.356-7.257 9.779-15.12 13.567-19.648 6.637-32.059 9.163-27.893 5.115-42.403 5.989-30.998.913-44.655-.743-27.181-5.55-37.284-9.192-18.505-8.324-23.331-12.659-7.243-8.613-5.623-13.351 6.998-10.925 15.342-15.075 21.821-7.647 34.721-9.825 29.964-2.837 42.68-3.244 28.226.624 33.614.802-.864-.494-1.282.266" class="D J"/><text x="3892.982" y="1845.745" class="B C E G I">IconComponent</text><path d="M3513.511 1697.402c13.971-1.189 31.926.281 45.692 1.843s26.849 4.209 36.904 7.528 18.945 7.893 23.425 12.387 5.638 9.813 3.452 14.573-8.179 10.096-16.564 13.986-20.681 6.93-33.746 9.355-30.045 4.888-44.642 5.195-29.636-1.5-42.941-3.351-27.352-4.233-36.888-7.755-16.713-8.694-20.326-13.38-4.35-10.17-1.352-14.733 10.4-8.982 19.342-12.648 21.933-7.23 34.311-9.35 32.17-2.922 39.958-3.374 6.668.066 6.774.664m-25.941-.251c13.083-1.214 28.874.259 43.269 1.555s31.455 3.332 43.102 6.217 20.822 7.1 26.777 11.091 9.243 8.199 8.952 12.859-4.122 10.597-10.701 15.098-17.229 9.189-28.771 11.908-26.242 3.821-40.48 4.404-30.588.218-44.951-.911-29.867-2.655-41.228-5.863-21.521-8.774-26.935-13.385-6.738-9.745-5.547-14.279 5.398-8.958 12.69-12.928 20.835-8.293 31.06-10.894 25.001-4.338 30.291-4.715.887 1.633 1.449 2.454" class="D J"/><text x="3523.982" y="1735.245" class="B C E G I">BarItemComponent</text><path d="M3578.138 1812.103c12.971 1.638 24.564 5.419 33.012 9.164s15.226 8.657 17.676 13.305 1.247 9.972-2.973 14.585-12.339 9.619-22.347 13.089-23.756 5.915-37.698 7.734-31.404 3.542-45.952 3.182-29-2.899-41.34-5.342-24.851-5.398-32.705-9.316-12.86-9.387-14.419-14.19.062-10.247 5.065-14.626 14.466-8.428 24.951-11.645 23.944-6.154 37.961-7.658 32.305-1.851 46.143-1.366 30.254 3.272 36.884 4.275 3.962 1.293 2.894 1.738m-82.965-3.944c13.082-1.359 32.835-1.428 47.41-.596s28.625 3.023 40.039 5.587 21.867 5.644 28.445 9.792 10.731 10.087 11.02 15.099-3.198 10.829-9.282 14.977-15.913 7.275-27.226 9.91-26.083 4.776-40.653 5.902-32.111 2.071-46.768.858-30.053-4.85-41.177-8.137-19.806-7.429-25.565-11.582-9.522-8.725-8.994-13.335 5.217-10.077 12.163-14.322 19.324-8.823 29.511-11.148 26.255-2.432 31.612-2.798.224.536.526.603" class="D J"/><text x="3529.982" y="1846.245" class="B C E G I">IconComponent</text><g class="D J"><path d="M3645.16 1652.075l-101.806 42.164m100.968-43.139l-98.585 41.539"/><path d="M3567.951 1671.185c-4.812 6.047-12.962 10.907-21.857 19.528m21.305-18.16c-7.451 5.471-13.138 13.535-21.845 20.512"/><path d="M3575.924 1690.094c-6.929.854-17.302.443-29.83.619m29.278.749c-9.802-.453-18.001 1.655-29.818 1.603m-17.438 72.552c.111 5.546.085 29.32-.14 35.084m-1.248-32.8l.822 34.052"/><path d="M3520.462 1787.022c1.792 2.225 2.573 6.854 5.403 15.195m-4.206-17.24c.479 4.631 3.239 7.506 6.265 17.588"/><path d="M3532.437 1786.887c-1.13 2.271-3.272 6.933-6.572 15.33m7.769-17.375c-2.097 4.62-1.914 7.524-5.71 17.723m245.723-150.96l98.695 35.397m-96.824-35.921l95.591 37.344"/><path d="M3842.773 1686.884c9.937-.418 22.612-.356 28.636-.155m-30.972.336c11.447 1.756 20.914 1.487 31.37 2.215"/><path d="M3850.199 1667.754c6.998 7.168 16.713 14.856 21.21 18.976m-23.546-18.794c8.857 8.291 15.795 14.535 23.944 21.346m16.169 75.42c-.059 5.598-1.081 27.938-1.211 33.503m.274-31.173l-1.336 32.165"/><path d="M3879.665 1782.725c.85 5.598 2.328 10.579 4.596 17.158m-4.442-16.374c2.85 3.724 3.846 8.793 6.611 15.864"/><path d="M3891.287 1783.12c-2.764 5.571-4.904 10.43-7.026 16.763m7.18-15.979c-.257 3.54-2.367 8.503-5.011 15.469m-182.103-269.198l.137 50.305m1.457-51.256c.458 7.996 1.021 41.218.72 49.388"/><path d="M3698.508 1553.381c2.349 6.143 3.984 10.459 6.687 26.351m-6.289-23.799c2.767 8.662 5.832 17.97 8.19 22.064"/><path d="M3715.609 1553.466c-1.299 5.96-3.311 10.258-10.414 26.266m10.812-23.714c-3.923 8.702-7.548 17.976-8.911 21.978"/></g><g class="P D"><path d="M3856.475 1702.922c12.68-1.712 29.556-1.104 43.903-.499s30.209 1.876 42.18 4.129 22.674 5.651 29.647 9.39 11.765 8.785 12.191 13.047-3.623 8.763-9.634 12.525-15.373 7.431-26.434 10.044-25.804 4.693-39.929 5.636-30.619 1.119-44.819.025-29.373-3.858-40.381-6.59-20.345-5.791-25.664-9.805-7.771-10.075-6.247-14.281 7.533-7.439 15.392-10.953 21.96-7.815 31.764-10.132 21.059-3.163 27.059-3.768 8.593-.38 8.94.139m59.264 2.67c12.636 1.643 24.103 6.319 32.093 9.699s13.579 6.64 15.847 10.578 2.152 8.87-2.243 13.052-13.756 8.953-24.128 12.039-24.217 5.275-38.103 6.48-30.94 1.13-45.214.746-28.785-.904-40.43-3.051-22.531-5.64-29.437-9.83-11.849-10.968-12.002-15.31 4.512-7.029 11.082-10.743 16.773-8.82 28.339-11.54 26.773-4.218 41.058-4.776 34.5.793 44.651 1.427 13.695 1.9 16.256 2.374-.32.01-.888.469m-70.754 108.542c12.377-1.825 30.695-1.671 45.154-1.238s29.561 1.61 41.601 3.838 23.282 6.037 30.641 9.529 12.579 7.215 13.518 11.422-2.094 9.704-7.887 13.822-15.748 8.132-26.87 10.889-25.834 4.894-39.859 5.656-30.205.096-44.289-1.079-29.258-3.243-40.214-5.968-19.817-6.705-25.524-10.384-9.717-7.666-8.723-11.69 7.227-8.785 14.691-12.452 21.454-7.303 30.094-9.55 17.259-3.415 21.748-3.932 4.63.179 5.186.829m45.981-1.721c13.862.094 30.075 2.102 41.169 4.909s19.823 7.924 25.395 11.932 8.653 8.026 8.037 12.119-4.619 8.902-11.732 12.437-18.738 6.408-30.947 8.774-28.173 4.779-42.305 5.423-29.209.047-42.489-1.56-26.872-5.102-37.191-8.081-20.572-6.02-24.725-9.795-2.945-8.777-.191-12.856 8.076-8.314 16.716-11.617 21.866-6.008 35.119-8.199 33.687-4.24 44.402-4.948 16.649.312 19.888.702-.144.911-.454 1.636m-5.776-52.468c-.166 8.198-2.244 39.271-2.482 47.228m1.375-47.699c-.272 7.914-2.331 38.111-2.439 45.846"/><path d="M3901.098 1783.227c.531 7.016 3.054 11.333 6.048 23.129m-7.705-22.42c2.315 8.317 4.835 15.988 7.309 21.984"/><path d="M3917.443 1783.95c-3.257 6.94-4.527 11.089-10.297 22.406m8.64-21.697l-9.036 21.261"/></g><path d="M3454.327 1392.109l72.117-1.191m-73.037.277c11.939-.168 60.195 1.537 72.307 1.244" class="D L"/><text y="1396.904" x="3538.846" class="B C E F">GraphQL Fragment</text><g class="D L"><path d="M4043.131 1698.915l447.67-1.259m-447.194.931l447.194-.642m1.009.273c.136 44.762-1.808 91.363-2.631 130.563m1.917-130.993c-.821 40.841-1.053 82.814.749 131.687m-.71.71c-175.113-2.803-350.141-2.442-447.334-.024m447.397-.485c-97.152-1.618-194.802-1.273-447.718-.039m1.403-1.17c.051-49.584-1.424-103.827.292-131.782m-1.384 132.993c-.819-29.878-.134-58.428-.474-130.617"/><path d="M3980.279 1727.737l64.382-.351m-65.368-.727c10.676-.414 54.263-1.452 64.77-1.208m-.9 8.399l-51.12-1.252m49.628.556c-8.628-.173-41.893.614-50.389.674m-211.621-1.057l-166.666-1.109m165.556.251l-163.152 1.209"/></g><g transform="matrix(1 0 0 1 3688.374549 1199.353043)" class="B E G I K"><text x="263" y="32">Fragmentized Component Tree</text><text x="263" y="77">with “connected” data</text><text x="263" y="122">and updating a node</text></g><path d="M3452.677 1427.252c12.138-.246 60.509-2.403 72.895-2.542" class="D L M O"/><text y="1431.481" x="3538.872" class="B C E F">GraphQL Client Store Connection</text><g class="D L"><path d="M4335.931 1850.991c19.934 1.455 39.015 6.053 55.321 10.803s31.251 11.211 42.518 17.696 19.996 14.122 25.083 21.212 7.121 14.188 5.439 21.324-6.996 14.631-15.53 21.49-21.266 14.171-35.676 19.666-32.36 9.699-50.785 13.302-38.838 6.588-59.764 8.315-44.256 2.672-65.794 2.044-43.584-2.799-63.434-5.809-39.575-7.532-55.662-12.248-30.095-9.904-40.86-16.05-19.082-13.343-23.733-20.829-6.463-16.697-4.171-24.085 8.963-13.592 17.919-20.243a152.94 152.94 0 0 1 35.815-19.665c14.499-5.551 32.443-10.14 51.18-13.641s40.377-5.991 61.244-7.367 42.934-1.71 63.957-.893 51.025 4.429 62.18 5.796 5.999 1.433 4.753 2.406m7.883-1.363c19.762 2.47 37.766 9.165 52.466 14.632s26.244 11.773 35.734 18.171 18.115 12.901 21.205 20.221 1.33 16.655-2.667 23.695-11.47 12.243-21.316 18.547-22.583 13.994-37.762 19.276-33.887 9.345-53.311 12.415-41.961 4.831-63.233 6.003-43.188 2.046-64.402 1.031-43.826-3.392-62.884-7.119-36.535-9.889-51.465-15.243-28.864-10.42-38.114-16.877-14.692-14.571-17.386-21.868-2.641-14.578 1.222-21.911 11.546-15.345 21.956-22.086 24.638-13.454 40.505-18.362 35.051-8.163 54.696-11.086 41.972-5.385 63.175-6.45 44.055-.952 64.041.06 46.905 4.51 55.873 6.016-.378 1.882-2.061 3.019m143.202-71.129c7.327 9.141 49.538 33.659 45.29 53.135s-58.855 53.257-70.778 63.724m27.174-117.75c7.124 8.895 47.604 33.184 42.874 52.517s-59.46 52.604-71.253 63.483m18.184-23.844c-6.598 7.487-13.262 16.095-18.858 22.977m17.442-24.368c-5.439 8.616-11.859 18.152-17.714 24.94"/><path d="M4497.136 1891.456c-11.187 1.252-22.502 3.694-31.215 6.593m29.799-7.984c-9.623 3.07-20.285 6.983-30.07 8.556"/></g><text x="4256.599" y="1923.481" font-size="28" class="B E F I">GraphQL Client Store</text><g class="D"><g class="L O"><path d="M4058.349 1888.257c-7.696-6.626-34.623-18.739-45.969-39.187s-15.166-65.404-22.103-83.499-16.076-20.934-19.52-25.069" class="M"/><path d="M3997.596 1750.659c-10.406-2.508-20.519-5.47-25.951-10.122"/><path d="M3984.188 1766.194c-5.296-8.489-10.319-17.349-12.542-25.657"/></g><path d="M3454.225 1361.031c12.044.008 59.953-1.067 72.182-1.326m-73.48.689l72.406-2.622" class="P"/></g><text y="1363.616" x="3539.465" class="B C E S">Update</text><text y="617.215" x="288.43" class="B E G K">Architectures</text><path d="M11.319 176.761l4913.756 5.449M10 178.787l4917.274 4.607M11.976 1099.415l4914.674 4.419m-4916.027-5.096l4915.015 6.696" class="D J"/><text y="1610.715" x="277.93" class="B E G K">Performance</text><path d="M10.258 2083.543l4916.757 5.504m-4914.916-6.64l4914.53 4.692" class="D J"/><g transform="matrix(1 0 0 1 1507.680011 2344.318476)" class="B C F H"><text y="19" x="0">query AppBarQuery {</text><text y="43" x="0"> launchTileBar {</text><text y="67" x="0"> edges {</text><text y="91" x="0"> node {</text><text y="115" x="0"> # Removed icon field selection</text><text y="139" x="0"> }</text><text y="163" x="0"> }</text><text y="187" x="0"> }</text><text y="211" x="0">}</text></g><path d="M1232.121 2445.265c12.658-1.832 30.29-1.98 44.999-1.385s30.965 2.354 43.25 4.952 23.575 6.323 30.462 10.634 10.3 10.492 10.861 15.234-1.667 9.002-7.493 13.217-16.269 9.006-27.467 12.075-25.518 5.038-39.72 6.339-31.05 2.284-45.496 1.466-29.565-3.217-41.179-6.372-22.025-8.082-28.503-12.559-10.59-9.776-10.364-14.302 5.035-8.773 11.72-12.852 17.137-8.701 28.389-11.621 31.563-4.817 39.121-5.896 6.013-1.002 6.228-.579m11.245-1.379c13.654-.246 29.449 3.029 42.985 5.109s28.638 3.868 38.234 7.372 15.723 8.91 19.339 13.656 5.652 10.33 2.353 14.815-12.972 8.714-22.15 12.096-19.954 6.128-32.915 8.197-30.091 4.101-44.852 4.215-30.684-1.484-43.713-3.531-25.342-5.05-34.462-8.751-17.539-8.511-20.261-13.456-.4-11.459 3.925-16.21 12.236-8.786 22.024-12.295 25.327-7.231 36.705-8.757 25.996-.336 31.567-.398 1.441-.388 1.856.03" class="D J"/><text x="1264.18" y="2481.068" class="B C E G I">AppBarContainer</text><path d="M1272.607 2567.722c14.233-.075 31.25 2.012 43.829 4.472s24.303 6.057 31.644 10.286 11.32 10.356 12.402 15.088-.563 9.024-5.909 13.304-15.309 9.182-26.165 12.377-24.898 5.331-38.967 6.793-30.898 2.634-45.447 1.98-29.913-2.881-41.844-5.904-22.8-7.83-29.746-12.232-11.633-9.659-11.929-14.185 3.937-8.816 10.154-12.968 15.513-8.848 27.143-11.946 28.335-5.421 42.641-6.642 34.313-.864 43.196-.683 10.428 1.071 10.102 1.765m-80.597 3.111c11.732-2.331 30.967-4.786 45.806-5.023s29.749 1.474 43.23 3.602 28.495 5.638 37.658 9.169 13.996 7.729 17.318 12.015 5.603 9.054 2.612 13.699-11.194 10.336-20.562 14.17-22.327 6.78-35.648 8.832-29.241 3.546-44.278 3.482-32.894-1.349-45.942-3.865-24.058-7.201-32.348-11.231-14.866-8.306-17.392-12.95-1.596-10.639 2.241-14.912 12.546-7.735 20.779-10.728 23.646-6.104 28.621-7.228.342-.001 1.232.486" class="D J"/><text x="1261.18" y="2605.068" class="B C E G I">BarComponent</text><path d="M1455.238 2677.269c14.317.014 30.618 2.164 42.666 4.972s22.356 7.755 29.621 11.877 12.927 8.249 13.971 12.854-2.135 10.391-7.706 14.781-14.745 8.277-25.721 11.558-25.852 6.712-40.133 8.127-31.009 1.491-45.554.362-29.814-4.061-41.717-7.134-23.124-7.268-29.703-11.3-9.671-8.294-9.774-12.89 2.581-10.302 9.154-14.691 18.603-8.562 30.285-11.646 26.518-5.734 39.807-6.858 32.427-.217 39.929.116 5.56 1.211 5.084 1.884m-67.42 1.247c12.044-2.489 28.182-2.696 42.991-2.504s32.84 1.675 45.865 3.655 23.361 4.787 32.287 8.227 18.065 7.737 21.268 12.414 1.806 10.914-2.049 15.652-11.459 9.134-21.08 12.777-22.737 7.194-36.647 9.08-32.088 2.843-46.815 2.235-29.116-3.326-41.545-5.881-24.751-5.544-33.025-9.448-14.276-9.556-16.618-13.977-2.093-8.297 2.567-12.553 16.529-9.751 25.396-12.984 22.969-5.468 27.811-6.413.453.125 1.243.745" class="D J"/><text x="1441.18" y="2715.068" class="B C E G I">BarItemComponent</text><path d="M1048.511 2679.941c12.872-1.729 31.494-2.682 46.127-2.024s29.602 3.205 41.67 5.972 23.645 6.312 30.736 10.627 11.308 10.37 11.811 15.265-2.711 10.022-8.789 14.104-16.188 7.591-27.681 10.39-26.968 5.112-41.279 6.407-30.196 2.272-44.584 1.363-30.41-3.719-41.742-6.817-20.08-7.315-26.245-11.769-10.87-10.148-10.75-14.952 4.675-9.861 11.472-13.871 17.544-7.531 29.311-10.19 32.351-4.663 41.292-5.762 11.784-1.407 12.352-.833m-1.775 1.119c13.635-.991 28.483-.382 42.204 1.009s29.791 3.821 40.123 7.338 17.728 9.057 21.873 13.76 5.39 9.716 2.996 14.457-8.421 10.096-17.361 13.988-23.246 7.469-36.279 9.364-27.563 2.074-41.923 2.004-30.805-.478-44.239-2.426-26.695-5.866-36.365-9.261-18.326-6.739-21.658-11.109-1.978-10.408 1.668-15.111 10.804-9.471 20.205-13.107 24.708-6.905 36.198-8.708 27.618-1.837 32.745-2.114-2.142-.017-1.98.452" class="D J"/><text x="1078.18" y="2715.568" class="B C E G I">BarItemComponent</text><g class="D J"><path d="M1197.228 2631.785l-98.483 42.406m100.186-43.703l-100.838 41.907"/><path d="M1119.298 2652.944c-3.285 2.669-9.112 8.53-19.33 18.832m20.962-19.676c-9.245 6.939-17.627 15.321-22.098 19.424"/><path d="M1127.26 2671.858c-5.361-1.944-13.102-.634-27.291-.082m28.923-.762c-12.416-.121-23.787 1.164-30.06.51m231.914-39.333l95.515 35.599m-96.677-36.318l99.036 34.355"/><path d="M1399.658 2665.011c6.101.745 14.103.225 30.467 2.759m-31.856-2.361c10.334.593 22.012-.391 30.538 1.326m-22.327-21.078c4.515 5.056 11.009 8.815 23.645 22.113m-25.034-21.715c8.116 7.35 17.415 13.116 23.717 20.68"/></g><g class="L D"><path d="M1259.452 2448.565c13.528-.403 30.32.842 43.31 2.402s25.846 3.822 34.628 6.96 15.155 7.477 18.069 11.865 3.196 10.202-.589 14.46-12.634 8.048-22.12 11.085-21.443 5.782-34.797 7.138-30.845 1.525-45.324.995-29.489-2.032-41.55-4.177-23.371-5.138-30.819-8.692-12.839-8.179-13.869-12.631 1.707-10.187 7.686-14.083 17.007-6.631 28.188-9.291 28.059-5.641 38.898-6.672 20.41.573 26.136.487 8.37-1.468 8.222-1m-44.02 1.925c12.471-1.669 30.336-1.428 44.283-.81s27.533 2.424 39.401 4.522 24.492 4.521 31.805 8.061 11.588 8.892 12.073 13.181-2.792 8.413-9.161 12.554-17.792 9.417-29.053 12.293-24.747 4.226-38.512 4.961-30.311.583-44.073-.547-27.922-3.482-38.501-6.235-19.506-6.348-24.971-10.283-9.369-8.994-7.824-13.327 9.19-9.161 17.093-12.671 22.416-6.21 30.323-8.39l17.12-4.692c2.587-.549-2.04.573-1.596 1.399m272.693-109.15l457.813-.79m-457.732.255l456.751-.798m.347-1.174c-1.462 70.739-3.183 144.065.557 240.074m-.279-239.261l-.357 240.041m-.78-.127c-139.429-.038-279.908.222-455.903-1.098m456.638 1.074c-105.896 1.189-211.713 1.187-456.708-.566m-.679 1.604c-.596-85.095-3.087-166.45.771-238.998m-.2 237.089l-.615-237.981"/><path d="M1359.804 2474.947l143.779 1.538m-144.648-2.779l144.174 1.268"/></g><g class="J D"><path d="M1259.308 2511.222l1.538 49.682m.468-50.253c.164 8.401-.658 39.91-.804 48.438m-6.543-21.726c2.039 6.652 3.609 11.184 5.097 20.769m-6.415-21.804c2.221 5.865 3.872 13.35 7.095 22.677"/><path d="M1271.064 2537.726c-2.951 6.493-6.367 10.919-12 20.405m10.682-21.441c-2.921 5.607-6.41 12.983-10.002 22.313"/></g><path d="M1283.862 2571.838c13.472.548 28.372 3.99 39.518 6.729s21.72 5.641 27.362 9.704 7.732 10.373 6.488 14.67-6.286 7.649-13.954 11.115-19.697 7.377-32.054 9.682-27.851 3.909-42.089 4.147-30.017-1.034-43.339-2.72-26.788-4.516-36.593-7.394-18.547-5.905-22.238-9.873-2.961-9.726.09-13.936 9.122-8.134 18.216-11.327 23.289-5.99 36.346-7.83 28.22-3.064 41.999-3.208 31.263 1.215 40.675 2.343 16.54 3.88 15.797 4.428m-26.966-4.336c13.145 1.268 26.058 4.214 35.907 7.221s18.891 7.107 23.188 10.821 4.741 7.251 2.594 11.461-7.123 10.041-15.476 13.798-21.621 6.717-34.641 8.745-29.017 3.353-43.477 3.424-30.484-.739-43.282-2.998-24.962-7.168-33.507-10.555-15.237-5.659-17.762-9.766-1.708-10.725 2.614-14.876 13.594-6.806 23.315-10.03 21.634-7.816 35.011-9.315 34.258-.06 45.251.32 17.429 1.907 20.707 1.963-.395-1.749-1.041-1.628" class="D N"/><path d="M1116.519 2683.663c13.138 1.426 27.099 5.737 36.249 9.122s15.354 7.211 18.649 11.19 4.605 8.767 1.122 12.68-12.362 7.7-22.02 10.797-22.583 6.011-35.93 7.785-29.571 3.045-44.154 2.856-30.85-1.621-43.346-3.99-24.271-6.675-31.628-10.223-11.359-6.932-12.515-11.06.291-9.839 5.582-13.707 15.204-6.594 26.162-9.5 25.662-6.852 39.587-7.933 31.078.563 43.961 1.447a378.81 378.81 0 0 1 33.335 3.854c7.677 1.267 13.499 3.312 12.725 3.745m-42.173-9.335c14.038.341 28.926 3.644 39.868 6.4s20.564 5.984 25.782 10.136 6.565 10.342 5.526 14.777-4.641 8.318-11.759 11.831-18.81 6.973-30.95 9.242-27.542 3.835-41.892 4.374-30.372.32-44.211-1.142-29.182-4.416-38.822-7.632-15.328-7.669-19.021-11.665-5.976-7.871-3.133-12.308 11.342-10.729 20.191-14.313 19.838-5.8 32.899-7.19 34.513-1.023 45.469-1.148 17.326.292 20.266.398-1.915-.305-2.623.24m325.271-.399c13.263-1.006 29.672-.86 43.687.202s29.823 3.449 40.403 6.171 18.346 6.276 23.076 10.164 7.025 8.787 5.304 13.162-7.416 9.424-15.63 13.09-20.903 6.994-33.652 8.906-28.665 2.326-42.845 2.567-29.152.524-42.235-1.121-27.082-5.527-36.265-8.751-15.877-6.353-18.832-10.59-2.456-10.732 1.1-14.836 10.883-6.838 20.24-9.788 24.498-6.286 35.901-7.911 25.001-1.656 32.516-1.839 12.442.492 12.578.74m10.396-1.599c13.743.332 29.182 2.078 40.337 4.897s20.277 7.991 26.592 12.018 11.223 8.027 11.297 12.144-4.199 8.803-10.851 12.561-17.318 7.394-29.062 9.985-26.73 4.845-41.404 5.558-32.902.104-46.64-1.281-25.613-4.125-35.786-7.025-20.619-6.063-25.249-10.376-4.516-11.045-2.529-15.503 6.166-8.172 14.45-11.246 22.065-5.388 35.249-7.2 33.613-3.091 43.855-3.673 14.683-.083 17.594.18.068.793-.131 1.398" class="P D"/><g class="N D"><path d="M1281.758 2503.676c-.337 11.14-.743 56.699-.6 67.829m2.579-65.67l-3.829 67.211"/><path d="M1269.543 2543.446c4.906 13.444 6.571 23.325 12.182 29.229m-11.502-28.356c2.893 6.529 5.241 14.008 8.787 29.435"/><path d="M1290.042 2544.415c-2.953 13-9.147 22.511-8.317 28.26m8.997-27.388c-2.403 6.27-5.36 13.498-11.712 28.466m75.647 43.218l109.321 44.047m-107.575-41.734l106.631 40.076"/><path d="M1432.079 2659.002c11.726-1.422 19.923 2.251 30.583-.466m-29.71.545c5.248.345 11.45-.608 30.789.703"/><path d="M1439.335 2639.807c9.41 4.474 15.358 14.095 23.327 18.73m-22.454-18.651c3.756 4.216 8.473 7.189 23.533 19.899m-458.236-355.734c12.092-.018 59.373-1.233 71.675-1.569m-73.13.988l75.294-2.992"/></g><text y="2307.764" x="1091.044" class="B C E Q">React Props</text><g class="D"><g class="N"><path d="M1245.18 2629.589l-108.774 49.552m110.426-50.479l-110.802 51.9"/><path d="M1157.662 2661.208c-6.98 3.539-14.907 10.643-23.164 19.186m21.883-21.901c-5.163 7.895-12.62 13.649-20.044 22.882"/><path d="M1166.297 2679.824c-9.713-2.133-20.236-.624-31.799.57m30.518-3.285c-7.651 2.152-17.778 2.151-28.679 4.266"/></g><path d="M1008.588 2339.44l71.143-1.832m-72.03.669c12.103-.295 58.875.202 70.822.267" class="L"/></g><text y="2344.024" x="1093.044" class="B C E F">GraphQL Operation</text><g transform="matrix(1 0 0 1 1069.130671 2124.36113)" class="B E G I K"><text x="304" y="32">Pure Component Tree</text><text x="304" y="77">with separated data requirements</text><text x="304" y="122">and “under-fetching” data</text></g><path d="M1006.044 2377.437c12.186-.2 61.94-1.941 74.044-2.34m-71.99 1.755l71.586-.509" class="D P"/><text y="2381.767" x="1091.869" class="B C E S">Missing Data Error</text><g transform="matrix(1 0 0 1 1134.846678 2785.798136)" class="B C E G"><text y="18" x="0">The error occurs far from the point of change,</text><text y="43" x="0">meaning a cleanup action can lead to having to</text><text y="68" x="0">understand more of a component tree than the</text><text y="93" x="0">maintainer bargained for.</text></g><text y="2575.548" x="290.597" class="B E G K">Maintenance</text><path d="M11.866 3108.2l4914.851 5.185m-4916.161-6.414l4915.284 7.866" class="D J"/><g transform="matrix(1 0 0 1 2702.846678 2345.786979)" class="B C F H"><text y="19" x="0">query AppBarQuery {</text><text y="43" x="0"> launchTileBar {</text><text y="67" x="0"> edges {</text><text y="91" x="0"> node {</text><text y="115" x="0"> icon {</text><text y="139" x="0"> src</text><text y="163" x="0"> }</text><text y="187" x="0"> }</text><text y="211" x="0"> }</text><text y="235" x="0"> }</text><text y="259" x="0">}</text></g><path d="M2423.465 2446.185c12.669-1.972 29.006-1.683 43.581-1.179s31.364 1.726 43.867 4.199 23.559 6.578 31.15 10.642 12.917 9.124 14.397 13.739-.506 9.501-5.514 13.955-13.727 9.522-24.529 12.767-26.084 5.379-40.28 6.698-30.481 1.925-44.896 1.219-29.506-2.775-41.595-5.458-24-6.628-30.94-10.638-10.358-8.697-10.7-13.422 2.761-10.703 8.653-14.931 16.251-7.524 26.698-10.436 28.483-6.026 35.984-7.036 8.641.571 9.024.974m2.479-1.997c13.618-1.433 30.53-1.19 44.703.124s29.41 4.171 40.334 7.761 19.99 9.264 25.211 13.78 7.503 8.622 6.115 13.321-6.53 10.665-14.444 14.873-20.834 8.281-33.036 10.376-25.97 1.832-40.176 2.192-30.878 1.574-45.059-.033-29.746-5.996-40.029-9.611-17.139-7.822-21.669-12.08-7.357-8.976-5.508-13.469 7.949-9.804 16.601-13.488 24.251-6.571 35.314-8.614 25.817-2.954 31.06-3.642-.136-1.024.401-.491" class="D J"/><text x="2459.347" y="2482.537" class="B C E G I">AppBarContainer</text><path d="M2435.736 2569.502c13.324-1.345 32.028-1.293 46.295-.133s28.319 3.963 39.304 7.097 20.796 7.449 26.602 11.71 8.873 9.111 8.236 13.858-4.773 10.497-12.057 14.622-19.394 7.518-31.648 10.124-27.429 4.79-41.876 5.512-30.719.226-44.808-1.179-29.229-4.106-39.725-7.252-18.529-7.172-23.253-11.625-6.674-10.489-5.091-15.091 6.83-8.608 14.585-12.52 20.732-8.597 31.945-10.954 29.262-2.474 35.329-3.186.989-1.356 1.073-1.087m26.184-1.142c14.13-.021 31.185 2.461 43.732 5.377s23.942 7.979 31.549 12.121 12.821 8.028 14.092 12.727-.939 10.883-6.466 15.467-16.118 9.266-26.696 12.035-23.097 3.383-36.776 4.577-30.438 3.371-45.297 2.587-31.83-4.321-43.856-7.293-21.319-6.613-28.299-10.541-12.774-8.482-13.58-13.024 2.407-10.126 8.745-14.229 17.792-7.576 29.287-10.389 27.418-5.112 39.681-6.492 28.034-1.791 33.896-1.789 1.573 1.258 1.274 1.8" class="D J"/><text x="2456.347" y="2606.537" class="B C E G I">BarComponent</text><path d="M2595.372 2681.24c12.116-2.315 29.027-2.707 43.568-2.509s30.629 1.564 43.679 3.692 25.814 5.22 34.619 9.075 15.796 9.398 18.214 14.056.579 9.437-3.705 13.892-12.153 9.333-21.999 12.84-23.277 6.46-37.078 8.204-31.149 2.539-45.731 2.259-29.417-1.481-41.76-3.938-24.294-6.92-32.3-10.808-13.904-7.894-15.737-12.52-.362-10.821 4.735-15.236 15.14-7.85 25.846-11.256 29.749-7.601 38.39-9.178 12.79-.916 13.452-.282m10.543-.809c13.97-.391 30.975 2.18 44.535 4.087s27.13 3.817 36.825 7.352 17.708 9.126 21.347 13.854 3.039 10.323.485 14.516-7.365 7.037-15.808 10.642-21.361 8.872-34.848 10.991-31.272 1.897-46.072 1.724-29.395-.955-42.725-2.762-27.826-4.545-37.254-8.082-16.529-8.72-19.314-13.138-1.14-8.988 2.603-13.373 10.464-9.156 19.853-12.938 24.665-7.895 36.482-9.754 29.029-1.091 34.422-1.401-2.161-.813-2.064-.455" class="D J"/><text x="2636.347" y="2716.537" class="B C E G I">BarItemComponent</text><path d="M2263.342 2679.37c13.599-.849 30.97.312 44.78 1.899s27.847 4.144 38.081 7.621 19.103 8.72 23.326 13.241 4.483 9.296 2.007 13.882-8.455 9.757-16.86 13.638-20.544 7.363-33.567 9.646-29.943 3.735-44.569 4.049-29.985-.237-43.186-2.168-26.519-5.884-36.021-9.421-17.329-7.279-20.989-11.801-4.285-10.753-.969-15.333 11.739-8.365 20.861-12.149 21.929-8.306 33.867-10.554 30.605-2.659 37.76-2.932 5.054.702 5.173 1.292m-31.008 2.292c12.726-1.75 30.468-3.046 44.987-2.405s30.17 3.438 42.128 6.252 22.066 6.98 29.618 10.63 14.32 6.724 15.695 11.27-1.472 11.654-7.445 16.003-17.262 7.203-28.396 10.092-24.141 5.785-38.405 7.243-32.407 2.244-47.178 1.506-30.005-3.274-41.444-5.936-20.743-6.005-27.188-10.036-11.241-9.248-11.482-14.152 3.374-11.036 10.038-15.268 20.348-7.397 29.949-10.122 22.591-5.298 27.655-6.226 2.163.412 2.732.655" class="D J"/><text x="2273.347" y="2717.037" class="B C E G I">BarItemComponent</text><g class="D J"><path d="M2393.108 2634.437l-100.591 40.292m99.009-40.968l-96.733 42.343"/><path d="M2317.772 2654.116c-6.444 5.117-11.411 9.543-23.033 20.513m21.233-19.35c-7.557 7.574-15.295 14.044-21.348 21.406"/><path d="M2325.915 2672.953c-8.112 1.065-14.824 1.455-31.176 1.677m29.376-.513c-10.45.821-21.089.581-29.49 2.569m231.426-44.479l95.74 36.366m-96.83-34.187l95.72 35.524m-31.383-.647c8.526-.437 16.318.353 29.909 1.77m-28.745-1.664l30.801.931"/><path d="M2596.402 2650.01c6.645 4.599 12.595 10.382 22.805 21.023m-21.641-20.916c7.023 5.909 12.93 11.856 23.697 20.183"/></g><g class="L D"><path d="M2442.623 2448.663c13.435-1.022 31.237.36 44.863 1.687s26.779 3.317 36.896 6.273 19.126 7.346 23.806 11.461 6.454 8.938 4.271 13.227-9.136 8.875-17.37 12.511-19.554 7.318-32.034 9.304-28.384 2.462-42.846 2.612-30.798.11-43.926-1.715-26.264-5.828-34.84-9.234-13.96-6.862-16.618-11.198-3.222-10.442.669-14.816 12.608-8.431 22.677-11.426 27.771-5.143 37.738-6.545a195.07 195.07 0 0 1 22.066-1.868c4.523-.129 4.927.538 5.069 1.096m47.315 3.424c12.624 1.624 23.973 5.504 32.791 8.517s17.244 5.481 20.119 9.561 1.706 10.814-2.868 14.919-14.499 6.839-24.575 9.712-22.224 5.883-35.883 7.522-31.473 2.723-46.068 2.31-29.923-2.535-41.498-4.787-21.211-5.131-27.948-8.726-11.918-8.354-12.472-12.843 2.749-10.214 9.146-14.092 17.996-6.554 29.24-9.18 24.108-5.581 38.221-6.575 36.3.468 46.456.614l14.479.261c2.332.215.191.192-.486 1.029m198.296-111.591c84.283 1.143 167.844 2.134 235.398-.215m-234.75.578c55.06.981 111.964 1.452 235.438.069m-.594 1.674c3.246 85.983.817 175.371-.932 279.325m.413-280.446l.669 280.129m1.308-1.296c-93.177 3.843-188.57 1.93-235.595.417m234.231 1.136c-51.602-2.169-103.864-2.131-234.955.36m.955-.345l-1.704-279.554m1.121 279.702l.012-280.35"/><path d="M2553.362 2476.41l144.453-.508m-142.507-.735l141.542 1.808"/></g><g class="J D"><path d="M2454.47 2511.755l-.508 50.706m2.511-51.769c.325 8.222.147 41.427-.264 50"/><path d="M2448.148 2535.535c3.228 7.767 3.187 12.946 7.621 24.344m-7.735-22.288c2.976 7.626 4.796 14.465 9.025 22.756"/><path d="M2465.244 2535.929c-1.353 7.608-5.977 12.681-9.476 23.951m9.362-21.895c-2.374 7.377-5.906 14.093-8.071 22.363"/></g><g class="N D"><path d="M2482.223 2574.081c13.548.823 28.424 3.984 39.071 6.778s19.741 5.944 24.81 9.988 7.1 9.828 5.601 14.28-6.641 8.963-14.596 12.433-20.675 6.455-33.137 8.39-27.236 2.855-41.636 3.219-31.516.736-44.765-1.036-25.388-6.126-34.729-9.597-17.843-7.276-21.316-11.231-3.133-8.426.479-12.502 11.691-8.599 21.192-11.951 22.392-6.52 35.816-8.16 33.404-1.826 44.724-1.679 18.832 2.093 23.198 2.557 3.547-.226 2.997.226m-74.28 1.105c11.816-2.375 31.101-4.575 45.558-4.464s28.805 3.111 41.185 5.132 24.828 3.8 33.094 6.991 14.589 7.673 16.504 12.15-.289 10.594-5.014 14.713-12.992 7.237-23.333 10.003-24.644 5.124-38.711 6.594-31.451 3.088-45.691 2.222-28.195-4.859-39.748-7.422-22.995-4.199-29.571-7.955-9.756-10.099-9.883-14.58 2.662-8.577 9.121-12.307 21.509-7.954 29.634-10.074 15.971-2.299 19.12-2.649-.844-.089-.225.548"/><path d="M2477.299 2505.374l-1.151 67.327m-.334-65.048l2.652 66.447"/><path d="M2466.384 2544.946c3.273 6.754 6.467 13.126 10.603 28.818m-9.835-27.407c5.2 9.405 8.313 20.673 12.259 26.928"/><path d="M2486.897 2544.392c-1.365 6.871-2.813 13.368-9.911 29.373m10.679-27.961c-2.144 9.754-6.377 21.221-8.255 27.482m70.643 44.978l108.819 42.85m-106.954-40.629l105.867 41.91"/><path d="M2626.545 2661.186c11.119 1.134 21.86-.332 30.905 2.371m-29.493-1.081c9.67-.484 21.116.705 29.015-.723"/><path d="M2634.055 2642.088c8.436 7.897 16.503 13.234 23.395 21.468m-21.984-20.178a853.84 853.84 0 0 1 21.505 18.375m-457.056-379.462l72.989-.488m-71.182-.696l69.978 2.315"/></g><text y="2287.764" x="2286.21" class="B C E Q">React Props</text><g class="D"><g class="N"><path d="M2440.904 2630.989l-110.874 48.956m112.818-49.92l-114.004 50.991"/><path d="M2350.71 2659.448c-6.916 5.275-9.406 11.336-20.395 20.977m20.151-19.292c-5.726 4.762-14.142 11.821-22.214 20.101m30.782-3.029c-8.852.787-13.318 2.393-28.719 2.22m28.475-.535c-8.517-1.197-19.565-.068-30.538 1.344"/></g><path d="M2202.821 2318.779l71.684-.657m-73.061-.626c12.415.126 62.932 2.191 75.307 2.058" class="L"/></g><text y="2324.024" x="2288.21" class="B C E F">GraphQL Operation</text><g transform="matrix(1 0 0 1 2265.964005 2124.36113)" class="B E G I K"><text x="304" y="32">Pure Component Tree</text><text x="304" y="77">with separated data requirements</text><text x="304" y="122">and “over-fetching” data</text></g><path d="M2201.289 2357.448c12.275.144 61.303-.488 73.398-.724m-74.963.044l74.261-1.704" class="D T"/><text y="2361.767" x="2287.036" class="B C E R">Component Removed from Design</text><g transform="matrix(1 0 0 1 2342.394297 2911.552354)" class="B C E G"><text y="18" x="0">The data requirement lies far from the point</text><text y="43" x="0">of change, meaning a design change can lead</text><text y="68" x="0">to having orphaned data requirements that</text><text y="93" x="0">fetch more data than needed.</text></g><path d="M2610.059 2791.459c13.139-1.501 30.746.453 45.101 1.493s29.311 1.787 41.026 4.744 22.836 8.438 29.265 13.001 9.713 9.643 9.311 14.378-4.788 9.98-11.722 14.033-18.027 7.803-29.881 10.285-26.922 3.922-41.242 4.608-30.502.539-44.677-.496-29.313-2.562-40.375-5.716-20.591-8.864-25.995-13.209-7.487-8.302-6.433-12.865 5.271-10.423 12.76-14.511 20.15-7.494 32.178-10.016 32.146-4.39 39.99-5.115 6.891.416 7.073.766m-8.211-1.769c13.477-1.558 29.22.048 43.145 1.305s29.392 3.108 40.403 6.238 20.268 7.956 25.666 12.545 8.221 10.408 6.722 14.989-7.96 8.539-15.714 12.498-18.595 8.266-30.81 11.259-28.212 5.859-42.479 6.697-29.587.353-43.124-1.667-27.613-7.095-38.099-10.451-19.939-5.392-24.817-9.685-6.323-11.197-4.452-16.075 7.242-9.566 15.677-13.192 24.004-6.103 34.933-8.563 25.139-5.428 30.642-6.199 1.832.831 2.376 1.57" class="D T"/><text x="2634.24" y="2829.022" class="B C E I R">IconComponent</text><path d="M2295.826 2793.734c13.89.69 28.9 2.139 40.261 5.233s21.981 8.696 27.905 13.331 8.59 9.753 7.634 14.482-5.948 9.921-13.371 13.89-18.987 7.586-31.163 9.924-27.484 3.592-41.894 4.102-30.551.164-44.565-1.041-28.839-2.906-39.523-6.19-19.691-9.105-24.577-13.514-6.346-8.392-4.739-12.938 6.418-10.342 14.38-14.337 20.496-7.234 33.392-9.631 30.123-4.292 43.982-4.755 31.576 1.669 39.175 1.977 6.957-.456 6.421-.125m8.18 1.201c12.843 1.616 26.29 4.891 35.052 8.661s15.025 9.117 17.522 13.963 1.914 10.71-2.542 15.112-14.035 7.919-24.195 11.3-23.191 6.852-36.767 8.986-30.386 3.941-44.69 3.816-28.892-1.676-41.133-4.565-24.192-8.817-32.316-12.77-14.494-6.454-16.429-10.949.027-11.381 4.818-16.024 13.194-8.834 23.926-11.838 26.406-4.534 40.467-6.182 30.879-3.813 43.898-3.708 28.75 3.465 34.215 4.339-.243.386-1.427.904" class="D T"/><text x="2271.24" y="2829.522" class="B C E I R">IconComponent</text><g class="D"><g class="T"><path d="M2269.85 2749.064c-.267 5.737-2.657 28.929-2.79 34.746m1.651-36.032l.442 37.195"/><path d="M2262.377 2766.847c1.149 7.013 2.919 8.516 8.045 19.521m-6.533-18.44c1.644 6.083 2.772 12.404 4.552 16.591"/><path d="M2274.352 2766.759c-1.868 7.096-3.116 8.621-3.931 19.609m5.442-18.528c-2.592 6.096-5.7 12.448-7.423 16.679m359.341-37.176l-.254 35.995m2.215-34c.306 5.313.642 26.806.123 32.306"/><path d="M2622.878 2764.489c4.443 4.904 3.423 11.58 8.341 18.07m-7.292-16.903c2.362 5.397 4.987 12 5.496 16.386"/><path d="M2634.501 2764.848c1.087 4.756-3.288 11.328-3.282 17.711m4.331-16.543c-2.281 5.365-4.299 11.824-6.127 16.027"/></g><path d="M2294.248 2684.764c13.682.561 29.429 2.996 40.577 5.695s20.638 6.591 26.31 10.498 8.892 8.753 7.723 12.941-7.307 8.397-14.738 12.189-17.78 8.215-29.846 10.56-27.993 3.345-42.548 3.513-31.32-1.04-44.782-2.504-26.455-3.212-35.988-6.278-17.216-8.08-21.207-12.117-5.376-8.038-2.738-12.102 9.436-8.778 18.566-12.282 23.01-7.026 36.216-8.741 31.599-1.488 43.02-1.548 20.737.821 25.506 1.188 3.634.654 3.109 1.014m-44.452-3.832c13.562-1.027 29.891.983 43.525 2.353s28.248 2.815 38.28 5.869 17.718 8.179 21.914 12.458 5.371 8.945 3.261 13.214-7.792 9.244-15.926 12.401-19.939 4.555-32.879 6.537-30.062 5.189-44.762 5.354-30.546-2.298-43.44-4.363-25.539-4.768-33.925-8.025-13.533-7.19-16.395-11.516-4.648-10.318-.774-14.443 13.847-7.33 24.018-10.306 27.846-6.398 37.007-7.549 14.64.7 17.962.644 1.375-1.307 1.966-.979m413.427 2.13c13.293 1.247 26.59 4.262 36.023 7.496s17.047 8 20.578 11.91 3.826 7.476.61 11.552-10.854 9.506-19.908 12.905-21.23 5.941-34.414 7.491-29.976 1.981-44.689 1.808-31.086-.933-43.59-2.844-23.537-4.949-31.433-8.621-14.322-8.996-15.942-13.411 1.142-9.296 6.223-13.076 13.854-6.813 24.261-9.605 24.202-5.97 38.179-7.148 33.488-.184 45.68.084 21.736.81 27.475 1.522 7.8 2.306 6.958 2.748m-75.76-4.49c13.051-1.425 31.768-.44 45.87.379s27.679 2.09 38.741 4.534 21.787 6.156 27.631 10.131 8.376 9.237 7.433 13.721-5.379 9.68-13.095 13.182-20.985 5.792-33.202 7.83-25.787 3.85-40.101 4.398-32.064.018-45.781-1.106-26.937-2.3-36.518-5.637-17.004-10.148-20.971-14.386-5.673-7.205-2.831-11.042 10.779-8.428 19.882-11.979 25.476-7.738 34.737-9.326 17.543-.334 20.831-.202-1.327.512-1.1.997" class="N"/><path d="M2202.68 2396.062c11.95.054 59.124-.77 71.122-1.012m-72.007.564l70.79-2.143" class="P"/></g><text y="2398.286" x="2287.131" class="B C E S">Orphaned Data Requirement</text><g class="D"><g class="P"><path d="M2789.735 2443.101c30.83-2.481 57.955-.448 82.565-2.457m-80.49.095c17.859.35 38.285 1.36 81.306-.249m.788-.037c-2.467 17.253-2.32 37.311-1.918 75.538m1.808-73.539c-.749 22.74.347 44.229-1.712 73.5m1.649-.893c-22.58-.51-47.734.756-82.58 1.515m81.075-.268c-19.444-1.15-39.994-.22-81.804-.063m.632-1.967l-1.139-71.585m1.884 73.211c-2.139-19.553-1.527-37.805-.025-75.315m-50.896 381.44c7.908-8.144 31.602 2.51 46.364-47.86s35.164-212.094 42.206-254.364m-89.582 300.955c7.789-8.015 31.766 4.808 46.542-45.204s34.913-212.545 42.113-254.871"/><path d="M2833.848 2550.431c-1.604-9.085-4.21-17.259-5.477-29.784m6.907 29.459c-4.004-11.279-5.443-24.034-6.376-29.951"/><path d="M2813.547 2547.436c4.111-8.389 7.207-15.722 14.825-26.789m-13.395 26.465c4.1-10.121 10.773-21.68 13.926-26.956"/></g><path d="M3556.186 2819.642c14.999.732 31.511 3.675 44.025 6.39s23.79 5.999 31.057 9.9 11.917 8.944 12.546 13.505-2.783 9.796-8.774 13.862-15.535 7.445-27.17 10.533-27.603 6.736-42.636 7.994-32.099.095-47.566-.445-32.025-.565-45.24-2.796-25.806-6.643-34.045-10.587-13.273-8.659-15.386-13.074-1.776-9.049 2.705-13.418 13.535-9.257 24.181-12.792 25.197-6.766 39.694-8.419 34.167-1.423 47.289-1.498 24.618.356 31.447 1.05 10.337 2.457 9.523 3.114m-51.714-5.1c14.7-1.071 32.019-.304 46.474 1.455s29.317 5.785 40.254 9.102 20.498 6.401 25.367 10.801a14.29 14.29 0 0 1 3.847 15.599c-1.817 4.732-6.953 8.827-14.748 12.796s-18.941 8.816-32.02 11.018-30.705 1.754-46.452 2.195-32.917 1.386-48.03.446-30.837-3.331-42.646-6.087-21.934-6.362-28.209-10.449-9.801-9.239-9.445-14.075 4.63-10.675 11.581-14.942 18.022-8.14 30.126-10.66 31.805-3.281 42.496-4.464l21.648-2.634c3.437-.211-.726.729-1.025 1.369" class="J"/><path d="M3548.065 2822.795c14.804.223 30.704 2.356 43.602 4.385s25.821 4.465 33.787 7.788 12.832 8.013 14.01 12.149-1.569 8.966-6.944 12.668-14.237 6.953-25.308 9.546-26.44 4.635-41.115 6.008-31.71 2.661-46.938 2.233-31.261-2.75-44.428-4.799-26.21-4.27-34.57-7.495-13.902-7.938-15.592-11.853.653-7.617 5.453-11.638 12.876-9.417 23.35-12.489 25.139-4.724 39.496-5.943 36.563-1.307 46.646-1.374 10.62.717 13.849.977 5.847.345 5.525.581m-33.87-.808c14.505-.598 30.969-.349 45.166.702s29.351 2.787 40.015 5.605 19.374 7.06 23.971 11.299 5.633 9.859 3.613 14.136-7.486 8.272-15.731 11.525-20.304 6.134-33.735 7.992-31.381 3.027-46.849 3.154-31.5-1.285-45.956-2.389-29.988-1.465-40.781-4.234-18.837-8.246-23.975-12.375-8.07-8.56-6.852-12.396 6.091-7.154 14.161-10.618 21.209-8.147 34.261-10.165 35.297-1.329 44.051-1.946 7.392-1.682 8.474-1.761-2.11.719-1.986 1.29" class="L"/><path d="M3604.641 2516.124l932.852-.448m-932.851.439l934 .232m.855-1.244l-2.281 291.32m1.153-289.827c2.066 75.867 1.012 150.531.606 289.429m-.036.188l-933.693-.148m933.434-.135c-264.268-.341-528.998-.948-933.914.132m-.554-1.344c2.941-72.331 3.401-142.829.415-287.171m-.179 288.292l1.039-289.017" class="N"/></g><g transform="matrix(1 0 0 1 4057.157117 2815.54081)" class="B C F H"><text y="19" x="0">fragment SomeRibbonControl on SomeData {</text><text y="43" x="0"> # Various field selections</text><text y="67" x="0">}</text></g><g transform="matrix(1 0 0 1 4056.36441 2719.044204)" class="B C F H"><text y="19" x="0">fragment TileBarItem on TileBarNode {</text><text y="43" x="0"> # Various field selections</text><text y="67" x="0">}</text></g><g transform="matrix(1 0 0 1 4056.36441 2526.659588)" class="B C F H"><text y="19" x="0">fragment TileBar on TileBarConnection {</text><text y="43" x="0"> edges {</text><text y="67" x="0"> node {</text><text y="91" x="0"> ...TileBarItem</text><text y="115" x="0"> }</text><text y="139" x="0"> }</text><text y="163" x="0">}</text></g><g transform="matrix(1 0 0 1 4055.852172 2308.855183)" class="B C F H"><text y="19" x="0">query RibbonQuery {</text><text y="43" x="0"> launchTileBar {</text><text y="67" x="0"> ...TileBar</text><text y="91" x="0"> }</text><text y="115" x="0"> someRibbonData {</text><text y="139" x="0"> ...SomeRibbonControl</text><text y="163" x="0"> }</text><text y="187" x="0">}</text></g><path d="M3740.118 2375.975c13.806.905 28.818 3.797 39.998 6.802s21.346 7.189 27.083 11.228 8.169 8.333 7.344 13.007-5.244 10.654-12.296 15.032-18.019 8.602-30.018 11.241-27.472 4.004-41.975 4.59-30.984.314-45.047-1.07-28.731-3.86-39.33-7.231-19.158-8.606-24.261-12.997-7.863-8.567-6.355-13.351 7.441-11.421 15.403-15.349 19.79-5.962 32.366-8.221 28.079-4.79 43.092-5.333 37.623 1.285 46.984 2.074 9.941 2.237 9.179 2.665m-31.523-3.256c14.147.297 28.963 2.834 41.221 5.183s24.992 5.014 32.329 8.915 11.253 9.601 11.695 14.496-3.191 10.656-9.041 14.871-14.846 7.689-26.063 10.42-26.88 4.693-41.242 5.966-30.689 2.588-44.933 1.667-28.828-4.414-40.531-7.193-23.219-5.487-29.689-9.478-9.59-9.877-9.132-14.468 5.345-8.568 11.879-13.074 15.889-10.878 27.326-13.964 28.853-3.85 41.299-4.553 27.817.062 33.379.338.18.759-.007 1.314" class="D J"/><text x="3717.352" y="2411.605" class="B C E G I">RibbonContainer</text><path d="M3686.584 2605.235c13.072-1.748 31.161-1.724 45.607-1.169s29.271 1.722 41.065 4.498 22.811 7.701 29.698 12.16 11.227 9.915 11.626 14.595-3.039 9.313-9.233 13.482-16.383 8.528-27.931 11.533-26.96 5.574-41.354 6.495-30.58.109-45.01-.966-30.132-2.36-41.567-5.485-21.103-8.996-27.043-13.265-9.168-7.818-8.597-12.346 4.807-10.526 12.024-14.82 19.279-8.265 31.276-10.941 31.906-4.181 40.706-5.119 11.675-.84 12.095-.513m22.811 1.441c14.199.036 31.437 1.425 43.391 4.048s21.986 7.291 28.335 11.691 9.627 10.099 9.759 14.704-2.576 8.999-8.962 12.925-17.678 7.602-29.353 10.629-26.444 6.498-40.696 7.531-30.412-.306-44.818-1.333-30.307-2.025-41.619-4.825-20.725-7.771-26.254-11.977-7.552-8.251-6.92-13.258 3.879-12.415 10.71-16.784 18.297-7.056 30.279-9.43 28.979-4.165 41.611-4.817 28.53.738 34.18.908-.045-.077-.283.113" class="D J"/><text x="3714.352" y="2640.605" class="B C E G I">BarComponent</text><path d="M3935.143 2716.349c13.337 1.102 26.198 3.908 35.559 7.505s17.038 9.229 20.61 14.081 3.94 10.47.821 15.035-10.344 8.782-19.535 12.35-22.205 7.02-35.615 9.063-30.104 3.398-44.842 3.194-30.401-2.287-43.586-4.421-26.666-4.485-35.523-8.385-15.062-10.413-17.62-15.013-1.792-8.237 2.27-12.583 12.003-9.86 22.103-13.498 24.82-6.651 38.497-8.332 29.943-1.912 43.565-1.757 31.084 2.076 38.167 2.688 4.992.413 4.329.981m-5.62-1.783c13.491 1.269 25.92 5.694 34.799 9.577s15.36 9.222 18.475 13.721 3.779 9.022.215 13.274-12.006 8.52-21.599 12.238-22.62 8.123-35.958 10.07-29.221 1.691-44.068 1.615-31.994-.064-45.011-2.075-24.944-6.25-33.092-9.988-13.435-7.482-15.8-12.439-2.462-12.555 1.612-17.303 12.802-8.078 22.831-11.181 23.576-6.012 37.343-7.439 32.26-1.343 45.257-1.128 27.353 2.165 32.726 2.416.125-1.173-.483-.911" class="D J"/><text x="3894.352" y="2750.605" class="B C E G I">BarItemComponent</text><text x="3531.352" y="2856.105" class="B C E G I">SomeRibbonControl</text><g class="D J"><path d="M3786.294 2666.819l94.666 36.025m-95.954-36.917l95.513 35.085"/><path d="M3851.009 2702.484c6.921-1.453 13.631-1.14 29.692-.511m-29.458-1.593c8.496.172 20.575.228 29.375 1.264"/><path d="M3858.117 2683.233c5.326 2.731 10.498 7.208 22.584 18.74m-22.351-20.844c6.02 6.654 15.687 13.243 22.267 20.515"/></g><g class="L D"><path d="M3720.952 2378.625c13.701-.305 30.541.759 42.885 2.94s23.436 6.658 31.175 10.146 13.648 6.478 15.262 10.783-.515 10.847-5.579 15.046-14.41 7.398-24.806 10.15-23.705 5.151-37.571 6.359-31.36 1.793-45.624.892-28.786-3.449-39.963-6.297-21.104-6.994-27.095-10.79-9.412-7.768-8.853-11.991 5.227-9.71 12.205-13.348 18.017-6.207 29.665-8.482 27.9-4.286 40.221-5.17 25.597-.546 33.706-.138 15.36 2.121 14.944 2.584m-80.105-.914c11.226-2.168 27.276-1.693 41.544-1.538s30.779.497 44.064 2.466 26.97 6.247 35.646 9.346 14.05 5.281 16.41 9.249 1.864 10.12-2.254 14.555-12.587 8.712-22.45 12.053-23.273 6.493-36.729 7.994-29.793 1.855-44.006 1.011-29.407-3.476-41.273-6.079-22.83-6.116-29.924-9.542-12.225-6.722-12.643-11.016 4.101-10.667 10.131-14.749 19.494-7.621 26.046-9.739 10.8-2.465 13.268-2.968.376-.509 1.536-.049m380.157-79.045l482.416-1.112m-482.758 1.023l482.772-.24m-1.175.514l3.108 208.768m-1.419-208.952l-.289 210.257m.053-.194c-108.652 1.601-218.95-.023-483.223-.291m483.54-.201c-104.798-1.207-209.874-1.13-483.314.061m.095.209c-2.907-77.624-2.163-155.799 1.302-210.111m-2.046 209.784l1.234-210.629"/><path d="M3811.537 2406.776l239.178-.888m-240.278-.002l239.387-1.817m-588.395-95.627l71.215-.464m-72.276-.578c12.558-.472 62.619-1.427 74.593-1.308"/></g><text y="2312.764" x="3546.216" class="B C E F">GraphQL Operation/Fragments</text><g class="D L"><path d="M3702.96 2607.384c13.585-.782 31.651.523 45.305 2.04s26.616 4.207 36.623 7.065 19.215 6.172 23.416 10.082 4.608 9.093 1.791 13.374-9.92 9.022-18.689 12.313-20.902 5.797-33.924 7.429-29.674 2.354-44.207 2.368-30.276-.363-42.991-2.286-24.797-5.904-33.298-9.253-15.438-6.836-17.707-10.841-.602-9.253 4.09-13.19 13.922-7.238 24.066-10.434 26.054-7.197 36.797-8.743 21.687-.606 27.658-.535 8.149.361 8.167.965m-33.128.003c12.569-1.558 30.194-2.083 44.741-1.102s31.024 4.339 42.542 6.988 20.398 5.525 26.566 8.906 10.544 7.274 10.443 11.381-4.234 9.111-11.049 13.261-18.113 8.892-29.84 11.639-26.402 4.318-40.521 4.846-30.158-.13-44.192-1.679-29.619-4.34-40.012-7.612-17.877-8.247-22.349-12.023-6.747-6.525-4.483-10.637 9.648-10.239 18.065-14.034 24.139-7.107 32.438-8.736 14.137-.747 17.358-1.036 1.327-1.345 1.963-.694m186.546 110.332c13.327-1.133 31.174-1.369 45.235-.127s28.581 4.601 39.132 7.575 19.063 6.507 24.174 10.267 7.753 8.091 6.492 12.294-6.252 9.362-14.06 12.927-20.14 6.353-32.786 8.463-28.695 3.785-43.086 4.198-29.885-.012-43.262-1.719-27.592-5.251-36.996-8.521-16.058-7.206-19.431-11.097-4.047-8.062-.802-12.245 11.275-9.384 20.27-12.854 23.2-6.209 33.704-7.966 22.964-2.248 29.322-2.58 8.511.082 8.827.591m21.841-.023c13.762.733 28.486 4.644 40.037 7.273s23.129 4.841 29.269 8.505 8.522 9.158 7.572 13.478-6.156 8.857-13.273 12.443-17.866 6.652-29.43 9.078-25.859 4.727-39.953 5.474-30.771.655-44.611-.99-28.055-5.738-38.425-8.882-19.131-6.061-23.795-9.982-6.747-9.54-4.191-13.546 10.937-7.163 19.525-10.495 19.446-7.26 31.998-9.498 32.41-3.612 43.317-3.929 18.707 1.648 22.122 2.026-1.502-.321-1.633.238m139.378-196.962l482.147 1.515m-482.439-.691l481.868-.141m.913.043l-2.85 179.759m1.227-179.02c-1.44 52.966-1.189 105.283.495 179.547m-.266.412l-481.707.635m482.203-.997l-481.6.601m-1.799-.255c2.337-43.098 1.921-81.294 2.7-181.225m-1.002 181.293c-.944-39.424-1.242-77.353-1.14-180.428"/><path d="M3810.247 2635.183l240.984-.459m-239.298-.346l238.457-1.217m.352 81.649l481.669-.875m-482.048.077l481.29-.149m1.842 2.109c-2.327 26.449-2.505 58.447-3.189 85.222m2.081-87.469c-.335 20.644-.221 40.821.27 87.578m-1.504-.755c-121.29-.287-241.904.173-480.015.311m480.756-.697c-154.565-.038-308.53-.594-481.404.083m-1.606.269c3.287-18.044 1.217-40.16 2.16-85.331m-.972 84.715c.969-27.571.865-53.907-.335-86.577"/><path d="M3987.815 2743.183l64.452.838m-65.351-2.134c10.724-.298 54.412.672 64.877.605"/></g><g transform="matrix(1 0 0 1 3651.744752 2149.36113)" class="B E G I K"><text x="307" y="32">Fragmentized Component Tree</text><text x="307" y="77">with colocated data requirements</text><text x="307" y="122">inserted into other component tree</text></g><g class="D J"><path d="M3715.09 2443.265l-3.649 155.07m2.368-152.95l-3.244 151.417m-11.302-28.147c6.258 9.524 8.434 17.789 10.007 28.913m-9.015-29.771c3.688 11.624 6.835 20.665 9.777 28.699"/><path d="M3719.78 2569.037c.094 9.467-3.896 17.617-10.511 28.532m11.503-29.389c-3.726 11.54-7.994 20.443-10.74 28.318"/></g><g class="L D"><path d="M4050.811 2810.91l480.077.351m-479.08-.807l478.965-.11m1.335 2.149c-.468 25.762-2.396 56.618-.738 83.326m-.843-85.113l-.033 85.816m.049-.217l-479.654 1.566m479.813-1.165l-479.557.084m.343-.993c-.05-26.435-1.088-57.865-2.042-85.652m2.097 85.948c-1.901-25.885-.69-50.796.134-86.447"/><path d="M4050.375 2851.123l-410.011-.633m411.721 2.887c-68.748.038-344.162-1.409-412.876-1.948"/></g><g transform="matrix(1 0 0 1 3743.810963 2913.560041)" class="B C E G"><text y="18" x="0">Because the data requirements are entirely</text><text y="43" x="0">colocated with the components, it is trivial</text><text y="68" x="0">to re-compose the tree without needing to</text><text y="93" x="0">understand all of the tree’s data requirements</text><text y="118" x="0">again and/or executing waterfall operations.</text></g><g class="D J"><path d="M3619.076 2421.196c-9.71 16.307-43.758 30.655-58.18 96.163s-23.471 247.617-28.352 296.886m85.649-393.742c-9.456 16.586-40.727 33.01-55.153 98.306s-26.098 244.308-31.401 293.472m-6.633-30.784c1.449 12.837 6.015 22.825 5.722 28.867m-6.331-27.481c1.103 6.265 3.009 12.801 6.251 28.952"/><path d="M3545.449 2783.294c-6.68 12.308-10.259 21.58-14.721 27.069m14.112-25.683c-3.524 5.994-6.228 12.124-14.192 27.155"/></g><path d="M3461.041 2345.327l73.513-1.598m-74.796 1.028l74.436-3.036" class="D N"/><text y="2349.024" x="3546.25" class="B C E Q">React Component Composition</text><g class="D T"><path d="M1663.358 326.087c25.269 19.169 118.535-22.332 150.349 114.266s33.927 587.764 40.533 705.32m-192.238-820.374c25.256 18.867 119.058-23.464 151.067 113.421s34.216 589.936 40.988 707.887m-10.349-26.862c3.033 6.719 2.615 11.095 9.162 27.872m-9.908-28.769c3.25 5.928 6.05 13.458 11.041 27.493"/><path d="M1864.218 1119.082c-1.294 6.892-6.038 11.408-11.349 28.536m10.603-29.432c-1.851 6.021-4.155 13.716-9.469 28.156m540.311-830.348c-43.954 16.469-198.18-40.226-263.852 98.636s-108.483 612.021-130.178 734.537m396.049-834.04c-43.55 16.66-198.1-38.11-263.699 101.049s-107.808 611.479-129.896 733.902"/><path d="M1996.951 1119.048c1.154 7.97 1.493 15.623 5.427 32.759m-5.729-31.036c.987 5.586 1.816 12.033 5.12 29.792"/><path d="M2017.283 1121.822c-4.144 7.189-9.1 14.12-14.906 29.986m14.604-28.263c-3.184 5.116-6.524 10.994-15.213 27.018m2265.058-830.572c62.848 39.076 284.641 42.175 377.047 235.991s186.22 734.909 177.392 926.902-191.928 187.674-230.364 225.053m-325.308-1389.2c63.211 39.285 288.233 41.536 380.66 235.749s183.131 737.07 173.899 929.525-191.335 187.989-229.291 225.207"/><path d="M4611.793 1687.335c-4.33 6.954-14.102 14.07-20.367 20.553m20.98-20.445c-6.412 7.31-11.896 12.772-22.17 22.421"/><path d="M4620.129 1706.087c-7.28.749-19.823 1.631-28.704 1.801m29.316-1.694c-8.712 2.429-16.391 2.953-30.506 3.669"/></g><text y="42" x="1671.009" class="B E G K">Pure vs Fragmentized Component Trees and Propagated vs Connected Data Propagation</text><g class="D T"><path d="M4264.081 287.264c55.985 17.649 246.107 18.309 334.616 106.883s145.504 229.874 196.441 424.562 104.196 502.315 109.183 743.566-26.321 552.351-79.26 703.944-198.416 171.414-238.377 205.613M4262.807 289.484c56.416 17.731 248.839 17.142 337.981 105.595s146.296 230.435 196.868 425.123 102.208 501.952 106.563 743.005-27.195 552.021-80.431 703.312-199.286 170.518-238.988 204.432"/><path d="M4603.884 2446.921c-5.129 5.718-7.154 10.689-19.632 24.655m20.301-22.78c-4.232 6.913-9.907 13.315-19.59 21.234"/><path d="M4613.304 2465.152l-29.052 6.424m29.721-4.549c-7.026 1.732-15.39 2.928-29.01 3.002M3031.837 322.098c41.36 9.126 194.111 22.674 247.322 54.605s63.818 29.29 71.943 136.984-2.866 255.597-23.19 509.179-103.696 808.944-98.757 1012.313 107.048 173.432 128.39 207.902m-326.833-1922.14c41.324 8.833 194.835 22.294 248.125 54.126s63.336 29.227 71.613 136.868-1.521 255.045-21.95 508.976-105.17 811.022-100.627 1014.608 106.175 172.14 127.885 206.909"/><path d="M3325.92 2238.859c10.232-.211 18.913 2.084 31.74 4.163m-30.936-6.439c8.871.741 16.34 2.997 28.396 5.151m-18.733-20.526c7.214 4.845 12.929 12.14 21.273 21.815m-20.47-24.09c5.947 5.954 10.363 13.358 17.929 22.803"/></g><text y="3184.035" x="291.263" class="B E G K">By: Eloy Duran - @alloy</text><path d="M527.631 3166.777l8.766-2.914m-7.17 2.112l9.267-3.7" stroke-width="2" class="D J"/><text y="121.121" font-size="28" x="2437.615" class="B E G">v1.0.0</text><text x="4927.274" y="3227.035" font-size="16" fill="#adb5bd" text-anchor="end" class="B E">Made with Excalidraw</text></svg>
@alloy
Copy link
Author

alloy commented Mar 11, 2021 •
edited
Loading

Use the raw link to see a full-size version.

Here’s the original tweet, which is the best place to discuss (if you have a twitter account).

NOTE: GitHub does not render the embedded custom [hand-drawn] font. If you download the SVG and open locally you should get to see the original version.

@nodkz
Copy link

nodkz commented Apr 12, 2022

If somebody needs more context about fragment models - you may see brilliant Matt's talk https://www.youtube.com/watch?v=Vo8nqjiKI3A

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment