inline help for params, color theme legend ui

src/mol-app/component/color-theme.tsx

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import * as React from 'react'
-import { ColorTheme } from '../../mol-theme/color';
-import { Color } from '../../mol-util/color';
-
-export interface ColorThemeComponentProps {
-    colorTheme: ColorTheme<any>
-}
-
-export interface ColorThemeComponentState {
-
-}
-
-export class ColorThemeComponent extends React.Component<ColorThemeComponentProps, ColorThemeComponentState> {
-    state = {
-
-    }
-
-    render() {
-        const ct = this.props.colorTheme
-        return <div>
-            <span>Color Theme Info </span>
-
-            {ct.description ? <div><i>{ct.description}</i></div> : ''}
-            {
-                ct.legend && ct.legend.kind === 'scale-legend'
-                    ? <div
-                        style={{
-                            width: '100%',
-                            height: '30px',
-                            background: `linear-gradient(to right, ${ct.legend.colors.map(c => Color.toStyle(c)).join(', ')})`
-                        }}
-                    >
-                        <span style={{float: 'left', padding: '6px', color: 'white', fontWeight: 'bold', backgroundColor: 'rgba(0, 0, 0, 0.2)'}}>{ct.legend.minLabel}</span>
-                        <span style={{float: 'right', padding: '6px', color: 'white', fontWeight: 'bold', backgroundColor: 'rgba(0, 0, 0, 0.2)'}}>{ct.legend.maxLabel}</span>
-                    </div>
-                : ct.legend && ct.legend.kind === 'table-legend'
-                    ? <div>
-                        {ct.legend.table.map((value, i) => {
-                            const [name, color] = value
-                            return <div key={i} style={{minWidth: '60px', marginRight: '5px', display: 'inline-block'}}>
-                                <div style={{width: '30px', height: '20px', backgroundColor: Color.toStyle(color), display: 'inline-block'}}></div>
-                                {name}
-                            </div>
-                        })}
-                    </div>
-                : ''
-            }
-        </div>;
-    }
-}

src/mol-model-props/common/custom-element-property.ts

@@ -12,7 +12,7 @@ import { Task } from '../../mol-task';
 import { ThemeDataContext, ThemeProvider } from '../../mol-theme/theme';
 import { ColorTheme, LocationColor } from '../../mol-theme/color';
 import { Color } from '../../mol-util/color';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend } from '../../mol-util/legend';
 import { Loci } from '../../mol-model/loci';
 import { OrderedSet } from '../../mol-data/int';
 

src/mol-model-props/pdbe/themes/structure-quality-report.ts

@@ -10,7 +10,7 @@ import { StructureElement } from '../../../mol-model/structure';
 import { ColorTheme, LocationColor } from '../../../mol-theme/color';
 import { ThemeDataContext } from '../../../mol-theme/theme';
 import { Color } from '../../../mol-util/color';
