feat(core): add powerPreference to embed options

App and Playground use "high-performance" by default.
genome-spy · Feb 14, 2024 · f3af4a0 · f3af4a0
1 parent ca486cf
commit f3af4a0
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 3 deletions.
diff --git a/packages/app/src/index.js b/packages/app/src/index.js
@@ -41,6 +41,11 @@ export async function embed(el, spec, options = {}) {
         specObject.width ??= "container";
         specObject.padding ??= 10;
 
+        options = {
+            powerPreference: "high-performance",
+            ...options,
+        };
+
         const app = new App(element, specObject, options);
         genomeSpy = app.genomeSpy;
         applyOptions(genomeSpy, options);

diff --git a/packages/core/src/genomeSpy.js b/packages/core/src/genomeSpy.js
@@ -362,7 +362,8 @@ export default class GenomeSpy {
                 this.viewRoot
                     ? calculateCanvasSize(calculateViewRootSize(this.viewRoot))
                     : { width: undefined, height: undefined },
-            this.spec.background
+            this.spec.background,
+            { powerPreference: this.options.powerPreference ?? "default" }
         );
 
         // The initial loading message that is shown until the first frame is rendered

diff --git a/packages/core/src/gl/webGLHelper.js b/packages/core/src/gl/webGLHelper.js
@@ -36,8 +36,14 @@ export default class WebGLHelper {
      *      A function that returns the content size. If a dimension is undefined,
      *      the canvas fills the container, otherwise the canvas is adjusted to the content size.
      * @param {string} [clearColor]
+     * @param {WebGLContextAttributes} [webglContextAttributes]
      */
-    constructor(container, sizeSource, clearColor) {
+    constructor(
+        container,
+        sizeSource,
+        clearColor,
+        webglContextAttributes = {}
+    ) {
         this._container = container;
         this._sizeSource =
             sizeSource ??
@@ -67,6 +73,7 @@ export default class WebGLHelper {
                 // Disable depth writes. We don't use depth testing.
                 depth: false,
                 premultipliedAlpha: true,
+                ...webglContextAttributes,
             })
         );
 

diff --git a/packages/core/src/types/embedApi.d.ts b/packages/core/src/types/embedApi.d.ts
@@ -33,6 +33,13 @@ export interface EmbedOptions {
      * the input binding elements are placed in the same container as the GenomeSpy instance.
      */
     inputBindingContainer?: HTMLElement | "none" | "default";
+
+    /**
+     * A suggestion for the browser on the appropriate GPU setup for the WebGL environment.
+     * Defaults to "default" in the @genome-spy/core package and "high-performance" in the
+     * @genome-spy/app package.
+     */
+    powerPreference?: "default" | "high-performance" | "low-power";
 }
 
 /**

diff --git a/packages/playground/src/index.js b/packages/playground/src/index.js
@@ -57,7 +57,6 @@ async function loadSpec() {
     }
     const storedSpec = window.localStorage.getItem(STORAGE_KEY);
     const spec = storedSpec?.length > 0 ? storedSpec : defaultSpec;
-    console.log("Jeejee", spec);
     return spec;
 }
 
@@ -133,6 +132,7 @@ async function update(force = false) {
             parsedSpec,
             {
                 namedDataProvider: getNamedData,
+                powerPreference: "high-performance",
             }
         );