wip, use params to type repr/visual

src/apps/canvas/structure-view.ts

@@ -18,7 +18,7 @@ import Canvas3D from 'mol-canvas3d/canvas3d';
 import { BehaviorSubject } from 'rxjs';
 import { App } from './app';
 import { StructureRepresentation } from 'mol-repr/structure/representation';
-import { ShapeRepresentation, ShapeProps } from 'mol-repr/shape/representation';
+import { ShapeRepresentation, ShapeParams } from 'mol-repr/shape/representation';
 
 export interface StructureView {
     readonly app: App
@@ -32,7 +32,7 @@ export interface StructureView {
     readonly active: { [k: string]: boolean }
     readonly structureRepresentations: { [k: string]: StructureRepresentation<any> }
     readonly updated: BehaviorSubject<null>
-    readonly symmetryAxes: ShapeRepresentation<ShapeProps>
+    readonly symmetryAxes: ShapeRepresentation<ShapeParams>
 
     setSymmetryAxes(value: boolean): void
     setStructureRepresentation(name: string, value: boolean): void

src/mol-repr/representation.ts

@@ -21,12 +21,12 @@ import { ThemeProps, Theme, ThemeRegistryContext } from 'mol-theme/theme';
 // }
 export type RepresentationProps = { [k: string]: any }
 
-export type RepresentationParamsGetter<D> = (ctx: ThemeRegistryContext, data: D) => PD.Params
+export type RepresentationParamsGetter<D, P extends PD.Params> = (ctx: ThemeRegistryContext, data: D) => P
 
 //
 
 export interface RepresentationProvider<D, P extends PD.Params> {
-    readonly factory: (getParams: RepresentationParamsGetter<D>) => Representation<D, PD.DefaultValues<P>>
+    readonly factory: (getParams: RepresentationParamsGetter<D, P>) => Representation<D, P>
     readonly getParams: (ctx: ThemeRegistryContext, data: D) => P
 }
 
@@ -65,12 +65,12 @@ export interface RepresentationContext {
 }
 
 export { Representation }
-interface Representation<D, P extends RepresentationProps = {}> {
+interface Representation<D, P extends PD.Params = {}> {
     readonly label: string
     readonly renderObjects: ReadonlyArray<RenderObject>
-    readonly props: Readonly<P>
-    readonly params: Readonly<PD.Params>
-    createOrUpdate: (ctx: RepresentationContext, props?: Partial<P>, themeProps?: ThemeProps, data?: D) => Task<void>
+    readonly props: Readonly<PD.DefaultValues<P>>
+    readonly params: Readonly<P>
+    createOrUpdate: (ctx: RepresentationContext, props?: Partial<PD.DefaultValues<P>>, themeProps?: ThemeProps, data?: D) => Task<void>
     getLoci: (pickingId: PickingId) => Loci
     mark: (loci: Loci, action: MarkerAction) => boolean
     destroy: () => void
@@ -85,11 +85,11 @@ namespace Representation {
         destroy: () => {}
     }
 
-    export type Def<D, P extends RepresentationProps = {}> = { [k: string]: (getParams: RepresentationParamsGetter<D>) => Representation<any, P> }
+    export type Def<D, P extends PD.Params = {}> = { [k: string]: (getParams: RepresentationParamsGetter<D, P>) => Representation<any, P> }
 
-    export function createMulti<D, P extends RepresentationProps = {}>(label: string, getParams: RepresentationParamsGetter<D>, reprDefs: Def<D, P>): Representation<D, P> {
-        let currentParams: PD.Params
-        let currentProps: P
+    export function createMulti<D, P extends PD.Params = {}>(label: string, getParams: RepresentationParamsGetter<D, P>, reprDefs: Def<D, P>): Representation<D, P> {
+        let currentParams: P
+        let currentProps: PD.DefaultValues<P>
         let currentData: D
 
         const reprMap: { [k: number]: string } = {}
@@ -166,9 +166,9 @@ export interface VisualContext {
     runtime: RuntimeContext,
 }
 
-export interface Visual<D, P extends RepresentationProps> {
+export interface Visual<D, P extends PD.Params> {
     readonly renderObject: RenderObject | undefined
-    createOrUpdate: (ctx: VisualContext, theme: Theme, props?: Partial<P>, data?: D) => Promise<void>
+    createOrUpdate: (ctx: VisualContext, theme: Theme, props?: Partial<PD.DefaultValues<P>>, data?: D) => Promise<void>
     getLoci: (pickingId: PickingId) => Loci
     mark: (loci: Loci, action: MarkerAction) => boolean
     destroy: () => void

src/mol-repr/shape/representation.ts

@@ -6,7 +6,7 @@
 
 import { Task } from 'mol-task'
 import { RenderObject, createMeshRenderObject, MeshRenderObject } from 'mol-gl/render-object';
-import { RepresentationProps, Representation, RepresentationContext } from '../representation';
+import { Representation, RepresentationContext } from '../representation';
 import { Loci, EmptyLoci, isEveryLoci } from 'mol-model/loci';
 import { ValueCell } from 'mol-util';
 import { Shape } from 'mol-model/shape';
@@ -20,28 +20,24 @@ import { MarkerAction, applyMarkerAction } from 'mol-geo/geometry/marker-data';
 import { LocationIterator } from 'mol-geo/util/location-iterator';
 import { ThemeProps, createTheme } from 'mol-theme/theme';
 
-export interface ShapeRepresentation<P extends RepresentationProps = {}> extends Representation<Shape, P> { }
+export interface ShapeRepresentation<P extends ShapeParams> extends Representation<Shape, P> { }
 
 export const ShapeParams = {
     ...Mesh.Params,
     // TODO
     // colorTheme: PD.Select<ColorThemeName>('Color Theme', '', 'shape-group', ColorThemeOptions)
 }
-export const DefaultShapeProps = PD.getDefaultValues(ShapeParams)
-export type ShapeProps = typeof DefaultShapeProps
+export type ShapeParams = typeof ShapeParams
 
-// TODO
-// export type ShapeRepresentation = ShapeRepresentation<ShapeProps>
-
-export function ShapeRepresentation<P extends ShapeProps>(): ShapeRepresentation<P> {
+export function ShapeRepresentation<P extends ShapeParams>(): ShapeRepresentation<P> {
     const renderObjects: RenderObject[] = []
     let _renderObject: MeshRenderObject | undefined
     let _shape: Shape
-    let currentProps: P
-    let currentParams: PD.Params
+    let currentProps: PD.DefaultValues<P> = PD.getDefaultValues(ShapeParams) as PD.DefaultValues<P>
+    let currentParams: P
 
-    function createOrUpdate(ctx: RepresentationContext, props: Partial<P> = {}, themeProps: ThemeProps = {}, shape?: Shape) {
-        currentProps = Object.assign({}, DefaultShapeProps, currentProps, props)
+    function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.DefaultValues<P>> = {}, themeProps: ThemeProps = {}, shape?: Shape) {
+        currentProps = Object.assign({}, currentProps, props)
         if (shape) _shape = shape
 
         return Task.create('ShapeRepresentation.create', async runtime => {

src/mol-repr/structure/complex-representation.ts

@@ -8,7 +8,7 @@
 import { Structure } from 'mol-model/structure';
 import { Task } from 'mol-task'
 import { Loci, EmptyLoci } from 'mol-model/loci';
-import { StructureProps, StructureRepresentation } from './representation';
+import { StructureRepresentation, StructureParams } from './representation';
 import { ComplexVisual } from './complex-visual';
 import { PickingId } from 'mol-geo/geometry/picking';
 import { MarkerAction } from 'mol-geo/geometry/marker-data';
@@ -16,19 +16,19 @@ import { RepresentationContext, RepresentationParamsGetter } from 'mol-repr/repr
 import { Theme, ThemeProps, createTheme } from 'mol-theme/theme';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
-export function ComplexRepresentation<P extends StructureProps>(label: string, getParams: RepresentationParamsGetter<Structure>, visualCtor: () => ComplexVisual<P>): StructureRepresentation<P> {
+export function ComplexRepresentation<P extends StructureParams>(label: string, getParams: RepresentationParamsGetter<Structure, P>, visualCtor: () => ComplexVisual<P>): StructureRepresentation<P> {
     let visual: ComplexVisual<P> | undefined
 
     let _structure: Structure
-    let _params: PD.Params
-    let _props: P
+    let _params: P
+    let _props: PD.DefaultValues<P>
     let _theme: Theme
 
-    function createOrUpdate(ctx: RepresentationContext, props: Partial<P> = {}, themeProps: ThemeProps = {}, structure?: Structure) {
+    function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.DefaultValues<P>> = {}, themeProps: ThemeProps = {}, structure?: Structure) {
         if (structure && structure !== _structure) {
             _params = getParams(ctx, structure)
             _structure = structure
-            if (!_props) _props = PD.getDefaultValues(_params) as P
+            if (!_props) _props = PD.getDefaultValues(_params)
         }
         _props = Object.assign({}, _props, props)
         _theme = createTheme(ctx, { structure: _structure }, props, themeProps, _theme)

src/mol-repr/structure/complex-visual.ts

@@ -8,7 +8,7 @@ import { Structure } from 'mol-model/structure';
 import { Visual, VisualContext } from '../representation';
 import { MeshRenderObject, LinesRenderObject, PointsRenderObject, DirectVolumeRenderObject } from 'mol-gl/render-object';
 import { createComplexMeshRenderObject, UnitKind, UnitKindOptions } from './visual/util/common';
-import { StructureProps, StructureMeshParams, StructureParams } from './representation';
+import { StructureMeshParams, StructureParams } from './representation';
 import { deepEqual, ValueCell } from 'mol-util';
 import { Loci, isEveryLoci, EmptyLoci } from 'mol-model/loci';
 import { Interval } from 'mol-data/int';
@@ -26,46 +26,45 @@ import { Theme } from 'mol-theme/theme';
 import { ColorTheme } from 'mol-theme/color';
 import { SizeTheme } from 'mol-theme/size';
 
-export interface  ComplexVisual<P extends StructureProps> extends Visual<Structure, P> { }
+export interface  ComplexVisual<P extends StructureParams> extends Visual<Structure, P> { }
 
 const ComplexParams = {
     ...StructureParams,
     unitKinds: PD.MultiSelect<UnitKind>('Unit Kind', '', ['atomic', 'spheres'], UnitKindOptions),
 }
-const DefaultComplexProps = PD.getDefaultValues(ComplexParams)
-type ComplexProps = typeof DefaultComplexProps
+type ComplexParams = typeof ComplexParams
 
 type ComplexRenderObject = MeshRenderObject | LinesRenderObject | PointsRenderObject | DirectVolumeRenderObject
 
-interface ComplexVisualBuilder<P extends ComplexProps, G extends Geometry> {
-    defaultProps: P
-    createGeometry(ctx: VisualContext, structure: Structure, theme: Theme, props: P, geometry?: G): Promise<G>
+interface ComplexVisualBuilder<P extends ComplexParams, G extends Geometry> {
+    defaultProps: PD.DefaultValues<P>
+    createGeometry(ctx: VisualContext, structure: Structure, theme: Theme, props: PD.DefaultValues<P>, geometry?: G): Promise<G>
     createLocationIterator(structure: Structure): LocationIterator
     getLoci(pickingId: PickingId, structure: Structure, id: number): Loci
     mark(loci: Loci, structure: Structure, apply: (interval: Interval) => boolean): boolean,
-    setUpdateState(state: VisualUpdateState, newProps: P, currentProps: P, newTheme: Theme, currentTheme: Theme): void
+    setUpdateState(state: VisualUpdateState, newProps: PD.DefaultValues<P>, currentProps: PD.DefaultValues<P>, newTheme: Theme, currentTheme: Theme): void
 }
 
-interface ComplexVisualGeometryBuilder<P extends ComplexProps, G extends Geometry> extends ComplexVisualBuilder<P, G> {
+interface ComplexVisualGeometryBuilder<P extends ComplexParams, G extends Geometry> extends ComplexVisualBuilder<P, G> {
     createEmptyGeometry(geometry?: G): G
-    createRenderObject(ctx: VisualContext, structure: Structure, geometry: Geometry, locationIt: LocationIterator, theme: Theme, currentProps: P): Promise<ComplexRenderObject>
-    updateValues(values: RenderableValues, newProps: P): void
+    createRenderObject(ctx: VisualContext, structure: Structure, geometry: Geometry, locationIt: LocationIterator, theme: Theme, currentProps: PD.DefaultValues<P>): Promise<ComplexRenderObject>
+    updateValues(values: RenderableValues, newProps: PD.DefaultValues<P>): void
 }
 
-export function ComplexVisual<P extends ComplexMeshProps>(builder: ComplexVisualGeometryBuilder<P, Geometry>): ComplexVisual<P> {
+export function ComplexVisual<P extends ComplexParams>(builder: ComplexVisualGeometryBuilder<P, Geometry>): ComplexVisual<P> {
     const { defaultProps, createGeometry, createLocationIterator, getLoci, mark, setUpdateState } = builder
     const { createRenderObject, updateValues } = builder
     const updateState = VisualUpdateState.create()
 
     let renderObject: ComplexRenderObject | undefined
-    let currentProps: P
+    let currentProps: PD.DefaultValues<P>
     let currentTheme: Theme
     let geometry: Geometry
     let currentStructure: Structure
     let locationIt: LocationIterator
     let conformationHash: number
 
-    async function create(ctx: VisualContext, structure: Structure, theme: Theme, props: Partial<P> = {}) {
+    async function create(ctx: VisualContext, structure: Structure, theme: Theme, props: Partial<PD.DefaultValues<P>> = {}) {
         currentProps = Object.assign({}, defaultProps, props)
         currentTheme = theme
         currentStructure = structure
@@ -77,7 +76,7 @@ export function ComplexVisual<P extends ComplexMeshProps>(builder: ComplexVisual
         renderObject = await createRenderObject(ctx, structure, geometry, locationIt, theme, currentProps)
     }
 
-    async function update(ctx: VisualContext, theme: Theme, props: Partial<P>) {
+    async function update(ctx: VisualContext, theme: Theme, props: Partial<PD.DefaultValues<P>>) {
         const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
 
         if (!renderObject) return false
@@ -124,7 +123,7 @@ export function ComplexVisual<P extends ComplexMeshProps>(builder: ComplexVisual
 
     return {
         get renderObject () { return renderObject },
-        async createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<P> = {}, structure?: Structure) {
+        async createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<PD.DefaultValues<P>> = {}, structure?: Structure) {
             if (!structure && !currentStructure) {
                 throw new Error('missing structure')
             } else if (structure && (!currentStructure || !renderObject)) {
@@ -176,15 +175,14 @@ export const ComplexMeshParams = {
     ...StructureMeshParams,
     unitKinds: PD.MultiSelect<UnitKind>('Unit Kind', '', [ 'atomic', 'spheres' ], UnitKindOptions),
 }
-export const DefaultComplexMeshProps = PD.getDefaultValues(ComplexMeshParams)
-export type ComplexMeshProps = typeof DefaultComplexMeshProps
+export type ComplexMeshParams = typeof ComplexMeshParams
 
-export interface ComplexMeshVisualBuilder<P extends ComplexMeshProps> extends ComplexVisualBuilder<P, Mesh> { }
+export interface ComplexMeshVisualBuilder<P extends ComplexMeshParams> extends ComplexVisualBuilder<P, Mesh> { }
 
-export function ComplexMeshVisual<P extends ComplexMeshProps>(builder: ComplexMeshVisualBuilder<P>): ComplexVisual<P> {
+export function ComplexMeshVisual<P extends ComplexMeshParams>(builder: ComplexMeshVisualBuilder<P>): ComplexVisual<P> {
     return ComplexVisual({
         ...builder,
-        setUpdateState: (state: VisualUpdateState, newProps: P, currentProps: P, newTheme: Theme, currentTheme: Theme) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<P>, currentProps: PD.DefaultValues<P>, newTheme: Theme, currentTheme: Theme) => {
             builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
             if (SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.createGeometry = true
         },

src/mol-repr/structure/representation.ts

@@ -23,36 +23,31 @@ export type StructureRepresentationProvider<P extends PD.Params> = Representatio
 export const StructureParams = {
     ...Geometry.Params,
 }
-export const DefaultStructureProps = PD.getDefaultValues(StructureParams)
-export type StructureProps = typeof DefaultStructureProps
+export type StructureParams = typeof StructureParams
 
 export const StructureMeshParams = {
     ...Mesh.Params,
     ...StructureParams,
 }
-export const DefaultStructureMeshProps = PD.getDefaultValues(StructureMeshParams)
-export type StructureMeshProps = typeof DefaultStructureMeshProps
+export type StructureMeshParams = typeof StructureMeshParams
 
 export const StructurePointsParams = {
     ...Points.Params,
     ...StructureParams,
 }
-export const DefaultStructurePointsProps = PD.getDefaultValues(StructurePointsParams)
-export type StructurePointsProps = typeof DefaultStructurePointsProps
+export type StructurePointsParams = typeof StructurePointsParams
 
 export const StructureLinesParams = {
     ...Lines.Params,
     ...StructureParams,
 }
-export const DefaultStructureLinesProps = PD.getDefaultValues(StructureLinesParams)
-export type StructureLinesProps = typeof DefaultStructureLinesProps
+export type StructureLinesParams = typeof StructureLinesParams
 
 export const StructureDirectVolumeParams = {
     ...DirectVolume.Params,
     ...StructureParams,
 }
-export const DefaultStructureDirectVolumeProps = PD.getDefaultValues(StructureDirectVolumeParams)
-export type StructureDirectVolumeProps = typeof DefaultStructureDirectVolumeProps
+export type StructureDirectVolumeParams = typeof StructureDirectVolumeParams
 
 export { ComplexRepresentation } from './complex-representation'
 export { UnitsRepresentation } from './units-representation'

src/mol-repr/structure/representation/ball-and-stick.ts

@@ -18,11 +18,10 @@ import { BuiltInSizeThemeName, BuiltInSizeThemeOptions } from 'mol-theme/size';
 import { BuiltInColorThemeName, BuiltInColorThemeOptions } from 'mol-theme/color';
 import { UnitKind, UnitKindOptions } from '../visual/util/common';
 
-type ParamsGetter = RepresentationParamsGetter<Structure>
 const BallAndStickVisuals = {
-    'element-sphere': (getParams: ParamsGetter) => UnitsRepresentation('Element sphere mesh', getParams, ElementSphereVisual),
-    'intra-link': (getParams: ParamsGetter) => UnitsRepresentation('Intra-unit link cylinder', getParams, IntraUnitLinkVisual),
-    'inter-link': (getParams: ParamsGetter) => ComplexRepresentation('Inter-unit link cylinder', getParams, InterUnitLinkVisual),
+    'element-sphere': (getParams: RepresentationParamsGetter<Structure, ElementSphereParams>) => UnitsRepresentation('Element sphere mesh', getParams, ElementSphereVisual),
+    'intra-link': (getParams: RepresentationParamsGetter<Structure, IntraUnitLinkParams>) => UnitsRepresentation('Intra-unit link cylinder', getParams, IntraUnitLinkVisual),
+    'inter-link': (getParams: RepresentationParamsGetter<Structure, InterUnitLinkParams>) => ComplexRepresentation('Inter-unit link cylinder', getParams, InterUnitLinkVisual),
 }
 type BallAndStickVisualName = keyof typeof BallAndStickVisuals
 const BallAndStickVisualOptions = Object.keys(BallAndStickVisuals).map(name => [name, name] as [BallAndStickVisualName, string])
@@ -37,15 +36,14 @@ export const BallAndStickParams = {
     colorTheme: PD.Select<BuiltInColorThemeName>('Color Theme', '', 'polymer-index', BuiltInColorThemeOptions),
     visuals: PD.MultiSelect<BallAndStickVisualName>('Visuals', '', ['element-sphere', 'intra-link', 'inter-link'], BallAndStickVisualOptions),
 }
+export type BallAndStickParams = typeof BallAndStickParams
 export function getBallAndStickParams(ctx: ThemeRegistryContext, structure: Structure) {
     return BallAndStickParams // TODO return copy
 }
-export type BallAndStickProps = PD.DefaultValues<typeof BallAndStickParams>
 
-export type BallAndStickRepresentation = StructureRepresentation<BallAndStickProps>
-
-export function BallAndStickRepresentation(getParams: ParamsGetter): BallAndStickRepresentation {
-    return Representation.createMulti('Ball & Stick', getParams, BallAndStickVisuals as unknown as Representation.Def<Structure, BallAndStickProps>)
+export type BallAndStickRepresentation = StructureRepresentation<BallAndStickParams>
+export function BallAndStickRepresentation(getParams: RepresentationParamsGetter<Structure, BallAndStickParams>): BallAndStickRepresentation {
+    return Representation.createMulti('Ball & Stick', getParams, BallAndStickVisuals as unknown as Representation.Def<Structure, BallAndStickParams>)
 }
 
 export const BallAndStickRepresentationProvider: StructureRepresentationProvider<typeof BallAndStickParams> = {

src/mol-repr/structure/representation/cartoon.ts

@@ -17,12 +17,11 @@ import { ThemeRegistryContext } from 'mol-theme/theme';
 import { BuiltInSizeThemeName, BuiltInSizeThemeOptions } from 'mol-theme/size';
 import { BuiltInColorThemeOptions, BuiltInColorThemeName } from 'mol-theme/color';
 
-type ParamsGetter = RepresentationParamsGetter<Structure>
 const CartoonVisuals = {
-    'polymer-trace': (getParams: ParamsGetter) => UnitsRepresentation('Polymer trace mesh', getParams, PolymerTraceVisual),
-    'polymer-gap': (getParams: ParamsGetter) => UnitsRepresentation('Polymer gap cylinder', getParams, PolymerGapVisual),
-    'nucleotide-block': (getParams: ParamsGetter) => UnitsRepresentation('Nucleotide block mesh', getParams, NucleotideBlockVisual),
-    'direction-wedge': (getParams: ParamsGetter) => UnitsRepresentation('Polymer direction wedge', getParams, PolymerDirectionVisual)
+    'polymer-trace': (getParams: RepresentationParamsGetter<Structure, PolymerTraceParams>) => UnitsRepresentation('Polymer trace mesh', getParams, PolymerTraceVisual),
+    'polymer-gap': (getParams: RepresentationParamsGetter<Structure, PolymerGapParams>) => UnitsRepresentation('Polymer gap cylinder', getParams, PolymerGapVisual),
+    'nucleotide-block': (getParams: RepresentationParamsGetter<Structure, NucleotideBlockParams>) => UnitsRepresentation('Nucleotide block mesh', getParams, NucleotideBlockVisual),
+    'direction-wedge': (getParams: RepresentationParamsGetter<Structure, PolymerDirectionParams>) => UnitsRepresentation('Polymer direction wedge', getParams, PolymerDirectionVisual)
 }
 type CartoonVisualName = keyof typeof CartoonVisuals
 const CartoonVisualOptions = Object.keys(CartoonVisuals).map(name => [name, name] as [CartoonVisualName, string])
@@ -37,16 +36,16 @@ export const CartoonParams = {
     colorTheme: PD.Select<BuiltInColorThemeName>('Color Theme', '', 'polymer-index', BuiltInColorThemeOptions),
     visuals: PD.MultiSelect<CartoonVisualName>('Visuals', '', ['polymer-trace', 'polymer-gap', 'nucleotide-block'], CartoonVisualOptions),
 }
+export type CartoonParams = typeof CartoonParams
 export function getCartoonParams(ctx: ThemeRegistryContext, structure: Structure) {
     return CartoonParams // TODO return copy
 }
-export type CartoonProps = PD.DefaultValues<typeof CartoonParams>
 
-export type CartoonRepresentation = StructureRepresentation<CartoonProps>
-export function CartoonRepresentation(getParams: ParamsGetter): CartoonRepresentation {
-    return Representation.createMulti('Cartoon', getParams, CartoonVisuals as unknown as Representation.Def<Structure, CartoonProps>)
+export type CartoonRepresentation = StructureRepresentation<CartoonParams>
+export function CartoonRepresentation(getParams: RepresentationParamsGetter<Structure, CartoonParams>): CartoonRepresentation {
+    return Representation.createMulti('Cartoon', getParams, CartoonVisuals as unknown as Representation.Def<Structure, CartoonParams>)
 }
 
-export const CartoonRepresentationProvider: StructureRepresentationProvider<typeof CartoonParams> = {
+export const CartoonRepresentationProvider: StructureRepresentationProvider<CartoonParams> = {
     factory: CartoonRepresentation, getParams: getCartoonParams
 }

src/mol-repr/structure/units-representation.ts

@@ -8,30 +8,37 @@
 import { Structure, Unit } from 'mol-model/structure';
 import { Task } from 'mol-task'
 import { RenderObject } from 'mol-gl/render-object';
-import { RepresentationProps, Visual, RepresentationContext, RepresentationParamsGetter } from '../representation';
+import { Visual, RepresentationContext, RepresentationParamsGetter } from '../representation';
 import { Loci, EmptyLoci, isEmptyLoci } from 'mol-model/loci';
 import { StructureGroup } from './units-visual';
-import { StructureProps, StructureRepresentation } from './representation';
+import { StructureRepresentation, StructureParams } from './representation';
 import { PickingId } from 'mol-geo/geometry/picking';
 import { MarkerAction } from 'mol-geo/geometry/marker-data';
 import { Theme, ThemeProps, createTheme } from 'mol-theme/theme';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { UnitKind, UnitKindOptions } from './visual/util/common';
 
-export interface UnitsVisual<P extends RepresentationProps = {}> extends Visual<StructureGroup, P> { }
+export const UnitsParams = {
+    ...StructureParams,
+    unitKinds: PD.MultiSelect<UnitKind>('Unit Kind', '', ['atomic', 'spheres'], UnitKindOptions),
+}
+export type UnitsParams = typeof UnitsParams
 
-export function UnitsRepresentation<P extends StructureProps>(label: string, getParams: RepresentationParamsGetter<Structure>, visualCtor: () => UnitsVisual<P>): StructureRepresentation<P> {
+export interface UnitsVisual<P extends UnitsParams> extends Visual<StructureGroup, P> { }
+
+export function UnitsRepresentation<P extends UnitsParams>(label: string, getParams: RepresentationParamsGetter<Structure, P>, visualCtor: () => UnitsVisual<P>): StructureRepresentation<P> {
     let visuals = new Map<number, { group: Unit.SymmetryGroup, visual: UnitsVisual<P> }>()
 
     let _structure: Structure
     let _groups: ReadonlyArray<Unit.SymmetryGroup>
-    let _params: PD.Params
-    let _props: P
+    let _params: P
+    let _props: PD.DefaultValues<P>
     let _theme: Theme
 
-    function createOrUpdate(ctx: RepresentationContext, props: Partial<P> = {}, themeProps: ThemeProps = {}, structure?: Structure) {
+    function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.DefaultValues<P>> = {}, themeProps: ThemeProps = {}, structure?: Structure) {
         if (structure && structure !== _structure) {
             _params = getParams(ctx, structure)
-            if (!_props) _props = PD.getDefaultValues(_params) as P
+            if (!_props) _props = PD.getDefaultValues(_params)
         }
         _props = Object.assign({}, _props, props)
         _theme = createTheme(ctx, { structure: structure || _structure }, props, themeProps, _theme)

src/mol-repr/structure/units-visual.ts

@@ -6,10 +6,10 @@
 
 import { Unit, Structure } from 'mol-model/structure';
 import { RepresentationProps, Visual, VisualContext } from '../representation';
-import { StructureMeshParams, StructurePointsParams, StructureLinesParams, StructureDirectVolumeParams, StructureParams } from './representation';
+import { StructureMeshParams, StructurePointsParams, StructureLinesParams, StructureDirectVolumeParams } from './representation';
 import { Loci, isEveryLoci, EmptyLoci } from 'mol-model/loci';
 import { MeshRenderObject, PointsRenderObject, LinesRenderObject, DirectVolumeRenderObject } from 'mol-gl/render-object';
-import { createUnitsMeshRenderObject, createUnitsPointsRenderObject, createUnitsTransform, createUnitsLinesRenderObject, createUnitsDirectVolumeRenderObject, UnitKind, UnitKindOptions, includesUnitKind } from './visual/util/common';
+import { createUnitsMeshRenderObject, createUnitsPointsRenderObject, createUnitsTransform, createUnitsLinesRenderObject, createUnitsDirectVolumeRenderObject, includesUnitKind } from './visual/util/common';
 import { deepEqual, ValueCell, UUID } from 'mol-util';
 import { Interval } from 'mol-data/int';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
@@ -28,6 +28,7 @@ import { VisualUpdateState } from 'mol-repr/util';
 import { Theme } from 'mol-theme/theme';
 import { ColorTheme } from 'mol-theme/color';
 import { SizeTheme } from 'mol-theme/size';
+import { UnitsParams } from './units-representation';
 
 export type StructureGroup = { structure: Structure, group: Unit.SymmetryGroup }
 
@@ -40,37 +41,30 @@ function sameGroupConformation(groupA: Unit.SymmetryGroup, groupB: Unit.Symmetry
     )
 }
 
-const UnitsParams = {
-    ...StructureParams,
-    unitKinds: PD.MultiSelect<UnitKind>('Unit Kind', '', ['atomic', 'spheres'], UnitKindOptions),
-}
-const DefaultUnitsProps = PD.getDefaultValues(UnitsParams)
-type UnitsProps = typeof DefaultUnitsProps
-
 type UnitsRenderObject = MeshRenderObject | LinesRenderObject | PointsRenderObject | DirectVolumeRenderObject
 
-interface UnitsVisualBuilder<P extends UnitsProps, G extends Geometry> {
-    defaultProps: P
-    createGeometry(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: P, geometry?: G): Promise<G>
+interface UnitsVisualBuilder<P extends UnitsParams, G extends Geometry> {
+    defaultProps: PD.DefaultValues<P>
+    createGeometry(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: PD.DefaultValues<P>, geometry?: G): Promise<G>
     createLocationIterator(group: Unit.SymmetryGroup): LocationIterator
     getLoci(pickingId: PickingId, structureGroup: StructureGroup, id: number): Loci
     mark(loci: Loci, structureGroup: StructureGroup, apply: (interval: Interval) => boolean): boolean
-    setUpdateState(state: VisualUpdateState, newProps: P, currentProps: P, newTheme: Theme, currentTheme: Theme): void
+    setUpdateState(state: VisualUpdateState, newProps: PD.DefaultValues<P>, currentProps: PD.DefaultValues<P>, newTheme: Theme, currentTheme: Theme): void
 }
 
-interface UnitsVisualGeometryBuilder<P extends UnitsProps, G extends Geometry> extends UnitsVisualBuilder<P, G> {
+interface UnitsVisualGeometryBuilder<P extends UnitsParams, G extends Geometry> extends UnitsVisualBuilder<P, G> {
     createEmptyGeometry(geometry?: G): G
-    createRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, geometry: Geometry, locationIt: LocationIterator, theme: Theme, currentProps: P): Promise<UnitsRenderObject>
-    updateValues(values: RenderableValues, newProps: P): void
+    createRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, geometry: Geometry, locationIt: LocationIterator, theme: Theme, currentProps: PD.DefaultValues<P>): Promise<UnitsRenderObject>
+    updateValues(values: RenderableValues, newProps: PD.DefaultValues<P>): void
 }
 
-export function UnitsVisual<P extends UnitsProps>(builder: UnitsVisualGeometryBuilder<P, Geometry>): UnitsVisual<P> {
+export function UnitsVisual<P extends UnitsParams>(builder: UnitsVisualGeometryBuilder<P, Geometry>): UnitsVisual<P> {
     const { defaultProps, createGeometry, createLocationIterator, getLoci, mark, setUpdateState } = builder
     const { createEmptyGeometry, createRenderObject, updateValues } = builder
     const updateState = VisualUpdateState.create()
 
     let renderObject: UnitsRenderObject | undefined
-    let currentProps: P
+    let currentProps: PD.DefaultValues<P>
     let currentTheme: Theme
     let geometry: Geometry
     let currentGroup: Unit.SymmetryGroup
@@ -78,7 +72,7 @@ export function UnitsVisual<P extends UnitsProps>(builder: UnitsVisualGeometryBu
     let locationIt: LocationIterator
     let currentConformationId: UUID
 
-    async function create(ctx: VisualContext, group: Unit.SymmetryGroup, theme: Theme, props: Partial<P> = {}) {
+    async function create(ctx: VisualContext, group: Unit.SymmetryGroup, theme: Theme, props: Partial<PD.DefaultValues<P>> = {}) {
         currentProps = Object.assign({}, defaultProps, props, { structure: currentStructure })
         currentTheme = theme
         currentGroup = group
@@ -94,7 +88,7 @@ export function UnitsVisual<P extends UnitsProps>(builder: UnitsVisualGeometryBu
         renderObject = await createRenderObject(ctx, group, geometry, locationIt, theme, currentProps)
     }
 
-    async function update(ctx: VisualContext, theme: Theme, props: Partial<P> = {}) {
+    async function update(ctx: VisualContext, theme: Theme, props: Partial<PD.DefaultValues<P>> = {}) {
         if (!renderObject) return
 
         const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
@@ -153,7 +147,7 @@ export function UnitsVisual<P extends UnitsProps>(builder: UnitsVisualGeometryBu
 
     return {
         get renderObject () { return renderObject },
-        async createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<P> = {}, structureGroup?: StructureGroup) {
+        async createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<PD.DefaultValues<P>> = {}, structureGroup?: StructureGroup) {
             if (structureGroup) currentStructure = structureGroup.structure
             const group = structureGroup ? structureGroup.group : undefined
             if (!group && !currentGroup) {
@@ -211,14 +205,13 @@ export const UnitsMeshParams = {
     ...StructureMeshParams,
     ...UnitsParams,
 }
-export const DefaultUnitsMeshProps = PD.getDefaultValues(UnitsMeshParams)
-export type UnitsMeshProps = typeof DefaultUnitsMeshProps
-export interface UnitsMeshVisualBuilder<P extends UnitsMeshProps> extends UnitsVisualBuilder<P, Mesh> { }
+export type UnitsMeshParams = typeof UnitsMeshParams
+export interface UnitsMeshVisualBuilder<P extends UnitsMeshParams> extends UnitsVisualBuilder<P, Mesh> { }
 
-export function UnitsMeshVisual<P extends UnitsMeshProps>(builder: UnitsMeshVisualBuilder<P>): UnitsVisual<P> {
+export function UnitsMeshVisual<P extends UnitsMeshParams>(builder: UnitsMeshVisualBuilder<P>): UnitsVisual<P> {
     return UnitsVisual({
         ...builder,
-        setUpdateState: (state: VisualUpdateState, newProps: P, currentProps: P, newTheme: Theme, currentTheme: Theme) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<P>, currentProps: PD.DefaultValues<P>, newTheme: Theme, currentTheme: Theme) => {
             builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
             if (SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.createGeometry = true
         },
@@ -234,16 +227,15 @@ export const UnitsPointsParams = {
     ...StructurePointsParams,
     ...UnitsParams,
 }
-export const DefaultUnitsPointsProps = PD.getDefaultValues(UnitsPointsParams)
-export type UnitsPointsProps = typeof DefaultUnitsPointsProps
-export interface UnitsPointVisualBuilder<P extends UnitsPointsProps> extends UnitsVisualBuilder<P, Points> { }
+export type UnitsPointsParams = typeof UnitsPointsParams
+export interface UnitsPointVisualBuilder<P extends UnitsPointsParams> extends UnitsVisualBuilder<P, Points> { }
 
-export function UnitsPointsVisual<P extends UnitsPointsProps>(builder: UnitsPointVisualBuilder<P>): UnitsVisual<P> {
+export function UnitsPointsVisual<P extends UnitsPointsParams>(builder: UnitsPointVisualBuilder<P>): UnitsVisual<P> {
     return UnitsVisual({
         ...builder,
         createEmptyGeometry: Points.createEmpty,
         createRenderObject: createUnitsPointsRenderObject,
-        setUpdateState: (state: VisualUpdateState, newProps: P, currentProps: P, newTheme: Theme, currentTheme: Theme) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<P>, currentProps: PD.DefaultValues<P>, newTheme: Theme, currentTheme: Theme) => {
             builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
             if (SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
         },
@@ -257,16 +249,15 @@ export const UnitsLinesParams = {
     ...StructureLinesParams,
     ...UnitsParams,
 }
-export const DefaultUnitsLinesProps = PD.getDefaultValues(UnitsLinesParams)
-export type UnitsLinesProps = typeof DefaultUnitsLinesProps
-export interface UnitsLinesVisualBuilder<P extends UnitsLinesProps> extends UnitsVisualBuilder<P, Lines> { }
+export type UnitsLinesParams = typeof UnitsLinesParams
+export interface UnitsLinesVisualBuilder<P extends UnitsLinesParams> extends UnitsVisualBuilder<P, Lines> { }
 
-export function UnitsLinesVisual<P extends UnitsLinesProps>(builder: UnitsLinesVisualBuilder<P>): UnitsVisual<P> {
+export function UnitsLinesVisual<P extends UnitsLinesParams>(builder: UnitsLinesVisualBuilder<P>): UnitsVisual<P> {
     return UnitsVisual({
         ...builder,
         createEmptyGeometry: Lines.createEmpty,
         createRenderObject: createUnitsLinesRenderObject,
-        setUpdateState: (state: VisualUpdateState, newProps: P, currentProps: P, newTheme: Theme, currentTheme: Theme) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<P>, currentProps: PD.DefaultValues<P>, newTheme: Theme, currentTheme: Theme) => {
             builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
             if (SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
         },
@@ -280,16 +271,15 @@ export const UnitsDirectVolumeParams = {
     ...StructureDirectVolumeParams,
     ...UnitsParams,
 }
-export const DefaultUnitsDirectVolumeProps = PD.getDefaultValues(UnitsDirectVolumeParams)
-export type UnitsDirectVolumeProps = typeof DefaultUnitsDirectVolumeProps
-export interface UnitsDirectVolumeVisualBuilder<P extends UnitsDirectVolumeProps> extends UnitsVisualBuilder<P, DirectVolume> { }
+export type UnitsDirectVolumeParams = typeof UnitsDirectVolumeParams
+export interface UnitsDirectVolumeVisualBuilder<P extends UnitsDirectVolumeParams> extends UnitsVisualBuilder<P, DirectVolume> { }
 
-export function UnitsDirectVolumeVisual<P extends UnitsDirectVolumeProps>(builder: UnitsDirectVolumeVisualBuilder<P>): UnitsVisual<P> {
+export function UnitsDirectVolumeVisual<P extends UnitsDirectVolumeParams>(builder: UnitsDirectVolumeVisualBuilder<P>): UnitsVisual<P> {
     return UnitsVisual({
         ...builder,
         createEmptyGeometry: DirectVolume.createEmpty,
         createRenderObject: createUnitsDirectVolumeRenderObject,
-        setUpdateState: (state: VisualUpdateState, newProps: P, currentProps: P, newTheme: Theme, currentTheme: Theme) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<P>, currentProps: PD.DefaultValues<P>, newTheme: Theme, currentTheme: Theme) => {
             builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
             if (SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.createGeometry = true
         },

src/mol-repr/structure/visual/carbohydrate-link-cylinder.ts

@@ -63,22 +63,18 @@ async function createCarbohydrateLinkCylinderMesh(ctx: VisualContext, structure:
 export const CarbohydrateLinkParams = {
     ...UnitsMeshParams,
     ...LinkCylinderParams,
-    // TODO
-    // sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
-    // sizeValue: PD.Numeric('Size Value', '', 1, 0, 20, 0.1),
     detail: PD.Numeric('Sphere Detail', '', 0, 0, 3, 1),
 }
-export const DefaultCarbohydrateLinkProps = PD.getDefaultValues(CarbohydrateLinkParams)
-export type CarbohydrateLinkProps = typeof DefaultCarbohydrateLinkProps
+export type CarbohydrateLinkParams = typeof CarbohydrateLinkParams
 
-export function CarbohydrateLinkVisual(): ComplexVisual<CarbohydrateLinkProps> {
-    return ComplexMeshVisual<CarbohydrateLinkProps>({
-        defaultProps: DefaultCarbohydrateLinkProps,
+export function CarbohydrateLinkVisual(): ComplexVisual<CarbohydrateLinkParams> {
+    return ComplexMeshVisual<CarbohydrateLinkParams>({
+        defaultProps: PD.getDefaultValues(CarbohydrateLinkParams),
         createGeometry: createCarbohydrateLinkCylinderMesh,
         createLocationIterator: CarbohydrateLinkIterator,
         getLoci: getLinkLoci,
         mark: markLink,
-        setUpdateState: (state: VisualUpdateState, newProps: CarbohydrateLinkProps, currentProps: CarbohydrateLinkProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<CarbohydrateLinkParams>, currentProps: PD.DefaultValues<CarbohydrateLinkParams>) => {
             state.createGeometry = newProps.radialSegments !== currentProps.radialSegments
         }
     })

src/mol-repr/structure/visual/carbohydrate-symbol-mesh.ts

@@ -44,7 +44,7 @@ const diamondPrism = DiamondPrism()
 const pentagonalPrism = PentagonalPrism()
 const hexagonalPrism = HexagonalPrism()
 
-async function createCarbohydrateSymbolMesh(ctx: VisualContext, structure: Structure, theme: Theme, props: CarbohydrateSymbolProps, mesh?: Mesh) {
+async function createCarbohydrateSymbolMesh(ctx: VisualContext, structure: Structure, theme: Theme, props: PD.DefaultValues<CarbohydrateSymbolParams>, mesh?: Mesh) {
     const builder = MeshBuilder.create(256, 128, mesh)
 
     const { detail } = props
@@ -147,22 +147,18 @@ async function createCarbohydrateSymbolMesh(ctx: VisualContext, structure: Struc
 
 export const CarbohydrateSymbolParams = {
     ...ComplexMeshParams,
-    // TODO
-    // sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
-    // sizeValue: PD.Numeric('Size Value', '', 1, 0, 10, 0.1),
     detail: PD.Numeric('Sphere Detail', '', 0, 0, 3, 1),
 }
-export const DefaultCarbohydrateSymbolProps = PD.getDefaultValues(CarbohydrateSymbolParams)
-export type CarbohydrateSymbolProps = typeof DefaultCarbohydrateSymbolProps
+export type CarbohydrateSymbolParams = typeof CarbohydrateSymbolParams
 
-export function CarbohydrateSymbolVisual(): ComplexVisual<CarbohydrateSymbolProps> {
-    return ComplexMeshVisual<CarbohydrateSymbolProps>({
-        defaultProps: DefaultCarbohydrateSymbolProps,
+export function CarbohydrateSymbolVisual(): ComplexVisual<CarbohydrateSymbolParams> {
+    return ComplexMeshVisual<CarbohydrateSymbolParams>({
+        defaultProps: PD.getDefaultValues(CarbohydrateSymbolParams),
         createGeometry: createCarbohydrateSymbolMesh,
         createLocationIterator: CarbohydrateElementIterator,
         getLoci: getCarbohydrateLoci,
         mark: markCarbohydrate,
-        setUpdateState: (state: VisualUpdateState, newProps: CarbohydrateSymbolProps, currentProps: CarbohydrateSymbolProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<CarbohydrateSymbolParams>, currentProps: PD.DefaultValues<CarbohydrateSymbolParams>) => {
             state.createGeometry = newProps.detail !== currentProps.detail
         }
     })

src/mol-repr/structure/visual/cross-link-restraint-cylinder.ts

@@ -53,21 +53,17 @@ async function createCrossLinkRestraintCylinderMesh(ctx: VisualContext, structur
 export const CrossLinkRestraintParams = {
     ...ComplexMeshParams,
     ...LinkCylinderParams,
-    // TODO
-    // sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
-    // sizeValue: PD.Numeric('Size Value', '', 1, 0, 20, 0.1),
 }
-export const DefaultCrossLinkRestraintProps = PD.getDefaultValues(CrossLinkRestraintParams)
-export type CrossLinkRestraintProps = typeof DefaultCrossLinkRestraintProps
+export type CrossLinkRestraintParams = typeof CrossLinkRestraintParams
 
-export function CrossLinkRestraintVisual(): ComplexVisual<CrossLinkRestraintProps> {
-    return ComplexMeshVisual<CrossLinkRestraintProps>({
-        defaultProps: DefaultCrossLinkRestraintProps,
+export function CrossLinkRestraintVisual(): ComplexVisual<CrossLinkRestraintParams> {
+    return ComplexMeshVisual<CrossLinkRestraintParams>({
+        defaultProps: PD.getDefaultValues(CrossLinkRestraintParams),
         createGeometry: createCrossLinkRestraintCylinderMesh,
         createLocationIterator: CrossLinkRestraintIterator,
         getLoci: getLinkLoci,
         mark: markLink,
-        setUpdateState: (state: VisualUpdateState, newProps: CrossLinkRestraintProps, currentProps: CrossLinkRestraintProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<CrossLinkRestraintParams>, currentProps: PD.DefaultValues<CrossLinkRestraintParams>) => {
             state.createGeometry = newProps.radialSegments !== currentProps.radialSegments
         }
     })

src/mol-repr/structure/visual/element-point.ts

@@ -18,17 +18,13 @@ import { Theme } from 'mol-theme/theme';
 
 export const ElementPointParams = {
     ...UnitsPointsParams,
-    // TODO
-    // sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
-    // sizeValue: PD.Numeric('Size Value', '', 3, 0, 20, 0.1),
     pointSizeAttenuation: PD.Boolean('Point Size Attenuation', '', false),
 }
-export const DefaultElementPointProps = PD.getDefaultValues(ElementPointParams)
-export type ElementPointProps = typeof DefaultElementPointProps
+export type ElementPointParams = typeof ElementPointParams
 
 // TODO size
 
-export async function createElementPoint(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: ElementPointProps, points: Points) {
+export async function createElementPoint(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: PD.DefaultValues<ElementPointParams>, points: Points) {
     const elements = unit.elements
     const n = elements.length
     const builder = PointsBuilder.create(n, n / 10, points)
@@ -47,14 +43,14 @@ export async function createElementPoint(ctx: VisualContext, unit: Unit, structu
     return builder.getPoints()
 }
 
-export function ElementPointVisual(): UnitsVisual<ElementPointProps> {
-    return UnitsPointsVisual<ElementPointProps>({
-        defaultProps: DefaultElementPointProps,
+export function ElementPointVisual(): UnitsVisual<ElementPointParams> {
+    return UnitsPointsVisual<ElementPointParams>({
+        defaultProps: PD.getDefaultValues(ElementPointParams),
         createGeometry: createElementPoint,
         createLocationIterator: StructureElementIterator.fromGroup,
         getLoci: getElementLoci,
         mark: markElement,
-        setUpdateState: (state: VisualUpdateState, newProps: ElementPointProps, currentProps: ElementPointProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<ElementPointParams>, currentProps: PD.DefaultValues<ElementPointParams>) => {
 
         }
     })

src/mol-repr/structure/visual/element-sphere.ts

@@ -18,17 +18,16 @@ export const ElementSphereParams = {
     sizeFactor: PD.Numeric('Size Factor', '', 1, 0, 10, 0.1),
     detail: PD.Numeric('Sphere Detail', '', 0, 0, 3, 1),
 }
-export const DefaultElementSphereProps = PD.getDefaultValues(ElementSphereParams)
-export type ElementSphereProps = typeof DefaultElementSphereProps
+export type ElementSphereParams = typeof ElementSphereParams
 
-export function ElementSphereVisual(): UnitsVisual<ElementSphereProps> {
-    return UnitsMeshVisual<ElementSphereProps>({
-        defaultProps: DefaultElementSphereProps,
+export function ElementSphereVisual(): UnitsVisual<ElementSphereParams> {
+    return UnitsMeshVisual<ElementSphereParams>({
+        defaultProps: PD.getDefaultValues(ElementSphereParams),
         createGeometry: createElementSphereMesh,
         createLocationIterator: StructureElementIterator.fromGroup,
         getLoci: getElementLoci,
         mark: markElement,
-        setUpdateState: (state: VisualUpdateState, newProps: ElementSphereProps, currentProps: ElementSphereProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<ElementSphereParams>, currentProps: PD.DefaultValues<ElementSphereParams>) => {
             state.createGeometry = newProps.detail !== currentProps.detail
         }
     })

src/mol-repr/structure/visual/gaussian-density-point.ts

@@ -21,13 +21,9 @@ import { Theme } from 'mol-theme/theme';
 export const GaussianDensityPointParams = {
     ...UnitsPointsParams,
     ...GaussianDensityParams,
-    // TODO
-    // sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
-    // sizeValue: PD.Numeric('Size Value', '', 1, 0, 20, 0.1),
     pointSizeAttenuation: PD.Boolean('Point Size Attenuation', '', false),
 }
-export const DefaultGaussianDensityPointProps = PD.getDefaultValues(GaussianDensityPointParams)
-export type GaussianDensityPointProps = typeof DefaultGaussianDensityPointProps
+export type GaussianDensityPointParams = typeof GaussianDensityPointParams
 
 export async function createGaussianDensityPoint(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: GaussianDensityProps, points?: Points) {
     const { transform, field: { space, data } } = await unit.computeGaussianDensity(props, ctx.runtime, ctx.webgl)
@@ -59,14 +55,14 @@ export async function createGaussianDensityPoint(ctx: VisualContext, unit: Unit,
     return builder.getPoints()
 }
 
-export function GaussianDensityPointVisual(): UnitsVisual<GaussianDensityPointProps> {
-    return UnitsPointsVisual<GaussianDensityPointProps>({
-        defaultProps: DefaultGaussianDensityPointProps,
+export function GaussianDensityPointVisual(): UnitsVisual<GaussianDensityPointParams> {
+    return UnitsPointsVisual<GaussianDensityPointParams>({
+        defaultProps: PD.getDefaultValues(GaussianDensityPointParams),
         createGeometry: createGaussianDensityPoint,
         createLocationIterator: StructureElementIterator.fromGroup,
         getLoci: () => EmptyLoci,
         mark: () => false,
-        setUpdateState: (state: VisualUpdateState, newProps: GaussianDensityPointProps, currentProps: GaussianDensityPointProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<GaussianDensityPointParams>, currentProps: PD.DefaultValues<GaussianDensityPointParams>) => {
             if (newProps.resolution !== currentProps.resolution) state.createGeometry = true
             if (newProps.radiusOffset !== currentProps.radiusOffset) state.createGeometry = true
             if (newProps.smoothness !== currentProps.smoothness) state.createGeometry = true

src/mol-repr/structure/visual/gaussian-density-volume.ts

@@ -31,17 +31,16 @@ export const GaussianDensityVolumeParams = {
     ...UnitsDirectVolumeParams,
     ...GaussianDensityParams,
 }
-export const DefaultGaussianDensityVolumeProps = PD.getDefaultValues(GaussianDensityVolumeParams)
-export type GaussianDensityVolumeProps = typeof DefaultGaussianDensityVolumeProps
+export type GaussianDensityVolumeParams = typeof GaussianDensityVolumeParams
 
-export function GaussianDensityVolumeVisual(): UnitsVisual<GaussianDensityVolumeProps> {
-    return UnitsDirectVolumeVisual<GaussianDensityVolumeProps>({
-        defaultProps: DefaultGaussianDensityVolumeProps,
+export function GaussianDensityVolumeVisual(): UnitsVisual<GaussianDensityVolumeParams> {
+    return UnitsDirectVolumeVisual<GaussianDensityVolumeParams>({
+        defaultProps: PD.getDefaultValues(GaussianDensityVolumeParams),
         createGeometry: createGaussianDensityVolume,
         createLocationIterator: StructureElementIterator.fromGroup,
         getLoci: getElementLoci,
         mark: markElement,
-        setUpdateState: (state: VisualUpdateState, newProps: GaussianDensityVolumeProps, currentProps: GaussianDensityVolumeProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<GaussianDensityVolumeParams>, currentProps: PD.DefaultValues<GaussianDensityVolumeParams>) => {
             if (newProps.resolution !== currentProps.resolution) state.createGeometry = true
             if (newProps.radiusOffset !== currentProps.radiusOffset) state.createGeometry = true
             if (newProps.smoothness !== currentProps.smoothness) {

src/mol-repr/structure/visual/gaussian-surface-mesh.ts

@@ -38,17 +38,16 @@ export const GaussianSurfaceParams = {
     ...UnitsMeshParams,
     ...GaussianDensityParams,
 }
-export const DefaultGaussianSurfaceProps = PD.getDefaultValues(GaussianSurfaceParams)
-export type GaussianSurfaceProps = typeof DefaultGaussianSurfaceProps
+export type GaussianSurfaceParams = typeof GaussianSurfaceParams
 
-export function GaussianSurfaceVisual(): UnitsVisual<GaussianSurfaceProps> {
-    return UnitsMeshVisual<GaussianSurfaceProps>({
-        defaultProps: DefaultGaussianSurfaceProps,
+export function GaussianSurfaceVisual(): UnitsVisual<GaussianSurfaceParams> {
+    return UnitsMeshVisual<GaussianSurfaceParams>({
+        defaultProps: PD.getDefaultValues(GaussianSurfaceParams),
         createGeometry: createGaussianSurfaceMesh,
         createLocationIterator: StructureElementIterator.fromGroup,
         getLoci: getElementLoci,
         mark: markElement,
-        setUpdateState: (state: VisualUpdateState, newProps: GaussianSurfaceProps, currentProps: GaussianSurfaceProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<GaussianSurfaceParams>, currentProps: PD.DefaultValues<GaussianSurfaceParams>) => {
             if (newProps.resolution !== currentProps.resolution) state.createGeometry = true
             if (newProps.radiusOffset !== currentProps.radiusOffset) state.createGeometry = true
             if (newProps.smoothness !== currentProps.smoothness) state.createGeometry = true

src/mol-repr/structure/visual/gaussian-surface-wireframe.ts

@@ -35,22 +35,18 @@ async function createGaussianWireframe(ctx: VisualContext, unit: Unit, structure
 export const GaussianWireframeParams = {
     ...UnitsLinesParams,
     ...GaussianDensityParams,
-    // TODO
-    // sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
-    // sizeValue: PD.Numeric('Size Value', '', 2, 0, 10, 0.1),
     lineSizeAttenuation: PD.Boolean('Line Size Attenuation', '', false),
 }
-export const DefaultGaussianWireframeProps = PD.getDefaultValues(GaussianWireframeParams)
-export type GaussianWireframeProps = typeof DefaultGaussianWireframeProps
+export type GaussianWireframeParams = typeof GaussianWireframeParams
 
-export function GaussianWireframeVisual(): UnitsVisual<GaussianWireframeProps> {
-    return UnitsLinesVisual<GaussianWireframeProps>({
-        defaultProps: DefaultGaussianWireframeProps,
+export function GaussianWireframeVisual(): UnitsVisual<GaussianWireframeParams> {
+    return UnitsLinesVisual<GaussianWireframeParams>({
+        defaultProps: PD.getDefaultValues(GaussianWireframeParams),
         createGeometry: createGaussianWireframe,
         createLocationIterator: StructureElementIterator.fromGroup,
         getLoci: getElementLoci,
         mark: markElement,
-        setUpdateState: (state: VisualUpdateState, newProps: GaussianWireframeProps, currentProps: GaussianWireframeProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<GaussianWireframeParams>, currentProps: PD.DefaultValues<GaussianWireframeParams>) => {
             if (newProps.resolution !== currentProps.resolution) state.createGeometry = true
             if (newProps.radiusOffset !== currentProps.radiusOffset) state.createGeometry = true
             if (newProps.smoothness !== currentProps.smoothness) state.createGeometry = true

src/mol-repr/structure/visual/inter-unit-link-cylinder.ts

@@ -53,17 +53,16 @@ export const InterUnitLinkParams = {
     ...ComplexMeshParams,
     ...LinkCylinderParams,
 }
-export const DefaultInterUnitLinkProps = PD.getDefaultValues(InterUnitLinkParams)
-export type InterUnitLinkProps = typeof DefaultInterUnitLinkProps
+export type InterUnitLinkParams = typeof InterUnitLinkParams
 
-export function InterUnitLinkVisual(): ComplexVisual<InterUnitLinkProps> {
-    return ComplexMeshVisual<InterUnitLinkProps>({
-        defaultProps: DefaultInterUnitLinkProps,
+export function InterUnitLinkVisual(): ComplexVisual<InterUnitLinkParams> {
+    return ComplexMeshVisual<InterUnitLinkParams>({
+        defaultProps: PD.getDefaultValues(InterUnitLinkParams),
         createGeometry: createInterUnitLinkCylinderMesh,
         createLocationIterator: LinkIterator.fromStructure,
         getLoci: getLinkLoci,
         mark: markLink,
-        setUpdateState: (state: VisualUpdateState, newProps: InterUnitLinkProps, currentProps: InterUnitLinkProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<InterUnitLinkParams>, currentProps: PD.DefaultValues<InterUnitLinkParams>) => {
             if (newProps.linkScale !== currentProps.linkScale) state.createGeometry = true
             if (newProps.linkSpacing !== currentProps.linkSpacing) state.createGeometry = true
             if (newProps.radialSegments !== currentProps.radialSegments) state.createGeometry = true

src/mol-repr/structure/visual/intra-unit-link-cylinder.ts

@@ -20,7 +20,7 @@ import { PickingId } from 'mol-geo/geometry/picking';
 import { VisualContext } from 'mol-repr/representation';
 import { Theme } from 'mol-theme/theme';
 
-async function createIntraUnitLinkCylinderMesh(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: IntraUnitLinkProps, mesh?: Mesh) {
+async function createIntraUnitLinkCylinderMesh(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: PD.DefaultValues<IntraUnitLinkParams>, mesh?: Mesh) {
     if (!Unit.isAtomic(unit)) return Mesh.createEmpty(mesh)
 
     const location = StructureElement.create(unit)
@@ -69,12 +69,11 @@ export const IntraUnitLinkParams = {
     ...LinkCylinderParams,
     sizeFactor: PD.Numeric('Size Factor', '', 0.2, 0, 10, 0.01),
 }
-export const DefaultIntraUnitLinkProps = PD.getDefaultValues(IntraUnitLinkParams)
-export type IntraUnitLinkProps = typeof DefaultIntraUnitLinkProps
+export type IntraUnitLinkParams = typeof IntraUnitLinkParams
 
-export function IntraUnitLinkVisual(): UnitsVisual<IntraUnitLinkProps> {
-    return UnitsMeshVisual<IntraUnitLinkProps>({
-        defaultProps: DefaultIntraUnitLinkProps,
+export function IntraUnitLinkVisual(): UnitsVisual<IntraUnitLinkParams> {
+    return UnitsMeshVisual<IntraUnitLinkParams>({
+        defaultProps: PD.getDefaultValues(IntraUnitLinkParams),
         createGeometry: createIntraUnitLinkCylinderMesh,
         createLocationIterator: LinkIterator.fromGroup,
         getLoci: getLinkLoci,

src/mol-repr/structure/visual/nucleotide-block-mesh.ts

@@ -123,12 +123,11 @@ export const NucleotideBlockParams = {
     ...UnitsMeshParams,
     ...NucleotideBlockMeshParams
 }
-export const DefaultNucleotideBlockProps = PD.getDefaultValues(NucleotideBlockParams)
-export type NucleotideBlockProps = typeof DefaultNucleotideBlockProps
+export type NucleotideBlockParams = typeof NucleotideBlockParams
 
-export function NucleotideBlockVisual(): UnitsVisual<NucleotideBlockProps> {
-    return UnitsMeshVisual<NucleotideBlockProps>({
-        defaultProps: DefaultNucleotideBlockProps,
+export function NucleotideBlockVisual(): UnitsVisual<NucleotideBlockParams> {
+    return UnitsMeshVisual<NucleotideBlockParams>({
+        defaultProps: PD.getDefaultValues(NucleotideBlockParams),
         createGeometry: createNucleotideBlockMesh,
         createLocationIterator: NucleotideLocationIterator.fromGroup,
         getLoci: getNucleotideElementLoci,

src/mol-repr/structure/visual/polymer-backbone-cylinder.ts

@@ -69,18 +69,17 @@ export const PolymerBackboneParams = {
     ...UnitsMeshParams,
     ...PolymerBackboneCylinderParams,
 }
-export const DefaultPolymerBackboneProps = PD.getDefaultValues(PolymerBackboneParams)
-export type PolymerBackboneProps = typeof DefaultPolymerBackboneProps
+export type PolymerBackboneParams = typeof PolymerBackboneParams
 
-export function PolymerBackboneVisual(): UnitsVisual<PolymerBackboneProps> {
-    return UnitsMeshVisual<PolymerBackboneProps>({
-        defaultProps: DefaultPolymerBackboneProps,
+export function PolymerBackboneVisual(): UnitsVisual<PolymerBackboneParams> {
+    return UnitsMeshVisual<PolymerBackboneParams>({
+        defaultProps: PD.getDefaultValues(PolymerBackboneParams),
         createGeometry: createPolymerBackboneCylinderMesh,
         // TODO create a specialized location iterator
         createLocationIterator: StructureElementIterator.fromGroup,
         getLoci: getElementLoci,
         mark: markElement,
-        setUpdateState: (state: VisualUpdateState, newProps: PolymerBackboneProps, currentProps: PolymerBackboneProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<PolymerBackboneParams>, currentProps: PD.DefaultValues<PolymerBackboneParams>) => {
             state.createGeometry = newProps.radialSegments !== currentProps.radialSegments
         }
     })

src/mol-repr/structure/visual/polymer-direction-wedge.ts

@@ -92,12 +92,11 @@ export const PolymerDirectionParams = {
     ...UnitsMeshParams,
     ...PolymerDirectionWedgeParams
 }
-export const DefaultPolymerDirectionProps = PD.getDefaultValues(PolymerDirectionParams)
-export type PolymerDirectionProps = typeof DefaultPolymerDirectionProps
+export type PolymerDirectionParams = typeof PolymerDirectionParams
 
-export function PolymerDirectionVisual(): UnitsVisual<PolymerDirectionProps> {
-    return UnitsMeshVisual<PolymerDirectionProps>({
-        defaultProps: DefaultPolymerDirectionProps,
+export function PolymerDirectionVisual(): UnitsVisual<PolymerDirectionParams> {
+    return UnitsMeshVisual<PolymerDirectionParams>({
+        defaultProps: PD.getDefaultValues(PolymerDirectionParams),
         createGeometry: createPolymerDirectionWedgeMesh,
         createLocationIterator: PolymerLocationIterator.fromGroup,
         getLoci: getPolymerElementLoci,

src/mol-repr/structure/visual/polymer-gap-cylinder.ts

@@ -78,10 +78,6 @@ async function createPolymerGapCylinderMesh(ctx: VisualContext, unit: Unit, stru
 export const InterUnitLinkParams = {
     ...UnitsMeshParams,
     ...LinkCylinderParams,
-    // TODO
-    // sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
-    // sizeValue: PD.Numeric('Size Value', '', 1, 0, 20, 0.1),
-    // sizeFactor: PD.Numeric('Size Factor', '', 0.3, 0, 10, 0.1),
 }
 export const DefaultIntraUnitLinkProps = PD.getDefaultValues(InterUnitLinkParams)
 export type IntraUnitLinkProps = typeof DefaultIntraUnitLinkProps
@@ -90,17 +86,16 @@ export const PolymerGapParams = {
     ...UnitsMeshParams,
     ...PolymerGapCylinderParams
 }
-export const DefaultPolymerGapProps = PD.getDefaultValues(PolymerGapParams)
-export type PolymerGapProps = typeof DefaultPolymerGapProps
+export type PolymerGapParams = typeof PolymerGapParams
 
-export function PolymerGapVisual(): UnitsVisual<PolymerGapProps> {
-    return UnitsMeshVisual<PolymerGapProps>({
-        defaultProps: DefaultPolymerGapProps,
+export function PolymerGapVisual(): UnitsVisual<PolymerGapParams> {
+    return UnitsMeshVisual<PolymerGapParams>({
+        defaultProps: PD.getDefaultValues(PolymerGapParams),
         createGeometry: createPolymerGapCylinderMesh,
         createLocationIterator: PolymerGapLocationIterator.fromGroup,
         getLoci: getPolymerGapElementLoci,
         mark: markPolymerGapElement,
-        setUpdateState: (state: VisualUpdateState, newProps: PolymerGapProps, currentProps: PolymerGapProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<PolymerGapParams>, currentProps: PD.DefaultValues<PolymerGapParams>) => {
             state.createGeometry = newProps.radialSegments !== currentProps.radialSegments
         }
     })

src/mol-repr/structure/visual/polymer-trace-mesh.ts

@@ -90,17 +90,16 @@ export const PolymerTraceParams = {
     ...UnitsMeshParams,
     ...PolymerTraceMeshParams
 }
-export const DefaultPolymerTraceProps = PD.getDefaultValues(PolymerTraceParams)
-export type PolymerTraceProps = typeof DefaultPolymerTraceProps
+export type PolymerTraceParams = typeof PolymerTraceParams
 
-export function PolymerTraceVisual(): UnitsVisual<PolymerTraceProps> {
-    return UnitsMeshVisual<PolymerTraceProps>({
-        defaultProps: DefaultPolymerTraceProps,
+export function PolymerTraceVisual(): UnitsVisual<PolymerTraceParams> {
+    return UnitsMeshVisual<PolymerTraceParams>({
+        defaultProps: PD.getDefaultValues(PolymerTraceParams),
         createGeometry: createPolymerTraceMesh,
         createLocationIterator: PolymerLocationIterator.fromGroup,
         getLoci: getPolymerElementLoci,
         mark: markPolymerElement,
-        setUpdateState: (state: VisualUpdateState, newProps: PolymerTraceProps, currentProps: PolymerTraceProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<PolymerTraceParams>, currentProps: PD.DefaultValues<PolymerTraceParams>) => {
             state.createGeometry = (
                 newProps.linearSegments !== currentProps.linearSegments ||
                 newProps.radialSegments !== currentProps.radialSegments ||

src/mol-repr/structure/visual/util/common.ts

@@ -5,7 +5,6 @@
  */
 
 import { Unit, Structure } from 'mol-model/structure';
-import { StructureProps } from '../../representation';
 import { createMeshRenderObject, createPointsRenderObject, createLinesRenderObject, createDirectVolumeRenderObject } from 'mol-gl/render-object';
 import { Mat4 } from 'mol-math/linear-algebra';
 import { TransformData, createTransform, createIdentityTransform } from 'mol-geo/geometry/transform-data';
@@ -17,6 +16,8 @@ import { Lines } from 'mol-geo/geometry/lines/lines';
 import { DirectVolume } from 'mol-geo/geometry/direct-volume/direct-volume';
 import { VisualContext } from 'mol-repr/representation';
 import { Theme } from 'mol-theme/theme';
+import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { StructureMeshParams, StructurePointsParams, StructureLinesParams, StructureDirectVolumeParams } from 'mol-repr/structure/representation';
 
 export function createUnitsTransform({ units }: Unit.SymmetryGroup, transformData?: TransformData) {
     const unitCount = units.length
@@ -48,16 +49,14 @@ export function includesUnitKind(unitKinds: UnitKind[], unit: Unit) {
 
 // mesh
 
-type StructureMeshProps = Mesh.Props & StructureProps
-
-export async function createComplexMeshRenderObject(ctx: VisualContext, structure: Structure, mesh: Mesh, locationIt: LocationIterator, theme: Theme, props: StructureMeshProps) {
+export async function createComplexMeshRenderObject(ctx: VisualContext, structure: Structure, mesh: Mesh, locationIt: LocationIterator, theme: Theme, props: PD.DefaultValues<StructureMeshParams>) {
     const transform = createIdentityTransform()
     const values = await Mesh.createValues(ctx.runtime, mesh, transform, locationIt, theme, props)
     const state = createRenderableState(props)
     return createMeshRenderObject(values, state)
 }
 
-export async function createUnitsMeshRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, mesh: Mesh, locationIt: LocationIterator, theme: Theme, props: StructureMeshProps) {
+export async function createUnitsMeshRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, mesh: Mesh, locationIt: LocationIterator, theme: Theme, props: PD.DefaultValues<StructureMeshParams>) {
     const transform = createUnitsTransform(group)
     const values = await Mesh.createValues(ctx.runtime, mesh, transform, locationIt, theme, props)
     const state = createRenderableState(props)
@@ -66,9 +65,7 @@ export async function createUnitsMeshRenderObject(ctx: VisualContext, group: Uni
 
 // points
 
-type StructurePointsProps = Points.Props & StructureProps
-
-export async function createUnitsPointsRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, points: Points, locationIt: LocationIterator, theme: Theme, props: StructurePointsProps) {
+export async function createUnitsPointsRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, points: Points, locationIt: LocationIterator, theme: Theme, props: PD.DefaultValues<StructurePointsParams>) {
     const transform = createUnitsTransform(group)
     const values = await Points.createValues(ctx.runtime, points, transform, locationIt, theme, props)
     const state = createRenderableState(props)
@@ -77,9 +74,7 @@ export async function createUnitsPointsRenderObject(ctx: VisualContext, group: U
 
 // lines
 
-type StructureLinesProps = Lines.Props & StructureProps
-
-export async function createUnitsLinesRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, lines: Lines, locationIt: LocationIterator, theme: Theme, props: StructureLinesProps) {
+export async function createUnitsLinesRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, lines: Lines, locationIt: LocationIterator, theme: Theme, props: PD.DefaultValues<StructureLinesParams>) {
     const transform = createUnitsTransform(group)
     const values = await Lines.createValues(ctx.runtime, lines, transform, locationIt, theme, props)
     const state = createRenderableState(props)
@@ -88,9 +83,7 @@ export async function createUnitsLinesRenderObject(ctx: VisualContext, group: Un
 
 // direct-volume
 
-type StructureDirectVolumeProps = DirectVolume.Props & StructureProps
-
-export async function createUnitsDirectVolumeRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, directVolume: DirectVolume, locationIt: LocationIterator, theme: Theme, props: StructureDirectVolumeProps) {
+export async function createUnitsDirectVolumeRenderObject(ctx: VisualContext, group: Unit.SymmetryGroup, directVolume: DirectVolume, locationIt: LocationIterator, theme: Theme, props: PD.DefaultValues<StructureDirectVolumeParams>) {
     const transform = createUnitsTransform(group)
     const values = await DirectVolume.createValues(ctx.runtime, directVolume, transform, locationIt, theme, props)
     const state = createRenderableState(props)

src/mol-repr/volume/direct-volume.ts

@@ -143,7 +143,7 @@ export function createDirectVolume3d(ctx: RuntimeContext, webgl: WebGLContext, v
 
 //
 
-export async function createDirectVolume(ctx: VisualContext, volume: VolumeData, props: DirectVolumeProps, directVolume?: DirectVolume) {
+export async function createDirectVolume(ctx: VisualContext, volume: VolumeData, props: PD.DefaultValues<DirectVolumeParams>, directVolume?: DirectVolume) {
     const { runtime, webgl } = ctx
     if (webgl === undefined) throw new Error('DirectVolumeVisual requires `webgl` in props')
 
@@ -159,20 +159,20 @@ export const DirectVolumeParams = {
     ...Geometry.Params,
     ...DirectVolume.Params
 }
+export type DirectVolumeParams = typeof DirectVolumeParams
 export function getDirectVolumeParams(ctx: ThemeRegistryContext, volume: VolumeData) {
     return DirectVolumeParams // TODO return copy
 }
-export type DirectVolumeProps = PD.DefaultValues<typeof DirectVolumeParams>
 
-export function DirectVolumeVisual(): VolumeVisual<DirectVolumeProps> {
-    return VolumeVisual<DirectVolumeProps>({
+export function DirectVolumeVisual(): VolumeVisual<DirectVolumeParams> {
+    return VolumeVisual<DirectVolumeParams>({
         defaultProps: PD.getDefaultValues(DirectVolumeParams),
         createGeometry: createDirectVolume,
         getLoci: () => EmptyLoci,
         mark: () => false,
-        setUpdateState: (state: VisualUpdateState, newProps: DirectVolumeProps, currentProps: DirectVolumeProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<DirectVolumeParams>, currentProps: PD.DefaultValues<DirectVolumeParams>) => {
         },
-        createRenderObject: async (ctx: VisualContext, geometry: DirectVolume, locationIt: LocationIterator, theme: Theme, props: DirectVolumeProps) => {
+        createRenderObject: async (ctx: VisualContext, geometry: DirectVolume, locationIt: LocationIterator, theme: Theme, props: PD.DefaultValues<DirectVolumeParams>) => {
             const transform = createIdentityTransform()
             const values = await DirectVolume.createValues(ctx.runtime, geometry, transform, locationIt, theme, props)
             const state = createRenderableState(props)
@@ -182,6 +182,6 @@ export function DirectVolumeVisual(): VolumeVisual<DirectVolumeProps> {
     })
 }
 
-export function DirectVolumeRepresentation(): VolumeRepresentation<DirectVolumeProps> {
+export function DirectVolumeRepresentation(): VolumeRepresentation<DirectVolumeParams> {
     return VolumeRepresentation('Direct Volume', getDirectVolumeParams, DirectVolumeVisual)
 }

src/mol-repr/volume/isosurface-mesh.ts

@@ -44,21 +44,21 @@ export const IsosurfaceParams = {
     isoValueAbsolute: PD.Range('Iso Value Absolute', '', 0.22, -1, 1, 0.01),
     isoValueRelative: PD.Range('Iso Value Relative', '', 2, -10, 10, 0.1),
 }
+export type IsosurfaceParams = typeof IsosurfaceParams
 export function getIsosurfaceParams(ctx: ThemeRegistryContext, volume: VolumeData) {
     return IsosurfaceParams // TODO return copy
 }
-export type IsosurfaceProps = PD.DefaultValues<typeof IsosurfaceParams>
 
-export function IsosurfaceVisual(): VolumeVisual<IsosurfaceProps> {
-    return VolumeVisual<IsosurfaceProps>({
+export function IsosurfaceVisual(): VolumeVisual<IsosurfaceParams> {
+    return VolumeVisual<IsosurfaceParams>({
         defaultProps: PD.getDefaultValues(IsosurfaceParams),
         createGeometry: createVolumeIsosurface,
         getLoci: () => EmptyLoci,
         mark: () => false,
-        setUpdateState: (state: VisualUpdateState, newProps: IsosurfaceProps, currentProps: IsosurfaceProps) => {
+        setUpdateState: (state: VisualUpdateState, newProps: PD.DefaultValues<IsosurfaceParams>, currentProps: PD.DefaultValues<IsosurfaceParams>) => {
             if (newProps.isoValueAbsolute !== currentProps.isoValueAbsolute) state.createGeometry = true
         },
-        createRenderObject: async (ctx: VisualContext, geometry: Mesh, locationIt: LocationIterator, theme: Theme, props: IsosurfaceProps) => {
+        createRenderObject: async (ctx: VisualContext, geometry: Mesh, locationIt: LocationIterator, theme: Theme, props: PD.DefaultValues<IsosurfaceParams>) => {
             const transform = createIdentityTransform()
             const values = await Mesh.createValues(ctx.runtime, geometry, transform, locationIt, theme, props)
             const state = createRenderableState(props)
@@ -68,6 +68,6 @@ export function IsosurfaceVisual(): VolumeVisual<IsosurfaceProps> {
     })
 }
 
-export function IsosurfaceRepresentation(): VolumeRepresentation<IsosurfaceProps> {
+export function IsosurfaceRepresentation(): VolumeRepresentation<IsosurfaceParams> {
     return VolumeRepresentation('Isosurface', getIsosurfaceParams, IsosurfaceVisual)
 }

src/mol-repr/volume/representation.ts

@@ -5,7 +5,7 @@
  */
 
 import { Task } from 'mol-task'
-import { RepresentationProps, Representation, Visual, RepresentationContext, VisualContext, RepresentationProvider, RepresentationParamsGetter } from '../representation';
+import { Representation, Visual, RepresentationContext, VisualContext, RepresentationProvider, RepresentationParamsGetter } from '../representation';
 import { VolumeData, VolumeIsoValue } from 'mol-model/volume';
 import { Loci, EmptyLoci, isEveryLoci } from 'mol-model/loci';
 import { Geometry, updateRenderableState } from 'mol-geo/geometry/geometry';
@@ -21,35 +21,35 @@ import { VisualUpdateState } from 'mol-repr/util';
 import { ValueCell } from 'mol-util';
 import { ThemeProps, Theme, createTheme } from 'mol-theme/theme';
 
-export interface VolumeVisual<P extends RepresentationProps = {}> extends Visual<VolumeData, P> { }
+export interface VolumeVisual<P extends VolumeParams> extends Visual<VolumeData, P> { }
 
 type VolumeRenderObject = MeshRenderObject | LinesRenderObject | PointsRenderObject | DirectVolumeRenderObject
 
-interface VolumeVisualBuilder<P extends VolumeProps, G extends Geometry> {
-    defaultProps: P
-    createGeometry(ctx: VisualContext, volumeData: VolumeData, props: P, geometry?: G): Promise<G>
+interface VolumeVisualBuilder<P extends VolumeParams, G extends Geometry> {
+    defaultProps: PD.DefaultValues<P>
+    createGeometry(ctx: VisualContext, volumeData: VolumeData, props: PD.DefaultValues<P>, geometry?: G): Promise<G>
     getLoci(pickingId: PickingId, id: number): Loci
     mark(loci: Loci, apply: (interval: Interval) => boolean): boolean
-    setUpdateState(state: VisualUpdateState, newProps: P, currentProps: P): void
+    setUpdateState(state: VisualUpdateState, newProps: PD.DefaultValues<P>, currentProps: PD.DefaultValues<P>): void
 }
 
-interface VolumeVisualGeometryBuilder<P extends VolumeProps, G extends Geometry> extends VolumeVisualBuilder<P, G> {
-    createRenderObject(ctx: VisualContext, geometry: G, locationIt: LocationIterator, theme: Theme, currentProps: P): Promise<VolumeRenderObject>
-    updateValues(values: RenderableValues, newProps: P): void
+interface VolumeVisualGeometryBuilder<P extends VolumeParams, G extends Geometry> extends VolumeVisualBuilder<P, G> {
+    createRenderObject(ctx: VisualContext, geometry: G, locationIt: LocationIterator, theme: Theme, currentProps: PD.DefaultValues<P>): Promise<VolumeRenderObject>
+    updateValues(values: RenderableValues, newProps: PD.DefaultValues<P>): void
 }
 
-export function VolumeVisual<P extends VolumeProps>(builder: VolumeVisualGeometryBuilder<P, Geometry>) {
+export function VolumeVisual<P extends VolumeParams>(builder: VolumeVisualGeometryBuilder<P, Geometry>) {
     const { defaultProps, createGeometry, getLoci, mark, setUpdateState } = builder
     const { createRenderObject, updateValues } = builder
     const updateState = VisualUpdateState.create()
 
-    let currentProps: P
+    let currentProps: PD.DefaultValues<P>
     let renderObject: VolumeRenderObject | undefined
     let currentVolume: VolumeData
     let geometry: Geometry
     let locationIt: LocationIterator
 
-    async function create(ctx: VisualContext, volume: VolumeData, theme: Theme, props: Partial<VolumeProps> = {}) {
+    async function create(ctx: VisualContext, volume: VolumeData, theme: Theme, props: Partial<PD.DefaultValues<P>> = {}) {
         currentProps = Object.assign({}, defaultProps, props)
         if (props.isoValueRelative) {
             currentProps.isoValueAbsolute = VolumeIsoValue.calcAbsolute(currentVolume.dataStats, props.isoValueRelative)
@@ -61,7 +61,7 @@ export function VolumeVisual<P extends VolumeProps>(builder: VolumeVisualGeometr
         renderObject = await createRenderObject(ctx, geometry, locationIt, theme, currentProps)
     }
 
-    async function update(ctx: VisualContext, theme: Theme, props: Partial<VolumeProps> = {}) {
+    async function update(ctx: VisualContext, theme: Theme, props: Partial<PD.DefaultValues<P>> = {}) {
         if (!renderObject) return
         const newProps = Object.assign({}, currentProps, props)
 
@@ -86,7 +86,7 @@ export function VolumeVisual<P extends VolumeProps>(builder: VolumeVisualGeometr
 
     return {
         get renderObject () { return renderObject },
-        async createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<VolumeProps> = {}, volume?: VolumeData) {
+        async createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<PD.DefaultValues<P>> = {}, volume?: VolumeData) {
             if (!volume && !currentVolume) {
                 throw new Error('missing volume')
             } else if (volume && (!currentVolume || !renderObject)) {
@@ -133,9 +133,9 @@ export function VolumeVisual<P extends VolumeProps>(builder: VolumeVisualGeometr
     }
 }
 
-export interface VolumeRepresentation<P extends RepresentationProps = {}> extends Representation<VolumeData, P> { }
+export interface VolumeRepresentation<P extends VolumeParams> extends Representation<VolumeData, P> { }
 
-export type VolumeRepresentationProvider<P extends PD.Params> = RepresentationProvider<VolumeData, P>
+export type VolumeRepresentationProvider<P extends VolumeParams> = RepresentationProvider<VolumeData, P>
 
 //
 
@@ -144,25 +144,26 @@ export const VolumeParams = {
     isoValueAbsolute: PD.Range('Iso Value Absolute', '', 0.22, -1, 1, 0.01),
     isoValueRelative: PD.Range('Iso Value Relative', '', 2, -10, 10, 0.1),
 }
-export const DefaultVolumeProps = PD.getDefaultValues(VolumeParams)
-export type VolumeProps = typeof DefaultVolumeProps
+export type VolumeParams = typeof VolumeParams
+// export const DefaultVolumeProps = PD.getDefaultValues(VolumeParams)
+// export type VolumeProps = typeof DefaultVolumeProps
 
-export function VolumeRepresentation<P extends VolumeProps>(label: string, getParams: RepresentationParamsGetter<VolumeData>, visualCtor: (volume: VolumeData) => VolumeVisual<P>): VolumeRepresentation<P> {
+export function VolumeRepresentation<P extends VolumeParams>(label: string, getParams: RepresentationParamsGetter<VolumeData, P>, visualCtor: (volume: VolumeData) => VolumeVisual<P>): VolumeRepresentation<P> {
     let visual: VolumeVisual<P>
 
     let _volume: VolumeData
-    let _props: P
-    let _params: PD.Params
+    let _props: PD.DefaultValues<P>
+    let _params: P
     let _theme: Theme
     let busy = false
 
-    function createOrUpdate(ctx: RepresentationContext, props: Partial<P> = {}, themeProps: ThemeProps = {}, volume?: VolumeData) {
+    function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.DefaultValues<P>> = {}, themeProps: ThemeProps = {}, volume?: VolumeData) {
         if (volume && volume !== _volume) {
             _params = getParams(ctx, volume)
             _volume = volume
-            if (!_props) _props = PD.getDefaultValues(_params) as P
+            if (!_props) _props = PD.getDefaultValues(_params)
         }
-        _props = Object.assign({}, DefaultVolumeProps, _props, props)
+        _props = Object.assign({}, _props, props)
         _theme = createTheme(ctx, _props, themeProps, {}, _theme)
 
         return Task.create('VolumeRepresentation.create', async runtime => {