Skip to content

Commit

Permalink
fluxed ToolBox, async compartments 🎉
Browse files Browse the repository at this point in the history
  • Loading branch information
@achillesrasquinha
achillesrasquinha committed Jun 21, 2017
1 parent 1822d85 commit 939f4de
Show file tree
Hide file tree
Showing 26 changed files with 109,410 additions and 134 deletions.
Binary file added candis/app/assets/img/icons/cloud-computing.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
109,096 changes: 109,095 additions & 1 deletion candis/app/assets/js/bundle.min.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions candis/app/client/app/action/ToolBoxAction.jsx
View file
@@ -0,0 +1 @@
import ActionType from '../constant/ActionType'
12 changes: 9 additions & 3 deletions candis/app/client/app/component/panel/CreatePanel.jsx
View file
Expand Up @@ -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 {
Expand All @@ -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

Expand All @@ -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)
Expand Down
5 changes: 5 additions & 0 deletions candis/app/client/app/component/panel/FilePanel.jsx
View file
Expand Up @@ -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) {
Expand Down Expand Up @@ -58,6 +59,10 @@ class FilePanel extends React.Component {
this.props.dispatch(this.props.onCancel)
}

componentDidMount ( ) {
this.props.dispatch(getResource)
}

render ( ) {
const that = this

Expand Down
15 changes: 4 additions & 11 deletions candis/app/client/app/component/widget/XEditable.jsx
View file
Expand Up @@ -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>
)
}
Expand Down
63 changes: 48 additions & 15 deletions candis/app/client/app/component/widget/toolbox/Compartment.jsx
View file
@@ -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 ?
{
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -69,4 +102,4 @@ class Compartment extends React.Component {
}
}

export default Compartment
export default connect()(Compartment)
56 changes: 33 additions & 23 deletions candis/app/client/app/component/widget/toolbox/ToolBox.jsx
View file
Expand Up @@ -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">
Expand All @@ -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}`}/>
)
})
}
Expand Down Expand Up @@ -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)
31 changes: 17 additions & 14 deletions candis/app/client/app/config.json
View file
@@ -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"
}
64 changes: 23 additions & 41 deletions candis/app/client/app/meta/Compartments.jsx
View file
@@ -1,3 +1,5 @@
import axios from 'axios'

import config from '../config'

import Dialog from '../component/dialog/Dialog'
Expand Down Expand Up @@ -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',
Expand Down

0 comments on commit 939f4de

Please sign in to comment.