mol-plugin: ColorScaleControl tweaks

src/mol-plugin/ui/controls/parameters.tsx

@@ -5,18 +5,16 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import * as React from 'react'
-
+import { Vec2 } from 'mol-math/linear-algebra';
+import { Color } from 'mol-util/color';
+import { ColorListName, getColorListFromName } from 'mol-util/color/scale';
+import { ColorNames, ColorNamesValueMap } from 'mol-util/color/tables';
+import { memoize1 } from 'mol-util/memoize';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { camelCaseToWords } from 'mol-util/string';
-import { ColorNames, ColorNamesValueMap } from 'mol-util/color/tables';
-import { Color } from 'mol-util/color';
-import { Vec2 } from 'mol-math/linear-algebra';
+import * as React from 'react';
 import LineGraphComponent from './line-graph/line-graph-component';
-
 import { Slider, Slider2 } from './slider';
-import { getColorListFromName } from 'mol-util/color/scale';
-
 
 export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
     params: P,
@@ -57,7 +55,7 @@ function controlFor(param: PD.Any): ParamControl | undefined {
         case 'select': return SelectControl;
         case 'text': return TextControl;
         case 'interval': return typeof param.min !== 'undefined' && typeof param.max !== 'undefined'
-        ? BoundedIntervalControl : IntervalControl;
+            ? BoundedIntervalControl : IntervalControl;
         case 'group': return GroupControl;
         case 'mapped': return MappedControl;
         case 'line-graph': return LineGraphControl;
@@ -243,7 +241,6 @@ function ColorValueOption(color: Color) {
     </option> : null
 }
 
-
 export class ColorControl extends SimpleParam<PD.Color> {
     onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         this.update(Color(parseInt(e.target.value)));
@@ -257,15 +254,32 @@ export class ColorControl extends SimpleParam<PD.Color> {
     }
 }
 
+const colorScaleGradient = memoize1((n: ColorListName) => `linear-gradient(to right, ${getColorListFromName(n).map(c => Color.toStyle(c)).join(', ')})`);
+
 export class ColorScaleControl extends SimpleParam<PD.ColorScale<any>> {
     onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { this.update(e.target.value); }
+
+    stripStyle(): React.CSSProperties {
+        return {
+            background: colorScaleGradient(this.props.value),
+            position: 'absolute',
+            bottom: '0',
+            height: '4px',
+            right: '0',
+            left: '0'
+        };
+    }
+
     renderControl() {
-        return <select value={this.props.value || ''} onChange={this.onChange} disabled={this.props.isDisabled}>
-            {this.props.param.options.map(([value, label]) => 
-                <option key={value} value={value} style={{background: `linear-gradient(to right, ${getColorListFromName(value).map(c => Color.toStyle(c)).join(', ')})`}}>
-                    {label}
-                </option>)}
-        </select>;
+        return <div style={{ position: 'relative' }}>
+            <select value={this.props.value || ''} onChange={this.onChange} disabled={this.props.isDisabled}>
+                {this.props.param.options.map(([value, label]) =>
+                    <option key={value} value={value}>
+                        {label}
+                    </option>)}
+            </select>
+            <div style={this.stripStyle()} />
+        </div>;
     }
 }
 

src/mol-plugin/ui/state/apply-action.tsx

@@ -8,7 +8,7 @@ import { PluginCommands } from 'mol-plugin/command';
 import { PluginContext } from 'mol-plugin/context';
 import { State, Transform } from 'mol-state';
 import { StateAction } from 'mol-state/action';
-import { memoizeOne } from 'mol-util/memoize';
+import { memoizeLatest } from 'mol-util/memoize';
 import { StateTransformParameters, TransformContolBase } from './common';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
@@ -47,7 +47,7 @@ class ApplyActionContol extends TransformContolBase<ApplyActionContol.Props, App
     applyText() { return 'Apply'; }
     isUpdate() { return false; }
 
-    private _getInfo = memoizeOne((t: Transform.Ref, v: string) => StateTransformParameters.infoFromAction(this.plugin, this.props.state, this.props.action, this.props.nodeRef));
+    private _getInfo = memoizeLatest((t: Transform.Ref, v: string) => StateTransformParameters.infoFromAction(this.plugin, this.props.state, this.props.action, this.props.nodeRef));
 
     state = { ref: this.props.nodeRef, version: this.props.state.transforms.get(this.props.nodeRef).version, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false };
 

src/mol-plugin/ui/state/update-transform.tsx

@@ -5,7 +5,7 @@
  */
 
 import { State, Transform } from 'mol-state';
-import { memoizeOne } from 'mol-util/memoize';
+import { memoizeLatest } from 'mol-util/memoize';
 import { StateTransformParameters, TransformContolBase } from './common';
 
 export { UpdateTransformContol };
@@ -45,7 +45,7 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr
         return autoUpdate({ a: cell.obj!, b: parentCell.obj!, oldParams: this.getInfo().initialValues, newParams }, this.plugin);
     }
 
-    private _getInfo = memoizeOne((t: Transform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, this.props.transform));
+    private _getInfo = memoizeLatest((t: Transform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, this.props.transform));
 
     state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false };
 

src/mol-util/memoize.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-export function memoizeOne<Args extends any[], T>(f: (...args: Args) => T): (...args: Args) => T {
+export function memoizeLatest<Args extends any[], T>(f: (...args: Args) => T): (...args: Args) => T {
     let lastArgs: any[] | undefined = void 0, value: any = void 0;
     return (...args) => {
         if (!lastArgs || lastArgs.length !== args.length) {
@@ -21,4 +21,14 @@ export function memoizeOne<Args extends any[], T>(f: (...args: Args) => T): (...
         }
         return value;
     }
+}
+
+export function memoize1<A, T>(f: (a: A) => T): (a: A) => T {
+    const cache = new Map<A, T>();
+    return a => {
+        if (cache.has(a)) return cache.get(a)!;
+        const v = f(a);
+        cache.set(a, v);
+        return v;
+    }
 }