From 91c19b1b32334bbd8254bd3d8319e284cf41bfe4 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Mon, 30 Mar 2020 14:56:38 -0400 Subject: [PATCH 1/4] fix(app): alignment in thermocycler card cycle info --- .../ModuleLiveStatusCards/ThermocyclerCard.js | 56 +++++++++++-------- .../ModuleLiveStatusCards/styles.css | 12 ++++ 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js b/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js index d4c24453252..8f5917ccec7 100644 --- a/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js +++ b/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js @@ -53,19 +53,31 @@ const CycleInfo = ({ return null } return ( -
- - - -
+ <> +
+
+
+ + +
+ +
+
+ ) } @@ -133,20 +145,20 @@ export const ThermocyclerCard = ({ target={lidTarget} /> - {executingProfile && ( + {/* {executingProfile && ( */} - )} - {holdTime != null && holdTime > 0 && !executingProfile && ( + {/* )} */} + {/* {holdTime != null && holdTime > 0 && !executingProfile && ( */}
- )} + {/* )} */} ) } diff --git a/app/src/components/ModuleLiveStatusCards/styles.css b/app/src/components/ModuleLiveStatusCards/styles.css index 095c9bdd975..8d989a5e8b3 100644 --- a/app/src/components/ModuleLiveStatusCards/styles.css +++ b/app/src/components/ModuleLiveStatusCards/styles.css @@ -46,6 +46,7 @@ updated component library cards after redesign/refactor max-width: 7rem; } +.cycle_data_item, .temp_data_item { flex: 1 1 0; } @@ -72,3 +73,14 @@ updated component library cards after redesign/refactor .status_item_wrapper { flex: 1 1 0; } + +.cycle_info_wrapper { + display: flex; + flex-direction: column; + align-items: stretch; +} + +.cycle_info_counts { + display: flex; + flex-direction: row; +} \ No newline at end of file From aabc77a9cd3bf50bf207c5f478ab3a44991fa079 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Mon, 30 Mar 2020 16:05:08 -0400 Subject: [PATCH 2/4] format time using existing helper --- .../ModuleLiveStatusCards/ThermocyclerCard.js | 31 +++++++++---------- app/src/robot/selectors.js | 17 +++++----- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js b/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js index 8f5917ccec7..1389ef8449a 100644 --- a/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js +++ b/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js @@ -1,17 +1,17 @@ // @flow import * as React from 'react' -import { addSeconds, format } from 'date-fns' import cx from 'classnames' import { LabeledValue } from '@opentrons/components' import { getModuleDisplayName } from '@opentrons/shared-data' +import type { ThermocyclerModule, ModuleCommand } from '../../modules/types' +import { formatSeconds } from '../../robot/selectors' // TODO: move helper from robot selector to helper file import { TemperatureControl, TemperatureData } from '../ModuleControls' + import { StatusCard } from './StatusCard' import { StatusItem } from './StatusItem' import styles from './styles.css' -import type { ThermocyclerModule, ModuleCommand } from '../../modules/types' - const TimeRemaining = ({ holdTime, title, @@ -23,10 +23,7 @@ const TimeRemaining = ({ className={cx(styles.inline_labeled_value, styles.time_remaining_wrapper)} >

Time remaining for step:

-

- {// convert duration to seconds from epoch (midnight), then format - format(addSeconds(0, holdTime ?? 0), 'HH:mm:ss')} -

+

{formatSeconds(holdTime ?? 0)}

) @@ -146,18 +143,18 @@ export const ThermocyclerCard = ({ /> {/* {executingProfile && ( */} - + {/* )} */} {/* {holdTime != null && holdTime > 0 && !executingProfile && ( */} -
- -
+
+ +
{/* )} */} ) diff --git a/app/src/robot/selectors.js b/app/src/robot/selectors.js index 786d8601f38..9202b0fedbb 100644 --- a/app/src/robot/selectors.js +++ b/app/src/robot/selectors.js @@ -212,16 +212,19 @@ export const getRunSeconds = createSelector( } ) +// $FlowFixMe: (mc, 2019-04-17): untyped RPC state selector +export function formatSeconds(runSeconds: number): string { + const hours = padStart(`${Math.floor(runSeconds / 3600)}`, 2, '0') + const minutes = padStart(`${Math.floor(runSeconds / 60) % 60}`, 2, '0') + const seconds = padStart(`${runSeconds % 60}`, 2, '0') + + return `${hours}:${minutes}:${seconds}` +} + // $FlowFixMe: (mc, 2019-04-17): untyped RPC state selector export const getRunTime = createSelector( getRunSeconds, - (runSeconds): string => { - const hours = padStart(`${Math.floor(runSeconds / 3600)}`, 2, '0') - const minutes = padStart(`${Math.floor(runSeconds / 60) % 60}`, 2, '0') - const seconds = padStart(`${runSeconds % 60}`, 2, '0') - - return `${hours}:${minutes}:${seconds}` - } + formatSeconds ) export function getCalibrationRequest(state: State) { From 681dce88df51c26291186347a2b14d1a3f19a5ae Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Mon, 30 Mar 2020 16:13:25 -0400 Subject: [PATCH 3/4] uncomment from debugging --- .../ModuleLiveStatusCards/ThermocyclerCard.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js b/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js index 1389ef8449a..7fa8a0d8553 100644 --- a/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js +++ b/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js @@ -142,20 +142,20 @@ export const ThermocyclerCard = ({ target={lidTarget} /> - {/* {executingProfile && ( */} - - {/* )} */} - {/* {holdTime != null && holdTime > 0 && !executingProfile && ( */} -
- -
- {/* )} */} + {executingProfile && ( + + )} + {holdTime != null && holdTime > 0 && !executingProfile && ( +
+ +
+ )} ) } From 70f2cc57cd47f68d12b8c0a9937d19b9c55323a0 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Mon, 30 Mar 2020 16:27:07 -0400 Subject: [PATCH 4/4] remove stubs and unnecessary flow fixme --- .../ModuleLiveStatusCards/ThermocyclerCard.js | 10 +++++----- app/src/robot/selectors.js | 1 - 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js b/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js index 7fa8a0d8553..da5270000dc 100644 --- a/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js +++ b/app/src/components/ModuleLiveStatusCards/ThermocyclerCard.js @@ -144,11 +144,11 @@ export const ThermocyclerCard = ({ {executingProfile && ( )} {holdTime != null && holdTime > 0 && !executingProfile && ( diff --git a/app/src/robot/selectors.js b/app/src/robot/selectors.js index 9202b0fedbb..36bcf6dcb94 100644 --- a/app/src/robot/selectors.js +++ b/app/src/robot/selectors.js @@ -212,7 +212,6 @@ export const getRunSeconds = createSelector( } ) -// $FlowFixMe: (mc, 2019-04-17): untyped RPC state selector export function formatSeconds(runSeconds: number): string { const hours = padStart(`${Math.floor(runSeconds / 3600)}`, 2, '0') const minutes = padStart(`${Math.floor(runSeconds / 60) % 60}`, 2, '0')