fluxed ToolBox, async compartments 🎉

candis/app/client/app/action/ToolBoxAction.jsx

@@ -0,0 +1 @@
+import ActionType from '../constant/ActionType'

candis/app/client/app/component/panel/CreatePanel.jsx

@@ -4,6 +4,7 @@ import classNames    from 'classnames'
 import DataEditor    from '../widget/DataEditor'
 import XEditable     from '../widget/XEditable'
 
+import FileFormat    from '../../constant/FileFormat'
 import { writeFile } from '../../action/AsynchronousAction'
 
 class CreatePanel extends React.Component {
@@ -28,10 +29,14 @@ class CreatePanel extends React.Component {
   onCreate ( ) {
     const data        = this.state.data
     const filename    = this.state.filename
+    let   attributes  = [ ]
 
-    const attributes  = data.columns.map((column) => {
-      return { name: column.name, type: column.type }
+    data.columns.forEach((column) => {
+      if ( column.key != 'ID' ) {
+        attributes.push({ name: column.name, type: column.type })
+      }
     })
+
     const rows        = data.rows.map((row) => {
       delete row.ID
 
@@ -41,7 +46,8 @@ class CreatePanel extends React.Component {
     const buffer      = { attributes: attributes, data: rows }
     const dispatch    = this.props.dispatch
 
-    const params      = { name: filename, buffer: buffer }
+    const params      = { format: FileFormat.CDATA, name: filename,
+      buffer: buffer }
 
     dispatch((dispatcher) => {
       writeFile(dispatcher, params)

candis/app/client/app/component/panel/FilePanel.jsx

@@ -9,6 +9,7 @@ import axios           from 'axios'
 import config          from '../../config'
 import FileFormat      from '../../constant/FileFormat'
 import { filterFiles } from '../../util'
+import { getResource } from '../../action/AsynchronousAction'
 
 class FilePanel extends React.Component {
   constructor (props) {
@@ -58,6 +59,10 @@ class FilePanel extends React.Component {
     this.props.dispatch(this.props.onCancel)
   }
 
+  componentDidMount ( ) {
+    this.props.dispatch(getResource)
+  }
+
   render ( ) {
     const that = this
 

candis/app/client/app/component/widget/XEditable.jsx

@@ -3,30 +3,23 @@ import React from 'react'
 class XEditable extends React.Component {
   constructor (props) {
     super (props)
-
-    this.state = { value: props.value }
   }
 
-  componentDidMount ( ) {    
+  componentDidMount ( ) {
     const that = this
 
     $(this.refs.editable).editable({
-         type: 'text',
-        title: this.state.editable,
       success: (_, value) => {
-        that.setState({
-          editable: value
-        })
-
         that.props.onChange(value)
       }
     })
   }
 
   render ( ) {
     return (
-      <a ref="editable" href='javascript:void(0);'>
-        {this.state.value}
+      <a ref="editable" href='javascript:void(0);'
+        data-type="text" data-title={this.props.title} data-showbuttons="false">
+        {this.props.value}
       </a>
     )
   }

candis/app/client/app/component/widget/toolbox/Compartment.jsx

@@ -1,16 +1,22 @@
-import React   from 'react'
-import shortid from 'shortid'
+import React       from 'react'
+import { connect } from 'react-redux'
+import shortid     from 'shortid'
 
-import Tool    from './Tool'
+import Tool        from './Tool'
 
 class Compartment extends React.Component {
-  constructor ( ) {
-    super ( )
+  constructor (props) {
+    super (props)
 
-    this.id = shortid.generate()
+    this.id    = shortid.generate()
+    this.state = {
+      tools: props.tools
+    }
   }
 
   render ( ) {
+    const that    = this
+
     const tooltip = this.props.tooltip
     const ttattrs = tooltip ?
       {
@@ -21,10 +27,9 @@ class Compartment extends React.Component {
 
     return (
       <div className="panel panel-default" {...ttattrs}>
-          <div className="panel-heading">
-            <a className="collapsed" data-toggle="collapse"
-              data-parent={`#${this.props.parent}`}
-              href={`#compartment-${this.id}`}>
+        <div className="panel-heading">
+          <div className="row">
+            <div className="col-xs-8">
               <div className="media">
                 <div className="media-left">
                   <img className="media-object"width="20px" height="20px"
@@ -36,16 +41,44 @@ class Compartment extends React.Component {
                   </div>
                 </div>
               </div>
-            </a>
+            </div>
+            <div className="col-xs-4">
+              <div className="text-right">
+                {
+                  this.props.fetcher ?
+                    <a href="javascript:void(0);" onClick={() => {
+                        that.props.fetcher().then((tools) => {
+                          that.setState({
+                            tools: tools
+                          })
+                        })
+                      }}>
+                      <span className="fa fa-fw fa-refresh" data-toggle="tooltip"
+                        title="Refresh"></span>
+                    </a> : false
+                }
+                <a className="collapsed" data-toggle="collapse"
+                  data-parent={`#${this.props.parent}`}
+                  href={`#compartment-${this.id}`}>
+                  <span className="fa fa-fw fa-chevron-down" data-toggle="tooltip"
+                    title="Expand"></span>
+                </a>
+              </div>
+            </div>
           </div>
+        </div>
         <div className="collapse panel-collapse"
           id={`compartment-${this.id}`}>
           {
-            this.props.tools.length ?
-              <div className="list-group">
+            this.state.tools.length ?
+              <div className="list-group"
+                style={{
+                  maxHeight: '150px',
+                  overflowY: 'scroll'
+                }}>
                 {
 
-                  this.props.tools.map((tool, index) => {
+                  this.state.tools.map((tool, index) => {
                     return (
                       <div className="list-group-item" key={index}>
                         <Tool
@@ -69,4 +102,4 @@ class Compartment extends React.Component {
   }
 }
 
-export default Compartment
+export default connect()(Compartment)

candis/app/client/app/component/widget/toolbox/ToolBox.jsx

@@ -46,24 +46,27 @@ class ToolBox extends React.Component {
       <div className="panel panel-default">
         <div className="panel-heading">
           <div className="row">
-            <a href={`#toolbox-${this.id}-collapse`} className="collapsed"
-              data-toggle="collapse">
-              <div className="col-xs-9">
-                <div className="panel-title font-bold">
-                  {this.props.title}
-                </div>
+            <div className="col-xs-7">
+              <div className="panel-title font-bold">
+                {this.props.title}
               </div>
-            </a>
-            {
-              this.props.draggable ?
-                <div className="col-xs-3">
-                  <div className="text-right">
-                    <a href="#">
-                      <i className="fa fa-fw fa-arrows"></i>
-                    </a>
-                  </div>
-                </div> : false
-            }
+            </div>
+            <div className="col-xs-5">
+              <div className="text-right">
+                {
+                  this.props.draggable ?
+                    <a href="javascript:void(0);">
+                      <span className="fa fa-fw fa-arrows" data-toggle="tooltip"
+                        title="Drag"></span>
+                    </a> : false
+                }
+                <a href={`#toolbox-${this.id}-collapse`} className="collapsed"
+                  data-toggle="collapse">
+                  <span className="fa fa-fw fa-minus" data-toggle="tooltip"
+                    title="Minimize"></span>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
         <div id={`toolbox-${this.id}-collapse`} className="collapse panel-collapse in">
@@ -75,12 +78,13 @@ class ToolBox extends React.Component {
                 this.props.compartments.map((compartment, index) => {
                   return (
                     <Compartment
-                      key={index}
-                      name={compartment.name}
+                          key={index}
+                         name={compartment.name}
                       tooltip={compartment.tooltip}
-                      icon={compartment.icon}
-                      tools={compartment.tools}
-                      parent={`toolbox-${this.id}`}/>
+                         icon={compartment.icon}
+                        tools={compartment.tools}
+                      fetcher={compartment.fetcher}
+                       parent={`toolbox-${this.id}`}/>
                   )
                 })
               }
@@ -116,6 +120,12 @@ ToolBox.defaultStates =
     tooltip: null
 }
 
-const mapStateToProps = null
+const mapStateToProps = (state) => {
+  const toolBox       = state.toolBox
+
+  return {
+    compartments: toolBox.compartments
+  }
+}
 
 export default connect(mapStateToProps)(ToolBox)

candis/app/client/app/config.json

@@ -1,23 +1,26 @@
 {
-    "port": 5000,
-    "container": "app",
-    "startdir": "cres",
     "host": "127.0.0.1",
-    "title": "candis v0.1.0",
-    "lang": "en",
-    "color": {
-        "primary": "#E91E63"
-    },
+    "container": "app",
+    "port": 5000,
     "encoding": "utf-8",
     "routes": {
+        "data": "/api/data",
+        "preprocess": {
+            "methods": "/api/preprocess/methods"
+        },
+        "base": "/",
+        "read": "/api/data/read",
         "resource": "/api/data/resource",
-        "api": "/api",
-        "images": "/assets/img",
         "icons": "/assets/img/icons",
+        "images": "/assets/img",
         "write": "/api/data/write",
-        "base": "/",
         "assets": "/assets",
-        "data": "/api/data",
-        "read": "/api/data/read"
-    }
+        "api": "/api"
+    },
+    "startdir": "cres",
+    "color": {
+        "primary": "#E91E63"
+    },
+    "lang": "en",
+    "title": "candis v0.1.0"
 }

candis/app/client/app/meta/Compartments.jsx

@@ -1,3 +1,5 @@
+import axios      from 'axios'
+
 import config     from '../config'
 
 import Dialog     from '../component/dialog/Dialog'
@@ -83,58 +85,38 @@ const Compartments = [
 
             dispatch(action)
           }
-        },
-        // {
-        //      name: 'Save',
-        //      icon: `${config.routes.icons}/floppy-disk.png`,
-        //   tooltip: 'Save data to an output file'
-        // }
+        }
       ]
   },
-  // {
-  //      name: 'Visualize',
-  //      icon: `${config.routes.icons}/pie-chart.png`,
-  //   tooltip: 'Tools for Data Visualization',
-  //     tools: [
-  //
-  //     ]
-  // },
   {
        name: 'Preprocess',
        icon: `${config.routes.icons}/gears.png`,
     tooltip: 'Tools for Data Preprocessing',
-      tools: [
-        {
-               name: 'Background Correction',
-            onClick: (dispatch) => {
-              const action = showDialog({
-                  type: DialogType.SELECT,
-                 title: 'Background Correction',
-                 props: {
-
-                 }
-              })
-            }
-        },
-        {
-               name: 'Normalize',
-            onClick: (dispatch) => {
+      tools: [ ],
+    fetcher: () => {
+      return axios.get(config.routes.preprocess.methods).then((response) => {
+        response       = response.data
 
-            }
-        },
-        {
-               name: 'PM Correction',
-            onClick: (dispatch) => {
+        if ( response.status == "success" ) {
+          const data   = response.data
 
-            }
-        },
-        {
-               name: 'Summarize',
-            onClick: (dispatch) => {
+          const tools  = data.map((method) => {
+            const tool = {
+                 name: method.name,
+              onClick: (dispatch) => {
 
+              }
             }
+
+            return tool
+          })
+
+          return tools
+        } else {
+          return [ ]
         }
-      ]
+      })
+    }
   },
   {
        name: 'Model',