2f:T5f2,### Ideas Scribble 💭 * New visualization: Group components by shared data/props. * Force directed tree for props of components * When placed by another parent, DOM components do need to show owner link. * Display React "renderering" as gradual expansion of this tree * Animate the path moving down * Bouncy expand animation of component circle as it is called * Expand tree when a component is rendered * Show DOM tree next to this one * Transition from React element tree to DOM element only tree #### Tree improvements * Circles for components, squares for host elements (or vice versa) * Mark 'layout/container' components that accept `children` or JSX as props * Make nodes collapsible * Think of how to display passed props in here (along owner arcs?) * Multiple arcs with smaller radii? * Colored arcs per prop/source name? * Mark components that contain state * Circles outside for all persisted values: useCallback, useMemo, useRef * Context as a rectangle behind the components it wraps * Mark components that are memoized * Extra circle around them * Later `forwardRef` too * Show state update triggering rerender * Data moving along owner arc and circles moving out when component is rerendered * In owner tree, show data moving along the tree * Show ErrorBoundaries * Option to toggle area they cover by showing rectangle, similar to context * Show Suspense boundaries * Option to toggle area they cover by showing rectangle, similar to context 30:T7f8,nestedTreeNoTransitions = (origRoot, showOwnerLinks = false) => { const root = prepareRoot(origRoot); const nodes = root.descendants(); const links = root.links(); const height = (nodes.length + 1) * nodeSize; const svg = d3 .create("svg") // .attr("width", width / 2) .attr("height", height) .attr("viewBox", [-nodeSize / 2, (-nodeSize * 3) / 2, width / 2, height]) .attr( "style", "max-width: 100%; height: auto; font: 10px sans-serif; overflow: visible;" ); const g = svg .append("g") .attr("transform", `translate(${showOwnerLinks ? 220 : 0},0)`) .attr("name", "move-to-middle"); const linksGroup = g .append("g") .attr("fill", "none") .attr("stroke", "#333") .attr("name", "links"); const ownerGroup = g.append("g").attr("name", "owner-arcs"); const nodesGroup = g.append("g").attr("name", "nodes"); // initial draw draw(nodes, links); function draw(nodes, links) { const link = linksGroup .selectAll("path") .data(links, (l) => `${l.source.data.id}-${l.target.data.id}`) .join((enter) => enter.append("path").attr("d", linkPath)); const node = nodesGroup .selectAll("g") .data(nodes, (d) => d.data.id) .join((enter) => drawNode(enter)); if (showOwnerLinks && !showOnlyDOM) { const callees = nodes.filter((d) => { // only show owner links between components, not host elements or fragments return d.data.owner && d.data.name !== "[ ]"; // !d.data.isDOM && }); const ownerArcs = ownerGroup .selectAll("path") .data(callees) .join("path") .attr("stroke", "black") .attr("stroke-dasharray", 2) .attr("fill", "none") .attr("d", (d, i) => { // Arc from callerNode to current node (d) const { x1, y1, x2, y2, r } = d.data; return arc({ x1, y1, x2, y2, r }); // ideally wouldn't have arc but arc-y curve }); } } return Object.assign(svg.node(), { draw }); }31:T11e5,nestedTree = (origRoot, showOwnerLinks = false) => { const root = prepareRoot(origRoot); const nodes = root.descendants(); const links = root.links(); const height = (nodes.length + 1) * nodeSize; const svg = d3 .create("svg") .attr("width", width / 2) .attr("height", height) .attr("viewBox", [-nodeSize / 2, (-nodeSize * 3) / 2, width / 2, height]) .attr( "style", "max-width: 100%; height: auto; font: 10px sans-serif; overflow: visible;" ); const g = svg .append("g") .attr("transform", "translate(220,0)") .attr("name", "move-to-middle"); const linksGroup = g .append("g") .attr("fill", "none") .attr("stroke", "#333") .attr("name", "links"); const nodesGroup = g.append("g").attr("name", "nodes"); const ownerGroup = g.append("g").attr("name", "owner-arcs"); // initial draw draw(nodes, links); function draw(nodes, links) { const entry = g.transition().duration(700); const update = g.transition().duration(700); const exit = g.transition().duration(400); const link = linksGroup .selectAll("path") .data(links, (l) => `${l.source.data.id}-${l.target.data.id}`) .join( (enter) => enter .append("path") .attr("d", linkPath) .attr("stroke-dashoffset", strokeDashOffset) .attr("stroke-dasharray", strokeDashArray) .transition(entry) .attr("stroke-dashoffset", 0), (update) => { return update.transition(update).attr("d", linkPath); }, (exit) => exit .attr("stroke-dashoffset", 0) .transition(exit) .attr("opacity", 0) // animate pathlength to 0 .attr("stroke-dashoffset", strokeDashOffset) .attr("stroke-dasharray", strokeDashArray) .remove() ); const node = nodesGroup .selectAll("g") .data(nodes, (d) => d.data.id) .join( (enter) => drawNode(enter), (update) => { update .selectAll("circle") .data((d) => d) .transition(update) .attr("cx", (d) => d.depth * nodeSize); update .selectAll("text") .data((d) => d) .transition(update) .attr("x", (d) => d.depth * nodeSize + 6); update.selectAll("circle").attr("cx", (d) => d.depth * nodeSize); return update .transition(update) .attr("transform", (d) => `translate(0,${d.index * nodeSize})`); }, (exit) => exit.transition().attr("opacity", 0).remove() ); if (showOwnerLinks && !showOnlyDOM) { const callees = nodes.filter((d) => { // only show owner links between components, not host elements or fragments return !d.data.isDOM && d.data.owner && d.data.name !== "[ ]"; }); const ownerArcs = ownerGroup .selectAll("g") .data(callees) .join("g") .attr("text-align", "middle"); ownerArcs .append("path") .attr("stroke", "black") .attr("stroke-dasharray", 2) .attr("fill", "none") .attr("d", (d, i) => { // Arc from callerNode to current node (d) const { x1, y1, x2, y2, r } = d.data; return arc({ x1, y1, x2, y2, r }); // ideally wouldn't have arc but arc-y curve, flatter curve with larger height }); // TODO show only on hover or click // callerArcs // .append("text") // .attr("transform", (d) => { // const { x1, x2, y1, y2, r, id, owner } = d.data; // // mutable debug = { x1, x2, y1, y2, id, owner }; // // NOT GOOD, WE NEED FIND POSITION ALONG ARC, EG 0.5 OF ARC // return `translate(${x1 - r}, ${y1 + r})`; // }) // .attr("stroke", "white") // .attr("paint-order", "stroke") // .text((d) => `${d.data.owner} calls ${d.data.id || d.data.name}`); } // function reset() { // link.attr("stroke", "black"); // nodeCircles.attr("fill", nodeCircleFill); // } // function onClick(e, d) { // reset(); // const highlight = new Set(d.ancestors()); // nodeCircles // .filter((circle) => highlight.has(circle)) // .attr("fill", "hotpink"); // link // .filter((link) => highlight.has(link.target)) // .attr("stroke", "hotpink") // .raise(); // } } return Object.assign(svg.node(), { draw }); }32:T565,getDomNodesRoot = (root, verbose = false) => { const domElDirty = root.copy().eachBefore((el) => { // isDOM? if (!isLowercase(el.data.name) || el.data.name === "[ ]") { verbose && console.log(el.data.name, "should not be here"); if (el.children) { verbose && console.log( "\thas children", el.children.map((d) => d.data.name) ); if (el.parent) { // assign its children to the parent node el.parent.children = el.parent.children .filter((f) => f.data.name !== el.data.name) .concat(el.children); el.parent.children.forEach((child) => { child.parent = el.parent; }); verbose && console.log( "\t\t parent", el.parent.data.name, "updated children", el.parent.children.map((d) => d.data.name) ); } } } }); const newRoot = domElDirty.children[0]; // what if this is another component tho? newRoot.parent = null; const domElements = newRoot.descendants().map(({ parent, id, data }) => ({ ...data, parentId: parent?.data.id })); domElements[0].parentId = undefined; const domElsOnlyRoot = d3 .stratify()(domElements) .sort((a, b) => a.data.id - b.data.id); return domElsOnlyRoot; }33:T2a66,// Thinking in React https://v5qb74.csb.app/ elements = ({ id: "3", name: "App", children: [ { id: "4", name: "FilterableProductTable", owner: "3", children: [ { id: "5", name: "div", owner: "4", children: [ { id: "6", name: "SearchBar", owner: "4", children: [ { id: "7", name: "form", owner: "6", children: [ { id: "8", name: "input", owner: "6", children: [] }, { id: "9", name: "label", owner: "6", children: [ { id: "10", name: "input", owner: "6", children: [] } ] } ] } ] }, { id: "13", name: "ProductTable", owner: "4", children: [ { id: "14", name: "table", owner: "13", children: [ { id: "15", name: "thead", owner: "13", children: [ { id: "16", name: "tr", owner: "13", children: [ { id: "17", name: "th", owner: "13", children: [] }, { id: "18", name: "th", owner: "13", children: [] } ] } ] }, { id: "19", name: "tbody", owner: "13", children: [ { id: "20", name: "ProductCategoryRow", owner: "13", children: [ { id: "21", name: "tr", owner: "20", children: [ { id: "22", name: "th", owner: "20", children: [] } ] } ] }, { id: "23", name: "ProductRow", owner: "13", children: [ { id: "24", name: "tr", owner: "23", children: [ { id: "25", name: "td", owner: "23", children: [] }, { id: "26", name: "td", owner: "23", children: [] } ] } ] }, { id: "27", name: "ProductRow", owner: "13", children: [ { id: "28", name: "tr", owner: "27", children: [ { id: "29", name: "td", owner: "27", children: [] }, { id: "30", name: "td", owner: "27", children: [] } ] } ] }, { id: "31", name: "ProductRow", owner: "13", children: [ { id: "32", name: "tr", owner: "31", children: [ { id: "33", name: "td", owner: "31", children: [ { id: "34", name: "span", owner: "31", children: [] } ] }, { id: "35", name: "td", owner: "31", children: [] } ] } ] }, { id: "36", name: "ProductCategoryRow", owner: "13", children: [ { id: "37", name: "tr", owner: "36", children: [ { id: "38", name: "th", owner: "36", children: [] } ] } ] }, { id: "39", name: "ProductRow", owner: "13", children: [ { id: "40", name: "tr", owner: "39", children: [ { id: "41", name: "td", owner: "39", children: [] }, { id: "42", name: "td", owner: "39", children: [] } ] } ] }, { id: "43", name: "ProductRow", owner: "13", children: [ { id: "44", name: "tr", owner: "43", children: [ { id: "45", name: "td", owner: "43", children: [ { id: "46", name: "span", owner: "43", children: [] } ] }, { id: "47", name: "td", owner: "43", children: [] } ] } ] }, { id: "48", name: "ProductRow", owner: "13", children: [ { id: "49", name: "tr", owner: "48", children: [ { id: "50", name: "td", owner: "48", children: [] }, { id: "51", name: "td", owner: "48", children: [] } ] } ] } ] } ] } ] } ] } ] } ] })34:T6e2,postTest = ({ id: "1", name: "Post", children: [ { id: "2", name: "Article", owner: "1", children: [ { id: "3", name: "article", owner: "2", children: [ { id: "4", name: "h1", owner: "2", children: [] }, { id: "5", name: "Section", owner: "1", children: [ { id: "6", name: "section", owner: "5", children: [ { id: "7", name: "h2", owner: "5", children: [] }, { id: "7", name: "p", owner: "1", children: [] }, { id: "8", name: "Callout", owner: "5", children: [ { id: "9", name: "aside", owner: "8", children: [ { id: "10", name: "strong", owner: "8", children: [] } ] } ] } ] } ] } ] } ] } ] })35:T10a5,wellComposed = ({ id: "3", name: "App", children: [ { id: "4", name: "div", owner: "3", children: [ { id: "5", name: "Header", owner: "3", children: [ { id: "6", name: "header", owner: "5", children: [ { id: "7", name: "h2", owner: "5", children: [] } ] } ] }, { id: "8", name: "div", owner: "3", children: [ { id: "9", name: "Dashboard", owner: "3", children: [ { id: "10", name: "main", owner: "9", children: [ { id: "11", name: "h2", owner: "9", children: [] }, { id: "12", name: "[ ]", owner: "3", children: [ { id: "13", name: "DashboardNav", owner: "3", children: [ { id: "14", name: "nav", owner: "13", children: [ { id: "15", name: "h3", owner: "13", children: [] } ] } ] }, { id: "16", name: "DashboardContent", owner: "3", children: [ { id: "17", name: "div", owner: "16", children: [ { id: "18", name: "h3", owner: "16", children: [] }, { id: "19", name: "WelcomeMessage", owner: "3", children: [ { id: "20", name: "div", owner: "19", children: [ { id: "21", name: "p", owner: "19", children: [] } ] } ] } ] } ] } ] } ] } ] } ] }, { id: "24", name: "Footer", owner: "3", children: [ { id: "25", name: "footer", owner: "24", children: [ { id: "26", name: "h2", owner: "24", children: [] } ] } ] } ] } ] })36:Teea,illComposed = ({ id: "3", name: "App", children: [ { id: "4", name: "div", owner: "3", children: [ { id: "5", name: "Header", owner: "3", children: [ { id: "6", name: "header", owner: "5", children: [ { id: "7", name: "h2", owner: "5", children: [] } ] } ] }, { id: "8", name: "div", owner: "3", children: [ { id: "9", name: "Dashboard", owner: "3", children: [ { id: "10", name: "main", owner: "9", children: [ { id: "11", name: "h2", owner: "9", children: [] }, { id: "12", name: "DashboardNav", owner: "9", children: [ { id: "13", name: "nav", owner: "12", children: [ { id: "14", name: "h3", owner: "12", children: [] } ] } ] }, { id: "15", name: "DashboardContent", owner: "9", children: [ { id: "16", name: "div", owner: "15", children: [ { id: "17", name: "h3", owner: "15", children: [] }, { id: "18", name: "WelcomeMessage", owner: "15", children: [ { id: "19", name: "div", owner: "18", children: [ { id: "20", name: "p", owner: "18", children: [] } ] } ] } ] } ] } ] } ] } ] }, { id: "23", name: "Footer", owner: "3", children: [ { id: "24", name: "footer", owner: "23", children: [ { id: "25", name: "h2", owner: "23", children: [] } ] } ] } ] } ] })37:T5aa6,stateContainerBad = ({ id: "3", name: "App", children: [ { id: "4", name: "div", owner: "3", children: [ { id: "5", name: "h1", owner: "3", children: [] }, { id: "6", name: "Chart", owner: "3", children: [ { id: "7", name: "div", owner: "6", children: [ { id: "8", name: "Select", owner: "6", children: [ { id: "9", name: "label", owner: "8", children: [] }, { id: "10", name: "select", owner: "8", children: [ { id: "11", name: "option", owner: "8", children: [] }, { id: "12", name: "option", owner: "8", children: [] } ] } ] }, { id: "13", name: "svg", owner: "6", children: [ { id: "14", name: "Axes", owner: "6", children: [ { id: "15", name: "g", owner: "14", children: [ { id: "16", name: "Axis", owner: "14", children: [ { id: "17", name: "g", owner: "16", children: [ { id: "18", owner: "14", name: "[ ]", children: [ { id: "19", name: "g", owner: "16", children: [ { id: "20", name: "line", owner: "16", children: [] }, { id: "21", name: "text", owner: "16", children: [] } ] }, { id: "22", name: "g", owner: "16", children: [ { id: "23", name: "line", owner: "16", children: [] }, { id: "24", name: "text", owner: "16", children: [] } ] }, { id: "25", name: "g", owner: "16", children: [ { id: "26", name: "line", owner: "16", children: [] }, { id: "27", name: "text", owner: "16", children: [] } ] }, { id: "28", name: "g", owner: "16", children: [ { id: "29", name: "line", owner: "16", children: [] }, { id: "30", name: "text", owner: "16", children: [] } ] }, { id: "31", name: "g", owner: "16", children: [ { id: "32", name: "line", owner: "16", children: [] }, { id: "33", name: "text", owner: "16", children: [] } ] }, { id: "34", name: "g", owner: "16", children: [ { id: "35", name: "line", owner: "16", children: [] }, { id: "36", name: "text", owner: "16", children: [] } ] }, { id: "37", name: "g", owner: "16", children: [ { id: "38", name: "line", owner: "16", children: [] }, { id: "39", name: "text", owner: "16", children: [] } ] }, { id: "40", name: "g", owner: "16", children: [ { id: "41", name: "line", owner: "16", children: [] }, { id: "42", name: "text", owner: "16", children: [] } ] } ] }, { id: "43", name: "path", owner: "16", children: [] } ] } ] } ] }, { id: "44", name: "g", owner: "14", children: [ { id: "45", name: "Axis", owner: "14", children: [ { id: "46", name: "g", owner: "45", children: [ { id: "47", owner: "14", name: "[ ]", children: [ { id: "48", name: "g", owner: "45", children: [ { id: "49", name: "line", owner: "45", children: [] }, { id: "50", name: "text", owner: "45", children: [] } ] }, { id: "51", name: "g", owner: "45", children: [ { id: "52", name: "line", owner: "45", children: [] }, { id: "53", name: "text", owner: "45", children: [] } ] }, { id: "54", name: "g", owner: "45", children: [ { id: "55", name: "line", owner: "45", children: [] }, { id: "56", name: "text", owner: "45", children: [] } ] }, { id: "57", name: "g", owner: "45", children: [ { id: "58", name: "line", owner: "45", children: [] }, { id: "59", name: "text", owner: "45", children: [] } ] }, { id: "60", name: "g", owner: "45", children: [ { id: "61", name: "line", owner: "45", children: [] }, { id: "62", name: "text", owner: "45", children: [] } ] }, { id: "63", name: "g", owner: "45", children: [ { id: "64", name: "line", owner: "45", children: [] }, { id: "65", name: "text", owner: "45", children: [] } ] }, { id: "66", name: "g", owner: "45", children: [ { id: "67", name: "line", owner: "45", children: [] }, { id: "68", name: "text", owner: "45", children: [] } ] }, { id: "69", name: "g", owner: "45", children: [ { id: "70", name: "line", owner: "45", children: [] }, { id: "71", name: "text", owner: "45", children: [] } ] }, { id: "72", name: "g", owner: "45", children: [ { id: "73", name: "line", owner: "45", children: [] }, { id: "74", name: "text", owner: "45", children: [] } ] } ] }, { id: "75", name: "path", owner: "45", children: [] } ] } ] } ] } ] }, { id: "76", name: "path", owner: "6", children: [] }, { id: "77", name: "PointerCircle", owner: "6", children: [ { id: "78", name: "circle", owner: "77", children: [] } ] }, { id: "79", name: "Hover", owner: "6", children: [ { id: "80", name: "circle", owner: "79", children: [] }, { id: "81", name: "line", owner: "79", children: [] } ] }, { id: "82", name: "Tooltip", owner: "6", children: [ { id: "83", name: "text", owner: "82", children: [] } ] } ] } ] } ] } ] } ] })38:T69bf,stateContainerGood = ({ id: "3", name: "App", children: [ { id: "4", name: "div", owner: "3", children: [ { id: "5", name: "h1", owner: "3", children: [] }, { id: "6", name: "Chart", owner: "3", children: [ { id: "7", name: "div", owner: "6", children: [ { id: "8", name: "Select", owner: "6", children: [ { id: "9", name: "label", owner: "8", children: [] }, { id: "10", name: "select", owner: "8", children: [ { id: "11", name: "option", owner: "8", children: [] }, { id: "12", name: "option", owner: "8", children: [] } ] } ] }, { id: "13", name: "ChartSVG", owner: "6", children: [ { id: "14", name: "svg", owner: "13", children: [ { id: "15", owner: "6", name: "[]", children: [ { id: "16", name: "path", owner: "6", children: [] }, { id: "17", name: "Axes", owner: "6", children: [ { id: "18", name: "g", owner: "17", children: [ { id: "19", name: "Axis", owner: "17", children: [ { id: "20", name: "g", owner: "19", children: [ { id: "21", name: "Fragment", owner: "19", children: [ { id: "22", name: "g", owner: "19", children: [ { id: "23", name: "line", owner: "19", children: [] }, { id: "24", name: "text", owner: "19", children: [] } ] }, { id: "25", name: "g", owner: "19", children: [ { id: "26", name: "line", owner: "19", children: [] }, { id: "27", name: "text", owner: "19", children: [] } ] }, { id: "28", name: "g", owner: "19", children: [ { id: "29", name: "line", owner: "19", children: [] }, { id: "30", name: "text", owner: "19", children: [] } ] }, { id: "31", name: "g", owner: "19", children: [ { id: "32", name: "line", owner: "19", children: [] }, { id: "33", name: "text", owner: "19", children: [] } ] }, { id: "34", name: "g", owner: "19", children: [ { id: "35", name: "line", owner: "19", children: [] }, { id: "36", name: "text", owner: "19", children: [] } ] }, { id: "37", name: "g", owner: "19", children: [ { id: "38", name: "line", owner: "19", children: [] }, { id: "39", name: "text", owner: "19", children: [] } ] }, { id: "40", name: "g", owner: "19", children: [ { id: "41", name: "line", owner: "19", children: [] }, { id: "42", name: "text", owner: "19", children: [] } ] }, { id: "43", name: "g", owner: "19", children: [ { id: "44", name: "line", owner: "19", children: [] }, { id: "45", name: "text", owner: "19", children: [] } ] } ] }, { id: "46", name: "path", owner: "19", children: [] } ] } ] } ] }, { id: "47", name: "g", owner: "17", children: [ { id: "48", name: "Axis", owner: "17", children: [ { id: "49", name: "g", owner: "48", children: [ { id: "50", name: "Fragment", owner: "48", children: [ { id: "51", name: "g", owner: "48", children: [ { id: "52", name: "line", owner: "48", children: [] }, { id: "53", name: "text", owner: "48", children: [] } ] }, { id: "54", name: "g", owner: "48", children: [ { id: "55", name: "line", owner: "48", children: [] }, { id: "56", name: "text", owner: "48", children: [] } ] }, { id: "57", name: "g", owner: "48", children: [ { id: "58", name: "line", owner: "48", children: [] }, { id: "59", name: "text", owner: "48", children: [] } ] }, { id: "60", name: "g", owner: "48", children: [ { id: "61", name: "line", owner: "48", children: [] }, { id: "62", name: "text", owner: "48", children: [] } ] }, { id: "63", name: "g", owner: "48", children: [ { id: "64", name: "line", owner: "48", children: [] }, { id: "65", name: "text", owner: "48", children: [] } ] }, { id: "66", name: "g", owner: "48", children: [ { id: "67", name: "line", owner: "48", children: [] }, { id: "68", name: "text", owner: "48", children: [] } ] }, { id: "69", name: "g", owner: "48", children: [ { id: "70", name: "line", owner: "48", children: [] }, { id: "71", name: "text", owner: "48", children: [] } ] }, { id: "72", name: "g", owner: "48", children: [ { id: "73", name: "line", owner: "48", children: [] }, { id: "74", name: "text", owner: "48", children: [] } ] }, { id: "75", name: "g", owner: "48", children: [ { id: "76", name: "line", owner: "48", children: [] }, { id: "77", name: "text", owner: "48", children: [] } ] } ] }, { id: "78", name: "path", owner: "48", children: [] } ] } ] } ] } ] } ] }, { id: "79", name: "PointerCircle", owner: "13", children: [ { id: "80", name: "circle", owner: "79", children: [] } ] }, { id: "81", name: "Hover", owner: "13", children: [ { id: "82", name: "circle", owner: "81", children: [] }, { id: "83", name: "line", owner: "81", children: [] } ] }, { id: "84", name: "Tooltip", owner: "13", children: [ { id: "85", name: "text", owner: "84", children: [] } ] } ] } ] } ] } ] } ] } ] })39:[] 2d:{"title":"React Components Hierarchy as Nested Trees","cells":[{"id":0,"value":"# React Components Hierarchy as Nested Trees\n\nQuick attempt to visualize a rendered React component tree as nested trees","pinned":false,"hidden":false,"mode":"md"},{"id":864,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"## Nested Tree","pinned":false,"hidden":false,"mode":"md"},{"id":1631,"value":"### Transitioning Tree","pinned":false,"hidden":false,"mode":"md"},{"id":1729,"value":"mutable debug = {\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2034,"value":"💭 This transition is OK for showing React component tree to DOM tree but not the reverse. OK for the handoff of host elements to react-dom (the host tree?).","pinned":false,"hidden":false,"mode":"md"},{"id":1726,"value":"viewof button = {\n let clicked = true;\n const b = Inputs.button(\"Update to DOM\");\n\n b.addEventListener(\"input\", () => {\n clicked = !clicked;\n const newRoot = prepareRoot(clicked ? componentRoot : domRoot);\n const domNodes = newRoot.descendants();\n const domLinks = newRoot.links();\n\n transitionChart.draw(domNodes, domLinks);\n });\n\n return b;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1636,"value":"transitionChart = nestedTree(componentRoot)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1840,"value":"prepareRoot = (origRoot) => {\n const copiedRoot = origRoot.copy();\n const root = copiedRoot.eachBefore(\n ((i) => (d) => {\n d.index = i++;\n d.data.isDOM =\n d.data.name && isLowercase(d.data.name) && d.data.name !== \"[ ]\";\n\n const ownerNode = copiedRoot.find((e) => e.data.id === d.data.owner);\n if (!ownerNode) return;\n\n d.data.x1 = ownerNode.depth * nodeSize;\n d.data.x2 = d.depth * nodeSize;\n\n d.data.y1 = ownerNode.index * nodeSize;\n d.data.y2 = d.index * nodeSize;\n\n d.data.r = Math.abs(d.data.y2 - d.data.y1) / 2;\n })(0)\n );\n\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2063,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1821,"value":"nodeCircleFill = (d) => d.data.name && isLowercase(d.data.name) && \"white\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"viewof showOnlyDOM = Inputs.toggle({\n label: \"Show DOM elements only\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"viewof isGood = Inputs.toggle({\n label: \"Well–composed\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1947,"value":"Well-composed: flatter owner hierarchy and flatter component hierarchy","pinned":false,"hidden":false,"mode":"md"},{"id":573,"value":"md`### ${isGood ? \"Well\" : \"Ill\"}–Composed Component Hierarchy`","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"c = nestedTreeNoTransitions(componentRoot, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"### Owner Hierarchy","pinned":false,"hidden":false,"mode":"md"},{"id":534,"value":"nestedTreeNoTransitions(ownersRoot)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1573,"value":"### DOM Tree","pinned":false,"hidden":false,"mode":"md"},{"id":1141,"value":"nestedTreeNoTransitions(domRoot, false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"componentRoot = d3.hierarchy(chosenData).sort((a, b) => a.data.id - b.data.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"domRoot = getDomNodesRoot(componentRoot)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"ownersRoot = makeOwnersRoot(componentRoot)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2099,"value":"makeOwnersRoot = (root) =>\n d3\n .stratify()\n .id((d) => d.id)\n .parentId((d) => d.owner)(root.descendants().map((d) => d.data))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2109,"value":"## Mini example","pinned":false,"hidden":false,"mode":"md"},{"id":2111,"value":"### Parent tree","pinned":false,"hidden":false,"mode":"md"},{"id":2113,"value":"#### Bad","pinned":false,"hidden":false,"mode":"md"},{"id":2122,"value":"badRoot = d3.hierarchy(smallBad)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2088,"value":"html`

