plate-tool/plate-tool-web/src/components/plates/plate_container.rs

#![allow(non_snake_case)]
use wasm_bindgen::prelude::Closure;
use wasm_bindgen::JsCast;
use yew::prelude::*;

use plate_tool_lib::plate::PlateType;
use plate_tool_lib::plate_instances::PlateInstance;
use yewdux::functional::use_store;

// use super::destination_plate::DestinationPlate;
// use super::source_plate::SourcePlate;
use super::plate::Plate;
use crate::components::states::MainState;

#[derive(Properties, PartialEq)]
pub struct PlateContainerProps {
    pub source_dims: Option<PlateInstance>,
    pub destination_dims: Option<PlateInstance>,
}

#[function_component]
pub fn PlateContainer(props: &PlateContainerProps) -> Html {
    let (main_state, _) = use_store::<MainState>();

    let cell_height = {
        let height = web_sys::window()
            .unwrap()
            .inner_height()
            .unwrap()
            .as_f64()
            .unwrap();
        let width = web_sys::window()
            .unwrap()
            .inner_width()
            .unwrap()
            .as_f64()
            .unwrap();
        if let (Some(src_d), Some(dest_d)) = (&props.source_dims, &props.destination_dims) {
            let h = (0.78 * height) / (src_d.plate.size().0 + dest_d.plate.size().0) as f64;
            let w = (0.90 * width) / (src_d.plate.size().1 + dest_d.plate.size().1) as f64;
            f64::min(w, h)
        } else {
            1f64
        }
    };

    let resize_trigger = use_force_update();
    let onresize = Closure::<dyn FnMut(_)>::new(move |_: Event| {
        resize_trigger.force_update();
    });
    web_sys::window()
        .unwrap()
        .set_onresize(Some(onresize.as_ref().unchecked_ref()));
    onresize.forget(); // Magic!

    let heatmap_enabled = main_state.preferences.volume_heatmap;

    html! {
        <div class="plate_container">
            if heatmap_enabled {
            <div class="plate_container--heatmap-notice" >
            <h3>{"Volume Heatmap Enabled"}</h3>
            </div>
            }
            if let Some(spi) = props.source_dims.clone() {
            if let Some(dpi) = props.destination_dims.clone() {
            <div class="plate_container--source">
                <h2>{spi.name.clone()}</h2>
                <h2>{"Source"}</h2>
                <Plate source_plate={spi.clone()} destination_plate={dpi.clone()}
                cell_height={cell_height} ptype={PlateType::Source}/>
            </div>
            <div class="plate_container--destination">
                <h2>{dpi.name.clone()}</h2>
                <h2>{"Destination"}</h2>
                <Plate source_plate={spi.clone()} destination_plate={dpi.clone()}
                cell_height={cell_height} ptype={PlateType::Destination}/>
            </div>
            } else {
                <h2>{"No Destination Plate Selected"}</h2>
            }
            } else {
                <h2>{"No Source Plate Selected"}</h2>
            }
        </div>
    }
}