Compare entries with stable stringify #3339

visualization/app/codeCharta/state/effects/updateVisibleTopLabels/updateVisibleTopLabels.effect.ts

@@ -1,12 +1,13 @@
+import stringify from "safe-stable-stringify"
 import { Injectable } from "@angular/core"
+import { State, Store } from "@ngrx/store"
 import { createEffect } from "@ngrx/effects"
-
 import { map, pairwise, withLatestFrom } from "rxjs"
+
 import { visibleFileStatesSelector } from "../../selectors/visibleFileStates.selector"
 import { codeMapNodesSelector } from "../../selectors/accumulatedData/codeMapNodes.selector"
 import { setAmountOfTopLabels } from "../../store/appSettings/amountOfTopLabels/amountOfTopLabels.actions"
 import { getNumberOfTopLabels } from "./getNumberOfTopLabels"
-import { State, Store } from "@ngrx/store"
 import { CcState } from "../../../codeCharta.model"
 
 @Injectable()
@@ -18,7 +19,7 @@ export class UpdateVisibleTopLabelsEffect {
 			pairwise(),
 			withLatestFrom(this.store.select(codeMapNodesSelector)),
 			map(([[previousVisibleFileStates, currentVisibleFileStates], codeMapNodes]) => {
-				const isUnchanged = JSON.stringify(previousVisibleFileStates) === JSON.stringify(currentVisibleFileStates)
+				const isUnchanged = stringify(previousVisibleFileStates) === stringify(currentVisibleFileStates)
 				const amountOfTopLabels = isUnchanged
 					? this.state.getValue().appSettings.amountOfTopLabels
 					: getNumberOfTopLabels(codeMapNodes)

visualization/package.json

@@ -88,6 +88,7 @@
 		"pako": "^2.0.4",
 		"percent-round": "^2.2.1",
 		"rxjs": "^7.5.1",
+		"safe-stable-stringify": "^2.4.3",
 		"shelljs": "^0.8.4",
 		"three": "^0.126.1",
 		"three-orbit-controls": "^82.1.0",