// @ts-check
import { hierarchy, tree as treeLayout } from "./vendor/d3-hierarchy.js";
/** @param {{ label: string, path: string, children: any[] }} tree */
export function renderHtml(tree) {
const createHierarchy = /** @type {any} */ (hierarchy);
const createTreeLayout = /** @type {any} */ (treeLayout);
const layout = createTreeLayout().nodeSize([128, 84])(createHierarchy(tree));
const nodes = /** @type {any[]} */ (layout.descendants());
const links = /** @type {any[]} */ (layout.links());
const minX = Math.min(...nodes.map((node) => node.x));
const maxX = Math.max(...nodes.map((node) => node.x));
const maxY = Math.max(...nodes.map((node) => node.y));
const side = 72;
const top = 20;
const bottom = 48;
const viewWidth = Math.max(300, maxX - minX + side * 2);
const viewHeight = Math.max(160, maxY + top + bottom);
const paths = links.map(({ source, target }) =>
`<path d="M${source.x},${source.y} C${source.x},${(source.y + target.y) / 2} ${target.x},${(source.y + target.y) / 2} ${target.x},${target.y}"/>`
).join("");
const nodeElements = nodes.map((node) => {
const data = /** @type {{ label: string, path: string }} */ (node.data);
const webPath = data.path;
const className = node.depth === 0 ? "node root" : "node";
return `<a class="${className}" href="${escapeHtml(webPath)}" target="_top" aria-label="Open ${escapeHtml(data.label)}"><circle cx="${node.x}" cy="${node.y}" r="7"/><text x="${node.x}" y="${node.y + 25}" text-anchor="middle">${escapeHtml(data.label)}</text></a>`;
}).join("");
return `<!doctype html><meta charset="utf-8"><title>Wimble invitation network</title><style>:root{color:#191919;background:transparent;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}*{box-sizing:border-box}body{margin:0;padding:16px}.scroll{width:100%;overflow-x:auto;overflow-y:hidden}svg{display:block;max-width:none}.links path{fill:none;stroke:#b8b8b8;stroke-width:1.25}.node{color:#191919;text-decoration:none;transition:opacity .12s ease}.node:hover{opacity:.58}.node circle{fill:#fff;stroke:#191919;stroke-width:1.5}.node text{fill:currentColor;font-size:11px}.root circle{fill:#191919}.root text{font-weight:700}</style><div class="scroll"><svg class="network-tree" width="${Math.max(320, viewWidth)}" height="${viewHeight}" viewBox="${minX - side} ${-top} ${viewWidth} ${viewHeight}" role="img" aria-label="Wimble invitation network"><g class="links" aria-hidden="true">${paths}</g><g>${nodeElements}</g></svg></div>`;
}
/** @param {string} value */
function escapeHtml(value) {
return value.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">").replaceAll('"', """);
}