Orphaned DOM Nodes about blazorgooglemaps

[valentasm1]

Honsly i had this thought. Will check closer today

[valentasm1]

Objects are released from memory cache, but like you said not from JavaScript.
How you come with this conclusions? I mean i would like to monitor and to reproduce by myself.

[FlySpray316]

Hi, Its possible i am not correct. So glad if u can help me confirm. My JS skills are not great. My webapp makes heavy use of markers and various shapes. I use chrome dev tools to monitor the DOM node count and mem. Step 1. Start at the home page and click reload to make sure you are starting with a fresh DOM. which is very light.. about 800 nodes. Step 2. Navigate to the map and open lots of markers, shapes etc... about 2,500 nodes. Step 3. Navigate back to the home page and then trigger garbage collector using dev tools... about 3,200 nodes. Expected result would be 800 nodes (same as fresh home page) Hope this helps. Maybe you can reproduce the result?? Tomorrow I'll send you some screenshots. Thanks, Ron.

…

________________________________ From: Valentas <[email protected]> Sent: Friday, 19 June 2020 7:36 AM To: rungwiroon/BlazorGoogleMaps <[email protected]> Cc: FlySpray316 <[email protected]>; Author <[email protected]> Subject: Re: [rungwiroon/BlazorGoogleMaps] Orphaned DOM Nodes (#45) Objects are released from memory cache, but like you said not from JavaScript. How you come with this conclusions? I mean i would like to monitor and to reproduce by myself. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#45 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOAAB4HWCTHIX4QA7BGBB7DRXMIPPANCNFSM4OCMSV6A>.

[valentasm1]

It is not that it is impossible for me, i just dont want to waste time where someone already had done everything and know where to click and see bug.
I will wait for screenshots. Screenshots are always great :).

[FlySpray316]

The attached screen shots are a series of actions...

home page 1.png
Fresh DOM starting at home page. Node count about 800

map page 2.png
Navigate to the map page whihc has heavy usage of your google map component. Node count about 3200

home page 3 before garbage collector.png as the file suggests, this is navigating away from map page back to the home page where we would expect a node count of about 800 again. but remains on about 3200.

home page 4 after gabage collector.png. clicking the garbage collector button in Chrome Dev Tools to trigger garbage collection, would expect the node count to return to 800. but instead remains high.

home page 4 after garbage collector - with JS Hack - I'e included one extra screen shot, following the same steps as aboive, but with my JS hack to delte the object array on Dispose() of Map Page. can see the node count returns to 850 (a little higher than before, but I can live).

[valentasm1]

Big thumb up for description. Also bug is very good catch. I would give you medal if i could :). Great work.
Back to topic. It is a bit complicated to remove. Just to clear all array it is a bit risky and could break a lot of people apps. So here is my suggestion. Map dispose is always called as expected. So when it is called then iterate through all array items and check if item have property map and map guid is same as disposed map. If true then remove. Problem that it finds only elements. Events isnt catched since they are promises.
I found some way but need more testing.
In a while you could inherit map component and on dispose call js function similar like this with map guid.

disposeMapElements(mapGuid) {
        var keysToRemove = [];
       
        for (var key in _blazorGoogleMapsObjects) {
            if (_blazorGoogleMapsObjects.hasOwnProperty(key)) {
                var element = _blazorGoogleMapsObjects[key];
                if (element.hasOwnProperty("map")
                    && element.hasOwnProperty("guidString")
                    && element.map.guidString === mapGuid) {
                    keysToRemove.push(element.guidString);
                }
            }
        }

        for (var keyToRemove in keysToRemove) {
            if (keysToRemove.hasOwnProperty(keyToRemove)) {
                var elementToRemove = keysToRemove[keyToRemove];
                delete window._blazorGoogleMapsObjects[elementToRemove];
            }
        }
    },

[valentasm1]

I will try to test and release in week period.

[FlySpray316]

Happy to help mate, and greatly appreciate you taking the time to look into this for me 🙂🙂

…

