OSB-35: using the common routing to derive the station type. Added highlight of the selected bar.

LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json

@@ -44,7 +44,7 @@
     "reactstrap": "^6.3.1",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
-    "vega": "^4.3.0",
+    "vega": "^4.4.0",
     "vega-lite": "^2.6.0",
     "vega-tooltip": "^0.13.0"
   },

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

@@ -180,16 +180,18 @@ class AntennaErrorDetailsC extends Component {
         const detailsFragment = (
             <TreeView nodeLabel="details">
                     {AntennaErrorDetailsC.renderDetails(this.props.content.details)}
-            </TreeView>)
+            </TreeView>
+        );
         const elementsFragment = (
             <TreeView nodeLabel="elements">
                 {this.renderElementErrors()}
             </TreeView>
-        )
+        );
+        const elementErrors = this.props.content.element_errors;
         return (
             <React.Fragment>
                 {this.props.content.hasOwnProperty('details')? detailsFragment: undefined}
-                {this.props.content.hasOwnProperty('element_errors')? elementsFragment: undefined}
+                {elementErrors  !== undefined && Object.keys(elementErrors).length > 0? elementsFragment: undefined}
             </React.Fragment>
         );
     }

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

@@ -86,7 +86,7 @@ class StationStatisticsC extends Component {
             histogramType: 'per_error_type'
         };
         this.ref = React.createRef();
-        this.getErrorsPerTypeSpec.bind(this);
+        StationStatisticsC.getErrorsPerTypeSpec.bind(this);
     }
     getErrorsPerStation() {
         if (this.props.data.errors_per_station !== undefined) {
@@ -99,8 +99,7 @@ class StationStatisticsC extends Component {
             return {values: this.props.data.errors_per_type};
         }
     }
-
-    getBaseSpec() {
+    static getBaseSpec() {
         return {
             "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
             "mark": {
@@ -110,9 +109,12 @@ class StationStatisticsC extends Component {
                 "type": "fit",
                 "contains": "padding"
             },
+            "selection":{
+                "highlight": {"type":"single", "empty":"none","on": "mouseover"},
+            },
             "config": {
                 "legend": {
-                    "columns": 2
+                    "columns": 2,
                 }
             },
             "encoding": {
@@ -128,14 +130,19 @@ class StationStatisticsC extends Component {
                     "type": "quantitative",
                     "axis": {
                         "title": "number of errors"
-                    }
+                    },
+
+                },
+                opacity: {
+                    "condition": {"selection": "highlight", "value": .6},
+                    value: 1
                 }
-            }
+            },
         }
     }
 
-    getErrorsPerTypeSpec() {
-        let schema = this.getBaseSpec();
+    static getErrorsPerTypeSpec() {
+        let schema = StationStatisticsC.getBaseSpec();
         schema.encoding["color"] = {
             "field": "error_type",
             "type": "nominal"
@@ -152,12 +159,12 @@ class StationStatisticsC extends Component {
         return schema;
     }
 
-    getErrorsPerStationSpec() {
-        let schema = this.getBaseSpec();
+    static getErrorsPerStationSpec() {
+        let schema = StationStatisticsC.getBaseSpec();
         schema.encoding["color"] = {
             "field": "station_name",
             "type": "nominal"
-        }
+        };
         schema.encoding["tooltip"] = [
             {
                 field: "n_errors",
@@ -166,19 +173,19 @@ class StationStatisticsC extends Component {
                 field: "station_name",
                 type: "nominal"
             }
-        ]
-        schema.config.legend.columns = 3
+        ];
+        schema.config.legend.columns = 3;
         return schema;
     }
 
     getSpecData(histogram_type) {
         switch (histogram_type) {
             case "per_error_type":
-                return {spec: this.getErrorsPerTypeSpec(), data: this.getErrorsPerType()};
+                return {spec: StationStatisticsC.getErrorsPerTypeSpec(), data: this.getErrorsPerType()};
             case "per_station":
-                return {spec: this.getErrorsPerStationSpec(), data: this.getErrorsPerStation()};
+                return {spec: StationStatisticsC.getErrorsPerStationSpec(), data: this.getErrorsPerStation()};
             default:
-                return {spec: this.getErrorsPerTypeSpec(), data: this.getErrorsPerType()};
+                return {spec: StationStatisticsC.getErrorsPerTypeSpec(), data: this.getErrorsPerType()};
         }
     }
 
@@ -195,8 +202,8 @@ class StationStatisticsC extends Component {
     render() {
         const {spec, data} = this.getSpecData(this.state.histogramType);
         if (this.ref.current !== null) {
-            const width = this.ref.current.clientWidth
-            const height = this.ref.current.clientHeight
+            const width = this.ref.current.clientWidth;
+            const height = this.ref.current.clientHeight;
             spec.width = width
             spec.height = height
 

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

@@ -10,7 +10,7 @@ import {
     setPeriod, setAntennaID,
     setAntennaType
 } from "../redux/actions/mainFiltersActions";
-
+import {stationTypeFromName} from "../utils/LOFARDefinitions";
 // History handling
 import { push } from 'connected-react-router';
 import { store } from "../redux/store.js";
@@ -127,7 +127,7 @@ export const DateRangeSelector = connect(mapStateDateRangeSelector, mapDispatchD
 
 
 /**
- * Radion buttons for Test Type
+ * Radio buttons for Test Type
  */
 class TestTypeSelectorC extends Component {
 
@@ -161,7 +161,7 @@ export const TestTypeSelector = connect(mapStateTestTypeSelector, mapDispatchTes
 
 
 /**
- * Radion buttons for Antenna Type
+ * Radio buttons for Antenna Type
  */
 class AntennaTypeSelectorC extends Component {
 
@@ -195,11 +195,12 @@ export const AntennaTypeSelector = connect(mapStateAntennaTypeSelector, mapDispa
 
 
 /**
- * Radion buttons for Antenna Id
+ * Radio buttons for Antenna Id
  */
 class AntennaIdSelectorC extends Component {
 
     antenna_id_list(type, stationType){
+        console.log('wrong type?', stationType)
         const antennaIdRange = AntennaIdsPerTypeStationType[stationType][type];
         let options = [];
         for(let i=antennaIdRange.start; i<antennaIdRange.end; i++){
@@ -213,9 +214,9 @@ class AntennaIdSelectorC extends Component {
     };
 
     render() {
-        let antennaType = this.props.selectedStation[0];
-        antennaType = antennaType === 'C' || antennaType === 'R' ? antennaType: 'I';
-        const options = this.antenna_id_list(this.props.antennaType, antennaType);
+        const stationType = stationTypeFromName(this.props.selectedStation);
+        console.log("antennaType", this.props.antennaType, this.props)
+        const options = this.antenna_id_list(this.props.antennaType, stationType);
 
         return (
         <div className="toolbar-ctrl">

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/LOFARDefinitions.js

@@ -66,7 +66,7 @@ export const AntennaIdsPerTypeStationType = {
 };
 
 export function stationTypeFromName(stationName){
-  if(stationName === undefined) return undefined
+  if(stationName === undefined) return undefined;
   if(stationName.includes('CS')) return 'C';
   if(stationName.includes('RS')) return 'R';
   return 'I'