wip

src/mol-app/component/parameter/multi-select.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import * as React from 'react'
+import { MultiSelectParam } from 'mol-view/parameter';
+
+export interface MultiSelectParamComponentProps<T extends string> {
+    param: MultiSelectParam<T>
+    value: T[]
+    onChange(v: T[]): void
+}
+
+export interface MultiSelectParamComponentState<T extends string> {
+    value: T[]
+}
+
+export class MultiSelectParamComponent<T extends string> extends React.Component<MultiSelectParamComponentProps<T>, MultiSelectParamComponentState<T>> {
+    state = {
+        value: this.props.value
+    }
+
+    onChange(value: T[]) {
+        this.setState({ value })
+        this.props.onChange(value)
+    }
+
+    render() {
+        return <div>
+            <span>{this.props.param.label} </span>
+            <select multiple value={this.state.value} onChange={e => {
+                const value = Array.from(e.target.options).filter(option => option.selected).map(option => option.value)
+                this.onChange(value as T[]) 
+            }}>
+                {this.props.param.options.map(v => {
+                    const [value, label] = v
+                    return <option key={label} value={value}>{label}</option>
+                })}
+            </select>
+        </div>;
+    }
+}

src/mol-app/component/parameters.tsx

@@ -10,6 +10,7 @@ import { BooleanParamComponent } from './parameter/boolean';
 import { NumberParamComponent } from './parameter/number';
 import { RangeParamComponent } from './parameter/range';
 import { SelectParamComponent } from './parameter/select';
+import { MultiSelectParamComponent } from './parameter/multi-select';
 
 interface ParametersProps<P extends Params> {
     params: P
@@ -29,6 +30,8 @@ function getParamComponent<P extends Param>(p: Param, value: P['defaultValue'],
             return <RangeParamComponent param={p} value={value} onChange={onChange} />
         case 'select':
             return <SelectParamComponent param={p} value={value} onChange={onChange} />
+        case 'multi-select':
+            return <MultiSelectParamComponent param={p} value={value} onChange={onChange} />
     }
     return ''
 }

src/mol-geo/representation/structure/complex-visual.ts

