@opentrons/components 0.1.7-alpha.0 → 0.2.0-alpha.0

package/src/hardware-sim/DeckConfigurator/index.tsx

@@ -1,53 +1,48 @@
 import {
-  getDeckDefFromRobotType,
+  filterAAByAreaType,
   FLEX_ROBOT_TYPE,
-  SINGLE_SLOT_FIXTURES,
-  STAGING_AREA_RIGHT_SLOT_FIXTURE,
-  TRASH_BIN_ADAPTER_FIXTURE,
-  WASTE_CHUTE_ONLY_FIXTURES,
-  WASTE_CHUTE_STAGING_AREA_FIXTURES,
-  THERMOCYCLER_V2_FRONT_FIXTURE,
-  HEATERSHAKER_MODULE_V1_FIXTURE,
-  TEMPERATURE_MODULE_V2_FIXTURE,
-  MAGNETIC_BLOCK_V1_FIXTURE,
-  ABSORBANCE_READER_V1_FIXTURE,
-  FLEX_STACKER_V1_FIXTURE,
-  FLEX_STACKER_FIXTURES,
+  getDeckDefFromRobotType,
+  replaceFixtureToFakeFixtureAndTransformCutoutFixturesToAA,
   STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
   THERMOCYCLER_MODULE_CUTOUTS,
 } from '@opentrons/shared-data'
 
 import { COLORS } from '../../helix-design-system'
-import { SingleSlotFixture } from '../BaseDeck/SingleSlotFixture'
 import { SlotLabels } from '../Deck'
 import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
-import { EmptyConfigFixture } from './EmptyConfigFixture'
-import { StagingAreaConfigFixture } from './StagingAreaConfigFixture'
-import { TrashBinConfigFixture } from './TrashBinConfigFixture'
-import { WasteChuteConfigFixture } from './WasteChuteConfigFixture'
-import { StaticFixture } from './StaticFixture'
-import { TemperatureModuleFixture } from './TemperatureModuleFixture'
-import { HeaterShakerFixture } from './HeaterShakerFixture'
-import { MagneticBlockFixture } from './MagneticBlockFixture'
-import { ThermocyclerFixture } from './ThermocyclerFixture'
-import { AbsorbanceReaderFixture } from './AbsorbanceReaderFixture'
-import { FlexStackerFixture } from './FlexStackerFixture'
+import { AbsorbanceReaderItem } from './AbsorbanceReaderItem'
+import { EmptyConfigItem } from './EmptyConfigItem'
+import { FlexStackerItem } from './FlexStackerItem'
+import { HeaterShakerItem } from './HeaterShakerItem'
+import { MagneticBlockItem } from './MagneticBlockItem'
+import { StagingAreaConfigItem } from './StagingAreaConfigItem'
+import { StaticItem } from './StaticItem'
+import { TemperatureModuleItem } from './TemperatureModuleItem'
+import { ThermocyclerItem } from './ThermocyclerItem'
+import { TrashBinConfigItem } from './TrashBinConfigItem'
+import { WasteChuteConfigFixture } from './WasteChuteConfigItem'
 
 import type { ReactNode } from 'react'
 import type {
-  CutoutFixtureId,
+  AddressableAreaNamesWithFakes,
+  CutoutFixtureIdsWithFakes,
   CutoutId,
   DeckConfiguration,
+  ModuleModel,
 } from '@opentrons/shared-data'
 
 export * from './constants'
 
 interface DeckConfiguratorProps {
   deckConfig: DeckConfiguration
-  handleClickAdd: (cutoutId: CutoutId) => void
+  handleClickAdd: (
+    cutoutId: CutoutId,
+    addressableAreaId: AddressableAreaNamesWithFakes
+  ) => void
   handleClickRemove: (
     cutoutId: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
+    cutoutFixtureId: CutoutFixtureIdsWithFakes,
+    addressableAreaId: AddressableAreaNamesWithFakes
   ) => void
   lightFill?: string
   darkFill?: string
@@ -57,6 +52,7 @@ interface DeckConfiguratorProps {
   additionalStaticFixtures?: Array<{ location: CutoutId; label: string }>
   height?: string
   selectedCutoutId?: CutoutId
+  moduleModel?: ModuleModel
 }
 
 export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
@@ -67,60 +63,76 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
     additionalStaticFixtures,
     children,
     selectedCutoutId,
-    lightFill = COLORS.grey35,
     darkFill = COLORS.black90,
     editableCutoutIds = deckConfig.map(({ cutoutId }) => cutoutId),
-    showExpansion = true,
     height = '455px',
+    moduleModel,
   } = props
