async () => { // set testFn() function on globalThis, so you html onlclick can access it globalThis.testFn = () => { document.getElementById('demo').innerHTML = "Hello?" }; const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm"); globalThis.d3 = d3; globalThis.d3Fn = () => { d3.select('#viz').append('svg') .append('rect') .attr('width', 50) .attr('height', 50) .attr('fill', 'black') .on('mouseover', function(){d3.select(this).attr('fill', 'red')}) .on('mouseout', function(){d3.select(this).attr('fill', 'black')}); }; globalThis.testFn_out = (val,radio_c) => { // document.getElementById('demo').innerHTML = val console.log(val); // globalThis.d3Fn(); return([val,radio_c]); }; // Is this function well commented??? // globalThis.testFn_out_json = (val) => { // document.getElementById('demo2').innerHTML = JSON.stringify(val); // console.log(val); // globalThis.d3Fn(); // return(['string', {}]) // // return(JSON.stringify(val), JSON.stringify(val) ); // }; globalThis.testFn_out_json = (data) => { const idMapping = data.reduce((acc, el, i) => { acc[el.id] = i; return acc; }, {}); let root; data.forEach(el => { // Handle the root element if (el.parentId === null) { root = el; return; } // Use our mapping to locate the parent element in our data array const parentEl = data[idMapping[el.parentId]]; // Add our current el to its parent's `children` array parentEl.children = [...(parentEl.children || []), el]; }); // console.log(Tree(root)); // document.getElementById('d3_beam_search').innerHTML = Tree(root) d3.select('#d3_beam_search').html(""); d3.select('#d3_beam_search').append(function(){return Tree(root);}); // $('#d3_beam_search').html(Tree(root)) ; return(['string', {}]) } // Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/tree function Tree(data, { // data is either tabular (array of objects) or hierarchy (nested objects) path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes id = Array.isArray(data) ? d => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string) parentId = Array.isArray(data) ? d => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier children, // if hierarchical data, given a d in data, returns its children tree = d3.tree, // layout algorithm (typically d3.tree or d3.cluster) sort, // how to sort nodes prior to layout (e.g., (a, b) => d3.descending(a.height, b.height)) label = d => d.name, // given a node d, returns the display name title = d => d.name, // given a node d, returns its hover text link , // given a node d, its link (if any) linkTarget = "_blank", // the target attribute for links (if any) width = 800, // outer width, in pixels height, // outer height, in pixels r = 3, // radius of nodes padding = 1, // horizontal padding for first and last column fill = "#999", // fill for nodes fillOpacity, // fill opacity for nodes stroke = "#555", // stroke for links strokeWidth = 2, // stroke width for links strokeOpacity = 0.4, // stroke opacity for links strokeLinejoin, // stroke line join for links strokeLinecap, // stroke line cap for links halo = "#fff", // color of label halo haloWidth = 3, // padding around the labels curve = d3.curveBumpX, // curve for the link } = {}) { // If id and parentId options are specified, or the path option, use d3.stratify // to convert tabular data to a hierarchy; otherwise we assume that the data is // specified as an object {children} with nested objects (a.k.a. the “flare.json” // format), and use d3.hierarchy. const root = path != null ? d3.stratify().path(path)(data) : id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data) : d3.hierarchy(data, children); // Sort the nodes. if (sort != null) root.sort(sort); // Compute labels and titles. const descendants = root.descendants(); const L = label == null ? null : descendants.map(d => label(d.data, d)); // Compute the layout. const descWidth = 10; // console.log('descendants', descendants); const realWidth = descWidth * descendants.length const totalWidth = (realWidth > width) ? realWidth : width; const dx = 25; const dy = totalWidth / (root.height + padding); tree().nodeSize([dx, dy])(root); // Center the tree. let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); // Compute the default height. if (height === undefined) height = x1 - x0 + dx * 2; // Use the required curve if (typeof curve !== "function") throw new Error(`Unsupported curve`); const parent = d3.create("div"); const body = parent.append("div") .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); const svg = body.append("svg") .attr("viewBox", [-dy * padding / 2, x0 - dx, totalWidth, height]) .attr("width", totalWidth) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 12); svg.append("g") .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .selectAll("path") .data(root.links()) .join("path") // .attr("stroke", d => d.prob > 0.5 ? 'red' : 'blue' ) // .attr("fill", "red") .attr("d", d3.link(curve) .x(d => d.y) .y(d => d.x)); const node = svg.append("g") .selectAll("a") .data(root.descendants()) .join("a") .attr("xlink:href", link == null ? null : d => link(d.data, d)) .attr("target", link == null ? null : linkTarget) .attr("transform", d => `translate(${d.y},${d.x})`); node.append("circle") .attr("fill", d => d.children ? stroke : fill) .attr("r", r); title = d => (d.name + ( d.prob)); if (title != null) node.append("title") .text(d => title(d.data, d)); if (L) node.append("text") .attr("dy", "0.32em") .attr("x", d => d.children ? -6 : 6) .attr("text-anchor", d => d.children ? "end" : "start") .attr("paint-order", "stroke") .attr("stroke", 'white') .attr("fill", d => d.data.prob == 1 ? ('red') : ('black') ) .attr("stroke-width", haloWidth) .text((d, i) => L[i]); body.node().scrollBy(totalWidth, 0); return svg.node(); } } // define('viz', ['d3'], function (d3) { // function draw(container) { // d3.select(container).append("svg").append('rect').attr('id', 'viz_rect').attr('width', 50).attr('height', 50); // } // return draw; // }); // console.log("HERE!") // element.append('Loaded 😄 '); // variable2='hello'; // draw('.gradio-container') // function transform_beamsearch(data){ // const idMapping = data.reduce((acc, el, i) => { // acc[el.id] = i; // return acc; // }, {}); // let root; // data.forEach(el => { // // Handle the root element // if (el.parentId === null) { // root = el; // return; // } // // Use our mapping to locate the parent element in our data array // const parentEl = data[idMapping[el.parentId]]; // // Add our current el to its parent's `children` array // parentEl.children = [...(parentEl.children || []), el]; // }); // // console.log(Tree(root, { label: d => d.name,})); // console.log(root); // // $('#d3_beam_search').html(Tree(root)) ; // return root; // } // var gradioContainer = document.querySelector('.gradio-container'); // gradioContainer.insertBefore(container, gradioContainer.firstChild);