feat(Redux): Replace data management with a Redux based one

BREAKING CHANGE: The client needs ParaView 5.2 or newer

documentation/tpl/__en__

@@ -24,5 +24,3 @@ sidebar:
     tools: Tools
     troubleshooting: Troubleshooting
     contributing: Contributing
-    datamodel: Data model for Redux
-    redux: Redux

documentation/tpl/__sidebar__

@@ -5,5 +5,3 @@ docs:
     tools: /visualizer/docs/tools.html
     troubleshooting: /visualizer/docs/troubleshooting.html
     contributing: /visualizer/docs/contributing.html
-  redux:
-    datamodel: /visualizer/docs/redux.html

package.json

@@ -23,9 +23,12 @@
     "monologue.js": "0.3.5",
     "mout": "1.0.0",
     "normalize.css": "4.1.1",
-    "paraviewweb": "1.8.2",
-    "react": "15.1.0",
-    "react-dom": "15.1.0",
+    "paraviewweb": "1.12.1",
+    "react": "15.2.1",
+    "react-dom": "15.2.1",
+    "react-redux": "4.4.5",
+    "redux": "3.5.2",
+    "reselect": "2.5.3",
 
     "kw-web-suite": "2.0.1",
     "kw-doc": "1.0.12"

src/ImageProviders.js

@@ -0,0 +1,44 @@
+const DEFAULT_IMAGE_PROVIDER = 'default';
+const providers = {};
+const listeners = {};
+
+export function setImageProvider(provider, key) {
+  providers[key || DEFAULT_IMAGE_PROVIDER] = provider;
+  const listenersToNotify = listeners[key || DEFAULT_IMAGE_PROVIDER] || [];
+  listenersToNotify.forEach(cb => {
+    if (cb) {
+      cb(provider);
+    }
+  });
+  delete listeners[key || DEFAULT_IMAGE_PROVIDER];
+}
+
+export function getImageProvider(key) {
+  return providers[key || DEFAULT_IMAGE_PROVIDER];
+}
+
+export function onImageProvider(callback, key = DEFAULT_IMAGE_PROVIDER) {
+  if (providers[key]) {
+    callback(providers[key]);
+    return -1;
+  }
+
+  if (!listeners[key]) {
+    listeners[key] = [];
+  }
+  const id = listeners[key].length;
+  listeners[key].push(callback);
+
+  return id;
+}
+
+export function unsubscribe(id, key = DEFAULT_IMAGE_PROVIDER) {
+  listeners[key][id] = null;
+}
+
+export default {
+  setImageProvider,
+  getImageProvider,
+  onImageProvider,
+  unsubscribe,
+};

src/MainView.js

@@ -1,16 +1,26 @@
 import React            from 'react';
 import VtkRenderer      from 'paraviewweb/src/React/Renderers/VtkRenderer';
+import SvgIconWidget    from 'paraviewweb/src/React/Widgets/SvgIconWidget';
 import style            from 'VisualizerStyle/MainView.mcss';
 import ControlPanel     from './panels/ControlPanel';
 import TimeController   from './panels/TimeController';
-import logo             from './logo.png';
+import logo             from './logo.svg';
 
