Disable advancing until chart update completes (#4)

ToucheSir · Sep 9, 2020 · e21c199 · e21c199
1 parent fe13f4a
commit e21c199
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 41 deletions.
diff --git a/frontend/src/annotator.ts b/frontend/src/annotator.ts
@@ -38,6 +38,9 @@ export default class AnnotatorApp extends LitElement {
   @query("#abstain-dialog-template")
   private abstainDialogTemplate?: HTMLTemplateElement;
 
+  @property({ attribute: false })
+  private chartRendering = false;
+
   static styles = css`
     /* Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd */
     kbd {
@@ -83,7 +86,7 @@ export default class AnnotatorApp extends LitElement {
     ]);
     this.classes = classes;
     this.annotator = annotator;
-    
+
     const campaign = annotator.current_campaign;
     this.segments = new SegmentCollection(
       new URL("api/segments", location.href),
@@ -100,6 +103,7 @@ export default class AnnotatorApp extends LitElement {
 
   private async prevRecord() {
     if (this.segments && this.position > 0) {
+      this.chartRendering = true;
       this.currentSegment = await this.segments.get(
         --this.position,
         ScanDirection.Backwards
@@ -108,6 +112,7 @@ export default class AnnotatorApp extends LitElement {
   }
   private async nextRecord() {
     if (this.segments && this.position < this.segments.length - 1) {
+      this.chartRendering = true;
       this.currentSegment = await this.segments.get(
         ++this.position,
         ScanDirection.Forwards
@@ -170,12 +175,15 @@ export default class AnnotatorApp extends LitElement {
   }
 
   private updatedOr(cond: boolean) {
-    return until(this.updateComplete.then((x) => !x || cond));
+    return until(
+      this.updateComplete.then((x) => !x || this.chartRendering || cond)
+    );
   }
 
   render() {
+    const nSegments = this.segments?.length ?? 0;
     const segmentStats = this.segments
-      ? ` | Segment ${this.position + 1} / ${this.segments?.length}`
+      ? ` | Segment ${this.position + 1} / ${nSegments}`
       : "";
     const annotation = this.currentSegment?.annotations[
       this.annotator!.username
@@ -192,9 +200,7 @@ export default class AnnotatorApp extends LitElement {
             </button>
             <button
               @click=${this.nextRecord}
-              ?disabled=${this.updatedOr(
-                this.position >= (this.segments?.length ?? 0) - 1
-              )}
+              ?disabled=${this.updatedOr(this.position >= nSegments - 1)}
             >
               Next
             </button>`
@@ -212,11 +218,13 @@ export default class AnnotatorApp extends LitElement {
           <signal-view
             id="signals"
             .signals=${this.currentSegment?.signals ?? {}}
+            @draw-complete=${() => (this.chartRendering = false)}
           ></signal-view>
           <label-buttons
             id="button-bar"
             .value=${live(annotation?.label ?? "")}
             .options=${this.classes}
+            ?disabled=${this.chartRendering}
             @select-label=${this.saveAnnotation}
           ></label-buttons>
         </div>

diff --git a/frontend/src/label-buttons.ts b/frontend/src/label-buttons.ts
@@ -29,6 +29,9 @@ export default class LabelButtons extends LitElement {
   @property({ attribute: false })
   options: { name: string; value: string; description: string }[] = [];
 
+  @property({ type: Boolean })
+  disabled = true;
+
   @property()
   value: string = "";
 
@@ -121,29 +124,32 @@ export default class LabelButtons extends LitElement {
         </ul>
       </details>
       <form id="class-selection" @submit=${this.submitSelection}>
-        ${repeat(this.options, (c, i) => {
-          console.log(c.value, this.value, c.value === this.value);
-
-          return html`
-            <div>
-              <!-- using .checked ensures the state is updated instead set statically -->
-              <input
-                type="radio"
-                id=${c.name}
-                name="label"
-                value=${c.value}
-                required
-                .checked=${c.value === this.value}
-                @change=${() => this.value = c.value}
-              />
-              <label for=${c.name}>
-                <kbd>${shortcutKeys[i]}</kbd>
-                <abbr title=${c.description}> ${c.name} </abbr>
-              </label>
-            </div>
-          `;
-        })}
-        <input type="submit" value="Submit" style="margin-top: 1em" />
+        ${repeat(
+          this.options,
+          (c, i) => html`<div>
+            <!-- using .checked ensures the state is updated instead of set statically -->
+            <input
+              type="radio"
+              id=${c.name}
+              name="label"
+              value=${c.value}
+              required
+              .checked=${c.value === this.value}
+              .disabled=${this.disabled}
+              @change=${() => (this.value = c.value)}
+            />
+            <label for=${c.name}>
+              <kbd>${shortcutKeys[i]}</kbd>
+              <abbr title=${c.description}> ${c.name} </abbr>
+            </label>
+          </div>`
+        )}
+        <input
+          type="submit"
+          value="Submit"
+          style="margin-top: 1em"
+          .disabled=${this.disabled}
+        />
       </form>
     </div>`;
   }

diff --git a/frontend/src/record-collection.ts b/frontend/src/record-collection.ts
@@ -60,6 +60,8 @@ export default class SegmentCollection {
     }
 
     const segmentId = this.segmentIds[i];
+    // Reset age so the current segment doesn't get invalidated if it's cached
+    this.cache.get(segmentId);
     const fetchIds = this.segmentIds
       .slice(...this.findRange(i, direction))
       .filter((id) => !this.cache.has(id));

diff --git a/frontend/src/signal-view.ts b/frontend/src/signal-view.ts
@@ -24,22 +24,27 @@ export default class SignalView extends LitElement {
       // TODO what if we want to display another lead or >1 lead?
       const signal = this.signals.I;
       const index = signal.map((_: any, i: number) => i / this.sampleRate);
-      this.view.setData([index, signal]);
-
-      const { width, height } = this.view;
       const yCells = cellCount(
         Math.min.apply(null, signal),
         Math.max.apply(null, signal),
         this.scaleFactor
       );
-      // 10s * 5 cells/s or 0.2s/cell
-      const yMax = (yCells * width) / 50;
-      // Height of axes labels, tooltips, etc.
-      // N.B. b(ounding) box dimensions are not pre-scaled by devicePixelRatio
-      const yDiff = Math.abs(height - this.view.bbox.height / devicePixelRatio);
-      this.view.setSize({
-        width,
-        height: 4 * yMax + yDiff,
+      this.view.batch(() => {
+        // const width = this.clientWidth;
+        this.view?.setData([index, signal], false);
+        const { width, height } = this.view!;
+
+        // 10s * 5 cells/s or 0.2s/cell
+        const yMax = (yCells * width) / 50;
+        // Height of axes labels, tooltips, etc.
+        // N.B. b(ounding) box dimensions are not pre-scaled by devicePixelRatio
+        const yDiff = Math.abs(
+          height - this.view!.bbox.height / devicePixelRatio
+        );
+        this.view?.setSize({
+          width: this.clientWidth,
+          height: 4 * yMax + yDiff,
+        });
       });
     }
   }
@@ -63,7 +68,7 @@ export default class SignalView extends LitElement {
           },
         ],
         scales: {
-          x: { time: true },
+          x: { time: true, min: 0, max: 10 },
           y: {
             // uPlot resets the y-axis after a double-click zoom out in the x-axis (!),
             // so we have to enforce cell clamping here
@@ -93,6 +98,9 @@ export default class SignalView extends LitElement {
             values: (_, ticks, __) => ticks.map((x) => x.toFixed(1)),
           },
         ],
+        hooks: {
+          draw: [() => this.dispatchEvent(new CustomEvent("draw-complete"))],
+        },
       },
       [[], []],
       this.renderRoot.querySelector(".chart-root") as HTMLElement