Render HiGlass viewer inside Shadow DOM (#208)

* Render HiGlass viewer inside Shadow DOM

HiGlass v2.2.2 exports its CSS as `hglib.CSS`, which lets us encapsulate
viewer styles using the Constructable Stylesheets API and a Shadow DOM.
This prevents HiGlass styles from leaking into (or being affected by)
the host notebook environment.

The wheel event handler now also calls `preventDefault()` in addition to
`stopPropagation()`. With the shadow DOM boundary, `stopPropagation()`
alone wasn't sufficient to prevent page scrolling in marimo since
composed events cross the shadow boundary.

* Upgrade to higlass v2.2.3 for type export fix

* Fix type checking and linting

* ci: Upload smoke test failure screenshot as artifact

* Fix smoke test to check shadow root children

---------

Co-authored-by: Nezar Abdennur <nabdennur@gmail.com>

Author: manzt

.github/workflows/ci.yml

@@ -61,6 +61,11 @@ jobs:
       - run: deno install
       - run: npx playwright install chromium
       - run: deno task vitest --run
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: screenshots
+          path: src/higlass/__screenshots__/
 
   TypecheckJavaScript:
     name: JavaScript / Typecheck

src/higlass/widget.js

@@ -1,11 +1,14 @@
-import * as hglib from "https://esm.sh/higlass@1.13?deps=react@17,react-dom@17,pixi.js@6";
+import * as hglib from "https://esm.sh/higlass@2.2.3?deps=react@17,react-dom@17,pixi.js@6";
 import { v4 } from "https://esm.sh/@lukeed/uuid@2.0.1";
 
 /** @import { AnyModel } from "@anywidget/types" */
 /** @import { PluginDataFetcherConstructor, GenomicLocation, Viewconf, DataFetcher} from "./types.ts" */
 
 const NAME = "jupyter";
 
+let HIGLASS_STYLES = new CSSStyleSheet();
+HIGLASS_STYLES.replaceSync(hglib.CSS);
+
 /**
  * @param {string} href
  * @returns {Promise<void>}
@@ -275,7 +278,10 @@ function addEventListenersTo(el) {
   });
 
   // prevent wheel events from scrolling the page while allowing HiGlass zoom
-  el.addEventListener("wheel", (event) => event.stopPropagation(), {
+  el.addEventListener("wheel", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, {
     signal: controller.signal,
     passive: false,
   });
@@ -303,28 +309,45 @@ export default {
       model.get("_viewconf"),
     );
     let options = model.get("_options") ?? {};
-    let api = await hglib.viewer(el, viewconf, options);
+
+    let shadow = el.shadowRoot ?? el.attachShadow({ mode: "open" });
+    shadow.innerHTML = "";
+    shadow.adoptedStyleSheets = [HIGLASS_STYLES];
+    let container = document.createElement("div");
+    shadow.appendChild(container);
+
+    let api = await hglib.viewer(container, viewconf, options);
     let unlisten = addEventListenersTo(el);
 
     model.on("msg:custom", (msg) => {
       msg = JSON.parse(msg);
       let [fn, ...args] = msg;
-      api[fn](...args);
+      /** @type {any} */ (api)[fn](...args);
     });
 
     if (viewconf.views.length === 1) {
-      api.on("location", (/** @type {GenomicLocation} */ loc) => {
-        model.set("location", locationToCoordinates(loc));
-        model.save_changes();
-      }, viewconf.views[0].uid);
+      api.on(
+        "location",
+        (/** @type {GenomicLocation} */ loc) => {
+          model.set("location", locationToCoordinates(loc));
+          model.save_changes();
+        },
+        viewconf.views[0].uid,
+        undefined,
+      );
     } 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);
+        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,
+          undefined,
+        );
       });
     }
 

src/higlass/widget.test.ts

@@ -58,8 +58,8 @@ test("render creates a HiGlass viewer with a simple viewconf", async () => {
 
   const cleanup = await widget.render({ model, el, experimental });
 
-  // resolved without throwing; container has content
-  expect(el.children.length).toBeGreaterThan(0);
+  // resolved without throwing; shadow root has content
+  expect(el.shadowRoot?.children.length).toBeGreaterThan(0);
 
   expect(typeof cleanup).toBe("function");
   cleanup?.();