Skip to content

Commit

Permalink
[Plate] CSS Fix for CHip x View and
Browse files Browse the repository at this point in the history 
Use a integer to build number of drops
  • Loading branch information
@jbflo
jbflo committed Jun 21, 2024
1 parent a766d77 commit e7bea09
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 27 deletions.
7 changes: 2 additions & 5 deletions test/HardwareObjectsMockup.xml/plate_manipulator.xml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<object class="PlateManipulatorMockup">
<!-- <equipment class = "PlateManipulator"> -->
<!-- <exporter_address>....embl.fr:443</exporter_address> -->

<username>Sample Changer</username>
<!-- <command type="exporter" name="MoveToDrop">startMovePlateToShelf</command>
Expand All @@ -16,16 +15,14 @@
<!-- <channel type="exporter" name="DropLocation">DropLocation</channel>
<channel type="exporter" name="CurrentPhase">CurrentPhase</channel> -->

<!-- TEMP Comment: Please Do not rename Plate Label -->

<plateLabel>Crystal Direct</plateLabel>
<numCols>12</numCols>
<numRows>8</numRows>
<numDrops>3</numDrops>
<referencePosX>0.65</referencePosX>

<!--
<plateLabel>ChipX</plateLabel>

<!-- <plateLabel>ChipX</plateLabel>
<numCols>1</numCols>
<numRows>2</numRows>
<numDrops>20</numDrops>
Expand Down
36 changes: 26 additions & 10 deletions ui/src/components/Equipment/PlateManipulator.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,13 +192,18 @@ export default function PlateManipulator(props) {
selectedDrop,
);

const _numberOfDrops = Array.from(
{ length: plate.numberOfDrops },
(_, i) => i + 1,
);

const renderWellPlateInner = (comp, x, y, x1, y1, d) =>
plate.numOfdrops.map((drop) => (
_numberOfDrops.map((drop) => (
<Button
variant="content"
variant="light"
as={comp}
key={`key-${drop}-tr`}
style={{ width: 'fit-content', height: 'fit-content' }}
className={styles.innerPlate}
onContextMenu={(e) => showContextMenu(e, `drop-${selectedDrop}-tr`)}
>
<rect
Expand All @@ -209,7 +214,7 @@ export default function PlateManipulator(props) {
style={{
fill: Number(loadedDrop) === drop ? '#ef9a9a' : '#9e9e9e',
stroke: drop === selectedDrop ? '#0177fdad' : '#888888',
strokeWidth: drop === selectedDrop ? '2' : '1',
strokeWidth: drop === selectedDrop ? '3' : '1',
}}
onClick={() => {
selectDrop(drop);
Expand All @@ -224,6 +229,7 @@ export default function PlateManipulator(props) {
<text
x={x1}
y={y1 - d * drop}
transform={`rotate(${-plate.rotation}, ${x1}, ${y1 - d * drop - 5})`}
style={{
fontSize: `${plate.dropWidth / 2}px`,
stroke:
Expand Down Expand Up @@ -304,7 +310,7 @@ export default function PlateManipulator(props) {
height: 240,
marginTop: 15,
border: '1px solid #888888',
padding: '10px 0 0 10px',
padding: '15px 0 10px 20px',
transform: `rotate(${plate.rotation})`,
}}
>
Expand All @@ -314,7 +320,7 @@ export default function PlateManipulator(props) {
<svg
id="wellPlateRef"
className={styles.single_well}
width={240}
width={plate.name.includes('InSitu-1') ? 220 : 240}
height={240}
transform={`rotate(${plate.rotation})`}
>
Expand All @@ -323,7 +329,7 @@ export default function PlateManipulator(props) {
key={`wellplate-${wo.color}`}
width={
(120 * plate.wellOption.length) / (idx + 1) -
plate.welladjustWidth
(plate.name.includes('InSitu-1') ? 20 : 0)
}
height={225}
x={0}
Expand Down Expand Up @@ -543,29 +549,39 @@ export default function PlateManipulator(props) {
onClick={() => {
selectWell(row, col);
}}
onContextMenu={() => {
selectWell(row, col);
}}
>
<rect
width={plate.wellWidth}
height={plate.wellHeight}
x={0}
style={{
stroke: crystal !== null ? '#81c784' : '#eeeeee',
fill:
`${row}${col}:${loadedDrop}-0` ===
loadedSample.address
? '#e57373'
: '#e0e0e0',
}}
/>
<rect
width={plate.wellWidth - 20}
height={plate.wellHeight - 20}
x={10}
y={10}
style={{
fill: crystal !== null ? '#81c784' : '#eeeeee',
}}
/>
</svg>
<Menu
id={`wlw${row}${col}`}
className={styles.context_menu_provider}
>
<li className="dropdown-header">
<b>
Well `${row}${col}` ':'
{loadedDrop}
Well {row} {col} :{loadedDrop}
</b>
</li>
<Separator />
Expand Down
6 changes: 6 additions & 0 deletions ui/src/components/Equipment/equipment.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,12 @@
cursor: crosshair;
}

.innerPlate {
width: 30px;
height: 30px;
padding: 5%;
}

.context_menu_provider {
z-index: 1070;
}
Expand Down
17 changes: 5 additions & 12 deletions ui/src/reducers/sampleChanger.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,11 @@ const INITIAL_STATE = {
dropWidth: 35,
rowTitle: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
colTitle: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
numOfdrops: [1, 2, 3],
numberOfDrops: 3,
type: 'square',
title: '96 Deep Well Plate',
wellOption: [{ color: '#eeeeee' }, { color: '#e0e0e0' }],
rotation: 0,
welladjustWidth: 0,
},
{
name: 'Crystal QuickX',
Expand All @@ -27,12 +26,11 @@ const INITIAL_STATE = {
dropWidth: 35,
rowTitle: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
colTitle: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
numOfdrops: [1, 2],
numberOfDrops: 2,
type: 'square',
title: '96 Deep Well Plate',
wellOption: [{ color: '#eeeeee' }, { color: '#e0e0e0' }],
rotation: 0,
welladjustWidth: 0,
},
{
name: 'Mitegen InSitu-1',
Expand All @@ -42,12 +40,11 @@ const INITIAL_STATE = {
dropWidth: 35,
rowTitle: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
colTitle: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
numOfdrops: [1, 2, 3],
numberOfDrops: 3,
type: 'square',
title: '96 Deep Well Plate',
wellOption: [{ color: '#eeeeee' }, { color: '#e0e0e0' }],
rotation: -90,
welladjustWidth: 10,
},
{
name: 'Greiner Impact 1536',
Expand All @@ -57,12 +54,11 @@ const INITIAL_STATE = {
dropWidth: 35,
rowTitle: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
colTitle: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
numOfdrops: [1],
numberOfDrops: 1,
type: 'square',
title: '96 Deep Well Plate',
wellOption: [{ color: '#eeeeee' }],
rotation: 0,
welladjustWidth: 0,
},
{
name: 'ChipX',
Expand All @@ -72,14 +68,11 @@ const INITIAL_STATE = {
dropWidth: 20,
rowTitle: ['A', 'B'],
colTitle: [1],
numOfdrops: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
],
numberOfDrops: 20,
type: 'square',
title: '96 Deep Well Plate',
wellOption: [{ color: '#eeeeee' }],
rotation: 0,
welladjustWidth: 0,
},
],
currentPlateIndex: 4,
Expand Down

0 comments on commit e7bea09

Please sign in to comment.