Merge branch 'plot-table-sizing' into 'develop'

Plot table sizing

See merge request !4

src/components/widget-plot-table.js

@@ -9,16 +9,15 @@
 
 import React, { Component } from 'react';
 import { LineChart } from 'rd3';
-import { Col } from 'react-bootstrap';
 
-import Table from './table';
-import TableColumn from './table-column';
+import { ButtonGroup, Button } from 'react-bootstrap';
 
 class WidgetPlotTable extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
+      size: { w: 0, h: 0 },
       signal: 0,
       firstTimestamp: 0,
       latestTimestamp: 0,
@@ -32,6 +31,9 @@ class WidgetPlotTable extends Component {
     // check data
     const simulator = nextProps.widget.simulator;
 
+    // plot size
+    this.setState({ size: { w: this.props.widget.width - 100, h: this.props.widget.height - 20 }});
+
     if (nextProps.simulation == null || nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].length === 0 || nextProps.data[simulator].values[0].length === 0) {
       // clear values
       this.setState({ values: [], sequence: null, rows: [] });
@@ -78,32 +80,38 @@ class WidgetPlotTable extends Component {
 
     this.setState({ values: values, firstTimestamp: firstTimestamp, latestTimestamp: latestTimestamp, sequence: nextProps.data[simulator].sequence, rows: rows });
   }
-
+  
   render() {
+    console.log("Signal: " + this.state.signal);
     return (
-      <div style={{ width: '100%', height: '100%' }} ref="wrapper">
+      <div className="plot-table-widget" style={{ width: '100%', height: '100%' }} ref="wrapper">
         <h4>{this.props.widget.name}</h4>
 
-        <Col xs={3}>
-          <Table data={this.state.rows}>
-            <TableColumn title="Signal" dataKey="name" clickable onClick={(index) => this.setState({ signal: index }) } />
-          </Table>
-        </Col>
+        <div className="content">
+          <div className="widget-table">
+            <ButtonGroup vertical>
+              { this.state.rows.map( (row, index) => (
+                  <Button key={index} active={ index === this.state.signal } disabled={ this.props.editing } onClick={() => this.setState({ signal: Number(index) }) } > { row.name } </Button>
+                ))
+              }
+            </ButtonGroup>
+          </div>
 
-        <Col xs={4}>
-          {this.state.sequence &&
-            <LineChart
-              width={400}
-              height={this.props.widget.height - 20}
-              data={this.state.values}
-              gridHorizontal={true}
-              xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
-              hoverAnimation={false}
-              circleRadius={0}
-              domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
-            />
-          }
-        </Col>
+          <div className="widget-plot">
+            {this.state.sequence &&
+              <LineChart
+                width={ this.state.size.w || 100 }
+                height={ this.state.size.h || 100 }
+                data={this.state.values}
+                gridHorizontal={true}
+                xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
+                hoverAnimation={false}
+                circleRadius={0}
+                domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
+              />
+            }
+          </div>
+        </div>
       </div>
     );
   }

src/containers/visualization.js

@@ -140,24 +140,35 @@ class Visualization extends Component {
     if (item.name === 'Value') {
       widget.simulator = this.state.simulation.models[0].simulator;
       widget.signal = 0;
+      widget.minWidth = 70;
+      widget.minHeight = 20;
     } else if (item.name === 'Plot') {
       widget.simulator = this.state.simulation.models[0].simulator;
       widget.signals = [ 0 ];
       widget.time = 60;
+      widget.minWidth = 400;
+      widget.minHeight = 200;
       widget.width = 400;
       widget.height = 200;
     } else if (item.name === 'Table') {
       widget.simulator = this.state.simulation.models[0].simulator;
+      widget.minWidth = 300;
+      widget.minHeight = 200;
       widget.width = 400;
       widget.height = 200;
     } else if (item.name === 'Label') {
-
+      widget.minWidth = 70;
+      widget.minHeight = 20;
     } else if (item.name === 'PlotTable') {
       widget.simulator = this.state.simulation.models[0].simulator;
+      widget.minWidth = 400;
+      widget.minHeight = 200;
       widget.width = 500;
       widget.height = 400;
       widget.time = 60
     } else if (item.name === 'Image') {
+      widget.minWidth = 100;
+      widget.minHeight = 100;
       widget.width = 200;
       widget.height = 200;
     }

src/containers/widget.js

@@ -105,16 +105,18 @@ class Widget extends Component {
     } else if (widget.type === 'Label') {
       element = <WidgetLabel widget={widget} />
     } else if (widget.type === 'PlotTable') {
-      element = <WidgetPlotTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
+      element = <WidgetPlotTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} editing={this.props.editing} />
     } else if (widget.type === 'Image') {
       element = <WidgetImage widget={widget} files={this.state.files} />
     }
-
+    
     if (this.props.editing) {
       return (
         <Rnd
           ref={c => { this.rnd = c; }}
           initial={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }}
+          minWidth={ widget.minWidth }
+          minHeight={ widget.minHeight }
           bounds={'parent'}
           className="widget"
           onResizeStop={(direction, styleSize, clientSize, delta) => this.resizeStop(direction, styleSize, clientSize, delta)}

src/styles/widgets.css

@@ -85,3 +85,36 @@
     position: absolute;
     right: 7px;
 }
+
+.plot-table-widget .content {
+  display: -webkit-flex;
+  display: flex;
+}
+
+.plot-table-widget .widget-table {
+  min-width: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* Reset Bootstrap styles to "disable" while editing */
+.plot-table-widget .widget-table .btn[disabled] {
+  cursor: inherit;
+}
+
+.btn-default[disabled]:hover {
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.btn-default.active[disabled]:hover {
+    background-color: #e6e6e6;
+    border-color: #adadad;
+}
+ /* End reset */
+ 
+.plot-table-widget .widget-plot {
+  -webkit-flex: 1 0 auto;
+  flex: 1 0 auto;
+}