Merge branch 'main' into lane/contributing-code-of-conduct

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,38 @@
+# WIP Steps
+
+_This section is optional if the PR is fully ready for review_
+
+-   Create the PR as a "draft" PR
+-   Add [WIP] to the title
+-   Use the template below to ask for specific feedback
+-   [ ] @name: Could you look at \_\_\_? I'm trying to do... (etc.)
+
+# What
+
+Replace this with 1-2 line Description of what feature, bugfix, chore does the PR contain the code for.
+
+# How
+
+Replace this txt describing what kind of technical overlaying code changes were introduced here.
+
+# Screenshots
+
+_This section is optional if there are no visible changes_
+
+-   If possible add screenshots of the visible additions in the UI.
+-   If there are changes in the UI, add **Before** and **After** Screenshots for quick overview.
+-   If there was a Figma design, add a link to that here as well.
+-   Hint : Drag and Drop any images you want to add to the PR. Also you can create a gif of an interactive version and add that!
+
+# PR Checklist
+
+-   [ ] Is your PR title following our conventional commit naming recommendations?
+-   [ ] Have you filled in the PR Description Template?
+-   [ ] Is your branch up to date with the latest in `main`?
+-   [ ] Do the CI checks pass successfully?
+-   [ ] Have you smoke tested the example applications?
+-   [ ] Did you check that the changes meet accessibility standards?
+-   [ ] Have you tested the application on these browsers?
+    -   [ ] Chrome (Fully supported)
+    -   [ ] Firefox (Major bug fixes supported)
+    -   [ ] Safari (Major bug fixes supported)

packages/scatterbrain/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alleninstitute/vis-scatterbrain",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "contributors": [
         {
             "name": "Lane Sawyer",

packages/scatterbrain/src/abstract/async-frame.ts

@@ -87,12 +87,15 @@ export function beginFrame<
     const abort = new AbortController();
     const queue: Item[] = [...items];
     const taskCancelCallbacks: Array<() => void> = [];
-    const fancy = (itemToRender: Item, maybe: Record<RqKey, CacheEntryType | undefined>) => {
-        if (isPrepared(maybe)) {
+    const renderItemWrapper = (itemToRender: Item, maybe: Record<RqKey, CacheEntryType | undefined>) => {
+        if (isPrepared(maybe) && !abort.signal.aborted) {
             renderItem(itemToRender, dataset, settings, maybe);
         }
     };
     const reportStatus = (event: AsyncFrameEvent<Dataset, Item>, synchronous: boolean) => {
+        if (event.status !== 'cancelled' && abort.signal.aborted) {
+            return;
+        }
         // we want to report our status, however the flow of events can be confusing -
         // our callers anticipate an asynchronous (long running) frame to be started,
         // but there are scenarios in which the whole thing is completely synchronous
@@ -129,7 +132,7 @@ export function beginFrame<
             try {
                 const result = mutableCache.cacheAndUse(
                     requestsForItem(itemToRender, dataset, settings, abort.signal),
-                    partial(fancy, itemToRender),
+                    partial(renderItemWrapper, itemToRender),
                     toCacheKey,
                     () => reportStatus({ status: 'progress', dataset, renderedItems: [itemToRender] }, synchronous)
                 );
@@ -165,8 +168,8 @@ export function beginFrame<
     }
     return {
         cancelFrame: (reason?: string) => {
-            taskCancelCallbacks.forEach((cancelMe) => cancelMe());
             abort.abort(new DOMException(reason, 'AbortError'));
+            taskCancelCallbacks.forEach((cancelMe) => cancelMe());
             clearInterval(interval);
             reportStatus({ status: 'cancelled' }, true);
         },

packages/scatterbrain/src/abstract/render-server.ts

@@ -131,6 +131,7 @@ export class RenderServer {
     private prepareToRenderToClient(client: Client) {
         const previousEntry = this.clients.get(client);
         if (previousEntry) {
+            previousEntry.updateRequested = null;
             // the client is mutable - so every time we get a request, we have to check to see if it got resized
             if (client.width !== previousEntry.resolution[0] || client.height !== previousEntry.resolution[1]) {
                 // handle resizing by deleting previously allocated resources:
@@ -151,6 +152,8 @@ export class RenderServer {
             const clientFrame = this.clients.get(client);
             if (clientFrame && clientFrame.frame) {
                 clientFrame.frame.cancelFrame();
+                this.regl.clear({ framebuffer: clientFrame.image, color: [0, 0, 0, 0], depth: 0 });
+                clientFrame.updateRequested = null;
             }
             const { image, resolution, copyBuffer } = this.prepareToRenderToClient(client);
             const hijack: RenderCallback<D, I> = (e) => {
@@ -179,7 +182,15 @@ export class RenderServer {
             // this is a good thing for performance, but potentially confusing - so we do our book-keeping before we actually start rendering:
             const aboutToStart = this.clients.get(client); // this is the record we just put into the clients map - TS just wants to be sure it really exists:
             if (aboutToStart) {
-                aboutToStart.frame = renderFn(image, this.cache, hijack);
+                const frame = renderFn(image, this.cache, hijack);
+                if (frame) {
+                    aboutToStart.frame = {
+                        cancelFrame: (reason?: string) => {
+                            frame.cancelFrame(reason);
+                            aboutToStart.updateRequested = null;
+                        },
+                    };
+                }
             }
         }
     }