Browse Source

Merge branch 'heatmap-time' into dev

pull/35/head
Starbeamrainbowlabs 4 years ago
parent
commit
7486dcddde
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 93
      client_src/js/LayerHeatmap.mjs
  2. 86
      client_src/js/LayerHeatmapGlue.mjs
  3. 55
      client_src/js/MapManager.mjs
  4. 1
      client_src/js/index.mjs
  5. 11
      package-lock.json
  6. 1
      package.json

93
client_src/js/LayerHeatmap.mjs

@ -7,6 +7,10 @@ import GetFromUrl from './Helpers/GetFromUrl.mjs'; @@ -7,6 +7,10 @@ import GetFromUrl from './Helpers/GetFromUrl.mjs';
class LayerHeatmap {
/**
* Creates a new heatmap manager wrapper class fort he given map.
* @param {L.Map} in_map The leaflet map to attach to.
*/
constructor(in_map) {
this.map = in_map;
@ -77,8 +81,14 @@ class LayerHeatmap { @@ -77,8 +81,14 @@ class LayerHeatmap {
}
}
};
this.reading_cache = new Map();
}
/**
* Re-creates the heatmap overlay layer.
* Needed sometimes internally to work around an annoying bug.
*/
recreate_overlay() {
if(typeof this.heatmap != "undefined")
this.layer.removeLayer(this.heatmap);
@ -86,6 +96,10 @@ class LayerHeatmap { @@ -86,6 +96,10 @@ class LayerHeatmap {
this.layer.addLayer(this.heatmap);
}
/**
* Sets the display data to the given array of data points.
* @param {object[]} readings_list The array of data points to display.
*/
set_data(readings_list) {
let data_object = {
max: 0,
@ -102,6 +116,13 @@ class LayerHeatmap { @@ -102,6 +116,13 @@ class LayerHeatmap {
this.heatmap.setData(data_object);
}
/**
* Updates the heatmap with data for the specified datetime & reading type,
* fetching new data if necessary.
* @param {Date} datetime The datetime to display.
* @param {string} reading_type The reading type to display data for.
* @return {Promise} A promise that resolves when the operation is completed.
*/
async update_data(datetime, reading_type) {
if(!(datetime instanceof Date))
throw new Error("Error: 'datetime' must be an instance of Date.");
@ -123,15 +144,75 @@ class LayerHeatmap { @@ -123,15 +144,75 @@ class LayerHeatmap {
}
try {
this.set_data(JSON.parse(await GetFromUrl(
`${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(this.datetime.toISOString())}&reading_type=${encodeURIComponent(this.reading_type)}`
)));
this.set_data(await this.fetch_data(this.datetime, this.reading_type));
} catch(error) {
console.log(error);
alert(error);
}
}
/**
* Fetches & decodes data for the given datetime and the current reading type.
* @param {Date} datetime The Date to fetch data for.
* @param {string} reading_type The reading type code to fetch data for.
* @return {Promise} The requested data array, as the return value of a promise
*/
async fetch_data(datetime, reading_type) {
let cache_key = `${reading_type}|${datetime.toISOString()}`;
let result = this.reading_cache.get(cache_key);
if(typeof result == "undefined") {
result = JSON.parse(await GetFromUrl(
`${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(datetime.toISOString())}&reading_type=${encodeURIComponent(reading_type)}`
));
this.prune_cache(100);
this.reading_cache.set(cache_key, { data: result, inserted: new Date() });
}
else
result = result.data;
return result;
}
/**
* Prunes the reading cache, leaving at most newest_count items behind.
* The items inserted first are deleted first.
* @param {Number} newest_count The numebr of items to leave behind in the cache.
* @returns {Number} The number of items deleted from the cache.
*/
prune_cache(newest_count) {
let items = [];
for(let next_key of this.reading_cache) {
let cache_item = this.reading_cache.get(next_key);
if(typeof cache_item == "undefined") {
this.reading_cache.delete(cache_item);
continue;
}
items.push({
key: next_key,
date: cache_item.inserted
});
}
items.sort((a, b) => a.date - b.date);
let deleted = 0;
for(let i = 0; i < items.length - newest_count; i++) {
this.reading_cache.delete(this.items[i].key);
deleted++;
}
return deleted;
}
/**
* Whether the reading cache contains data for the given datetime & reading type.
* @param {Date} datetime The datetime to check.
* @param {string} reading_type The reading type code to check.
* @return {Boolean} Whether the reading cache contains data for the requested datetime & reading type.
*/
is_data_cached(datetime, reading_type) {
let cache_key = Symbol.for(`${reading_type}|${datetime.toISOString()}`);
return this.reading_cache.has(cache_key);
}
async update_reading_type(reading_type) {
await this.update_data(
@ -139,12 +220,6 @@ class LayerHeatmap { @@ -139,12 +220,6 @@ class LayerHeatmap {
reading_type
);
}
async update_datetime(datetime) {
await this.update_data(
datetime,
this.reading_type
);
}
}
export default LayerHeatmap;

86
client_src/js/LayerHeatmapGlue.mjs

@ -0,0 +1,86 @@ @@ -0,0 +1,86 @@
"use strict";
class LayerHeatmapGlue {
constructor(time_dimension, heatmap) {
this.time_dimension = time_dimension;
this.heatmap = heatmap;
this.glue_layer_const = L.TimeDimension.Layer.extend({
isReady: this.isReady,
});
this.cache = {};
}
attachTo(map) {
this.layer_glue = new this.glue_layer_const({
timeDimension: this.time_dimension
}).addTo(map);
this.time_dimension.on("timeload", this.update.bind(this));
this.time_dimension.on("timeloading", this.onNewTime.bind(this));
// this.time_dimension.registerSyncedLayer(this.layer_glue);
}
async onNewTime(event) {
console.log("on-new-time", arguments);
// event.time here is a number - TODO: Figure out how to keep it as a date
if(typeof this.cache[event.time] == "undefined") {
await this.loadTime(new Date(event.time));
}
this.fireLoadComplete(event.time);
}
/**
* Loads data into the cache for the specified datetime.
* @param {Date} time The datetime to load data in for.
* @return {[type]} [description]
*/
async loadTime(time) {
await this.heatmap.fetch_data(
time,
this.heatmap.reading_type
);
}
/**
* Fires the loadComplete event to leaflet-timedimension know we're done loading.
* @param {Number} time The timestamp to fire the timeload event for.
*/
fireLoadComplete(time) {
this.layer_glue.fire("timeload", {
time: time
});
}
/**
* Tells leaflet-timedimension if we're ready for a given time.
* @param {object} event The event object
* @return {Boolean} Whether we're ready or not
*/
isReady(event) {
// BUG: This will go awry if the user changes the reading type on the fly
// console.log("is-ready", arguments);
return this.heatmap.is_data_cached(
new Date(event.time),
this.heatmap.reading_type
);
}
/**
* Passes an update to the heatmap manager
* @param {[type]} event [description]
* @return {[type]} [description]
*/
async update(event) {
//console.log("update", arguments);
await this.heatmap.update_data(
new Date(event.time),
this.heatmap.reading_type
);
}
}
export default LayerHeatmapGlue;

55
client_src/js/MapManager.mjs

@ -3,10 +3,13 @@ @@ -3,10 +3,13 @@
// Import leaflet, but some plugins require it to have the variable name 'L' :-/
import L from 'leaflet';
import 'leaflet-fullscreen';
import 'iso8601-js-period';
import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.src.withlog.js';
import Config from './Config.mjs';
import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
import LayerHeatmap from './LayerHeatmap.mjs';
import LayerHeatmapGlue from './LayerHeatmapGlue.mjs';
import UI from './UI.mjs';
class MapManager {
@ -17,7 +20,12 @@ class MapManager { @@ -17,7 +20,12 @@ class MapManager {
setup() {
// Create the map
this.map = L.map("map", {
fullscreenControl: true
fullscreenControl: true,
timeDimension: true,
timeDimensionOptions: {
timeInterval: `2019-01-01/${(new Date()).toISOString().split("T")[0]}`,
period: "PT6M" // 6 minutes, in ISO 8601 Durations format: https://en.wikipedia.org/wiki/ISO_8601#Durations
}
});
this.map.setView(Config.default_location, Config.default_zoom);
@ -28,9 +36,11 @@ class MapManager { @@ -28,9 +36,11 @@ class MapManager {
attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
}).addTo(this.map);
// Add the attribution
this.map.attributionControl.addAttribution("Data: <a href='https://connectedhumber.org/'>Connected Humber</a>");
this.map.attributionControl.addAttribution("<a href='https://github.com/ConnectedHumber/Air-Quality-Web/'>Air Quality Web</a> by <a href='https://starbeamrainbowlabs.com/'>Starbeamrainbowlabs</a>");
// Add the device markers
console.info("[map] Loading device markers....");
this.setup_device_markers().then(() => {
@ -42,14 +52,51 @@ class MapManager { @@ -42,14 +52,51 @@ class MapManager {
// Add the heatmap
console.info("[map] Loading heatmap....");
this.setup_heatmap().then(() => {
console.info("[map] Heatmap loaded successfully.");
});
this.setup_heatmap()
.then(() => console.info("[map] Heatmap loaded successfully."))
// ...and the time dimension
.then(this.setup_time_dimension.bind(this))
.then(() => console.info("[map] Time dimension initialised."));
this.ui = new UI(Config, this);
this.ui.setup().then(() => console.log("[map] Settings initialised."));
}
setup_time_dimension() {
this.layer_time = new L.TimeDimension({
period: "PT1H", // 1 hour
timeInterval: `2019-01-01T12:00:00Z/${new Date().toISOString()}`
});
//this.layer_time.on("timeloading", console.log.bind(null, "timeloading"));
this.layer_time_player = new L.TimeDimension.Player({
transitionTime: 500,
loop: false,
startOver: true,
buffer: 10 // Default: 5
}, this.layer_time);
this.layer_time_control = new L.Control.TimeDimension({
player: this.layer_time_player,
timeDimension: this.layer_time,
position: "bottomright",
autoplay: false,
minSpeed: 1,
speedStep: 0.25,
maxSpeed: 15,
timeSliderDragUpdate: false
});
this.map.addControl(this.layer_time_control);
// Create the time dimension <---> heatmap glue object
this.layer_heatmap_glue = new LayerHeatmapGlue(
this.layer_time,
this.heatmap
);
this.layer_heatmap_glue.attachTo(this.map);
}
async setup_device_markers() {
this.device_markers = new LayerDeviceMarkers(this.map);
await this.device_markers.setup();

1
client_src/js/index.mjs

@ -1,6 +1,7 @@ @@ -1,6 +1,7 @@
"use strict";
import '../css/main.css';
import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css';
// ----------------------------------------------------------------------------

11
package-lock.json generated

@ -1626,9 +1626,9 @@ @@ -1626,9 +1626,9 @@
"dev": true
},
"iso8601-js-period": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/iso8601-js-period/-/iso8601-js-period-0.2.0.tgz",
"integrity": "sha1-5XQP1OcguWCoXraF/CBSAWIcAYw="
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/iso8601-js-period/-/iso8601-js-period-0.2.1.tgz",
"integrity": "sha512-iDyz2TQFBd5WhCZjruOwHj01JkQGu7YbVLCVdpA7lCGEcBzE3ffCPAhLh/M8TAp//kCixPpYN4XU54WHCxvD2Q=="
},
"isobject": {
"version": "3.0.1",
@ -1730,6 +1730,11 @@ @@ -1730,6 +1730,11 @@
"leaflet": "~0.7.4 || ~1.0.0"
},
"dependencies": {
"iso8601-js-period": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/iso8601-js-period/-/iso8601-js-period-0.2.0.tgz",
"integrity": "sha1-5XQP1OcguWCoXraF/CBSAWIcAYw="
},
"leaflet": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.0.3.tgz",

1
package.json

@ -19,6 +19,7 @@ @@ -19,6 +19,7 @@
"dependencies": {
"chart.js": "^2.8.0",
"dom-create-element-query-selector": "github:hekigan/dom-create-element-query-selector",
"iso8601-js-period": "^0.2.1",
"leaflet": "^1.4.0",
"leaflet-fullscreen": "^1.0.2",
"leaflet-timedimension": "^1.1.0",

Loading…
Cancel
Save