diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index 0ec24078008d49f53bf88688ff487a6e64d2aed3..f7e8774b143a255a13458a1f1fba3b1e917beb2c 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/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 });
diff --git a/src/mol-theme/color/chain-id.ts b/src/mol-theme/color/chain-id.ts
index c89d0600260ec58d9855c8317cf2c5f251d099f8..03dd86142f202879df132f0a4e839efbc559023e 100644
--- a/src/mol-theme/color/chain-id.ts
+++ b/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) {
diff --git a/src/mol-theme/color/cross-link.ts b/src/mol-theme/color/cross-link.ts
index d3cdf4b806a4c22633b3c13213cb7bef2b8712ea..92235c3c2f3d2892acad8fae9e2ce3e8f8e9999a 100644
--- a/src/mol-theme/color/cross-link.ts
+++ b/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) {
diff --git a/src/mol-theme/color/element-index.ts b/src/mol-theme/color/element-index.ts
index 3636026ab977035052e72b019f6b24dc0adf83a1..a4e7aa519b26c50601a1a797fc693098161c9169 100644
--- a/src/mol-theme/color/element-index.ts
+++ b/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) {
diff --git a/src/mol-theme/color/polymer-id.ts b/src/mol-theme/color/polymer-id.ts
index 87c1c75aef281c170ca71dee0765f5ea8f6b80cd..4d97f85eb1c67b6cef10c3b7a0bc127e3ea80bd7 100644
--- a/src/mol-theme/color/polymer-id.ts
+++ b/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) {
diff --git a/src/mol-theme/color/polymer-index.ts b/src/mol-theme/color/polymer-index.ts
index d13fe8d175cd249eaad5cea8c25ad3cdf6c6b3c0..b25f3357dc9c326db6f2a1d17b77cab762b07cf0 100644
--- a/src/mol-theme/color/polymer-index.ts
+++ b/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) {
diff --git a/src/mol-theme/color/sequence-id.ts b/src/mol-theme/color/sequence-id.ts
index b0dd084b66297adc2c42259e73a118cec3102283..d2ccb6a2ddb55e4c2a6cd704440dedb028522856 100644
--- a/src/mol-theme/color/sequence-id.ts
+++ b/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) {
diff --git a/src/mol-theme/color/unit-index.ts b/src/mol-theme/color/unit-index.ts
index ac25d51137c1cc75d40afcbd15def80d3876d63d..ca1fb54efc403d2746d8a6b2e2ba7581865a6b23 100644
--- a/src/mol-theme/color/unit-index.ts
+++ b/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) {
diff --git a/src/mol-util/param-definition.ts b/src/mol-util/param-definition.ts
index f8c06ec58624f487aa0e3775ab7191c6ef1b628f..ec68757b0c2ce572a14884f91bc388c35629c194 100644
--- a/src/mol-util/param-definition.ts
+++ b/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'] }