refactor(frontend): Custom data fetcher setup (#179)

* Disable deno no-window error

* Refactor data fetcher registration

* Update examples

* Registration

* Add linting and typechecking with deno

* cleanup notebook

Author: manzt

.github/workflows/ci.yml

@@ -34,6 +34,29 @@ jobs:
         env:
           UV_PYTHON: ${{ matrix.python-version }}
 
+  LintJavaScript:
+    name: JavaScript / Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.x
+      - run: |
+          deno fmt --check
+          deno lint
+
+  TypecheckJavaScript:
+    name: JavaScript / Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.x
+      - run: |
+          deno check src/higlass/widget.js
+
   Release:
     needs: [Lint, Test]
     runs-on: ubuntu-latest

deno.json

@@ -6,7 +6,7 @@
   },
   "lint": {
     "rules": {
-      "exclude": ["prefer-const"]
+      "exclude": ["prefer-const", "no-window"]
     }
   },
   "fmt": {

examples/JupyterServer.ipynb

@@ -19,8 +19,8 @@
    "source": [
     "import higlass as hg\n",
     "\n",
-    "ts = hg.cooler(\"./test.mcool\")  # local tileset\n",
-    "hg.view(ts.track(\"heatmap\"), width=6)"
+    "ts1 = hg.cooler(\"./test.mcool\")  # local tileset\n",
+    "hg.view(ts1.track(\"heatmap\"), width=6)"
    ]
   },
   {
@@ -47,8 +47,8 @@
     "        return tileset_info(self.path)\n",
     "\n",
     "\n",
-    "ts = MyCustomCoolerTileset(\"test.mcool\")\n",
-    "hg.view(ts.track())"
+    "ts2 = MyCustomCoolerTileset(\"test.mcool\")\n",
+    "hg.view(ts2.track())"
    ]
   },
   {

examples/Plugin.ipynb

@@ -123,7 +123,7 @@
     "\n",
     "This can seem a bit verbose, but supplying the type parameter explicitly is only necessary when deserializing an unknown config, e.g.\n",
     "\n",
-    "```python\n",
+    "```py\n",
     "hg.Viewconf.parse_file('./pileup-example.json') # error\n",
     "hg.Viewconf[PileupTrack].parse_file('./pileup-example.json') # works!\n",
     "```\n",
@@ -237,12 +237,12 @@
    "source": [
     "from typing import Optional\n",
     "\n",
-    "from pydantic import BaseModel, Extra\n",
+    "from pydantic import BaseModel\n",
     "\n",
     "\n",
     "class SeqeuenceTrackData(BaseModel):\n",
     "    class Config:\n",
-    "        extra = Extra.forbid\n",
+    "        extra = \"forbid\"\n",
     "\n",
     "    type: Literal[\"fasta\"]\n",
     "    fastaUrl: str\n",
@@ -283,7 +283,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "track.data.json()"
+    "track.data.model_dump_json()"
    ]
   },
   {
@@ -293,7 +293,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "track.data.dict()"
+    "track.data.model_dump()"
    ]
   },
   {

src/higlass/types.ts

@@ -38,7 +38,7 @@ type TileSource<T> = {
   registerTileset: (request: RegisterTilesetRequest) => Promise<Response>;
 };
 
-type DataFetcher = {
+export type DataFetcher = {
   // Not available at runtime! (just used to mark the type for typescript)
   _tag: "DataFetcher";
 };

src/higlass/widget.js

@@ -1,11 +1,9 @@
 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]";
 
-/** @import { HGC, PluginDataFetcherConstructor, GenomicLocation, Viewconf } from "./types.ts" */
+/** @import { HGC, PluginDataFetcherConstructor, GenomicLocation, Viewconf, DataFetcher} from "./types.ts" */
 
-// Make sure plugins are registered and enabled
-window.higlassDataFetchersByType = window.higlassDataFetchersByType ||
-  {};
+const NAME = "jupyter";
 
 /**
  * @param {string} href
@@ -47,7 +45,8 @@ async function requireScripts(pluginUrls) {
     // @ts-expect-error - not on the window
     requirejs: window.requirejs,
   };
-  for (const field of Object.keys(backup)) {
+  for (let field of Object.keys(backup)) {
+    // @ts-expect-error - not on the window
     window[field] = undefined;
   }
 
@@ -170,10 +169,10 @@ function resolveJupyterServers(viewConfig) {
   let copy = JSON.parse(JSON.stringify(viewConfig));
   for (let view of copy.views) {
     for (let track of Object.values(view.tracks).flat()) {
-      if (track?.server === "jupyter") {
+      if (track?.server === NAME) {
         delete track.server;
         track.data = track.data || {};
-        track.data.type = "jupyter";
+        track.data.type = NAME;
         track.data.tilesetUid = track.tilesetUid;
       }
     }
@@ -182,32 +181,34 @@ function resolveJupyterServers(viewConfig) {
 }
 
 /**
- * @param {import("npm:@anywidget/types").AnyModel} model
- * @returns{PluginDataFetcherConstructor}
- */
-function createDataFetcherForModel(model) {
-  /**
-   * @param {HGC} hgc
-   * @param {Record<string, unknown>} dataConfig
-   * @param {unknown} pubSub
-   */
-  const DataFetcher = function createDataFetcher(hgc, dataConfig, pubSub) {
-    let config = { ...dataConfig, server: "jupyter" };
+ * @param {import("npm:@anywidget/[email protected]").AnyModel<State>} model */
+async function registerJupyterHiGlassDataFetcher(model) {
+  if (window?.higlassDataFetchersByType?.[NAME]) {
+    return;
+  }
+
+  let tModel = await model.widget_manager.get_model(
+    model.get("_tileset_client").slice("IPY_MODEL_".length),
+  );
+
+  /** @type {(...args: ConstructorParameters<PluginDataFetcherConstructor>) => DataFetcher} */
+  function DataFetcher(hgc, dataConfig, pubSub) {
+    let config = { ...dataConfig, server: NAME };
     return new hgc.dataFetchers.DataFetcher(config, pubSub, {
       async fetchTilesetInfo({ server, tilesetUid }) {
-        assert(server === "jupyter", "must be a jupyter server");
-        let response = await sendCustomMessage(model, {
+        assert(server === NAME, "must be a jupyter server");
+        let response = await sendCustomMessage(tModel, {
           payload: { type: "tileset_info", tilesetUid },
         });
         return response.payload;
       },
       async fetchTiles({ tileIds }) {
-        let response = await sendCustomMessage(model, {
+        let response = await sendCustomMessage(tModel, {
           payload: { type: "tiles", tileIds },
         });
         let result = hgc.services.tileResponseToData(
           response.payload,
-          config.server,
+          NAME,
           tileIds,
         );
         return result;
@@ -216,9 +217,14 @@ function createDataFetcherForModel(model) {
         throw new Error("Not implemented");
       },
     });
-  };
+  }
 
-  return /** @type{any} */ (DataFetcher);
+  /** @type {PluginDataFetcherConstructor} */
+  // @ts-expect-error - classic function definition (above) supports `new` invocation
+  let dataFetcher = DataFetcher;
+
+  window.higlassDataFetchersByType ??= {};
+  window.higlassDataFetchersByType[NAME] = { name: NAME, dataFetcher };
 }
 
 /**
@@ -250,61 +256,49 @@ function addEventListenersTo(el) {
  * @typedef State
  * @property {Viewconf} _viewconf
  * @property {Record<string, unknown>} _options
- * @property {`IPYMODEL_${string}`} _tileset_client
+ * @property {`IPY_MODEL_${string}`} _tileset_client
  * @property {Array<number> | Array<Array<number>>} location
  * @property {Array<string>} _plugin_urls
  */
 
-export default () => {
-  /** @type {Promise<void>} */
-  let scriptsPromise = Promise.resolve();
-  return {
-    /** @type {import("npm:@anywidget/[email protected]").Initialize<State>} */
-    async initialize({ model }) {
-      scriptsPromise = requireScripts(model.get("_plugin_urls"));
-      let tilesetClientModel = await model.widget_manager.get_model(
-        model.get("_tileset_client").slice("IPY_MODEL_".length),
-      );
-      window.higlassDataFetchersByType["jupyter"] = {
-        name: "jupyter",
-        dataFetcher: createDataFetcherForModel(tilesetClientModel),
-      };
-    },
-    /** @type {import("npm:@anywidget/types").Render<State>} */
-    async render({ model, el }) {
-      await scriptsPromise;
-      let viewconf = resolveJupyterServers(
-        model.get("_viewconf"),
-      );
-      let options = model.get("_options") ?? {};
-      let api = await hglib.viewer(el, viewconf, options);
-      let unlisten = addEventListenersTo(el);
+export default {
+  /** @type {import("npm:@anywidget/types").Render<State>} */
+  async render({ model, el }) {
+    await Promise.all([
+      requireScripts(model.get("_plugin_urls")),
+      registerJupyterHiGlassDataFetcher(model),
+    ]);
+    let viewconf = resolveJupyterServers(
+      model.get("_viewconf"),
+    );
+    let options = model.get("_options") ?? {};
+    let api = await hglib.viewer(el, viewconf, options);
+    let unlisten = addEventListenersTo(el);
 
-      model.on("msg:custom", (msg) => {
-        msg = JSON.parse(msg);
-        let [fn, ...args] = msg;
-        api[fn](...args);
-      });
+    model.on("msg:custom", (msg) => {
+      msg = JSON.parse(msg);
+      let [fn, ...args] = msg;
+      api[fn](...args);
+    });
 
-      if (viewconf.views.length === 1) {
-        api.on("location", (/** @type {GenomicLocation} */ loc) => {
-          model.set("location", locationToCoordinates(loc));
+    if (viewconf.views.length === 1) {
+      api.on("location", (/** @type {GenomicLocation} */ loc) => {
+        model.set("location", locationToCoordinates(loc));
+        model.save_changes();
+      }, viewconf.views[0].uid);
+    } else {
+      viewconf.views.forEach((view, idx) => {
+        api.on("location", (/** @type{GenomicLocation} */ loc) => {
+          let location = model.get("location").slice();
+          location[idx] = locationToCoordinates(loc);
+          model.set("location", location);
           model.save_changes();
-        }, viewconf.views[0].uid);
-      } else {
-        viewconf.views.forEach((view, idx) => {
-          api.on("location", (/** @type{GenomicLocation} */ loc) => {
-            let location = model.get("location").slice();
-            location[idx] = locationToCoordinates(loc);
-            model.set("location", location);
-            model.save_changes();
-          }, view.uid);
-        });
-      }
+        }, view.uid);
+      });
+    }
 
-      return () => {
-        unlisten();
-      };
-    },
-  };
+    return () => {
+      unlisten();
+    };
+  },
 };