41:null 42:["$","title",null,{"children":"Revised Treemap for Jörgs PHD paper | treemap | Observable"}] 48:T92ed,function createChart(hierarchies, index, options = {}) { const { // width = 450, // height = 1000, width= 1200, height= 500, fontSize = 16, formatValue = (v) => (typeof v === "number" ? v.toFixed(1) : String(v)), formatCountryName = (v, i) => String(v), showEllipsis = false, fontFamily = "sans-serif", // New padding options for the SVG container itself outerPaddingLeft = 0, outerPaddingTop = 0, outerPaddingRight = 0, // Default to a small padding on the right outerPaddingBottom = 0, // headingText = "", // New option for the heading // headingFontSize = 14, // New option for heading font size // headingTextColor = "#333", // New option for heading text color strokeWidth = 1, // You can set your desired default uniform stroke width here, e.g., 1, 1.5, 2 etc. // NEW: if set, this index's data is compared against `hierarchies[index]`'s data. // Whichever value (target = hierarchies[index], compare = hierarchies[compareIndex]) is LARGER // determines the outer (full-size) rectangle's color: // - if target >= compare: outer rectangle is BOLD (target color), inner (smaller) rectangle is PALE (compare value) // - if target < compare: outer rectangle is PALE, inner (smaller) rectangle is BOLD (target value) compareIndex = undefined, } = options; // --- NEW DEBUGGING LOGS --- console.log("--- createChart Start ---"); console.log("Effective width:", width); console.log("Effective height:", height); console.log("Effective fontSize:", fontSize); console.log("Input 'hierarchies':", hierarchies); console.log("Input 'index':", index); if (!hierarchies || !Array.isArray(hierarchies)) { console.error("Error: 'hierarchies' is not a valid array."); return null; // Stop execution if input is bad } if (!hierarchies[0]) { console.error("Error: hierarchies[0] (layout data) is undefined or null."); return null; } if (!hierarchies[index]) { console.error(`Error: hierarchies[${index}] (actual data) is undefined or null.`); return null; } // --- END NEW DEBUGGING LOGS --- const actualDataHierarchyInput = hierarchies[index]; const actualDataRoot = d3.hierarchy( actualDataHierarchyInput, (data) => data.children ); const actualDataLeavesArray = actualDataRoot.leaves(); const actualValuesDataMap = new Map(); actualDataLeavesArray.forEach((leaf) => { if (leaf.data.name && typeof leaf.data.value !== "undefined") { actualValuesDataMap.set(leaf.data.name, { value: parseFloat(leaf.data.value), color: leaf.data.color, ...leaf.data, }); } }); // --- NEW: build a comparison values map (e.g. the "Reference"/prior values) --- // when compareIndex is supplied. This lets a single chart encode BOTH values: // the larger one always fills the full cell, the smaller one is nested inside it. let compareValuesDataMap = null; if (typeof compareIndex !== "undefined" && hierarchies[compareIndex]) { compareValuesDataMap = new Map(); const compareDataRoot = d3.hierarchy( hierarchies[compareIndex], (data) => data.children ); compareDataRoot.leaves().forEach((leaf) => { if (leaf.data.name && typeof leaf.data.value !== "undefined") { compareValuesDataMap.set(leaf.data.name, { value: parseFloat(leaf.data.value), color: leaf.data.color, ...leaf.data, }); } }); } // Cell size = the LARGER of the two values (target vs. comparison) per leaf, // so the full-size outer rectangle is always area-accurate. const layoutHierarchy = d3 .hierarchy(hierarchies[0], (data) => data.children) .sum((data) => { // internal (parent) nodes contribute nothing of their own if (data.children && data.children.length) return 0; // no comparison requested -> keep the original behaviour if (!compareValuesDataMap) return +data.value || 0; const t = actualValuesDataMap.get(data.name); const c = compareValuesDataMap.get(data.name); const tv = t && isFinite(t.value) ? Math.max(0, t.value) : 0; const cv = c && isFinite(c.value) ? Math.max(0, c.value) : 0; const m = Math.max(tv, cv); // fallback if the leaf is missing from both value maps return m > 0 ? m : (+data.value || 0); }) .sort((a, b) => b.value - a.value); // --- NEW DEBUGGING LOGS --- console.log("layoutHierarchy after d3.hierarchy, sum, sort:", layoutHierarchy); if (!layoutHierarchy || typeof layoutHierarchy.leaves !== 'function') { console.error("Error: layoutHierarchy is not a valid D3 hierarchy object."); return null; } // --- END NEW DEBUGGING LOGS --- const treemapLayout = d3 .treemap() .tile(d3.treemapBinary) .size([width - 40, height - 40]) .paddingInner(1) // Keep a small inner padding // --- START: ADDED paddingTop for group labels --- //02.12. DELETE PADDING FROM PARENT LABELS //.paddingTop((d) => d.depth === 0 ? 0 : 20) // 20px space at top of parent nodes (not root) .paddingTop(0) // --- END: ADDED paddingTop for group labels --- .paddingRight(0) .paddingBottom(0) .paddingLeft(0) .round(true); treemapLayout(layoutHierarchy); const layoutLeaves = layoutHierarchy.leaves(); // --- NEW DEBUGGING LOGS --- console.log("layoutLeaves after treemapLayout and leaves():", layoutLeaves); if (layoutLeaves.length === 0) { console.error("Error: No leaves found after treemap layout. Treemap will be empty."); // Continue to return svg.node() which will be empty, or you could return null here } // Debugging d.x0, d.y0 for a sample leaf if (layoutLeaves.length > 0) { const firstLeaf = layoutLeaves[0]; console.log("First leaf (d_node) coordinates:", { x0: firstLeaf.x0, y0: firstLeaf.y0, x1: firstLeaf.x1, y1: firstLeaf.y1 }); } // --- END NEW DEBUGGING LOGS --- const svg = d3 .create("svg") .attr("viewBox", [-20, -20, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", fontSize); const defs = svg.append("defs"); // --- LOG GROUP A: Initial check of the SVG and its contents (should be empty here for parents) --- console.log("LOG A1: svg variable immediately after creation:", svg); console.log("LOG A2: g.leaf-node elements in document (before all rendering):", d3.select("svg").selectAll("g.leaf-node")); // Might be empty or previous render console.log("LOG A3: g.parent-group elements in document (before all rendering):", d3.select("svg").selectAll("g.parent-group")); // Should be empty // --- END LOG GROUP A --- // --- START: Setup for accurate text measurement --- const svgForMeasurement = d3.create("svg"); const tempTextElement = svgForMeasurement.append("text") .attr("font-family", "sans-serif") .style("visibility", "hidden") .style("position", "absolute") .style("top", "-9999px") .style("left", "-9999px"); if (typeof document !== 'undefined' && document.body) { document.body.appendChild(svgForMeasurement.node()); } else { console.warn("Cannot append measurement SVG to document.body. Text measurement might be inaccurate."); } const measureTextForAttemptRender = (text, fontSizeToMeasure) => { if (!text) return 0; tempTextElement .attr("font-size", `${fontSizeToMeasure}px`) .text(text); try { return tempTextElement.node().getBBox().width; } catch (e) { console.warn("Error measuring text with getBBox, falling back to approximation:", e); return text.length * (fontSizeToMeasure * 0.6); } }; // --- END: Setup for accurate text measurement --- const uid = `O-${Math.random().toString(16).slice(2)}`; const lineHeightFactor = 1; // ADJUSTED: Made tighter const minFontSize = 10; // Smallest font size for any label // --- Helper function to determine text color based on background luminance --- function getTextColor(bgColor) { if (!bgColor || bgColor === "transparent") return "#333"; const color = d3.color(bgColor); if (!color) return "#333"; const luminance = color.r * 0.2126 + color.g * 0.7152 + color.b * 0.0722; return luminance > 180 ? "#333" : "#f8f8f8"; } // --- NEW: Helper function to determine the outer (full-cell) and inner (nested) // rectangle fill colors and the inner rectangle's scale factor for a given leaf node. --- function computeRectConfig(d_node) { const name = d_node.data.name; const maxValue = d_node.value; // full-cell size value from the layout hierarchy (max of the two values) const targetItem = actualValuesDataMap.get(name); const boldColor = targetItem ? targetItem.color : "transparent"; const paleColor = d_node.data.background || "#eeeeee"; // Fallback: no comparison requested -> old single-value behavior // (pale background filling the whole cell, bold foreground scaled to value/maxValue) if (!compareValuesDataMap) { let innerScale = 0; if ( targetItem && typeof targetItem.value === "number" && targetItem.value >= 0 && maxValue > 0 ) { innerScale = Math.sqrt(Math.max(0, targetItem.value) / maxValue); } return { outerFill: paleColor, innerFill: boldColor, innerScale }; } const compareItem = compareValuesDataMap.get(name); const tv = targetItem && typeof targetItem.value === "number" && targetItem.value >= 0 ? targetItem.value : 0; const cv = compareItem && typeof compareItem.value === "number" && compareItem.value >= 0 ? compareItem.value : 0; if (tv <= 0 && cv <= 0) { return { outerFill: paleColor, innerFill: "transparent", innerScale: 0 }; } if (tv >= cv) { // Target value (e.g. Diet_Lancet) is the larger (or equal) one: // full BOLD rectangle, with a smaller PALE rectangle nested inside for the comparison value. const innerScale = tv > 0 ? Math.sqrt(cv / tv) : 0; return { outerFill: boldColor, innerFill: paleColor, innerScale }; } else { // Target value is smaller: full PALE rectangle, with a smaller BOLD rectangle // nested inside for the target value (same as the original single-chart behavior). const innerScale = cv > 0 ? Math.sqrt(tv / cv) : 0; return { outerFill: paleColor, innerFill: boldColor, innerScale }; } } // --- Helper function to wrap text with ellipsis (used by attemptRender) --- const wrapTextForAttemptRender = (text, maxWidth, fsForMeasurement, maxLines, allowEllipsis = false) => { if (!text) return { lines: [], contentLost: false }; const words = text.split(" "); let lines = []; let currentLine = ""; let contentWasLost = false; // NEW FLAG const minCharsPart1 = 3; const minCharsPart2 = 5; for (const word of words) { const testLine = currentLine === "" ? word : currentLine + " " + word; if (measureTextForAttemptRender(testLine, fsForMeasurement) <= maxWidth) { currentLine = testLine; } else { if (currentLine !== "") { lines.push(currentLine); currentLine = word; } else { // Handle single word too long for a line let tempWordPart = ""; let lastValidBreakPoint = -1; let partBeforeBreak = ""; for (let j = 0; j < word.length; j++) { const char = word[j]; const testPart = tempWordPart + char; if (measureTextForAttemptRender(testPart, fsForMeasurement) <= maxWidth) { tempWordPart = testPart; if (tempWordPart.length >= minCharsPart1 && (word.length - (j + 1)) >= minCharsPart2) { lastValidBreakPoint = j; partBeforeBreak = tempWordPart; } } else { if (lastValidBreakPoint !== -1) { lines.push(partBeforeBreak + "-"); currentLine = word.slice(lastValidBreakPoint + 1); // If we broke the word but couldn't fit the rest, content was lost if (word.slice(lastValidBreakPoint + 1).length < (word.length - (lastValidBreakPoint + 1))) { contentWasLost = true; } } else { currentLine = word; } break; } } // If after attempting hyphenation, the currentLine is still the original word or empty, // and it didn't fit, mark content lost. if (currentLine === word && measureTextForAttemptRender(currentLine, fsForMeasurement) > maxWidth) { contentWasLost = true; } if (currentLine === "" && word.length > 0) { // If nothing fit, and it's not empty string contentWasLost = true; currentLine = word; // Keep trying with the original word, will be handled by final `singleWord` fallback } } } } // This catches if a word is too long and can't be hyphenated, then subsequent logic might drop it. // For now, if currentLine remains empty and word itself doesn't fit, assume content lost. if (currentLine === "" && words.length > 0 && measureTextForAttemptRender(words[0], fsForMeasurement) > maxWidth) { // Check first word if currentLine is empty contentWasLost = true; } if (currentLine.length > 0) { lines.push(currentLine); } // Handle ellipsis and maxLines if (allowEllipsis && maxLines > 0 && lines.length > maxLines) { const lastLineIndex = maxLines - 1; let lastLineContent = lines[lastLineIndex]; let trimmedLine = String(lastLineContent || ""); const ellipsisText = "..."; while (trimmedLine.length > 0 && measureTextForAttemptRender(trimmedLine + ellipsisText, fsForMeasurement) > maxWidth) { trimmedLine = trimmedLine.slice(0, -1); } lines = lines.slice(0, lastLineIndex).concat([trimmedLine + ellipsisText]); contentWasLost = true; // Ellipsis explicitly means content was lost/truncated } else if (lines.length > maxLines) { // If ellipsis is NOT allowed but lines exceed maxLines, truncate lines = lines.slice(0, maxLines); contentWasLost = true; // Content was implicitly discarded due to maxLines } // Final single word fallback (if entire original text couldn't produce any line) if (lines.length === 0 && words.length > 0) { let singleWord = words[0]; if (measureTextForAttemptRender(singleWord, fsForMeasurement) > maxWidth) { while (singleWord.length > 0 && measureTextForAttemptRender(singleWord + (allowEllipsis ? "..." : ""), fsForMeasurement) > maxWidth) { singleWord = singleWord.slice(0, -1); } if (singleWord.length > 0) { lines.push(singleWord + (allowEllipsis && singleWord.length < words[0].length ? "..." : "")); if (singleWord.length < words[0].length || measureTextForAttemptRender(singleWord, fsForMeasurement) > maxWidth) { contentWasLost = true; // If single word was truncated or still didn't fit } } else { // Single word became empty, meaning no content could fit contentWasLost = true; } } else { lines.push(singleWord); } } // Final check for overall content loss by comparing original text to final lines // Normalize both strings to remove spaces, hyphens, and ellipsis for comparison const originalNormalized = text.replace(/[\s-]/g, ''); // REMOVED: spaces and hyphens const finalNormalized = lines.map(line => line.replace(/[\s-.]/g, '')).join(''); // REMOVED: spaces, hyphens, and periods (for ellipsis) // This handles cases where words might have been dropped implicitly without `maxLines` being the sole cause // Only set contentWasLost if there's a mismatch AND ellipsis was NOT allowed to cover it if (originalNormalized !== finalNormalized && !allowEllipsis) { contentWasLost = true; } // Also, if ellipsis IS allowed, but `finalNormalized` is shorter than `originalNormalized`, // it means content *was* lost and covered by ellipsis. // This is important because the problem states "fits=true, lines=Fruit" but `Fruit products` was desired. // In this case, `contentWasLost` should be true so that `perfectFit` becomes false in `attemptRender`. if (allowEllipsis && originalNormalized.length > finalNormalized.length) { contentWasLost = true; } return { lines, contentLost: contentWasLost }; // CORRECTED: Return object here }; // This is the correct closing brace for the function // --- Helper function to attempt rendering text (for both leaves and groups) --- const attemptRender = (d_node_arg, w, h, fs, ellipsisAllowed = false) => { const name = d_node_arg && d_node_arg.data ? d_node_arg.data.name : ""; // console.log(`attemptRender for "${name}" (w:${w}, h:${h}, fs:${fs}, ellipsis:${ellipsisAllowed})`); // Keep this for debugging if needed const namePadding = 3; const minAvailableTextDim = 5; let availableTextWidth = Math.max(minAvailableTextDim, w - 2 * namePadding); let availableTextHeight = Math.max(minAvailableTextDim, h); // let availableTextHeight = Math.max(minAvailableTextDim, h - 2 * namePadding); const lineHeightPx = fs; const valueLineHeightPx = fs * 0.8; // totalMaxLines is the absolute maximum number of lines that can physically fit const totalMaxLines = Math.floor(availableTextHeight / lineHeightPx); if (availableTextWidth <= 0 || availableTextHeight <= 0 || totalMaxLines < 1) { return { fits: false, lines: [] }; } const isVisible = w > 20 && h > 20; if (!isVisible) { return { fits: false, lines: [] }; } let displayValue = null; // Only get display value for leaf nodes that have a name if (d_node_arg.children === undefined && name) { const actualItem = actualValuesDataMap.get(name); if (actualItem && typeof actualItem.value !== 'undefined') { displayValue = actualItem.value; } } const formattedValue = (displayValue !== null && typeof displayValue !== 'undefined') ? formatValue(displayValue) : ""; const nameWrapResult = wrapTextForAttemptRender(name, availableTextWidth, fs, totalMaxLines, ellipsisAllowed); const nameLines = nameWrapResult.lines; let anyContentWasLost = nameWrapResult.contentLost; let finalLines = []; nameLines.forEach(line => finalLines.push(line)); // --- Ensure valueTextLines is declared here in the function's scope --- let valueTextLines = []; // <--- THIS LINE IS CRUCIAL AND MUST BE HERE! // --- End of crucial declaration --- if (d_node_arg.children === undefined && formattedValue) { const valueMaxLines = 1; // Value should always try to be on a single line const valueWrapResult = wrapTextForAttemptRender(formattedValue, availableTextWidth, fs * 0.8, valueMaxLines, ellipsisAllowed); valueTextLines = valueWrapResult.lines; // Assign actual lines from wrapping if (valueWrapResult.contentLost) { anyContentWasLost = true; } // Removed: finalLines.push(""); for separator line as requested valueTextLines.forEach(line => finalLines.push(line)); } // Filter out any empty lines that might have been added or resulted from filtering finalLines = finalLines.filter(line => line !== null && line !== undefined && line.trim() !== ""); let perfectFit = true; // Assume perfect fit initially // --- Start of Calculated Content Height and Fit Check --- let calculatedContentHeight = 0; // Height for name lines calculatedContentHeight += nameLines.length * lineHeightPx; // Removed: adding namePadding for a separator line // Height for value lines, if present (ensure valueTextLines is used here) if (d_node_arg.children === undefined && formattedValue) { calculatedContentHeight += valueTextLines.length * valueLineHeightPx; } // If the calculated height exceeds available height, it doesn't fit if (calculatedContentHeight > availableTextHeight + 2) { // Adding a small tolerance perfectFit = false; } // --- End of Calculated Content Height and Fit Check --- // expectedTotalLines: This is the number of logical lines (name lines + value line if present) // Modified to remove the separator line count (+1) const expectedTotalLines = nameLines.length + (d_node_arg.children === undefined && formattedValue ? 1 : 0); // Check if the actual number of lines generated exceeds the logical expectation if (finalLines.length > expectedTotalLines) { perfectFit = false; } // --- NEW: Direct physical line count check --- // If the number of lines we generated (finalLines) exceeds the maximum physical lines // that can fit in the available height at the current font size, then it doesn't fit. // This is crucial for situations like "Other sauces" where 3 lines are needed but only 2 fit vertically at a large font size. if (finalLines.length > totalMaxLines && totalMaxLines > 0) { perfectFit = false; } // --- END NEW --- // If content was lost during wrapping (e.g., words discarded) AND ellipsis was NOT allowed, // then it's not a perfect fit. This will force the font size reduction loop. if (anyContentWasLost && !ellipsisAllowed) { perfectFit = false; } // Existing ellipsis check (if ellipsis IS allowed but applied, it's not a "perfect" fit for max font size) // Ensure this check correctly references valueTextLines for its ellipsis check if (ellipsisAllowed && (nameLines.some(line => line.endsWith("...")) || (formattedValue && valueTextLines.some(line => line.endsWith("..."))))) { // Use valueTextLines here perfectFit = false; } // Debugging logs (uncomment if you need to see the exact decision points) /* console.log(`--- Debugging Fit for "${name}" (fs:${fs}) ---`); console.log(` calculatedContentHeight: ${calculatedContentHeight}`); console.log(` availableTextHeight + 2: ${availableTextHeight + 2}`); console.log(` calculatedContentHeight > availableTextHeight + 2: ${calculatedContentHeight > availableTextHeight + 2}`); console.log(` finalLines.length: ${finalLines.length}`); console.log(` expectedTotalLines: ${expectedTotalLines}`); console.log(` finalLines.length > expectedTotalLines: ${finalLines.length > expectedTotalLines}`); console.log(` totalMaxLines: ${totalMaxLines}`); console.log(` finalLines.length > totalMaxLines: ${finalLines.length > totalMaxLines}`); console.log(` anyContentWasLost: ${anyContentWasLost}`); console.log(` ellipsisAllowed: ${ellipsisAllowed}`); console.log(` (anyContentWasLost && !ellipsisAllowed): ${anyContentWasLost && !ellipsisAllowed}`); console.log(` perfectFit (before final log): ${perfectFit}`); console.log(`--- End Debugging Fit ---`); */ // Final result log console.log(`attemptRender result for "${name}": fits=${perfectFit}, lines=${finalLines.length > 0 ? finalLines : '[]'}, contentLost=${anyContentWasLost}`); return { fits: perfectFit, lines: finalLines }; }; // --- START: Group Name Logic --- // Select all nodes that are parents (have children) and are not the root const groupNodes = layoutHierarchy.descendants().filter(d => d.children && d.depth > 0); console.log("Group Nodes for Labels:", groupNodes); // <-- Make sure this line is here if (groupNodes.length === 0) { console.warn("No group nodes found for labels. Check hierarchy data and depth filter."); } // Create a group for parent labels. const parentGroupSelection = svg.selectAll("g.parent-group") .data(groupNodes) .join("g") .attr("class", "parent-group") // Add class for styling/selection // The transform places the group at the parent's top-left corner .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // --- LOG GROUP B: Check parentGroupSelection immediately after .join('g') --- console.log("LOG B1: parentGroupSelection immediately after .join('g'):", parentGroupSelection); // SHOULD show 17 'g' elements here // --- END LOG GROUP B --- // Optional: Draw a subtle border for parent groups parentGroupSelection.append("rect") .attr("fill", "none") // .attr("stroke", "#ddd") // Lighter stroke for parent borders // .attr("stroke-width", strokeWidth * 1) // Example: if you want parent borders to be half the uniform stroke, or just strokeWidth for same thickness .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); // Add parent labels parentGroupSelection.each(function(d_parent_node) { console.log("DEBUG: Entering parent each() for node:", d_parent_node.data.name); console.log("Processing parent node for label:", d_parent_node.data.name, d_parent_node); const groupEl = d3.select(this); // --- NEW: Remove any existing parent labels before adding new ones to prevent duplicates --- groupEl.selectAll("text.parent-label").remove(); // ----------------------------------------------------------------------------------------- const parentW = d_parent_node.x1 - d_parent_node.x0; // const parentLabelReservedHeight = 25; // Ensure this matches paddingTop in your treemapLayout // 02.12.2025 REMOVE PARENT LABEL, ALSO REMOVE PADDING. JUST COMMENT THIS OUT WHEN RE-INTORDUCING LABELS const parentLabelReservedHeight = 1; // Ensure this matches paddingTop in your treemapLayout const groupLabelPadding = 1; const groupLabelFontSize = 13; const groupLabelMinFontSize = 12.5; const groupLabelTextColor = "#444"; const groupAvailableTextWidth = parentW - 2 * groupLabelPadding; const groupAvailableTextHeight = parentLabelReservedHeight - 2 * groupLabelPadding; console.log(`DEBUG Parent Text Space for "${d_parent_node.data.name}": Width=${groupAvailableTextWidth}, Height=${groupAvailableTextHeight}`); console.log(`Parent: ${d_parent_node.data.name}, Total Width: ${parentW}, Total Height: ${d_parent_node.y1 - d_parent_node.y0}, Reserved Label Height: ${parentLabelReservedHeight}, Available Text W: ${groupAvailableTextWidth}, Available Text H: ${groupAvailableTextHeight}`); // Skip rendering if the space for the label is too small to begin with if (groupAvailableTextWidth <= 0 || groupAvailableTextHeight <= 0 || parentW < 30 || parentLabelReservedHeight < 10) { console.warn(`Skipping label for ${d_parent_node.data.name} due to insufficient space.`); return; } let parentNameLines = []; let parentCurrentFontSize = groupLabelFontSize; // --- NEW: Vertical offset for parent label within its reserved height --- // Adjust this value to move the label up/down. // A larger value pushes the label further down (more top padding, closer to rectangles). const parentLabelOffsetY = 7; // Experiment with this value (e.g., 5, 10, 15, 20...) // --------------------------------------------------------------------- // Pass a minimal object to attemptRender for parent labels (only name, no value) const pseudoNodeForParent = { data: { name: d_parent_node.data.name }, children: true }; // children: true indicates it's a parent let parentResult = attemptRender(pseudoNodeForParent, groupAvailableTextWidth, groupAvailableTextHeight, groupLabelFontSize, false); if (parentResult.fits) { parentNameLines = parentResult.lines; parentCurrentFontSize = groupLabelFontSize; } else { for (let fs_loop = groupLabelFontSize - 1; fs_loop >= groupLabelMinFontSize; fs_loop--) { const attemptResult = attemptRender(pseudoNodeForParent, groupAvailableTextWidth, groupAvailableTextHeight, fs_loop, false); if (attemptResult.fits) { parentNameLines = attemptResult.lines; parentCurrentFontSize = fs_loop; break; } } } if (parentNameLines.length === 0) { // Fallback to ellipsis if no fit without ellipsis const finalEllipsisResult = attemptRender(pseudoNodeForParent, groupAvailableTextWidth, groupAvailableTextHeight, groupLabelMinFontSize, true); parentNameLines = finalEllipsisResult.lines; parentCurrentFontSize = groupLabelMinFontSize; } // --- MODIFIED CONDITION FOR DRAWING PARENT LABEL --- // Draw the parent name only if lines are available AND it has more than one child if (parentNameLines.length > 0 && d_parent_node.children && d_parent_node.children.length > 1) { const parentTextElement = groupEl .append("text") .attr("class", "parent-label") // IMPORTANT: Ensure this class is set .attr("fill", groupLabelTextColor) .attr("text-anchor", "start") .style("pointer-events", "none") .style("font-size", `${parentCurrentFontSize}px`); // Assuming lineHeightFactor is defined elsewhere, e.g., const lineHeightFactor = 1.05; const textYStart = parentLabelOffsetY + (parentCurrentFontSize * (lineHeightFactor || 1.05) * 0.7); parentNameLines.forEach((line, j) => { parentTextElement .append("tspan") .attr("x", groupLabelPadding) .attr("y", textYStart + j * parentCurrentFontSize * (lineHeightFactor || 1.05)) .text(line); }); console.log("LOG C1: Text appended within groupEl for:", d_parent_node.data.name, groupEl.node()); } // 02.12.25 TAKE OUT THE PARENT LABEL. JUST COMMENT OUT THE LINES AFTER TO RE-INTRODUCE THEM groupEl.selectAll("text.parent-label").remove(); // --- END CONSOLIDATED BLOCK --- }); // --- END: Group Name Logic --- // --- START: Existing Leaf Node Drawing Logic --- // This part remains largely the same, but now `node` selection is AFTER parentGroupSelection const node = svg .selectAll("g.leaf") // Use a distinct class for leaf nodes .data(layoutLeaves) .join("g") .attr("class", "leaf") // Add class .attr("transform", (d) => `translate(${d.x0},${d.y0})`); node .append("rect") // Outer Rectangle (full cell size) .attr("class", "background-rect") // .style("stroke-width", strokeWidth) // .attr("stroke", "white") .attr("fill", (d) => computeRectConfig(d).outerFill) .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0); // 7. Append Inner Rectangles (representing the smaller of the two values, CENTERED) node .append("rect") .attr("class", "foreground-rect") .attr("fill", (d) => computeRectConfig(d).innerFill) .attr("width", (d) => (d.x1 - d.x0) * computeRectConfig(d).innerScale) .attr("height", (d) => (d.y1 - d.y0) * computeRectConfig(d).innerScale) .attr("x", (d) => { const cellWidth = d.x1 - d.x0; const scale = computeRectConfig(d).innerScale; const innerWidth = cellWidth * scale; return (cellWidth - innerWidth) / 2; }) .attr("y", (d) => { const cellHeight = d.y1 - d.y0; const scale = computeRectConfig(d).innerScale; const innerHeight = cellHeight * scale; return (cellHeight - innerHeight) / 2; }); node.append("title").text((d) => { const actualItem = actualValuesDataMap.get(d.data.name); const val = actualItem ? actualItem.value : null; let titleText = formatCountryName(d.data.name, actualItem); if (val !== null && typeof val !== "undefined") { titleText += `\nValue: ${formatValue(val)}`; } if (compareValuesDataMap) { const compareItem = compareValuesDataMap.get(d.data.name); const cval = compareItem ? compareItem.value : null; if (cval !== null && typeof cval !== "undefined") { titleText += `\nComparison value: ${formatValue(cval)}`; } } return titleText; }); // Main drawing logic for each leaf node node.each(function (d_node, i_node) { const group = d3.select(this); const cellW = d_node.x1 - d_node.x0; const cellH = d_node.y1 - d_node.y0; const clipId = `${uid}-clip-${i_node}`; group .append("clipPath") .attr("id", clipId) .append("rect") // .attr("width", cellW) // .attr("height", cellH); .attr("x", strokeWidth / 2) // Shift x to account for stroke .attr("y", strokeWidth / 2) // Shift y to account for stroke .attr("width", cellW - strokeWidth) // Subtract full stroke width .attr("height", cellH - strokeWidth); // Subtract full stroke width const rawName = d_node.data.name; const actualItem = actualValuesDataMap.get(d_node.data.name); const rawValue = actualItem ? actualItem.value : null; // --- NEW: determine text color based on which rectangle (outer or inner) // occupies the larger visible area of the cell --- const rectConfig = computeRectConfig(d_node); const innerAreaRatio = rectConfig.innerScale * rectConfig.innerScale; // inner rect area / cell area const significantInnerAreaThreshold = 0.25; let proposedTextColor; if (innerAreaRatio > significantInnerAreaThreshold) { // Inner rectangle covers a significant portion of the cell -> base text color on inner fill proposedTextColor = getTextColor(rectConfig.innerFill); } else { // Otherwise the outer rectangle dominates -> base text color on outer fill proposedTextColor = getTextColor(rectConfig.outerFill); } let linesToDraw = []; let currentFontSize = fontSize; const minCellDimForText = 20; const isTextVisibleInCell = cellW > minCellDimForText && cellH > minCellDimForText; // 1. Try background rectangle with full font size, no ellipsis. let result = attemptRender(d_node, cellW, cellH, fontSize, false); if (result.fits) { linesToDraw = result.lines; currentFontSize = fontSize; } else { // 2. If no perfect fit at full font size, try reducing font size (without ellipsis). for (let fs_loop = fontSize - 1; fs_loop >= minFontSize; fs_loop--) { const attemptResult = attemptRender(d_node, cellW, cellH, fs_loop, false); if (attemptResult.fits) { linesToDraw = attemptResult.lines; currentFontSize = fs_loop; break; } } } // 3. Final fallback: If still no perfect fit found (linesToDraw is empty after attempts 1 & 2), // then apply ellipsis on background rectangle with minFontSize. if (linesToDraw.length === 0 && isTextVisibleInCell) { const finalEllipsisResult = attemptRender(d_node, cellW, cellH, minFontSize, true); linesToDraw = finalEllipsisResult.lines; currentFontSize = minFontSize; } else if (!isTextVisibleInCell) { linesToDraw = []; } // Draw the final text based on the determined lines and font size if (linesToDraw.length > 0) { const totalTextHeight = linesToDraw.length * currentFontSize * lineHeightFactor; const baseX = cellW / 2; const baseY = cellH / 2; // Adjust startY to account for paddingTop in the cell const startY = baseY - totalTextHeight / 2 + (currentFontSize * lineHeightFactor) / 2; const textElement = group .append("text") .attr("fill", proposedTextColor) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") // ADD THIS LINE for vertical centering .style("pointer-events", "none") .style("font-size", `${currentFontSize}px`) // .attr("clip-path", `url(${new URL(`#${clipId}`, location.href)})`); .attr("clip-path", `url(#${clipId})`) linesToDraw.forEach((line, i) => { textElement .append("tspan") .attr("x", baseX) .attr("y", startY + i * currentFontSize * lineHeightFactor) .text(line); }); } }); // --- LOG GROUP D: Final check of the SVG and its contents (after all rendering) --- // These are the most important logs to see the final state of the DOM. console.log("LOG D1: svg variable (final check):", svg); console.log("LOG D2: g.leaf-node elements in document (final check):", svg.selectAll("g.leaf-node")); // Changed from d3.select("svg") console.log("LOG D3: g.parent-group elements in document (final check):", svg.selectAll("g.parent-group")); // Changed from d3.select("svg") // --- END LOG GROUP D --- // --- END: Existing Leaf Node Drawing Logic --- // --- Cleanup the temporary measurement SVG --- if (svgForMeasurement.node() && svgForMeasurement.node().parentNode) { svgForMeasurement.node().parentNode.removeChild(svgForMeasurement.node()); } return svg.node(); }49:T7a3,function createHierarchyForYears(data, options = {}) { const { yearCol = "year", groupCol = "color", nameCol = "country", valueCol = "value", name = "" } = options; const years = [...new Set(data.map((d) => d[yearCol]))]; const groups = d3.groups(data, (d) => d[groupCol]).map((d) => d[0]); let hierarchies = []; // create hierarchy of maximum values const hierarchyMax = { name: `${name} Max.`, children: [] }; for (let group of groups) { const child = { name: group, children: [] }; const subGroup = data.filter((d) => d[groupCol] === group); const uniqueNames = [...new Set(subGroup.map((s) => s[nameCol]))]; for (let itemName of uniqueNames) { const allItems = data.filter((s) => s[nameCol] === itemName); child.children.push({ name: itemName, category: group, value: d3.max(allItems.map((d) => +d[valueCol])), color: allItems[0].color, background: allItems[0].background }); } hierarchyMax.children.push(child); } hierarchies.push(hierarchyMax); // create hierarchies for years for (let year of years) { const sub = data.filter((d) => d[yearCol] === year); const hierarchy = { name: `${name} ${year}`, children: [] }; for (let group of groups) { const child = { name: group, children: [] }; const subGroup = sub.filter((d) => d[groupCol] === group); for (let item of subGroup) { const allItems = data.filter((s) => s[nameCol] === item[nameCol]); child.children.push({ name: item[nameCol], category: group, value: item[valueCol], maxValue: d3.max(allItems.map((d) => +d[valueCol])), color: item.color, background: item.background }); } hierarchy.children.push(child); } hierarchies.push(hierarchy); } return hierarchies; }4a:T9d3,food_data = d3 .tsvParse( `group\tname\tref\tdiet\ttax\tcombi ALCOHOL ALCOHOL 124 123 123 126 Vegetable products Vegetable products 46 84 46 82 Fish products Fish products 96 63 106 70 Composite dishes Potato crisps or sticks 41 40 44 0.01 Composite dishes Other composite dishes 145 96 130 146 Legumes Lentils (dry) 5 28 6 28 Legumes Other legumes 11 31 11 31 Coffee, cocoa, tea Coffee drink, cappuccino 51 45 46 44 Coffee, cocoa, tea Other coffee, cocoa, tea 14 9 16 10 Fruit products Fruit products 50 50 48 55 Dairy products Quark 31 20 25 21 Dairy products Other dairy products 259 206 274 185 Egg products Egg products 15 11 19 16 Products for non-standard diets Products for non-standard diets 3 13 4 14 Juice products Juices 39 69 32 68 Grain products Pretzels 47 70 0.01 0.01 Grain products Biscuits, sweet, wheat wholemeal 29 31 28 36 Grain products Waffles 83 84 81 0.01 Grain products Sticks, salty 38 45 42 49 Grain products Pita bread 37 59 38 65 Grain products Speculaas 36 23 35 23 Grain products Cream cake 65 71 64 62 Grain products Multigrain (not only rye-wheat) bread and rolls 44 65 44 68 Grain products Wheat bread and rolls, white (refined flour) 48 64 49 70 Grain products Rusk, refined flour 21 34 21 37 Grain products Cheese cake 42 0.01 43 0.01 Grain products Dumpling, sweet 42 0.01 41 60 Grain products Brioche type products 44 48 54 47 Grain products Other grain products 323 356 361 394 Meat products Knackwurst-type sausage 45 32 47 32 Meat products Other meat products 221 152 228 141 Sauces Salad dressing 36 42 34 51 Sauces Mayonnaise sauce 47 0.01 46 0.01 Sauces Other sauces 28 30 26 42 Starchy root products Starchy root products 20 18 24 17 Sugar products White sugar 38 35 37 35 Sugar products Liquorice candies 33 29 31 26 Sugar products Jelly candies 28 29 27 28 Sugar products Syrups 32 20 29 19 Sugar products Other sugar products 97 65 112 52 Beverages Beverages 54 20 50 34 Fats & oils Rape seed oil, edible 31 32 29 42 Fats & oils Sunflower seed oil, edible 36 34 33 0.01 Fats & oils Traditional margarine 43 43 42 46 Fats & oils Other fats & oils 60 37 56 78 Nuts, seeds Sunflower seeds 15 34 15 34 Nuts, seeds Other nuts, seeds 22 2 20 3` ) .filter((d) => d.group) .map((r) => { const num = (v) => +String(v).replace(",", "."); return { ...r, ref: +String(r.ref).replace(",", "."), diet: +String(r.diet).replace(",", "."), tax: +String(r.tax).replace(",", "."), combi: +String(r.combi).replace(",", ".") }; });4b:T809,/*color_lookup = Object.fromEntries( [...new Set(food_data.map((d) => d.group))].map((g, i) => [ g, { color: colors[i], background: lightenHexColor(colors[i], 0.8) } ]) )*/ color_lookup = ({ ALCOHOL: { color: "#02B6A5", background: lightenHexColor("#02B6A5", 0.6) }, "Vegetable products": { color: "#548235", background: lightenHexColor("#548235", 0.6) }, "Fish products": { color: "#1e4e79", background: lightenHexColor("#1e4e79", 0.4) }, "Composite dishes": { color: "#595959", background: lightenHexColor("#595959", 0.6) }, "Coffee, cocoa, tea": { color: "#542A00", background: lightenHexColor("#542A00", 0.6) }, "Dairy products": { color: "#3886CC", background: lightenHexColor("#3886CC", 0.4) }, "Fruit products": { color: "#C00000", background: lightenHexColor("#C00000", 0.6) }, "Egg products": { color: "#9DC3E6", background: lightenHexColor("#9DC3E6", 0.6) }, "Products for non-standard diets": { color: "#001E1B", background: lightenHexColor("#001E1B", 0.6) }, "Juice products": { color: "#FF6600", background: lightenHexColor("#FF6600", 0.6) }, "Grain products": { color: "#997427", background: lightenHexColor("#997427", 0.3) }, "Nuts, seeds": { color: "#C24F2A", background: lightenHexColor("#C24F2A", 0.6) }, "Legumes": { color: "#672A17", background: lightenHexColor("#672A17", 0.6) }, "Meat products": { color: "#661427", background: lightenHexColor("#661427", 0.6) }, Sauces: { color: "#82261C", background: lightenHexColor("#82261C", 0.6) }, "Starchy root products": { color: "#F4F850", background: lightenHexColor("#F4F850", 0.6) }, "Sugar products": { color: "#B40085", background: lightenHexColor("#B40085", 0.4) }, Beverages: { color: "#005654", background: lightenHexColor("#005654", 0.6) }, "Fats & oils": { color: "#FAC312", background: lightenHexColor("#FAC312", 0.6) } }) 4c:T4fe,// Helper function to determine if text should be black or white based on background color function getTextColor(bgColor) { if (!bgColor || bgColor === "transparent") { return "#000000"; // Default to black for transparent or undefined backgrounds } let color = bgColor.toLowerCase(); if (color.startsWith("#")) { color = color.slice(1); } if (color.length === 3) { color = color .split("") .map((char) => char + char) .join(""); } if (color.length !== 6) { // Check for named colors or other formats if necessary, or default if ( color === "white" || color === "yellow" || color === "aqua" || color === "lime" ) return "#000000"; if (color === "black" || color === "blue" || color === "maroon") return "#FFFFFF"; return "#000000"; // Default for unknown formats } const r = parseInt(color.substring(0, 2), 16); const g = parseInt(color.substring(2, 4), 16); const b = parseInt(color.substring(4, 6), 16); // Calculate luminance (standard formula for sRGB) const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255; // Threshold can be adjusted (0.5 is common, higher means more colors get black text) return luminance > 0.8 ? "#000000" : "#FFFFFF"; }4d:[] 46:{"id":"3534f78d94498e9b","slug":"revised-treemap-for-joergs-phd-paper","title":"Revised Treemap for Jörgs PHD paper","thumbnail":"20450de323cc48528beb24b489a1909c21688d355cd9ace6b703d4a736f27d9f","access_level":"public","create_time":"$D2026-09-02T16:28:53.099Z","update_time":"$D2026-09-07T15:12:11.084Z","view_time":null,"first_public_time":"$D2026-09-03T09:31:18.900Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"01976a9d9c587391","login":"treemap2","name":"treemap","avatar_url":"https://avatars-next.observableusercontent.com/0f670cdbe5e222e26c62037a3f9966b7e79db38d29eeb1a31a1ec064a695f886","tier":"starter_2024","bio":"","following":false},"version":1456,"publish_version":1456,"role":null,"authored":false,"authors":[{"type":"individual","id":"072cc9572322224d","login":"ekiref","name":"Ekiref","avatar_url":"https://avatars-next.observableusercontent.com/712f650d873eb2067a7aaec3939d8fa6bf1464c616933aeba22a42d6b28981ff","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"01976a9d9c587391","login":"treemap2","name":"treemap","avatar_url":"https://avatars-next.observableusercontent.com/0f670cdbe5e222e26c62037a3f9966b7e79db38d29eeb1a31a1ec064a695f886","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Revised Treemap for Jörgs PHD paper","cells":[{"id":848,"value":"# Revised Treemap for Jörgs PHD paper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":568,"value":" Uses all of the below. Doesn't use anything from later sections (unsure for colors and color-fct though).\n\nStructure:\n- creating the chart with commands right below the chart: this calls **createChart** and **hierarchies**\n \n- **createChart** is the main file for the chart setup, calling **d3.groups (the Array)**, which calls **food_data**.\n- **createChart** also calls **getTextColor**\n \n- **hierarchies** calls **createHierarchiesFoYears** which calls **data** which calls **food_data** and **color_lookup**, the latter calling **lightenHexColors**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1339,"value":"

a) Diet Lancet

\n ${createChart(hierarchies, 1, {\n compareIndex: 0,\n formatValue: value => `${Math.round(value)} kcal`,\n showEllipsis: true,\n outerPaddingLeft: 0,\n outerPaddingTop: 20,\n outerPaddingRight: 0,\n outerPaddingBottom: 0\n })}\n

b) Carbon tax

