Merge dev into master (#332)

* T10 - Bug fixes (#331) * Auto select new parameter, when removing selected parameter in visualization * Add spinners when loading data * Fix bug in sensor list * Fix scaling of y-axis in visualization * Fix csv export Co-authored-by: Robert <[email protected]>
inowas · Nov 20, 2020 · 6c11e4f · 6c11e4f
1 parent 5c39606
commit 6c11e4f
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 106 deletions.
diff --git a/src/scenes/t10/components/DataSourcesChart.tsx b/src/scenes/t10/components/DataSourcesChart.tsx
@@ -1,4 +1,4 @@
-import {Button, Icon} from 'semantic-ui-react';
+import {Button, Dimmer, Icon, Loader} from 'semantic-ui-react';
 import {DataPoint} from 'downsample';
 import {DataSourceCollection} from '../../../core/model/rtm';
 import {IDateTimeValue} from '../../../core/model/rtm/Sensor.type';
@@ -18,18 +18,22 @@ interface IProps {
 const DataSourcesChart = (props: IProps) => {
     const [data, setData] = useState<IDateTimeValue[] | null>(null);
     const chartRef = useRef<ScatterChart>(null);
+    const [isFetching, setIsFetching] = useState<boolean>(false);
 
     useEffect(() => {
         async function f() {
             const mergedData = await props.dataSources.mergedData();
 
             if (props.processings instanceof ProcessingCollection) {
-                return setData(await props.processings.apply(mergedData));
+                const processedData = await props.processings.apply(mergedData);
+                setIsFetching(false);
+                return setData(processedData);
             }
-
+            setIsFetching(false);
             return setData(mergedData);
         }
 
+        setIsFetching(true);
         f();
 
     }, [props.dataSources, props.processings]);
@@ -56,6 +60,11 @@ const DataSourcesChart = (props: IProps) => {
 
     return (
         <div>
+            {isFetching &&
+            <Dimmer active={true} inverted={true}>
+                <Loader inverted={true}>Loading</Loader>
+            </Dimmer>
+            }
             <ResponsiveContainer height={300}>
                 <ScatterChart
                     data={data}

diff --git a/src/scenes/t10/components/Sensors.tsx b/src/scenes/t10/components/Sensors.tsx
@@ -1,11 +1,10 @@
 import {AddSensor, SensorList} from './index';
 import {Grid, Segment} from 'semantic-ui-react';
-import {RouteComponentProps, withRouter} from 'react-router';
 import {Rtm, Sensor} from '../../../core/model/rtm';
 import ContentToolBar from '../../shared/ContentToolbar';
 import React, {ReactFragment, useEffect, useState} from 'react';
 
-export interface IProps extends RouteComponentProps<{ id: string, property: string, pid: string }> {
+export interface IProps {
     rtm: Rtm;
     isDirty: boolean;
     isError: boolean;
@@ -129,6 +128,4 @@ const Sensors = (props: IProps) => {
     );
 };
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore todo
-export default withRouter<IProps>(Sensors);
+export default Sensors;
diff --git a/src/scenes/t10/components/visualization/ToggleableSensorList.tsx b/src/scenes/t10/components/visualization/ToggleableSensorList.tsx
@@ -1,6 +1,6 @@
-import React, {FormEvent} from 'react';
 import {Checkbox, CheckboxProps, Icon, List} from 'semantic-ui-react';
 import {IParameterWithMetaData} from './types';
+import React, {FormEvent} from 'react';
 
 interface IProps {
     parameters: IParameterWithMetaData[];

diff --git a/src/scenes/t10/components/visualization/Visualization.tsx b/src/scenes/t10/components/visualization/Visualization.tsx
@@ -1,16 +1,16 @@
-import _ from 'lodash';
-import React, {SyntheticEvent, useEffect, useState} from 'react';
 import {
     Button,
     Form,
     Grid,
     Icon, Segment
 } from 'semantic-ui-react';
-import {Rtm} from '../../../../core/model/rtm';
+import {IParameterWithMetaData} from './types';
 import {ISensorParameter} from '../../../../core/model/rtm/Sensor.type';
-import {heatMapColors} from '../../../t05/defaults/gis';
+import {Rtm} from '../../../../core/model/rtm';
 import {ToggleableSensorList, VisualizationParameter} from './index';
-import {IParameterWithMetaData} from './types';
+import {heatMapColors} from '../../../t05/defaults/gis';
+import React, {SyntheticEvent, useEffect, useState} from 'react';
+import _ from 'lodash';
 
 interface IProps {
     rtm: Rtm;
@@ -40,8 +40,8 @@ const Visualization = (props: IProps) => {
                             sensor: s.toObject(),
                             meta: {
                                 active: true,
-                                color: (heatMapColors.discrete.length >= 4 * sIdx + pIdx) ?
-                                    heatMapColors.discrete[4 * sIdx + pIdx] : '#000000',
+                                color: (heatMapColors.discrete.length >= (4 * sIdx) + pIdx) ?
+                                    heatMapColors.discrete[(4 * sIdx) + pIdx] : '#000000',
                                 axis: selectedParameter.axis
                             }
                         });
@@ -99,12 +99,14 @@ const Visualization = (props: IProps) => {
     };
 
     const handleChangeParameters = (result: IParameterWithMetaData[]) => {
-        const cParameters: IParameterWithMetaData[] = result;
-        parameters.forEach((p) => {
-            if (cParameters.filter((cp) => cp.parameter.type === p.parameter.type).length === 0) {
-                cParameters.push(p);
+        const cParameters: IParameterWithMetaData[] = parameters.map((p) => {
+            const f = result.filter((pf) => pf.parameter.id === p.parameter.id && pf.sensor.id === p.sensor.id);
+            if (f.length > 0) {
+                return f[0];
             }
+            return p;
         });
+
         return setParameters(cParameters);
     };
 
@@ -118,7 +120,7 @@ const Visualization = (props: IProps) => {
             const cParameters = _.cloneDeep(selectedParameters);
             cParameters.push({
                 type: nextParameter[0].value,
-                axis: 'left'
+                axis: 'right'
             });
             return setSelectedParameters(cParameters);
         }

diff --git a/src/scenes/t10/components/visualization/VisualizationMap.tsx b/src/scenes/t10/components/visualization/VisualizationMap.tsx
@@ -1,16 +1,16 @@
-import {LatLngExpression} from 'leaflet';
-import _ from 'lodash';
-import React, {SyntheticEvent, useState} from 'react';
-import {CircleMarker, Map, Tooltip} from 'react-leaflet';
-import {Button, Dropdown, DropdownProps, Grid, Popup} from 'semantic-ui-react';
-import {BoundingBox} from '../../../../core/model/geometry';
-import {Rtm} from '../../../../core/model/rtm';
-import {ISensor} from '../../../../core/model/rtm/Sensor.type';
 import {BasicTileLayer} from '../../../../services/geoTools/tileLayers';
+import {BoundingBox} from '../../../../core/model/geometry';
+import {Button, Dropdown, DropdownProps, Grid, Popup} from 'semantic-ui-react';
+import {CircleMarker, Map, Tooltip} from 'react-leaflet';
 import {ColorLegend} from '../../../shared/rasterData';
-import {rainbowFactory} from '../../../shared/rasterData/helpers';
-import {heatMapColors} from '../../../t05/defaults/gis';
 import {IParameterWithMetaData, ITimeStamps} from './types';
+import {ISensor} from '../../../../core/model/rtm/Sensor.type';
+import {LatLngExpression} from 'leaflet';
+import {Rtm} from '../../../../core/model/rtm';
+import {heatMapColors} from '../../../t05/defaults/gis';
+import {rainbowFactory} from '../../../shared/rasterData/helpers';
+import React, {SyntheticEvent, useEffect, useState} from 'react';
+import _ from 'lodash';
 
 interface IProps {
     data: IParameterWithMetaData[];
@@ -26,6 +26,14 @@ const VisualizationMap = (props: IProps) => {
     const [selectedParameter, setSelectedParameter] = useState<string | undefined>(props.parameters[0].parameter.type);
     const [showScale, setShowScale] = useState<boolean>(false);
 
+    useEffect(() => {
+        if (props.parameters.length > 0 && (!selectedParameter || (selectedParameter &&
+                props.parameters.filter((p) => p.parameter.type === selectedParameter)))) {
+            setSelectedParameter(props.parameters[0].parameter.type)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.parameters]);
+
     const getMinMax = () => {
         const params = props.parameters.filter((p) => p.parameter.type === selectedParameter);
         const left = params.filter((p) => p.meta.axis === 'left');
@@ -93,14 +101,16 @@ const VisualizationMap = (props: IProps) => {
             let fillOpacity = 0.8;
             let value = null;
 
-            if (showScale && props.tsData) {
+            if (props.tsData) {
                 const row = parameter[0].data.filter((r) => r.x === (props.isAnimated ? props.tsData.timestamps[
                     props.timeRef] : props.timestamp));
                 if (row.length > 0) {
                     value = row[0].y;
-                    fillColor = `#${rainbow.colorAt(row[0].y)}`;
-                } else {
-                    fillColor = `#000`;
+                    if (showScale) {
+                        fillColor = `#${rainbow.colorAt(row[0].y)}`;
+                    }
+                } else if (showScale) {
+                    fillColor = '#000';
                     fillOpacity = 0.3;
                 }
             }