emilia
/
plate-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Highlight wells used in transfers

This commit is contained in:
Emilia Allison 2023-06-05 21:33:23 -04:00
parent 0e98e63c63
commit 5074b52369
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
6 changed files with 129 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/scss/default_theme/components/_plates.scss
View File

@ -43,10 +43,10 @@ td.plate_cell.in_transfer div.plate_cell_inner::after {
} }
div.source_plate td.current_select div.plate_cell_inner { div.source_plate td.current_select div.plate_cell_inner {
background-image: linear-gradient(lightblue, lightblue); background: lightblue !important;
} }
div.dest_plate td.current_select div.plate_cell_inner { div.dest_plate td.current_select div.plate_cell_inner {
background: lightcoral; background: lightcoral !important;
} }

33
src/components/plates/destination_plate.rs
View File

@ -1,12 +1,17 @@
#![allow(non_snake_case)] #![allow(non_snake_case)]
use std::rc::Rc;
use std::collections::HashMap;
use yew::prelude::*; use yew::prelude::*;
use yewdux::prelude::*; use yewdux::prelude::*;
use crate::components::states::CurrentTransfer; use crate::components::states::{CurrentTransfer, MainState};
use crate::data::plate_instances::PlateInstance; use crate::data::plate_instances::PlateInstance;
use crate::data::transfer_region::{Region, TransferRegion}; use crate::data::transfer_region::{Region, TransferRegion};
// Color Palette for the Source Plates, can be changed here
use crate::components::plates::util::Palettes;
const PALETTE: super::util::ColorPalette = Palettes::YELLOW_PINK;
use super::super::transfer_menu::RegionDisplay; use super::super::transfer_menu::RegionDisplay;
#[derive(Properties, PartialEq)] #[derive(Properties, PartialEq)]
@ -17,6 +22,7 @@ pub struct DestinationPlateProps {
#[function_component] #[function_component]
pub fn DestinationPlate(props: &DestinationPlateProps) -> Html { pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
let (main_state, _) = use_store::<MainState>();
let (ct_state, ct_dispatch) = use_store::<CurrentTransfer>(); let (ct_state, ct_dispatch) = use_store::<CurrentTransfer>();
let m_start_handle: UseStateHandle<Option<(u8, u8)>> = use_state_eq(|| None); let m_start_handle: UseStateHandle<Option<(u8, u8)>> = use_state_eq(|| None);
let m_end_handle: UseStateHandle<Option<(u8, u8)>> = use_state_eq(|| None); let m_end_handle: UseStateHandle<Option<(u8, u8)>> = use_state_eq(|| None);
@ -53,6 +59,20 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
}) })
}; };
let mut color_counter: u8 = 0;
let color_map = {
let ts = main_state.transfers.iter().filter(|t| t.dest_id == props.destination_plate.get_uuid());
let mut color_map: HashMap<(u8,u8), u8> = HashMap::new();
for t in ts {
color_counter += 1;
let dws = t.transfer_region.get_destination_wells();
for dw in dws {
color_map.insert(dw, color_counter);
}
}
color_map
};
let mouseup_callback = { let mouseup_callback = {
let m_start_handle = m_start_handle.clone(); let m_start_handle = m_start_handle.clone();
let m_end_handle = m_end_handle.clone(); let m_end_handle = m_end_handle.clone();
@ -82,6 +102,7 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
selected={super::source_plate::in_rect(*m_start.clone(), *m_end.clone(), (i,j))} selected={super::source_plate::in_rect(*m_start.clone(), *m_end.clone(), (i,j))}
mouse={mouse_callback.clone()} mouse={mouse_callback.clone()}
in_transfer={destination_wells.contains(&(i,j))} in_transfer={destination_wells.contains(&(i,j))}
color={color_map.get(&(i,j)).map(|x| *x).and_then(|y| Some((y,color_counter)))}
/> />
} }
}).collect::<Html>(); }).collect::<Html>();
@ -121,6 +142,7 @@ pub struct DestPlateCellProps {
pub selected: bool, pub selected: bool,
pub mouse: Callback<(u8, u8, MouseEventType)>, pub mouse: Callback<(u8, u8, MouseEventType)>,
pub in_transfer: Option<bool>, pub in_transfer: Option<bool>,
color: Option<(u8,u8)>,
} }
#[function_component] #[function_component]
@ -133,6 +155,10 @@ fn DestPlateCell(props: &DestPlateCellProps) -> Html {
Some(true) => Some("in_transfer"), Some(true) => Some("in_transfer"),
_ => None, _ => None,
}; };
let color = match props.color {
Some(num) => PALETTE.get_u8(num.0,num.1),
None => [255.0,255.0,255.0]
};
let mouse = Callback::clone(&props.mouse); let mouse = Callback::clone(&props.mouse);
let mouse2 = Callback::clone(&props.mouse); let mouse2 = Callback::clone(&props.mouse);
let (i, j) = (props.i.clone(), props.j.clone()); let (i, j) = (props.i.clone(), props.j.clone());
@ -145,7 +171,8 @@ fn DestPlateCell(props: &DestPlateCellProps) -> Html {
onmouseenter={move |_| { onmouseenter={move |_| {
mouse2.emit((i,j, MouseEventType::MOUSEENTER)) mouse2.emit((i,j, MouseEventType::MOUSEENTER))
}}> }}>
<div class="plate_cell_inner" /> <div class="plate_cell_inner"
style={format!("background: rgba({},{},{},1);", color[0], color[1], color[2])}/>
</td> </td>
} }
} }

