How to shut windy down after leaving angular component?
-
I am moving our system from server side ASP.NET MVC to client side angular single page app.
We have a map that toggles between leaflet regular and weather overlay. Everything works fine except my boss showed me his CPU and GPU usage. It is very high after visiting the weather map and leaving. It does not bother me because I have lots of RAM and an NVidia graphics card. My boss has half of my RAM and a regular card. It makes a difference on his machine.
I need a way to destroy or stop windy from continuing to use resources after leaving the angular component with windy. I read this post (link above) by marekd and apparently this is not possible. Currently I just destory and plug window['W'] like so....
window['W'] = { version: "23.1.1", assets: "23.1.1.lib.baaa", sha: "a2400baaa", target: "lib", build: "2020-01-27, 09:01" };
I am not sure if what I do shuts windy down. Does anybody know of a better way to shut windy down after one leaves a component?
-
I did not get an answer here. But after a few days of crazy hacking javascript internals I came up with this...
First, I use the standard off and remove methods to shut down leaflet v1.4.0 which windy works hand in hand with.
this.wmap.off();
this.wmap.remove();Secondly windy leaves a bunch of settings in the head which accumulate and compound every time a user visits a component with windy. These need to be cleared out of the head. See my clearHead method run in component ngDestroy below.
private clearHead() {
let head = document.getElementsByTagName('head')[0];
let scripts = head.getElementsByTagName('script');
let delscripts = [];
for (let script of scripts) {
if (script.outerHTML.indexOf('windy') !== -1) {
delscripts.push(script);
}
}
for (let script of delscripts) {
script.parentNode.removeChild(script);
}
let links = head.getElementsByTagName('link');
let dellinks = [];
for (let link of links) {
if (link.outerHTML.indexOf('windy') !== -1) {
dellinks.push(link);
}
}
for (let link of dellinks) {
link.parentNode.removeChild(link);
}
let styles = head.getElementsByTagName('style');
let delstyles = [];
for (let style of styles) {
if (style.outerHTML.indexOf('www.windy.com') !== -1) {
delstyles.push(style);
}
}
for (let style of delstyles) {
style.parentNode.removeChild(style);
}
}Next I close gl-particles. Even if one does not use particles in windy this seems to cause an error if visibility is ever lost to the browser. When you open another browser window or another app on your computer for example. Even after leaving the angular component with the windy map, the gl-particles events still trigger and cause errors. Shut the thing down on ngDestroy, it will start back up just fine when you return to the windy map component.
let www = window['W']; www['gl-particles'].close();I reset window['W'] to the original condition. Hopefully garbage collectiion will eventually free up the memory used after leaving the component with the windy map. Not sure if this does anything. It does not seem to hurt.
delete window['W']; window['W'] = { version: "23.1.1", assets: "23.1.1.lib.baaa", sha: "a2400baaa", target: "lib", build: "2020-01-27, 09:01" };Finally I knock on wood and hope that a better windy shut down mechanism becomes available.
-
Hi @ovwindy,
I am facing the same issue. do you have a working example with Angular? I tried with the same hack but got an error and also refresh is calling on another component as well.
Thanks,
