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

demo.ipynb

@@ -0,0 +1,116 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "bcca211d-f7a3-416d-911d-c4fa72c39836",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%load_ext autoreload\n",
+    "%autoreload 2"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0b2b2bb3-f576-4080-a3f9-ff537fe2d62c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%%js\n",
+    "window.global = {};"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d056a52d-8e1c-4715-b963-1ebbcbabaf88",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%%html\n",
+    "<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.2.0/css/all.css\">\n",
+    "<link rel=\"stylesheet\" media=\"screen and (max-width: 1024px)\" href=\"/styles/small-screen.css\">\n",
+    "<script src=\"https://distill.pub/template.v2.js\"></script>\n",
+    "\n",
+    "<script src=\"https://unpkg.com/numeric@1.2.6/numeric-1.2.6.js\"></script>"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a6d50740-1061-42ff-9fd1-18f234f5cab0",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from eigen_tour import Widget\n",
+    "import pathlib"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "261450a4-baff-404f-bbf2-c17071ea42c4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "data = pathlib.Path(\"data/eigs.arrow\").read_bytes()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "9653616e-a1c3-4b5c-a585-84c85a33172b",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Widget(data=data)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "297f032e-8f93-46b8-933c-6b0a5753a1c1",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "25640dcd-bdbb-49e6-9c13-400f3ba2ee90",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.1"
+  },
+  "widgets": {
+   "application/vnd.jupyter.widget-state+json": {
+    "state": {},
+    "version_major": 2,
+    "version_minor": 0
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

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"
 	}
 }