1
src/components/plates/mod.rs
View File

@ -1,3 +1,4 @@
pub mod destination_plate; pub mod destination_plate;
pub mod plate_container; pub mod plate_container;
pub mod source_plate; pub mod source_plate;
mod util;

33
src/components/plates/source_plate.rs
View File

@ -1,13 +1,17 @@
#![allow(non_snake_case)] #![allow(non_snake_case)]
use std::rc::Rc; use std::collections::HashMap;
use yew::prelude::*; use yew::prelude::*;
use yewdux::prelude::*; use yewdux::prelude::*;
use crate::components::states::CurrentTransfer; use crate::components::states::{CurrentTransfer, MainState};
use crate::data::plate_instances::PlateInstance; use crate::data::plate_instances::PlateInstance;
use crate::data::transfer_region::{Region, TransferRegion}; use crate::data::transfer_region::{Region, TransferRegion};
// Color Palette for the Source Plates, can be changed here
use crate::components::plates::util::Palettes;
const PALETTE: super::util::ColorPalette = Palettes::RAINBOW;
use super::super::transfer_menu::RegionDisplay; use super::super::transfer_menu::RegionDisplay;
#[derive(PartialEq, Properties)] #[derive(PartialEq, Properties)]
@ -18,6 +22,7 @@ pub struct SourcePlateProps {
#[function_component] #[function_component]
pub fn SourcePlate(props: &SourcePlateProps) -> Html { pub fn SourcePlate(props: &SourcePlateProps) -> Html {
let (main_state, _) = use_store::<MainState>();
let (ct_state, ct_dispatch) = use_store::<CurrentTransfer>(); let (ct_state, ct_dispatch) = use_store::<CurrentTransfer>();
let m_start_handle: UseStateHandle<Option<(u8, u8)>> = use_state_eq(|| None); let m_start_handle: UseStateHandle<Option<(u8, u8)>> = use_state_eq(|| None);
let m_end_handle: UseStateHandle<Option<(u8, u8)>> = use_state_eq(|| None); let m_end_handle: UseStateHandle<Option<(u8, u8)>> = use_state_eq(|| None);
@ -34,6 +39,20 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
m_end_handle.set(Some(pt2)); m_end_handle.set(Some(pt2));
} }
let mut color_counter: u8 = 0;
let color_map = {
let ts = main_state.transfers.iter().filter(|t| t.source_id == props.source_plate.get_uuid());
let mut color_map: HashMap<(u8,u8), u8> = HashMap::new();
for t in ts {
color_counter += 1;
let sws = t.transfer_region.get_source_wells();
for sw in sws {
color_map.insert(sw, color_counter);
}
}
color_map
};
let source_wells = ct_state.transfer.transfer_region.get_source_wells(); let source_wells = ct_state.transfer.transfer_region.get_source_wells();
let mouse_callback = { let mouse_callback = {
@ -85,6 +104,7 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
selected={in_rect(*m_start.clone(), *m_end.clone(), (i,j))} selected={in_rect(*m_start.clone(), *m_end.clone(), (i,j))}
mouse={mouse_callback.clone()} mouse={mouse_callback.clone()}
in_transfer={source_wells.contains(&(i,j))} in_transfer={source_wells.contains(&(i,j))}
color={color_map.get(&(i,j)).map(|x| *x).and_then(|y| Some((y,color_counter)))}
/> />
} }
}) })
@ -119,6 +139,7 @@ pub struct SourcePlateCellProps {
selected: bool, selected: bool,
mouse: Callback<(u8, u8, MouseEventType)>, mouse: Callback<(u8, u8, MouseEventType)>,
in_transfer: Option<bool>, in_transfer: Option<bool>,
color: Option<(u8,u8)>,
} }
#[derive(Debug)] #[derive(Debug)]
pub enum MouseEventType { pub enum MouseEventType {
@ -136,19 +157,25 @@ fn SourcePlateCell(props: &SourcePlateCellProps) -> Html {
Some(true) => Some("in_transfer"), Some(true) => Some("in_transfer"),
_ => None, _ => None,
}; };
let color = match props.color {
Some(num) => PALETTE.get_u8(num.0,num.1),
None => [255.0,255.0,255.0]
};
let mouse = Callback::clone(&props.mouse); let mouse = Callback::clone(&props.mouse);
let mouse2 = Callback::clone(&props.mouse); let mouse2 = Callback::clone(&props.mouse);
let (i, j) = (props.i.clone(), props.j.clone()); let (i, j) = (props.i.clone(), props.j.clone());
html! { html! {
<td class={classes!("plate_cell", selected_class, in_transfer_class)} <td class={classes!("plate_cell", selected_class, in_transfer_class)}
id={format!("color={:?}", props.color)}
onmousedown={move |_| { onmousedown={move |_| {
mouse.emit((i,j, MouseEventType::MOUSEDOWN)) mouse.emit((i,j, MouseEventType::MOUSEDOWN))
}} }}
onmouseenter={move |_| { onmouseenter={move |_| {
mouse2.emit((i,j, MouseEventType::MOUSEENTER)) mouse2.emit((i,j, MouseEventType::MOUSEENTER))
}}> }}>
<div class="plate_cell_inner" /> <div class="plate_cell_inner"
style={format!("background: rgba({},{},{},1);", color[0], color[1], color[2])}/>
</td> </td>
} }
} }

