improved Representation params

src/apps/viewer/extensions/cellpack/model.ts

@@ -26,8 +26,6 @@ import { MolScriptBuilder as MS } from '../../../../mol-script/language/builder'
 import { getMatFromResamplePoints } from './curve';
 import { compile } from '../../../../mol-script/runtime/query/compiler';
 import { UniformColorThemeProvider } from '../../../../mol-theme/color/uniform';
-import { ThemeRegistryContext } from '../../../../mol-theme/theme';
-import { ColorTheme } from '../../../../mol-theme/color';
 import { CifCategory, CifField } from '../../../../mol-io/reader/cif';
 import { mmCIF_Schema } from '../../../../mol-io/reader/cif/schema/mmcif';
 import { Column } from '../../../../mol-data/db';
@@ -399,8 +397,8 @@ export const LoadCellPackModel = StateAction.build({
         cellpackTree
             .apply(StateTransforms.Representation.StructureRepresentation3D,
                 StructureRepresentation3DHelpers.createParams(ctx, Structure.Empty, {
-                    type: getReprParams(ctx, params.preset),
-                    color: getColorParams(hue)
+                    ...getReprParams(ctx, params.preset),
+                    ...getColorParams(hue)
                 })
             )
     }
@@ -415,7 +413,7 @@ export const LoadCellPackModel = StateAction.build({
             .apply(StateTransforms.Misc.CreateGroup, { label: 'HIV1_envelope_Membrane' })
             .apply(StateTransforms.Representation.StructureRepresentation3D,
                 StructureRepresentation3DHelpers.createParams(ctx, Structure.Empty, {
-                    type: getReprParams(ctx, params.preset),
+                    ...getReprParams(ctx, params.preset),
                     color: UniformColorThemeProvider
                 })
             )
@@ -431,50 +429,41 @@ function getReprParams(ctx: PluginContext, params: { representation: Representat
     switch (representation) {
         case 'spacefill':
             return traceOnly
-                ? [
-                    ctx.structureRepresentation.registry.get('spacefill'),
-                    () => ({ sizeFactor: 2, ignoreHydrogens: true })
-                ] as [any, any]
-                : [
-                    ctx.structureRepresentation.registry.get('spacefill'),
-                    () => ({ ignoreHydrogens: true })
-                ] as [any, any]
+                ? {
+                    type: ctx.structureRepresentation.registry.get('spacefill'),
+                    typeParams: { sizeFactor: 2, ignoreHydrogens: true }
+                } : {
+                    type: ctx.structureRepresentation.registry.get('spacefill'),
+                    typeParams: { ignoreHydrogens: true }
+                }
         case 'gaussian-surface':
-            return [
-                ctx.structureRepresentation.registry.get('gaussian-surface'),
-                () => ({
+            return {
+                type: ctx.structureRepresentation.registry.get('gaussian-surface'),
+                typeParams: {
                     quality: 'custom', resolution: 10, radiusOffset: 2,
                     alpha: 1.0, flatShaded: false, doubleSided: false,
                     ignoreHydrogens: true
-                })
-            ] as [any, any]
+                }
+            }
         case 'point':
-            return [
-                ctx.structureRepresentation.registry.get('point'),
-                () => ({ ignoreHydrogens: true })
-            ] as [any, any]
+            return { type: ctx.structureRepresentation.registry.get('point') }
         case 'ellipsoid':
-            return [
-                ctx.structureRepresentation.registry.get('orientation'),
-                () => ({})
-            ] as [any, any]
+            return { type: ctx.structureRepresentation.registry.get('orientation') }
     }
 }
 
-function getColorParams(hue: [number, number]) {
-    return [
-        ModelIndexColorThemeProvider,
-        (c: ColorTheme.Provider<any>, ctx: ThemeRegistryContext) => {
-            return {
-                palette: {
-                    name: 'generate',
-                    params: {
-                        hue, chroma: [30, 80], luminance: [15, 85],
-                        clusteringStepCount: 50, minSampleCount: 800,
-                        maxCount: 75
-                    }
+function getColorParams(hue: [number, number]): any {
+    return {
+        color: ModelIndexColorThemeProvider,
+        colorParams: {
+            palette: {
+                name: 'generate',
+                params: {
+                    hue, chroma: [30, 80], luminance: [15, 85],
+                    clusteringStepCount: 50, minSampleCount: 800,
+                    maxCount: 75
                 }
             }
         }
-    ] as [any, any]
+    }
 }

src/examples/proteopedia-wrapper/index.ts

@@ -410,8 +410,8 @@ class MolStarProteopediaWrapper {
         const asm = this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure;
         return StructureRepresentation3DHelpers.createParams(this.plugin, asm.data, {
             type: BuiltInStructureRepresentations['ball-and-stick'],
-            color: [BuiltInColorThemes.uniform, () => ({ value: ColorNames.gray })],
-            size: [BuiltInSizeThemes.uniform, () => ({ value: 0.33 } )]
+            color: BuiltInColorThemes.uniform, colorParams: { value: ColorNames.gray },
+            size: BuiltInSizeThemes.uniform, sizeParams: { value: 0.33 }
         });
     }
 

src/mol-plugin-state/manager/structure/component.ts

@@ -195,11 +195,12 @@ class StructureComponentManager extends PluginComponent<StructureComponentManage
 
         const { showHydrogens, visualQuality: quality } = this.state.options;
         const ignoreHydrogens = !showHydrogens;
-        const params = () => ({ ignoreHydrogens, quality });
+        const typeParams = { ignoreHydrogens, quality };
 
         for (const component of components) {
             await this.plugin.builders.structure.representation.addRepresentation(component.cell, {
-                type: [this.plugin.structureRepresentation.registry.get(type), params]
+                type: this.plugin.structureRepresentation.registry.get(type),
+                typeParams
             });
         }
     }

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

@@ -17,7 +17,7 @@ import { StateTransformer, StateObject } from '../../mol-state';
 import { Task } from '../../mol-task';
 import { BuiltInColorThemeName, BuiltInColorThemes, ColorTheme } from '../../mol-theme/color';
 import { BuiltInSizeThemeName, BuiltInSizeThemes, SizeTheme } from '../../mol-theme/size';
-import { Theme, ThemeRegistryContext } from '../../mol-theme/theme';
+import { Theme } from '../../mol-theme/theme';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { PluginStateObject as SO, PluginStateTransform } from '../objects';
 import { ColorNames } from '../../mol-util/color/names';
@@ -49,21 +49,6 @@ export { TransparencyStructureRepresentation3DFromBundle }
 export { VolumeRepresentation3D }
 
 namespace StructureRepresentation3DHelpers {
-    export function getDefaultParams(ctx: PluginContext, name: BuiltInStructureRepresentationsName, structure: Structure, structureParams?: Partial<PD.Values<StructureParams>>): StateTransformer.Params<StructureRepresentation3D> {
-        const type = ctx.structureRepresentation.registry.get(name);
-
-        const themeDataCtx = { structure };
-        const colorParams = ctx.structureRepresentation.themeCtx.colorThemeRegistry.get(type.defaultColorTheme.name).getParams(themeDataCtx);
-        const sizeParams = ctx.structureRepresentation.themeCtx.sizeThemeRegistry.get(type.defaultSizeTheme.name).getParams(themeDataCtx)
-        const structureDefaultParams = PD.getDefaultValues(type.getParams(ctx.structureRepresentation.themeCtx, structure))
-        return ({
-            type: { name, params: structureParams ? { ...structureDefaultParams, ...structureParams } : structureDefaultParams },
-            colorTheme: { name: type.defaultColorTheme.name, params: { ...PD.getDefaultValues(colorParams), ...type.defaultColorTheme.props } },
-            sizeTheme: { name: type.defaultSizeTheme.name, params: { ...PD.getDefaultValues(sizeParams), ...type.defaultSizeTheme.props } }
-        })
-    }
-
-
     export type BuildInProps<R extends BuiltInStructureRepresentationsName, C extends BuiltInColorThemeName, S extends BuiltInSizeThemeName> = {
         type?: R,
         typeParams?: Partial<RepresentationProvider.ParamValues<BuiltInStructureRepresentations[R]>>,
@@ -74,9 +59,12 @@ namespace StructureRepresentation3DHelpers {
     }
 
     export type Props<R extends RepresentationProvider<Structure, any, any> = any, C extends ColorTheme.Provider<any> = any, S extends SizeTheme.Provider<any> = any> = {
-        type?: R | [R, (r: R, ctx: ThemeRegistryContext, s: Structure) => Partial<RepresentationProvider.ParamValues<R>>],
-        color?: C | [C, (c: C, ctx: ThemeRegistryContext) => Partial<ColorTheme.ParamValues<C>>],
-        size?: S | [S, (c: S, ctx: ThemeRegistryContext) => Partial<SizeTheme.ParamValues<S>>]
+        type?: R,
+        typeParams?: Partial<RepresentationProvider.ParamValues<R>>,
+        color?: C,
+        colorParams?: Partial<ColorTheme.ParamValues<C>>,
+        size?: S,
+        sizeParams?: Partial<SizeTheme.ParamValues<S>>
     }
 
     export function createBuiltInParams<R extends BuiltInStructureRepresentationsName, C extends BuiltInColorThemeName, S extends BuiltInSizeThemeName>(
@@ -90,9 +78,12 @@ namespace StructureRepresentation3DHelpers {
             || ctx.structureRepresentation.themeCtx.sizeThemeRegistry.get(type.defaultSizeTheme.name);
 
         const ps: Props = {
-            type: props.typeParams ? [type, () => props.typeParams] : type,
-            color: props.colorParams ? [color, () => props.colorParams] : color,
-            size: props.sizeParams ? [size, () => props.sizeParams] : size
+            type: type,
+            typeParams: props.typeParams,
+            color,
+            colorParams: props.colorParams,
+            size,
+            sizeParams: props.sizeParams
         };
 
         return createParams(ctx, structure, ps);
@@ -104,29 +95,17 @@ namespace StructureRepresentation3DHelpers {
         const { themeCtx } = ctx.structureRepresentation
         const themeDataCtx = { structure }
 
-        const repr = props.type
-            ? props.type instanceof Array ? props.type[0] : props.type
-            : ctx.structureRepresentation.registry.default.provider;
+        const repr = props.type || ctx.structureRepresentation.registry.default.provider;
         const reprDefaultParams = PD.getDefaultValues(repr.getParams(themeCtx, structure));
-        const reprParams = props.type instanceof Array
-            ? { ...reprDefaultParams, ...props.type[1](repr as R, themeCtx, structure) }
-            : reprDefaultParams;
+        const reprParams = { ...reprDefaultParams, ...props.typeParams };
 
-        const color = props.color
-            ? props.color instanceof Array ? props.color[0] : props.color
-            : themeCtx.colorThemeRegistry.get(repr.defaultColorTheme.name);
+        const color = props.color || themeCtx.colorThemeRegistry.get(repr.defaultColorTheme.name);
         const colorDefaultParams = { ...PD.getDefaultValues(color.getParams(themeDataCtx)), ...repr.defaultColorTheme.props }
-        const colorParams = props.color instanceof Array
-            ? { ...colorDefaultParams, ...props.color[1](color as C, themeCtx) }
-            : colorDefaultParams;
+        const colorParams = { ...colorDefaultParams, ...props.colorParams };
 
-        const size = props.size
-            ? props.size instanceof Array ? props.size[0] : props.size
-            : themeCtx.sizeThemeRegistry.get(repr.defaultSizeTheme.name);
+        const size = props.size || themeCtx.sizeThemeRegistry.get(repr.defaultSizeTheme.name);
         const sizeDefaultParams = { ...PD.getDefaultValues(size.getParams(themeDataCtx)), ...repr.defaultSizeTheme.props }
-        const sizeParams = props.size instanceof Array
-            ? { ...sizeDefaultParams, ...props.size[1](size as S, themeCtx) }
-            : sizeDefaultParams;
+        const sizeParams = { ...sizeDefaultParams, ...props.sizeParams };
 
         return ({
             type: { name: ctx.structureRepresentation.registry.getName(repr), params: reprParams },

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

@@ -49,24 +49,24 @@ const TagSet: Set<StructureRepresentationInteractionTags> = new Set([StructureRe
 export class StructureRepresentationInteractionBehavior extends PluginBehavior.WithSubscribers<StructureRepresentationInteractionProps> {
     private createResVisualParams(s: Structure) {
         return StructureRepresentation3DHelpers.createParams(this.plugin, s, {
-            type: [BuiltInStructureRepresentations['ball-and-stick'], () => ({ })],
-            size: [BuiltInSizeThemes.uniform, () => ({ })]
+            type: BuiltInStructureRepresentations['ball-and-stick'],
+            size: BuiltInSizeThemes.uniform
         });
     }
 
     private createSurVisualParams(s: Structure) {
         return StructureRepresentation3DHelpers.createParams(this.plugin, s, {
-            type: [BuiltInStructureRepresentations['ball-and-stick'], () => ({ })],
-            color: [BuiltInColorThemes['element-symbol'], () => ({ })],
-            size: [BuiltInSizeThemes.uniform, () => ({ })]
+            type: BuiltInStructureRepresentations['ball-and-stick'],
+            color: BuiltInColorThemes['element-symbol'],
+            size: BuiltInSizeThemes.uniform
         });
     }
 
     private createSurNciVisualParams(s: Structure) {
         return StructureRepresentation3DHelpers.createParams(this.plugin, s, {
-            type: [InteractionsRepresentationProvider, () => ({ })],
-            color: [InteractionTypeColorThemeProvider, () => ({ })],
-            size: [BuiltInSizeThemes.uniform, () => ({ })]
+            type: InteractionsRepresentationProvider,
+            color: InteractionTypeColorThemeProvider,
+            size: BuiltInSizeThemes.uniform
         });
     }