diff --git a/src/app/Marine2/components/views/RootView.tsx b/src/app/Marine2/components/views/RootView.tsx index b6373d38..4dd7e333 100644 --- a/src/app/Marine2/components/views/RootView.tsx +++ b/src/app/Marine2/components/views/RootView.tsx @@ -33,7 +33,7 @@ const RootView = () => { setBoxes(visibleBoxes) setInitialBoxes(hiddenBoxes) - }, [visibleWidgetsStore.visibleElements, visibleWidgetsStore.visibleElements.size]) + }, [visibleWidgetsStore.visibleElements]) const getBoxByType = (type: BOX_TYPES) => { switch (type) { diff --git a/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.store.ts b/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.store.ts index e10523a6..256cdbb4 100644 --- a/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.store.ts +++ b/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.store.ts @@ -16,15 +16,25 @@ export class VisibleWidgets { } notifyVisibility(element: notifyParams) { - if (element.visible) { + let isDirty = false + if (element.visible && !this.visibleElements.has(element.widgetName)) { this.visibleElements.add(element.widgetName) - } else { + isDirty = true + } else if (this.visibleElements.has(element.widgetName)) { this.visibleElements.delete(element.widgetName) + isDirty = true + } + + // React compares complex types like Set or Array by reference + // when computing dependency changes. + // Duplicate the Set when its elements change to indicate we should re-render. + if (isDirty) { + this.visibleElements = new Set(this.visibleElements) } } get noVisibleElements() { - return !this.visibleElements.size + return this.visibleElements.size === 0 } clearVisibleElements() {