disable selection/highlight when animating/updating

src/mol-plugin/behavior/dynamic/representation.ts

@@ -45,7 +45,7 @@ export const HighlightLoci = PluginBehavior.create({
         }
         register() {
             this.subscribeObservable(this.ctx.behaviors.interaction.hover, ({ current, buttons, modifiers }) => {
-                if (!this.ctx.canvas3d) return
+                if (!this.ctx.canvas3d || this.ctx.isBusy) return
                 let matched = false
 
                 if (Binding.match(this.params.bindings.hoverHighlightOnly, buttons, modifiers)) {
@@ -132,7 +132,7 @@ export const SelectLoci = PluginBehavior.create({
             })
 
             this.subscribeObservable(this.ctx.behaviors.interaction.click, ({ current, button, modifiers }) => {
-                if (!this.ctx.canvas3d) return
+                if (!this.ctx.canvas3d || this.ctx.isBusy) return;
 
                 // only trigger the 1st action that matches
                 for (const [binding, action, condition] of actions) {

src/mol-plugin/context.ts

@@ -187,6 +187,11 @@ export class PluginContext {
      */
     readonly fetch = ajaxGet
 
+    /** return true is animating or updating */
+    get isBusy() {
+        return this.behaviors.state.isAnimating.value || this.behaviors.state.isUpdating.value;
+    }
+
     runTask<T>(task: Task<T>) {
         return this.tasks.run(task);
     }

src/mol-repr/structure/units-representation.ts

@@ -18,10 +18,11 @@ import { Theme } from '../../mol-theme/theme';
 import { Task } from '../../mol-task';
 import { PickingId } from '../../mol-geo/geometry/picking';
 import { Loci, EmptyLoci, isEmptyLoci, isEveryLoci, isDataLoci } from '../../mol-model/loci';
-import { MarkerAction, MarkerActions } from '../../mol-util/marker-action';
+import { MarkerAction, MarkerActions, applyMarkerAction } from '../../mol-util/marker-action';
 import { Overpaint } from '../../mol-theme/overpaint';
 import { Transparency } from '../../mol-theme/transparency';
 import { Mat4, EPSILON } from '../../mol-math/linear-algebra';
+import { Interval } from '../../mol-data/int';
 
 export const UnitsParams = {
     ...StructureParams,
@@ -88,6 +89,13 @@ export function UnitsRepresentation<P extends UnitsParams>(label: string, ctx: R
                         if (promise) await promise
                         visuals.set(group.hashCode, { visual, group })
                         oldVisuals.delete(group.hashCode)
+
+                        // Remove highlight 
+                        // TODO: remove selection too??
+                        if (visual.renderObject) {
+                            const arr = visual.renderObject.values.tMarker.ref.value.array;
+                            applyMarkerAction(arr, Interval.ofBounds(0, arr.length), MarkerAction.RemoveHighlight);
+                        }
                     } else {
                         // console.log(label, 'not found visualGroup to reuse, creating new')
                         // newGroups.push(group)