Merge pull request #24 from Kitware/update-for-visualizer

Update for visualizer

src/IO/WebSocket/ParaViewWebClient/ColorManager.js

@@ -39,5 +39,8 @@ export default function createMethods(session) {
         listColorMapNames: () => {
             return session.call('pv.color.manager.list.preset', []);
         },
+        listColorMapImages: (numSamples=256) => {
+            return session.call('pv.color.manager.lut.image.all', [numSamples]);
+        },
     };
 }

src/React/Widgets/ColorByWidget/example/index.js

@@ -0,0 +1,26 @@
+import React              from 'react';
+import ReactDOM           from 'react-dom';
+import ColorByWidget      from '..';
+
+import source             from '../../ProxyEditorWidget/example/source-proxy.json';
+import representation     from '../../ProxyEditorWidget/example/representation-proxy.json';
+import presets            from './presets.json';
+
+const scalarBar = 'iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAIAAAAn2YEhAAAGDElEQVQ4EQEBBv75ATtMwAAAAAECAgAAAAECAQAAAAEBAgAAAAICAQAAAAECAgAAAAEBAQAAAAECAgAAAAECAQAAAAECAgAAAAIBAQAAAAECAgAAAAECAQAAAAECAQAAAAEBAgAAAAICAQAAAAECAQAAAAEBAgAAAAECAQAAAAICAQAAAAEBAQAAAAECAgAAAAECAQAAAAIBAQAAAAECAQAAAAECAQAAAAEBAgAAAAICAQAAAAECAQAAAAEBAQAAAAICAQAAAAEBAQAAAAECAQAAAAECAQAAAAIBAQAAAAECAQAAAAEBAQAAAAICAQAAAAEBAAAAAAECAQAAAAIBAQAAAAECAQAAAAEBAQAAAAICAAAAAAEBAQAAAAECAQAAAAIBAQAAAAECAAAAAAEBAQAAAAICAAAAAAEBAQAAAAICAQAAAAEBAAAAAAEBAQAAAAICAAAAAAEBAQAAAAEBAAAAAAICAQAAAAEBAAAAAAIBAAAAAAECAQAAAAEBAAAAAAIBAAAAAAECAQAAAAEBAAAAAAIBAAAAAAEBAAAAAAICAAAAAAEBAQAAAAEBAAAAAAIBAAAAAAEBAAAAAAIBAAAAAAEBAAAAAAECAAAAAAIBAAAAAAEBAAAAAAEBAAAAAAIBAAAAAAEBAAAAAAEB/wAAAAIBAAAAAAEBAAAAAAIBAAAAAAEBAAAAAAEB/wAAAAIBAAAAAAEAAAAAAAEB/wAAAAIBAAAAAAEBAAAAAAEB/wAAAAEBAAAAAAIA/wAAAAEBAAAAAAEB/wAAAAIBAAAAAAEA/wAAAAEBAAAAAAEB/wAAAAIA/wAAAAEBAAAAAAEB/wAAAAEA/wAAAAIBAAAAAAEA/wAAAAEB/wAAAAEA/wAAAAEBAAAAAAIA/wAAAAEB/wAAAAEA/wAAAAEB/wAAAAEA/wAAAAEB/wAAAAIA/wAAAAEA/wAAAAEB/wAAAAEA/wAAAAEA/wAAAAEA/wAAAAEB/wAAAAEA/wAAAAEA/wAAAAEA/wAAAAEA/wAAAAEA/gAAAAEB/wAAAAH//wAAAAEA/gAAAAH//wAAAAEA/wAAAAH//gAAAAEA/wAAAAH//gAAAAEA/wAAAAH//gAAAAH//wAAAAEA/wAAAAH//gAAAAH//wAAAAEA/gAAAAH//wAAAAD//gAAAAH//wAAAAEA/gAAAAD//wAAAAH//gAAAAH//wAAAAD//gAAAAH//gAAAAEA/wAAAAD//gAAAAH//wAAAAD//gAAAAH//wAAAAD//gAAAAH//wAAAAD//gAAAAD//gAAAAH//wAAAAD+/gAAAAD//wAAAAH//gAAAAD//wAAAAD//gAAAAD//gAAAAH//wAAAAD+/gAAAAD//wAAAAD//gAAAAD//wAAAAD+/gAAAAD//gAAAAD//wAAAAD+/gAAAAD//wAAAAD//gAAAAD+/wAAAAD//gAAAAD//gAAAAD+/wAAAAD//gAAAAD+/wAAAP///gAAAAD+/wAAAAD//gAAAAD+/gAAAP///wAAAAD+/gAAAAD//wAAAP/+/gAAAAD//wAAAAD+/gAAAP/+/wAAAAD//gAAAP/+/wAAAAD+/gAAAP///wAAAAD+/gAAAP/+/wAAAAD//gAAAP/+/wAAAP/+/gAAAAD//wAAAP/+/gAAAAD+/wAAAP/+/gAAAP/+/wAAAP///gAAAAD+/wAAAP/+/gAAAP/+/wAAAP/+/gAAAP/+/wAAAP/+/wAAAAD//gAAAP/+/wAAAP/+/gAAAP/+/wAAAP/+/wAAAP/+/gAAAP/+/wAAAP/+/wAAAP/+/gAAAP/+/wAAAP/+/wAAAP/+/gAAAP79/wAAAP/+/wAAAP/+/gAAAP/+/wAAAP/+/wAAAP/+/wAAAP79/gAAAP/+/wAAAP/+/wAAAP/+/wAAAP79/gAAAP/+/wAAAP/9/wAAAP7+/wAAAP/9/wAAAP/+/gAAAP79/wAAAP/9/wAAAP79/wAAAP/9/wAAAP/9/wAAAP79/gAAAP/8/wAAAP78/wAAAP/8/wAAAP77/wAAAP/6/wAAAP75/wAAAAH4Uu+CshkNAAAAAElFTkSuQmCC';
+
+// Load CSS
+require('normalize.css');
+
+const container = document.querySelector('.content');
+
+function onChange(event) {
+  console.log(event);
+}
+
+ReactDOM.render(
+    React.createElement(
+        ColorByWidget,
+        { source, representation, scalarBar, onChange, presets }),
+    container);
+
+document.body.style.margin = '10px';

