Memory Leak in Rxjs Map function to create new objects

I am using the Rxjs lib in Angular to get data from the backend and show it on a map. The message rate can be fast: 10 messages/sec. The backend data object is mapped, and a new MapAsset object is created progressively for each update by the MapAsset.fromAsset method (typically, one object is updated at a time).

Please take a look at the memory snapshot of the system after running the application with updates for a few mins. The system has 21,000 items. But after a few mins amount of MapAsset object is close to 2 million. The system eventually ends up crashing.

How do we fix this memory issue?

const mapAssets$ = assets$
.pipe(
map(assets => {
return assets
.map(asset => MapAsset.fromAsset(asset, transformMatrix));
}),
distinctUntilChanged(),
shareReplay(),
);




getAllAssetsPositionsInMeters(): Observable<Asset[]> {
return this.store.select(state => state.assetListState.assetData)
.pipe(
map(assets => Array.from(assets.values())),
distinctUntilChanged(),
shareReplay(),
);
}

Continue reading...