mol-plugin: fix non-structure visual highlighting

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

@@ -41,7 +41,7 @@ export const HighlightLoci = PluginBehavior.create({
     ctor: class extends PluginBehavior.Handler<HighlightLociProps> {
         private lociMarkProvider = (interactionLoci: Interactivity.Loci, action: MarkerAction) => {
             if (!this.ctx.canvas3d) return;
-            this.ctx.canvas3d.mark({ loci: interactionLoci.loci }, action)
+            this.ctx.canvas3d.mark({ loci: interactionLoci.loci, repr: interactionLoci.passRepresentation ? interactionLoci.repr : void 0 }, action)
         }
         register() {
             this.subscribeObservable(this.ctx.behaviors.interaction.hover, ({ current, buttons, modifiers }) => {
@@ -94,7 +94,7 @@ export const SelectLoci = PluginBehavior.create({
         private spine: StateTreeSpine.Impl
         private lociMarkProvider = (interactionLoci: Interactivity.Loci, action: MarkerAction) => {
             if (!this.ctx.canvas3d) return;
-            this.ctx.canvas3d.mark({ loci: interactionLoci.loci }, action)
+            this.ctx.canvas3d.mark({ loci: interactionLoci.loci, repr: interactionLoci.passRepresentation ? interactionLoci.repr : void 0 }, action)
         }
         private applySelectMark(ref: string, clear?: boolean) {
             const cell = this.ctx.state.dataState.cells.get(ref)

src/mol-plugin/behavior/static/state.ts

@@ -102,14 +102,14 @@ function setVisibilityVisitor(t: StateTransform, tree: StateTree, ctx: { state:
 }
 
 export function Highlight(ctx: PluginContext) {
-    PluginCommands.State.Highlight.subscribe(ctx, ({ state, ref }) => {
+    PluginCommands.State.Highlight.subscribe(ctx, ({ state, ref, passRepresentation }) => {
         const cell = state.select(ref)[0];
         if (!cell) return;
         if (SO.Molecule.Structure.is(cell.obj)) {
             ctx.interactivity.lociHighlights.highlightOnly({ loci: Structure.Loci(cell.obj.data) }, false);
         } else if (cell && SO.isRepresentation3D(cell.obj)) {
             const loci = SO.Molecule.Structure.is(cell.obj.data.source) ? Structure.Loci(cell.obj.data.source.data) : EveryLoci
-            ctx.interactivity.lociHighlights.highlightOnly({ loci, repr: cell.obj.data.repr }, false);
+            ctx.interactivity.lociHighlights.highlightOnly({ loci, repr: cell.obj.data.repr, passRepresentation }, false);
         }
 
         // TODO: highlight volumes and shapes?

src/mol-plugin/command.ts

@@ -26,7 +26,7 @@ export const PluginCommands = {
 
         ToggleExpanded: PluginCommand<{ state: State, ref: StateTransform.Ref }>(),
         ToggleVisibility: PluginCommand<{ state: State, ref: StateTransform.Ref }>(),
-        Highlight: PluginCommand<{ state: State, ref: StateTransform.Ref }>(),
+        Highlight: PluginCommand<{ state: State, ref: StateTransform.Ref, passRepresentation?: boolean }>(),
         ClearHighlight: PluginCommand<{ state: State, ref: StateTransform.Ref }>(),
 
         Snapshots: {

src/mol-plugin/ui/state/tree.tsx

@@ -193,7 +193,7 @@ class StateTreeNodeLabel extends PluginUIComponent<
 
     highlight = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
-        PluginCommands.State.Highlight.dispatch(this.plugin, { state: this.props.cell.parent, ref: this.ref });
+        PluginCommands.State.Highlight.dispatch(this.plugin, { state: this.props.cell.parent, ref: this.ref, passRepresentation: true });
         e.currentTarget.blur();
     }
 

src/mol-plugin/util/interactivity.ts

@@ -42,7 +42,7 @@ class Interactivity {
 }
 
 namespace Interactivity {
-    export interface Loci<T extends ModelLoci = ModelLoci> { loci: T, repr?: Representation.Any }
+    export interface Loci<T extends ModelLoci = ModelLoci> { loci: T, repr?: Representation.Any, passRepresentation?: boolean /** = false */ }
 
     export namespace Loci {
         export function areEqual(a: Loci, b: Loci) {
@@ -82,9 +82,9 @@ namespace Interactivity {
         }
 
         protected normalizedLoci(interactivityLoci: Loci, applyGranularity = true) {
-            const { loci, repr } = interactivityLoci
+            const { loci, repr, passRepresentation } = interactivityLoci
             const granularity =  applyGranularity ? this.props.granularity : undefined
-            return { loci: ModelLoci.normalize(loci, granularity), repr }
+            return { loci: ModelLoci.normalize(loci, granularity), repr, passRepresentation }
         }
 
         protected mark(current: Loci<ModelLoci>, action: MarkerAction) {
@@ -124,7 +124,7 @@ namespace Interactivity {
             if (StructureElement.Loci.is(normalized.loci)) {
                 const loci = this.sel.tryGetRange(normalized.loci) || normalized.loci;
                 this.mark(this.prev, MarkerAction.RemoveHighlight);
-                const toHighlight = { loci, repr: normalized.repr };
+                const toHighlight = { loci, repr: normalized.repr, passRepresentation: normalized.passRepresentation };
                 this.mark(toHighlight, MarkerAction.Highlight);
                 this.prev = toHighlight;
             }