Update

Author: manzt

deno.json

@@ -0,0 +1,12 @@
+{
+	"lock": false,
+	"compilerOptions": {
+		"checkJs": true,
+		"lib": ["dom", "dom.iterable", "esnext"]
+	},
+	"lint": {
+		"rules": {
+			"exclude": ["prefer-const"]
+		}
+	}
+}

src/higlass/widget.js

@@ -1,61 +1,35 @@
-import hglib from "https://esm.sh/[email protected]?deps=react@17,react-dom@17,pixi.js@6";
+import * as hglib from "https://esm.sh/[email protected]?deps=react@17,react-dom@17,pixi.js@6";
+import { v4 } from "https://esm.sh/@lukeed/[email protected]";
 
-/**
- * @param {{
- *   xDomain: [number, number],
- *   yDomain: [number, number],
- * }} location
- */
-function toPts({ xDomain, yDomain }) {
-  let [x, xe] = xDomain;
-  let [y, ye] = yDomain;
-  return [x, xe, y, ye];
-}
-
-async function render({ model, el }) {
-  let viewconf = model.get("_viewconf");
-  let options = model.get("_options") ?? {};
-  let api = await hglib.viewer(el, viewconf, options);
-
-  model.on("msg:custom", (msg) => {
-    msg = JSON.parse(msg);
-    let [fn, ...args] = msg;
-    api[fn](...args);
-  });
-
-  if (viewconf.views.length === 1) {
-    api.on("location", (loc) => {
-      model.set("location", toPts(loc));
-      model.save_changes();
-    }, viewconf.views[0].uid);
-  } else {
-    viewconf.views.forEach((view, idx) => {
-      api.on("location", (loc) => {
-        let copy = model.get("location").slice();
-        copy[idx] = toPts(loc);
-        model.set("location", copy);
-        model.save_changes();
-      }, view.uid);
-    });
-  }
-}
-
-export default { render };
-=======
-// import hglib from "https://esm.sh/[email protected]?deps=react@17,react-dom@17,pixi.js@6";
-import * as hglib from "http://localhost:5173/app/scripts/hglib.jsx";
-import { v4 } from "https://esm.sh/@lukeed/uuid@2";
+/** @import { HGC, PluginDataFetcherConstructor } from "./types.ts" */
 
 // Make sure plugins are registered and enabled
-window.higlassDataFetchersByType = window.higlassDataFetchersByType || {};
+window.higlassDataFetchersByType = window.higlassDataFetchersByType ||
+  {};
 
+/**
+ * Create a unique identifier.
+ * @returns {string}
+ */
 function uid() {
   return v4().split("-")[0];
 }
 