+
   const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE)
 
-  const stagingAreaFixtures = deckConfig.filter(
-    ({ cutoutFixtureId }) => cutoutFixtureId === STAGING_AREA_RIGHT_SLOT_FIXTURE
+  const deckConfigWithAA = replaceFixtureToFakeFixtureAndTransformCutoutFixturesToAA(
+    deckConfig
   )
-  const wasteChuteFixtures = deckConfig.filter(
-    ({ cutoutFixtureId }) =>
-      cutoutFixtureId != null &&
-      WASTE_CHUTE_ONLY_FIXTURES.includes(cutoutFixtureId)
-  )
-  const wasteChuteStagingAreaFixtures = deckConfig.filter(
-    ({ cutoutFixtureId }) =>
-      cutoutFixtureId != null &&
-      WASTE_CHUTE_STAGING_AREA_FIXTURES.includes(cutoutFixtureId)
+
+  const stagingAreaItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'stagingSlot'
   )
-  const emptyCutouts = deckConfig.filter(
-    ({ cutoutFixtureId, cutoutId }) =>
-      editableCutoutIds.includes(cutoutId) &&
-      cutoutFixtureId != null &&
-      SINGLE_SLOT_FIXTURES.includes(cutoutFixtureId)
+
+  const wasteChuteItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'wasteChute'
   )
-  const trashBinFixtures = deckConfig.filter(
-    ({ cutoutFixtureId }) => cutoutFixtureId === TRASH_BIN_ADAPTER_FIXTURE
+  const fakeStagingItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'fakeStagingSlot'
   )
-  const thermocyclerFixtures = deckConfig.filter(
-    ({ cutoutFixtureId }) => cutoutFixtureId === THERMOCYCLER_V2_FRONT_FIXTURE
+
+  const emptySlotLikeItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'slot'
+  ).concat(fakeStagingItems)
+
+  const trashBinItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'movableTrash'
   )
-  const heaterShakerFixtures = deckConfig.filter(
-    ({ cutoutFixtureId }) => cutoutFixtureId === HEATERSHAKER_MODULE_V1_FIXTURE
+  const thermocyclerItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'thermocycler'
   )
-  const temperatureModuleFixtures = deckConfig.filter(
-    ({ cutoutFixtureId }) => cutoutFixtureId === TEMPERATURE_MODULE_V2_FIXTURE
+  const heaterShakerItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'heaterShaker'
   )
-  const magneticBlockFixtures = deckConfig.filter(({ cutoutFixtureId }) =>
-    ([
-      MAGNETIC_BLOCK_V1_FIXTURE,
-      STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
-    ] as CutoutFixtureId[]).includes(cutoutFixtureId)
+  const temperatureModuleItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'temperatureModule'
   )
-  const absorbanceReaderFixtures = deckConfig.filter(
-    ({ cutoutFixtureId }) => cutoutFixtureId === ABSORBANCE_READER_V1_FIXTURE
+  const magneticBlockItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'magneticBlock'
   )
-  const magneticBlockStagingAreaFixtures = deckConfig.filter(
-    ({ cutoutFixtureId }) =>
-      cutoutFixtureId === STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE
+  const absorbanceReaderItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'absorbanceReader'
   )
