OSB-29: changed station statistics and automatic layout

LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json

@@ -34,7 +34,8 @@
 		"redux": "^4.0.1",
 		"redux-thunk": "^2.3.0",
 		"vega": "^4.3.0",
-		"vega-lite": "^2.6.0"
+		"vega-lite": "^2.6.0",
+		"vega-tooltip": "^0.13.0"
 	},
 	"private": true
 }

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js

@@ -45,7 +45,7 @@ class ToolBarC extends Component {
 }
 
 const mapStateToPropsToolBar = state => {
-    return  { ...state.landing_page.station_statistics, ...state.layout};
+    return  { ...state.landing_page.station_statistics };
 };
 
 const mapDispatchToPropsToolBar = {
@@ -79,7 +79,7 @@ class StationStatisticsC extends Component {
 
     getBaseSpec(){
         return {"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
-                "mark": "bar",
+                "mark": {"type":"bar"},
                 "autosize": {
                     "type": "fit",
                     "resize": true,
@@ -110,7 +110,10 @@ class StationStatisticsC extends Component {
                         "field": "error_type",
                         "type": "nominal"
                     }
-
+        schema.encoding["tooltip"] = [
+            {field: "n_errors", type: "quantitative"},
+            {field: "error_type", type: "nominal"}
+        ]
         return schema;
     }
 
@@ -118,8 +121,12 @@ class StationStatisticsC extends Component {
         let schema = this.getBaseSpec();
         schema.encoding["color"] = { "field": "station_name",
                                      "type": "nominal"}
+        schema.encoding["tooltip"] = [
+            {field: "n_errors", type: "quantitative"},
+            {field: "station_name", type: "nominal"}
+        ]
         schema.config.legend.columns = 3
-       return schema;
+        return schema;
     }
 
 
@@ -137,8 +144,8 @@ class StationStatisticsC extends Component {
     render() {
         const {spec, data} = this.getSpecData(this.state.histogramType);
         if (this.ref.current !== null){
-            const width = this.ref.current.parentElement.clientWidth
-            const height = this.ref.current.parentElement.clientHeight
+            const width = this.ref.current.clientWidth
+            const height = this.ref.current.clientHeight
             spec.width = width
             spec.height = height
 
@@ -153,7 +160,7 @@ class StationStatisticsC extends Component {
                  </h5>
                 <div className="react-grid-item-body" id="plot" ref={this.ref} >
                 <ReactVegaLite spec={spec}
-                 data={data} />
+                 data={data} enableHover={true}/>
             </div>
             </React.Fragment>
 

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js

@@ -110,7 +110,6 @@ const ToolBar = connect(mapStateToPropsToolBar, mapDispatchToPropsToolBar)(ToolB
    Looks like a React component but is ordinary function! */
 function createGridPanel(props) {
     let body = props.body;
-    console.log("props on create grid", props)
     if (props.renderHeader) {
         body = <React.Fragment>
                 <h5 className="react-grid-item-header">{props.title}</h5>
@@ -150,7 +149,7 @@ class LandingPageC extends Component {
         return (<div>
             <Header active_page={this.props.location}/>
             <ToolBar />
-            <ResponsiveGridLayout className="layout" layouts={layout.panels} measureBeforeMount={true} breakpoints={layout.breakpoints} cols={layout.cols} onResizeStop={e=>this.props.setNewLayout(e)}>
+            <ResponsiveGridLayout className="layout" layouts={this.props.panels} measureBeforeMount={true} breakpoints={this.props.breakpoints} cols={this.props.cols} onResizeStop={e=>this.props.setNewLayout(e)}>
                 {createGridPanel({
                     key: "ul", renderHeader: true, title: "Station overview",
                     body: <StationOverview url={this.getStationOverviewURL()}/>

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js

@@ -21,11 +21,17 @@ export const setPeriod = period => ({
   payload: { period }
 });
 
-
-export const setNewLayout = newLayout => ({
-  type: SET_COMPONENT_SIZES,
-  payload: { newLayout }
-});
+export const setNewLayout = function(newLayout) {
+  var payload = {};
+  for(const i in newLayout){
+    const item = newLayout[i];
+    payload[item['i']] = item;
+  }
+  return {
+          type: SET_COMPONENT_SIZES,
+          payload: payload
+         }
+};
 
 export const setStationStatisticsAveragingWindow = averagingWindow => ({
   type: SET_AVERAGING_WINDOW,

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/layout.js

 import { SET_COMPONENT_SIZES } from '../actions/actionTypes.js'
 
 const initialState = {
-    layout:[]
+    breakpoints: {
+        md: 996,
+        xxs: 0
+    },
+    cols: {
+        md: 12,
+        xxs: 1
+    },
+    panels: {
+        md: [
+            {i: 'ul', x: 0, y: 0, w: 8, h: 3 },
+            {i: 'ur', x: 9, y: 0, w: 4, h: 3 },
+            {i: 'bl', x: 0, y: 0, w: 8, h: 2 },
+            {i: 'br', x: 9, y: 0, w: 4, h: 2 }
+        ],
+        xxs: [
+            {i: 'ul', x: 0, y: 0, w: 1, h: 3 },
+            {i: 'ur', x: 0, y: 0, w: 1, h: 3 },
+            {i: 'bl', x: 0, y: 0, w: 1, h: 2 },
+            {i: 'br', x: 0, y: 0, w: 1, h: 2 }
+        ]
+    },
+    current_layout: {}
 };
 
 export default function(state = initialState, action) {
@@ -9,7 +31,7 @@ export default function(state = initialState, action) {
         case SET_COMPONENT_SIZES: {
             return {
                 ...state,
-                layout: action.payload.newLayout
+                current_layout: action.payload
             };
         }
         default: