feat(protocol-designer): make timeline responsive #17109

koji · 2024-12-13T21:30:18Z

Overview

make timeline responsive

close AUTH-877

Test Plan and Hands on Testing

Changelog

add DraggableSidebar component to make the sidebar draggable/resizable
update AddStepButton to align with the design (remove + text and add + icon)

Review requests

Risk assessment

low

koji · 2024-12-13T21:37:48Z

protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx

+} from '@opentrons/components'
+import { TimelineToolbox } from './Timeline/TimelineToolbox'
+
+const INITIAL_SIDEBAR_WIDTH = 350


i'll get the right value from Mel next week

koji · 2024-12-13T21:38:04Z

protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx

@@ -56,6 +59,7 @@ export function ProtocolSteps(): JSX.Element {
  const [deckView, setDeckView] = useState<
    typeof leftString | typeof rightString
  >(leftString)
+  const [targetWidth, setTargetWidth] = useState<number>(350)


the initial value will be updated.

koji · 2024-12-13T21:44:20Z

fix check-js and lint-js errors
fix test errors
add test for DraggableSidebar

…trons/opentrons into feat_add-resizeable-sidebar

ncdiehl11 · 2024-12-17T15:19:09Z

Whoa, looks really slick. I do see some highlighting when dragging the timeline toolbox (see "Ending deck"). Not sure if this is blocking, though.

Screen.Recording.2024-12-17.at.10.18.12.AM.mov

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx

ncdiehl11 · 2024-12-17T15:21:38Z

I think the add step menu is being contained by the timeline toolbox container

protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx

ncdiehl11

Left some comments but generally looking good

ncdiehl11 · 2024-12-17T15:26:59Z

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx

  const addStep = (stepType: StepType): ReturnType<any> =>
    dispatch(stepsActions.addAndSelectStep({ stepType }))

-  const items = getSupportedSteps()
-    .filter(stepType => isStepTypeEnabled[stepType])
+  const items = getSupportedSteps(enableComment)


maybe

Suggested change

const items = getSupportedSteps(enableComment)

getSupportedSteps(enableComment).

reduce<JSX.Element[]>((acc, stepType) => {

return getIsStepTypeEnabled(enableComment, modules)[stepType]

? [...acc, <AddOverflowButton ... />]

: acc

}, [])

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx

ncdiehl11 · 2024-12-17T15:28:00Z

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx

+  white-space: ${NO_WRAP};
+  bottom: 4.2rem;
+  border-radius: ${BORDERS.borderRadius8};
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);


Do we have a constant for this?

you mean box-shadow or the entire style?
i think we don't have the constant for this part.

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx

protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx

koji · 2024-12-18T21:42:18Z

I think the add step menu is being contained by the timeline toolbox container

@ncdiehl11 thank you for catching this.
finally, I could figure out what the issue is.

ncdiehl11 · 2024-12-20T19:57:00Z

Do we want to break "Timeline"?

ncdiehl11

left one comment but looks good 💪

koji · 2024-12-20T19:59:00Z

Do we want to break "Timeline"?

yeah, that is Mel's current design.
https://www.figma.com/design/WbkiUyU8VhtKz0JSuIFA45/Feature%3A-Protocol-Designer-Phase-1?node-id=10928-294030&m=dev

koji added 8 commits December 6, 2024 16:17

add draggable sidebar component for timeline

a3a0bae

Merge branch 'edge' into feat_add-resizeable-sidebar

31e12fd

update add step button

6f81ca4

Merge branch 'edge' into feat_add-resizeable-sidebar

f7d013a

modify icon position with sidebarWidth

041bda1

fix hotkey info position issue

7e7127e

fix empty spacing issue

37a66db

restore flex to keep the fixed two col

892b2cc

koji commented Dec 13, 2024

View reviewed changes

Merge branch 'edge' into feat_add-resizeable-sidebar

1856da6

koji added 3 commits December 13, 2024 17:11

fix check-js errors

d79b7ee

modify a component name

9b88d76

fix test error

8c96b57

koji requested review from ncdiehl11 and jerader December 13, 2024 22:44

add test

e5dcda6

koji added the authorship label Dec 14, 2024

koji added 2 commits December 13, 2024 22:33

fix check-js errors

5daede5

added a base test

996fde6

koji marked this pull request as ready for review December 14, 2024 04:56

koji requested a review from a team as a code owner December 14, 2024 04:56

koji removed the request for review from a team December 14, 2024 04:56

koji and others added 3 commits December 14, 2024 00:23

fix format errors

7b99baf

clean up draggable sidebar a little bit

ea625d2

Merge branch 'feat_add-resizeable-sidebar' of https://github.com/Open…

ad6b69e

…trons/opentrons into feat_add-resizeable-sidebar

jerader reviewed Dec 17, 2024

View reviewed changes

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx Show resolved Hide resolved

jerader reviewed Dec 17, 2024

View reviewed changes

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx Show resolved Hide resolved

jerader reviewed Dec 17, 2024

View reviewed changes

protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx Outdated Show resolved Hide resolved

ncdiehl11 requested changes Dec 17, 2024

View reviewed changes

koji added 4 commits December 18, 2024 10:47

address feedback

3671140

fix check-js errors

0cf372b

Merge branch 'edge' into feat_add-resizeable-sidebar

e2711d9

fix check-js error

eca5df7

resolve the pointed-out UI issues

25bc420

koji requested review from ncdiehl11 and jerader December 19, 2024 04:32

koji added 5 commits December 20, 2024 10:44

Merge branch 'edge' into feat_add-resizeable-sidebar

7d2fbed

remove unused lines

22538f2

fix lint errors

8237107

fix check-js errors

bcaf94b

modify styles a little bit

f6525ac

ncdiehl11 reviewed Dec 20, 2024

View reviewed changes

ncdiehl11 approved these changes Dec 20, 2024

View reviewed changes

koji merged commit 35422b6 into edge Dec 20, 2024
14 checks passed

koji deleted the feat_add-resizeable-sidebar branch December 20, 2024 20:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(protocol-designer): make timeline responsive #17109

feat(protocol-designer): make timeline responsive #17109

koji commented Dec 13, 2024 •

edited

Loading

koji Dec 13, 2024

koji Dec 13, 2024

koji commented Dec 13, 2024 •

edited

Loading

ncdiehl11 commented Dec 17, 2024

ncdiehl11 commented Dec 17, 2024

ncdiehl11 left a comment

ncdiehl11 Dec 17, 2024

ncdiehl11 Dec 17, 2024

koji Dec 18, 2024

koji commented Dec 18, 2024

ncdiehl11 commented Dec 20, 2024

ncdiehl11 left a comment

koji commented Dec 20, 2024

-  const items = getSupportedSteps(enableComment)
+  getSupportedSteps(enableComment).
+    reduce<JSX.Element[]>((acc, stepType) => {
+      return getIsStepTypeEnabled(enableComment, modules)[stepType]
+        ? [...acc, <AddOverflowButton ... />]
+        : acc
+    }, [])

feat(protocol-designer): make timeline responsive #17109

feat(protocol-designer): make timeline responsive #17109

Conversation

koji commented Dec 13, 2024 • edited Loading

Overview

Test Plan and Hands on Testing

Changelog

Review requests

Risk assessment

koji Dec 13, 2024

Choose a reason for hiding this comment

koji Dec 13, 2024

Choose a reason for hiding this comment

koji commented Dec 13, 2024 • edited Loading

ncdiehl11 commented Dec 17, 2024

ncdiehl11 commented Dec 17, 2024

ncdiehl11 left a comment

Choose a reason for hiding this comment

ncdiehl11 Dec 17, 2024

Choose a reason for hiding this comment

ncdiehl11 Dec 17, 2024

Choose a reason for hiding this comment

koji Dec 18, 2024

Choose a reason for hiding this comment

koji commented Dec 18, 2024

ncdiehl11 commented Dec 20, 2024

ncdiehl11 left a comment

Choose a reason for hiding this comment

koji commented Dec 20, 2024

koji commented Dec 13, 2024 •

edited

Loading

koji commented Dec 13, 2024 •

edited

Loading