plotsjs.js

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);