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

package/src/hardware-sim/ProtocolDeck/utils/getModulesInSlots.ts

@@ -1,129 +0,0 @@
-import {
-  SPAN7_8_10_11_SLOT,
-  getModuleDef2,
-  getLoadedLabwareDefinitionsByUri,
-} from '@opentrons/shared-data'
-import type {
-  CompletedProtocolAnalysis,
-  LoadLabwareRunTimeCommand,
-  ProtocolAnalysisOutput,
-  LoadModuleRunTimeCommand,
-  RunTimeCommand,
-  ModuleLocation,
-  ModuleModel,
-  LabwareDefinition2,
-} from '@opentrons/shared-data'
-import { getInitialLoadedLabwareByAdapter } from './getInitiallyLoadedLabwareByAdapter'
-
-interface ModuleInSlot {
-  moduleModel: ModuleModel
-  moduleLocation: ModuleLocation
-  nestedLabwareId: string | null
-  nestedLabwareDef: LabwareDefinition2 | null
-  nestedLabwareNickName: string | null
-}
-export const getModulesInSlots = (
-  protocolAnalysis: ProtocolAnalysisOutput | CompletedProtocolAnalysis
-): ModuleInSlot[] => {
-  if (protocolAnalysis != null && 'modules' in protocolAnalysis) {
-    const { commands, modules, labware } = protocolAnalysis
-    const initialLoadedLabwareByAdapter = getInitialLoadedLabwareByAdapter(
-      commands
-    )
-    return modules.reduce<ModuleInSlot[]>((acc, module) => {
-      const moduleDef = getModuleDef2(module.model)
-      const nestedLabwareId =
-        commands
-          .filter(
-            (command): command is LoadLabwareRunTimeCommand =>
-              command.commandType === 'loadLabware'
-          )
-          .find(
-            (command: LoadLabwareRunTimeCommand) =>
-              typeof command.params.location === 'object' &&
-              'moduleId' in command.params.location &&
-              command.params.location.moduleId === module.id
-          )?.result?.labwareId ?? null
-      const nestedLabware = labware.find(
-        item => nestedLabwareId != null && item.id === nestedLabwareId
-      )
-      const labwareDefinitionsByUri = getLoadedLabwareDefinitionsByUri(commands)
-      const nestedLabwareDef =
-        nestedLabware != null
-          ? labwareDefinitionsByUri[nestedLabware.definitionUri]
-          : null
-      const moduleInitialLoadInfo = getModuleInitialLoadInfo(
-        module.id,
-        commands
-      )
-      let slotName = moduleInitialLoadInfo.location.slotName
-      // Note: this is because PD for OT2 represents the slot the TC sits in as a made up slot. We want it to be rendered in slot 7
-      if (slotName === SPAN7_8_10_11_SLOT) {
-        slotName = '7'
-      }
-
-      const labwareInAdapterInMod =
-        nestedLabwareId != null
-          ? initialLoadedLabwareByAdapter[nestedLabwareId]
-          : null
-      //  NOTE: only rendering the labware on top most layer so
-      //  either the adapter or the labware are rendered but not both
-      const topLabwareDefinition =
-        labwareInAdapterInMod?.result?.definition ?? nestedLabwareDef
-      const topLabwareId =
-        labwareInAdapterInMod?.result?.labwareId ?? nestedLabwareId
-      const topLabwareDisplayName =
-        labwareInAdapterInMod != null
-          ? labwareInAdapterInMod.params.displayName?.toString() ?? null
-          : nestedLabware?.displayName?.toString() ?? null
-      return [
-        ...acc,
-        {
-          moduleModel: moduleDef.model,
-          moduleLocation: { slotName },
-          nestedLabwareId: topLabwareId,
-          nestedLabwareDef: topLabwareDefinition,
-          nestedLabwareNickName: topLabwareDisplayName,
-        },
-      ]
-    }, [])
-  }
-
-  return []
-}
-
-function getModuleInitialLoadInfo(
-  moduleId: string,
-  commands: RunTimeCommand[]
-): {
-  location: ModuleLocation
-  protocolLoadOrder: number
-} {
-  const moduleLoadIndex = commands.findIndex(
-    (command: RunTimeCommand): command is LoadModuleRunTimeCommand =>
-      command.commandType === 'loadModule' &&
-      command.result?.moduleId === moduleId
-  )
-
-  if (moduleLoadIndex === -1) {
-    throw new Error(
-      'expected to be able to find module location, but could not'
-    )
-  }
-
-  const protocolLoadOrder = commands
-    .slice(0, moduleLoadIndex)
-    .reduce(
-      (moduleLoadCount, command) =>
-        command.commandType === 'loadModule'
-          ? moduleLoadCount + 1
-          : moduleLoadCount,
-      0
-    )
-
-  return {
-    location: (commands[moduleLoadIndex] as LoadModuleRunTimeCommand).params
-      .location,
-    protocolLoadOrder,
-  }
-}