src/React/Widgets/ColorByWidget/index.js

@@ -0,0 +1,247 @@
+import React              from 'react';
+import PresetListWidget   from '../PresetListWidget';
+import ScalarRangeWidget  from '../ScalarRangeWidget';
+import style              from 'PVWStyle/ReactWidgets/ColorByWidget.mcss';
+
+const SEP = ':|:';
+
+function doubleToHex(number) {
+  var str = Math.floor(number*255).toString(16);
+  while(str.length < 2) {
+    str = '0' + str;
+  }
+  return str;
+}
+
+export default React.createClass({
+
+  displayName: 'ColorByWidget',
+
+  propTypes: {
+    className: React.PropTypes.string,
+    max: React.PropTypes.number,
+    min: React.PropTypes.number,
+    onChange: React.PropTypes.func,
+    presets: React.PropTypes.object,
+    representation: React.PropTypes.object,
+    scalarBar: React.PropTypes.string,
+    source: React.PropTypes.object,
+  },
+
+  getDefaultProps() {
+      return {
+          min: 0,
+          max: 1,
+      };
+  },
+
+  getInitialState(){
+    return {
+        advancedView: false,
+        colorValue: SEP,
+        colorValues: [],
+        representationValue: '',
+        representationValues: [],
+        scalarBarVisible: false,
+        solidColor: '#fff',
+        activeAdvanceView: '0',
+    };
+  },
+
+  componentWillMount(){
+    this.updateState(this.props);
+  },
+
+  componentWillReceiveProps(nextProps) {
+    this.updateState(nextProps);
+  },
+
+  updateState(props) {
+    if(!props.source || !props.representation) {
+      return;
+    }
+
+    const extractRepProp = (p => (p.name === 'Representation'));
+    const removeFieldArray = (a => (a.location !== 'FIELDS'));
+    const representationValues = props.representation.ui.filter(extractRepProp)[0].values;
+    const representationValue = props.representation.properties.filter(extractRepProp)[0].value;
+    const colorValues = [{name: 'Solid color'}].concat(props.source.data.arrays.filter(removeFieldArray));
+    const colorValue = props.representation.colorBy.array.filter((v,i) => i < 2).join(SEP);
+    const scalarBarVisible = !!props.representation.colorBy.scalarBar;
+    const solidColor = '#' + props.representation.colorBy.color.map(doubleToHex).join('');
+
+    const colorMode = colorValue.split(SEP)[1] ? 'array': 'SOLID';
+
+    this.setState({
+      representationValues,
+      representationValue,
+      colorValues,
+      colorValue,
+      scalarBarVisible,
+      solidColor,
+      colorMode,
+    });
+  },
+
+  toggleScalarBar() {
+    var scalarBarVisible = !this.state.scalarBarVisible;
+
+    if(this.state.colorMode === 'SOLID') {
+      scalarBarVisible = false;
+    }
+
+    this.setState({scalarBarVisible});
+    if(this.props.onChange) {
+      this.props.onChange({
+        type: 'scalarBar',
+        source: this.props.source.id,
+        representation: this.props.representation.id,
+        visible: scalarBarVisible,
+      });
+    }
+  },
+
+  toggleAdvancedView() {
+    const advancedView = !this.state.advancedView;
+    this.setState({advancedView});
+  },
+
+  onRepresentationChange(event) {
+    const representationValue = event.target.value;
+    this.setState({representationValue});
+    if(this.props.onChange) {
+      this.props.onChange({
+        type: 'propertyChange',
+        changeSet: [{
+          id: this.props.representation.id,
+          name: 'Representation',
+          value: representationValue,
+        }],
+      });
+    }
+  },
+
+  onColorChange(event) {
+    var scalarBarVisible = this.state.scalarBarVisible;
+    const colorValue = event.target.value;
+    const [arrayLocation, arrayName] = colorValue.split(SEP);
+    const colorMode = arrayName ? 'array': 'SOLID';
+    const vectorMode = 'Magnitude';
+    const vectorComponent = 0;
+    const rescale = false;
+
+    if(colorMode === 'SOLID') {
+      scalarBarVisible = false;
+    }
+
+
+    this.setState({colorValue, scalarBarVisible, colorMode});
+    if(this.props.onChange) {
+      this.props.onChange({
+        type: 'colorBy',
+        representation: this.props.representation.id,
+        arrayLocation,
+        arrayName,
+        colorMode,
+        vectorMode,
+        vectorComponent,
+        rescale,
+      });
+    }
+  },
+
+  updatePreset(name) {
+    if(this.props.onChange) {
+      this.props.onChange({
+        type: 'updatePreset',
+        representation: this.props.representation.id,
+        preset: name,
+      });
+    }
+  },
+
+  updateRange(options) {
+    options.proxyId = this.props.source.id;
+    if(this.props.onChange) {
+      this.props.onChange({
+        type: 'updateScalarRange',
+        options,
+      });
+    }
+  },
+
+  updateActiveView(event) {
+    const activeAdvanceView = event.target.dataset.idx;
+    this.setState({activeAdvanceView});
+  },
+
+  render() {
+    if(!this.props.source || !this.props.representation) {
+      return null;
+    }
+
+    return (
+      <div className={ [style.container, this.props.className].join(' ') }>
+        <div className={ style.line}>
+          <i className={ style.representationIcon }></i>
+          <select className={ style.input }
+            value={ this.state.representationValue }
+            onChange={ this.onRepresentationChange }>
+            { this.state.representationValues.map((v,idx) => {
+              return <option key={idx} value={v}>{v}</option>;
+            })}
+          </select>
+        </div>
+        <div className={ style.line}>
+          <i className={ style.colorIcon }></i>
+          <select className={ style.input }
+            value={ this.state.colorValue }
+            onChange={ this.onColorChange }>
+            { this.state.colorValues.map((c,idx) => {
+              return  <option key={idx} value={c.location ? [c.location, c.name].join(SEP) : ''}>
+                        {c.location ? `(${c.location === 'POINTS' ? 'p' : 'c'}${c.size}) ${c.name}` : c.name}
+                      </option>;
+            })}
+          </select>
+        </div>
+        <div className={ style.line }>
+          <i onClick={ this.toggleAdvancedView }
+            className={ this.state.advancedView ? style.advanceIconOn : style.advanceIconOff }>
+          </i>
+          { this.props.scalarBar && this.state.colorValue && this.state.colorValue.split(SEP)[1].length ?
+            <img onClick={ this.toggleScalarBar } className={ style.scalarBar } src={ 'data:image/png;base64,' + this.props.scalarBar } />
+            : <div className={ style.scalarBar } style={{backgroundColor: this.state.solidColor}}></div>
+          }
+          <i onClick={ this.toggleScalarBar }
+             className={ this.state.scalarBarVisible ? style.scalarBarIconOn : style.scalarBarIconOff }></i>
+        </div>
+        <div className={ this.state.advancedView ? style.advancedView : style.hidden } >
+          <div className={ style.advancedViewControl }>
+            <i data-idx='0'
+                onClick={ this.updateActiveView }
+                className={ this.state.activeAdvanceView === '0' ? style.activePresetIcon    : style.presetIcon    }></i>
+            <i data-idx='1'
+                onClick={ this.updateActiveView }
+                className={ this.state.activeAdvanceView === '1' ? style.activeRangeIcon     : style.rangeIcon     }></i>
+            <i data-idx='2'
+                onClick={ this.updateActiveView }
+                className={ this.state.activeAdvanceView === '2' ? style.activeOpacityIcon   : style.opacityIcon   }></i>
+            <i data-idx='3'
+                onClick={ this.updateActiveView }
+                className={ this.state.activeAdvanceView === '3' ? style.activeColorEditIcon : style.colorEditIcon }></i>
+          </div>
+          <div className={ style.advancedViewContent }>
+            <PresetListWidget
+                visible={ this.state.activeAdvanceView === '0' }
+                onChange={ this.updatePreset }
+                presets={ this.props.presets } />
+            <ScalarRangeWidget
+                visible={ this.state.activeAdvanceView === '1' }
+                min={ this.props.min }
+                max={ this.props.max }
+                onApply={ this.updateRange }/>
+          </div>
+        </div>
+      </div>);
+  },
+});

