PD.Color.isExpanded property

src/mol-plugin-state/manager/structure/component.ts

@@ -291,7 +291,7 @@ namespace StructureComponentManager {
                 return {
                     kind: PD.Value<ActionType>(action, { isHidden: true }),
                     action: PD.MappedStatic('color', {
-                        color: PD.Color(ColorNames.black, { label: 'Color' }),
+                        color: PD.Color(ColorNames.blue, { label: 'Color', isExpanded: true }),
                         reset: PD.EmptyGroup()
                     }),
                     // TODO: filter by representation type

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

@@ -15,7 +15,7 @@ import { TextInput } from './common';
 import { DefaultColorSwatch } from '../../mol-util/color/swatches';
 
 export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Color>, { isExpanded: boolean }> {
-    state = { isExpanded: false }
+    state = { isExpanded: !!this.props.param.isExpanded }
 
     protected update(value: Color) {
         this.props.onChange({ param: this.props.param, name: this.props.name, value });
@@ -26,13 +26,6 @@ export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Colo
         e.currentTarget.blur();
     }
 
-    onChangeSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const value = Color(parseInt(e.target.value));
-        if (value !== this.props.value) {
-            this.update(value);
-        }
-    }
-
     onClickSwatch = (e: React.MouseEvent<HTMLButtonElement>) => {
         const value = Color(+(e.currentTarget.getAttribute('data-color') || '0'));
         if (value !== this.props.value) {
@@ -54,17 +47,6 @@ export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Colo
         </div>;
     }
 
-    stripStyle(): React.CSSProperties {
-        return {
-            background: Color.toStyle(this.props.value),
-            position: 'absolute',
-            bottom: '0',
-            height: '4px',
-            right: '0',
-            left: '0'
-        };
-    }
-
     render() {
         const label = this.props.param.label || camelCaseToWords(this.props.name);
         return <>

src/mol-util/param-definition.ts

@@ -115,9 +115,12 @@ export namespace ParamDefinition {
 
     export interface Color extends Base<ColorData> {
         type: 'color'
+        isExpanded?: boolean
     }
-    export function Color(defaultValue: ColorData, info?: Info): Color {
-        return setInfo<Color>({ type: 'color', defaultValue }, info)
+    export function Color(defaultValue: ColorData, info?: Info & { isExpanded?: boolean }): Color {
+        const ret = setInfo<Color>({ type: 'color', defaultValue }, info);
+        if (info && info.isExpanded) ret.isExpanded = info.isExpanded;
+        return ret;
     }
 
     export interface Vec3 extends Base<Vec3Data>, Range {