package/src/hardware-sim/ProtocolDeck/utils/getStandardDeckViewLayerBlockList.ts

@@ -1,29 +0,0 @@
-import type { RobotType } from '@opentrons/shared-data'
-
-const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
-  'calibrationMarkings',
-  'fixedBase',
-  'doorStops',
-  'metalFrame',
-  'removalHandle',
-  'removableDeckOutline',
-  'screwHoles',
-]
-
-const OT3_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
-  'DECK_BASE',
-  'BARCODE_COVERS',
-]
-
-export const getStandardDeckViewLayerBlockList = (
-  robotType: RobotType
-): string[] => {
-  switch (robotType) {
-    case 'OT-2 Standard':
-      return OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST
-    case 'OT-3 Standard':
-      return OT3_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST
-    default:
-      return []
-  }
-}

package/src/hardware-sim/ProtocolDeck/utils/getWellFillFromLabwareId.ts

@@ -1,30 +0,0 @@
-import type { Liquid } from '@opentrons/shared-data'
-import type { WellFill } from '../../Labware'
-import type { LabwareByLiquidId } from '../types'
-
-export function getWellFillFromLabwareId(
-  labwareId: string,
-  liquidsInLoadOrder: Liquid[],
-  labwareByLiquidId: LabwareByLiquidId
-): WellFill {
-  let labwareWellFill: WellFill = {}
-  const liquidIds = Object.keys(labwareByLiquidId)
-  const labwareInfo = Object.values(labwareByLiquidId)
-
-  labwareInfo.forEach((labwareArray, index) => {
-    labwareArray.forEach(labware => {
-      if (labware.labwareId === labwareId) {
-        const liquidId = liquidIds[index]
-        const liquid = liquidsInLoadOrder.find(liquid => liquid.id === liquidId)
-        const wellFill: {
-          [well: string]: string
-        } = {}
-        Object.keys(labware.volumeByWell).forEach(key => {
-          wellFill[key] = liquid?.displayColor ?? ''
-        })
-        labwareWellFill = { ...labwareWellFill, ...wellFill }
-      }
-    })
-  })
-  return labwareWellFill
-}

package/src/hardware-sim/ProtocolDeck/utils/index.ts

@@ -1,4 +0,0 @@
-export * from './getLabwareInSlots'
-export * from './getStandardDeckViewLayerBlockList'
-export * from './getLabwareInfoByLiquidId'
-export * from './getWellFillFromLabwareId'

package/src/hardware-sim/utils.ts

@@ -1,18 +0,0 @@
-import type { AffineTransformMatrix } from '@opentrons/shared-data'
-
-export const IDENTITY_AFFINE_TRANSFORM: AffineTransformMatrix = [
-  [1, 0, 0, 0],
-  [0, 1, 0, 0],
-  [0, 0, 1, 0],
-  [0, 0, 0, 1],
-]
-
-// multiply two matrices together (dot product)
-export function multiplyMatrices(a: number[][], b: number[][]): number[][] {
-  const transposedB = b[0].map((_val, index) => b.map(row => row[index]))
-  return a.map(rowA =>
-    transposedB.map(rowB =>
-      rowA.reduce((acc, valA, colIndexA) => acc + valA * rowB[colIndexA], 0)
-    )
-  )
-}

