added ColorScale parameter

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

@@ -15,6 +15,7 @@ import { Vec2 } from 'mol-math/linear-algebra';
 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> {
@@ -50,6 +51,7 @@ function controlFor(param: PD.Any): ParamControl | undefined {
         case 'converted': return ConvertedControl;
         case 'multi-select': return MultiSelectControl;
         case 'color': return ColorControl;
+        case 'color-scale': return ColorScaleControl;
         case 'vec3': return Vec3Control;
         case 'file': return FileControl;
         case 'select': return SelectControl;
@@ -258,6 +260,18 @@ export class ColorControl extends SimpleParam<PD.Color> {
     }
 }
 
+export class ColorScaleControl extends SimpleParam<PD.ColorScale<any>> {
+    onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { this.update(e.target.value); }
+    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>;
+    }
+}
+
 export class Vec3Control extends SimpleParam<PD.Vec3> {
     // onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     //     this.setState({ value: e.target.value });

src/mol-theme/color/chain-id.ts

@@ -18,7 +18,7 @@ const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every chain a color based on its `asym_id` value.'
 
 export const ChainIdColorThemeParams = {
-    list: PD.Select<ColorListName>('RdYlBu', ColorListOptions),
+    list: PD.ColorScale<ColorListName>('RdYlBu', ColorListOptions),
 }
 export type ChainIdColorThemeParams = typeof ChainIdColorThemeParams
 export function getChainIdColorThemeParams(ctx: ThemeDataContext) {

src/mol-theme/color/cross-link.ts

@@ -19,7 +19,7 @@ const Description = 'Colors cross-links by the deviation of the observed distanc
 
 export const CrossLinkColorThemeParams = {
     domain: PD.Interval([-10, 10]),
-    list: PD.Select<ColorListName>('RdYlBu', ColorListOptions),
+    list: PD.ColorScale<ColorListName>('RdYlBu', ColorListOptions),
 }
 export type CrossLinkColorThemeParams = typeof CrossLinkColorThemeParams
 export function getCrossLinkColorThemeParams(ctx: ThemeDataContext) {

src/mol-theme/color/element-index.ts

@@ -17,7 +17,7 @@ const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every element (atom or coarse sphere/gaussian) a unique color based on the position (index) of the element in the list of elements in the structure.'
 
 export const ElementIndexColorThemeParams = {
-    list: PD.Select<ColorListName>('RdYlBu', ColorListOptions),
+    list: PD.ColorScale<ColorListName>('RdYlBu', ColorListOptions),
 }
 export type ElementIndexColorThemeParams = typeof ElementIndexColorThemeParams
 export function getElementIndexColorThemeParams(ctx: ThemeDataContext) {

src/mol-theme/color/polymer-id.ts

@@ -19,7 +19,7 @@ const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every polymer chain a color based on its `asym_id` value.'
 
 export const PolymerIdColorThemeParams = {
-    list: PD.Select<ColorListName>('RdYlBu', ColorListOptions),
+    list: PD.ColorScale<ColorListName>('RdYlBu', ColorListOptions),
 }
 export type PolymerIdColorThemeParams = typeof PolymerIdColorThemeParams
 export function getPolymerIdColorThemeParams(ctx: ThemeDataContext) {

src/mol-theme/color/polymer-index.ts

@@ -16,7 +16,7 @@ const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every polymer a unique color based on the position (index) of the polymer in the list of polymers in the structure.'
 
 export const PolymerIndexColorThemeParams = {
-    list: PD.Select<ColorListName>('RdYlBu', ColorListOptions),
+    list: PD.ColorScale<ColorListName>('RdYlBu', ColorListOptions),
 }
 export type PolymerIndexColorThemeParams = typeof PolymerIndexColorThemeParams
 export function getPolymerIndexColorThemeParams(ctx: ThemeDataContext) {

src/mol-theme/color/sequence-id.ts

@@ -17,7 +17,7 @@ const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every polymer residue a color based on its `seq_id` value.'
 
 export const SequenceIdColorThemeParams = {
-    list: PD.Select<ColorListName>('rainbow', ColorListOptions),
+    list: PD.ColorScale<ColorListName>('rainbow', ColorListOptions),
 }
 export type SequenceIdColorThemeParams = typeof SequenceIdColorThemeParams
 export function getSequenceIdColorThemeParams(ctx: ThemeDataContext) {

src/mol-theme/color/unit-index.ts

@@ -16,7 +16,7 @@ const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every unit (single chain or collection of single elements) a unique color based on the position (index) of the unit in the list of units in the structure.'
 
 export const UnitIndexColorThemeParams = {
-    list: PD.Select<ColorListName>('RdYlBu', ColorListOptions),
+    list: PD.ColorScale<ColorListName>('RdYlBu', ColorListOptions),
 }
 export type UnitIndexColorThemeParams = typeof UnitIndexColorThemeParams
 export function getUnitIndexColorThemeParams(ctx: ThemeDataContext) {

src/mol-util/param-definition.ts

@@ -51,6 +51,15 @@ export namespace ParamDefinition {
         return setInfo<Select<T>>({ type: 'select', defaultValue, options }, info)
     }
 
+    export interface ColorScale<T extends string> extends Base<T> {
+        type: 'color-scale'
+        /** array of (value, label) tuples */
+        options: [T, string][]
+    }
+    export function ColorScale<T extends string>(defaultValue: T, options: [T, string][], info?: Info): ColorScale<T> {
+        return setInfo<ColorScale<T>>({ type: 'color-scale', defaultValue, options }, info)
+    }
+
     export interface MultiSelect<E extends string, T = E[]> extends Base<T> {
         type: 'multi-select'
         /** array of (value, label) tuples */
@@ -190,7 +199,7 @@ export namespace ParamDefinition {
         return { type: 'converted', defaultValue: toValue(converted.defaultValue), converted, fromValue, toValue };
     }
 
-    export type Any = Value<any> | Select<any> | MultiSelect<any> | Boolean | Text | Color | Vec3 | Numeric | FileParam | Interval | LineGraph | Group<any> | Mapped<any> | Converted<any, any>
+    export type Any = Value<any> | Select<any> | MultiSelect<any> | Boolean | Text | Color | Vec3 | Numeric | FileParam | Interval | LineGraph | ColorScale<any> | Group<any> | Mapped<any> | Converted<any, any>
 
     export type Params = { [k: string]: Any }
     export type Values<T extends Params> = { [k in keyof T]: T[k]['defaultValue'] }