@@ -63,7 +63,7 @@ export function ComplexMeshVisual<P extends ComplexMeshProps>(builder: ComplexMe
     }
 
     async function update(ctx: RuntimeContext, props: Partial<P>) {
-        const newProps = Object.assign({}, currentProps, props)
+        const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
 
         if (!renderObject) return false
 

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

@@ -22,7 +22,7 @@ export const BallAndStickParams = {
     ...ElementSphereParams,
     ...IntraUnitLinkParams,
     sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
-    sizeValue: NumberParam('Size Value', '', 1, 0, 0.1, 20),
+    sizeValue: NumberParam('Size Value', '', 0.2, 0, 10, 0.1),
     sizeFactor: NumberParam('Size Factor', '', 1, 0, 10, 0.1),
     unitKinds: MultiSelectParam<UnitKind>('Unit Kind', '', ['atomic'], UnitKindOptions),
 }

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

@@ -24,7 +24,7 @@ export const CartoonParams = {
     ...NucleotideBlockParams,
     // ...PolymerDirectionParams,
     sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
-    sizeValue: NumberParam('Size Value', '', 0.6, 0, 0.1, 20),
+    sizeValue: NumberParam('Size Value', '', 0.6, 0, 10, 0.1),
 }
 export const DefaultCartoonProps = paramDefaultValues(CartoonParams)
 export type CartoonProps = typeof DefaultCartoonProps

src/mol-geo/representation/structure/units-visual.ts

@@ -21,8 +21,8 @@ import { deepEqual, ValueCell, UUID } from 'mol-util';
 import { Interval } from 'mol-data/int';
 import { Points } from '../../geometry/points/points';
 import { updateRenderableState } from '../../geometry/geometry';
-import { createColors } from '../../geometry/color-data';
-import { createSizes } from '../../geometry/size-data';
+import { createColors, ColorProps } from '../../geometry/color-data';
+import { createSizes, SizeProps } from '../../geometry/size-data';
 import { Lines } from '../../geometry/lines/lines';
 import { MultiSelectParam, paramDefaultValues } from 'mol-view/parameter';
 
@@ -55,6 +55,21 @@ function includesUnitKind(unitKinds: UnitKind[], unit: Unit) {
     return false
 }
 
+function sizeChanged(oldProps: SizeProps, newProps: SizeProps) {
+    return (
+        oldProps.sizeTheme !== newProps.sizeTheme ||
+        oldProps.sizeValue !== newProps.sizeValue ||
+        oldProps.sizeFactor !== newProps.sizeFactor
+    )
+}
+
+function colorChanged(oldProps: ColorProps, newProps: ColorProps) {
+    return (
+        oldProps.colorTheme !== newProps.colorTheme ||
+        oldProps.colorValue !== newProps.colorValue
+    )
+}
+
 // mesh
 
 export const UnitsMeshParams = {
@@ -103,7 +118,7 @@ export function UnitsMeshVisual<P extends UnitsMeshProps>(builder: UnitsMeshVisu
     async function update(ctx: RuntimeContext, props: Partial<P> = {}) {
         if (!renderObject) return
 
-        const newProps = Object.assign({}, currentProps, props)
+        const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
         const unit = currentGroup.units[0]
 
         locationIt.reset()
@@ -118,8 +133,8 @@ export function UnitsMeshVisual<P extends UnitsMeshProps>(builder: UnitsMeshVisu
 
         if (currentGroup.units.length !== locationIt.instanceCount) updateState.updateTransform = true
 
-        if (newProps.sizeTheme !== currentProps.sizeTheme) updateState.createGeometry = true
-        if (newProps.colorTheme !== currentProps.colorTheme) updateState.updateColor = true
+        if (sizeChanged(currentProps, newProps)) updateState.createGeometry = true
+        if (colorChanged(currentProps, newProps)) updateState.updateColor = true
         if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) updateState.createGeometry = true
 
         //
@@ -253,7 +268,7 @@ export function UnitsPointsVisual<P extends UnitsPointsProps>(builder: UnitsPoin
     async function update(ctx: RuntimeContext, props: Partial<P> = {}) {
         if (!renderObject) return
 
-        const newProps = Object.assign({}, currentProps, props)
+        const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
         const unit = currentGroup.units[0]
 
         locationIt.reset()
@@ -268,8 +283,8 @@ export function UnitsPointsVisual<P extends UnitsPointsProps>(builder: UnitsPoin
 
         if (currentGroup.units.length !== locationIt.instanceCount) updateState.updateTransform = true
 
-        if (newProps.sizeTheme !== currentProps.sizeTheme) updateState.updateSize = true
-        if (newProps.colorTheme !== currentProps.colorTheme) updateState.updateColor = true
+        if (sizeChanged(currentProps, newProps)) updateState.updateSize = true
+        if (colorChanged(currentProps, newProps)) updateState.updateColor = true
         if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) updateState.createGeometry = true
 
         //
@@ -407,7 +422,7 @@ export function UnitsLinesVisual<P extends UnitsLinesProps>(builder: UnitsLinesV
     async function update(ctx: RuntimeContext, props: Partial<P> = {}) {
         if (!renderObject) return
 
-        const newProps = Object.assign({}, currentProps, props)
+        const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
         const unit = currentGroup.units[0]
 
         locationIt.reset()
@@ -422,8 +437,8 @@ export function UnitsLinesVisual<P extends UnitsLinesProps>(builder: UnitsLinesV
 
         if (currentGroup.units.length !== locationIt.instanceCount) updateState.updateTransform = true
 
-        if (newProps.sizeTheme !== currentProps.sizeTheme) updateState.updateSize = true
-        if (newProps.colorTheme !== currentProps.colorTheme) updateState.updateColor = true
+        if (sizeChanged(currentProps, newProps)) updateState.updateSize = true
+        if (colorChanged(currentProps, newProps)) updateState.updateColor = true
         if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) updateState.createGeometry = true
 
         //

src/mol-geo/representation/structure/visual/carbohydrate-symbol-mesh.ts

@@ -148,7 +148,7 @@ async function createCarbohydrateSymbolMesh(ctx: RuntimeContext, structure: Stru
 export const CarbohydrateSymbolParams = {
     ...ComplexMeshParams,
     sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
-    sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
+    sizeValue: NumberParam('Size Value', '', 1, 0, 10, 0.1),
     detail: NumberParam('Sphere Detail', '', 0, 0, 3, 1),
 }
 export const DefaultCarbohydrateSymbolProps = paramDefaultValues(CarbohydrateSymbolParams)

src/mol-geo/representation/structure/visual/element-point.ts

@@ -18,8 +18,8 @@ import { SelectParam, NumberParam, BooleanParam, paramDefaultValues } from 'mol-
 export const ElementPointParams = {
     ...UnitsPointsParams,
     sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
-    sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
-    pointSizeAttenuation: BooleanParam('Point Size Attenuation', '', true),
+    sizeValue: NumberParam('Size Value', '', 3, 0, 20, 0.1),
+    pointSizeAttenuation: BooleanParam('Point Size Attenuation', '', false),
 }
 export const DefaultElementPointProps = paramDefaultValues(ElementPointParams)
 export type ElementPointProps = typeof DefaultElementPointProps

src/mol-geo/representation/structure/visual/element-sphere.ts

@@ -14,7 +14,8 @@ import { SizeThemeName, SizeThemeOptions } from 'mol-view/theme/size';
 export const ElementSphereParams = {
     ...UnitsMeshParams,
     sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
-    sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
+    sizeValue: NumberParam('Size Value', '', 0.2, 0, 10, 0.1),
+    sizeFactor: NumberParam('Size Factor', '', 1, 0, 10, 0.1),
     detail: NumberParam('Sphere Detail', '', 0, 0, 3, 1),
 }
 export const DefaultElementSphereProps = paramDefaultValues(ElementSphereParams)

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

@@ -53,8 +53,8 @@ export const InterUnitLinkParams = {
     ...ComplexMeshParams,
     ...LinkCylinderParams,
     sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
-    sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
-    sizeFactor: NumberParam('Size Factor', '', 0.3, 0, 10, 0.1),
+    sizeValue: NumberParam('Size Value', '', 0.2, 0, 10, 0.1),
+    sizeFactor: NumberParam('Size Factor', '', 1, 0, 10, 0.1),
 }
 export const DefaultInterUnitLinkProps = paramDefaultValues(InterUnitLinkParams)
 export type InterUnitLinkProps = typeof DefaultInterUnitLinkProps

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

@@ -67,8 +67,8 @@ export const IntraUnitLinkParams = {
     ...UnitsMeshParams,
     ...LinkCylinderParams,
     sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
-    sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
-    sizeFactor: NumberParam('Size Factor', '', 0.3, 0, 10, 0.1),
+    sizeValue: NumberParam('Size Value', '', 0.2, 0, 10, 0.1),
+    sizeFactor: NumberParam('Size Factor', '', 1, 0, 10, 0.1),
 }
 export const DefaultIntraUnitLinkProps = paramDefaultValues(IntraUnitLinkParams)
 export type IntraUnitLinkProps = typeof DefaultIntraUnitLinkProps

src/mol-geo/representation/structure/visual/polymer-backbone-cylinder.ts

@@ -21,7 +21,7 @@ import { paramDefaultValues, NumberParam, SelectParam } from 'mol-view/parameter
 
 export const PolymerBackboneCylinderParams = {
     sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
-    sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
+    sizeValue: NumberParam('Size Value', '', 1, 0, 10, 0.1),
     radialSegments: NumberParam('Radial Segments', '', 16, 3, 56, 1),
 }
 export const DefaultPolymerBackboneCylinderProps = paramDefaultValues(PolymerBackboneCylinderParams)

src/mol-geo/representation/structure/visual/polymer-gap-cylinder.ts

@@ -23,7 +23,7 @@ const segmentCount = 10
 
 export const PolymerGapCylinderParams = {
     sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
-    sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
+    sizeValue: NumberParam('Size Value', '', 1, 0, 10, 0.1),
     sizeFactor: NumberParam('Size Factor', '', 0.3, 0, 10, 0.1),
     radialSegments: NumberParam('Radial Segments', '', 16, 3, 56, 1),
 }