${nestedTreeNoTransitions(\n badRoot\n)} ${nestedTreeNoTransitions(makeOwnersRoot(badRoot))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2115,"value":"#### Good","pinned":false,"hidden":false,"mode":"md"},{"id":2125,"value":"goodRoot = d3.hierarchy(smallGood)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2349,"value":"p = nestedTreeNoTransitions(goodRoot, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2351,"value":"nestedTreeNoTransitions(makeOwnersRoot(goodRoot))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2094,"value":"html`

${nestedTreeNoTransitions(\n goodRoot, true\n)} ${nestedTreeNoTransitions(makeOwnersRoot(goodRoot))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2107,"value":"### Owner Tree","pinned":false,"hidden":false,"mode":"md"},{"id":2164,"value":"### Before You memo() Example\n\nhttps://overreacted.io/before-you-memo/","pinned":false,"hidden":false,"mode":"md"},{"id":2168,"value":"memoInitRoot = d3.hierarchy(memoInit)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2174,"value":"#### Initial","pinned":false,"hidden":false,"mode":"md"},{"id":2166,"value":"html`

${nestedTreeNoTransitions(\n memoInitRoot,\n true\n)} ${nestedTreeNoTransitions(makeOwnersRoot(memoInitRoot))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2479,"value":"nestedTreeNoTransitions(makeOwnersRoot(memoInitRoot))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2178,"value":"#### Lifted\n\n> We split the App component in two. The parts that depend on the color, together with the color state variable itself, have moved into ColorPicker.\n\n> The parts that don’t care about the color stayed in the App component and are passed to ColorPicker as JSX content, also known as the children prop.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":2183,"value":"memoSmartRoot = d3.hierarchy(memoSmart)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2180,"value":"html`

${nestedTreeNoTransitions(\n memoSmartRoot,\n true\n)} ${nestedTreeNoTransitions(makeOwnersRoot(memoSmartRoot))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2484,"value":"nestedTreeNoTransitions(makeOwnersRoot(memoSmartRoot))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2496,"value":"## Post test","pinned":false,"hidden":false,"mode":"md"},{"id":2503,"value":"postTestRoot = d3.hierarchy(postTest)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2507,"value":"testParentTree = nestedTreeNoTransitions(postTestRoot, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2500,"value":"testOwnerTree = nestedTreeNoTransitions(makeOwnersRoot(postTestRoot))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2364,"value":"### State Container\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":2444,"value":"viewof isGoodContainer = Inputs.toggle({\n label: \"State Container\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2366,"value":"html`

${nestedTreeNoTransitions(\n stateContainerRoot,\n true\n)} ${nestedTreeNoTransitions(makeOwnersRoot(stateContainerRoot))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2368,"value":"stateContainerBadRoot = d3.hierarchy(stateContainerBad)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2371,"value":"stateContainerGoodRoot = d3.hierarchy(stateContainerGood)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2435,"value":"stateContainerRoot = isGoodContainer\n ? stateContainerGoodRoot\n : stateContainerBadRoot","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":648,"value":"nodeSize = 25","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"width = 928","pinned":false,"hidden":false,"mode":"ojs"},{"id":2263,"value":"## Drawing Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1818,"value":"function drawNode(enter) {\n const node = enter\n .append(\"g\")\n .attr(\"name\", (d) => d.data.name)\n .attr(\"transform\", (d) => `translate(0,${d.index * nodeSize})`)\n .attr(\"opacity\", (d) => (!showOnlyDOM || d.data.isDOM ? 1 : 0)); // or filter?\n\n const nodeCircles = node\n .append(\"circle\")\n .attr(\"cx\", (d) => d.depth * nodeSize) // HOW TO UPDATE THIS?\n .attr(\"r\", 3)\n .attr(\"fill\", nodeCircleFill)\n .attr(\"stroke\", \"black\");\n\n node\n .append(\"text\")\n .attr(\"dy\", \"0.32em\")\n .attr(\"x\", (d) => d.depth * nodeSize + 6) // HOW TO UPDATE THIS?\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.2)\n .attr(\"paint-order\", \"stroke\")\n .text((d) => d.data.name)\n .append(\"tspan\")\n .text((d) => ` (${d.data.id})`);\n\n node.append(\"title\").text((d) =>\n d\n .ancestors()\n .reverse()\n .map((d) => d.data.name)\n .join(\"/\")\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1909,"value":"function linkPath(d) {\n return `M${d.source.depth * nodeSize},${d.source.index * nodeSize}\n V${d.target.index * nodeSize}\n h${nodeSize}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2205,"value":"function strokeDashArray(d) {\n const l = this.getTotalLength();\n return `${l} ${l}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2208,"value":"function strokeDashOffset(d) {\n return this.getTotalLength();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"function arc({ x1, y1, x2, y2, r }) {\n\n return `\n M${x1},${y1}\n A${r},${r} 0,0,${y1 < y2 ? 0 : 1} ${x2},${y2}`;\n // A rx ry x-axis-rotation large-arc-flag sweep-flag x y\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"From [Thinking in React](https://react.dev/learn/thinking-in-react)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1849,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"Example adapted from [Using Composition in React to Avoid \"Prop Drilling\"](https://www.youtube.com/watch?v=3XaXKiXtNjw&t=289s) by Micheal Jackson","pinned":false,"hidden":false,"mode":"md"},{"id":2097,"value":"smallGood = ({\n id: \"1\",\n name: \"App\",\n children: [\n {\n id: \"2\",\n name: \"Dashboard\",\n owner: \"1\",\n children: [\n {\n id: \"3\",\n name: \"DashboardContent\",\n owner: \"1\",\n children: []\n }\n ]\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2086,"value":"smallBad = ({\n id: \"1\",\n name: \"A\",\n children: [\n {\n id: \"2\",\n name: \"B\",\n owner: \"1\",\n children: [\n {\n id: \"3\",\n name: \"C\",\n owner: \"2\",\n children: []\n }\n ]\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2486,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2160,"value":"From [Before you memo](https://overreacted.io/before-you-memo/)","pinned":false,"hidden":false,"mode":"md"},{"id":2152,"value":"memoInit = ({\n id: \"1\",\n name: \"App\",\n children: [\n {\n id: \"2\",\n name: \"div\",\n owner: \"1\",\n children: [\n {\n id: \"3\",\n name: \"input\",\n owner: \"1\",\n children: []\n },\n {\n id: \"4\",\n name: \"p\",\n owner: \"1\",\n children: []\n },\n {\n id: \"5\",\n name: \"ExpensiveTree\",\n owner: \"1\",\n children: [\n {\n id: \"6\",\n name: \"p\",\n owner: \"5\",\n children: []\n }\n ]\n }\n ]\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2154,"value":"memoSmart = ({\n id: \"1\",\n name: \"App\",\n children: [\n {\n id: \"2\",\n name: \"ColorPicker\",\n owner: \"1\",\n children: [\n {\n id: \"3\",\n name: \"div\",\n owner: \"2\",\n children: [\n {\n id: \"3\",\n name: \"input\",\n owner: \"2\",\n children: []\n },\n {\n id: \"4\",\n name: \"p\",\n owner: \"1\",\n children: []\n },\n {\n id: \"5\",\n name: \"ExpensiveTree\",\n owner: \"1\",\n children: [\n {\n id: \"6\",\n name: \"p\",\n owner: \"5\",\n children: []\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2054,"value":"illComposedNotRendered = ({\n id: \"3\",\n name: \"App\",\n children: [\n {\n id: \"4\",\n name: \"div\",\n owner: \"3\",\n children: [\n {\n id: \"5\",\n name: \"Header\",\n owner: \"3\",\n children: []\n },\n {\n id: \"8\",\n name: \"div\",\n owner: \"3\",\n children: [\n {\n id: \"9\",\n name: \"Dashboard\",\n owner: \"3\",\n children: []\n }\n ]\n },\n {\n id: \"23\",\n name: \"Footer\",\n owner: \"3\",\n children: []\n }\n ]\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"chosenData = isGood ? wellComposed : illComposed","pinned":false,"hidden":false,"mode":"ojs"},{"id":2356,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2358,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"## Utils","pinned":false,"hidden":false,"mode":"md"},{"id":339,"value":"isLowercase = (string) => {\n const firstLetter = string[0];\n\n return firstLetter === firstLetter.toLowerCase();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1706,"value":"d3 = require(\"d3@7\", \"d3-interpolate-path@v2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}