diff --git a/frontend/src/FileManager/components/ContextMenu/ContextMenu.scss b/frontend/src/FileManager/components/ContextMenu/ContextMenu.scss
index 3018335e0..70fce17b4 100644
--- a/frontend/src/FileManager/components/ContextMenu/ContextMenu.scss
+++ b/frontend/src/FileManager/components/ContextMenu/ContextMenu.scss
@@ -2,12 +2,13 @@
.fm-context-menu {
position: absolute;
- background-color: rgb(175, 62, 62);
- border: 1px solid #c6c6c6;
+ background-color: #1e1e1e;
+ border: 1px solid #424242;
border-radius: 6px;
padding: 4px;
z-index: 1;
transition: opacity 0.1s linear;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
.file-context-menu-list {
font-size: 1.1em;
@@ -30,12 +31,12 @@
&:hover {
cursor: pointer;
- background-color: rgb(0, 0, 0, 0.07);
+ background-color: rgba(255, 255, 255, 0.08);
}
}
li.active {
- background-color: rgb(0, 0, 0, 0.07);
+ background-color: rgba(255, 255, 255, 0.08);
}
li.disable-paste {
@@ -49,34 +50,34 @@
}
.divider {
- border-bottom: 1px solid #c6c6c6;
+ border-bottom: 1px solid #424242;
margin: 5px 0 3px 0;
}
.list-expand-icon {
margin-left: auto;
- color: #444444;
+ color: #aaaaaa;
}
.sub-menu {
position: absolute;
left: calc(100% - 2px);
top: 0;
- background-color: white;
- border: 1px solid #c6c6c6;
+ background-color: #1e1e1e;
+ border: 1px solid #424242;
border-radius: 6px;
padding: 4px;
z-index: 1;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
.item-selected {
width: 13px;
- color: #444444;
+ color: #aaaaaa;
}
li {
-
&:hover {
- background-color: rgb(0, 0, 0, 0.07) !important;
+ background-color: rgba(255, 255, 255, 0.08) !important;
}
}
}
@@ -93,4 +94,4 @@
opacity: 1;
pointer-events: all;
visibility: visible;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/axon/WellSelectorComponent.js b/frontend/src/axon/WellSelectorComponent.js
index a2a2525c1..176edf015 100644
--- a/frontend/src/axon/WellSelectorComponent.js
+++ b/frontend/src/axon/WellSelectorComponent.js
@@ -7,7 +7,6 @@ import * as wsUtils from "./WellSelectorUtils.js";
import InfoPopup from "./InfoPopup.js";
-
import * as wellSelectorSlice from "../state/slices/WellSelectorSlice.js";
import * as experimentSlice from "../state/slices/ExperimentSlice.js";
import * as positionSlice from "../state/slices/PositionSlice.js";
@@ -47,15 +46,15 @@ import GpsFixedIcon from "@mui/icons-material/GpsFixed";
const WellSelectorComponent = () => {
//local state
const [wellLayoutFileList] = useState([
- "image/test.json",//TODO remove test
- "image/test1.json",//TODO remove test
+ "image/test.json", //TODO remove test
+ "image/test1.json", //TODO remove test
]);
// Pending layout switch awaiting user confirmation when pointList is non-empty
const [pendingLayoutEvent, setPendingLayoutEvent] = useState(null);
//child ref
- const childRef = useRef();//canvas
+ const childRef = useRef(); //canvas
const infoPopupRef = useRef();
//redux dispatcher
@@ -95,7 +94,6 @@ const WellSelectorComponent = () => {
fetchObjectiveControllerGetStatus(dispatch);
}, [dispatch]);
-
// Convert the current freehand polygon (drawn on the canvas) into
// experiment scan points using the current FOV and area-scan overlap.
const handleConvertFreehandToPoints = () => {
@@ -110,7 +108,7 @@ const WellSelectorComponent = () => {
if (!positions || positions.length === 0) {
if (infoPopupRef.current) {
infoPopupRef.current.showMessage(
- "Draw a closed freehand region first (FREEHAND mode, click+drag)."
+ "Draw a closed freehand region first (FREEHAND mode, click+drag).",
);
}
return;
@@ -139,17 +137,16 @@ const WellSelectorComponent = () => {
iX: 0,
iY: 0,
})),
- })
+ }),
);
childRef.current.clearFreehand && childRef.current.clearFreehand();
if (infoPopupRef.current) {
infoPopupRef.current.showMessage(
- `Created 1 freehand region with ${positions.length} scan position(s).`
+ `Created 1 freehand region with ${positions.length} scan position(s).`,
);
}
};
-
//##################################################################################
const handleModeChange = (mode) => {
// Update Redux state
@@ -216,24 +213,24 @@ const WellSelectorComponent = () => {
const offsetY = wellSelectorState.layoutOffsetY || 0;
//check defaults
- if (event.target.value === "Default") {
+ if (event.target.value === "Blank" || event.target.value === "Default") {
wellLayout = wsUtils.wellLayoutDefault;
} else if (event.target.value === "Heidstar 4x Histosample") {
wellLayout = wsUtils.wellLayoutDevelopment;
- } else if (event.target.value === "Wellplate 384") {
+ } else if (event.target.value === "Wellplate 384") {
// Generate 384 layout with offsets
wellLayout = wsUtils.generateWellLayout384({
offsetX: offsetX,
- offsetY: offsetY
+ offsetY: offsetY,
});
} else if (event.target.value === "DEP Chip") {
// Generate DEP Chip layout with offsets
wellLayout = wsUtils.generateWellLayoutDEPChip({
offsetX: offsetX,
- offsetY: offsetY
+ offsetY: offsetY,
});
} else if (event.target.value === "Ropod") {
- wellLayout = wsUtils.ropodLayout;
+ wellLayout = wsUtils.ropodLayout;
} else {
//donwload layout
apiDownloadJson(event.target.value) // Pass the JSON file path
@@ -241,11 +238,13 @@ const WellSelectorComponent = () => {
console.log("apiDownloadJson", data);
//handle layout
//TODO
- //set popup
- if (infoPopupRef.current) {
- infoPopupRef.current.showMessage("TODO impl me");
- }
- console.error("-----------------------------------------------TODO impl me------------------------------------------------------------");
+ //set popup
+ if (infoPopupRef.current) {
+ infoPopupRef.current.showMessage("TODO impl me");
+ }
+ console.error(
+ "-----------------------------------------------TODO impl me------------------------------------------------------------",
+ );
})
.catch((err) => {
//handle error if needed
@@ -258,7 +257,6 @@ const WellSelectorComponent = () => {
// Apply offsets to the layout
wellLayout = wsUtils.applyLayoutOffset(wellLayout, offsetX, offsetY);
-
//set new layout
dispatch(experimentSlice.setWellLayout(wellLayout));
};
@@ -270,17 +268,21 @@ const WellSelectorComponent = () => {
const currentY = positionState.y;
const currentZ = positionState.z;
// Create a new point with current position
- dispatch(experimentSlice.createPoint({
- x: currentX,
- y: currentY,
- z: currentZ,
- name: `Position ${experimentState.pointList.length + 1}`,
- shape: ""
- }));
-
+ dispatch(
+ experimentSlice.createPoint({
+ x: currentX,
+ y: currentY,
+ z: currentZ,
+ name: `Position ${experimentState.pointList.length + 1}`,
+ shape: "",
+ }),
+ );
+
// Show confirmation message
if (infoPopupRef.current) {
- infoPopupRef.current.showMessage(`Added position: X=${currentX}, Y=${currentY}`);
+ infoPopupRef.current.showMessage(
+ `Added position: X=${currentX}, Y=${currentY}`,
+ );
}
};
@@ -291,9 +293,11 @@ const WellSelectorComponent = () => {
// This uses the clicked position as the known position and transmits it to the backend
// via the setStageOffsetAxis API (single source of truth for offsets).
if (infoPopupRef.current) {
- infoPopupRef.current.showMessage("Right-click on the map where you are and select 'We are here' to calibrate the stage offset.");
+ infoPopupRef.current.showMessage(
+ "Right-click on the map where you are and select 'We are here' to calibrate the stage offset.",
+ );
}
- }
+ };
//##################################################################################
const handleMoveCameraSpeedXYChange = (event) => {
@@ -314,22 +318,21 @@ const WellSelectorComponent = () => {
//##################################################################################
return (
+ {/* Opentrons-style labware selection (loadName + well chips + condition labels) */}
+
- {/* Opentrons-style labware selection (loadName + well chips + condition labels) */}
-
+ {/* LAYOUT */}
+ {/* WellSelectorComponent with mode passed as prop width: "100%", height: "100%", display: "block"*/}
+
- {/* LAYOUT */}
- {/* WellSelectorComponent with mode passed as prop width: "100%", height: "100%", display: "block"*/}
-
+ {/* PARAMETER*/}
+ {/* Add a little spacer between the wellselector and layout */}
+
-{/* PARAMETER*/}
-{/* Add a little spacer between the wellselector and layout */}
-
-
-{/* PARAMETER */}
-{/* Add a little spacer between the wellselector and layout */}
-
-
+ {/* PARAMETER */}
+ {/* Add a little spacer between the wellselector and layout */}
+
{/* MODE — selection tools + stage actions, with explanatory icons + tooltips */}
@@ -410,17 +428,44 @@ const WellSelectorComponent = () => {
{/* Selection / interaction modes (active one is filled) */}
{[
- { mode: Mode.SINGLE_SELECT, label: "Single", icon: , tip: "Single point — click the map to add one imaging position." },
- { mode: Mode.AREA_SELECT, label: "Area", icon: , tip: "Area — drag a rectangle to tile-scan a whole region." },
- { mode: Mode.CUP_SELECT, label: "Well", icon: , tip: "Well — click wells to image the entire well." },
- { mode: Mode.FREEHAND_DRAW, label: "Freehand", icon: , tip: "Freehand — draw a closed region, then press Convert to fill it with scan points." },
- { mode: Mode.MOVE_CAMERA, label: "Move", icon: , tip: "Move camera — click the map to drive the stage to that point." },
+ {
+ mode: Mode.SINGLE_SELECT,
+ label: "Single",
+ icon: ,
+ tip: "Single point — click the map to add one imaging position.",
+ },
+ {
+ mode: Mode.AREA_SELECT,
+ label: "Area",
+ icon: ,
+ tip: "Area — drag a rectangle to tile-scan a whole region.",
+ },
+ {
+ mode: Mode.CUP_SELECT,
+ label: "Well",
+ icon: ,
+ tip: "Well — click wells to image the entire well.",
+ },
+ {
+ mode: Mode.FREEHAND_DRAW,
+ label: "Freehand",
+ icon: ,
+ tip: "Freehand — draw a closed region, then press Convert to fill it with scan points.",
+ },
+ {
+ mode: Mode.MOVE_CAMERA,
+ label: "Move",
+ icon: ,
+ tip: "Move camera — click the map to drive the stage to that point.",
+ },
].map((b) => (
)}
- } onClick={() => handleAddCurrentPosition()}>
+ }
+ onClick={() => handleAddCurrentPosition()}
+ >
Add current
-
- } onClick={() => handleCalibrateOffset()}>
+
+ }
+ onClick={() => handleCalibrateOffset()}
+ >
Calibrate
-
+
@@ -463,7 +535,16 @@ const WellSelectorComponent = () => {
{/* MOVE CAMERA speed controls – only shown when MOVE_CAMERA mode is active */}
{wellSelectorState.mode === Mode.MOVE_CAMERA && (
-
+
Move Camera Speed:
@@ -474,7 +555,9 @@ const WellSelectorComponent = () => {
value={wellSelectorState.moveCameraSpeedXY ?? 20000}
onChange={handleMoveCameraSpeedXYChange}
inputProps={{ min: 1, step: 1000 }}
- error={(parseFloat(wellSelectorState.moveCameraSpeedXY) || 0) > 20000}
+ error={
+ (parseFloat(wellSelectorState.moveCameraSpeedXY) || 0) > 20000
+ }
helperText={
(parseFloat(wellSelectorState.moveCameraSpeedXY) || 0) > 20000
? "⚠ >20000 µm/s is highly unreliable (may lose steps/accuracy)"
@@ -494,7 +577,7 @@ const WellSelectorComponent = () => {
)}
-
+
{/* Confirm before swapping layout (clears existing points) */}