-import { TableLegend } from '../../../mol-util/color/lists';
+import { TableLegend } from '../../../mol-util/legend';
 
 const ValidationColors = [
     Color.fromRgb(170, 170, 170), // not applicable

src/mol-model-props/rcsb/themes/assembly-symmetry-cluster.ts

@@ -12,10 +12,9 @@ import { AssemblySymmetry } from '../assembly-symmetry';
 import { Color } from '../../../mol-util/color';
 import { Unit, StructureElement, StructureProperties } from '../../../mol-model/structure';
 import { Location } from '../../../mol-model/location';
-import { ScaleLegend } from '../../../mol-util/color/scale';
+import { ScaleLegend, TableLegend } from '../../../mol-util/legend';
 import { getSymmetrySelectParam } from '../util';
 import { getPalette, getPaletteParams } from '../../../mol-util/color/palette';
-import { TableLegend } from '../../../mol-util/color/lists';
 
 const DefaultColor = Color(0xCCCCCC)
 

src/mol-plugin/skin/base/components/controls.scss

@@ -302,5 +302,64 @@
     > div {
         line-height: $row-height;
         text-align: center;
+        color: color-lower-contrast($font-color, 15%);
+    }
+}
+
+.msp-help span {
+    display: none;
+}
+
+.msp-help:hover span {
+    display: inline-block;
+    background: linear-gradient($default-background, change-color($default-background, $alpha: 0.5));
+}
+
+.msp-help-text {
+    height: auto !important;
+
+    > div {
+        padding: ($control-spacing / 2) $control-spacing;
+        text-align: left;
+        color: color-lower-contrast($font-color, 15%);
+    }
+}
+
+.msp-help-description {
+    font-style: italic;
+}
+
+.msp-help-legend {
+    padding-top: $control-spacing;
+}
+
+.msp-scale-legend {
+    > div {
+        width: 100%;
+        height: $control-spacing * 3;
+
+        > span {
+            padding: $control-spacing / 2;
+            color: white;
+            font-weight: bold;
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+    }
+}
+
+.msp-table-legend {
+    > div {
+        // min-width: 60px;
+        margin-right: $control-spacing / 2;
+        display: inline-flex;
+
+        .msp-table-legend-color {
+            width: $control-spacing * 3;
+            height: $control-spacing * 2;
+        }
+
+        .msp-table-legend-text {
+            margin: 0 ($control-spacing / 2);
+        }
     }
 }

src/mol-plugin/skin/base/icons.scss

@@ -4,45 +4,45 @@
   font-style: normal;
   font-weight: normal;
   speak: none;
- 
+
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
   margin-right: .2em;
   text-align: center;
   /* opacity: .8; */
- 
+
   /* For safety - reset parent styles, that can break glyph codes*/
   font-variant: normal;
   text-transform: none;
- 
+
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
- 
+
   /* Animation center compensation - margins should be symmetric */
   /* remove if not needed */
   margin-left: .2em;
- 
+
   /* you can be more comfortable with increased icons size */
   /* font-size: 120%; */
- 
+
   /* Font smoothing. That was taken from TWBS */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
- 
+
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
-.msp-icon-expand-layout:before { 
+.msp-icon-expand-layout:before {
 	content: "\e84a";
 }
 
-.msp-icon-plus:before { 
+.msp-icon-plus:before {
 	content: "\e816";
 }
 
-.msp-icon-minus:before { 
+.msp-icon-minus:before {
 	content: "\e819";
 }
 
@@ -50,19 +50,19 @@
 	content: "\e891";
 }
 
-.msp-icon-ok:before { 
+.msp-icon-ok:before {
 	content: "\e812";
 }
 
-.msp-icon-back:before { 
+.msp-icon-back:before {
 	content: "\e820";
 }
 
-.msp-icon-cross:before { 
+.msp-icon-cross:before {
 	content: "\e868";
 }
 
-.msp-icon-off:before { 
+.msp-icon-off:before {
 	content: "\e813";
 }
 
@@ -70,23 +70,23 @@
 	content: "\e885";
 }
 
-.msp-icon-collapse:before { 
+.msp-icon-collapse:before {
 	content: "\e883";
 }
 
-.msp-icon-visual-visibility:before { 
+.msp-icon-visual-visibility:before {
 	content: "\e826";
 }
 
-.msp-icon-abort:before { 
+.msp-icon-abort:before {
 	content: "\e814";
 }
 
-.msp-icon-focus-on-visual:before { 
+.msp-icon-focus-on-visual:before {
 	content: "\e8a3";
 }
 
-.msp-icon-settings:before  { 
+.msp-icon-settings:before  {
 	content: "\e855";
 }
 
@@ -106,6 +106,10 @@
     content: '\e81c'
 }
 
+.msp-icon-help-circle:before {
+	content: '\e81d';
+}
+
 .msp-icon-info:before {
     content: '\e81e'
 }
@@ -126,18 +130,10 @@
     content: '\e875'
 }
 
-.msp-icon-screenshot:before { 
+.msp-icon-screenshot:before {
 	content: "\e80f";
 }
 
-.msp-icon-help:before { 
-	content: "\e81c";
-}
-
-.msp-icon-help-circle:before { 
-	content: "\e81d";
-}
-
 .msp-icon-model-prev:before {
     content: "\e884";
 }

src/mol-plugin/state/transforms/representation.ts

@@ -135,6 +135,15 @@ const StructureRepresentation3D = PluginStateTransform.BuiltIn({
         const type = registry.get(registry.default.name);
 
         if (!a) {
+            const colorThemeInfo = {
+                help: (value: { name: string, params: {} }) => {
+                    const { name, params } = value
+                    const p = themeCtx.colorThemeRegistry.get(name)
+                    const ct = p.factory({}, params)
+                    return { description: ct.description, legend: ct.legend }
+                }
+            }
+
             return {
                 type: PD.Mapped<any>(
                     registry.default.name,
@@ -143,7 +152,8 @@ const StructureRepresentation3D = PluginStateTransform.BuiltIn({
                 colorTheme: PD.Mapped<any>(
                     type.defaultColorTheme,
                     themeCtx.colorThemeRegistry.types,
-                    name => PD.Group<any>(themeCtx.colorThemeRegistry.get(name).getParams({ structure: Structure.Empty }))
+                    name => PD.Group<any>(themeCtx.colorThemeRegistry.get(name).getParams({ structure: Structure.Empty })),
+                    colorThemeInfo
                 ),
                 sizeTheme: PD.Mapped<any>(
                     type.defaultSizeTheme,
@@ -154,6 +164,15 @@ const StructureRepresentation3D = PluginStateTransform.BuiltIn({
         }
 
         const dataCtx = { structure: a.data }
+        const colorThemeInfo = {
+            help: (value: { name: string, params: {} }) => {
+                const { name, params } = value
+                const p = themeCtx.colorThemeRegistry.get(name)
+                const ct = p.factory(dataCtx, params)
+                return { description: ct.description, legend: ct.legend }
+            }
+        }
+
         return ({
             type: PD.Mapped<any>(
                 registry.default.name,
@@ -162,7 +181,8 @@ const StructureRepresentation3D = PluginStateTransform.BuiltIn({
             colorTheme: PD.Mapped<any>(
                 type.defaultColorTheme,
                 themeCtx.colorThemeRegistry.getApplicableTypes(dataCtx),
-                name => PD.Group<any>(themeCtx.colorThemeRegistry.get(name).getParams(dataCtx))
+                name => PD.Group<any>(themeCtx.colorThemeRegistry.get(name).getParams(dataCtx)),
+                colorThemeInfo
             ),
             sizeTheme: PD.Mapped<any>(
                 type.defaultSizeTheme,

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Color } from '../../../mol-util/color';
+import * as React from 'react';
+import { _Props, _State } from '../base';
+import { Legend as LegendData, ScaleLegend as ScaleLegendData, TableLegend as TableLegendData } from '../../../mol-util/legend';
+
+export type LegendProps<L extends LegendData> = { legend: L }
+export type Legend = React.ComponentClass<LegendProps<any>>
+
+export function legendFor(legend: LegendData): Legend | undefined {
+    switch (legend.kind) {
+        case 'scale-legend': return ScaleLegend
+        case 'table-legend': return TableLegend
+        default:
+            const _: never = legend;
+            console.warn(`${_} has no associated UI component`);
+            return void 0;
+    }
+}
+
+export class ScaleLegend extends React.PureComponent<LegendProps<ScaleLegendData>> {
+    render() {
+        const { legend } = this.props
+        const colors = legend.colors.map(c => Color.toStyle(c)).join(', ')
+        return  <div className='msp-scale-legend'>
+            <div style={{ background: `linear-gradient(to right, ${colors})` }}>
+                <span style={{float: 'left'}}>{legend.minLabel}</span>
+                <span style={{float: 'right'}}>{legend.maxLabel}</span>
+            </div>
+        </div>
+    }
+}
+
+export class TableLegend extends React.PureComponent<LegendProps<TableLegendData>> {
+    render() {
+        const { legend } = this.props
+        return <div className='msp-table-legend'>
+            {legend.table.map((value, i) => {
+                const [name, color] = value
+                return <div key={i}>
+                    <div className='msp-table-legend-color' style={{backgroundColor: Color.toStyle(color)}}></div>
+                    <div className='msp-table-legend-text'>{name}</div>
+                </div>
+            })}
+        </div>
+    }
+}

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

@@ -17,6 +17,8 @@ import LineGraphComponent from './line-graph/line-graph-component';
 import { Slider, Slider2 } from './slider';
 import { NumericInput, IconButton, ControlGroup } from './common';
 import { _Props, _State } from '../base';
+import { legendFor } from './legend';
+import { Legend as LegendData } from '../../../mol-util/legend';
 
 export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
     params: P,
@@ -73,13 +75,34 @@ function controlFor(param: PD.Any): ParamControl | undefined {
     }
 }
 
-// type ParamWrapperProps = { name: string, value: any, param: PD.Base<any>, onChange: ParamOnChange, control: ValueControl, onEnter?: () => void, isEnabled?: boolean }
+export class ParamHelp<L extends LegendData> extends React.PureComponent<{ legend?: L, description?: string }> {
+    render() {
+        const { legend, description } = this.props
+        const Legend = legend && legendFor(legend)
+
+        return <div className='msp-control-row msp-help-text'>
+            <div>
+                <div className='msp-help-description'><span className={`msp-icon msp-icon-help-circle`} />{description}</div>
+                <div className='msp-help-legend'>{Legend && <Legend legend={legend} />}</div>
+            </div>
+        </div>
+    }
+}
 
 export type ParamOnChange = (params: { param: PD.Base<any>, name: string, value: any }) => void
-export interface ParamProps<P extends PD.Base<any> = PD.Base<any>> { name: string, value: P['defaultValue'], param: P, isDisabled?: boolean, onChange: ParamOnChange, onEnter?: () => void }
+export interface ParamProps<P extends PD.Base<any> = PD.Base<any>> {
+    name: string,
+    value: P['defaultValue'],
+    param: P,
+    isDisabled?: boolean,
+    onChange: ParamOnChange,
+    onEnter?: () => void
+}
 export type ParamControl = React.ComponentClass<ParamProps<any>>
 
-export abstract class SimpleParam<P extends PD.Any> extends React.PureComponent<ParamProps<P>> {
+export abstract class SimpleParam<P extends PD.Any> extends React.PureComponent<ParamProps<P>, { isExpanded: boolean }> {
+    state = { isExpanded: false };
+
     protected update(value: P['defaultValue']) {
         this.props.onChange({ param: this.props.param, name: this.props.name, value });
     }
@@ -93,14 +116,33 @@ export abstract class SimpleParam<P extends PD.Any> extends React.PureComponent<
         return className.join(' ')
     }
 
+    toggleExpanded = () => this.setState({ isExpanded: !this.state.isExpanded });
+
     render() {
         const label = this.props.param.label || camelCaseToWords(this.props.name);
-        return <div className={this.className}>
-            <span title={this.props.param.description}>{label}</span>
-            <div>
-                {this.renderControl()}
+        const help = this.props.param.help
+            ? this.props.param.help(this.props.value)
+            : { description: this.props.param.description, legend: this.props.param.legend }
+        const hasHelp = help.description || help.legend
+        return <>
+            <div className={this.className}>
+                <span title={this.props.param.description}>
+                    {label}
+                    {hasHelp &&
+                        <button className='msp-help msp-btn-link msp-btn-icon msp-conrol-group-expander' onClick={this.toggleExpanded} title={`${this.state.isExpanded ? 'Hide' : 'Show'} help`}
+                                style={{ background: 'transparent', textAlign: 'left', padding: '0' }}>
+                                <span className={`msp-icon msp-icon-help-circle`} />
+                        </button>
+                    }
+                </span>
+                <div>
+                    {this.renderControl()}
+                </div>
             </div>
-        </div>;
+            {hasHelp && this.state.isExpanded && <div className='msp-control-offset'>
+                <ParamHelp legend={help.legend} description={help.description} />
+            </div>}
+        </>;
     }
 }
 
@@ -526,16 +568,24 @@ export class MappedControl extends React.PureComponent<ParamProps<PD.Mapped<any>
         const label = this.props.param.label || camelCaseToWords(this.props.name);
         const Mapped = controlFor(param);
 
-        const select = <SelectControl param={this.props.param.select}
+        const help = this.props.param.help
+        const select = help
+            ? {
+                ...this.props.param.select,
+                help: (name: any) => help({ name, params: this.getValues(name) })
+            }
+            : this.props.param.select
+
+        const Select = <SelectControl param={select}
             isDisabled={this.props.isDisabled} onChange={this.onChangeName} onEnter={this.props.onEnter}
             name={label} value={value.name} />
 
         if (!Mapped) {
-            return select;
+            return Select;
         }
 
         return <>
-            {select}
+            {Select}
             <Mapped param={param} value={value.params} name={`${label} Properties`} onChange={this.onChangeParam} onEnter={this.props.onEnter} isDisabled={this.props.isDisabled} />
         </>
     }

src/mol-theme/color.ts

@@ -24,8 +24,7 @@ import { SecondaryStructureColorThemeProvider } from './color/secondary-structur
 import { SequenceIdColorThemeProvider } from './color/sequence-id';
 import { ShapeGroupColorThemeProvider } from './color/shape-group';
 import { UnitIndexColorThemeProvider } from './color/unit-index';
-import { ScaleLegend } from '../mol-util/color/scale';
-import { TableLegend } from '../mol-util/color/lists';
+import { ScaleLegend, TableLegend } from '../mol-util/legend';
 import { UncertaintyColorThemeProvider } from './color/uncertainty';
 import { EntitySourceColorThemeProvider } from './color/entity-source';
 import { IllustrativeColorThemeProvider } from './color/illustrative';

src/mol-theme/color/carbohydrate-symbol.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -11,7 +11,7 @@ import { ColorTheme, LocationColor } from '../color';
 import { Color } from '../../mol-util/color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../theme';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend } from '../../mol-util/legend';
 
 const DefaultColor = Color(0xCCCCCC)
 const Description = 'Assigns colors according to the Symbol Nomenclature for Glycans (SNFG).'

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

@@ -10,9 +10,8 @@ import { Location } from '../../mol-model/location';
 import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
-import { ScaleLegend } from '../../mol-util/color/scale';
 import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend, ScaleLegend } from '../../mol-util/legend';
 import { Segmentation } from '../../mol-data/int';
 
 const DefaultColor = Color(0xFAFAFA)

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

@@ -12,8 +12,7 @@ import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
 import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
-import { TableLegend } from '../../mol-util/color/lists';
-import { ScaleLegend } from '../../mol-util/color/scale';
+import { TableLegend, ScaleLegend } from '../../mol-util/legend';
 
 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.'

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

@@ -11,7 +11,7 @@ import { Location } from '../../mol-model/location';
 import { ColorTheme } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../theme';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend } from '../../mol-util/legend';
 import { getAdjustedColorMap } from '../../mol-util/color/color';
 
 // from Jmol http://jmol.sourceforge.net/jscolors/ (or 0xFFFFFF)

src/mol-theme/color/entity-source.ts

@@ -10,11 +10,10 @@ import { Location } from '../../mol-model/location';
 import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
-import { ScaleLegend } from '../../mol-util/color/scale';
 import { Table, Column } from '../../mol-data/db';
 import { mmCIF_Schema } from '../../mol-io/reader/cif/schema/mmcif';
 import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend, ScaleLegend } from '../../mol-util/legend';
 
 const DefaultColor = Color(0xFAFAFA)
 const Description = 'Gives ranges of a polymer chain a color based on the entity source it originates from. Genes get the same color per entity.'

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

@@ -10,9 +10,8 @@ import { StructureElement, Link } from '../../mol-model/structure';
 import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
-import { ScaleLegend } from '../../mol-util/color/scale';
 import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend, ScaleLegend } from '../../mol-util/legend';
 
 const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every model a unique color based on the position (index) of the model in the list of models in the structure.'

src/mol-theme/color/molecule-type.ts

@@ -12,7 +12,7 @@ import { MoleculeType } from '../../mol-model/structure/model/types';
 import { getElementMoleculeType } from '../../mol-model/structure/util';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../theme';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend } from '../../mol-util/legend';
 import { getAdjustedColorMap } from '../../mol-util/color/color';
 
 export const MoleculeTypeColors = ColorMap({

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

@@ -12,8 +12,7 @@ import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
 import { getPalette, getPaletteParams } from '../../mol-util/color/palette';
-import { ScaleLegend } from '../../mol-util/color/scale';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend, ScaleLegend } from '../../mol-util/legend';
 import { Segmentation } from '../../mol-data/int';
 
 const DefaultColor = Color(0xFAFAFA)

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

@@ -10,8 +10,7 @@ import { StructureElement, Link, Structure } from '../../mol-model/structure';
 import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
-import { ScaleLegend } from '../../mol-util/color/scale';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend, ScaleLegend } from '../../mol-util/legend';
 import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
 
 const DefaultColor = Color(0xCCCCCC)

src/mol-theme/color/residue-name.ts

@@ -10,7 +10,7 @@ import { Location } from '../../mol-model/location';
 import { ColorTheme } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../theme';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend } from '../../mol-util/legend';
 import { getAdjustedColorMap } from '../../mol-util/color/color';
 
 // protein colors from Jmol http://jmol.sourceforge.net/jscolors/

src/mol-theme/color/secondary-structure.ts

@@ -12,7 +12,7 @@ import { SecondaryStructureType, MoleculeType } from '../../mol-model/structure/
 import { getElementMoleculeType } from '../../mol-model/structure/util';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../theme';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend } from '../../mol-util/legend';
 import { ComputedSecondaryStructure } from '../../mol-model-props/computed/secondary-structure';
 import { getAdjustedColorMap } from '../../mol-util/color/color';
 

src/mol-theme/color/uniform.ts

@@ -8,7 +8,7 @@ import { ColorTheme } from '../color';
 import { Color } from '../../mol-util/color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../theme';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend } from '../../mol-util/legend';
 import { defaults } from '../../mol-util';
 
 const DefaultColor = Color(0xCCCCCC)

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

@@ -10,9 +10,8 @@ import { StructureElement, Link } from '../../mol-model/structure';
 import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
-import { ScaleLegend } from '../../mol-util/color/scale';
 import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
-import { TableLegend } from '../../mol-util/color/lists';
+import { TableLegend, ScaleLegend } from '../../mol-util/legend';
 
 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.'

src/mol-util/color/lists.ts

@@ -4,15 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Color, ColorList } from './color';
-
-export interface TableLegend {
-    kind: 'table-legend'
-    table: [ string, Color ][]
-}
-export function TableLegend(table: [ string, Color ][]): TableLegend {
-    return { kind: 'table-legend', table }
-}
+import { ColorList } from './color';
 
 export const ColorLists = {
     /**

src/mol-util/color/palette.ts

@@ -6,9 +6,10 @@
 
 import { ParamDefinition as PD } from '../param-definition'
 import { DistinctColorsParams, distinctColors } from './distinct';
-import { ScaleLegend, ColorScale } from './scale';
+import { ColorScale } from './scale';
 import { Color } from '.';
-import { TableLegend, ColorListName, ColorListOptionsScale, ColorListOptionsSet, getColorListFromName } from './lists';
+import { ColorListName, ColorListOptionsScale, ColorListOptionsSet, getColorListFromName } from './lists';
+import { TableLegend, ScaleLegend } from '../legend';
 
 type PaletteType = 'generate' | 'scale' | 'set'
 
@@ -71,6 +72,7 @@ export function getPalette(count: number, props: PaletteProps) {
             colors = distinctColors(count, props.palette.params)
         }
         const colorsLength = colors.length
+        legend = TableLegend(colors.map((c, i) => [`${i + 1}`, c]))
         color = (i: number) => colors[i % colorsLength]
     }
 

src/mol-util/color/scale.ts

@@ -8,16 +8,7 @@ import { Color } from './color'
 import { getColorListFromName, ColorListName } from './lists'
 import { defaults } from '../../mol-util';
 import { NumberArray } from '../../mol-util/type-helpers';
-
-export interface ScaleLegend {
-    kind: 'scale-legend'
-    minLabel: string,
-    maxLabel: string,
-    colors: Color[]
-}
-export function ScaleLegend(minLabel: string, maxLabel: string, colors: Color[]): ScaleLegend {
-    return { kind: 'scale-legend', minLabel, maxLabel, colors }
-}
+import { ScaleLegend } from '../legend';
 
 export interface ColorScale {
     /** Returns hex color for given value */

src/mol-util/legend.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Color } from './color';
+
+export type Legend = TableLegend | ScaleLegend
+
+export interface TableLegend {
+    kind: 'table-legend'
+    table: [ string, Color ][]
+}
+export function TableLegend(table: [ string, Color ][]): TableLegend {
+    return { kind: 'table-legend', table }
+}
+
+export interface ScaleLegend {
+    kind: 'scale-legend'
+    minLabel: string,
+    maxLabel: string,
+    colors: Color[]
+}
+export function ScaleLegend(minLabel: string, maxLabel: string, colors: Color[]): ScaleLegend {
+    return { kind: 'scale-legend', minLabel, maxLabel, colors }
+}

src/mol-util/param-definition.ts

@@ -10,25 +10,32 @@ import { shallowEqual } from './index';
 import { Vec2 as Vec2Data, Vec3 as Vec3Data } from '../mol-math/linear-algebra';
 import { deepClone } from './object';
 import { Script as ScriptData } from '../mol-script/script';
+import { Legend } from './legend';
 
 export namespace ParamDefinition {
     export interface Info {
         label?: string,
         description?: string,
+        legend?: Legend,
         fieldLabels?: { [name: string]: string },
         isHidden?: boolean,
         shortLabel?: boolean,
         twoColumns?: boolean,
+
+        help?: (value: any) => { description?: string, legend?: Legend }
     }
 
     function setInfo<T extends Info>(param: T, info?: Info): T {
         if (!info) return param;
         if (info.label) param.label = info.label;
         if (info.description) param.description = info.description;
+        if (info.legend) param.legend = info.legend;
         if (info.fieldLabels) param.fieldLabels = info.fieldLabels;
         if (info.isHidden) param.isHidden = info.isHidden;
         if (info.shortLabel) param.shortLabel = info.shortLabel;
         if (info.twoColumns) param.twoColumns = info.twoColumns;
+
+        if (info.help) param.help = info.help;
         return param;
     }
 

src/mol-util/type-helpers.ts

@@ -5,9 +5,9 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-export type Mutable<T> = {
-    -readonly [P in keyof T]: T[P]
-}
+export type Mutable<T> = { -readonly [P in keyof T]: T[P] }
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
+
 export type TypedIntArray = Int8Array | Int16Array | Int32Array | Uint8Array | Uint16Array | Uint32Array
 export type TypedFloatArray = Float32Array | Float64Array