fix(shared-data, app): fix runtime parameters range display

app/src/pages/ProtocolDetails/Parameters.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import {
   formatRunTimeParameterDefaultValue,
   formatRunTimeParameterMinMax,
+  orderRuntimeParameterRangeOptions,
 } from '@opentrons/shared-data'
 import {
   BORDERS,
@@ -62,13 +63,13 @@ export const Parameters = (props: { protocolId: string }): JSX.Element => {
     makeSnackbar(t('start_setup_customize_values'))
   }
 
-  const getRange = (parameter: RunTimeParameter): string => {
+  const formatRange = (parameter: RunTimeParameter): string => {
     const { type } = parameter
     const numChoices = 'choices' in parameter ? parameter.choices.length : 0
     const minMax = formatRunTimeParameterMinMax(parameter)
     let range: string | null = null
     if (numChoices === 2 && 'choices' in parameter) {
-      range = `${parameter.choices[0].displayName}, ${parameter.choices[1].displayName}`
+      range = orderRuntimeParameterRangeOptions(parameter.choices)
     }
 
     switch (type) {
@@ -125,7 +126,7 @@ export const Parameters = (props: { protocolId: string }): JSX.Element => {
               </TableDatum>
               <TableDatum>
                 <Flex paddingLeft={SPACING.spacing24} color={COLORS.grey60}>
-                  {getRange(parameter)}
+                  {formatRange(parameter)}
                 </Flex>
               </TableDatum>
             </TableRow>

components/src/molecules/ParametersTable/index.tsx

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components'
 import {
   formatRunTimeParameterDefaultValue,
   formatRunTimeParameterMinMax,
+  orderRuntimeParameterRangeOptions,
 } from '@opentrons/shared-data'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants/index'
@@ -38,7 +39,7 @@ export function ParametersTable({
         ? t != null
           ? t('num_options', { num: count })
           : `${count} options`
-        : choices.map(choice => choice.displayName).join(', ')
+        : orderRuntimeParameterRangeOptions(choices)
     }
 
     switch (type) {

shared-data/js/helpers/__tests__/orderRuntimeParameterRangeOptions.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+
+import {
+  isNumeric,
+  orderRuntimeParameterRangeOptions,
+} from '../orderRuntimeParameterRangeOptions'
+
+import type { Choice } from '../../types'
+
+describe('isNumeric', () => {
+  it('should return true when input is "2"', () => {
+    const result = isNumeric('2')
+    expect(result).toBeTruthy()
+  })
+
+  it('should return false when input is "opentrons"', () => {
+    const result = isNumeric('opentrons')
+    expect(result).toBeFalsy()
+  })
+})
+
+describe('orderRuntimeParameterRangeOptions', () => {
+  it('should return numerical order when choices are number', () => {
+    const mockChoices: Choice[] = [
+      { displayName: '20', value: 20 },
+      { displayName: '16', value: 16 },
+    ]
+    const result = orderRuntimeParameterRangeOptions(mockChoices)
+    expect(result).toEqual('16, 20')
+  })
+
+  it('should return alphabetical order when choices are number', () => {
+    const mockChoices: Choice[] = [
+      { displayName: 'Single channel 50µL', value: 'flex_1channel_50' },
+      { displayName: 'Eight Channel 50µL', value: 'flex_8channel_50' },
+    ]
+    const result = orderRuntimeParameterRangeOptions(mockChoices)
+    expect(result).toEqual('Eight Channel 50µL, Single channel 50µL')
+  })
+
+  it('should return empty string choices > 3', () => {
+    const mockChoices: Choice[] = [
+      { displayName: '20', value: 20 },
+      { displayName: '16', value: 16 },
+      { displayName: '18', value: 18 },
+    ]
+    const result = orderRuntimeParameterRangeOptions(mockChoices)
+    expect(result).toEqual('')
+  })
+})

shared-data/js/helpers/index.ts

@@ -31,6 +31,7 @@ export * from './getSimplestFlexDeckConfig'
 export * from './formatRunTimeParameterDefaultValue'
 export * from './formatRunTimeParameterValue'
 export * from './formatRunTimeParameterMinMax'
+export * from './orderRuntimeParameterRangeOptions'
 
 export const getLabwareDefIsStandard = (def: LabwareDefinition2): boolean =>
   def?.namespace === OPENTRONS_LABWARE_NAMESPACE

shared-data/js/helpers/orderRuntimeParameterRangeOptions.ts

@@ -0,0 +1,46 @@
+import type { Choice } from '../types'
+
+export const isNumeric = (str: string): boolean => {
+  return !isNaN(Number(str))
+}
+
+/**
+ * This function sorts an array of strings in numerical and alphabetical order.
+ * @param {Choice[]} - The array of Choice
+ * Choice is an object like {displayName: 'Single channel 50µL', value: 'flex_1channel_50' }
+ * @returns {string} The ordered string with ","
+ * 
+ * examples
+ * [
+      { displayName: '20', value: 20 },
+      { displayName: '16', value: 16 },
+    ]
+    return 16, 20
+
+    [
+      { displayName: 'Single channel 50µL', value: 'flex_1channel_50' },
+      { displayName: 'Eight Channel 50µL', value: 'flex_8channel_50' },
+    ]
+    return Eight Channel 50µL, Single channel 50µL
+ */
+export const orderRuntimeParameterRangeOptions = (
+  choices: Choice[]
+): string => {
+  // when this function is called, the array length is always 2
+  if (choices.length > 2) {
+    console.error(`expected to have length 2 but has length ${choices.length}`)
+    return ''
+  }
+  const displayNames = [choices[0].displayName, choices[1].displayName]
+  if (isNumeric(displayNames[0])) {
+    return displayNames
+      .sort((a, b) => {
+        const numA = Number(a)
+        const numB = Number(b)
+        return numA - numB
+      })
+      .join(', ')
+  } else {
+    return displayNames.sort().join(', ')
+  }
+}

shared-data/js/types.ts

@@ -597,7 +597,7 @@ export interface NumberParameter {
   default: number
 }
 
-interface Choice {
+export interface Choice {
   displayName: string
   value: number | boolean | string
 }