-export default React.createClass({
+import network from './network';
+import ImageProviders from './ImageProviders';
+import { connect } from 'react-redux';
+import { selectors, actions, dispatch } from './redux';
+
+export const Visualizer = React.createClass({
 
   displayName: 'ParaViewWeb/Visualizer',
 
   propTypes: {
-    proxyManager: React.PropTypes.object,
+    resetCamera: React.PropTypes.func,
+    client: React.PropTypes.object,
+    connection: React.PropTypes.object,
+    session: React.PropTypes.object,
+    pendingCount: React.PropTypes.number,
   },
 
   getInitialState() {
@@ -20,43 +30,62 @@ export default React.createClass({
   },
 
   componentDidMount() {
-    this.props.proxyManager.setImageProvider(this.refs.renderer.binaryImageStream);
+    ImageProviders.setImageProvider(this.refs.renderer.binaryImageStream);
   },
 
   toggleMenu() {
     this.setState({ menuVisible: !this.state.menuVisible });
   },
 
-  resetCamera() {
-    this.props.proxyManager.resetCamera();
-  },
-
   render() {
-    const { proxyManager } = this.props;
-
     return (
       <div className={style.container}>
         <div className={style.topBar}>
           <div className={style.title}>
             <div className={style.toggleMenu} onClick={this.toggleMenu}>
-              <img src={logo} alt="ParaViewWeb Visualizer" />
+              <SvgIconWidget
+                className={this.props.pendingCount ? style.networkActive : style.networkIdle}
+                height="34px"
+                width="34px"
+                icon={logo}
+                alt="ParaViewWeb Visualizer"
+              />
               Visualizer
             </div>
-            <ControlPanel
-              className={this.state.menuVisible ? style.menu : style.hiddenMenu}
-              proxyManager={proxyManager}
-            />
+            <ControlPanel className={this.state.menuVisible ? style.menu : style.hiddenMenu} />
           </div>
           <div className={style.buttons}>
-            <TimeController proxyManager={proxyManager} />
-            <i className={style.resetCameraButton} onClick={this.resetCamera}></i>
+            <TimeController />
+            <i className={style.resetCameraButton} onClick={this.props.resetCamera}></i>
           </div>
         </div>
         <VtkRenderer
           ref="renderer"
-          {...proxyManager.getNetworkAdapter()}
+          client={this.props.client}
+          connection={this.props.connection}
+          session={this.props.session}
           className={style.viewport}
         />
       </div>);
   },
 });
+
+// Binding --------------------------------------------------------------------
+/* eslint-disable arrow-body-style */
+
+export default connect(
+  state => {
+    const pendingCount = selectors.network.getPendingCount(state);
+    const client = network.getClient();
+    const connection = network.getConnection();
+    const session = connection.session;
+
+    return { client, connection, session, pendingCount };
+  },
+  () => {
+    return {
+      resetCamera: () => dispatch(actions.view.resetCamera()),
+    };
+  }
+)(Visualizer);
+

src/app.js

@@ -1,18 +1,55 @@
 import * as network from './network';
 import MainView from './MainView';
-import ProxyManager from './ProxyManager';
+
+import { store, dispatch, actions } from './redux';
+import { Provider } from 'react-redux';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import behaviorOnChange from './behavior';
+
 require('normalize.css');
 
 function start() {
-  const container = document.querySelector('.content');
-  const client = network.getClient();
-  const proxyManager = new ProxyManager(client);
+  setImmediate(() => {
+    // Keep track of any server notification
+    network.getClient().session.subscribe('pv.time.change', (args) => {
+      const index = args[0].timeStep;
+      setImmediate(() => {
+        dispatch(actions.time.storeTime(index));
+        const state = store.getState();
+        if (state.active.source && state.active.source !== '0') {
+          // Update proxy data for info tab...
+          // FIXME implement a lighter implementation on the server side...
+          dispatch(actions.proxies.fetchProxy(state.active.source));
+        }
+      });
+    });
+
+    // Fetch data
+    dispatch(actions.proxies.fetchPipeline());
+    dispatch(actions.proxies.fetchAvailableProxies());
+    dispatch(actions.proxies.fetchSettingProxy());
+    dispatch(actions.time.fetchTime());
+    dispatch(actions.files.fetchServerDirectory('.'));
 
+    // Fetch heavy data after full initialization
+    setTimeout(() => {
+      dispatch(actions.colors.fetchColorMapImages());
+    }, 2000);
+
+
+    // Attach default behavior
+    store.subscribe(() => {
+      const state = store.getState();
+      behaviorOnChange(state, dispatch);
+    });
+  });
+
+  // Mount UI
+  const container = document.querySelector('.content');
   ReactDOM.unmountComponentAtNode(container);
-  return ReactDOM.render(React.createElement(MainView, { proxyManager }), container);
+  return ReactDOM.render(<Provider store={store}><MainView /></Provider>, container);
 }
 
 export function connect(config = {}) {