2023-05-11 21:49:03 +00:00
|
|
|
#![allow(non_snake_case)]
|
|
|
|
|
2023-06-06 01:33:23 +00:00
|
|
|
use std::collections::HashMap;
|
2023-05-22 15:26:08 +00:00
|
|
|
use yew::prelude::*;
|
2023-05-22 17:25:16 +00:00
|
|
|
use yewdux::prelude::*;
|
|
|
|
|
2023-06-06 01:33:23 +00:00
|
|
|
use crate::components::states::{CurrentTransfer, MainState};
|
2024-02-11 02:57:30 +00:00
|
|
|
use crate::data::plate::PlateType;
|
2023-06-13 23:32:39 +00:00
|
|
|
use crate::data::transfer::Transfer;
|
2023-06-07 21:17:40 +00:00
|
|
|
use crate::data::transfer_region::Region;
|
2023-05-24 20:10:33 +00:00
|
|
|
|
2023-06-06 01:33:23 +00:00
|
|
|
// Color Palette for the Source Plates, can be changed here
|
|
|
|
use crate::components::plates::util::Palettes;
|
|
|
|
const PALETTE: super::util::ColorPalette = Palettes::RAINBOW;
|
|
|
|
|
2024-02-11 03:00:39 +00:00
|
|
|
use super::super::transfer_menu::{num_to_letters};
|
2023-05-11 21:49:03 +00:00
|
|
|
|
2024-02-11 02:57:30 +00:00
|
|
|
use super::plate_data::*;
|
|
|
|
use super::plate_callbacks;
|
2023-05-11 21:49:03 +00:00
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
#[function_component]
|
2024-02-11 02:57:30 +00:00
|
|
|
pub fn Plate(props: &PlateProps) -> Html {
|
2023-06-06 01:33:23 +00:00
|
|
|
let (main_state, _) = use_store::<MainState>();
|
2023-05-24 22:39:38 +00:00
|
|
|
let (ct_state, ct_dispatch) = use_store::<CurrentTransfer>();
|
2024-02-11 02:57:30 +00:00
|
|
|
let m_start_handle: MStartHandle = use_state_eq(|| None);
|
|
|
|
let m_end_handle: MEndHandle = use_state_eq(|| None);
|
|
|
|
let m_stat_handle: MStatHandle = use_state_eq(|| false);
|
2023-05-22 15:26:08 +00:00
|
|
|
|
2023-05-24 22:39:38 +00:00
|
|
|
if !(*m_stat_handle) {
|
2024-02-11 02:57:30 +00:00
|
|
|
let region = match props.ptype {
|
|
|
|
PlateType::Source => ct_state.transfer.transfer_region.source_region.clone(),
|
|
|
|
PlateType::Destination => ct_state.transfer.transfer_region.dest_region.clone(),
|
|
|
|
};
|
|
|
|
let (pt1, pt2) = match region {
|
2023-06-01 17:04:03 +00:00
|
|
|
Region::Point((x, y)) => ((x, y), (x, y)),
|
2023-05-25 16:07:21 +00:00
|
|
|
Region::Rect(c1, c2) => (c1, c2),
|
2024-02-11 02:57:30 +00:00
|
|
|
Region::Custom(_) => ((0, 0), (0, 0)),
|
2023-05-25 16:07:21 +00:00
|
|
|
};
|
2023-05-24 22:39:38 +00:00
|
|
|
m_start_handle.set(Some(pt1));
|
|
|
|
m_end_handle.set(Some(pt2));
|
|
|
|
}
|
2023-05-22 17:25:16 +00:00
|
|
|
|
2023-06-13 23:32:39 +00:00
|
|
|
let transfer_map = {
|
2024-02-11 02:57:30 +00:00
|
|
|
let transfers = main_state.transfers.iter().filter(|t| match props.ptype {
|
|
|
|
PlateType::Source => t.source_id == props.source_plate.get_uuid(),
|
|
|
|
PlateType::Destination => t.dest_id == props.destination_plate.get_uuid(),
|
|
|
|
});
|
2023-06-16 02:23:12 +00:00
|
|
|
let mut tooltip_map: HashMap<(u8, u8), Vec<&Transfer>> = HashMap::new();
|
2024-02-11 02:57:30 +00:00
|
|
|
for transfer in transfers {
|
|
|
|
let wells = match props.ptype {
|
|
|
|
PlateType::Source => transfer.transfer_region.get_source_wells(),
|
|
|
|
PlateType::Destination => transfer.transfer_region.get_destination_wells(),
|
|
|
|
};
|
|
|
|
for well in wells {
|
|
|
|
if let Some(val) = tooltip_map.get_mut(&well) {
|
|
|
|
val.push(transfer);
|
2023-06-13 21:04:22 +00:00
|
|
|
} else {
|
2024-02-11 02:57:30 +00:00
|
|
|
tooltip_map.insert(well, vec![transfer]);
|
2023-06-13 21:04:22 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
tooltip_map
|
|
|
|
};
|
|
|
|
|
2024-02-11 02:57:30 +00:00
|
|
|
let wells = match props.ptype {
|
|
|
|
PlateType::Source => ct_state.transfer.transfer_region.get_source_wells(),
|
|
|
|
PlateType::Destination => ct_state.transfer.transfer_region.get_destination_wells(),
|
|
|
|
};
|
2023-05-22 17:25:16 +00:00
|
|
|
|
2023-12-30 01:39:00 +00:00
|
|
|
let ordered_ids: Vec<uuid::Uuid> = {
|
2024-02-11 02:57:30 +00:00
|
|
|
let mut ids: Vec<uuid::Uuid> = main_state.transfers.clone().iter().map(|x| x.id).collect();
|
2023-12-30 01:39:00 +00:00
|
|
|
ids.sort_unstable();
|
|
|
|
ids
|
|
|
|
};
|
|
|
|
|
2023-05-22 17:25:16 +00:00
|
|
|
let mouse_callback = {
|
|
|
|
let m_start_handle = m_start_handle.clone();
|
|
|
|
let m_end_handle = m_end_handle.clone();
|
|
|
|
let m_stat_handle = m_stat_handle.clone();
|
2024-02-11 02:57:30 +00:00
|
|
|
plate_callbacks::mouse_callback(m_start_handle, m_end_handle, m_stat_handle)
|
2023-05-22 17:25:16 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
let mouseup_callback = {
|
|
|
|
let m_start_handle = m_start_handle.clone();
|
|
|
|
let m_end_handle = m_end_handle.clone();
|
2024-02-11 02:57:30 +00:00
|
|
|
plate_callbacks::mouseup_callback(m_start_handle, m_end_handle, m_stat_handle, ct_dispatch)
|
2023-05-22 17:25:16 +00:00
|
|
|
};
|
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
let mouseleave_callback = Callback::clone(&mouseup_callback);
|
|
|
|
|
2023-12-30 01:39:00 +00:00
|
|
|
let screenshot_callback = Callback::from(|_| {
|
|
|
|
let _ = js_sys::eval("copy_screenshot_src()");
|
|
|
|
});
|
|
|
|
|
2024-02-11 02:57:30 +00:00
|
|
|
let width = match props.ptype {
|
|
|
|
PlateType::Source => props.source_plate.plate.size().1,
|
|
|
|
PlateType::Destination => props.destination_plate.plate.size().1,
|
|
|
|
};
|
|
|
|
let height = match props.ptype {
|
|
|
|
PlateType::Source => props.source_plate.plate.size().0,
|
|
|
|
PlateType::Destination => props.destination_plate.plate.size().0,
|
|
|
|
};
|
|
|
|
let pformat = match props.ptype {
|
|
|
|
PlateType::Source => props.source_plate.plate.plate_format,
|
|
|
|
PlateType::Destination => props.destination_plate.plate.plate_format,
|
|
|
|
};
|
2023-06-08 15:14:15 +00:00
|
|
|
let column_header = {
|
2024-02-11 02:57:30 +00:00
|
|
|
let headers = (1..=width)
|
2023-06-08 15:14:15 +00:00
|
|
|
.map(|j| {
|
2023-06-13 16:51:16 +00:00
|
|
|
html! {<th>
|
2023-06-16 02:23:12 +00:00
|
|
|
{format!("{:0>2}", j)}
|
|
|
|
</th>}
|
2023-06-08 15:14:15 +00:00
|
|
|
})
|
|
|
|
.collect::<Html>();
|
2023-06-08 15:14:50 +00:00
|
|
|
html! {<tr><th />{ headers }</tr>}
|
2023-06-08 15:14:15 +00:00
|
|
|
};
|
2024-02-11 02:57:30 +00:00
|
|
|
let rows =
|
|
|
|
(1..=height)
|
2023-06-01 17:04:03 +00:00
|
|
|
.map(|i| {
|
2023-06-08 15:14:15 +00:00
|
|
|
let row_header = html! {<th>{num_to_letters(i)}</th>};
|
2024-02-11 02:57:30 +00:00
|
|
|
let row = (1..=width)
|
2023-06-01 17:04:03 +00:00
|
|
|
.map(|j| {
|
|
|
|
html! {
|
2024-02-11 02:57:30 +00:00
|
|
|
<PlateCell i={i} j={j}
|
2023-06-08 15:57:03 +00:00
|
|
|
selected={in_rect(*m_start_handle.clone(), *m_end_handle.clone(), (i,j))}
|
2023-06-01 17:04:03 +00:00
|
|
|
mouse={mouse_callback.clone()}
|
2024-02-11 02:57:30 +00:00
|
|
|
in_transfer={wells.contains(&(i,j)) && main_state.preferences.in_transfer_hashes}
|
2023-06-13 23:32:39 +00:00
|
|
|
color={transfer_map.get(&(i,j))
|
|
|
|
.and_then(|t| t.last())
|
2023-12-30 01:39:00 +00:00
|
|
|
.map(|t| PALETTE.get_ordered(t.get_uuid(), &ordered_ids))
|
2023-06-13 23:32:39 +00:00
|
|
|
}
|
2023-06-13 16:02:32 +00:00
|
|
|
cell_height={props.cell_height}
|
2023-06-16 02:23:12 +00:00
|
|
|
title={transfer_map.get(&(i,j)).map(|transfers| format!("Used by: {}", transfers.iter().map(|t| t.name.clone())
|
|
|
|
.collect::<Vec<_>>().join(", ")))}
|
2023-06-01 17:04:03 +00:00
|
|
|
/>
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.collect::<Html>();
|
2023-05-22 15:26:08 +00:00
|
|
|
html! {
|
2023-06-01 17:04:03 +00:00
|
|
|
<tr>
|
2023-06-08 15:14:15 +00:00
|
|
|
{ row_header }{ row }
|
2023-06-01 17:04:03 +00:00
|
|
|
</tr>
|
2023-05-22 15:26:08 +00:00
|
|
|
}
|
2023-06-01 17:04:03 +00:00
|
|
|
})
|
|
|
|
.collect::<Html>();
|
2023-05-22 15:26:08 +00:00
|
|
|
|
|
|
|
html! {
|
2023-12-30 01:39:00 +00:00
|
|
|
<div ondblclick={screenshot_callback}
|
2024-02-11 02:57:30 +00:00
|
|
|
class={classes!{match props.ptype {
|
|
|
|
PlateType::Source => "source_plate",
|
|
|
|
PlateType::Destination => "dest_plate",
|
|
|
|
},
|
|
|
|
"W".to_owned()+&pformat.to_string()}}>
|
2023-05-22 15:26:08 +00:00
|
|
|
<table
|
|
|
|
onmouseup={move |e| {
|
|
|
|
mouseup_callback.emit(e);
|
|
|
|
}}
|
|
|
|
onmouseleave={move |e| {
|
|
|
|
mouseleave_callback.emit(e);
|
|
|
|
}}>
|
2023-06-08 15:14:15 +00:00
|
|
|
{ column_header }
|
2023-05-22 15:26:08 +00:00
|
|
|
{ rows }
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
}
|
2023-05-11 21:49:03 +00:00
|
|
|
}
|
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
#[derive(PartialEq, Properties)]
|
2024-02-11 02:57:30 +00:00
|
|
|
pub struct PlateCellProps {
|
2023-05-22 15:26:08 +00:00
|
|
|
i: u8,
|
|
|
|
j: u8,
|
|
|
|
selected: bool,
|
2023-06-01 17:04:03 +00:00
|
|
|
mouse: Callback<(u8, u8, MouseEventType)>,
|
2023-05-24 22:39:38 +00:00
|
|
|
in_transfer: Option<bool>,
|
2023-06-13 23:32:39 +00:00
|
|
|
color: Option<[f64; 3]>,
|
2023-06-13 16:02:32 +00:00
|
|
|
cell_height: f64,
|
2023-06-13 21:04:22 +00:00
|
|
|
title: Option<String>,
|
2023-05-22 15:26:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#[function_component]
|
2024-02-11 02:57:30 +00:00
|
|
|
fn PlateCell(props: &PlateCellProps) -> Html {
|
2023-05-22 15:26:08 +00:00
|
|
|
let selected_class = match props.selected {
|
|
|
|
true => Some("current_select"),
|
|
|
|
false => None,
|
2023-05-11 21:49:03 +00:00
|
|
|
};
|
2023-05-24 22:39:38 +00:00
|
|
|
let in_transfer_class = match props.in_transfer {
|
|
|
|
Some(true) => Some("in_transfer"),
|
2023-06-01 17:04:03 +00:00
|
|
|
_ => None,
|
2023-05-11 22:39:25 +00:00
|
|
|
};
|
2023-06-16 02:23:12 +00:00
|
|
|
let color = props.color.unwrap_or([255.0, 255.0, 255.0]);
|
2023-05-22 15:26:08 +00:00
|
|
|
let mouse = Callback::clone(&props.mouse);
|
|
|
|
let mouse2 = Callback::clone(&props.mouse);
|
2023-06-08 15:57:03 +00:00
|
|
|
let (i, j) = (props.i, props.j);
|
2023-05-22 15:26:08 +00:00
|
|
|
|
|
|
|
html! {
|
2023-05-24 22:39:38 +00:00
|
|
|
<td class={classes!("plate_cell", selected_class, in_transfer_class)}
|
2023-06-13 16:02:32 +00:00
|
|
|
style={format!("height: {}px;", props.cell_height)}
|
2023-06-06 01:33:23 +00:00
|
|
|
id={format!("color={:?}", props.color)}
|
2023-05-22 15:26:08 +00:00
|
|
|
onmousedown={move |_| {
|
2023-06-08 15:57:03 +00:00
|
|
|
mouse.emit((i,j, MouseEventType::Mousedown))
|
2023-05-22 15:26:08 +00:00
|
|
|
}}
|
|
|
|
onmouseenter={move |_| {
|
2023-06-08 15:57:03 +00:00
|
|
|
mouse2.emit((i,j, MouseEventType::Mouseenter))
|
2023-05-22 15:26:08 +00:00
|
|
|
}}>
|
2023-06-07 20:14:19 +00:00
|
|
|
<div class="plate_cell_inner"
|
2023-06-13 21:04:22 +00:00
|
|
|
style={format!("background: rgba({},{},{},1);", color[0], color[1], color[2])}
|
|
|
|
title={if let Some(text) = &props.title {
|
|
|
|
text.clone()
|
|
|
|
} else {"".to_string()}}/>
|
2023-05-22 15:26:08 +00:00
|
|
|
</td>
|
|
|
|
}
|
2023-05-11 21:49:03 +00:00
|
|
|
}
|
|
|
|
|
2023-05-22 17:46:29 +00:00
|
|
|
pub fn in_rect(corner1: Option<(u8, u8)>, corner2: Option<(u8, u8)>, pt: (u8, u8)) -> bool {
|
2023-05-11 21:49:03 +00:00
|
|
|
if let (Some(c1), Some(c2)) = (corner1, corner2) {
|
2023-06-08 15:57:03 +00:00
|
|
|
pt.0 <= u8::max(c1.0, c2.0)
|
2023-05-11 21:51:09 +00:00
|
|
|
&& pt.0 >= u8::min(c1.0, c2.0)
|
|
|
|
&& pt.1 <= u8::max(c1.1, c2.1)
|
2023-06-08 15:57:03 +00:00
|
|
|
&& pt.1 >= u8::min(c1.1, c2.1)
|
2023-05-11 21:51:09 +00:00
|
|
|
} else {
|
2023-06-08 15:57:03 +00:00
|
|
|
false
|
2023-05-11 21:51:09 +00:00
|
|
|
}
|
2023-05-11 21:49:03 +00:00
|
|
|
}
|
|
|
|
|
2023-05-12 00:39:43 +00:00
|
|
|
#[cfg(test)]
|
|
|
|
mod tests {
|
2023-05-26 20:20:52 +00:00
|
|
|
use wasm_bindgen_test::*;
|
|
|
|
|
2023-05-12 00:39:43 +00:00
|
|
|
use super::in_rect;
|
|
|
|
|
|
|
|
// in_rect tests
|
|
|
|
#[test]
|
2023-05-26 20:20:52 +00:00
|
|
|
#[wasm_bindgen_test]
|
2023-05-12 00:39:43 +00:00
|
|
|
fn test_in_rect1() {
|
|
|
|
// Test in center of rect
|
2023-05-13 23:13:03 +00:00
|
|
|
let c1 = (1, 1);
|
|
|
|
let c2 = (10, 10);
|
|
|
|
let pt = (5, 5);
|
2023-05-12 00:39:43 +00:00
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt));
|
|
|
|
// Order of the corners should not matter:
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt));
|
|
|
|
}
|
|
|
|
|
|
|
|
#[test]
|
2023-05-26 20:20:52 +00:00
|
|
|
#[wasm_bindgen_test]
|
2023-05-12 00:39:43 +00:00
|
|
|
fn test_in_rect2() {
|
|
|
|
// Test on top/bottom edges of rect
|
2023-05-13 23:13:03 +00:00
|
|
|
let c1 = (1, 1);
|
|
|
|
let c2 = (10, 10);
|
|
|
|
let pt1 = (1, 5);
|
|
|
|
let pt2 = (10, 5);
|
2023-05-12 00:39:43 +00:00
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt1));
|
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt2));
|
|
|
|
// Order of the corners should not matter:
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt1));
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt2));
|
|
|
|
}
|
|
|
|
|
|
|
|
#[test]
|
2023-05-26 20:20:52 +00:00
|
|
|
#[wasm_bindgen_test]
|
2023-05-12 00:39:43 +00:00
|
|
|
fn test_in_rect3() {
|
|
|
|
// Test on left/right edges of rect
|
2023-05-13 23:13:03 +00:00
|
|
|
let c1 = (1, 1);
|
|
|
|
let c2 = (10, 10);
|
|
|
|
let pt1 = (5, 1);
|
|
|
|
let pt2 = (5, 10);
|
2023-05-12 00:39:43 +00:00
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt1));
|
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt2));
|
|
|
|
// Order of the corners should not matter:
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt1));
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt2));
|
|
|
|
}
|
|
|
|
|
|
|
|
#[test]
|
2023-05-26 20:20:52 +00:00
|
|
|
#[wasm_bindgen_test]
|
2023-05-12 00:39:43 +00:00
|
|
|
fn test_in_rect4() {
|
2023-05-13 23:13:03 +00:00
|
|
|
// Test cases that should fail
|
|
|
|
let c1 = (1, 1);
|
|
|
|
let c2 = (10, 10);
|
|
|
|
let pt1 = (0, 0);
|
|
|
|
let pt2 = (15, 15);
|
2023-06-16 02:23:12 +00:00
|
|
|
assert!(!in_rect(Some(c1), Some(c2), pt1));
|
|
|
|
assert!(!in_rect(Some(c1), Some(c2), pt2));
|
2023-05-12 00:39:43 +00:00
|
|
|
}
|
|
|
|
}
|