Speed up map rendering and sorting for large surveys

web/src/app/components/main-page/map/map.component.ts

@@ -370,12 +370,11 @@ export class MapComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
-  // TODO(#1445): override equals function in LocationOfInterest after making it concrete and removing all its inherent classes
   private isLocationOfInterestEqual(
     a: LocationOfInterest,
     b: LocationOfInterest
   ): boolean {
-    return JSON.stringify(a) === JSON.stringify(b);
+    return a.equals(b);
   }
 
   /**

web/src/app/models/loi.model.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { List, Map } from 'immutable';
+import { List, Map, is } from 'immutable';
 
 import { Geometry } from './geometry/geometry';
 
@@ -29,6 +29,18 @@ export class LocationOfInterest {
     readonly submissionCount: number = 0
   ) {}
 
+  equals(other: LocationOfInterest): boolean {
+    return (
+      this.id === other.id &&
+      this.jobId === other.jobId &&
+      this.customId === other.customId &&
+      this.predefined === other.predefined &&
+      this.submissionCount === other.submissionCount &&
+      is(this.geometry, other.geometry) &&
+      is(this.properties, other.properties)
+    );
+  }
+
   static getSmallestByArea(
     lois: List<LocationOfInterest>
   ): LocationOfInterest | undefined {

web/src/app/services/loi/loi.service.ts

@@ -56,11 +56,13 @@ export class LocationOfInterestService {
             )
       ),
       map(lois =>
-        lois.sort((a, b) =>
-          LocationOfInterestService.getDisplayName(a).localeCompare(
-            LocationOfInterestService.getDisplayName(b)
-          )
-        )
+        lois
+          .map(loi => ({
+            loi,
+            name: LocationOfInterestService.getDisplayName(loi),
+          }))
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map(({ loi }) => loi)
       )
     );
   }