-  const flexStackerFixtures = deckConfig.filter(({ cutoutFixtureId }) =>
-    FLEX_STACKER_FIXTURES.includes(cutoutFixtureId)
+
+  const flexStackerItems = filterAAByAreaType(
+    deckConfigWithAA,
+    deckDef,
+    'flexStacker'
   )
 
   return (
@@ -128,118 +140,72 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       height={height}
       viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
     >
-      {deckDef.locations.cutouts.map(cutout => (
-        // give the outside of the base fixture svgs a stroke for extra spacing
-        <g key={cutout.id} stroke={COLORS.white} strokeWidth="4">
-          <SingleSlotFixture
-            cutoutId={cutout.id}
+      {stagingAreaItems.map(
+        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
+          <StagingAreaConfigItem
+            data-testid={cutoutId}
+            key={addressableAreaId}
             deckDefinition={deckDef}
-            slotClipColor={COLORS.transparent}
-            fixtureBaseColor={lightFill}
-            showExpansion={showExpansion}
+            handleClickRemove={
+              editableCutoutIds.includes(cutoutId)
+                ? handleClickRemove
+                : undefined
+            }
+            fixtureLocation={cutoutId}
+            cutoutFixtureId={cutoutFixtureId}
+            addressableAreaId={addressableAreaId}
+            selected={cutoutId === selectedCutoutId}
           />
-        </g>
-      ))}
-      {stagingAreaFixtures.map(({ cutoutId, cutoutFixtureId }) => (
-        <StagingAreaConfigFixture
-          key={cutoutId}
-          deckDefinition={deckDef}
-          handleClickRemove={
-            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
-          }
-          fixtureLocation={cutoutId}
-          cutoutFixtureId={cutoutFixtureId}
-          selected={cutoutId === selectedCutoutId}
-        />
-      ))}
-      {emptyCutouts.map(({ cutoutId }) => (
-        <EmptyConfigFixture
-          key={cutoutId}
+        )
+      )}
+      {emptySlotLikeItems.map(({ cutoutId, addressableAreaId }) => (
+        <EmptyConfigItem
+          data-testid={addressableAreaId}
+          editableCutoutIds={editableCutoutIds ?? []}
+          key={addressableAreaId}
+          addressableAreaId={addressableAreaId}
           deckDefinition={deckDef}
           handleClickAdd={handleClickAdd}
           fixtureLocation={cutoutId}
+          moduleModel={moduleModel}
         />
       ))}
-      {wasteChuteFixtures.map(({ cutoutId, cutoutFixtureId }) => (
-        <WasteChuteConfigFixture
-          key={cutoutId}
-          deckDefinition={deckDef}
-          handleClickRemove={
-            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
-          }
-          fixtureLocation={cutoutId}
-          cutoutFixtureId={cutoutFixtureId}
-          selected={cutoutId === selectedCutoutId}
-        />
-      ))}
-      {wasteChuteStagingAreaFixtures.map(({ cutoutId, cutoutFixtureId }) => (
-        <WasteChuteConfigFixture
-          key={cutoutId}
-          deckDefinition={deckDef}
-          handleClickRemove={
-            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
-          }
-          fixtureLocation={cutoutId}
-          cutoutFixtureId={cutoutFixtureId}
-          selected={cutoutId === selectedCutoutId}
-          hasStagingAreas
-        />
-      ))}
-      {trashBinFixtures.map(({ cutoutId, cutoutFixtureId }) => (
-        <TrashBinConfigFixture
-          key={cutoutId}
-          deckDefinition={deckDef}
-          handleClickRemove={
-            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
-          }
-          fixtureLocation={cutoutId}
-          cutoutFixtureId={cutoutFixtureId}
-          selected={cutoutId === selectedCutoutId}
-        />
-      ))}
-      {temperatureModuleFixtures.map(({ cutoutId, cutoutFixtureId }) => (
-        <TemperatureModuleFixture
-          key={cutoutId}
-          deckDefinition={deckDef}
-          handleClickRemove={
-            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
-          }
-          fixtureLocation={cutoutId}
-          cutoutFixtureId={cutoutFixtureId}
-          selected={cutoutId === selectedCutoutId}
-        />
-      ))}
-      {heaterShakerFixtures.map(({ cutoutId, cutoutFixtureId }) => (
-        <HeaterShakerFixture
-          key={cutoutId}
-          deckDefinition={deckDef}
-          handleClickRemove={
-            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
-          }
-          fixtureLocation={cutoutId}
-          cutoutFixtureId={cutoutFixtureId}
-          selected={cutoutId === selectedCutoutId}
-        />
-      ))}
-      {magneticBlockFixtures.map(({ cutoutId, cutoutFixtureId }) => (
-        <MagneticBlockFixture
-          key={cutoutId}
+      {wasteChuteItems.map(
+        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
+          <WasteChuteConfigFixture
+            data-testid={cutoutId}
+            key={addressableAreaId}
+            deckDefinition={deckDef}
+            handleClickRemove={
+              editableCutoutIds.includes(cutoutId)
+                ? handleClickRemove
+                : undefined
+            }
+            fixtureLocation={cutoutId}
+            cutoutFixtureId={cutoutFixtureId}
+            selected={cutoutId === selectedCutoutId}
+          />
+        )
+      )}
+      {trashBinItems.map(({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
+        <TrashBinConfigItem
+          data-testid={cutoutId}
+          key={addressableAreaId}
           deckDefinition={deckDef}
           handleClickRemove={
             editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
           }
           fixtureLocation={cutoutId}
           cutoutFixtureId={cutoutFixtureId}
+          addressableAreaId={addressableAreaId}
           selected={cutoutId === selectedCutoutId}
-          hasStagingArea={
-            cutoutFixtureId === STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE
-          }
         />
       ))}
-      {thermocyclerFixtures.map(({ cutoutId, cutoutFixtureId }) => {
-        return (
-          <ThermocyclerFixture
-            key={cutoutId}
+      {temperatureModuleItems.map(
+        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
+          <TemperatureModuleItem
+            data-testid={cutoutId}
+            key={addressableAreaId}
             deckDefinition={deckDef}
             handleClickRemove={
               editableCutoutIds.includes(cutoutId)
@@ -248,55 +214,132 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
             }
             fixtureLocation={cutoutId}
             cutoutFixtureId={cutoutFixtureId}
-            selected={
-              selectedCutoutId != null &&
-              THERMOCYCLER_MODULE_CUTOUTS.includes(selectedCutoutId) &&
-              THERMOCYCLER_MODULE_CUTOUTS.includes(cutoutId)
+            addressableAreaId={addressableAreaId}
+            selected={cutoutId === selectedCutoutId}
+          />
+        )
+      )}
+      {heaterShakerItems.map(
+        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
+          <HeaterShakerItem
+            data-testid={cutoutId}
+            key={addressableAreaId}
+            deckDefinition={deckDef}
+            handleClickRemove={
+              editableCutoutIds.includes(cutoutId)
+                ? handleClickRemove
+                : undefined
             }
+            fixtureLocation={cutoutId}
+            cutoutFixtureId={cutoutFixtureId}
+            addressableAreaId={addressableAreaId}
+            selected={cutoutId === selectedCutoutId}
           />
         )
-      })}
-      {absorbanceReaderFixtures.map(({ cutoutId, cutoutFixtureId }) => (
-        <AbsorbanceReaderFixture
-          key={cutoutId}
-          deckDefinition={deckDef}
-          handleClickRemove={
-            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
-          }
-          fixtureLocation={cutoutId}
-          cutoutFixtureId={cutoutFixtureId}
-          selected={cutoutId === selectedCutoutId}
-        />
-      ))}
-      {flexStackerFixtures.map(({ cutoutId, cutoutFixtureId }) => (
-        <FlexStackerFixture
-          key={cutoutId}
-          deckDefinition={deckDef}
-          handleClickRemove={
-            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
-          }
-          fixtureLocation={cutoutId}
-          cutoutFixtureId={cutoutFixtureId}
-          hasWasteChute={cutoutFixtureId !== FLEX_STACKER_V1_FIXTURE}
-          selected={cutoutId === selectedCutoutId}
-        />
-      ))}
+      )}
+      {magneticBlockItems.map(
+        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
+          <MagneticBlockItem
+            data-testid={cutoutId}
+            key={addressableAreaId}
+            deckDefinition={deckDef}
+            handleClickRemove={
+              editableCutoutIds.includes(cutoutId)
+                ? handleClickRemove
+                : undefined
+            }
+            fixtureLocation={cutoutId}
+            cutoutFixtureId={cutoutFixtureId}
+            addressableAreaId={addressableAreaId}
+            selected={cutoutId === selectedCutoutId}
+            hasStagingArea={
+              cutoutFixtureId ===
+              STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE
+            }
+          />
+        )
+      )}
+      {thermocyclerItems.map(
+        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => {
+          return (
+            <ThermocyclerItem
+              data-testid={cutoutId}
+              key={addressableAreaId}
+              deckDefinition={deckDef}
+              handleClickRemove={
+                editableCutoutIds.includes(cutoutId)
+                  ? handleClickRemove
+                  : undefined
+              }
+              fixtureLocation={cutoutId}
+              cutoutFixtureId={cutoutFixtureId}
+              addressableAreaId={addressableAreaId}
+              selected={
+                selectedCutoutId != null &&
+                THERMOCYCLER_MODULE_CUTOUTS.includes(selectedCutoutId) &&
+                THERMOCYCLER_MODULE_CUTOUTS.includes(cutoutId)
+              }
+            />
+          )
+        }
+      )}
+      {absorbanceReaderItems.map(
+        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
+          <AbsorbanceReaderItem
+            data-testid={cutoutId}
+            key={addressableAreaId}
+            deckDefinition={deckDef}
+            handleClickRemove={
+              editableCutoutIds.includes(cutoutId)
+                ? handleClickRemove
+                : undefined
+            }
+            fixtureLocation={cutoutId}
+            cutoutFixtureId={cutoutFixtureId}
+            addressableAreaId={addressableAreaId}
+            selected={cutoutId === selectedCutoutId}
+          />
+        )
+      )}
+      {flexStackerItems.map(
+        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
+          <FlexStackerItem
+            data-testid={cutoutId}
+            key={addressableAreaId}
+            deckDefinition={deckDef}
+            handleClickRemove={
+              editableCutoutIds.includes(cutoutId)
+                ? handleClickRemove
+                : undefined
+            }
+            fixtureLocation={cutoutId}
+            cutoutFixtureId={cutoutFixtureId}
+            hasWasteChute={[
+              'wasteChuteRightAdapterCovered',
+              'wasteChuteRightAdapterNoCover',
+            ].includes(cutoutFixtureId)}
+            selected={cutoutId === selectedCutoutId}
+            addressableAreaId={addressableAreaId}
+          />
+        )
+      )}
       {additionalStaticFixtures?.map(staticFixture => (
-        <StaticFixture
+        <StaticItem
+          data-testid={staticFixture.location}
           key={staticFixture.location}
           deckDefinition={deckDef}
           label={staticFixture.label}
           fixtureLocation={staticFixture.location}
         />
       ))}
+      */
       <SlotLabels
         robotType={FLEX_ROBOT_TYPE}
         color={darkFill}
         show4thColumn={
-          stagingAreaFixtures.length > 0 ||
-          wasteChuteStagingAreaFixtures.length > 0 ||
-          magneticBlockStagingAreaFixtures.length > 0 ||
-          absorbanceReaderFixtures.length > 0
+          stagingAreaItems.length > 0 ||
+          absorbanceReaderItems.length > 0 ||
+          flexStackerItems.length > 0
         }
       />
       {children}

package/src/hardware-sim/Labware/CalibrationBlockRender.stories.tsx

@@ -0,0 +1,49 @@
+import { getAllDefinitions, getLabwareViewBox } from '@opentrons/shared-data'
+
+import { RobotWorkSpace } from '../Deck'
+import { CalibrationBlockRender } from './CalibrationBlockRender'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const LOAD_NAMES = [
+  'opentrons_calibrationblock_short_side_left',
+  'opentrons_calibrationblock_short_side_right',
+]
+const DEFS_BY_URI = Object.fromEntries(
+  Object.entries(getAllDefinitions()).filter(([uri, def]) =>
+    LOAD_NAMES.includes(def.parameters.loadName)
+  )
+)
+
+const meta: Meta<typeof CalibrationBlockRender> = {
+  title: 'Library/Molecules/Simulation/CalibrationBlockRender',
+  component: CalibrationBlockRender,
+  decorators: [
+    (Story, context) => {
+      const { labwareDef } = context.args
+      const { minX, minY, xDimension, yDimension } = getLabwareViewBox(
+        labwareDef
+      )
+      const viewBox = `${minX} ${minY} ${xDimension} ${yDimension}`
+
+      return (
+        <RobotWorkSpace viewBox={viewBox}>{() => <Story />}</RobotWorkSpace>
+      )
+    },
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    labwareDef: Object.keys(DEFS_BY_URI)[0],
+  },
+  argTypes: {
+    labwareDef: {
+      options: Object.keys(DEFS_BY_URI),
+      mapping: DEFS_BY_URI,
+    },
+  },
+}