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) => {
		console.log(data);
		data_beam = data[0]; 
		data_probs = data[1]; 

		const idMapping = data_beam.reduce((acc, el, i) => {
		acc[el.id] = i;
		return acc;
		}, {});

		let root;
		data_beam.forEach(el => {
		// Handle the root element
		if (el.parentId === null) {
			root = el;
			return;
		}
		// Use our mapping to locate the parent element in our data_beam array
		const parentEl = data_beam[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);});

		//probabilities; 
		// 
		d3.select('#d3_text_grid').html("");
		d3.select('#d3_text_grid').append(function(){return  TextGrid(data_probs);});
		// $('#d3_text_grid').html(TextGrid(data)) ; 

		
		// $('#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();
  }

  function TextGrid(data, div_name, {
	width = 640, // outer width, in pixels
	height , // outer height, in pixels
	r = 3, // radius of nodes
	padding = 1, // horizontal padding for first and last column
	// text = d => d[2],
} = {}){
	// console.log("TextGrid", data); 

	// Compute the layout.
	const dx = 10;
	const dy = 10;  //width / (root.height + padding);
	
	const marginTop = 20;
	const marginRight = 20;
	const marginBottom = 30;
	const marginLeft = 30;

	// Center the tree.
	let x0 = Infinity;
	let x1 = -x0;
	topk = 10; 
	word_length = 20;
	const rectWidth = 60; 
	const rectTotal = 70; 

	wval = 0
	
	const realWidth = rectTotal * data.length
	const totalWidth = (realWidth > width) ? realWidth : width;
	// 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;
	if (height === undefined) height = topk * word_length + 10;

	const parent = d3.create("div");

	// parent.append("svg")
    //   .attr("width", width)
    //   .attr("height", height)
    //   .style("position", "absolute")
    //   .style("pointer-events", "none")
    //   .style("z-index", 1);


	// const svg = d3.create("svg")
	// // svg = parent.append("svg")
	// 	.attr("viewBox", [-dy * padding / 2, x0 - dx, 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", 10);

	// div.data([1, 2, 4, 8, 16, 32], d => d);
	// div.enter().append("div").text(d => d);

	const body = parent.append("div")
	.style("overflow-x", "scroll")
	.style("-webkit-overflow-scrolling", "touch");

	const svg = body.append("svg")
		.attr("width", totalWidth)
		.attr("height", height)
		.style("display", "block")
		.attr("font-family", "sans-serif")
		.attr("font-size", 10);


		data.forEach(words_list => {
			// console.log(wval, words_list); 
			words = words_list[2]; // {'t': words_list[2], 'p': words_list[1]}; 
			scores =  words_list[1];
			words_score = words.map( (x,i) => {return {t: x, p: scores[i]}})
			// console.log(words_score); 
			// svg.selectAll("text").enter()
			// 	.data(words)
			// 	.join("text")
			// 	.text((d,i) => (d))
			// 	.attr("x", wval) 
			// 	.attr("y", ((d,i) => (20 + i*20)))

			var probs = svg.selectAll("text").enter()
				.data(words_score).join('g');
	

	
			  probs.append("rect")
				// .data(words)
				.attr("x", wval) 
				.attr("y", ((d,i) => ( 10+ i*20)))
				.attr('width', rectWidth)
				.attr('height', 15)
				.attr("color", 'gray')
				.attr("fill", "gray")
				// .attr("fill-opacity", "0.2")
				.attr("fill-opacity", (d) => (d.p))
				.attr("stroke-opacity", 0.8)
				.append("svg:title")
				.text(function(d){return d.t+":"+d.p;}); 


			probs.append("text")
				// .data(words)
				.text((d,i) => (d.t))
				.attr("x", wval) 
				.attr("y", ((d,i) => (20 + i*20)))
				// .attr("fill", 'white')
				.attr("font-weight", 700); 

			wval = wval + rectTotal;
			});


	body.node().scrollBy(totalWidth, 0);
	// return svg.node();
	return parent.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);