+/**
+ * Make an assertion.
+ *
+ * @param {unknown} expression - The expression to test.
+ * @param {string=} msg - The optional message to display if the assertion fails.
+ * @returns {asserts expression}
+ * @throws an {@link Error} if `expression` is not truthy.
+ */
+function assert(expression, msg = "") {
+  if (!expression) throw new Error(msg);
+}
+
 /**
  * @template T
- * @param {import("npm:@anyiwdget/types").AnyModel} model
+ * @param {import("npm:@anywidget/types").AnyModel} model
  * @param {unknown} payload
  * @param {{ timeout?: number }} [options]
  * @returns {Promise<{ data: T, buffers: DataView[] }>}
@@ -83,10 +57,26 @@ function send(model, payload, { timeout = 3000 } = {}) {
 }
 
 /**
- * Detects server { server: 'jupyter' }, and creates a custom data entry for it.
+ * Transforms the original view config into tracks recognized by the custom data fetcher.
+ *
+ * Finds tracks with `server: 'jupyter'`, removes the key, and adds a `data` object
+ * with `type: dataFetcherId` and the track’s `tilesetUid`.
+ *
+ * @param {Record<string, unknown>} viewConfig - The original view configuration.
+ * @param {string} dataFetcherId - The identifier for Jupyter-based data sources.
+ * @returns {Record<string, unknown>} A modified deep copy of the view config.
+ *
  * @example
- * resolveJupyterServers({ views: [{ tracks: { top: [{ server: 'jupyter', tilesetUid: 'abc' }] } }] }, 'jupyter-123')
- * // { views: [{ tracks: { top: [{ tilesetUid: 'abc', data: { type: 'jupyter-123', tilesetUid: 'abc' } }] } }] }
+ * ```js
+ * resolveJupyterServers(
+ *   { views: [{ tracks: { top: [{ server: 'jupyter', tilesetUid: 'abc' }] } }] },
+ *   'jupyter-123'
+ * );
+ * // Returns:
+ * // {
+ * //   views: [{ tracks: { top: [{ tilesetUid: 'abc', data: { type: 'jupyter-123', tilesetUid: 'abc' } }] } }]
+ * // }
+ * ```
  */
 function resolveJupyterServers(viewConfig, dataFetcherId) {
   let copy = JSON.parse(JSON.stringify(viewConfig));
@@ -103,22 +93,26 @@ function resolveJupyterServers(viewConfig, dataFetcherId) {
   return copy;
 }
 
-function assert(condition, message) {
-  if (!condition) throw new Error(message);
-}
-
+/**
+ * @param {import("npm:@anywidget/types").AnyModel} model
+ * @returns{PluginDataFetcherConstructor}
+ */
 function createDataFetcherForModel(model) {
-  return function createDataFetcher(hgc, dataConfig, pubSub) {
+  /**
+   * @param {HGC} hgc
+   * @param {Record<string, unknown>} dataConfig
+   * @param {unknown} pubSub
+   */
+  const DataFetcher = function createDataFetcher(hgc, dataConfig, pubSub) {
     let config = { ...dataConfig, server: "jupyter" };
     return new hgc.dataFetchers.DataFetcher(config, pubSub, {
-      async fetchTiles({ id, server, tileIds }) {
+      async fetchTiles({ tileIds }) {
         let { data } = await send(model, { type: "tiles", tileIds });
         let result = hgc.services.tileResponseToData(data, "jupyter", tileIds);
         return result;
       },
       async fetchTilesetInfo({ server, tilesetUid }) {
         assert(server === "jupyter", "must be a jupyter server");
-        let url = `${server}-${tilesetUid}`;
         let { data } = await send(model, { type: "tileset_info", tilesetUid });
         return data;
       },
@@ -127,26 +121,85 @@ function createDataFetcherForModel(model) {
       },
     });
   };
+
+  return /** @type{any} */ (DataFetcher);
+}
+
+/**
+ * @param {{
+ *   xDomain: [number, number],
+ *   yDomain: [number, number],
+ * }} location
+ */
+function toPts({ xDomain, yDomain }) {
+  let [x, xe] = xDomain;
+  let [y, ye] = yDomain;
+  return [x, xe, y, ye];
+}
+
+/**
+ * @param {HTMLElement} el
+ * @returns {() => void} unlisten
+ */
+function addEventListenersTo(el) {
+  let controller = new AbortController();
+
+  // prevent right click events from bubbling up to Jupyter/JupyterLab
+  el.addEventListener("contextmenu", (event) => event.stopPropagation(), {
+    signal: controller.signal,
+  });
+
+  return () => controller.abort();
 }
 
 export default () => {
   let id = `jupyter-${uid()}`;
   return {
+    /** @type{import("npm:@anywidget/[email protected]").Initialize<{ _ts: string }>} */
     async initialize({ model }) {
       let tsId = model.get("_ts");
       let tsModel = await model.widget_manager.get_model(
-        tsId.slice("IPY_MODEL_".length)
+        tsId.slice("IPY_MODEL_".length),
       );
       window.higlassDataFetchersByType[tsId] = {
         name: id,
         dataFetcher: createDataFetcherForModel(tsModel),
       };
     },
+    /** @type{import("npm:@anywidget/[email protected]").Render} */
     async render({ model, el }) {
+      /** @type {{ views: Array<{ uid: string }> }} */
       let viewconf = model.get("_viewconf");
       let options = model.get("_options") ?? {};
       let resolved = resolveJupyterServers(viewconf, model.get("_ts"));
       let api = await hglib.viewer(el, resolved, options);
+
+      let unlisten = addEventListenersTo(el);
+
+      model.on("msg:custom", (msg) => {
+        msg = JSON.parse(msg);
+        let [fn, ...args] = msg;
+        api[fn](...args);
+      });
+
+      if (viewconf.views.length === 1) {
+        api.on("location", (loc) => {
+          model.set("location", toPts(loc));
+          model.save_changes();
+        }, viewconf.views[0].uid);
+      } else {
+        viewconf.views.forEach((view, idx) => {
+          api.on("location", (loc) => {
+            let copy = model.get("location").slice();
+            copy[idx] = toPts(loc);
+            model.set("location", copy);
+            model.save_changes();
+          }, view.uid);
+        });
+      }
+      return () => {
+        unlisten();
+      };
     },
   };
 };