50
src/components/plates/util.rs Normal file
View File

@ -0,0 +1,50 @@
// Sources:
// https://iquilezles.org/articles/palettes/
// http://dev.thi.ng/gradients/
#[derive(Clone, Copy, PartialEq, Debug)]
pub struct ColorPalette {
a: [f64; 3],
b: [f64; 3],
c: [f64; 3],
d: [f64; 3],
}
impl ColorPalette {
pub fn new(a: [f64; 3], b: [f64; 3], c: [f64; 3], d: [f64; 3]) -> Self {
ColorPalette { a, b, c, d }
}
pub fn get(&self, t: f64) -> [f64; 3] {
[
(self.a[0] + self.b[0]*f64::cos(6.28318*(self.c[0]*t+self.d[0])))*255.0,
(self.a[1] + self.b[1]*f64::cos(6.28318*(self.c[1]*t+self.d[1])))*255.0,
(self.a[2] + self.b[2]*f64::cos(6.28318*(self.c[2]*t+self.d[2])))*255.0,
]
}
pub fn get_u8(&self, t: u8, n: u8) -> [f64; 3] {
assert!(t>0, "t must be greater than zero!");
assert!(n>0, "There cannot be zero points!");
self.get((t-1) as f64 / (n-1) as f64)
}
}
#[non_exhaustive]
pub struct Palettes;
#[allow(dead_code)]
impl Palettes {
pub const RAINBOW: ColorPalette = ColorPalette {
a: [0.500,0.500,0.500],
b: [0.500,0.500,0.500],
c: [0.800,0.800,0.800],
d: [0.000,0.333,0.667],
};
pub const YELLOW_PINK: ColorPalette = ColorPalette {
a: [0.500,0.500,0.320],
b: [0.500,0.500,0.500],
c: [0.100,0.500,0.360],
d: [0.000,0.000,0.650],
};
}

16
src/components/states.rs
View File

@ -87,4 +87,20 @@ impl MainState {
self.destination_plates.swap_remove(index); self.destination_plates.swap_remove(index);
} }
} }
pub fn rename_plate(&mut self, id: Uuid, new_name: &str) {
if let Some(index) = self
.source_plates
.iter()
.position(|spi| spi.get_uuid() == id)
{
self.source_plates[index].change_name(new_name.to_string());
}
if let Some(index) = self
.destination_plates
.iter()
.position(|dpi| dpi.get_uuid() == id)
{
self.destination_plates[index].change_name(new_name.to_string());
}
}
} }