From 5e309c1b87813ff4201735c5e72d288f04067166 Mon Sep 17 00:00:00 2001
From: luna215 <paulluna0215@gmail.com>
Date: Fri, 30 Nov 2018 09:40:09 -0800
Subject: [PATCH] added ColorScale parameter
---
src/mol-plugin/ui/controls/parameters.tsx | 14 ++++++++++++++
src/mol-theme/color/chain-id.ts | 2 +-
src/mol-theme/color/cross-link.ts | 2 +-
src/mol-theme/color/element-index.ts | 2 +-
src/mol-theme/color/polymer-id.ts | 2 +-
src/mol-theme/color/polymer-index.ts | 2 +-
src/mol-theme/color/sequence-id.ts | 2 +-
src/mol-theme/color/unit-index.ts | 2 +-
src/mol-util/param-definition.ts | 11 ++++++++++-
9 files changed, 31 insertions(+), 8 deletions(-)
diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index 0ec240780..f7e8774b1 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 c89d06002..03dd86142 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 d3cdf4b80..92235c3c2 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 3636026ab..a4e7aa519 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 87c1c75ae..4d97f85eb 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 d13fe8d17..b25f3357d 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 b0dd084b6..d2ccb6a2d 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 ac25d5113..ca1fb54ef 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 f8c06ec58..ec68757b0 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'] }
--
GitLab