gui not completed

biocham_gui/package.json

+{
+  "name": "gui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.10",
+    "lodash": "^4.17.5",
+    "react-draggable": "^3.0.5",
+    "style-loader": "^0.20.3",
+    "webpack": "^4.1.1",
+    "webpack-cli": "^2.0.11"
+  },
+  "dependencies": {
+    "phosphor-gridpanel": "^1.0.0-beta.1",
+    "phosphor-widget": "^1.0.0-rc.1",
+    "prop-types": "^15.6.1",
+    "react": "^16.2.0",
+    "react-autocomplete": "^1.8.1",
+    "react-bootstrap": "^0.32.1",
+    "react-burger-menu": "^2.4.2",
+    "react-dock": "^0.2.4",
+    "react-dom": "^16.2.0",
+    "react-grid-layout": "^0.16.6",
+    "react-input-completion": "^1.0.2",
+    "react-resizable": "^1.7.5",
+    "react-tabs": "^2.2.1",
+    "react-transition-group": "^2.3.0",
+    "requirejs": "^2.3.5",
+    "styled-components": "^3.2.3"
+  }
+}

biocham_gui/src/App.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import Menu from './components/menu/Menu'
+import Grid from './components/grid/Grid'
+import Editor from './components/edition/Editor'
+import { menu } from "../../biocham_kernel/cmd_tree"
+
+export default class App extends React.Component {
+    static propTypes = {
+        menu: PropTypes.object.isRequired,
+    }
+
+    static defaultProps = {
+        //the tree.tree object contains all the commands, etc
+        menu: menu
+    }
+
+    initLayout = () => {
+        
+    }
+
+    render() {
+        return (
+            <div style={{width: '100%'}}>
+                <Grid>
+                </Grid>
+            </div>
+        )
+    }
+}

biocham_gui/src/components/Edition/Editor.js

+import React, { Component } from 'react';
+
+export default class Edition extends Component {
+
+    render () {
+        const commands = this.props.items;
+        let commandsInput = (
+            <div>
+                <span className="drag-handle">{this.props.name}</span>
+                <br/>
+                {commands.map((command) => (<label>{command.name} : <input/><br/></label>))}
+            </div>
+        );
+
+        return (
+            <div>
+                {commandsInput}
+            </div>
+        )
+    }
+}

biocham_gui/src/components/grid/Grid.js

+import React, { Component } from 'react';
+import { WidthProvider, Responsive } from 'react-grid-layout';
+import Editor from '../Edition/Editor';
+
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+export default class Grid extends Component {
+    static defaultProps = {
+        className: "layout",
+        cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+        breakpoints: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
+        rowHeight: 80,
+        draggableHandle: '.drag-handle',
+        onLayoutChange: function () {},
+    }
+
+
+    state = {
+        layouts: {
+            lg: [
+                {i: 'initial_state', x: 0, y: 0, w: 4, h:5},
+                {i: 'parameters', x: 0, y: 3, w: 4, h:2},
+                {i: 'numerical_simulation', x: 0, y: 6, w: 4, h:2}]
+        },
+        parameters: [],
+        molecules: [],
+        reactions: []
+    }
+
+    generateLayout = () => {
+        return (this.state.layouts.lg.map((lg) => (
+            <div key={lg.i}>
+                <Editor items={[{name: "input"}, {name: "input"}]} name={"Drag me here"}/>
+            </div>
+        )))
+    }
+
+    componentDidMount = () => {
+
+    }
+
+    handleClick = () => {
+
+    }
+
+    addParam = () => {
+        const parameterName = document.getElementById('param-id');
+        const parameterValue = document.getElementById('param-value');
+        let newParam = {name: parameterName.value, value: parameterValue.value};
+        this.setState({parameters: [...this.state.parameters, newParam]});
+        parameterValue.value = '';
+        parameterName.value = '';
+    }
+
+    addMolecule = () => {
+        const molName = document.getElementById("molecule");
+        this.setState({molecules: [...this.state.molecules, molName.value]})
+        molName.value = '';
+    }
+
+    addReaction = () => {
+        const reacName = document.getElementById("reaction");
+        this.setState({reactions: [...this.state.reactions, reacName.value]})
+        reacName.value = '';
+    }
+
+    render () {
+
+        return (
+            <ResponsiveGridLayout {...this.props} layouts={this.state.layouts}>
+                <div key={"initial_state"} className={'scrollable'}>
+                    <div className={"drag-handle"}>Molecules and reactions</div><br/>
+                    <div>
+                    <label>Molecule : <input type={"text"} id={"molecule"}/></label>
+                    <button onClick={this.addMolecule}>Add</button><br/>
+                    <label>Reaction : <input type={"text"} id={"reaction"}/></label>
+                    <button onClick={this.addReaction}>Add</button><br/>
+                    <h5>List molecules</h5>
+                    <ul>
+                        {this.state.molecules.map( (mol) =>
+                            <li>
+                                {mol}
+                            </li>)}
+                    </ul><br/>
+                    <h5>List reactions</h5>
+                    <ul>
+                        {this.state.reactions.map( (mol) =>
+                            <li>
+                                {mol}
+                            </li>)}
+                    </ul>
+                        </div>
+                </div>
+                <div key={"parameters"} className={'scrollable'}>
+                    <div className={"drag-handle"}>Parameters</div><br/>
+                    <div>
+                    <label>Parameter : <input id={"param-id"} type={"text"}/> </label>
+                    <label>Value : <input id={"param-value"} type={"number"}/></label>
+                    <button onClick={this.addParam}>Add</button><br/>
+                    <h5>List parameters</h5>
+                    <ul>
+                        {this.state.parameters.map( (param) =>
+                            <li>
+                                Parameter: <strong>{param.name}  </strong>   value : {param.value}
+                            </li>)}
+                    </ul>
+                </div>
+                </div>
+            </ResponsiveGridLayout>
+        )
+    }
+}
+

biocham_gui/src/components/menu/Menu.js

+import React, { Component } from 'react';
+import { slide as BurgerMenu } from 'react-burger-menu';
+import Chapter from "./Chapter"
+
+export default class Menu extends Component {
+
+    render () {
+        const items = this.props.menu.map(item => {
+            return (<Chapter id={item.id} item={item} handler={this.props.handler}/>)
+        })
+
+        return (
+            <BurgerMenu>
+                {items}
+            </BurgerMenu>
+        )
+    }
+}
+