________________________________ From: Valentas <[email protected]> Sent: Thursday, 25 June 2020 11:42 AM To: rungwiroon/BlazorGoogleMaps <[email protected]> Cc: FlySpray316 <[email protected]>; Author <[email protected]> Subject: Re: [rungwiroon/BlazorGoogleMaps] Orphaned DOM Nodes (#45) I will try to test and release in week period. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#45 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOAAB4EB7RXQ2SRAZX7TNDDRYMZZDANCNFSM4OCMSV6A>.

[valentasm1]

You said code bellow solves your problem. So does it solve on app or while testing and clicking garbage collector button?

dispose: function () {
    delete window._blazorGoogleMapsObjects;
},

[FlySpray316]

It solves in the app. But you have to wait for garbage collector to fire.

…

________________________________ From: Valentas <[email protected]> Sent: Monday, 29 June 2020 9:06 PM To: rungwiroon/BlazorGoogleMaps <[email protected]> Cc: FlySpray316 <[email protected]>; Author <[email protected]> Subject: Re: [rungwiroon/BlazorGoogleMaps] Orphaned DOM Nodes (#45) You said code bellow solves your problem. So does it solve on app or while testing and clicking garbage collector button? dispose: function () { delete window._blazorGoogleMapsObjects; }, — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#45 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOAAB4FS52UNSAMGZZ4BHP3RZD653ANCNFSM4OCMSV6A>.

[valentasm1]

Hope will not ruin anything big :).
So removed part where promises(events) was added to array and part where elements is removed by they dependency of map. Code bellow.
Like you said you have to waith for garbage collector to fire. I have sense that there is better way to remove them faster.
Please check if all you functionality works as expected with package 0.6.6. Finger crossed.
https://www.nuget.org/packages/BlazorGoogleMaps/0.6.6

disposeMapElements(mapGuid) {
	var keysToRemove = [];
   
	for (var key in _blazorGoogleMapsObjects) {
		if (_blazorGoogleMapsObjects.hasOwnProperty(key)) {
			var element = _blazorGoogleMapsObjects[key];
			if (element.hasOwnProperty("map")
				&& element.hasOwnProperty("guidString")
				&& element.map.guidString === mapGuid) {
				keysToRemove.push(element.guidString);
			}
		}
	}

	for (var keyToRemove in keysToRemove) {
		if (keysToRemove.hasOwnProperty(keyToRemove)) {
			var elementToRemove = keysToRemove[keyToRemove];
			delete window._blazorGoogleMapsObjects[elementToRemove];
		}
	}
},

[valentasm1]

Have you tried @FlySpray316
Could you confirm that all good and i could close?

[FlySpray316]

Sorry mate, just got your message. I'll test on Tuesday and send results through. Thanks again for your diligent help. Greatly appreciated. :-)

…

________________________________ From: Valentas <[email protected]> Sent: Saturday, July 4, 2020 3:14:00 AM To: rungwiroon/BlazorGoogleMaps <[email protected]> Cc: FlySpray316 <[email protected]>; Mention <[email protected]> Subject: Re: [rungwiroon/BlazorGoogleMaps] Orphaned DOM Nodes (#45) Have you tried @FlySpray316<https://github.com/FlySpray316> Could you confirm that all good and i could close? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#45 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOAAB4AUDMDE7CXOJ4YRSVDRZYUXRANCNFSM4OCMSV6A>.

[FlySpray316]

I've tested the 0.6.6 release... unfortunately the DOM Node count still seems to be increasing. :-(

Just to confirm, on dispose of the page, I'm calling Map.Dispose(); am I meant to be calling anything/something else to dispose?? if yes, let me know; I can re-run the test.

screenshots attached...

Home page with Fresh DOM Node Count...

Map Page with high DOM Node Count...

Home page with Hich DOM Node count BEFORE calling Garbage Collector...

Home page with High DOM Node count AFTER calling Garbage Collector...

While the node count does drop, it seems there are still references that are not getting released. If i was better with JS i would dive in and have a look, but I'd probably make it worse!! haha :)

This screenshot is me navigating to the map page and back to the home page several times, calling the Garbage Collector after each time.

[valentasm1]

Could you check number of element before and after with Object.keys(_blazorGoogleMapsObjects).length
Also after check what kind elements left in array _blazorGoogleMapsObjects . I assume removing it form array dont make dom node dissapear from stack. Aslo could you try to redirect from other page with refresh. As much as i read this is most reliable way to clear dom nodes.
Let my know your test results

[valentasm1]

@FlySpray316 did you make a new finding? Have you tried my suggestions?

[FlySpray316]

Sorry i have not tired your suggestion yet, I've got to finish some other tasks first.
But in 3 weeks I can dedicate a full week to solving this. Will send you a note when I start work on it.

[valentasm1]

No rush. You are only one (i assume) which have such issue.

[valentasm1]

I will close this issue in couple weeks if i wont get any response.