Commit e20de74b authored by dcoudrin's avatar dcoudrin
Browse files

grid react-bootstrap for handling layout

parent 9c1924d0
import React from 'react';
import PropTypes from 'prop-types';
import Menu from './components/menu/Menu'
import Grid from './components/grid/Grid'
import { menu } from "../../biocham_kernel/cmd_tree"
import { Grid, Row, Col } from 'react-bootstrap';
import BTabs from './components/tracepanel/BTabs';
import EditionGrid from './components/grid/EditionGrid';
import { menu } from "../../biocham_kernel/cmd_tree";
import './components/tracepanel/BTabs.css';
export default class App extends React.Component {
static propTypes = {
......@@ -10,20 +14,26 @@ export default class App extends React.Component {
}
static defaultProps = {
//the tree.tree object contains all the commands, etc
menu: menu
menu: menu,
commManager: Jupyter.notebook.kernel.comm_manager
}
render() {
return (
<div>
<Menu menu={this.props.menu}/>
<Grid >
</Grid>
</div>
<Grid commManager={this.props.commManager}
style={{height: '100%'}} fluid>
<Row style={{height: '100%'}}>
<Col style={{height: '100%', overflowY: 'scroll'}} lg={8}>
<EditionGrid>
</EditionGrid>
</Col>
<Col style={{height: '100%'}} lgOffset={4}>
<BTabs/>
</Col>
</Row>
</Grid>
)
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import load_menu from './menu/main';
import './styles/styles.css'
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import 'react-tabs/style/react-tabs.css';
/**
*
* TODO: camelCase every file
*/
function createSwitchButton () {
let toolbarButton = document.createElement('button');
toolbarButton.id = 'switch-btn';
......@@ -21,6 +24,8 @@ function createSwitchButton () {
}
function switchView () {
// create a switch button to alternate between the notebook
// and the GUI
let notebookView = document.getElementById('notebook_panel');
let guiPanel = document.getElementById('gui_panel');
let btn = document.getElementById('switch-btn');
......@@ -54,17 +59,30 @@ function initGUI() {
guiPanel.id = 'gui_panel';
guiPanel.style.display = 'none';
document.getElementById('ipython-main-app').appendChild(guiPanel);
createSwitchButton();
}
function addBootstrapCss() {
let head = document.getElementsByTagName('head')[0];
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
link.integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u";
link.crossorigin = 'anonymous';
head.appendChild(link);
}
export function load_ipython_extension() {
//addBootstrapCss();
load_menu();
initGUI();
const root = document.getElementById('gui_panel');
ReactDOM.render(
<App />,
document.getElementById('gui_panel')
root
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment