fix(app): add virtualization to load a big protocol (#20532)

* fix(app): add virtualization to load a big protocol

Author: koji

app/package.json

@@ -58,6 +58,7 @@
     "react-select": "5.4.0",
     "react-simple-keyboard": "^3.7.0",
     "react-viewport-list": "6.3.0",
+    "react-window": "2.2.4",
     "redux": "5.0.1",
     "redux-observable": "1.1.0",
     "redux-thunk": "3.1.0",

app/src/organisms/Desktop/ProtocolDetails/AnnotatedSteps/AnnotatedGroup.tsx

@@ -41,19 +41,19 @@ export function AnnotatedGroup(props: AnnotatedGroupProps): JSX.Element {
     setIsExpanded(subCommands.some(command => command.isHighlighted))
   }, [subCommands])
 
+  const handleClick = (): void => {
+    setIsExpanded(!isExpanded)
+    handlePause?.()
+  }
+
   return (
     <div className={styles.annotated_group_container}>
-      <div
-        onClick={() => {
-          setIsExpanded(!isExpanded)
-          handlePause?.()
-        }}
-        className={styles.annotated_group_header}
-      >
+      <div onClick={handleClick} className={styles.annotated_group_header}>
         <StyledText desktopStyle="bodyDefaultRegular">
           {annotationType}
         </StyledText>
         <Icon
+          data-testid={isExpanded ? 'chevron-up' : 'chevron-down'}
           name={isExpanded ? 'chevron-up' : 'chevron-down'}
           size="2rem"
           color={COLORS.black90}

app/src/organisms/Desktop/ProtocolDetails/AnnotatedSteps/AnnotatedStepsRowItem.tsx

@@ -0,0 +1,74 @@
+import { COLORS, Icon, StyledText } from '@opentrons/components'
+
+import { AnnotatedGroup } from './AnnotatedGroup'
+import styles from './annotatedsteps.module.css'
+import { IndividualCommand } from './IndividualCommand'
+
+import type { RowComponentProps } from 'react-window'
+import type { ItemData } from './index'
+
+export function AnnotatedStepsRowItem(
+  props: RowComponentProps<ItemData>
+): JSX.Element {
+  const { index, style, ariaAttributes, ...data } = props
+  const row = data.rows[index]
+  return (
+    <div style={style} {...ariaAttributes}>
+      <div className={styles.annotated_steps_row}>
+        {row.type === 'group' ? (
+          <AnnotatedGroup
+            scrollTargetId={data.scrollTargetId}
+            analysis={data.analysis}
+            annotationType={row.annotationType}
+            subCommands={row.group.subCommands}
+            commandStartNumber={row.commandStartNumber}
+            allRunDefs={data.allRunDefs}
+            setSelectedCommand={data.setSelectedCommand}
+            handlePause={data.handlePause}
+          />
+        ) : row.type === 'command' ? (
+          <IndividualCommand
+            scrollTargetId={data.scrollTargetId}
+            fromGroup={row.fromGroup}
+            command={row.command}
+            isHighlighted={row.isHighlighted}
+            analysis={data.analysis}
+            allRunDefs={data.allRunDefs}
+            setSelectedCommand={data.setSelectedCommand}
+            commandNumber={row.commandNumber}
+          />
+        ) : (
+          <div className={styles.annotated_steps_error_wrapper}>
+            {row.errors.map(error => (
+              <div
+                className={styles.annotated_steps_error_container}
+                key={error.id}
+                onClick={() => {
+                  data.onShowErrorDetails()
+                }}
+              >
+                <div className={styles.annotated_steps_header}>
+                  <Icon name="ot-alert" size="1rem" color={COLORS.red60} />
+                  <StyledText
+                    desktopStyle="captionSemiBold"
+                    color={COLORS.red60}
+                  >
+                    {data.t('step_error')}
+                  </StyledText>
+                </div>
+                <StyledText desktopStyle="bodyDefaultRegular">
+                  {error.detail}
+                </StyledText>
+              </div>
+            ))}
+            <div className={styles.annotated_steps_final_command}>
+              <StyledText desktopStyle="bodyDefaultRegular">
+                {data.t('unable_to_show_steps_past_errors')}
+              </StyledText>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/src/organisms/Desktop/ProtocolDetails/AnnotatedSteps/annotatedsteps.module.css

@@ -75,19 +75,18 @@
 }
 
 .annotated_steps_container {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
+  width: 100%;
+  height: 100%;
 }
 
-.annotated_steps_container::-webkit-scrollbar {
-  display: none;
+.annotated_steps_list {
+  width: 100%;
+  height: 100%;
 }
 
-.annotated_steps_wrap {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
+.annotated_steps_row {
+  box-sizing: border-box;
+  padding-bottom: var(--spacing-4);
 }
 
 .annotated_steps_error_wrapper {