package/src/instrument/InstrumentDiagram.stories.tsx

@@ -1,42 +0,0 @@
-import type * as React from 'react'
-import keyBy from 'lodash/keyBy'
-import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
-
-import { InstrumentDiagram as InstrumentDiagramComponent } from './InstrumentDiagram'
-
-import type { Story, Meta } from '@storybook/react'
-
-const allPipetteSpecsByDisplayNames = keyBy(
-  getAllPipetteNames().map(getPipetteNameSpecs),
-  'displayName'
-)
-
-export default {
-  title: 'Library/Organisms/Instrument Diagram',
-  argTypes: {
-    mount: {
-      control: {
-        type: 'select',
-        options: ['left', 'right'],
-      },
-      defaultValue: 'left',
-    },
-    pipetteSpecs: {
-      control: {
-        type: 'select',
-        options: Object.keys(allPipetteSpecsByDisplayNames),
-      },
-      defaultValue: Object.keys(allPipetteSpecsByDisplayNames)[0],
-    },
-  },
-} as Meta
-
-const Template: Story<
-  React.ComponentProps<typeof InstrumentDiagramComponent>
-> = ({ pipetteSpecs, ...args }) => (
-  <InstrumentDiagramComponent
-    {...args}
-    pipetteSpecs={allPipetteSpecsByDisplayNames[pipetteSpecs]}
-  />
-)
-export const InstrumentDiagram = Template.bind({})

package/src/instrument/InstrumentGroup.stories.tsx

@@ -1,88 +0,0 @@
-import type * as React from 'react'
-import reduce from 'lodash/reduce'
-import keyBy from 'lodash/keyBy'
-import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
-
-import { InstrumentGroup as InstrumentGroupComponent } from './InstrumentGroup'
-
-import type { Story, Meta } from '@storybook/react'
-
-const allPipetteSpecsByDisplayNames = keyBy(
-  getAllPipetteNames().map(getPipetteNameSpecs),
-  'displayName'
-)
-const leftPipettesByName = reduce(
-  allPipetteSpecsByDisplayNames,
-  (acc, pipetteSpecs, displayName) => {
-    return {
-      ...acc,
-      [displayName]: {
-        mount: 'left',
-        description: displayName,
-        pipetteSpecs,
-        isDisabled: false,
-      },
-    }
-  },
-  {}
-)
-const rightPipettesByName = reduce(
-  allPipetteSpecsByDisplayNames,
-  (acc, pipetteSpecs, displayName) => {
-    return {
-      ...acc,
-      [displayName]: {
-        mount: 'right',
-        description: displayName,
-        pipetteSpecs,
-        isDisabled: false,
-      },
-    }
-  },
-  {}
-)
-
-export default {
-  title: 'Library/Organisms/Instrument Group',
-  argTypes: {
-    left: {
-      control: {
-        type: 'select',
-        options: Object.keys(leftPipettesByName),
-      },
-      defaultValue: Object.keys(leftPipettesByName)[0],
-    },
-    right: {
-      control: {
-        type: 'select',
-        options: Object.keys(rightPipettesByName),
-      },
-      defaultValue: Object.keys(rightPipettesByName)[0],
-    },
-  },
-} as Meta
-
-const Template: Story<
-  React.ComponentProps<typeof InstrumentGroupComponent>
-> = ({ left, right, ...args }) => (
-  <InstrumentGroupComponent
-    {...args}
-    left={leftPipettesByName[left]}
-    right={rightPipettesByName[right]}
-  />
-)
-export const InstrumentGroup = Template.bind({})
-InstrumentGroup.args = {
-  left: {
-    mount: 'left',
-    description: 'p300 8-Channel',
-    pipetteSpecs: { channels: 8, displayCategory: 'GEN1' },
-    isDisabled: false,
-  },
-  right: {
-    mount: 'right',
-    description: 'p10 Single',
-    pipetteSpecs: { channels: 1, displayCategory: 'GEN2' },
-    isDisabled: true,
-  },
-}

package/src/instrument/InstrumentGroup.tsx

