Repository: storybookjs/storybook
File: code/core/src/component-testing/components/Panel.tsx (TypeScript)

Code before:
        [EVENTS.SYNC]: (payload) => {
          log.current = [getInternalRenderLogItem(CallStates.DONE), ...payload.logItems];
          set((state) =>
            getPanelState(
              { ...state, controlStates: payload.controlStates, pausedAt: payload.pausedAt },
              { log: log.current, calls: calls.current, collapsed, setCollapsed }
            )
          );
        },
        [STORY_RENDER_PHASE_CHANGED]: (event) => {
          if (
            lastStoryId.current === event.storyId &&
            ['preparing', 'loading'].includes(event.newPhase)
          ) {
            // A rerender cycle may not actually make it to the rendering phase.
            // We don't want to update any state until it does.
            return;
          }

          // Update lastRenderId. When we switch stories, this value might decrease if our
          // users have mocked Date.now() via addons or manually in their code, so we must
          // reset lastRenderId.
          if (lastStoryId.current === event.storyId) {
            lastRenderId.current = Math.max(lastRenderId.current, event.renderId || 0);
          } else {
            lastRenderId.current = event.renderId || 0;
          }

          lastStoryId.current = event.storyId;
          if (lastRenderId.current !== event.renderId) {
            return;
          }

          if (event.newPhase === 'rendering') {
            log.current = [getInternalRenderLogItem(CallStates.ACTIVE)];
            calls.current.set(INTERNAL_RENDER_CALL_ID, getInternalRenderCall(storyId));
            set({
              status: 'rendering',
              controlStates: INITIAL_CONTROL_STATES,
              pausedAt: undefined,
              interactions: [],
              interactionsCount: 0,
              hasException: false,
              caughtException: undefined,
              unhandledErrors: undefined,
            });
          } else {
            set((state) => {
              const status =
                event.newPhase in playStatusMap && !terminalStatuses.includes(state.status)
                  ? playStatusMap[event.newPhase as keyof typeof playStatusMap]

Review comment (suggestion):
Just wondering whether this should always be `0` rather than `event.renderId`, or would that break things? Not sure.

Code after:
        [EVENTS.SYNC]: (payload) => {
          log.current = [getInternalRenderLogItem(CallStates.DONE), ...payload.logItems];
          set((state) =>
            getPanelState(
              { ...state, controlStates: payload.controlStates, pausedAt: payload.pausedAt },
              { log: log.current, calls: calls.current, collapsed, setCollapsed }
            )
          );
        },
        [STORY_RENDER_PHASE_CHANGED]: (event) => {
          if (
            lastStoryId.current === event.storyId &&
            ['preparing', 'loading'].includes(event.newPhase)
          ) {
            // A rerender cycle may not actually make it to the rendering phase.
            // We don't want to update any state until it does.
            return;
          }

          // Update lastRenderId and lastStoryId. When we switch stories, lastRenderId's
          // value might decrease if our users have mocked Date.now() via addons or
          // manually in their code, so we must reset it.
          if (lastStoryId.current === event.storyId) {
            latestRenderId.current = Math.max(latestRenderId.current, event.renderId || 0);
          } else {
            latestRenderId.current = event.renderId || 0;
            lastStoryId.current = event.storyId;
          }

          // Bail out if concurrent renders are ongoing for the same story (only keep the latest one).
          if (latestRenderId.current !== event.renderId) {
            return;
          }

          if (event.newPhase === 'rendering') {
            log.current = [getInternalRenderLogItem(CallStates.ACTIVE)];
            calls.current.set(INTERNAL_RENDER_CALL_ID, getInternalRenderCall(storyId));
            set({
              status: 'rendering',
              controlStates: INITIAL_CONTROL_STATES,
              pausedAt: undefined,
              interactions: [],
              interactionsCount: 0,
              hasException: false,
              caughtException: undefined,
              unhandledErrors: undefined,
            });
          } else {
            set((state) => {
              const status =
                event.newPhase in playStatusMap && !terminalStatuses.includes(state.status)