From 7ab00eaaa4b5e7c50b70849e90518dba08303ba5 Mon Sep 17 00:00:00 2001
From: Mattia Mancini <mancini@astron.nl>
Date: Thu, 8 Nov 2018 10:29:34 +0000
Subject: [PATCH] OSB-31: restyling of the tooltip and rtsm summary line
---
.../src/components/StationStatistics.js | 28 ++++++-----
.../src/components/StationTestView.js | 49 +++++++++++--------
.../src/themes/lofar-styles.css | 5 ++
.../src/themes/lofar-styles.scss | 8 +++
.../maintenancedb_view/src/themes/lofar.css | 5 ++
5 files changed, 64 insertions(+), 31 deletions(-)
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
index bfb26b37374..873627f3c93 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
@@ -17,15 +17,15 @@ class ToolBarC extends Component {
this.state = {isNavbarCollapsed: true};
}
- setAveragingWindow(e) {
+ setAveragingWindow = (e) => {
this.props.setStationStatisticsAveragingWindow(e.target.value);
}
- setTestType(e) {
+ setTestType = (e) => {
this.props.setStationStatisticsTestType(e.target.value);
}
- toggle(){
+ toggle = () => {
this.setState({
isNavbarCollapsed: !this.state.isNavbarCollapsed
});
@@ -35,9 +35,10 @@ class ToolBarC extends Component {
return (
<Nav className="ml-auto">
<NavItem>
- <select className="form-control custom-select custom-select-sm" id="selected-group" value={this.props.test_type} onChange={(e) => this.setTestType(e)} style={{
- width: 'auto'
- }}>
+ <select className="form-control custom-select custom-select-sm"
+ id="selected-group"
+ value={this.props.test_type} onChange={this.setTestType} style={{
+ width: 'auto'}}>
<option value="B">Both test types</option>
<option value="R">RTSM only</option>
<option value="S">StationTest only</option>
@@ -46,14 +47,17 @@ class ToolBarC extends Component {
<NavItem>
<Input type="select" className="form-control custom-select custom-select-sm" style={{
top: "0rem !important"
- }} onChange={(e) => this.setAveragingWindow(e)} value={this.props.averaging_window}>
+ }} onChange={this.setAveragingWindow} value={this.props.averaging_window}>
<option value={1}>day</option>
<option value={7}>week</option>
<option value={30}>month</option>
</Input>
</NavItem>
<NavItem>
- <Input type="select" className="form-control custom-select custom-select-sm" onChange={(e) => this.props.switchHistogramEvent(e)} value={this.props.histogramType}>
+ <Input type="select"
+ className="form-control custom-select custom-select-sm"
+ onChange={this.props.switchHistogramEvent}
+ value={this.props.histogramType}>
<option value="per_error_type">per error type</option>
<option value="per_station">per station</option>
</Input>
@@ -177,7 +181,7 @@ class StationStatisticsC extends Component {
return {spec: this.getErrorsPerTypeSpec(), data: this.getErrorsPerType()};
}
}
-
+ onSwitchHistogramType = e => this.setState({histogramType: e.target.value})
render() {
const {spec, data} = this.getSpecData(this.state.histogramType);
if (this.ref.current !== null) {
@@ -200,8 +204,10 @@ class StationStatisticsC extends Component {
Station statistics</h5>
</NavbarBrand>
<ToolBar style={{
- padding: "0"
- }} histogramType={this.state.histogramType} switchHistogramEvent={e => this.setState({histogramType: e.target.value})}/>
+ padding: "0"
+ }}
+ histogramType={this.state.histogramType}
+ switchHistogramEvent={this.onSwitchHistogramType}/>
</Navbar>
<div className="react-grid-item-body" id="plot" ref={this.ref}>
<ReactVegaLite spec={spec} data={data} enableHover={true}/>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
index c035483bd3a..41b5b5b5a24 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
@@ -20,7 +20,7 @@ import AutoLoadWrapper from '../utils/autoLoader.js'
import './StationOverview.css'
import './StationTestView.css'
import * as LOFARDefinitions from '../utils/LOFARDefinitions'
-
+import '../themes/lofar-styles.css'
import ReactTableContainer from "react-table-container";
import moment from 'moment';
import classnames from 'classnames';
@@ -59,16 +59,16 @@ function RCUIDFromAntennaNumberPolarization(antennaNumber, polarization, compone
class GenericStatus extends Component {
constructor (props) {
super(props)
- this.togglePopOver = this.togglePopOver.bind(this)
- this.state = {isPopOverOpen: false}
+ this.toggleTooltip = this.toggleTooltip.bind(this)
+ this.state = {isTooltipOpen: false}
this.id = unique_id()
}
- togglePopOver () {
- if(this.state.isPopOverOpen){
+ toggleTooltip () {
+ if(this.state.isTooltipOpen){
}
- this.setState({isPopOverOpen: !this.state.isPopOverOpen})
+ this.setState({isTooltipOpen: !this.state.isTooltipOpen})
}
getClass(){
@@ -81,7 +81,7 @@ class GenericStatus extends Component {
return 'so-stationtestbadge so-undefined'
}
}
- renderPopOver() {
+ renderTooltip() {
let renderedErrorsPerPolarization = []
@@ -117,10 +117,11 @@ class GenericStatus extends Component {
const jsx = (
- <Tooltip isOpen={this.state.isPopOverOpen}
- target={this.id} style={{backgroundColor: "white", color: "black"}}
+ <Tooltip isOpen={this.state.isTooltipOpen}
+ target={this.id}
+ className = {'tooltip'}
autohide={false}
- placement='auto' toggle={this.togglePopOver}>
+ placement='auto' toggle={this.toggleTooltip}>
<h5>Errors details</h5>
<Table size='sm'>
<tbody>
@@ -133,14 +134,14 @@ class GenericStatus extends Component {
return jsx
}
render(){
- let popover= undefined
+ let Tooltip= undefined
if(this.props.errors_per_polarization) {
- popover = this.renderPopOver()
+ Tooltip = this.renderTooltip()
}
const jsx = (
<td id={this.id} className='component-status'>
<div className={this.getClass()}>{this.props.n_errors}</div>
- {popover}
+ {Tooltip}
</td>
)
return jsx;
@@ -261,10 +262,18 @@ class RTSMSummaryLine extends Component {
renderDateRange(data){
const lastTest = data[0]
const firstTest = data[data.length - 1]
- const duration = moment.duration(moment(lastTest.end_date)-moment(firstTest.start_date)).as('days')
-
- return `${duration.toFixed(2)} days`
+ const duration = moment.duration(moment(lastTest.end_date)-moment(firstTest.start_date))
+ const years = duration.years()
+ const days = duration.days()
+ const months = duration.months()
+ const hours = duration.hours()
+ let string = `${data.length} obs `
+ if (years > 0) string += `${years}Y`
+ if (months > 0) string += `${months}M`
+ if (days > 0) string += `${days}d`
+ if (hours > 0) string += `${hours}h`
+ return string
}
toggleDisplaySingleTests(e){
@@ -367,16 +376,14 @@ class ComponentClass extends Component {
const rows = this.renderTestLines(this.props.data)
const jsx = (
- <div style={{alignContent: 'center'}}>
<ReactTableContainer width="90%" height="90vh">
<table className="table-sm table-hover">
{this.renderHeader()}
<tbody>
{rows}
</tbody>
- </table>
- </ReactTableContainer>
- </div>
+ </table>
+ </ReactTableContainer>
)
return jsx;
}
@@ -413,6 +420,8 @@ class StationTestViewC extends Component {
})
}
}
+
+
render() {
const stationType = LOFARDefinitions.stationTypeFromName(this.props.selectedStation);
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
index 02ad8cb30cd..40c72b74fbf 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
@@ -95,3 +95,8 @@
color: white;
background-color: #8d8d8d;
border-color: #8d8d8d; }
+
+.tooltip > .tooltip-inner {
+ background-color: white !important;
+ color: black !important;
+ border: 1px solid #8d8d8d; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
index be9e06163ef..4d58b89c074 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
@@ -106,3 +106,11 @@ $griditem-color: $secondary-dark;
background-color: $secondary-dark;
border-color: $secondary-dark;
}
+
+.tooltip > .tooltip-inner {
+ background-color: white !important;
+ color: black !important;
+
+ border: 1px solid $secondary-dark;
+
+}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
index 808fa876227..bbb681bdaa7 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
@@ -6414,3 +6414,8 @@ a.text-dark:hover, a.text-dark:focus {
color: white;
background-color: #8d8d8d;
border-color: #8d8d8d; }
+
+.tooltip > .tooltip-inner {
+ background-color: white !important;
+ color: black !important;
+ border: 1px solid #8d8d8d; }
--
GitLab