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

package/lib/assets/localization/en/index.d.ts

@@ -115,4 +115,16 @@ export declare const en: {
         waste_chute: string;
         with_reference_of: string;
     };
+    deck_configuration: {
+        flex_stacker_display_name: string;
+        flex_stacker_waste_chute_display_name: string;
+        absorbance: string;
+        heater_Shaker: string;
+        mag_block: string;
+        staging_area: string;
+        temperature: string;
+        thermocycler: string;
+        trash_bin: string;
+        waste: string;
+    };
 };

package/lib/assets/localization/index.d.ts

@@ -116,6 +116,18 @@ export declare const resources: {
             waste_chute: string;
             with_reference_of: string;
         };
+        deck_configuration: {
+            flex_stacker_display_name: string;
+            flex_stacker_waste_chute_display_name: string;
+            absorbance: string;
+            heater_Shaker: string;
+            mag_block: string;
+            staging_area: string;
+            temperature: string;
+            thermocycler: string;
+            trash_bin: string;
+            waste: string;
+        };
     };
     zh: {
         protocol_command_text: {

package/lib/atoms/AnimationVideo/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+export type AnimationVideoProps = ComponentProps<'video'>;
+/**
+ * A `<video>` tag with default props for showing a looping animation.
+ *
+ * @example
+ * ```jsx
+ * <AnimationVideo>
+ *   <source src="foo.webm" />
+ * </AnimationVideo>
+ * ```
+ */
+export declare function AnimationVideo(props: AnimationVideoProps): JSX.Element;

package/lib/atoms/InlineNotification/index.d.ts

@@ -5,7 +5,7 @@ export interface InlineNotificationProps extends StyleProps {
     /** name constant of the icon to display */
     type: InlineNotificationType;
     /** InlineNotification contents */
-    heading: string;
+    heading?: string;
     message?: string;
     /** Optional dynamic width based on contents */
     hug?: boolean;

package/lib/atoms/ListButton/ListButtonChildren/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ListButtonAccordion';
 export * from './ListButtonAccordionContainer';
-export * from './ListButtonRadioButton';

package/lib/atoms/buttons/BasicButton.d.ts

@@ -0,0 +1,12 @@
+import type { MouseEvent } from 'react';
+import type { IconName } from '../../icons';
+interface BasicButtonProps {
+    children: string;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    isDisabled?: boolean;
+    underLine?: boolean;
+    tabIndex?: number;
+    iconName?: IconName;
+}
+export declare function BasicButton({ children, onClick, isDisabled, underLine, tabIndex, iconName, ...props }: BasicButtonProps): JSX.Element;
+export {};

package/lib/atoms/buttons/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AlertPrimaryButton';
+export * from './BasicButton';
 export * from './EmptySelectorButton';
 export * from './LargeButton';
 export * from './PrimaryButton';

package/lib/atoms/index.d.ts

@@ -1,3 +1,4 @@
+export * from './AnimationVideo';
 export * from './buttons';
 export * from './Checkbox';
 export * from './CheckboxField';

package/lib/hardware-sim/BaseDeck/BaseDeck.d.ts

@@ -1,11 +1,11 @@
 import { Module } from '../Module';
 import type { ComponentProps, ReactNode } from 'react';
-import type { DeckConfiguration, LabwareDefinition2, LabwareLocation, ModuleLocation, ModuleModel, RobotType } from '@opentrons/shared-data';
+import type { DeckConfiguration, LabwareDefinition, LabwareLocation, ModuleLocation, ModuleModel, RobotType } from '@opentrons/shared-data';
 import type { Svg } from '../../primitives';
 import type { WellFill, WellGroup } from '../Labware';
 export interface LabwareOnDeck {
     labwareLocation: LabwareLocation;
-    definition: LabwareDefinition2;
+    definition: LabwareDefinition;
     wellFill?: WellFill;
     missingTips?: WellGroup;
     /** generic prop to render self-positioned children for each labware */
@@ -18,7 +18,7 @@ export interface LabwareOnDeck {
 export interface ModuleOnDeck {
     moduleModel: ModuleModel;
     moduleLocation: ModuleLocation;
-    nestedLabwareDef?: LabwareDefinition2 | null;
+    nestedLabwareDef?: LabwareDefinition | null;
     nestedLabwareWellFill?: WellFill;
     innerProps?: ComponentProps<typeof Module>['innerProps'];
     /** generic prop to render self-positioned children for each module */
@@ -30,15 +30,15 @@ export interface ModuleOnDeck {
     hopperLabware?: HopperLabwareProps;
 }
 export interface HopperLabwareProps {
-    hopperLabwareDef: LabwareDefinition2 | null;
+    hopperLabwareDef: LabwareDefinition | null;
     hopperLabwareWellFill: WellFill;
     hopperOnLabwareClick: () => void;
     hopperHighlightLabware: boolean;
     hopperStacked: boolean;
 }
 export declare const STACKER_MODULE_Y_OFFSET = -6;
-export declare const STACKER_HOPPER_LABWARE_X_OFFSET = 178.5;
-export declare const STACKER_HOPPER_LABWARE_Y_OFFSET = 7;
+export declare const STACKER_HOPPER_LABWARE_X_OFFSET = 17.5;
+export declare const STACKER_HOPPER_LABWARE_Y_OFFSET = 6;
 export declare const STACKER_DECK_VIEW_BOX_EXPANSION = 220;
 interface BaseDeckProps {
     deckConfig: DeckConfiguration;

package/lib/hardware-sim/Deck/FlexTrash.d.ts

@@ -10,10 +10,13 @@ interface FlexTrashProps {
     showHighlight?: boolean;
     /** optional tag info to display a tag below the trash */
     tagInfo?: DeckLabelProps[];
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 }
 /**
  * Component to render Opentrons Flex trash
  * For use as a RobotWorkspace child component
  */
-export declare const FlexTrash: ({ robotType, trashIconColor, backgroundColor, trashCutoutId, showHighlight, tagInfo, }: FlexTrashProps) => JSX.Element | null;
+export declare const FlexTrash: ({ robotType, trashIconColor, backgroundColor, trashCutoutId, showHighlight, tagInfo, onClick, onMouseEnter, onMouseLeave, }: FlexTrashProps) => JSX.Element | null;
 export {};

package/lib/hardware-sim/Deck/MoveLabwareOnDeck.d.ts

@@ -1,13 +1,14 @@
 import type { ReactNode } from 'react';
-import type { DeckConfiguration, LabwareDefinition2, LabwareLocation, LoadedLabware, LoadedModule, RobotType } from '@opentrons/shared-data';
+import type { DeckConfiguration, LabwareDefinition, LabwareLocation, LoadedLabware, LoadedModule, RobotType } from '@opentrons/shared-data';
 import type { StyleProps } from '../../primitives';
 interface MoveLabwareOnDeckProps extends StyleProps {
     robotType: RobotType;
-    movedLabwareDef: LabwareDefinition2;
+    movedLabwareDef: LabwareDefinition;
     initialLabwareLocation: LabwareLocation;
     finalLabwareLocation: LabwareLocation;
     loadedModules: LoadedModule[];
     loadedLabware: LoadedLabware[];
+    labwareDefinitions: LabwareDefinition[];
     deckConfig: DeckConfiguration;
     backgroundItems?: ReactNode;
     deckFill?: string;

package/lib/hardware-sim/Deck/RobotCoordsText.d.ts

@@ -1,9 +1,19 @@
 import type { ComponentProps, ReactNode } from 'react';
 export interface RobotCoordsTextProps extends ComponentProps<'text'> {
     x: number;
+    /** The y-coordinate of the text baseline, in the Opentrons robot orientation, so +y is towards the top of the screen. */
     y: number;
     children?: ReactNode;
     canHighlight?: boolean;
 }
-/** SVG text reflected to use take robot coordinates as props */
+/**
+ * SVG text positioned with Opentrons robot coordinates.
+ *
+ * This should be used inside a wrapper like RobotWorkSpace that sets up a transformation
+ * to orient the SVG with the Opentrons coordinate convention, with +y towards the
+ * top of the screen.
+ *
+ * This component surgically undoes the wrapper's transformation so the child text is
+ * displayed right-side-up.
+ */
 export declare function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element;

package/lib/hardware-sim/Deck/RobotWorkSpace.d.ts

@@ -1,21 +1,38 @@
 import type { ReactNode } from 'react';
-import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data';
+import type { AddressableArea, DeckDefinition } from '@opentrons/shared-data';
 import type { StyleProps } from '../../primitives';
 export interface RobotWorkSpaceRenderProps {
-    deckSlotsById: {
-        [slotId: string]: DeckSlot;
-    };
-    getRobotCoordsFromDOMCoords: (domX: number, domY: number) => {
-        x: number;
-        y: number;
+    addressableAreasById: {
+        [addressableAreaId: string]: AddressableArea;
     };
 }
-export interface RobotWorkSpaceProps extends StyleProps {
-    deckDef?: DeckDefinition;
-    viewBox?: string | null;
+type BaseProps = {
     children?: (props: RobotWorkSpaceRenderProps) => ReactNode;
     deckLayerBlocklist?: string[];
+    /** optional boolean to show the OT-2 deck from deck defintion layers */
     showDeckLayers?: boolean;
     id?: string;
-}
-export declare function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element | null;
+} & (// Require at least one of deckDef or viewBox,
+{
+    deckDef: DeckDefinition;
+} | {
+    /**
+     * The x/y area to show, in standard SVG `x y xDimension yDimension` syntax.
+     *
+     * Specify coordinates in the Opentrons orientation, not the standard SVG orientation.
+     * So (x, y) is the area's front-left, xDimension extends the viewed area to the
+     * right, and yDimension extends the viewed area to the back.
+     */
+    viewBox: string;
+});
+export type RobotWorkSpaceProps = BaseProps & StyleProps;
+/**
+ * A wrapper for rendering the robot deck, labware, etc. from a top-down perspective.
+ *
+ * Child SVG components can render themselves in the Opentrons coordinate orientation
+ * (+x to the right of the robot, +y to the back of the robot) and this component will
+ * SVG-transform them so they're displayed the correct way. This is needed because
+ * SVG inverts y compared to Opentrons coordinates.
+ */
+export declare function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element;
+export {};

package/lib/hardware-sim/Deck/__tests__/resolveLabwareLocation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/hardware-sim/Deck/resolveLabwareLocation.d.ts

@@ -0,0 +1,20 @@
+import type { ComputeLabwareOriginInput, DeckDefinition, LabwareDefinition, LabwareLocation, LoadedLabware, LoadedModule } from '@opentrons/shared-data';
+/**
+ * Converts a labware location to something that computeLabwareOrigin() can take as
+ * input and compute absolute deck coordinates from.
+ *
+ * This basically just does a lot of tedious lookups to resolve IDs into full definitions.
+ *
+ * Returns "error" if there was a problem doing the conversion, probably because of
+ * some invalid input to this function, like entries missing from `otherLoadedLabware`.
+ * Returns "offDeck" if the labware is known to be off-deck, so it doesn't have
+ * coordinates.
+ */
+export declare function resolveLabwareLocation({ deckDef, targetLabwareDef, targetLabwareLocation, loadedModules, otherLoadedLabware, otherLabwareDefinitions, }: {
+    deckDef: DeckDefinition;
+    targetLabwareDef: LabwareDefinition;
+    targetLabwareLocation: LabwareLocation;
+    loadedModules: LoadedModule[];
+    otherLoadedLabware: LoadedLabware[];
+    otherLabwareDefinitions: LabwareDefinition[];
+}): 'error' | 'offDeck' | ComputeLabwareOriginInput;

package/lib/hardware-sim/DeckConfigurator/AbsorbanceReaderItem.d.ts

@@ -0,0 +1,11 @@
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckDefinition } from '@opentrons/shared-data';
+interface AbsorbanceReaderItemProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    cutoutFixtureId: CutoutFixtureIdsWithFakes;
+    addressableAreaId: AddressableAreaNamesWithFakes;
+    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    selected?: boolean;
+}
+export declare function AbsorbanceReaderItem(props: AbsorbanceReaderItemProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/EmptyConfigItem.d.ts

@@ -0,0 +1,11 @@
+import type { AddressableAreaNamesWithFakes, CutoutId, DeckDefinition, ModuleModel } from '@opentrons/shared-data';
+interface EmptyConfigItemProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    addressableAreaId: AddressableAreaNamesWithFakes;
+    editableCutoutIds: CutoutId[];
+    moduleModel?: ModuleModel;
+    handleClickAdd: (fixtureLocation: CutoutId, addressableArea: AddressableAreaNamesWithFakes) => void;
+}
+export declare function EmptyConfigItem(props: EmptyConfigItemProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/FlexStackerItem.d.ts

@@ -0,0 +1,12 @@
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckDefinition } from '@opentrons/shared-data';
+interface FlexStackerItemProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    cutoutFixtureId: CutoutFixtureIdsWithFakes;
+    addressableAreaId: AddressableAreaNamesWithFakes;
+    hasWasteChute: boolean;
+    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    selected?: boolean;
+}
+export declare function FlexStackerItem(props: FlexStackerItemProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/HeaterShakerItem.d.ts

@@ -0,0 +1,11 @@
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckDefinition } from '@opentrons/shared-data';
+interface HeaterShakerItemProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    cutoutFixtureId: CutoutFixtureIdsWithFakes;
+    addressableAreaId: AddressableAreaNamesWithFakes;
+    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    selected?: boolean;
+}
+export declare function HeaterShakerItem(props: HeaterShakerItemProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/MagneticBlockItem.d.ts

@@ -0,0 +1,12 @@
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckDefinition } from '@opentrons/shared-data';
+interface MagneticBlockItemProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    cutoutFixtureId: CutoutFixtureIdsWithFakes;
+    addressableAreaId: AddressableAreaNamesWithFakes;
+    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    hasStagingArea?: boolean;
+    selected?: boolean;
+}
+export declare function MagneticBlockItem(props: MagneticBlockItemProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/StagingAreaConfigItem.d.ts

@@ -0,0 +1,11 @@
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckDefinition } from '@opentrons/shared-data';
+interface StagingAreaConfigItemProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    cutoutFixtureId: CutoutFixtureIdsWithFakes;
+    addressableAreaId: AddressableAreaNamesWithFakes;
+    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    selected?: boolean;
+}
+export declare function StagingAreaConfigItem(props: StagingAreaConfigItemProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/{StaticFixture.d.ts → StaticItem.d.ts}

@@ -8,5 +8,5 @@ interface StaticFixtureProps {
  * this component allows us to add static labeled fixtures to the center column of a deck
  * config map
  */
-export declare function StaticFixture(props: StaticFixtureProps): JSX.Element;
+export declare function StaticItem(props: StaticFixtureProps): JSX.Element;
 export {};

package/lib/hardware-sim/DeckConfigurator/TemperatureModuleItem.d.ts

@@ -0,0 +1,11 @@
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckDefinition } from '@opentrons/shared-data';
+interface TemperatureModuleFixtureProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    cutoutFixtureId: CutoutFixtureIdsWithFakes;
+    addressableAreaId: AddressableAreaNamesWithFakes;
+    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    selected?: boolean;
+}
+export declare function TemperatureModuleItem(props: TemperatureModuleFixtureProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/ThermocyclerItem.d.ts

@@ -0,0 +1,11 @@
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckDefinition } from '@opentrons/shared-data';
+interface ThermocyclerItemProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    cutoutFixtureId: CutoutFixtureIdsWithFakes;
+    addressableAreaId: AddressableAreaNamesWithFakes;
+    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    selected?: boolean;
+}
+export declare function ThermocyclerItem(props: ThermocyclerItemProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/TrashBinConfigItem.d.ts

@@ -0,0 +1,11 @@
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckDefinition } from '@opentrons/shared-data';
+interface TrashBinConfigItemProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    cutoutFixtureId: CutoutFixtureIdsWithFakes;
+    addressableAreaId: AddressableAreaNamesWithFakes;
+    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    selected?: boolean;
+}
+export declare function TrashBinConfigItem(props: TrashBinConfigItemProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/WasteChuteConfigItem.d.ts

@@ -0,0 +1,11 @@
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckDefinition } from '@opentrons/shared-data';
+interface WasteChuteConfigItemProps {
+    deckDefinition: DeckDefinition;
+    fixtureLocation: CutoutId;
+    cutoutFixtureId: CutoutFixtureIdsWithFakes;
+    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    hasStagingAreas?: boolean;
+    selected?: boolean;
+}
+export declare function WasteChuteConfigFixture(props: WasteChuteConfigItemProps): JSX.Element;
+export {};

package/lib/hardware-sim/DeckConfigurator/constants.d.ts

@@ -5,16 +5,13 @@
 export declare const FIXTURE_HEIGHT = 102;
 export declare const THERMOCYCLER_FIXTURE_HEIGHT = 290;
 export declare const COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH = 243.5;
-export declare const COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH = 159;
-export declare const COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH = 243.5;
-export declare const STAGING_AREA_FIXTURE_WIDTH = 314.5;
+export declare const COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH = 159;
+export declare const LARGE_SINGLE_ITEM_SLOT_WIDTH = 250;
+export declare const THERMOCYCLER_FIXTURE_WIDTH = 243.5;
 export declare const COLUMN_1_X_ADJUSTMENT = -100;
-export declare const COLUMN_2_X_ADJUSTMENT = -15.5;
-export declare const COLUMN_3_X_ADJUSTMENT = -15.5;
+export declare const COLUMN_DEFAULT_X_ADJUSTMENT = -15.5;
+export declare const STACKER_X_ADJUSTMENT = -12.5;
 export declare const Y_ADJUSTMENT = -8;
-export declare const STAGING_AREA_DISPLAY_NAME = "Staging area";
-export declare const TRASH_BIN_DISPLAY_NAME = "Trash bin";
-export declare const WASTE_CHUTE_DISPLAY_NAME = "Waste chute";
 export declare const CONFIG_STYLE_READ_ONLY: import("styled-components").FlattenSimpleInterpolation;
 export declare const CONFIG_STYLE_EDITABLE: import("styled-components").FlattenSimpleInterpolation;
 export declare const CONFIG_STYLE_SELECTED: import("styled-components").FlattenSimpleInterpolation;

package/lib/hardware-sim/DeckConfigurator/index.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
-import type { CutoutFixtureId, CutoutId, DeckConfiguration } from '@opentrons/shared-data';
+import type { AddressableAreaNamesWithFakes, CutoutFixtureIdsWithFakes, CutoutId, DeckConfiguration, ModuleModel } from '@opentrons/shared-data';
 export * from './constants';
 interface DeckConfiguratorProps {
     deckConfig: DeckConfiguration;
-    handleClickAdd: (cutoutId: CutoutId) => void;
-    handleClickRemove: (cutoutId: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
+    handleClickAdd: (cutoutId: CutoutId, addressableAreaId: AddressableAreaNamesWithFakes) => void;
+    handleClickRemove: (cutoutId: CutoutId, cutoutFixtureId: CutoutFixtureIdsWithFakes, addressableAreaId: AddressableAreaNamesWithFakes) => void;
     lightFill?: string;
     darkFill?: string;
     editableCutoutIds?: CutoutId[];
@@ -16,5 +16,6 @@ interface DeckConfiguratorProps {
     }>;
     height?: string;
     selectedCutoutId?: CutoutId;
+    moduleModel?: ModuleModel;
 }
 export declare function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element;

package/lib/hardware-sim/Labware/CalibrationBlockRender.d.ts

@@ -0,0 +1,15 @@
+import type { LabwareDefinition } from '@opentrons/shared-data';
+interface CalibrationBlockRenderProps {
+    /**
+     * Must be a calibration block definition, e.g.
+     * opentrons_calibrationblock_short_side_left or ..._short_side_right.
+     */
+    labwareDef: LabwareDefinition;
+}
+/**
+ * Render a top-down view of an OT-2 calibration block. This displays features specific
+ * to calibration blocks, which the more general <Labware> component doesn't know
+ * about.
+ */
+export declare function CalibrationBlockRender(props: CalibrationBlockRenderProps): JSX.Element | null;
+export {};

package/lib/hardware-sim/Labware/Labware.d.ts

@@ -1,10 +1,11 @@
 import type { RefObject } from 'react';
-import type { LabwareDefinition2 } from '@opentrons/shared-data';
+import type { LabwareDefinition } from '@opentrons/shared-data';
 import type { HighlightedWellLabels, WellFill, WellMouseEvent, WellStroke } from './labwareInternals/types';
 export interface LabwareProps {
     /** Labware definition to render */
-    definition: LabwareDefinition2;
-    /** Opional Prop for labware on heater shakers sitting on right side of the deck */
+    definition: LabwareDefinition;
+    positioningMode: 'passThrough' | 'offsetInSlot';
+    /** See docs on LabwareRender. */
     shouldRotateAdapterOrientation?: boolean;
     /** boolean to show well labels */
     showLabels?: boolean;
@@ -30,10 +31,8 @@ export interface LabwareProps {
     isInteractive?: boolean;
 }
 /**
- * a refactor of the legacy LabwareRender component intended to provide predictable styling
- * initial use in ODD well selection component with ODD-specific well label styling
- * consider adding additional styled wells props if used elsewhere
- * @param props
- * @returns
+ * Similar to the LabwareRender component, but with ODD-specific styling.
+ *
+ * For example, hiding the outline of the labware for certain ODD flows.
  */
 export declare const Labware: (props: LabwareProps) => JSX.Element;

package/lib/hardware-sim/Labware/LabwareAdapter/index.d.ts

@@ -5,7 +5,7 @@ import { OpentronsAutoclavableDeckRiser } from './OpentronsAutoclavableDeckRiser
 import { OpentronsFlex96TiprackAdapter } from './OpentronsFlex96TiprackAdapter';
 import { OpentronsToughPCRAutoSealingLid } from './OpentronsToughPCRAutoSealingLid';
 import { OpentronsUniversalFlatAdapter } from './OpentronsUniversalFlatAdapter';
-import type { LabwareDefinition2 } from '@opentrons/shared-data';
+import type { LabwareDefinition } from '@opentrons/shared-data';
 declare const LABWARE_ADAPTER_LOADNAME_PATHS: {
     opentrons_96_deep_well_adapter: typeof Opentrons96DeepWellAdapter;
     opentrons_96_flat_bottom_adapter: typeof Opentrons96FlatBottomAdapter;
@@ -19,7 +19,7 @@ export type LabwareAdapterLoadName = keyof typeof LABWARE_ADAPTER_LOADNAME_PATHS
 export declare const labwareAdapterLoadNames: string[];
 export interface LabwareAdapterProps {
     labwareLoadName: LabwareAdapterLoadName;
-    definition?: LabwareDefinition2;
+    definition?: LabwareDefinition;
     highlight?: boolean;
     highlightShadow?: boolean;
 }

package/lib/hardware-sim/Labware/LabwareRender.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'styled-components';
 import type { RefObject } from 'react';
-import type { LabwareDefinition2 } from '@opentrons/shared-data';
+import type { LabwareDefinition } from '@opentrons/shared-data';
 import type { HighlightedWellLabels, WellFill, WellGroup, WellMouseEvent, WellStroke } from './labwareInternals/types';
 export declare const WELL_LABEL_OPTIONS: {
     readonly SHOW_LABEL_INSIDE: "SHOW_LABEL_INSIDE";
@@ -9,8 +9,50 @@ export declare const WELL_LABEL_OPTIONS: {
 export type WellLabelOption = keyof typeof WELL_LABEL_OPTIONS;
 export interface LabwareRenderProps {
     /** Labware definition to render */
-    definition: LabwareDefinition2;
-    /** Opional Prop for labware on heater shakers sitting on right side of the deck */
+    definition: LabwareDefinition;
+    /**
+     * How the rendered labware should be positioned. Use `passThrough` for new code.
+     *
+     * `passThrough` -
+     *   The origin of the labware will be at the SVG origin. Beware that what
+     *   "the origin of the labware" corresponds to, physically, is not consistent across
+     *   labware. e.g. do not assume that it's always the labware's front-left corner.
+     *
+     *   To render a labware on its own, use the `getLabwareViewBox()` util from
+     *   shared-data to compute the SVG's viewBox around that origin.
+     *
+     *   To render a labware aligned to something like a deck slot or module, wrap this
+     *   component in an SVG transform. Use a util like shared-data's
+     *   `getDeckSlotOriginToLabwareOrigin()` to compute it.
+     *
+     * `offsetInSlot` -
+     *   The SVG origin will be treated as the origin of the slot enclosing the labware.
+     *   The labware will be offset from that origin according to the labware def's
+     *   cornerOffsetFromSlot.
+     *
+     *   To render a labware on its own, set the SVG viewBox's origin to
+     *   definition.cornerOffsetFromSlot.
+     *
+     *   To render a labware aligned to something like a deck slot or module, wrap this
+     *   component in an SVG transform that places the origin of this component at the
+     *   origin of the slot.
+     *
+     *   This is deprecated because it relies on labware schema 2's slot-centric ideas of
+     *   how labware are positioned. It's also clunky when rendering a labware on its
+     *   own.
+     */
+    positioningMode: 'passThrough' | 'offsetInSlot';
+    /**
+     * Special handling for opentrons_universal_flat_adapter. Unlike other labware,
+     * it rotates to match the underlying module, and that rotation actually matters
+     * because it's asymmetrical.
+     *
+     * This should be true if this is that adapter and we're on the left side of the deck,
+     * and false otherwise.
+     *
+     * Ignored if positioningMode is passThrough, in which case it's the caller's
+     * responsibility to do this rotation.
+     */
     shouldRotateAdapterOrientation?: boolean;
     /** option to show well labels inside or outside of labware outline */
     wellLabelOption?: WellLabelOption;

package/lib/hardware-sim/Labware/index.d.ts

@@ -1,4 +1,5 @@
 export * from './labwareInternals/index';
+export * from './CalibrationBlockRender';
 export * from './LabwareRender';
 export * from './Labware';
 export * from './labwareInternals/types';

package/lib/hardware-sim/Labware/labwareInternals/FilledWells.d.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties } from 'styled-components';
 import type { MemoExoticComponent } from 'react';
-import type { LabwareDefinition2 } from '@opentrons/shared-data';
+import type { LabwareDefinition } from '@opentrons/shared-data';
 export interface FilledWellsProps {
-    definition: LabwareDefinition2;
+    definition: LabwareDefinition;
     fillByWell: Record<string, CSSProperties['fill']>;
     strokeColor?: string;
 }

package/lib/hardware-sim/Labware/labwareInternals/LabwareOutline.d.ts

@@ -1,12 +1,6 @@
 import type { CSSProperties } from 'styled-components';
-import type { LabwareDefinition2 } from '@opentrons/shared-data';
-export interface LabwareOutlineProps {
-    /** Labware definition to outline */
-    definition?: LabwareDefinition2;
-    /** x dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to 127.76 */
-    width?: number;
-    /** y dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to 85.48 */
-    height?: number;
+import type { LabwareDefinition } from '@opentrons/shared-data';
+export type LabwareOutlineProps = {
     /** if this labware is a tip rack, darken background and lighten borderx dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to false */
     isTiprack?: boolean;
     /** adds thicker blue border with blur to labware, defaults to false */
@@ -17,5 +11,22 @@ export interface LabwareOutlineProps {
     stroke?: CSSProperties['stroke'];
     fill?: CSSProperties['fill'];
     showRadius?: boolean;
+} & (DefinitionProps | DefinitionReplacementProps);
+interface DefinitionProps {
+    /** Labware definition to outline */
+    definition: LabwareDefinition;
+}
+/** Used for rendering an outline without needing a full labware definition. */
+interface DefinitionReplacementProps {
+    definition?: undefined;
+    /** x dimension in mm of the outline. */
+    width: number;
+    /** y dimension in mm of the outline. */
+    height: number;
+    /** minimum x-coordinate (i.e. the left side) of the outline. */
+    minX: number;
+    /** minimum y-coordinate (i.e. the bottom) of the outline. */
+    minY: number;
 }
 export declare function LabwareOutline(props: LabwareOutlineProps): JSX.Element;
+export {};