Birdmap.API/ClientApp/src/common/Constants.js

@@ -1,5 +1,5 @@
 export default {
-    probability_method_name: 'NotifyMessagesAsync',
+    probability_method_name: 'NotifyDeviceAsync',
     update_method_name: 'NotifyDeviceUpdatedAsync',
     update_all_method_name: 'NotifyAllUpdatedAsync',
 };

Birdmap.API/ClientApp/src/components/dashboard/Dashboard.jsx

@@ -57,9 +57,6 @@ class Dashboard extends Component {
     componentWillUnmount() {
         this.context.removeHandler(C.update_all_method_name, this.updateSeries);
         this.context.removeHandler(C.update_method_name, this.updateSeries);
-        if (this.updateTimer) {
-            clearTimeout(this.updateTimer);
-        }
     }
 
     getItemsWithStatus(iterate, status) {
@@ -114,8 +111,8 @@ class Dashboard extends Component {
     updateDynamic = () => {
         const secondAgo = new Date();
         secondAgo.setMilliseconds(0);
-        const minuteAgo = new Date(Date.now() - 1000 * 60);
+        const minuteAgo = new Date( Date.now() - 1000 * 60 );
-        const hourAgo = new Date(Date.now() - 1000 * 60 * 60);
+        const hourAgo = new Date( Date.now() - 1000 * 60 * 60 );
 
         const minuteDevicePoints = {};
         const hourDevicePoints = {};
@@ -128,7 +125,7 @@ class Dashboard extends Component {
             barDevicePoints[d.id] = Array(3).fill(0);
         }
 
-        const processHeatmapItem = (items, index) => {
+        const processMethod = (items, index) => {
             const p = items[index];
             if (p.date > minuteAgo) {
                 var seconds = Math.floor((p.date.getTime() - minuteAgo.getTime()) / 1000);
@@ -167,7 +164,7 @@ class Dashboard extends Component {
             }
         }
 
-        const onFinished = () => {
+        const finishMethod = () => {
             const minuteHeatmapSeries = [];
 
             var i = 0;
@@ -175,7 +172,7 @@ class Dashboard extends Component {
                 minuteHeatmapSeries.push({
                     name: "Device " + i,
                     data: minuteDevicePoints[p].map((value, index) => ({
-                        x: new Date(Date.now() - (60 - index) * 1000).toLocaleTimeString('hu-HU'),
+                        x: new Date( Date.now() - (60 - index) * 1000 ).toLocaleTimeString('hu-HU'),
                         y: value
                     })),
                 });
@@ -189,7 +186,7 @@ class Dashboard extends Component {
                 hourHeatmapSeries.push({
                     name: "Device " + i,
                     data: hourDevicePoints[p].map((value, index) => ({
-                        x: new Date(Date.now() - (60 - index) * 1000 * 60).toLocaleTimeString('hu-HU').substring(0, 5),
+                        x: new Date( Date.now() - (60 - index) * 1000 * 60 ).toLocaleTimeString('hu-HU').substring(0, 5),
                         y: value
                     })),
                 });
@@ -221,7 +218,7 @@ class Dashboard extends Component {
                 data: getCount(2),
             });
     
-            const lineSeries = [{ name: "message/sec", data: [] }];
+            const lineSeries = [{name: "message/sec", data: []}];
             for (var m in linePoints) {
                 lineSeries[0].data.push({
                     x: new Date(m).getTime(),
@@ -239,23 +236,20 @@ class Dashboard extends Component {
                 return categories;
             }
     
-            const toUpdate = [
+            this.setState({
-                { heatmapSecondsSeries: minuteHeatmapSeries },
+                heatmapSecondsSeries: minuteHeatmapSeries,
-                { heatmapMinutesSeries: hourHeatmapSeries },
+                heatmapMinutesSeries: hourHeatmapSeries,
-                { barSeries: barSeries },
+                barSeries: barSeries,
-                { barCategories: getBarCategories() },
+                barCategories: getBarCategories(),
-                { lineSeries: lineSeries }
+                lineSeries: lineSeries,
-            ];
-
-            //Set states must be done separately otherwise ApexChart's UI update freezes the page.
-            this.performTask(toUpdate, 2, 300, (list, index) => {
-                this.setState(list[index]);
-            },
-            () => {
-                this.updateTimer = setTimeout(this.updateDynamic, 1000);
             });
+
+            setTimeout(this.updateDynamic, 1000);
         }
 
+        const processHeatmapItem = processMethod.bind(this);
+        const onFinished = finishMethod.bind(this)
+
         this.performTask(this.context.heatmapPoints, Math.ceil(this.context.heatmapPoints.length / 50), 20,
             processHeatmapItem, onFinished);
     }
@@ -287,36 +281,36 @@ class Dashboard extends Component {
             <Box className={classes.root}>
                 <Grid container spacing={3}>
                     <Grid item xs={12}>
-                        <Services isAdmin={this.props.isAdmin} />
+                        <Services isAdmin={this.props.isAdmin}/>
                     </Grid>
                     <Grid item xs={6}>
                         <Paper className={classes.paper}>
-                            <DonutChart totalLabel="Devices" series={this.state.deviceSeries} />
+                            <DonutChart totalLabel="Devices" series={this.state.deviceSeries}/>
                         </Paper>
                     </Grid>
                     <Grid item xs={6}>
                         <Paper className={classes.paper}>
-                            <DonutChart totalLabel="Sensors" series={this.state.sensorSeries} />
+                            <DonutChart totalLabel="Sensors" series={this.state.sensorSeries}/>
                         </Paper>
                     </Grid>
                     <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                            <HeatmapChart label="Highest probability per second by devices" series={this.state.heatmapSecondsSeries} />
+                            <HeatmapChart label="Highest probability per second by devices" series={this.state.heatmapSecondsSeries}/>
                         </Paper>
                     </Grid>
                     <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                            <HeatmapChart label="Highest probability per minute by devices" series={this.state.heatmapMinutesSeries} />
+                            <HeatmapChart label="Highest probability per minute by devices" series={this.state.heatmapMinutesSeries}/>
                         </Paper>
                     </Grid>
                     <Grid item xs={6}>
                         <Paper className={classes.paper}>
-                            <BarChart label="# of messages by devices" series={this.state.barSeries} categories={this.state.barCategories} />
+                            <BarChart label="# of messages by devices" series={this.state.barSeries} categories={this.state.barCategories}/>
                         </Paper>
                     </Grid>
                     <Grid item xs={6}>
                         <Paper className={classes.paper}>
-                            <LineChart label="# of messages per second" series={this.state.lineSeries} />
+                            <LineChart label="# of messages per second" series={this.state.lineSeries}/>
                         </Paper>
                     </Grid>
                 </Grid>

Birdmap.API/ClientApp/src/components/dashboard/charts/HeatmapChart.jsx

@@ -8,34 +8,19 @@ export class HeatmapChart extends Component {
     
         this.state = {
             options: {
-              chart: {
+                dataLabels: {
-                animations: {
+                  enabled: false
-                  enabled: true,
+                },
-                  easing: 'linear',
+                colors: [blueGrey[900]],
-                  speed: 250,
+                title: {
-                  animateGradually: {
+                  text: props.label,
-                      enabled: false,
+                  style: {
-                      speed: 250,
+                    fontSize: '22px',
+                    fontWeight: 600,
+                    fontFamily: 'Helvetica, Arial, sans-serif',
                   },
-                  dynamicAnimation: {
-                      enabled: true,
-                      speed: 250
-                  }
-                }
-              },
-              dataLabels: {
-                enabled: false
-              },
-              colors: [blueGrey[900]],
-              title: {
-                text: props.label,
-                style: {
-                  fontSize: '22px',
-                  fontWeight: 600,
-                  fontFamily: 'Helvetica, Arial, sans-serif',
                 },
               },
-            },
         }
     }
     

Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx

@@ -20,18 +20,11 @@ export default class MapContainer extends Component {
         };
 
         this.probabilityHandler = this.probabilityHandler.bind(this);
-        this.handlePoint = this.handlePoint.bind(this);
     }
 
     static contextType = DevicesContext;
 
-    probabilityHandler(points) {
+    probabilityHandler(point) {
-        for (var point of points) {
-            this.handlePoint(point);
-        }
-    }
-
-    handlePoint(point) {
         if (point.prob > 0.5) {
 
             this.setState({

Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js

@@ -99,19 +99,15 @@ export default class DevicesContextProvider extends Component {
             .then(_ => {
                 console.log('Devices hub Connected!');
 
-                newConnection.on(C.probability_method_name, (messages) => {
+                newConnection.on(C.probability_method_name, (id, date, prob) => {
                     //console.log(method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
-                    const newPoints = [];
+                    var device = this.state.devices.filter(function (x) { return x.id === id })[0]
-                    for (var message of messages) {
+                    var newPoint = { deviceId: device.id, lat: device.coordinates.latitude, lng: device.coordinates.longitude, prob: prob, date: new Date(date) };
-                        var device = this.state.devices.filter(function (x) { return x.id === message.deviceId })[0]
-                        var newPoint = { deviceId: device.id, lat: device.coordinates.latitude, lng: device.coordinates.longitude, prob: message.probability, date: new Date(message.date) };
-                        newPoints.push(newPoint);
-                    }
                     this.setState({
-                        heatmapPoints: this.state.heatmapPoints.concat(newPoints)
+                        heatmapPoints: [...this.state.heatmapPoints, newPoint]
                     });
 
-                    this.invokeHandlers(C.probability_method_name, newPoints);
+                    this.invokeHandlers(C.probability_method_name, newPoint);
                 });
 
                 newConnection.on(C.update_all_method_name, () => {

Birdmap.API/Services/Hubs/IDevicesHubClient.cs

@@ -1,14 +1,11 @@
 using System;
-using System.Collections.Generic;
 using System.Threading.Tasks;
 
 namespace Birdmap.API.Services
 {
-    public record Message(Guid DeviceId, DateTime Date, double Probability);
-
     public interface IDevicesHubClient
     {
-        Task NotifyMessagesAsync(IEnumerable<Message> messages);
+        Task NotifyDeviceAsync(Guid deviceId, DateTime date, double probability);
         Task NotifyDeviceUpdatedAsync(Guid deviceId);
         Task NotifyAllUpdatedAsync();
     }

Birdmap.API/Services/Mqtt/MqttClientService.cs

@@ -9,11 +9,9 @@ using MQTTnet.Client.Disconnecting;
 using MQTTnet.Client.Options;
 using Newtonsoft.Json;
 using System;
-using System.Collections.Generic;
 using System.Linq;
 using System.Threading;
 using System.Threading.Tasks;
-using Timer = System.Timers.Timer;
 
 namespace Birdmap.API.Services.Mqtt
 {
@@ -24,9 +22,6 @@ namespace Birdmap.API.Services.Mqtt
         private readonly ILogger<MqttClientService> _logger;
         private readonly IInputService _inputService;
         private readonly IHubContext<DevicesHub, IDevicesHubClient> _hubContext;
-        private readonly Timer _hubTimer;
-        private readonly List<Message> _messages = new();
-        private readonly object _messageLock = new();
 
         public bool IsConnected => _mqttClient.IsConnected;
 
@@ -36,30 +31,10 @@ namespace Birdmap.API.Services.Mqtt
             _logger = logger;
             _inputService = inputService;
             _hubContext = hubContext;
-            _hubTimer = new Timer()
-            {
-                AutoReset = true,
-                Interval = 1000,
-            };
-            _hubTimer.Elapsed += SendMqttMessagesWithSignalR;
-
             _mqttClient = new MqttFactory().CreateMqttClient();
             ConfigureMqttClient();
         }
 
-        private void SendMqttMessagesWithSignalR(object sender, System.Timers.ElapsedEventArgs e)
-        {
-            lock (_messageLock)
-            {
-                if (_messages.Any())
-                {
-                    _logger.LogInformation($"Sending ({_messages.Count}) messages: {string.Join(" | ", _messages)}");
-                    _hubContext.Clients.All.NotifyMessagesAsync(_messages);
-                    _messages.Clear();
-                }
-            }
-        }
-
         private void ConfigureMqttClient()
         {
             _mqttClient.ConnectedHandler = this;
@@ -80,7 +55,7 @@ namespace Birdmap.API.Services.Mqtt
         {
             var message = eventArgs.ApplicationMessage.ConvertPayloadToString();
 
-            _logger.LogDebug($"Recieved [{eventArgs.ClientId}] " +
+            _logger.LogInformation($"Recieved [{eventArgs.ClientId}] " +
                 $"Topic: {eventArgs.ApplicationMessage.Topic} | Payload: {message} | QoS: {eventArgs.ApplicationMessage.QualityOfServiceLevel} | Retain: {eventArgs.ApplicationMessage.Retain}");
 
             try
@@ -88,10 +63,7 @@ namespace Birdmap.API.Services.Mqtt
                 var payload = JsonConvert.DeserializeObject<Payload>(message);
                 var inputResponse = await _inputService.GetInputAsync(payload.TagID);
 
-                lock (_messageLock)
+                await _hubContext.Clients.All.NotifyDeviceAsync(inputResponse.Message.Device_id, inputResponse.Message.Date.UtcDateTime, payload.Probability);
-                {
-                    _messages.Add(new Message(inputResponse.Message.Device_id, inputResponse.Message.Date.UtcDateTime, payload.Probability));
-                }
             }
             catch (Exception ex)
             {
@@ -107,7 +79,6 @@ namespace Birdmap.API.Services.Mqtt
                 _logger.LogInformation($"Connected. Auth result: {eventArgs.AuthenticateResult}. Subscribing to topic: {topic}");
 
                 await _mqttClient.SubscribeAsync(topic);
-                _hubTimer.Start();
             }
             catch (Exception ex)
             {
@@ -123,7 +94,6 @@ namespace Birdmap.API.Services.Mqtt
 
             try
             {
-                _hubTimer.Stop();
                 await _mqttClient.ConnectAsync(_options, CancellationToken.None);
             }
             catch (Exception ex)