fix(app): fix jump to current step when outside current window (#11052)

run log jump to current step was not working when the viewport was outside of the current command
window. this reuses the component logic on mount to jump to the current command window.

closes #10898

Co-authored-by: Brian Cooper <[email protected]>

Author: brenthagen

app/src/organisms/Devices/ProtocolRun/RunLog.tsx

@@ -29,7 +29,7 @@ import {
   RUN_STATUS_STOPPED,
   RUN_STATUS_SUCCEEDED,
 } from '@opentrons/api-client'
-import { useAllCommandsQuery } from '@opentrons/react-api-client'
+import { useAllCommandsQuery, useRunQuery } from '@opentrons/react-api-client'
 
 import { NAV_BAR_WIDTH } from '../../../App/constants'
 import { PrimaryButton } from '../../../atoms/buttons'
@@ -48,12 +48,13 @@ import { StepItem } from './StepItem'
 import type { RunCommandSummary } from '@opentrons/api-client'
 import type { RunTimeCommand, CommandStatus } from '@opentrons/shared-data'
 
-const AVERAGE_ITEM_HEIGHT_PX = 52 // average px height of a command item
+const AVERAGE_ITEM_HEIGHT_PX = 56 // average px height of a command item
 const WINDOW_OVERLAP = 40 // number of command items that fall within two adjacent windows
 const NUM_EAGER_ITEMS = 5 // number of command items away from the end of the current window that will trigger a window transition if scrolled into view
 const COMMANDS_REFETCH_INTERVAL = 3000
 const AVERAGE_WINDOW_HEIGHT_PX =
   (RUN_LOG_WINDOW_SIZE - WINDOW_OVERLAP) * AVERAGE_ITEM_HEIGHT_PX
+const NON_COMMAND_BUFFER_PX = 118 // px height of a the area below and above the windowed command items, but within the scrolled div
 interface CommandRuntimeInfo {
   analysisCommand: RunTimeCommand | null // analysisCommand will only be null if protocol is nondeterministic
   runCommandSummary: RunCommandSummary | null
@@ -90,6 +91,8 @@ export function RunLog({ robotName, runId }: RunLogProps): JSX.Element | null {
     firstPostInitialPlayRunCommandIndex.current != null
       ? firstPostInitialPlayRunCommandIndex.current
       : 0
+  const isCurrentRun =
+    useRunQuery(runId, { staleTime: Infinity }).data?.data.current ?? false
   const { data: commandsData } = useAllCommandsQuery(
     runId,
     {
@@ -108,10 +111,9 @@ export function RunLog({ robotName, runId }: RunLogProps): JSX.Element | null {
     commandsData?.links?.current?.meta?.createdAt ?? null
   const runTotalCommandCount = commandsData?.meta?.totalLength
 
-  const [
-    isInitiallyJumpingToCurrent,
-    setIsInitiallyJumpingToCurrent,
-  ] = React.useState<boolean>(false)
+  const [isJumpingToCurrent, setIsJumpingToCurrent] = React.useState<boolean>(
+    false
+  )
 
   const analysisCommandsWithStatus =
     protocolData?.commands != null
@@ -181,7 +183,7 @@ export function RunLog({ robotName, runId }: RunLogProps): JSX.Element | null {
     windowFirstCommandIndex,
     windowFirstCommandIndex + RUN_LOG_WINDOW_SIZE
   )
-  const isFirstWindow = windowIndex === 0
+
   const isFinalWindow =
     currentCommandList.length <= windowFirstCommandIndex + RUN_LOG_WINDOW_SIZE
 
@@ -248,18 +250,23 @@ export function RunLog({ robotName, runId }: RunLogProps): JSX.Element | null {
       (RUN_LOG_WINDOW_SIZE - WINDOW_OVERLAP)
   )
 
-  // when we initially mount, if the current item is not in view, jump to it
-  React.useEffect(() => {
+  const jumpToCurrentCommandWindow = (): void => {
     if (
       indexOfFirstWindowContainingCurrentCommand !== windowIndex &&
       indexOfLastWindowContainingCurrentCommand !== windowIndex
     ) {
       const targetWindow = isCurrentCommandInFinalWindow
         ? indexOfFirstWindowContainingCurrentCommand
         : indexOfLastWindowContainingCurrentCommand
+
       setWindowIndex(Math.max(targetWindow, 0))
     }
-    setIsInitiallyJumpingToCurrent(true)
+    setIsJumpingToCurrent(true)
+  }
+
+  // when we initially mount, jump to current command window
+  React.useEffect(() => {
+    jumpToCurrentCommandWindow()
   }, [])
 
   const scrollToCurrentItem = (): void => {
@@ -269,14 +276,14 @@ export function RunLog({ robotName, runId }: RunLogProps): JSX.Element | null {
   // if jumping to current item and on correct window index, scroll to current item
   React.useEffect(() => {
     if (
-      isInitiallyJumpingToCurrent &&
+      isJumpingToCurrent &&
       (windowIndex === indexOfFirstWindowContainingCurrentCommand ||
         windowIndex === indexOfLastWindowContainingCurrentCommand)
     ) {
       scrollToCurrentItem()
-      setIsInitiallyJumpingToCurrent(false)
+      setIsJumpingToCurrent(false)
     }
-  }, [windowIndex, isInitiallyJumpingToCurrent])
+  }, [windowIndex, isJumpingToCurrent])
 
   if (protocolData == null || runStatus == null) return null
 
@@ -327,15 +334,17 @@ export function RunLog({ robotName, runId }: RunLogProps): JSX.Element | null {
     setShowDownloadRunLogToast(true)
   }
 
-  const isRunStarted = currentItemRef.current != null
-
-  // check if edges of current step are below or above window
   const isCurrentStepBelow =
-    currentItemRef.current?.getBoundingClientRect().top != null &&
-    currentItemRef.current?.getBoundingClientRect().top > window.innerHeight
+    (currentItemRef.current?.getBoundingClientRect().top != null &&
+      listInnerRef.current?.getBoundingClientRect().bottom != null &&
+      currentItemRef.current?.getBoundingClientRect().top >
+        listInnerRef.current?.getBoundingClientRect().bottom) ||
+    windowIndex < indexOfFirstWindowContainingCurrentCommand
   const isCurrentStepAbove =
-    currentItemRef.current?.getBoundingClientRect().bottom != null &&
-    currentItemRef.current?.getBoundingClientRect().bottom < 0
+    (currentItemRef.current?.getBoundingClientRect().bottom != null &&
+      currentItemRef.current?.getBoundingClientRect().bottom <
+        NON_COMMAND_BUFFER_PX) ||
+    windowIndex > indexOfLastWindowContainingCurrentCommand
 
   const jumpToCurrentStepButton = (
     <PrimaryButton
@@ -345,11 +354,11 @@ export function RunLog({ robotName, runId }: RunLogProps): JSX.Element | null {
       transform="translate(-50%)"
       borderRadius={SPACING.spacing6}
       display={
-        isRunStarted && (isCurrentStepBelow || isCurrentStepAbove)
+        isCurrentRun && (isCurrentStepBelow || isCurrentStepAbove)
           ? DISPLAY_FLEX
           : DISPLAY_NONE
       }
-      onClick={scrollToCurrentItem}
+      onClick={jumpToCurrentCommandWindow}
       id="RunLog_jumpToCurrentStep"
     >
       <Icon
@@ -377,43 +386,39 @@ export function RunLog({ robotName, runId }: RunLogProps): JSX.Element | null {
         />
       ) : null}
       {jumpToCurrentStepButton}
-      {isFirstWindow ? (
-        <>
-          <Flex
-            justifyContent={JUSTIFY_SPACE_BETWEEN}
-            alignItems={ALIGN_CENTER}
-            borderBottom={BORDERS.lineBorder}
-            padding={SPACING.spacing4}
+      <Flex
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        alignItems={ALIGN_CENTER}
+        borderBottom={BORDERS.lineBorder}
+        padding={SPACING.spacing4}
+      >
+        <Flex alignItems={ALIGN_CENTER}>
+          <StyledText
+            marginRight={SPACING.spacing3}
+            css={TYPOGRAPHY.h3SemiBold}
+            textTransform={TEXT_TRANSFORM_CAPITALIZE}
           >
-            <Flex alignItems={ALIGN_CENTER}>
-              <StyledText
-                marginRight={SPACING.spacing3}
-                css={TYPOGRAPHY.h3SemiBold}
-                textTransform={TEXT_TRANSFORM_CAPITALIZE}
-              >
-                {t('run_log')}
-              </StyledText>
-              <StyledText
-                as="label"
-                color={COLORS.darkGreyEnabled}
-                id="RunLog_totalStepCount"
-              >
-                {isDeterministic
-                  ? t('total_step_count', { count: currentCommandList.length })
-                  : t('unable_to_determine_steps')}
-              </StyledText>
-            </Flex>
-            <Btn
-              color={COLORS.darkGreyEnabled}
-              css={TYPOGRAPHY.labelSemiBold}
-              onClick={onClickDownloadRunLog}
-              id="RunLog_downloadRunLog"
-            >
-              {t('download_run_log')}
-            </Btn>
-          </Flex>
-        </>
-      ) : null}
+            {t('run_log')}
+          </StyledText>
+          <StyledText
+            as="label"
+            color={COLORS.darkGreyEnabled}
+            id="RunLog_totalStepCount"
+          >
+            {isDeterministic
+              ? t('total_step_count', { count: currentCommandList.length })
+              : t('unable_to_determine_steps')}
+          </StyledText>
+        </Flex>
+        <Btn
+          color={COLORS.darkGreyEnabled}
+          css={TYPOGRAPHY.labelSemiBold}
+          onClick={onClickDownloadRunLog}
+          id="RunLog_downloadRunLog"
+        >
+          {t('download_run_log')}
+        </Btn>
+      </Flex>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         padding={SPACING.spacing4}

app/src/organisms/Devices/ProtocolRun/__tests__/RunLog.test.tsx

@@ -4,7 +4,7 @@ import { UseQueryResult } from 'react-query'
 import { fireEvent } from '@testing-library/dom'
 
 import { renderWithProviders } from '@opentrons/components'
-import { useAllCommandsQuery } from '@opentrons/react-api-client'
+import { useAllCommandsQuery, useRunQuery } from '@opentrons/react-api-client'
 
 import { i18n } from '../../../../i18n'
 import fixtureAnalysis from '../../../../organisms/RunDetails/__fixtures__/analysis.json'
@@ -20,7 +20,7 @@ import { RunLogProtocolSetupInfo } from '../RunLogProtocolSetupInfo'
 import { StepItemComponent as StepItem } from '../StepItem'
 import { RunLog } from '../RunLog'
 
-import type { CommandsData } from '@opentrons/api-client'
+import type { CommandsData, Run } from '@opentrons/api-client'
 import type { ProtocolAnalysisFile } from '@opentrons/shared-data'
 import type { RunTimestamps } from '../../../../organisms/RunTimeControl/hooks'
 
@@ -38,6 +38,7 @@ const mockUseProtocolDetailsForRun = useProtocolDetailsForRun as jest.MockedFunc
 const mockUseAllCommandsQuery = useAllCommandsQuery as jest.MockedFunction<
   typeof useAllCommandsQuery
 >
+const mockUseRunQuery = useRunQuery as jest.MockedFunction<typeof useRunQuery>
 const mockUseRunStatus = useRunStatus as jest.MockedFunction<
   typeof useRunStatus
 >
@@ -73,6 +74,9 @@ describe('RunLog', () => {
       displayName: 'mock display name',
       protocolKey: 'fakeProtocolKey',
     })
+    when(mockUseRunQuery).mockReturnValue(({
+      data: { data: { current: true } },
+    } as unknown) as UseQueryResult<Run>)
     when(mockUseAllCommandsQuery).mockReturnValue(({
       data: { data: runRecord.data.commands, meta: { totalLength: 14 } },
     } as unknown) as UseQueryResult<CommandsData>)