expose chain-id color params to element-symbol and illustrative

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

@@ -18,6 +18,7 @@ import { StructureSelectionQueries as Q } from '../../helpers/structure-selectio
 import { PluginConfig } from '../../../mol-plugin/config';
 import { StructureFocusRepresentation } from '../../../mol-plugin/behavior/dynamic/selection/structure-focus-representation';
 import { createStructureColorThemeParams } from '../../helpers/structure-representation-params';
+import { ChainIdColorThemeProvider } from '../../../mol-theme/color/chain-id';
 
 export interface StructureRepresentationPresetProvider<P = any, S extends _Result = _Result> extends PresetProvider<PluginStateObject.Molecule.Structure, P, S> { }
 export function StructureRepresentationPresetProvider<P, S extends _Result>(repr: StructureRepresentationPresetProvider<P, S>) { return repr; }
@@ -53,7 +54,11 @@ export namespace StructureRepresentationPresetProvider {
         if (params.quality && params.quality !== 'auto') typeParams.quality = params.quality;
         if (params.ignoreHydrogens !== void 0) typeParams.ignoreHydrogens = !!params.ignoreHydrogens;
         const color: ColorTheme.BuiltIn | undefined = params.theme?.globalName ? params.theme?.globalName : void 0;
-        const ballAndStickColor: ColorTheme.BuiltInParams<'element-symbol'> = typeof params.theme?.carbonByChainId !== 'undefined' ? { carbonByChainId: !!params.theme?.carbonByChainId } : { };
+        const ballAndStickColor: ColorTheme.BuiltInParams<'element-symbol'> = typeof params.theme?.carbonByChainId !== 'undefined'
+            ? { carbonByChainId: params.theme.carbonByChainId
+                ? { name: 'on', params: ChainIdColorThemeProvider.defaultValues }
+                : { name: 'off', params: {} }
+            } : { };
 
         return { update, builder, color, typeParams, ballAndStickColor };
     }
@@ -153,8 +158,8 @@ const polymerAndLigand = StructureRepresentationPresetProvider({
             branchedBallAndStick: builder.buildRepresentation(update, components.branched, { type: 'ball-and-stick', typeParams: { ...typeParams, alpha: 0.3 }, color, colorParams: ballAndStickColor }, { tag: 'branched-ball-and-stick' }),
             branchedSnfg3d: builder.buildRepresentation(update, components.branched, { type: 'carbohydrate', typeParams, color }, { tag: 'branched-snfg-3d' }),
             water: builder.buildRepresentation(update, components.water, { type: waterType, typeParams: { ...typeParams, alpha: 0.6 }, color }, { tag: 'water' }),
-            ion: builder.buildRepresentation(update, components.ion, { type: 'ball-and-stick', typeParams, color, colorParams: { carbonByChainId: false } }, { tag: 'ion' }),
-            lipid: builder.buildRepresentation(update, components.lipid, { type: lipidType, typeParams: { ...typeParams, alpha: 0.6 }, color, colorParams: { carbonByChainId: false } }, { tag: 'lipid' }),
+            ion: builder.buildRepresentation(update, components.ion, { type: 'ball-and-stick', typeParams, color, colorParams: { carbonByChainId: { name: 'off', params: {} } } }, { tag: 'ion' }),
+            lipid: builder.buildRepresentation(update, components.lipid, { type: lipidType, typeParams: { ...typeParams, alpha: 0.6 }, color, colorParams: { carbonByChainId: { name: 'off', params: {} } } }, { tag: 'lipid' }),
             coarse: builder.buildRepresentation(update, components.coarse, { type: 'spacefill', typeParams, color: color || 'chain-id' }, { tag: 'coarse' })
         };
 

src/mol-theme/color/element-symbol.ts

@@ -13,7 +13,7 @@ import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { ThemeDataContext } from '../theme';
 import { TableLegend } from '../../mol-util/legend';
 import { getAdjustedColorMap } from '../../mol-util/color/color';
-import { ChainIdColorTheme, getChainIdColorThemeParams } from './chain-id';
+import { ChainIdColorTheme, ChainIdColorThemeParams } from './chain-id';
 
 // from Jmol http://jmol.sourceforge.net/jscolors/ (or 0xFFFFFF)
 export const ElementSymbolColors = ColorMap({
@@ -25,7 +25,10 @@ const DefaultElementSymbolColor = Color(0xFFFFFF);
 const Description = 'Assigns a color to every atom according to its chemical element.';
 
 export const ElementSymbolColorThemeParams = {
-    carbonByChainId: PD.Boolean(true),
+    carbonByChainId: PD.MappedStatic('on', {
+        on: PD.Group({ ...ChainIdColorThemeParams }),
+        off: PD.Group({})
+    }, { cycle: true, description: 'Use chain-id coloring for carbon atoms.' }),
     saturation: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }),
     lightness: PD.Numeric(0.2, { min: -6, max: 6, step: 0.1 })
 };
@@ -42,10 +45,12 @@ export function elementSymbolColor(colorMap: ElementSymbolColors, element: Eleme
 export function ElementSymbolColorTheme(ctx: ThemeDataContext, props: PD.Values<ElementSymbolColorThemeParams>): ColorTheme<ElementSymbolColorThemeParams> {
     const colorMap = getAdjustedColorMap(ElementSymbolColors, props.saturation, props.lightness);
 
-    const chainIdColor = ChainIdColorTheme(ctx, PD.getDefaultValues(getChainIdColorThemeParams(ctx))).color;
+    const chainIdColor = props.carbonByChainId.name === 'on'
+        ? ChainIdColorTheme(ctx, props.carbonByChainId.params).color
+        : undefined;
 
     function elementColor(element: ElementSymbol, location: Location) {
-        return (props.carbonByChainId && element === 'C')
+        return (chainIdColor && element === 'C')
             ? chainIdColor(location, false)
             : elementSymbolColor(colorMap, element);
     }

src/mol-theme/color/illustrative.ts

@@ -11,19 +11,21 @@ import { Location } from '../../mol-model/location';
 import { ColorTheme } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { ThemeDataContext } from '../theme';
-import { ChainIdColorTheme, getChainIdColorThemeParams } from './chain-id';
+import { ChainIdColorTheme, ChainIdColorThemeParams } from './chain-id';
 
 const DefaultIllustrativeColor = Color(0xEEEEEE);
 const Description = `Assigns an illustrative color that gives every chain a unique color with lighter carbons (inspired by David Goodsell's Molecule of the Month style).`;
 
-export const IllustrativeColorThemeParams = {};
+export const IllustrativeColorThemeParams = {
+    ...ChainIdColorThemeParams
+};
 export type IllustrativeColorThemeParams = typeof IllustrativeColorThemeParams
 export function getIllustrativeColorThemeParams(ctx: ThemeDataContext) {
     return IllustrativeColorThemeParams; // TODO return copy
 }
 
 export function IllustrativeColorTheme(ctx: ThemeDataContext, props: PD.Values<IllustrativeColorThemeParams>): ColorTheme<IllustrativeColorThemeParams> {
-    const { color: chainIdColor, legend } = ChainIdColorTheme(ctx, PD.getDefaultValues(getChainIdColorThemeParams(ctx)));
+    const { color: chainIdColor, legend } = ChainIdColorTheme(ctx, props);
 
     function illustrativeColor(location: Location, typeSymbol: ElementSymbol) {
         const baseColor = chainIdColor(location, false);