label snapshot key & tooltip support

src/mol-plugin-state/transforms/representation.ts

@@ -43,6 +43,7 @@ import { PlaneParams, PlaneRepresentation } from '../../mol-repr/shape/loci/plan
 import { Substance } from '../../mol-theme/substance';
 import { Material } from '../../mol-util/material';
 import { lerp } from '../../mol-math/interpolate';
+import { MarkerAction, MarkerActions } from '../../mol-util/marker-action';
 
 export { StructureRepresentation3D };
 export { ExplodeStructureRepresentation3D };
@@ -1143,6 +1144,11 @@ const StructureSelectionsLabel3D = PluginStateTransform.BuiltIn({
             const data = getLabelDataFromStructureSelections(a.data);
             const repr = LabelRepresentation({ webgl: plugin.canvas3d?.webgl, ...plugin.representation.structure.themes }, () => LabelParams);
             await repr.createOrUpdate(params, data).runInContext(ctx);
+
+            // Support interactivity when needed
+            const pickable = !!(params.snapshotKey?.trim() || params.tooltip?.trim());
+            repr.setState({ pickable, markerActions: pickable ? MarkerActions.Highlighting : MarkerAction.None });
+
             return new SO.Shape.Representation3D({ repr, sourceData: data }, { label: `Label` });
         });
     },
@@ -1152,6 +1158,11 @@ const StructureSelectionsLabel3D = PluginStateTransform.BuiltIn({
             const data = getLabelDataFromStructureSelections(a.data);
             await b.data.repr.createOrUpdate(props, data).runInContext(ctx);
             b.data.sourceData = data;
+
+            // Update interactivity
+            const pickable = !!(newParams.snapshotKey?.trim() || newParams.tooltip?.trim());
+            b.data.repr.setState({ pickable, markerActions: pickable ? MarkerActions.Highlighting : MarkerAction.None });
+
             return StateTransformer.UpdateResult.Updated;
         });
     },

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

@@ -264,12 +264,20 @@ export const FocusLoci = PluginBehavior.create<FocusLociProps>({
             this.subscribeObservable(this.ctx.behaviors.interaction.click, ({ current, button, modifiers }) => {
                 const { clickFocus, clickFocusAdd, clickFocusSelectMode, clickFocusAddSelectMode } = this.params.bindings;
 
+                const binding = this.ctx.selectionMode ? clickFocusSelectMode : clickFocus;
+                const matched = Binding.match(binding, button, modifiers);
+
+                // Support snapshot key property, in which case ignore the focus functionality
+                const snapshotKey = current.repr?.props?.snapshotKey?.trim() ?? '';
+                if (!this.ctx.selectionMode && matched && snapshotKey) {
+                    this.ctx.managers.snapshot.applyKey(snapshotKey);
+                    return;
+                }
+
                 // only apply structure focus for appropriate granularity
                 const { granularity } = this.ctx.managers.interactivity.props;
                 if (granularity !== 'residue' && granularity !== 'element') return;
 
-                const binding = this.ctx.selectionMode ? clickFocusSelectMode : clickFocus;
-                const matched = Binding.match(binding, button, modifiers);
                 const bindingAdd = this.ctx.selectionMode ? clickFocusAddSelectMode : clickFocusAdd;
                 const matchedAdd = Binding.match(bindingAdd, button, modifiers);
                 if (!matched && !matchedAdd) return;

src/mol-repr/shape/loci/label.ts

@@ -26,13 +26,15 @@ const TextParams = {
 type TextParams = typeof TextParams
 
 const LabelVisuals = {
-    'text': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<LabelData, TextParams>) => ShapeRepresentation(getTextShape, Text.Utils, { modifyState: s => ({ ...s, pickable: false }) }),
+    'text': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<LabelData, TextParams>) => ShapeRepresentation(getTextShape, Text.Utils),
 };
 
 export const LabelParams = {
     ...TextParams,
     scaleByRadius: PD.Boolean(true),
     visuals: PD.MultiSelect(['text'], PD.objectToOptions(LabelVisuals)),
+    snapshotKey: PD.Text('', { isEssential: true, description: 'Active the snapshot with the provided key when clicking on the label' }),
+    tooltip: PD.Text('', { isEssential: true, description: 'Tooltip text to be displayed when hovering over the label' }),
 };
 
 export type LabelParams = typeof LabelParams
@@ -69,13 +71,18 @@ function buildText(data: LabelData, props: LabelProps, text?: Text): Text {
 function getTextShape(ctx: RuntimeContext, data: LabelData, props: LabelProps, shape?: Shape<Text>) {
     const text = buildText(data, props, shape && shape.geometry);
     const name = getLabelName(data);
+    const tooltip = props.tooltip?.trim() ?? '';
     const customLabel = props.customText.trim();
-    const getLabel = customLabel
-        ? function (groupId: number) {
-            return customLabel;
-        } : function (groupId: number) {
-            return label(data.infos[groupId]);
-        };
+    let getLabel: (groupId: number) => any;
+
+    if (tooltip) {
+        getLabel = (_: number) => tooltip;
+    } else if (customLabel) {
+        getLabel = (_: number) => customLabel;
+    } else {
+        getLabel = (groupId: number) => label(data.infos[groupId]);
+    }
+
     return Shape.create(name, data, text, () => props.textColor, () => props.textSize, getLabel);
 }