feat(webui): Reduce render churn

Author: PeterC89

packages/webui/src/client/ui/SegmentTimeline/Parts/SegmentTimelinePart.tsx

@@ -312,12 +312,251 @@ export class SegmentTimelinePartClass extends React.Component<Translated<WithTim
 		if (this.highlightTimeout) clearTimeout(this.highlightTimeout)
 	}
 
-	shouldComponentUpdate(nextProps: Readonly<WithTiming<IProps>>, nextState: Readonly<IState>): boolean {
-		if (!_.isMatch(this.props, nextProps) || !_.isMatch(this.state, nextState)) {
-			return true
-		} else {
+	private static getPlaylistRenderSelector(playlist: DBRundownPlaylist) {
+		const quickLoopStartId =
+			playlist.quickLoop?.start && 'id' in playlist.quickLoop.start ? playlist.quickLoop.start.id : undefined
+		const quickLoopEndId =
+			playlist.quickLoop?.end && 'id' in playlist.quickLoop.end ? playlist.quickLoop.end.id : undefined
+
+		return {
+			activationId: playlist.activationId,
+			currentPartInstanceId: playlist.currentPartInfo?.partInstanceId,
+			nextPartInstanceId: playlist.nextPartInfo?.partInstanceId,
+			previousPartInstanceId: playlist.previousPartInfo?.partInstanceId,
+			nextTimeOffset: playlist.nextTimeOffset,
+			quickLoopRunning: playlist.quickLoop?.running,
+			quickLoopStartType: playlist.quickLoop?.start?.type,
+			quickLoopStartId,
+			quickLoopEndType: playlist.quickLoop?.end?.type,
+			quickLoopEndId,
+		}
+	}
+
+	private static getPartRenderSelector(part: PartUi) {
+		return {
+			partId: part.partId,
+			startsAt: part.startsAt,
+			renderedDuration: part.renderedDuration,
+			willProbablyAutoNext: part.willProbablyAutoNext,
+			instanceId: part.instance._id,
+			instanceTimings: part.instance.timings,
+			instancePart: part.instance.part,
+			pieces: part.pieces,
+		}
+	}
+
+	private static getSegmentRenderSelector(segment: SegmentUi) {
+		return {
+			segmentId: segment._id,
+			outputLayers: segment.outputLayers,
+		}
+	}
+
+	private static getTimingRenderSelector(props: Readonly<WithTiming<IProps>>) {
+		const timingId = getPartInstanceTimingId(props.part.instance)
+		const firstPartTimingId = props.firstPartInSegment
+			? getPartInstanceTimingId(props.firstPartInSegment.instance)
+			: undefined
+		const lastPartTimingId = props.lastPartInSegment
+			? getPartInstanceTimingId(props.lastPartInSegment.instance)
+			: undefined
+
+		return {
+			partDuration: props.timingDurations.partDurations?.[timingId],
+			partDisplayStart: props.timingDurations.partDisplayStartsAt?.[timingId],
+			partDisplayDuration: props.timingDurations.partDisplayDurations?.[timingId],
+			partInQuickLoop: props.timingDurations.partsInQuickLoop?.[timingId],
+			firstPartDisplayStart: firstPartTimingId
+				? props.timingDurations.partDisplayStartsAt?.[firstPartTimingId]
+				: undefined,
+			firstPartDisplayDuration: firstPartTimingId
+				? props.timingDurations.partDisplayDurations?.[firstPartTimingId]
+				: undefined,
+			lastPartDisplayStart: lastPartTimingId
+				? props.timingDurations.partDisplayStartsAt?.[lastPartTimingId]
+				: undefined,
+			lastPartDisplayDuration: lastPartTimingId
+				? props.timingDurations.partDisplayDurations?.[lastPartTimingId]
+				: undefined,
+		}
+	}
+
+	private static hasImmediatePropChanges(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		return (
+			prevProps.timeToPixelRatio !== nextProps.timeToPixelRatio ||
+			prevProps.scrollLeft !== nextProps.scrollLeft ||
+			prevProps.scrollWidth !== nextProps.scrollWidth ||
+			prevProps.followLiveLine !== nextProps.followLiveLine ||
+			prevProps.autoNextPart !== nextProps.autoNextPart ||
+			prevProps.liveLineHistorySize !== nextProps.liveLineHistorySize ||
+			prevProps.livePosition !== nextProps.livePosition ||
+			prevProps.isCollapsed !== nextProps.isCollapsed ||
+			prevProps.isLastInSegment !== nextProps.isLastInSegment ||
+			prevProps.isAfterLastValidInSegmentAndItsLive !== nextProps.isAfterLastValidInSegmentAndItsLive ||
+			prevProps.isLastSegment !== nextProps.isLastSegment ||
+			prevProps.isBudgetGap !== nextProps.isBudgetGap ||
+			prevProps.isPreview !== nextProps.isPreview ||
+			prevProps.cropDuration !== nextProps.cropDuration ||
+			prevProps.className !== nextProps.className ||
+			prevProps.isLiveSegment !== nextProps.isLiveSegment ||
+			prevProps.anyPriorPartWasLive !== nextProps.anyPriorPartWasLive ||
+			prevProps.livePartStartsAt !== nextProps.livePartStartsAt ||
+			prevProps.livePartDisplayDuration !== nextProps.livePartDisplayDuration ||
+			prevProps.budgetDuration !== nextProps.budgetDuration ||
+			prevProps.t !== nextProps.t ||
+			prevProps.i18n?.language !== nextProps.i18n?.language ||
+			prevProps.onScroll !== nextProps.onScroll ||
+			prevProps.onFollowLiveLine !== nextProps.onFollowLiveLine ||
+			prevProps.onPieceClick !== nextProps.onPieceClick ||
+			prevProps.onPieceDoubleClick !== nextProps.onPieceDoubleClick ||
+			prevProps.onPartTooSmallChanged !== nextProps.onPartTooSmallChanged ||
+			prevProps.onContextMenu !== nextProps.onContextMenu
+		)
+	}
+
+	private static hasPlaylistRenderChanges(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		return !_.isEqual(
+			SegmentTimelinePartClass.getPlaylistRenderSelector(prevProps.playlist),
+			SegmentTimelinePartClass.getPlaylistRenderSelector(nextProps.playlist)
+		)
+	}
+
+	private static hasPartRenderChanges(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		return !_.isEqual(
+			SegmentTimelinePartClass.getPartRenderSelector(prevProps.part),
+			SegmentTimelinePartClass.getPartRenderSelector(nextProps.part)
+		)
+	}
+
+	private static hasSegmentRenderChanges(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		return !_.isEqual(
+			SegmentTimelinePartClass.getSegmentRenderSelector(prevProps.segment),
+			SegmentTimelinePartClass.getSegmentRenderSelector(nextProps.segment)
+		)
+	}
+
+	private static hasStudioRenderChanges(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		return (
+			prevProps.studio._id !== nextProps.studio._id ||
+			!_.isEqual(prevProps.studio.settings, nextProps.studio.settings)
+		)
+	}
+
+	private static hasCollapsedOutputChanges(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		return !_.isEqual(prevProps.collapsedOutputs, nextProps.collapsedOutputs)
+	}
+
+	private static hasBoundaryPartChanges(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		return (
+			prevProps.firstPartInSegment?.instance._id !== nextProps.firstPartInSegment?.instance._id ||
+			prevProps.lastPartInSegment?.instance._id !== nextProps.lastPartInSegment?.instance._id
+		)
+	}
+
+	private static hasDurationSourceLayerChanges(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		return !_.isEqual(prevProps.showDurationSourceLayers, nextProps.showDurationSourceLayers)
+	}
+
+	private static hasTimingRenderChanges(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		return !_.isEqual(
+			SegmentTimelinePartClass.getTimingRenderSelector(prevProps),
+			SegmentTimelinePartClass.getTimingRenderSelector(nextProps)
+		)
+	}
+
+	private static hasRelevantStateChanges(prevState: Readonly<IState>, nextState: Readonly<IState>): boolean {
+		return (
+			prevState.isLive !== nextState.isLive ||
+			prevState.isNext !== nextState.isNext ||
+			prevState.isDurationSettling !== nextState.isDurationSettling ||
+			prevState.durationSettlingStartsAt !== nextState.durationSettlingStartsAt ||
+			prevState.liveDuration !== nextState.liveDuration ||
+			prevState.isInQuickLoop !== nextState.isInQuickLoop ||
+			prevState.isInsideViewport !== nextState.isInsideViewport ||
+			prevState.isTooSmallForText !== nextState.isTooSmallForText ||
+			prevState.isTooSmallForDisplay !== nextState.isTooSmallForDisplay ||
+			prevState.highlight !== nextState.highlight ||
+			prevState.dropActive !== nextState.dropActive
+		)
+	}
+
+	private static arePropsEquivalent(
+		prevProps: Readonly<Translated<WithTiming<IProps>>>,
+		nextProps: Readonly<Translated<WithTiming<IProps>>>
+	): boolean {
+		if (prevProps === nextProps) return true
+
+		if (SegmentTimelinePartClass.hasImmediatePropChanges(prevProps, nextProps)) {
+			return false
+		}
+
+		if (SegmentTimelinePartClass.hasPlaylistRenderChanges(prevProps, nextProps)) {
+			return false
+		}
+
+		if (SegmentTimelinePartClass.hasPartRenderChanges(prevProps, nextProps)) {
+			return false
+		}
+
+		if (SegmentTimelinePartClass.hasSegmentRenderChanges(prevProps, nextProps)) {
 			return false
 		}
+
+		if (SegmentTimelinePartClass.hasStudioRenderChanges(prevProps, nextProps)) {
+			return false
+		}
+
+		if (SegmentTimelinePartClass.hasCollapsedOutputChanges(prevProps, nextProps)) {
+			return false
+		}
+
+		if (SegmentTimelinePartClass.hasBoundaryPartChanges(prevProps, nextProps)) {
+			return false
+		}
+
+		if (SegmentTimelinePartClass.hasDurationSourceLayerChanges(prevProps, nextProps)) {
+			return false
+		}
+
+		if (SegmentTimelinePartClass.hasTimingRenderChanges(prevProps, nextProps)) {
+			return false
+		}
+
+		return true
+	}
+
+	shouldComponentUpdate(nextProps: Readonly<Translated<WithTiming<IProps>>>, nextState: Readonly<IState>): boolean {
+		return (
+			!SegmentTimelinePartClass.arePropsEquivalent(this.props, nextProps) ||
+			SegmentTimelinePartClass.hasRelevantStateChanges(this.state, nextState)
+		)
 	}
 
 	componentDidUpdate(prevProps: Readonly<Translated<WithTiming<IProps>>>, prevState: IState, snapshot?: unknown): void {