@@ -1,35 +0,0 @@
-import { InstrumentInfo } from './InstrumentInfo'
-import styles from './instrument.module.css'
-
-import type { InstrumentInfoProps } from './InstrumentInfo'
-
-export interface InstrumentGroupProps {
-  showMountLabel?: boolean | null | undefined
-  left?: InstrumentInfoProps | null | undefined
-  right?: InstrumentInfoProps | null | undefined
-}
-
-const EMPTY_INSTRUMENT_PROPS = {
-  description: 'None',
-  tiprackModel: 'N/A',
-  isDisabled: false,
-}
-
-/**
- * Renders a left and right pipette diagram & info.
- * Takes child `InstrumentInfo` props in `right` and `left` props.
- */
-export function InstrumentGroup(props: InstrumentGroupProps): JSX.Element {
-  const { left, right, showMountLabel } = props
-
-  const leftProps = left || { ...EMPTY_INSTRUMENT_PROPS, mount: 'left' }
-  const rightProps = right || { ...EMPTY_INSTRUMENT_PROPS, mount: 'right' }
-  return (
-    <section className={styles.pipette_group}>
-      <InstrumentInfo {...leftProps} showMountLabel={showMountLabel} />
-      {leftProps.pipetteSpecs?.channels === 96 ? null : (
-        <InstrumentInfo {...rightProps} showMountLabel={showMountLabel} />
-      )}
-    </section>
-  )
-}

package/src/instrument/InstrumentInfo.tsx

@@ -1,106 +0,0 @@
-import { LEFT, RIGHT } from '@opentrons/shared-data'
-import { Flex } from '../primitives'
-import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
-import { LegacyStyledText } from '../atoms'
-import { DIRECTION_COLUMN, JUSTIFY_CENTER } from '../styles'
-import { InstrumentDiagram } from './InstrumentDiagram'
-
-import type { ReactNode } from 'react'
-import type { Mount } from '../robot-types'
-import type { InstrumentDiagramProps } from './InstrumentDiagram'
-
-import styles from './instrument.module.css'
-
-export interface InstrumentInfoProps {
-  /** 'left' or 'right' */
-  mount: Mount
-  /** human-readable description, eg 'p300 Single-channel' */
-  description: string
-  /** specs of mounted pipette */
-  pipetteSpecs?: InstrumentDiagramProps['pipetteSpecs'] | null
-  /** paired tiprack models */
-  tiprackModels?: string[]
-  /** children to display under the info */
-  children?: ReactNode
-  /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
-  showMountLabel?: boolean | null
-}
-
-const MAX_WIDTH = '14rem'
-
-export function InstrumentInfo(props: InstrumentInfoProps): JSX.Element {
-  const {
-    mount,
-    showMountLabel,
-    description,
-    tiprackModels,
-    pipetteSpecs,
-    children,
-  } = props
-
-  const has96Channel = pipetteSpecs?.channels === 96
-  return (
-    <Flex justifyContent={JUSTIFY_CENTER} gridGap={SPACING.spacing16}>
-      {mount === RIGHT && pipetteSpecs ? (
-        <InstrumentDiagram
-          pipetteSpecs={pipetteSpecs}
-          className={styles.pipette_icon}
-          mount={mount}
-        />
-      ) : null}
-      {/* NOTE: the color is our legacy c-font-dark, which matches the other colors in this component **/}
-      <Flex
-        flexDirection={DIRECTION_COLUMN}
-        color="#4a4a4a"
-        gridGap={SPACING.spacing8}
-      >
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-          <LegacyStyledText
-            as="h3"
-            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-          >
-            {showMountLabel && !has96Channel ? `${mount} pipette` : 'pipette'}
-          </LegacyStyledText>
-          <LegacyStyledText as="p" width="max-content" maxWidth={MAX_WIDTH}>
-            {description}
-          </LegacyStyledText>
-        </Flex>
-
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-          <LegacyStyledText as="h3" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-            {'Tip rack'}
-          </LegacyStyledText>
-          <ul>
-            {tiprackModels != null && tiprackModels.length > 0 ? (
-              tiprackModels.map((model, index) => (
-                <li key={`${model}_${index}`}>
-                  <LegacyStyledText
-                    as="p"
-                    width="max-content"
-                    maxWidth={MAX_WIDTH}
-                  >
-                    {model}
-                  </LegacyStyledText>
-                </li>
-              ))
-            ) : (
-              <LegacyStyledText as="p" width="max-content" maxWidth={MAX_WIDTH}>
-                {'None'}
-              </LegacyStyledText>
-            )}
-          </ul>
-        </Flex>
-      </Flex>
-
-      {children}
-      {mount === LEFT && pipetteSpecs ? (
-        <InstrumentDiagram
-          pipetteSpecs={pipetteSpecs}
-          className={styles.pipette_icon}
-          mount={mount}
-        />
-      ) : null}
-    </Flex>
-  )
-}

