Memory leak on the entities map page

[garethbowen]

There is a small but reproducible memory leak when unloading the entities map. This may also impact other uses of the map such as submissions but I haven't tested that.

Reproduction

1. Load Chrome (it has the best memory dev tools)
2. Select a project and entity which has a map
3. Trigger GC and take a Heap Snapshot
4. Click on the map button
5. Click on the table button
6. Repeat steps 4 and 5 five times
7. Trigger GC and take a Heap Snapshot again
8. Use the comparison view to compare to snapshot 1
9. Order by "# delta" and find objects with a delta of a multiple of five

Result

• Snapshot 1 is 16.7MB and snapshot 2 is 17.6MB (+0.9MB or ~0.2MB per load).
• Some objects are being retained, eg: 100 DOMRectReadOnly objects

More info

• Slack conversation
• Similar WebForms issue one component of which was a leak in OL maps and might have the same solution as this

[alxndrsn]

For a more dramatic/lower-effort repro:

1. go to https://staging.getodk.cloud/projects/181/entity-lists/shapesMany/entities
2. in the browser console, run:

const btn = label => Array.from(document.querySelectorAll('label.btn.btn-toggle'))
    .find(el => el.textContent.trim() === label);
const btnMap = btn('Map');
const btnTable = btn('Table');
while(true) {
  btnMap.click();
  await new Promise(resolve => setTimeout(resolve, 2000));
  btnTable.click();
  await new Promise(resolve => setTimeout(resolve, 1000));
}

3. After a few minutes, click System in the header menu:

4. wait a bit for GC