canvas ui weaks

src/apps/canvas/component/representation.tsx

@@ -11,6 +11,9 @@ import { Params } from 'mol-view/parameter';
 import { Representation } from 'mol-geo/representation';
 import { ParametersComponent } from 'mol-app/component/parameters';
 import { Progress } from 'mol-task';
+import { ColorTheme } from 'mol-view/theme/color';
+import { getColorThemeProps } from 'mol-geo/geometry/color-data';
+import { ColorThemeComponent } from 'mol-app/component/color-theme';
 
 export interface RepresentationComponentProps {
     app: App
@@ -19,34 +22,53 @@ export interface RepresentationComponentProps {
 }
 
 export interface RepresentationComponentState {
-
+    label: string
+    reprParams: Params
+    reprProps: Readonly<{}>
 }
 
 export class RepresentationComponent extends React.Component<RepresentationComponentProps, RepresentationComponentState> {
 
+    private stateFromRepr(repr: Representation<Params>) {
+        return {
+            label: this.props.repr.label,
+            reprParams: this.props.repr.params,
+            reprProps: this.props.repr.props
+        }
+    }
+
+    componentWillMount() {
+        this.setState(this.stateFromRepr(this.props.repr))
+    }
+
     async onChange(k: string, v: any) {
         await this.props.app.runTask(this.props.repr.createOrUpdate({ [k]: v }).run(
             progress => console.log(Progress.format(progress))
         ), 'Representation Update')
         this.props.viewer.add(this.props.repr)
         this.props.viewer.requestDraw(true)
+        this.setState(this.stateFromRepr(this.props.repr))
     }
 
     render() {
-        const { repr } = this.props
-        // const ct = ColorTheme(colorTheme)
+        const { label, reprParams, reprProps } = this.state
+        let colorTheme: ColorTheme | undefined = undefined
+        if ('colorTheme' in reprProps) {
+            colorTheme = ColorTheme(getColorThemeProps(reprProps))
+        }
 
         return <div>
             <div>
-                <h4>{repr.label}</h4>
+                <h4>{label}</h4>
             </div>
             <div>
                 <ParametersComponent
-                    params={repr.params}
-                    values={repr.props}
+                    params={reprParams}
+                    values={reprProps}
                     onChange={(k, v) => this.onChange(k as string, v)}
                 />
             </div>
+            { colorTheme !== undefined ? <ColorThemeComponent colorTheme={colorTheme} /> : '' }
         </div>;
     }
 }

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

@@ -13,12 +13,12 @@ export interface ColorThemeComponentProps {
 }
 
 export interface ColorThemeComponentState {
-    
+
 }
 
 export class ColorThemeComponent extends React.Component<ColorThemeComponentProps, ColorThemeComponentState> {
     state = {
-        
+
     }
 
     render() {