bryangingechen · July 9, 2021 04:50
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css">
 <body>
 <script type="module">

 import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
 import define from "https://api.observablehq.com/d/407c2b018c9130eb.js?v=3";

 const runtime = new Runtime();
 const main = runtime.module(define, Inspector.into(document.getElementById("container")));

 const button = document.getElementById("button");

 // WARNING: the following is a HACK.
 // Future versions of the Observable runtime might not expose the
 // implementation details we're using to users or
 // make other changes which will break the following code!!!

 // First get the runtime variable corresponding to the cell we want to re-run
 const cell = main._scope.get("data");
 // Now get the array of input cell names and the definition function
 const inputs = cell._inputs.map(({_name}) => _name);
 const def = cell._definition;

 // Now we can use module.redefine to trigger a recomputation:
 button.onclick = () => {
  main.redefine("data", inputs, def);
 };

 // The alternative to using the hack is to hardcode in the inputs and definition
 // following what you see in the JS file for your notebook at https://api.observablehq.com
 /*
 button.onclick = () => {
  main.redefine("data", ["Promises"], async function*(Promises)
  {
    yield { text: "Waiting", color: "yellow" };
    await Promises.delay(2000);
    yield { text: "Done", color: "green" };
  });
 };
 */
 </script>

 <div id="container"></div>

 <hr>
 <button id="button">Click to recompute "data"</button>
 </body>
 </html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css">
	<body>
	<script type="module">

	import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
	import define from "https://api.observablehq.com/d/407c2b018c9130eb.js?v=3";

	const runtime = new Runtime();
	const main = runtime.module(define, Inspector.into(document.getElementById("container")));

	const button = document.getElementById("button");

	// WARNING: the following is a HACK.
	// Future versions of the Observable runtime might not expose the
	// implementation details we're using to users or
	// make other changes which will break the following code!!!

	// First get the runtime variable corresponding to the cell we want to re-run
	const cell = main._scope.get("data");
	// Now get the array of input cell names and the definition function
	const inputs = cell._inputs.map(({_name}) => _name);
	const def = cell._definition;

	// Now we can use module.redefine to trigger a recomputation:
	button.onclick = () => {
	main.redefine("data", inputs, def);
	};

	// The alternative to using the hack is to hardcode in the inputs and definition
	// following what you see in the JS file for your notebook at https://api.observablehq.com
	/*
	button.onclick = () => {
	main.redefine("data", ["Promises"], async function*(Promises)
	{
	yield { text: "Waiting", color: "yellow" };
	await Promises.delay(2000);
	yield { text: "Done", color: "green" };
	});
	};
	*/
	</script>

	<div id="container"></div>

	<hr>
	<button id="button">Click to recompute "data"</button>
	</body>
	</html>