\n ${createChart(hierarchies, 2, {\n compareIndex: 0,\n formatValue: value => `${Math.round(value)} kcal`,\n showEllipsis: true,\n outerPaddingLeft: 0,\n outerPaddingTop: 20,\n outerPaddingRight: 0,\n outerPaddingBottom: 0\n })}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1352,"value":"$48","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"hierarchiesB = createHierarchyForYears(data, {\n groupCol: \"group\",\n nameCol: \"name\",\n name: \"Food consumption\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"hierarchies = (() => {\n const groups = [...new Set(food_data.map((d) => d.group))];\n\n const bold = d3.scaleOrdinal(\n groups,\n d3.quantize(d3.interpolateSpectral, Math.max(3, groups.length))\n );\n const pale = (g) => d3.interpolateRgb(bold(g), \"#ffffff\")(0.78);\n\n const build = (key, label) => ({\n name: `Food consumption ${label}`,\n children: groups.map((g) => ({\n name: g,\n children: food_data\n .filter((r) => r.group === g)\n .map((r) => ({\n id: `${r.group}|${r.name}`,\n name: r.name,\n category: g,\n value: +r[key],\n color: bold(g),\n background: pale(g)\n }))\n }))\n });\n\n // 0 = ref, 1 = diet, 2 = tax, 3 = combi\n return [\n build(\"ref\", \"Reference\"),\n build(\"diet\", \"Diet Lancet\"),\n build(\"tax\", \"Tax\"),\n build(\"combi\", \"Combined\")\n ];\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data = food_data\n .filter((r) => r.ref > filter && r.diet > filter && r.ctax > filter && r.combi > filter)\n .reduce((arr, r) => {\n arr.push({\n group: r.group,\n name: r.name,\n year: \"ref\",\n value: r.ref,\n color: color_lookup[r.group].color,\n background: color_lookup[r.group].background\n });\n arr.push({\n group: r.group,\n name: r.name,\n year: \"diet\",\n value: r.diet,\n color: color_lookup[r.group].color,\n background: color_lookup[r.group].background\n });\n arr.push({\n group: r.group,\n name: r.name,\n year: \"ctax\",\n value: r.ctax,\n color: color_lookup[r.group].color,\n background: color_lookup[r.group].background\n });\n arr.push({\n group: r.group,\n name: r.name,\n year: \"combi\",\n value: r.combi,\n color: color_lookup[r.group].color,\n background: color_lookup[r.group].background\n });\n return arr;\n }, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"d3.groups(food_data, (d) => d.group)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"function lightenHexColor(hex, amount = 0.9) {\n // Remove the '#' if present\n hex = hex.replace(/^#/, \"\");\n\n // Parse the hex color\n let r = parseInt(hex.substring(0, 2), 16);\n let g = parseInt(hex.substring(2, 4), 16);\n let b = parseInt(hex.substring(4, 6), 16);\n\n // Blend each component with white (255)\n r = Math.round(r + (255 - r) * amount);\n g = Math.round(g + (255 - g) * amount);\n b = Math.round(b + (255 - b) * amount);\n\n // Convert back to hex and return\n const toHex = (c) => c.toString(16).padStart(2, \"0\");\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 47:"$46:body"