package/src/instrument/PipetteSelect.stories.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react'
-import { PipetteSelect as PipetteSelectComponent } from './PipetteSelect'
-
-import type { Story, Meta } from '@storybook/react'
-
-export default {
-  title: 'Library/Organisms/Pipette Select',
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof PipetteSelectComponent>> = ({
-  pipetteName,
-  ...args
-}) => {
-  const [pipetteNameControlled, setPipetteNameControlled] = React.useState(
-    pipetteName
-  )
-  const handleChange = (pipName: string): unknown => {
-    setPipetteNameControlled(pipName)
-  }
-  return (
-    <PipetteSelectComponent
-      {...args}
-      pipetteName={pipetteNameControlled}
-      onPipetteChange={handleChange}
-    />
-  )
-}
-export const PipetteSelect = Template.bind({})
-PipetteSelect.args = {
-  nameBlocklist: [
-    'p20_multi_gen2',
-    'p300_multi_gen2',
-    'p20_single_flex',
-    'p300_single_flex',
-    'p1000_single_flex',
-    'p1000_multi_flex',
-    'p50_multi_flex',
-  ],
-  enableNoneOption: true,
-}

package/src/instrument/PipetteSelect.tsx

@@ -1,170 +0,0 @@
-import groupBy from 'lodash/groupBy'
-import {
-  getAllPipetteNames,
-  getPipetteNameSpecs,
-  GEN1,
-  GEN2,
-  FLEX,
-} from '@opentrons/shared-data'
-import { Flex } from '../primitives'
-import { Select, CONTEXT_VALUE } from '../forms'
-import styles from './PipetteSelect.module.css'
-import type { PipetteNameSpecs } from '@opentrons/shared-data'
-import type { ActionMeta, SingleValue, MultiValue } from 'react-select'
-import type { SelectOption } from '../forms'
-export interface PipetteSelectProps {
-  /** currently selected value, optional in case selecting triggers immediate action */
-  pipetteName?: string | null
-  /** react-select change handler */
-  onPipetteChange: (
-    pipetteName: string | null,
-    e: ActionMeta<SelectOption>
-  ) => void
-  /** list of pipette names to omit */
-  nameBlocklist?: string[]
-  /** whether or not "None" shows up as the default option */
-  enableNoneOption?: boolean
-  /** input tabIndex */
-  tabIndex?: string | number
-  /** classes to apply to the top-level component */
-  className?: string
-  /** custom id to be applied. likely to be used as a data test id for e2e testing */
-  id?: string
-  disabled?: boolean
-}
-
-// TODO(mc, 2019-10-14): i18n
-const NONE = 'None'
-const OPTION_NONE = { value: '', label: NONE }
-
-const PIPETTE_SORT = ['maxVolume', 'channels'] as const
-
-// @ts-expect-error(mc, 2021-04-27): use TS type guard for filter
-const allPipetteNameSpecs: PipetteNameSpecs[] = getAllPipetteNames(
-  ...PIPETTE_SORT
-)
-  .map(getPipetteNameSpecs)
-  .filter(Boolean)
-
-const specsByCategory = groupBy(allPipetteNameSpecs, 'displayCategory')
-
-const specToOption = ({
-  name,
-  displayName,
-}: PipetteNameSpecs): { value: string; label: string } => ({
-  value: name,
-  label: displayName,
-})
-
-export const PipetteSelect = (props: PipetteSelectProps): JSX.Element => {
-  const {
-    tabIndex,
-    className,
-    enableNoneOption,
-    id,
-    nameBlocklist = [],
-    disabled = false,
-  } = props
-  const allowlist = ({ value }: SelectOption): boolean => {
-    return !nameBlocklist.some(n => n === value)
-  }
-  const flexOptions = specsByCategory[FLEX].map(specToOption).filter(allowlist)
-  const gen2Options = specsByCategory[GEN2].map(specToOption).filter(allowlist)
-  const gen1Options = specsByCategory[GEN1].map(specToOption).filter(allowlist)
-  const groupedOptions = [
-    ...(enableNoneOption ? [OPTION_NONE] : []),
-    ...(flexOptions.length > 0 ? [{ options: flexOptions }] : []),
-    ...(gen2Options.length > 0 ? [{ options: gen2Options }] : []),
-    ...(gen1Options.length > 0 ? [{ options: gen1Options }] : []),
-  ]
-  const defaultValue = enableNoneOption ? OPTION_NONE : null
-  const value =
-    allPipetteNameSpecs
-      .filter(s => s.name === props.pipetteName)
-      .map(specToOption)[0] || defaultValue
-
-  return (
-    <Select
-      isSearchable={false}
-      menuPosition="fixed"
-      className={className}
-      options={groupedOptions}
-      value={value}
-      isDisabled={disabled}
-      defaultValue={defaultValue}
-      tabIndex={tabIndex as number}
-      id={id}
-      onChange={(
-        option: SingleValue<SelectOption> | MultiValue<SelectOption>,
-        e: ActionMeta<SelectOption>
-      ) => {
-        const value = (option as SelectOption).value
-          ? (option as SelectOption).value
-          : null
-        props.onPipetteChange(value, e)
-      }}
-      formatOptionLabel={(option, { context }) => {
-        const { value } = option
-        const label = option.label || value
-        const specs = allPipetteNameSpecs.find(s => s.name === value)
-
-        return context === CONTEXT_VALUE || value === '' || !specs ? (
-          label
-        ) : (
-          <PipetteNameItem {...specs} />
-        )
-      }}
-    />
-  )
-}
-
-const PipetteNameItem = (props: PipetteNameSpecs): JSX.Element => {
-  const { channels, name, displayCategory } = props
-  const volumeClassMaybeMatch = name && name.match(/p(\d+)/i)
-  const volumeClass = volumeClassMaybeMatch ? volumeClassMaybeMatch[1] : ''
-  let displayChannels = ''
-  if (channels === 1) {
-    displayChannels = 'Single-Channel'
-  } else if (channels === 8) {
-    displayChannels = '8-Channel'
-  } else if (channels === 96) {
-    displayChannels = '96-Channel'
-  }
-  return (
-    <Flex
-      data-test={dataIdFormat(
-        'PipetteNameItem',
-        volumeClass,
-        channels,
-        displayCategory
-      )}
-    >
-      <div className={styles.pipette_volume_class}>{volumeClass}</div>
-      <div className={styles.pipette_channels}>{displayChannels}</div>
-      <div className={styles.pipette_category}>
-        {channels === 96 ? 'FLEX' : displayCategory}
-      </div>
-    </Flex>
-  )
-}
-
-const dataIdFormat = (
-  componentName: string,
-  volumeClass: string,
-  channels: number,
-  displayCategory: string
-): string => {
-  let dataIdFormatChannels
-  if (channels === 1) {
-    dataIdFormatChannels = 'SingleChannel'
-  } else if (channels === 8) {
-    dataIdFormatChannels = 'MultiChannel'
-  } else {
-    dataIdFormatChannels = '96-Channel'
-  }
-  const dataIdFormatVolumeClass = volumeClass.toLowerCase()
-  const dataIdFormatDisplayCategory =
-    displayCategory.charAt(0) + displayCategory.slice(1).toLowerCase()
-
-  return `${componentName}_${dataIdFormatVolumeClass}${dataIdFormatChannels}${dataIdFormatDisplayCategory}`
-}