Observable canvas commit

CHANGELOG.md

@@ -17,6 +17,7 @@ n
 - Add various options to customize the axes camera-helper
 - Fix issue with texture-mesh color smoothing when changing themes
 - Add fast boundary helper and corresponding unit trait
+- Add Observable for Canvas3D commits
 
 ## [v3.30.0] - 2023-01-29
 

src/mol-canvas3d/canvas3d.ts

@@ -260,6 +260,7 @@ interface Canvas3D {
     notifyDidDraw: boolean,
     readonly didDraw: BehaviorSubject<now.Timestamp>
     readonly commited: BehaviorSubject<now.Timestamp>
+    readonly commitQueueSize: BehaviorSubject<number>
     readonly reprCount: BehaviorSubject<number>
     readonly resized: BehaviorSubject<any>
 
@@ -306,6 +307,7 @@ namespace Canvas3D {
         let startTime = now();
         const didDraw = new BehaviorSubject<now.Timestamp>(0 as now.Timestamp);
         const commited = new BehaviorSubject<now.Timestamp>(0 as now.Timestamp);
+        const commitQueueSize = new BehaviorSubject<number>(0);
 
         const { gl, contextRestored } = webgl;
 
@@ -593,7 +595,11 @@ namespace Canvas3D {
             // snapshot the current bounding sphere of visible objects
             Sphere3D.copy(oldBoundingSphereVisible, scene.boundingSphereVisible);
 
-            if (!scene.commit(isSynchronous ? void 0 : sceneCommitTimeoutMs)) return false;
+            if (!scene.commit(isSynchronous ? void 0 : sceneCommitTimeoutMs)) {
+                commitQueueSize.next(scene.commitQueueSize);
+                return false;
+            }
+            commitQueueSize.next(0);
 
             if (helper.debug.isEnabled) helper.debug.update();
             if (!p.camera.manualReset && (reprCount.value === 0 || shouldResetCamera())) {
@@ -790,6 +796,7 @@ namespace Canvas3D {
             set notifyDidDraw(v: boolean) { notifyDidDraw = v; },
             didDraw,
             commited,
+            commitQueueSize,
             reprCount,
             resized,
             setProps: (properties, doNotRequestDraw = false) => {

src/mol-gl/commit-queue.ts

@@ -19,6 +19,10 @@ export class CommitQueue {
         return this.removeList.count === 0 && this.addList.count === 0;
     }
 
+    get size() {
+        return this.removeMap.size + this.addMap.size;
+    }
+
     add(o: GraphicsRenderObject) {
         if (this.removeMap.has(o)) {
             const a = this.removeMap.get(o)!;

src/mol-gl/scene.ts

@@ -77,6 +77,7 @@ interface Scene extends Object3D {
     remove: (o: GraphicsRenderObject) => void
     commit: (maxTimeMs?: number) => boolean
     readonly needsCommit: boolean
+    readonly commitQueueSize: number
     has: (o: GraphicsRenderObject) => boolean
     clear: () => void
     forEach: (callbackFn: (value: GraphicsRenderable, key: GraphicsRenderObject) => void) => void
@@ -279,6 +280,7 @@ namespace Scene {
             add: (o: GraphicsRenderObject) => commitQueue.add(o),
             remove: (o: GraphicsRenderObject) => commitQueue.remove(o),
             commit: (maxTime = Number.MAX_VALUE) => commit(maxTime),
+            get commitQueueSize() { return commitQueue.size; },
             get needsCommit() { return !commitQueue.isEmpty; },
             has: (o: GraphicsRenderObject) => {
                 return renderableMap.has(o);

src/mol-plugin-ui/task.tsx

@@ -11,6 +11,7 @@ import { Progress } from '../mol-task';
 import { IconButton } from './controls/common';
 import { CancelSvg } from './controls/icons';
 import { useContext, useEffect, useState } from 'react';
+import { useBehavior } from './hooks/use-behavior';
 
 export function BackgroundTaskProgress() {
     const plugin = useContext(PluginReactContext);
@@ -36,6 +37,22 @@ export function BackgroundTaskProgress() {
 
     return <div className='msp-background-tasks'>
         {tracked.valueSeq().map(e => <ProgressEntry key={e!.id} event={e!} />)}
+        <CanvasCommitState />
+    </div>;
+}
+
+function CanvasCommitState() {
+    const plugin = useContext(PluginReactContext);
+    const queueSize = useBehavior(plugin.canvas3d?.commitQueueSize);
+
+    if (!queueSize) return null;
+
+    return <div className='msp-task-state'>
+        <div>
+            <div>
+                Commiting renderables... {queueSize} remaining
+            </div>
+        </div>
     </div>;
 }