src/React/Widgets/GitTreeWidget/index.js

@@ -131,6 +131,7 @@ export default React.createClass({
             React.PropTypes.instanceOf(null), //this could have some problematic effect
         ]),
         stroke: React.PropTypes.number,
+        style: React.PropTypes.object,
         textColor: React.PropTypes.array,
         textWeight: React.PropTypes.array,
         width: React.PropTypes.oneOfType([
@@ -143,6 +144,7 @@ export default React.createClass({
         return {
             nodes: [],
             actives: [],
+            style: {},
 
             enableDelete: false,
             deltaX: 20,
@@ -390,7 +392,7 @@ export default React.createClass({
 
     render() {
         return (
-            <svg width={this.props.width} height={this.props.deltaY * this.state.nodes.length + 'px'} onClick={ this.toggleActive }>
+            <svg style={this.props.style} width={this.props.width} height={this.props.deltaY * this.state.nodes.length + 'px'} onClick={ this.toggleActive }>
                 { this.renderActives()       }
                 { this.renderBranches()      }
                 { this.renderForks()         }

src/React/Widgets/PresetListWidget/index.js

@@ -0,0 +1,62 @@
+import React  from 'react';
+import style  from 'PVWStyle/ReactWidgets/PresetListWidget.mcss';
+
+export default React.createClass({
+
+    displayName: 'PresetListWidget',
+
+    propTypes: {
+        activeName: React.PropTypes.string,
+        height: React.PropTypes.string,
+        onChange: React.PropTypes.func,
+        presets: React.PropTypes.object,
+        visible: React.PropTypes.bool,
+    },
+
+    getDefaultProps() {
+        return {
+            activeName: '',
+            height: '1em',
+            presets: {},
+            visible: true,
+        }
+    },
+
+    getInitialState() {
+        return {
+            activeName: this.props.activeName,
+        };
+    },
+
+    updateActive(event) {
+        const activeName = event.target.dataset.name;
+        this.setState({activeName});
+        if(this.props.onChange) {
+            this.props.onChange(activeName);
+        }
+    },
+
+    render() {
+        if(!this.props.presets || !this.props.visible) {
+            return null;
+        }
+
+        const activeName = this.state.activeName,
+            height = this.props.height,
+            presets = this.props.presets,
+            names = Object.keys(presets);
+
+        return (<div className={ style.container }>
+                    <div className={ style.bottomPadding }/>
+                    { names.map( (name) => {
+                        return <img src={ 'data:image/png;base64,' + presets[name] }
+                                    key={ name }
+                                    style={{ height }}
+                                    data-name={ name }
+                                    onClick={ this.updateActive }
+                                    className={ (name === activeName) ? style.activeLine : style.line }/>;
+                    })}
+                    <div className={ style.bottomPadding }/>
+                </div>);
+    },
+});

src/React/Widgets/ProxyEditorWidget/example/representation-proxy.json

@@ -1,6 +1,6 @@
 {
     "colorBy": {
-        "color": [1, 1, 1],
+        "color": [0, 0.3, 0.4],
         "representation": "729",
         "scalarBar": 0,
         "array": [null, "", -1],