fix(app): alignment and time formatting in thermocycler card (#5320)

Opentrons · Mar 30, 2020 · 3c7fcc8 · 3c7fcc8
1 parent 63808c2
commit 3c7fcc8
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 27 deletions.
diff --git 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)}
   >
     <p className={styles.time_remaining_label}>Time remaining for step:</p>
-    <p>
-      {// convert duration to seconds from epoch (midnight), then format
-      format(addSeconds(0, holdTime ?? 0), 'HH:mm:ss')}
-    </p>
+    <p>{formatSeconds(holdTime ?? 0)}</p>
   </span>
 )
 
@@ -53,19 +50,31 @@ const CycleInfo = ({
     return null
   }
   return (
-    <div className={styles.card_row}>
-      <LabeledValue
-        label="Cycle #"
-        className={styles.compact_labeled_value}
-        value={`${currentCycleIndex} / ${totalCycleCount}`}
-      />
-      <LabeledValue
-        label="Step #"
-        className={styles.compact_labeled_value}
-        value={`${currentStepIndex} / ${totalStepCount}`}
-      />
-      <TimeRemaining holdTime={holdTime} title="Time remaining for step:" />
-    </div>
+    <>
+      <div className={styles.card_row}>
+        <div className={styles.cycle_info_wrapper}>
+          <div className={styles.cycle_info_counts}>
+            <LabeledValue
+              label="Cycle #"
+              className={cx(
+                styles.compact_labeled_value,
+                styles.cycle_data_item
+              )}
+              value={`${currentCycleIndex} / ${totalCycleCount}`}
+            />
+            <LabeledValue
+              label="Step #"
+              className={cx(
+                styles.compact_labeled_value,
+                styles.cycle_data_item
+              )}
+              value={`${currentStepIndex} / ${totalStepCount}`}
+            />
+          </div>
+          <TimeRemaining holdTime={holdTime} title="Time remaining for step:" />
+        </div>
+      </div>
+    </>
   )
 }
 

diff --git 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;
+}
diff --git a/app/src/robot/selectors.js b/app/src/robot/selectors.js
@@ -212,16 +212,18 @@ export const getRunSeconds = createSelector(
   }
 )
 
+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) {