mol-plugin: focusTheme params for presets

src/extensions/rcsb/assembly-symmetry/behavior.ts

@@ -182,7 +182,7 @@ export const AssemblySymmetryPreset = StructureRepresentationPresetProvider({
 
         const assemblySymmetry = await tryCreateAssemblySymmetry(plugin, structureCell);
         const colorTheme = assemblySymmetry.isOk ? Tag.Cluster as any : undefined;
-        const preset = await PresetStructureRepresentations.auto.apply(ref, { ...params, globalThemeName: colorTheme, focusThemeName: colorTheme }, plugin);
+        const preset = await PresetStructureRepresentations.auto.apply(ref, { ...params, globalThemeName: colorTheme, focusTheme: { name: colorTheme } }, plugin);
 
         return { components: preset.components, representations: { ...preset.representations, assemblySymmetry } };
     }

src/extensions/rcsb/validation-report/behavior.ts

@@ -317,7 +317,7 @@ export const ValidationReportGeometryQualityPreset = StructureRepresentationPres
         }));
 
         const colorTheme = GeometryQualityColorThemeProvider.name as any;
-        const { components, representations } = await PresetStructureRepresentations.auto.apply(ref, { ...params, globalThemeName: colorTheme, focusThemeName: colorTheme }, plugin);
+        const { components, representations } = await PresetStructureRepresentations.auto.apply(ref, { ...params, globalThemeName: colorTheme, focusTheme: { name: colorTheme } }, plugin);
 
         const clashes = await plugin.builders.structure.tryCreateComponentFromExpression(structureCell, hasClash.expression, 'clashes', { label: 'Clashes' });
 
@@ -354,7 +354,7 @@ export const ValidationReportDensityFitPreset = StructureRepresentationPresetPro
         }));
 
         const colorTheme = DensityFitColorThemeProvider.name as any;
-        return await PresetStructureRepresentations.auto.apply(ref, { ...params, globalThemeName: colorTheme, focusThemeName: colorTheme }, plugin);
+        return await PresetStructureRepresentations.auto.apply(ref, { ...params, globalThemeName: colorTheme, focusTheme: { name: colorTheme } }, plugin);
     }
 });
 
@@ -378,6 +378,6 @@ export const ValidationReportRandomCoilIndexPreset = StructureRepresentationPres
         }));
 
         const colorTheme = RandomCoilIndexColorThemeProvider.name as any;
-        return await PresetStructureRepresentations.auto.apply(ref, { ...params, globalThemeName: colorTheme, focusThemeName: colorTheme }, plugin);
+        return await PresetStructureRepresentations.auto.apply(ref, { ...params, globalThemeName: colorTheme, focusTheme: { name: colorTheme } }, plugin);
     }
 });

src/mol-plugin-state/builder/structure/representation-preset.ts

@@ -33,7 +33,10 @@ export namespace StructureRepresentationPresetProvider {
         ignoreHydrogens: PD.Optional(PD.Boolean(false)),
         quality: PD.Optional(PD.Select<VisualQuality>('auto', VisualQualityOptions)),
         globalThemeName: PD.Optional(PD.Text<ColorTheme.BuiltIn>('')),
-        focusThemeName: PD.Optional(PD.Text<ColorTheme.BuiltIn>(''))
+        focusTheme: PD.Optional(PD.Group({
+            name: PD.Optional(PD.Text<ColorTheme.BuiltIn>('')),
+            params: PD.Optional(PD.Value<ColorTheme.BuiltInParams<ColorTheme.BuiltIn>>({} as any))
+        }))
     };
     export type CommonParams = PD.ValuesFor<typeof CommonParams>
 
@@ -51,9 +54,9 @@ export namespace StructureRepresentationPresetProvider {
         return { update, builder, color, typeParams };
     }
 
-    export function updateFocusRepr(plugin: PluginContext, structure: Structure, themeName?: ColorTheme.BuiltIn) {
+    export function updateFocusRepr<T extends ColorTheme.BuiltIn>(plugin: PluginContext, structure: Structure, themeName: T | undefined, themeParams: ColorTheme.BuiltInParams<T> | undefined) {
         return plugin.state.updateBehavior(StructureFocusRepresentation, p => {
-            const c = createStructureColorThemeParams(plugin, structure, 'ball-and-stick', themeName);
+            const c = createStructureColorThemeParams(plugin, structure, 'ball-and-stick', themeName, themeParams);
             p.surroundingsParams.colorTheme = c;
             p.targetParams.colorTheme = c;
         });
@@ -145,7 +148,7 @@ const polymerAndLigand = StructureRepresentationPresetProvider({
         };
 
         await update.commit({ revertOnError: false });
-        await updateFocusRepr(plugin, structure, params.focusThemeName);
+        await updateFocusRepr(plugin, structure, params.focusTheme?.name, params.focusTheme?.params);
 
         return { components, representations };
     }
@@ -183,7 +186,7 @@ const proteinAndNucleic = StructureRepresentationPresetProvider({
         };
 
         await update.commit({ revertOnError: true });
-        await updateFocusRepr(plugin, structure, params.focusThemeName);
+        await updateFocusRepr(plugin, structure, params.focusTheme?.name, params.focusTheme?.params);
 
         return { components, representations };
     }
@@ -232,7 +235,7 @@ const coarseSurface = StructureRepresentationPresetProvider({
         };
 
         await update.commit({ revertOnError: true });
-        await updateFocusRepr(plugin, structure, params.focusThemeName);
+        await updateFocusRepr(plugin, structure, params.focusTheme?.name, params.focusTheme?.params);
 
         return { components, representations };
     }
@@ -264,7 +267,7 @@ const polymerCartoon = StructureRepresentationPresetProvider({
         };
 
         await update.commit({ revertOnError: true });
-        await updateFocusRepr(plugin, structure, params.focusThemeName);
+        await updateFocusRepr(plugin, structure, params.focusTheme?.name, params.focusTheme?.params);
 
         return { components, representations };
     }

src/mol-plugin/behavior/dynamic/selection/structure-focus-representation.ts

@@ -29,7 +29,7 @@ const StructureFocusRepresentationParams = (plugin: PluginContext) => {
         }),
         surroundingsParams: PD.Group(reprParams, {
             label: 'Surroundings',
-            customDefault: createStructureRepresentationParams(plugin, void 0, { type: 'ball-and-stick', size: 'physical', typeParams: { sizeFactor: 0.16 } })
+            customDefault: createStructureRepresentationParams(plugin, void 0, { type: 'ball-and-stick', size: 'physical', typeParams: { sizeFactor: 0.16 }, color: 'element-symbol', colorParams: { carbonByChainId: false} })
         }),
         nciParams: PD.Group(reprParams, {
             label: 'Non-covalent Int.',
@@ -167,7 +167,6 @@ class StructureFocusRepresentationBehavior extends PluginBehavior.WithSubscriber
         const components = this.params.components;
 
         // TODO: create component if previously didnt exist
-
         let hasComponent = components.indexOf('target') >= 0;
         for (const repr of state.select(all.withTag(StructureFocusRepresentationTags.TargetRepr))) {
             if (!hasComponent) builder.delete(repr.transform.ref);