Add tooltip for wells

Currently shows which transfers are using a well
This commit is contained in:
Emilia Allison 2023-06-13 17:04:22 -04:00
parent fae02afa9f
commit 6a5b1ae6f2
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
2 changed files with 54 additions and 2 deletions

View File

@ -75,6 +75,25 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
color_map color_map
}; };
let tooltip_map = {
let ts = main_state
.transfers
.iter()
.filter(|t| t.dest_id == props.destination_plate.get_uuid());
let mut tooltip_map: HashMap<(u8,u8), Vec<String>> = HashMap::new();
for t in ts {
let dws = t.transfer_region.get_destination_wells();
for dw in dws {
if let Some(val) = tooltip_map.get_mut(&dw) {
val.push(t.name.clone());
} else {
tooltip_map.insert(dw, vec![t.name.clone()]);
}
}
}
tooltip_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();
@ -114,6 +133,9 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
in_transfer={destination_wells.contains(&(i,j))} in_transfer={destination_wells.contains(&(i,j))}
color={color_map.get(&(i,j)).copied()} color={color_map.get(&(i,j)).copied()}
cell_height={props.cell_height} cell_height={props.cell_height}
title={if let Some(names) = tooltip_map.get(&(i,j)) {
Some(format!("Used by: {}", names.join(", ")))
} else { None }}
/> />
} }
}).collect::<Html>(); }).collect::<Html>();
@ -156,6 +178,7 @@ pub struct DestPlateCellProps {
pub in_transfer: Option<bool>, pub in_transfer: Option<bool>,
color: Option<u8>, color: Option<u8>,
cell_height: f64, cell_height: f64,
title: Option<String>,
} }
#[function_component] #[function_component]
@ -186,7 +209,10 @@ fn DestPlateCell(props: &DestPlateCellProps) -> Html {
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])}/> style={format!("background: rgba({},{},{},1);", color[0], color[1], color[2])}
title={if let Some(text) = &props.title {
text.clone()
} else { "".to_string() }}/>
</td> </td>
} }
} }

View File

@ -55,6 +55,25 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
color_map color_map
}; };
let tooltip_map = {
let ts = main_state
.transfers
.iter()
.filter(|t| t.source_id == props.source_plate.get_uuid());
let mut tooltip_map: HashMap<(u8,u8), Vec<String>> = HashMap::new();
for t in ts {
let sws = t.transfer_region.get_source_wells();
for sw in sws {
if let Some(val) = tooltip_map.get_mut(&sw) {
val.push(t.name.clone());
} else {
tooltip_map.insert(sw, vec![t.name.clone()]);
}
}
}
tooltip_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 = {
@ -118,6 +137,9 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
in_transfer={source_wells.contains(&(i,j))} in_transfer={source_wells.contains(&(i,j))}
color={color_map.get(&(i,j)).copied()} color={color_map.get(&(i,j)).copied()}
cell_height={props.cell_height} cell_height={props.cell_height}
title={if let Some(names) = tooltip_map.get(&(i,j)) {
Some(format!("Used by: {}", names.join(", ")))
} else { None }}
/> />
} }
}) })
@ -156,6 +178,7 @@ pub struct SourcePlateCellProps {
in_transfer: Option<bool>, in_transfer: Option<bool>,
color: Option<u8>, color: Option<u8>,
cell_height: f64, cell_height: f64,
title: Option<String>,
} }
#[derive(Debug)] #[derive(Debug)]
pub enum MouseEventType { pub enum MouseEventType {
@ -192,7 +215,10 @@ fn SourcePlateCell(props: &SourcePlateCellProps) -> Html {
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])}/> style={format!("background: rgba({},{},{},1);", color[0], color[1], color[2])}
title={if let Some(text) = &props.title {
text.clone()
} else {"".to_string()}}/>
</td> </td>
} }
} }