From f66cbe343e638a2118835abd1a13071bf001edbb Mon Sep 17 00:00:00 2001
From: laura_danielle <laura@opentrons.com>
Date: Fri, 3 May 2019 14:10:54 -0400
Subject: [PATCH 1/2] fix(app): Allow valid pipette+ model names for display
 images

closes #3340
---
 app/src/components/InstrumentSettings/InstrumentInfo.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/InstrumentSettings/InstrumentInfo.js b/app/src/components/InstrumentSettings/InstrumentInfo.js
index db8d33ea00b..96e4a51b668 100644
--- a/app/src/components/InstrumentSettings/InstrumentInfo.js
+++ b/app/src/components/InstrumentSettings/InstrumentInfo.js
@@ -21,7 +21,7 @@ type Props = {
 }
 
 // TODO(mc, 2018-03-30): volume and channels should come from the API
-const RE_CHANNELS = /p\d+_(single|multi)/
+const RE_CHANNELS = /p(\d+|\+\d+)_(single|multi)/
 
 const LABEL_BY_MOUNT = {
   left: 'Left pipette',

From dbf44bd0d8557e0ebade18899549e4a9748975e7 Mon Sep 17 00:00:00 2001
From: laura_danielle <laura@opentrons.com>
Date: Thu, 9 May 2019 11:15:45 -0400
Subject: [PATCH 2/2] Load channel and volume from shared data

---
 .../components/InstrumentSettings/InstrumentInfo.js    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/src/components/InstrumentSettings/InstrumentInfo.js b/app/src/components/InstrumentSettings/InstrumentInfo.js
index 96e4a51b668..253c54fdc54 100644
--- a/app/src/components/InstrumentSettings/InstrumentInfo.js
+++ b/app/src/components/InstrumentSettings/InstrumentInfo.js
@@ -5,6 +5,7 @@ import cx from 'classnames'
 
 import type { Mount } from '../../robot'
 
+import { getPipetteModelSpecs } from '@opentrons/shared-data'
 import {
   LabeledValue,
   OutlineButton,
@@ -20,9 +21,6 @@ type Props = {
   showSettings: boolean,
 }
 
-// TODO(mc, 2018-03-30): volume and channels should come from the API
-const RE_CHANNELS = /p(\d+|\+\d+)_(single|multi)/
-
 const LABEL_BY_MOUNT = {
   left: 'Left pipette',
   right: 'Right pipette',
@@ -31,8 +29,8 @@ const LABEL_BY_MOUNT = {
 export default function PipetteInfo(props: Props) {
   const { mount, model, name, onChangeClick, showSettings } = props
   const label = LABEL_BY_MOUNT[mount]
-  const channelsMatch = model && model.match(RE_CHANNELS)
-  const channels = channelsMatch && channelsMatch[1]
+  const pipette = model ? getPipetteModelSpecs(model) : null
+  const channels = pipette?.channels
   const direction = model ? 'change' : 'attach'
 
   const changeUrl = `/robots/${name}/instruments/pipettes/change/${mount}`
@@ -62,7 +60,7 @@ export default function PipetteInfo(props: Props) {
       <div className={styles.image}>
         {channels && (
           <InstrumentDiagram
-            channels={channels === 'multi' ? 8 : 1}
+            channels={channels}
             className={styles.pipette_diagram}
           />
         )}