Create anywidget

.gitignore

@@ -1,2 +1,6 @@
 node_modules/
 dist/
+__pycache__
+.ipynb_checkpoints/
+
+/src/eigen_tour/static/

README.md

@@ -4,11 +4,24 @@ visualizing (normalized) eigenvectors with the [Grand Tour](https://doi.org/10.1
 
 ## development
 
+Create a python dev envrionment
+
+```sh
+hatch shell
+```
+
+Run the JavaScript development server:
 ```
 pnpm install
 pnpm dev
 ```
 
+Open JupyterLab:
+
+```sh
+ANYWIDGET_HMR=1 juptyer lab
+```
+
 ## data
 
 Preparing a dataset for the visualization requires serializing a table to [Arrow IPC Format](https://arrow.apache.org/docs/python/ipc.html).

src/Overlay.ts → js/Overlay.ts

@@ -28,7 +28,7 @@ export class Overlay {
 			.attr("min", renderer.epochs[0])
 			.attr("max", renderer.epochs[renderer.epochs.length - 1])
 			.attr("value", renderer.epochIndex)
-			.on("input", function () {
+			.on("input", function() {
 				let value = d3.select(this).property("value");
 				renderer.shouldAutoNextEpoch = false;
 				renderer.setEpochIndex(parseInt(value));
@@ -42,15 +42,15 @@ export class Overlay {
 			.attr(
 				"class",
 				"play-button tooltip fa " +
-					(renderer.shouldAutoNextEpoch ? "fa-pause" : "fa-play"),
+				(renderer.shouldAutoNextEpoch ? "fa-pause" : "fa-play"),
 			)
-			.on("mouseover", function () {
+			.on("mouseover", function() {
 				d3.select(this).style("opacity", 1);
 			})
-			.on("mouseout", function () {
+			.on("mouseout", function() {
 				d3.select(this).style("opacity", 0.7);
 			})
-			.on("click", function () {
+			.on("click", function() {
 				renderer.shouldAutoNextEpoch = !renderer.shouldAutoNextEpoch;
 				if (renderer.shouldAutoNextEpoch) {
 					d3.select(this).attr("class", "tooltip play-button fa fa-pause");
@@ -72,13 +72,13 @@ export class Overlay {
 		this.fullScreenButton = this.figure
 			.insert("i", ":first-child")
 			.attr("class", "tooltip teaser-fullscreenButton fas fa-expand-arrows-alt")
-			.on("mouseover", function () {
+			.on("mouseover", function() {
 				d3.select(this).style("opacity", 0.7);
 			})
-			.on("mouseout", function () {
+			.on("mouseout", function() {
 				d3.select(this).style("opacity", renderer.isFullScreen ? 0.7 : 0.3);
 			})
-			.on("click", function () {
+			.on("click", function() {
 				renderer.setFullScreen(!renderer.isFullScreen);
 				d3.select(this).style("opacity", renderer.isFullScreen ? 0.7 : 0.3);
 			});
@@ -93,10 +93,10 @@ export class Overlay {
 			.attr("width", 32)
 			.attr("height", 32)
 			.style("opacity", renderer.shouldPlayGrandTour ? 0.7 : 0.3)
-			.on("mouseover", function () {
+			.on("mouseover", function() {
 				d3.select(this).style("opacity", 0.7);
 			})
-			.on("mouseout", function () {
+			.on("mouseout", function() {
 				d3.select(this).style(
 					"opacity",
 					renderer.shouldPlayGrandTour ? 0.7 : 0.3,
@@ -108,7 +108,7 @@ export class Overlay {
 			.text("Pause Grand Tour");
 
 		this.grandtourButton
-			.on("click", function () {
+			.on("click", function() {
 				renderer.shouldPlayGrandTour = !renderer.shouldPlayGrandTour;
 				renderer.shouldCentralizeOrigin = renderer.shouldPlayGrandTour;
 
@@ -136,7 +136,7 @@ export class Overlay {
 			.attr("class", "overlay")
 			.attr("width", this.width)
 			.attr("height", this.height)
-			.on("dblclick", function () {
+			.on("dblclick", function() {
 				// renderer.shouldPlayGrandTour = !renderer.shouldPlayGrandTour;
 			})
 			.on("mousemove", () => {
@@ -248,7 +248,7 @@ export class Overlay {
 				renderer.shouldPlayGrandTour = false;
 				renderer.isDragging = true;
 			})
-			.on("drag", function (event) {
+			.on("drag", function(event) {
 				if (!renderer.gt) return;
 				let dx = renderer.sx.invert(event.dx) - renderer.sx.invert(0);
 				let dy = renderer.sy.invert(event.dy) - renderer.sy.invert(0);
@@ -260,7 +260,7 @@ export class Overlay {
 				renderer.gt.setMatrix(matrix);
 				self.redrawAxis();
 			})
-			.on("end", function () {
+			.on("end", function() {
 				renderer.isDragging = false;
 				renderer.shouldPlayGrandTour = renderer.shouldPlayGrandTourPrev ??
 					false;
@@ -284,7 +284,7 @@ export class Overlay {
 	redrawAxis() {
 		if (this.renderer.gt === undefined) return;
 		let { ndim = 10 } = this.renderer.dataObj ?? {};
-		let identity = Array.from({ length: ndim  }, (_, i) => {
+		let identity = Array.from({ length: ndim }, (_, i) => {
 			return Array.from({ length: ndim }, (_, j) => i === j ? 1 : 0)
 		})
 		let handlePos = this.renderer.gt.project(identity);

src/utils.ts → js/utils.ts

@@ -1,6 +1,5 @@
 import * as d3 from "d3";
 import * as math from "mathjs";
-import numeric from "numeric";
 
 import type { Scale } from "./types";
 
@@ -435,3 +434,14 @@ export function zip<A, B>(a: A[], b: B[]): [A, B][] {
 	}
 	return out;
 }
+
+export function loadScript(url: string): Promise<void> {
+	return new Promise((resolve, reject) => {
+		let script = document.createElement("script");
+		script.type = "text/javascript";
+		script.src = url;
+		script.onload = () => resolve();
+		script.onerror = (err) => reject(err);
+		document.head.appendChild(script);
+	});
+}

styles/style.css → js/widget.css

@@ -1,4 +1,3 @@
-
 d-title p{
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
 }
@@ -334,7 +333,6 @@ canvas.smallmultiple0{
 }
 
 
-
 .overlay{
     position: absolute;
 }
@@ -488,3 +486,4 @@ figcaption > span:before{
   background: white;
   opacity: 0.8;
 }
+

js/widget.ts

@@ -0,0 +1,49 @@
+import type { RenderProps } from "@anywidget/types";
+
+import { Renderer } from "./Renderer";
+import * as utils from "./utils";
+import fs from "./shaders/teaser_fragment.glsl";
+import vs from "./shaders/teaser_vertex.glsl";
+
+import "./widget.css";
+
+interface Model {
+	data: DataView
+}
+
+const template = `<d-figure class="teaser">
+	<canvas id="teaser"></canvas>
+</d-figure>
+`
+
+export default {
+	async render({ model, el }: RenderProps<Model>) {
+		el.innerHTML = template;
+		let canvas = el.querySelector("canvas")!;
+		console.log("initGL");
+		let { gl, program } = utils.initGL(canvas, fs, vs);
+		let renderer = new Renderer(gl, program);
+		renderer.overlay.fullScreenButton.style("top", "18px");
+		renderer.overlay.epochSlider.style("top", "calc(100% - 28px)");
+		renderer.overlay.playButton.style("top", "calc(100% - 34px)");
+		renderer.overlay.grandtourButton.style("top", "calc(100% - 34px)");
+
+		console.log("model", model);
+		{
+			// load the data
+			let clearBanner = utils.createLoadingBanner(renderer.overlay.figure);
+			console.log("loading data");
+			await renderer.initData(model.get("data").buffer);
+			console.log("data loaded");
+			clearBanner();
+		}
+
+		function onResize() {
+			renderer.setFullScreen(renderer.isFullScreen);
+		}
+		window.addEventListener("resize", onResize);
+		return () => {
+			window.removeEventListener("resize", onResize);
+		}
+	}
+}

package.json

@@ -2,15 +2,14 @@
 	"name": "eigen-tour",
 	"version": "0.0.0",
 	"scripts": {
-		"dev": "vite --port 3000",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "tsc --noEmit",
+		"dev": "npm run build -- --sourcemap=inline --watch",
+		"build": "esbuild js/widget.ts --minify --format=esm --bundle --outdir=src/eigen_tour/static",
 		"fmt": "deno fmt --ignore=dist,node_modules --options-use-tabs"
 	},
 	"author": "Trevor Manz",
 	"license": "MIT",
 	"dependencies": {
+		"@anywidget/types": "^0.1.5",
 		"@types/d3": "^7.4.0",
 		"@types/numeric": "^1.2.2",
 		"apache-arrow": "^9.0.0",
@@ -20,7 +19,7 @@
 		"numeric": "^1.2.6"
 	},
 	"devDependencies": {
-		"typescript": "^4.7.4",
-		"vite": "^3.0.4"
+		"esbuild": "^0.20.1",
+		"typescript": "^5.3.3"
 	}
 }