CR Updates

Author: igoroctaviano

src/components/MemoryFooter.tsx

@@ -21,6 +21,7 @@ class MemoryFooter extends React.Component<MemoryFooterProps, MemoryFooterState>
   private lastWarningLevel: 'none' | 'high' | 'critical' = 'none'
   private lastCriticalWarningTime: number = 0
   private readonly criticalWarningThrottleMs: number = 30000
+  private didStartMonitoring: boolean = false
 
   constructor (props: MemoryFooterProps) {
     super(props)
@@ -64,13 +65,17 @@ class MemoryFooter extends React.Component<MemoryFooterProps, MemoryFooterState>
     })
 
     memoryMonitor.startMonitoring()
+    this.didStartMonitoring = true
   }
 
   componentWillUnmount (): void {
     if (this.unsubscribeMemory != null) {
       this.unsubscribeMemory()
     }
-    memoryMonitor.stopMonitoring()
+    if (this.didStartMonitoring) {
+      memoryMonitor.stopMonitoring()
+      this.didStartMonitoring = false
+    }
   }
 
   render (): React.ReactNode {

src/components/SlideViewer.tsx

@@ -298,71 +298,6 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
     return palette
   }
 
-  shouldComponentUpdate (
-    nextProps: SlideViewerProps,
-    nextState: SlideViewerState
-  ): boolean {
-    // Only re-render if relevant props or state changed
-    // Skip re-render for frequent state updates that don't affect UI
-    if (
-      this.props.location.pathname !== nextProps.location.pathname ||
-      this.props.studyInstanceUID !== nextProps.studyInstanceUID ||
-      this.props.seriesInstanceUID !== nextProps.seriesInstanceUID ||
-      this.props.slide !== nextProps.slide ||
-      this.props.clients !== nextProps.clients ||
-      this.state.isLoading !== nextState.isLoading ||
-      this.state.isAnnotationModalVisible !== nextState.isAnnotationModalVisible ||
-      this.state.isSelectedRoiModalVisible !== nextState.isSelectedRoiModalVisible ||
-      this.state.isReportModalVisible !== nextState.isReportModalVisible ||
-      this.state.isGoToModalVisible !== nextState.isGoToModalVisible ||
-      this.state.isHoveredRoiTooltipVisible !== nextState.isHoveredRoiTooltipVisible ||
-      this.state.hoveredRoiAttributes !== nextState.hoveredRoiAttributes ||
-      this.state.visibleRoiUIDs !== nextState.visibleRoiUIDs ||
-      this.state.visibleSegmentUIDs !== nextState.visibleSegmentUIDs ||
-      this.state.visibleMappingUIDs !== nextState.visibleMappingUIDs ||
-      this.state.visibleAnnotationGroupUIDs !== nextState.visibleAnnotationGroupUIDs ||
-      this.state.selectedRoiUIDs !== nextState.selectedRoiUIDs ||
-      this.state.selectedEvaluations !== nextState.selectedEvaluations ||
-      this.state.selectedRoi !== nextState.selectedRoi ||
-      this.state.selectedFinding !== nextState.selectedFinding ||
-      this.state.selectedGeometryType !== nextState.selectedGeometryType ||
-      this.state.selectedMarkup !== nextState.selectedMarkup ||
-      this.state.selectedPresentationStateUID !== nextState.selectedPresentationStateUID ||
-      this.state.areRoisHidden !== nextState.areRoisHidden ||
-      this.state.isICCProfilesEnabled !== nextState.isICCProfilesEnabled ||
-      this.state.isSegmentationInterpolationEnabled !== nextState.isSegmentationInterpolationEnabled ||
-      this.state.isParametricMapInterpolationEnabled !== nextState.isParametricMapInterpolationEnabled ||
-      this.state.isClusteringEnabled !== nextState.isClusteringEnabled ||
-      this.state.clusteringPixelSizeThreshold !== nextState.clusteringPixelSizeThreshold ||
-      this.state.isRoiDrawingActive !== nextState.isRoiDrawingActive ||
-      this.state.isRoiModificationActive !== nextState.isRoiModificationActive ||
-      this.state.isRoiTranslationActive !== nextState.isRoiTranslationActive ||
-      this.state.hoveredRoiTooltipX !== nextState.hoveredRoiTooltipX ||
-      this.state.hoveredRoiTooltipY !== nextState.hoveredRoiTooltipY ||
-      this.state.selectedXCoordinate !== nextState.selectedXCoordinate ||
-      this.state.selectedYCoordinate !== nextState.selectedYCoordinate ||
-      this.state.selectedMagnification !== nextState.selectedMagnification ||
-      this.state.isSelectedXCoordinateValid !== nextState.isSelectedXCoordinateValid ||
-      this.state.isSelectedYCoordinateValid !== nextState.isSelectedYCoordinateValid ||
-      this.state.isSelectedMagnificationValid !== nextState.isSelectedMagnificationValid ||
-      this.state.validXCoordinateRange !== nextState.validXCoordinateRange ||
-      this.state.validYCoordinateRange !== nextState.validYCoordinateRange ||
-      this.state.presentationStates !== nextState.presentationStates ||
-      this.state.visibleOpticalPathIdentifiers !== nextState.visibleOpticalPathIdentifiers ||
-      this.state.activeOpticalPathIdentifiers !== nextState.activeOpticalPathIdentifiers ||
-      this.state.selectedSeriesInstanceUID !== nextState.selectedSeriesInstanceUID ||
-      this.state.selectedSegmentationSeriesInstanceUID !== nextState.selectedSegmentationSeriesInstanceUID ||
-      this.state.customizedSegmentColors !== nextState.customizedSegmentColors ||
-      this.state.generatedReport !== nextState.generatedReport
-    ) {
-      return true
-    }
-
-    // Don't re-render for loadingFrames changes (too frequent)
-    // Don't re-render for pixelDataStatistics changes (computed, not directly displayed)
-    return false
-  }
-
   componentDidUpdate (
     previousProps: SlideViewerProps,
     previousState: SlideViewerState

src/services/MemoryMonitor.ts

@@ -84,8 +84,9 @@ type MemoryUpdateCallback = (memory: MemoryInfo) => void
  */
 class MemoryMonitor {
   private readonly updateCallbacks: Set<MemoryUpdateCallback> = new Set()
-  private monitoringInterval: ReturnType<typeof setInterval> | null = null
-  private readonly updateInterval: number = 5000 // 5 seconds
+  private monitoringTimeoutId: ReturnType<typeof setTimeout> | null = null
+  private monitoringActive: boolean = false
+  private readonly updateInterval: number = 5000
   private lastMeasurement: MemoryInfo | null = null
   private readonly highUsageThreshold = 0.80 // 80%
   private readonly criticalUsageThreshold = 0.90 // 90%
@@ -270,39 +271,52 @@ class MemoryMonitor {
   }
 
   /**
-   * Start periodic memory monitoring
+   * Start periodic memory monitoring. Serializes runs so the next tick is scheduled
+   * only after the current measure() finishes, avoiding overlapping executions.
    */
   startMonitoring (interval: number = this.updateInterval): void {
-    if (this.monitoringInterval !== null) {
+    if (this.monitoringTimeoutId != null) {
       this.stopMonitoring()
     }
+    this.monitoringActive = true
+
+    const scheduleNext = (): void => {
+      if (!this.monitoringActive) return
+      this.monitoringTimeoutId = setTimeout(() => {
+        this.monitoringTimeoutId = null
+        this.measure()
+          .then(() => { scheduleNext() })
+          .catch(error => {
+            console.error('Error in periodic memory measurement:', error)
+            scheduleNext()
+          })
+      }, interval)
+    }
 
-    this.measure().catch(error => {
-      console.error('Error in initial memory measurement:', error)
-    })
-
-    this.monitoringInterval = setInterval(() => {
-      this.measure().catch(error => {
-        console.error('Error in periodic memory measurement:', error)
+    this.measure()
+      .then(() => { scheduleNext() })
+      .catch(error => {
+        console.error('Error in initial memory measurement:', error)
+        scheduleNext()
       })
-    }, interval)
   }
 
   /**
    * Stop periodic memory monitoring
    */
   stopMonitoring (): void {
-    if (this.monitoringInterval !== null) {
-      clearInterval(this.monitoringInterval)
-      this.monitoringInterval = null
+    this.monitoringActive = false
+    if (this.monitoringTimeoutId != null) {
+      clearTimeout(this.monitoringTimeoutId)
+      this.monitoringTimeoutId = null
     }
   }
 
   /**
    * Check if monitoring is active
    */
   isMonitoring (): boolean {
-    return this.monitoringInterval !== null
+    return this.monitoringActive
   }
 
   /**