fix(protocol-designer): retain timeline data when overwriting protocol via import (#17476)

closes AUTH-1429

Author: shlokamin

protocol-designer/src/configureStore.ts

@@ -89,8 +89,8 @@ export function configureStore(): StoreType {
     /* preloadedState, */
     composeEnhancers(
       applyMiddleware(
-        thunk,
         timelineMiddleware as Middleware<BaseState, Record<string, any>, any>,
+        thunk,
         trackEventMiddleware as Middleware<BaseState, Record<string, any>, any>
       )
     ) as StoreEnhancer<unknown, unknown>

protocol-designer/src/timelineMiddleware/makeTimelineMiddleware.ts

@@ -12,7 +12,7 @@ import {
 import { getLabwareNamesByModuleId } from '../ui/modules/selectors'
 import type { ComputeRobotStateTimelineSuccessAction } from '../file-data/actions'
 import type { Middleware } from 'redux'
-import type { BaseState } from '../types'
+import type { Action, BaseState } from '../types'
 import type { GenerateRobotStateTimelineArgs } from './generateRobotStateTimeline'
 import type { SubstepsArgsNoTimeline, WorkerResponse } from './types'
 
@@ -51,7 +51,10 @@ export const makeTimelineMiddleware: () => Middleware<BaseState, any> = () => {
   let prevSubstepsArgs: SubstepsArgsNoTimeline | null = null
   let prevSuccessAction: ComputeRobotStateTimelineSuccessAction | null = null
 
-  const timelineNeedsRecompute = (state: BaseState): boolean => {
+  const timelineNeedsRecompute = (
+    state: BaseState,
+    actionType: string
+  ): boolean => {
     const nextSelectorResults = getTimelineArgs(state)
 
     if (prevTimelineArgs === null) {
@@ -63,10 +66,13 @@ export const makeTimelineMiddleware: () => Middleware<BaseState, any> = () => {
     const needsRecompute = hasChanged(nextSelectorResults, prevTimelineArgs)
     // update memoized values
     prevTimelineArgs = nextSelectorResults
-    return needsRecompute
+    return needsRecompute || actionType === 'LOAD_FILE'
   }
 
-  const substepsNeedsRecompute = (state: BaseState): boolean => {
+  const substepsNeedsRecompute = (
+    state: BaseState,
+    actionType: string
+  ): boolean => {
     if (prevSubstepsArgs === null) {
       // initial call, must populate memoized value
       prevSubstepsArgs = getSubstepsArgs(state)
@@ -80,18 +86,20 @@ export const makeTimelineMiddleware: () => Middleware<BaseState, any> = () => {
     )
     prevSubstepsArgs = nextSubstepSelectorResults // update memoized value
 
-    return needsRecompute
+    return needsRecompute || actionType === 'LOAD_FILE'
   }
 
-  return ({ getState, dispatch }) => next => action => {
+  return ({ getState, dispatch }) => next => (action: Action) => {
     // call the next dispatch method in the middleware chain
     const returnValue = next(action)
     const nextState = getState()
     const shouldRecomputeTimeline = timelineNeedsRecompute(
-      nextState as BaseState
+      nextState as BaseState,
+      action.type
     )
     const shouldRecomputeSubsteps = substepsNeedsRecompute(
-      nextState as BaseState
+      nextState as BaseState,
+      action.type
     )
 
     // TODO: how to stop re-assigning this event handler every middleware call? We need