Fix box visibility changed

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) {

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() {