wip, repr refactor, moved ctx to ctor

src/mol-plugin/context.ts

@@ -60,7 +60,7 @@ export class PluginContext {
 
     readonly lociLabels: LociLabelManager;
 
-    readonly structureReprensentation = {
+    readonly structureRepresentation = {
         registry: new StructureRepresentationRegistry(),
         themeCtx: { colorThemeRegistry: new ColorTheme.Registry(), sizeThemeRegistry: new SizeTheme.Registry() } as ThemeRegistryContext
     }
@@ -103,7 +103,7 @@ export class PluginContext {
      */
     fetch(url: string, type: 'string' | 'binary' = 'string'): Task<string | Uint8Array> {
         return ajaxGet({ url, type });
-        //const req = await fetch(url, { referrerPolicy: 'origin-when-cross-origin' });
+        // const req = await fetch(url, { referrerPolicy: 'origin-when-cross-origin' });
         // return type === 'string' ? await req.text() : new Uint8Array(await req.arrayBuffer());
     }
 

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

@@ -24,15 +24,15 @@ const StructureRepresentation3D = PluginStateTransform.Create<SO.Molecule.Struct
     to: [SO.Molecule.Representation3D],
     params: (a, ctx: PluginContext) => ({
         type: PD.Mapped(
-            ctx.structureReprensentation.registry.default.name,
-            ctx.structureReprensentation.registry.types,
-            name => PD.Group<any>(ctx.structureReprensentation.registry.get(name).getParams(ctx.structureReprensentation.themeCtx, a.data)))
+            ctx.structureRepresentation.registry.default.name,
+            ctx.structureRepresentation.registry.types,
+            name => PD.Group<any>(ctx.structureRepresentation.registry.get(name).getParams(ctx.structureRepresentation.themeCtx, a.data)))
     }),
     apply({ a, params }, plugin: PluginContext) {
         return Task.create('Structure Representation', async ctx => {
-            const provider = plugin.structureReprensentation.registry.get(params.type.name)
-            const repr = provider.factory(provider.getParams)
-            await repr.createOrUpdate({ webgl: plugin.canvas3d.webgl, ...plugin.structureReprensentation.themeCtx }, params.type.params || {}, a.data).runInContext(ctx);
+            const provider = plugin.structureRepresentation.registry.get(params.type.name)
+            const repr = provider.factory({ webgl: plugin.canvas3d.webgl, ...plugin.structureRepresentation.themeCtx }, provider.getParams)
+            await repr.createOrUpdate(params.type.params || {}, a.data).runInContext(ctx);
             return new SO.Molecule.Representation3D(repr, { label: provider.label });
         });
     },
@@ -40,7 +40,7 @@ const StructureRepresentation3D = PluginStateTransform.Create<SO.Molecule.Struct
         return Task.create('Structure Representation', async ctx => {
             if (newParams.type.name !== oldParams.type.name) return Transformer.UpdateResult.Recreate;
 
-            await b.data.createOrUpdate({ webgl: plugin.canvas3d.webgl, ...plugin.structureReprensentation.themeCtx }, { ...b.data.props, ...newParams.type.params }, a.data).runInContext(ctx);
+            await b.data.createOrUpdate({ ...b.data.props, ...newParams.type.params }, a.data).runInContext(ctx);
             return Transformer.UpdateResult.Updated;
         });
     }

src/mol-repr/representation.ts

@@ -22,15 +22,22 @@ import { Subject } from 'rxjs';
 // }
 export type RepresentationProps = { [k: string]: any }
 
+export interface RepresentationContext {
+    readonly webgl?: WebGLContext
+    readonly colorThemeRegistry: ColorTheme.Registry
+    readonly sizeThemeRegistry: SizeTheme.Registry
+}
+
 export type RepresentationParamsGetter<D, P extends PD.Params> = (ctx: ThemeRegistryContext, data: D) => P
+export type RepresentationFactory<D, P extends PD.Params> = (ctx: RepresentationContext, getParams: RepresentationParamsGetter<D, P>) => Representation<D, P>
 
 //
 
 export interface RepresentationProvider<D, P extends PD.Params> {
     readonly label: string
     readonly description: string
-    readonly factory: (getParams: RepresentationParamsGetter<D, P>) => Representation<D, P>
-    readonly getParams: (ctx: ThemeRegistryContext, data: D) => P
+    readonly factory: RepresentationFactory<D, P>
+    readonly getParams: RepresentationParamsGetter<D, P>
     readonly defaultValues: PD.Values<P>
 }
 
@@ -71,12 +78,6 @@ export class RepresentationRegistry<D> {
 
 //
 
-export interface RepresentationContext {
-    webgl?: WebGLContext
-    colorThemeRegistry: ColorTheme.Registry
-    sizeThemeRegistry: SizeTheme.Registry
-}
-
 export { Representation }
 interface Representation<D, P extends PD.Params = {}> {
     readonly label: string
@@ -86,7 +87,7 @@ interface Representation<D, P extends PD.Params = {}> {
     readonly renderObjects: ReadonlyArray<RenderObject>
     readonly props: Readonly<PD.Values<P>>
     readonly params: Readonly<P>
-    createOrUpdate: (ctx: RepresentationContext, props?: Partial<PD.Values<P>>, data?: D) => Task<void>
+    createOrUpdate: (props?: Partial<PD.Values<P>>, data?: D) => Task<void>
     getLoci: (pickingId: PickingId) => Loci
     mark: (loci: Loci, action: MarkerAction) => boolean
     setVisibility: (value: boolean) => void
@@ -105,9 +106,9 @@ namespace Representation {
         destroy: () => {}
     }
 
-    export type Def<D, P extends PD.Params = {}> = { [k: string]: (getParams: RepresentationParamsGetter<D, P>) => Representation<any, P> }
+    export type Def<D, P extends PD.Params = {}> = { [k: string]: RepresentationFactory<D, P> }
 
-    export function createMulti<D, P extends PD.Params = {}>(label: string, getParams: RepresentationParamsGetter<D, P>, reprDefs: Def<D, P>): Representation<D, P> {
+    export function createMulti<D, P extends PD.Params = {}>(label: string, ctx: RepresentationContext, getParams: RepresentationParamsGetter<D, P>, reprDefs: Def<D, P>): Representation<D, P> {
         let version = 0
         const updated = new Subject<number>()
 
@@ -118,7 +119,7 @@ namespace Representation {
         const reprMap: { [k: number]: string } = {}
         const reprList: Representation<D, P>[] = Object.keys(reprDefs).map((name, i) => {
             reprMap[i] = name
-            return reprDefs[name](getParams)
+            return reprDefs[name](ctx, getParams)
         })
 
         return {
@@ -154,7 +155,7 @@ namespace Representation {
                 return props as P
             },
             get params() { return currentParams },
-            createOrUpdate: (ctx: RepresentationContext, props: Partial<P> = {}, data?: D) => {
+            createOrUpdate: (props: Partial<P> = {}, data?: D) => {
                 if (data && data !== currentData) {
                     currentParams = getParams(ctx, data)
                     currentData = data
@@ -167,7 +168,7 @@ namespace Representation {
                 return Task.create(`Creating '${label}' representation`, async runtime => {
                     for (let i = 0, il = reprList.length; i < il; ++i) {
                         if (!visuals || visuals.includes(reprMap[i])) {
-                            await reprList[i].createOrUpdate(ctx, currentProps, currentData).runInContext(runtime)
+                            await reprList[i].createOrUpdate(currentProps, currentData).runInContext(runtime)
                         }
                     }
                     updated.next(version++)
@@ -209,9 +210,10 @@ namespace Representation {
 //
 
 export interface VisualContext {
-    webgl?: WebGLContext
-    runtime: RuntimeContext,
+    readonly runtime: RuntimeContext
+    readonly webgl?: WebGLContext
 }
+// export type VisualFactory<D, P extends PD.Params> = (ctx: VisualContext) => Visual<D, P>
 
 export interface Visual<D, P extends PD.Params> {
     /** Number of addressable groups in all instances of the visual */

src/mol-repr/shape/representation.ts

@@ -30,7 +30,7 @@ export const ShapeParams = {
 }
 export type ShapeParams = typeof ShapeParams
 
-export function ShapeRepresentation<P extends ShapeParams>(): ShapeRepresentation<P> {
+export function ShapeRepresentation<P extends ShapeParams>(ctx: RepresentationContext): ShapeRepresentation<P> {
     let version = 0
     const updated = new Subject<number>()
     const renderObjects: RenderObject[] = []
@@ -40,7 +40,7 @@ export function ShapeRepresentation<P extends ShapeParams>(): ShapeRepresentatio
     let currentParams: P
     let locationIt: LocationIterator
 
-    function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, shape?: Shape) {
+    function createOrUpdate(props: Partial<PD.Values<P>> = {}, shape?: Shape) {
         currentProps = Object.assign({}, currentProps, props)
         if (shape) _shape = shape
 

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

@@ -17,7 +17,7 @@ import { Theme, createTheme } from 'mol-theme/theme';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { Subject } from 'rxjs';
 
-export function ComplexRepresentation<P extends StructureParams>(label: string, getParams: RepresentationParamsGetter<Structure, P>, visualCtor: () => ComplexVisual<P>): StructureRepresentation<P> {
+export function ComplexRepresentation<P extends StructureParams>(label: string, ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, P>, visualCtor: () => ComplexVisual<P>): StructureRepresentation<P> {
     let version = 0
     const updated = new Subject<number>()
     let visual: ComplexVisual<P> | undefined
@@ -27,7 +27,7 @@ export function ComplexRepresentation<P extends StructureParams>(label: string,
     let _props: PD.Values<P>
     let _theme: Theme
 
-    function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, structure?: Structure) {
+    function createOrUpdate(props: Partial<PD.Values<P>> = {}, structure?: Structure) {
         if (structure && structure !== _structure) {
             _params = getParams(ctx, structure)
             _structure = structure
@@ -38,7 +38,7 @@ export function ComplexRepresentation<P extends StructureParams>(label: string,
 
         return Task.create('Creating or updating ComplexRepresentation', async runtime => {
             if (!visual) visual = visualCtor()
-            await visual.createOrUpdate({ ...ctx, runtime }, _theme, _props, structure)
+            await visual.createOrUpdate({ webgl: ctx.webgl, runtime }, _theme, _props, structure)
             updated.next(version++)
         });
     }

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

@@ -11,16 +11,16 @@ import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { UnitsRepresentation } from '../units-representation';
 import { ComplexRepresentation } from '../complex-representation';
 import { StructureRepresentation, StructureRepresentationProvider } from '../representation';
-import { Representation, RepresentationParamsGetter } from 'mol-repr/representation';
+import { Representation, RepresentationParamsGetter, RepresentationContext } from 'mol-repr/representation';
 import { ThemeRegistryContext } from 'mol-theme/theme';
 import { Structure } from 'mol-model/structure';
 import { BuiltInColorThemeOptions, BuiltInColorThemes, ColorTheme } from 'mol-theme/color';
 import { UnitKind, UnitKindOptions } from '../visual/util/common';
 
 const BallAndStickVisuals = {
-    '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),
+    'element-sphere': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, ElementSphereParams>) => UnitsRepresentation('Element sphere mesh', ctx, getParams, ElementSphereVisual),
+    'intra-link': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, IntraUnitLinkParams>) => UnitsRepresentation('Intra-unit link cylinder', ctx, getParams, IntraUnitLinkVisual),
+    'inter-link': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, InterUnitLinkParams>) => ComplexRepresentation('Inter-unit link cylinder', ctx, getParams, InterUnitLinkVisual),
 }
 type BallAndStickVisualName = keyof typeof BallAndStickVisuals
 const BallAndStickVisualOptions = Object.keys(BallAndStickVisuals).map(name => [name, name] as [BallAndStickVisualName, string])
@@ -41,8 +41,8 @@ export function getBallAndStickParams(ctx: ThemeRegistryContext, structure: Stru
 }
 
 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 function BallAndStickRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, BallAndStickParams>): BallAndStickRepresentation {
+    return Representation.createMulti('Ball & Stick', ctx, getParams, BallAndStickVisuals as unknown as Representation.Def<Structure, BallAndStickParams>)
 }
 
 export const BallAndStickRepresentationProvider: StructureRepresentationProvider<typeof BallAndStickParams> = {

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

@@ -10,15 +10,15 @@ import { CarbohydrateTerminalLinkParams, CarbohydrateTerminalLinkVisual } from '
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { ComplexRepresentation } from '../complex-representation';
 import { StructureRepresentation, StructureRepresentationProvider } from '../representation';
-import { Representation, RepresentationParamsGetter } from 'mol-repr/representation';
+import { Representation, RepresentationParamsGetter, RepresentationContext } from 'mol-repr/representation';
 import { ThemeRegistryContext } from 'mol-theme/theme';
 import { Structure } from 'mol-model/structure';
 import { BuiltInColorThemeOptions, getBuiltInColorThemeParams } from 'mol-theme/color';
 
 const CarbohydrateVisuals = {
-    'carbohydrate-symbol': (getParams: RepresentationParamsGetter<Structure, CarbohydrateSymbolParams>) => ComplexRepresentation('Carbohydrate symbol mesh', getParams, CarbohydrateSymbolVisual),
-    'carbohydrate-link': (getParams: RepresentationParamsGetter<Structure, CarbohydrateLinkParams>) => ComplexRepresentation('Carbohydrate link cylinder', getParams, CarbohydrateLinkVisual),
-    'carbohydrate-terminal-link': (getParams: RepresentationParamsGetter<Structure, CarbohydrateTerminalLinkParams>) => ComplexRepresentation('Carbohydrate terminal link cylinder', getParams, CarbohydrateTerminalLinkVisual),
+    'carbohydrate-symbol': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, CarbohydrateSymbolParams>) => ComplexRepresentation('Carbohydrate symbol mesh', ctx, getParams, CarbohydrateSymbolVisual),
+    'carbohydrate-link': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, CarbohydrateLinkParams>) => ComplexRepresentation('Carbohydrate link cylinder', ctx, getParams, CarbohydrateLinkVisual),
+    'carbohydrate-terminal-link': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, CarbohydrateTerminalLinkParams>) => ComplexRepresentation('Carbohydrate terminal link cylinder', ctx, getParams, CarbohydrateTerminalLinkVisual),
 }
 type CarbohydrateVisualName = keyof typeof CarbohydrateVisuals
 const CarbohydrateVisualOptions = Object.keys(CarbohydrateVisuals).map(name => [name, name] as [CarbohydrateVisualName, string])
@@ -37,8 +37,8 @@ export function getCarbohydrateParams(ctx: ThemeRegistryContext, structure: Stru
 }
 
 export type CarbohydrateRepresentation = StructureRepresentation<CarbohydrateParams>
-export function CarbohydrateRepresentation(getParams: RepresentationParamsGetter<Structure, CarbohydrateParams>): CarbohydrateRepresentation {
-    return Representation.createMulti('Carbohydrate', getParams, CarbohydrateVisuals as unknown as Representation.Def<Structure, CarbohydrateParams>)
+export function CarbohydrateRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, CarbohydrateParams>): CarbohydrateRepresentation {
+    return Representation.createMulti('Carbohydrate', ctx, getParams, CarbohydrateVisuals as unknown as Representation.Def<Structure, CarbohydrateParams>)
 }
 
 export const CarbohydrateRepresentationProvider: StructureRepresentationProvider<CarbohydrateParams> = {

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

@@ -10,17 +10,17 @@ import { NucleotideBlockVisual, NucleotideBlockParams } from '../visual/nucleoti
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { UnitsRepresentation } from '../units-representation';
 import { StructureRepresentation, StructureRepresentationProvider } from '../representation';
-import { Representation, RepresentationParamsGetter } from 'mol-repr/representation';
+import { Representation, RepresentationParamsGetter, RepresentationContext } from 'mol-repr/representation';
 import { PolymerDirectionVisual, PolymerDirectionParams } from '../visual/polymer-direction-wedge';
 import { Structure } from 'mol-model/structure';
 import { ThemeRegistryContext } from 'mol-theme/theme';
 import { BuiltInColorThemeOptions, getBuiltInColorThemeParams } from 'mol-theme/color';
 
 const CartoonVisuals = {
-    '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)
+    'polymer-trace': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, PolymerTraceParams>) => UnitsRepresentation('Polymer trace mesh', ctx, getParams, PolymerTraceVisual),
+    'polymer-gap': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, PolymerGapParams>) => UnitsRepresentation('Polymer gap cylinder', ctx, getParams, PolymerGapVisual),
+    'nucleotide-block': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, NucleotideBlockParams>) => UnitsRepresentation('Nucleotide block mesh', ctx, getParams, NucleotideBlockVisual),
+    'direction-wedge': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, PolymerDirectionParams>) => UnitsRepresentation('Polymer direction wedge', ctx, getParams, PolymerDirectionVisual)
 }
 type CartoonVisualName = keyof typeof CartoonVisuals
 const CartoonVisualOptions = Object.keys(CartoonVisuals).map(name => [name, name] as [CartoonVisualName, string])
@@ -41,13 +41,13 @@ export function getCartoonParams(ctx: ThemeRegistryContext, structure: Structure
 }
 
 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 function CartoonRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, CartoonParams>): CartoonRepresentation {
+    return Representation.createMulti('Cartoon', ctx, getParams, CartoonVisuals as unknown as Representation.Def<Structure, CartoonParams>)
 }
 
 export const CartoonRepresentationProvider: StructureRepresentationProvider<CartoonParams> = {
     label: 'Cartoon',
-    description: 'Displays a ribbon smoothly following the trace atom of polymers.',
+    description: 'Displays a ribbon smoothly following the trace atoms of polymers.',
     factory: CartoonRepresentation,
     getParams: getCartoonParams,
     defaultValues: PD.getDefaultValues(CartoonParams)

src/mol-repr/structure/representation/molecular-surface.ts

@@ -10,15 +10,15 @@ import { GaussianWireframeVisual, GaussianWireframeParams } from '../visual/gaus
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { GaussianDensityVolumeParams, GaussianDensityVolumeVisual } from '../visual/gaussian-density-volume';
 import { StructureRepresentation, StructureRepresentationProvider } from '../representation';
-import { Representation, RepresentationParamsGetter } from 'mol-repr/representation';
+import { Representation, RepresentationParamsGetter, RepresentationContext } from 'mol-repr/representation';
 import { ThemeRegistryContext } from 'mol-theme/theme';
 import { Structure } from 'mol-model/structure';
 import { BuiltInColorThemeOptions, getBuiltInColorThemeParams } from 'mol-theme/color';
 
 const MolecularSurfaceVisuals = {
-    'gaussian-surface': (getParams: RepresentationParamsGetter<Structure, GaussianSurfaceParams>) => UnitsRepresentation('Gaussian surface', getParams, GaussianSurfaceVisual),
-    'gaussian-wireframe': (getParams: RepresentationParamsGetter<Structure, GaussianWireframeParams>) => UnitsRepresentation('Gaussian wireframe', getParams, GaussianWireframeVisual),
-    'gaussian-volume': (getParams: RepresentationParamsGetter<Structure, GaussianDensityVolumeParams>) => UnitsRepresentation('Gaussian volume', getParams, GaussianDensityVolumeVisual)
+    'gaussian-surface': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, GaussianSurfaceParams>) => UnitsRepresentation('Gaussian surface', ctx, getParams, GaussianSurfaceVisual),
+    'gaussian-wireframe': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, GaussianWireframeParams>) => UnitsRepresentation('Gaussian wireframe', ctx, getParams, GaussianWireframeVisual),
+    'gaussian-volume': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, GaussianDensityVolumeParams>) => UnitsRepresentation('Gaussian volume', ctx, getParams, GaussianDensityVolumeVisual)
 }
 type MolecularSurfaceVisualName = keyof typeof MolecularSurfaceVisuals
 const MolecularSurfaceVisualOptions = Object.keys(MolecularSurfaceVisuals).map(name => [name, name] as [MolecularSurfaceVisualName, string])
@@ -37,8 +37,8 @@ export function getMolecularSurfaceParams(ctx: ThemeRegistryContext, structure:
 }
 
 export type MolecularSurfaceRepresentation = StructureRepresentation<MolecularSurfaceParams>
-export function MolecularSurfaceRepresentation(getParams: RepresentationParamsGetter<Structure, MolecularSurfaceParams>): MolecularSurfaceRepresentation {
-    return Representation.createMulti('Molecular Surface', getParams, MolecularSurfaceVisuals as unknown as Representation.Def<Structure, MolecularSurfaceParams>)
+export function MolecularSurfaceRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, MolecularSurfaceParams>): MolecularSurfaceRepresentation {
+    return Representation.createMulti('Molecular Surface', ctx, getParams, MolecularSurfaceVisuals as unknown as Representation.Def<Structure, MolecularSurfaceParams>)
 }
 
 export const MolecularSurfaceRepresentationProvider: StructureRepresentationProvider<MolecularSurfaceParams> = {
@@ -47,26 +47,4 @@ export const MolecularSurfaceRepresentationProvider: StructureRepresentationProv
     factory: MolecularSurfaceRepresentation,
     getParams: getMolecularSurfaceParams,
     defaultValues: PD.getDefaultValues(MolecularSurfaceParams)
-}
-
-
-
-// export const MolecularSurfaceParams = {
-//     ...GaussianSurfaceParams,
-//     ...GaussianWireframeParams,
-//     ...GaussianDensityVolumeParams,
-// }
-// export function getMolecularSurfaceParams(ctx: ThemeRegistryContext, structure: Structure) {
-//     return MolecularSurfaceParams // TODO return copy
-// }
-// export type MolecularSurfaceProps = PD.DefaultValues<typeof MolecularSurfaceParams>
-
-// export type MolecularSurfaceRepresentation = StructureRepresentation<MolecularSurfaceProps>
-
-// export function MolecularSurfaceRepresentation(defaultProps: MolecularSurfaceProps): MolecularSurfaceRepresentation {
-//     return Representation.createMulti('Molecular Surface', defaultProps, [
-//         UnitsRepresentation('Gaussian surface', defaultProps, GaussianSurfaceVisual),
-//         UnitsRepresentation('Gaussian wireframe', defaultProps, GaussianWireframeVisual),
-//         UnitsRepresentation('Gaussian volume', defaultProps, GaussianDensityVolumeVisual)
-//     ])
-// }
+}

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

@@ -27,7 +27,7 @@ export type UnitsParams = typeof UnitsParams
 
 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> {
+export function UnitsRepresentation<P extends UnitsParams>(label: string, ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, P>, visualCtor: () => UnitsVisual<P>): StructureRepresentation<P> {
     let version = 0
     const updated = new Subject<number>()
     let visuals = new Map<number, { group: Unit.SymmetryGroup, visual: UnitsVisual<P> }>()
@@ -38,7 +38,7 @@ export function UnitsRepresentation<P extends UnitsParams>(label: string, getPar
     let _props: PD.Values<P>
     let _theme: Theme
 
-    function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, structure?: Structure) {
+    function createOrUpdate(props: Partial<PD.Values<P>> = {}, structure?: Structure) {
         if (structure && structure !== _structure) {
             _params = getParams(ctx, structure)
             if (!_props) _props = PD.getDefaultValues(_params)
@@ -56,7 +56,7 @@ export function UnitsRepresentation<P extends UnitsParams>(label: string, getPar
                 for (let i = 0; i < _groups.length; i++) {
                     const group = _groups[i];
                     const visual = visualCtor()
-                    await visual.createOrUpdate({ ...ctx, runtime }, _theme, _props, { group, structure })
+                    await visual.createOrUpdate({ webgl: ctx.webgl, runtime }, _theme, _props, { group, structure })
                     visuals.set(group.hashCode, { visual, group })
                 }
             } else if (structure && !Structure.areEquivalent(structure, _structure)) {
@@ -75,14 +75,14 @@ export function UnitsRepresentation<P extends UnitsParams>(label: string, getPar
                         // console.log('old', visualGroup.group)
                         // console.log('new', group)
                         const { visual } = visualGroup
-                        await visual.createOrUpdate({ ...ctx, runtime }, _theme, _props, { group, structure })
+                        await visual.createOrUpdate({ webgl: ctx.webgl, runtime }, _theme, _props, { group, structure })
                         visuals.set(group.hashCode, { visual, group })
                         oldVisuals.delete(group.hashCode)
                     } else {
                         // console.log(label, 'not found visualGroup to reuse, creating new')
                         // newGroups.push(group)
                         const visual = visualCtor()
-                        await visual.createOrUpdate({ ...ctx, runtime }, _theme, _props, { group, structure })
+                        await visual.createOrUpdate({ webgl: ctx.webgl, runtime }, _theme, _props, { group, structure })
                         visuals.set(group.hashCode, { visual, group })
                     }
                 }
@@ -113,7 +113,7 @@ export function UnitsRepresentation<P extends UnitsParams>(label: string, getPar
                     const group = _groups[i];
                     const visualGroup = visuals.get(group.hashCode)
                     if (visualGroup) {
-                        await visualGroup.visual.createOrUpdate({ ...ctx, runtime }, _theme, _props, { group, structure })
+                        await visualGroup.visual.createOrUpdate({ webgl: ctx.webgl, runtime }, _theme, _props, { group, structure })
                         visualGroup.group = group
                     } else {
                         throw new Error(`expected to find visual for hashCode ${group.hashCode}`)
@@ -126,7 +126,7 @@ export function UnitsRepresentation<P extends UnitsParams>(label: string, getPar
                 visuals.forEach(({ visual, group }) => visualsList.push([ visual, group ]))
                 for (let i = 0, il = visualsList.length; i < il; ++i) {
                     const [ visual ] = visualsList[i]
-                    await visual.createOrUpdate({ ...ctx, runtime }, _theme, _props)
+                    await visual.createOrUpdate({ webgl: ctx.webgl, runtime }, _theme, _props)
                 }
             }
             if (structure) _structure = structure

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

@@ -6,7 +6,7 @@
 
 import { VolumeData } from 'mol-model/volume'
 import { RuntimeContext } from 'mol-task'
-import { VolumeVisual, VolumeRepresentation } from './representation';
+import { VolumeVisual, VolumeRepresentation, VolumeRepresentationProvider } from './representation';
 import { createDirectVolumeRenderObject } from 'mol-gl/render-object';
 import { EmptyLoci } from 'mol-model/loci';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
@@ -19,7 +19,7 @@ import { createIdentityTransform } from 'mol-geo/geometry/transform-data';
 import { DirectVolume } from 'mol-geo/geometry/direct-volume/direct-volume';
 import { Geometry, createRenderableState } from 'mol-geo/geometry/geometry';
 import { VisualUpdateState } from 'mol-repr/util';
-import { VisualContext } from 'mol-repr/representation';
+import { VisualContext, RepresentationContext, RepresentationParamsGetter } from 'mol-repr/representation';
 import { Theme, ThemeRegistryContext } from 'mol-theme/theme';
 
 function getBoundingBox(gridDimension: Vec3, transform: Mat4) {
@@ -182,6 +182,14 @@ export function DirectVolumeVisual(): VolumeVisual<DirectVolumeParams> {
     })
 }
 
-export function DirectVolumeRepresentation(): VolumeRepresentation<DirectVolumeParams> {
-    return VolumeRepresentation('Direct Volume', getDirectVolumeParams, DirectVolumeVisual)
+export function DirectVolumeRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<VolumeData, DirectVolumeParams>): VolumeRepresentation<DirectVolumeParams> {
+    return VolumeRepresentation('Direct Volume', ctx, getParams, DirectVolumeVisual)
+}
+
+export const DirectVolumeRepresentationProvider: VolumeRepresentationProvider<DirectVolumeParams> = {
+    label: 'Direct Volume',
+    description: 'Direct volume rendering of volumetric data.',
+    factory: DirectVolumeRepresentation,
+    getParams: getDirectVolumeParams,
+    defaultValues: PD.getDefaultValues(DirectVolumeParams)
 }

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

@@ -6,7 +6,7 @@
  */
 
 import { VolumeData } from 'mol-model/volume'
-import { VolumeVisual, VolumeRepresentation } from './representation';
+import { VolumeVisual, VolumeRepresentation, VolumeRepresentationProvider } from './representation';
 import { createMeshRenderObject } from 'mol-gl/render-object';
 import { EmptyLoci } from 'mol-model/loci';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
@@ -16,7 +16,7 @@ import { LocationIterator } from 'mol-geo/util/location-iterator';
 import { createIdentityTransform } from 'mol-geo/geometry/transform-data';
 import { createRenderableState } from 'mol-geo/geometry/geometry';
 import { VisualUpdateState } from 'mol-repr/util';
-import { VisualContext } from 'mol-repr/representation';
+import { VisualContext, RepresentationContext, RepresentationParamsGetter } from 'mol-repr/representation';
 import { Theme, ThemeRegistryContext } from 'mol-theme/theme';
 
 interface VolumeIsosurfaceProps {
@@ -67,6 +67,14 @@ export function IsosurfaceVisual(): VolumeVisual<IsosurfaceParams> {
     })
 }
 
-export function IsosurfaceRepresentation(): VolumeRepresentation<IsosurfaceParams> {
-    return VolumeRepresentation('Isosurface', getIsosurfaceParams, IsosurfaceVisual)
+export function IsosurfaceRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<VolumeData, IsosurfaceParams>): VolumeRepresentation<IsosurfaceParams> {
+    return VolumeRepresentation('Isosurface', ctx, getParams, IsosurfaceVisual)
+}
+
+export const IsosurfaceRepresentationProvider: VolumeRepresentationProvider<IsosurfaceParams> = {
+    label: 'Isosurface',
+    description: 'Displays an isosurface of volumetric data.',
+    factory: IsosurfaceRepresentation,
+    getParams: getIsosurfaceParams,
+    defaultValues: PD.getDefaultValues(IsosurfaceParams)
 }

src/mol-repr/volume/registry.ts

@@ -6,6 +6,8 @@
 
 import { RepresentationProvider, RepresentationRegistry } from '../representation';
 import { VolumeData } from 'mol-model/volume';
+import { IsosurfaceRepresentationProvider } from './isosurface-mesh';
+import { DirectVolumeRepresentationProvider } from './direct-volume';
 
 export class VolumeRepresentationRegistry extends RepresentationRegistry<VolumeData> {
     constructor() {
@@ -18,7 +20,8 @@ export class VolumeRepresentationRegistry extends RepresentationRegistry<VolumeD
 }
 
 export const BuiltInVolumeRepresentations = {
-    // TODO
+    'isosurface': IsosurfaceRepresentationProvider,
+    'direct-volume': DirectVolumeRepresentationProvider,
 }
 export type BuiltInVolumeRepresentationsName = keyof typeof BuiltInVolumeRepresentations
 export const BuiltInVolumeRepresentationsNames = Object.keys(BuiltInVolumeRepresentations)

src/mol-repr/volume/representation.ts

@@ -143,7 +143,7 @@ export const VolumeParams = {
 }
 export type VolumeParams = typeof VolumeParams
 
-export function VolumeRepresentation<P extends VolumeParams>(label: string, getParams: RepresentationParamsGetter<VolumeData, P>, visualCtor: (volume: VolumeData) => VolumeVisual<P>): VolumeRepresentation<P> {
+export function VolumeRepresentation<P extends VolumeParams>(label: string, ctx: RepresentationContext, getParams: RepresentationParamsGetter<VolumeData, P>, visualCtor: (volume: VolumeData) => VolumeVisual<P>): VolumeRepresentation<P> {
     let version = 0
     const updated = new Subject<number>()
     let visual: VolumeVisual<P>
@@ -154,7 +154,7 @@ export function VolumeRepresentation<P extends VolumeParams>(label: string, getP
     let _theme: Theme
     let busy = false
 
-    function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, volume?: VolumeData) {
+    function createOrUpdate(props: Partial<PD.Values<P>> = {}, volume?: VolumeData) {
         if (volume && volume !== _volume) {
             _params = getParams(ctx, volume)
             _volume = volume
@@ -172,11 +172,11 @@ export function VolumeRepresentation<P extends VolumeParams>(label: string, getP
             } else if (volume && !visual) {
                 busy = true
                 visual = visualCtor(volume)
-                await visual.createOrUpdate({ ...ctx, runtime }, _theme, _props, volume)
+                await visual.createOrUpdate({ webgl: ctx.webgl, runtime }, _theme, _props, volume)
                 busy = false
             } else {
                 busy = true
-                await visual.createOrUpdate({ ...ctx, runtime }, _theme, _props, volume)
+                await visual.createOrUpdate({ webgl: ctx.webgl, runtime }, _theme, _props, volume)
                 busy = false
             }
             updated.next(version++)