feat(components): add pipette render component #8414

shlokamin · 2021-09-28T03:50:54Z

Overview

This PR adds a PipetteRender component into the components library. Closes #8379

Changelog

Add pipette render component

Review requests

Head over here and give it a try! Use both single and multi channel pipettes, and look with different labware
Code review

Note: i had to play around with the hard coded dimensions outlined in the ticket to make them fit properly.

Risk assessment

Low

codecov · 2021-09-28T03:51:46Z

Codecov Report

Merging #8414 (2ef5f49) into edge (26f8ea4) will decrease coverage by 0.06%.
The diff coverage is 63.63%.

@@            Coverage Diff             @@
##             edge    #8414      +/-   ##
==========================================
- Coverage   74.31%   74.24%   -0.07%     
==========================================
  Files        1672     1681       +9     
  Lines       45149    45289     +140     
  Branches     4595     4643      +48     
==========================================
+ Hits        33553    33627      +74     
- Misses      10803    10860      +57     
- Partials      793      802       +9

Flag	Coverage Δ
app	`71.14% <ø> (+0.03%)`	⬆️
components	`47.18% <63.63%> (-0.57%)`	⬇️
labware-library	`50.22% <ø> (ø)`
protocol-designer	`44.15% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...src/hardware-sim/Pipette/PipetteRender.stories.tsx	`0.00% <0.00%> (ø)`
...omponents/src/testing/utils/mountWithProviders.tsx	`0.00% <ø> (ø)`
components/src/testing/utils/mountWithStore.ts	`0.00% <ø> (ø)`
...mponents/src/testing/utils/renderWithProviders.tsx	`0.00% <0.00%> (ø)`
...src/hardware-sim/Pipette/EightEmanatingNozzles.tsx	`100.00% <100.00%> (ø)`
...nents/src/hardware-sim/Pipette/EmanatingNozzle.tsx	`100.00% <100.00%> (ø)`
...ponents/src/hardware-sim/Pipette/PipetteRender.tsx	`100.00% <100.00%> (ø)`
components/src/hardware-sim/Pipette/constants.ts	`100.00% <100.00%> (ø)`
components/src/testing/utils/matchers.ts	`83.33% <100.00%> (ø)`
.../RunSetupCard/RobotCalibration/DeckCalibration.tsx	`88.88% <0.00%> (-3.97%)`	⬇️
... and 14 more

shlokamin · 2021-09-28T15:31:11Z

components/__utils__/tsconfig.json

+{
+  "extends": "../../tsconfig-base.json",
+  "references": [],
+  "compilerOptions": {
+    "composite": true,
+    "emitDeclarationOnly": false,
+    "rootDir": ".",
+    "outDir": "lib"
+  }
+}


had to add this because before none of the utils were actually being used within components, they were just being used by other modules in the monorepo

actually, i don't think this is the right way to do this bcuz we'd have to split up code in __utils__ into src and lib (as the current code stands lib is already being generated by the typescript compiler). yuck, maybe we should just expose these utils properly out of components/src. @b-cooper @smb2268 what say y'all?

I think it makes sense to expose the utils from components/src, but I agree with what @b-cooper said in slack that it could be helpful to come up with a new naming convention for the utils so that they're more easily distinguishable from the other exports. I'll try to come up with some ideas for what that could be

shlokamin · 2021-09-28T15:34:33Z

components/src/hardware-sim/Pipette/PipetteRender.tsx

+  const cy = channels === 1 ? SINGLE_CHANNEL_PIPETTE_HEIGHT / 2 : 14
+  const x = labwareDef.wells.A1.x - cx
+  const y = channels === 1 ? labwareDef.wells.A1.y - cy : -2


some of these magic numbers are here because we're not actually rendering the nozzles from pipette geometry, we're hard coding values. it's probably worth at least throwing these magic numbers into constants so others can follow what's going on here

shlokamin · 2021-09-28T15:36:36Z

components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx

+      getByText(
+        `rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`
+      )
+      mockEmanatingNozzle.mockRestore()


oddly enough, doing a resetAllWhenMocks() or jest.restoreAllMocks() in an afterEach does not clear out calls to mockEmanatingNozzle. i'm not sure why, and dont want to go down that rabbithole right now

shlokamin · 2021-09-28T15:37:40Z

components/src/hardware-sim/Pipette/styles.css

+.overflow {
+  overflow: visible;
+}


this is unfortunately necessary because RobotCoordsForeignDiv still uses css modules, and i need to tell it to allow the circle animations to overflow

shlokamin · 2021-09-28T15:39:00Z

jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
  setupFilesAfterEnv: [
    '<rootDir>/scripts/setup-enzyme.js',
    '<rootDir>/scripts/setup-global-mocks.js',
+    '<rootDir>/scripts/setup-global-imports.js',


this got deleted somehow, adding it back. once this merges i can remove all import '@testing-library/jest-dom' statements in the monorepo

shlokamin · 2021-09-28T15:51:04Z

components/__utils__/matchers.ts

@@ -11,3 +11,5 @@ export const partialComponentPropsMatcher = (argsToMatch: unknown) =>
  when.allArgs((args, equals) =>
    equals(args[0], expect.objectContaining(argsToMatch))
  )
+
+export const anyProps = partialComponentPropsMatcher({})


this dude can be used to tell your tests that your mock component can take in any props

shlokamin · 2021-09-28T17:27:27Z

code cov is mad bcuz technically the storybook component isn't tested, but its not source code

jerader

This is really cool! Thanks for the sprinkle of comments explaining why you did some things. The only thing is the 8 emanating nozzles are slightly off center when you are looking at the tiprack labware. I think you mentioned that you fixed this in a commit? So not sure why it is still off center. But other than that, looks good to me. 🚀

shlokamin · 2021-09-28T22:03:30Z

the only thing is the 8 emanating nozzles are slightly off center when you are looking at the tiprack labware

oops! forgot to push, just did

smb2268

This is really cool, Shlok! I think it looks great. The only thing I noticed was that the blue circle within the grey outline for the Opentrons 96 TIpRack looks a little above the center.

smb2268 · 2021-10-01T14:48:37Z

components/__utils__/tsconfig.json

+{
+  "extends": "../../tsconfig-base.json",
+  "references": [],
+  "compilerOptions": {
+    "composite": true,
+    "emitDeclarationOnly": false,
+    "rootDir": ".",
+    "outDir": "lib"
+  }
+}


I think it makes sense to expose the utils from components/src, but I agree with what @b-cooper said in slack that it could be helpful to come up with a new naming convention for the utils so that they're more easily distinguishable from the other exports. I'll try to come up with some ideas for what that could be

#8379

shlokamin commented Sep 28, 2021

View reviewed changes

shlokamin marked this pull request as ready for review September 28, 2021 17:27

shlokamin requested a review from a team as a code owner September 28, 2021 17:27

shlokamin requested review from b-cooper, jerader, Kadee80 and smb2268 and removed request for a team September 28, 2021 17:27

jerader approved these changes Sep 28, 2021

View reviewed changes

smb2268 approved these changes Oct 1, 2021

View reviewed changes

shlokamin force-pushed the components_add-pipette-render-component branch from e95f6af to f04a5e9 Compare October 1, 2021 15:44

shlokamin added 15 commits October 4, 2021 10:59

feat(components): add pipette render component

2d02d05

#8379

reorganize components

6d0715c

fix TS config

ff195eb

revert changes to labware setup

bd2fa22

rever changes to labware schema descriptions

7f7dce6

remove console log

b96927f

format

aa7a714

lint

21999d1

add test coverage for emanating nozzles

d2ae195

remove magic numbers

cd20340

format

b85c6c1

add border around pipette

51356b2

adjust pipette nozzle center

03a7a75

move multi channel pipette center y down

1de0c3a

make nozzle smaller and make animations faster

a5afacc

shlokamin added 5 commits October 4, 2021 10:59

format

01197d9

make testing utils a first class directory

1134681

fix linting issues

8693b87

change renderWithProviders to return a tuple with component and store

637524d

speed up nozzle animations

99c2256

shlokamin force-pushed the components_add-pipette-render-component branch from 81c3374 to 99c2256 Compare October 4, 2021 18:58

update test

2ef5f49

shlokamin merged commit 8c008c4 into edge Oct 4, 2021

shlokamin deleted the components_add-pipette-render-component branch October 4, 2021 20:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): add pipette render component #8414

feat(components): add pipette render component #8414

shlokamin commented Sep 28, 2021 •

edited

Loading

codecov bot commented Sep 28, 2021 •

edited

Loading

shlokamin Sep 28, 2021

shlokamin Sep 29, 2021 •

edited

Loading

smb2268 Oct 1, 2021

shlokamin Sep 28, 2021

shlokamin Sep 28, 2021

shlokamin Sep 28, 2021

shlokamin Sep 28, 2021

shlokamin Sep 28, 2021

shlokamin commented Sep 28, 2021

jerader left a comment

shlokamin commented Sep 28, 2021 •

edited

Loading

smb2268 left a comment

smb2268 Oct 1, 2021

feat(components): add pipette render component #8414

feat(components): add pipette render component #8414

Conversation

shlokamin commented Sep 28, 2021 • edited Loading

Overview

Changelog

Review requests

Risk assessment

codecov bot commented Sep 28, 2021 • edited Loading

Codecov Report

Choose a reason for hiding this comment

shlokamin Sep 29, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shlokamin commented Sep 28, 2021

jerader left a comment

Choose a reason for hiding this comment

shlokamin commented Sep 28, 2021 • edited Loading

smb2268 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shlokamin commented Sep 28, 2021 •

edited

Loading

codecov bot commented Sep 28, 2021 •

edited

Loading

shlokamin Sep 29, 2021 •

edited

Loading

shlokamin commented Sep 28, 2021 •

edited

Loading