feature: Heatmap enabled indicator

plate-tool-web/assets/scss/default_theme/components/_plate_container.scss

@@ -2,6 +2,8 @@
 @use "../variables" as *;
 
 div.plate_container {
+	position: relative;
+
 	display: flex;
 	flex-direction: column;
 	justify-content: space-evenly;
@@ -38,4 +40,22 @@ div.plate_container {
 			grid-row: 2;
 		}
 	}
+
+	div.plate_container--heatmap-notice {
+		position: absolute;
+		top: 0.5em;
+		left: 0.5em;
+
+		animation: 1s 1 attention_on_load;
+	}
+}
+
+@keyframes attention_on_load {
+	from{
+		color: $color-light;
+		transform: scale(1.05);
+	}
+	to {
+		color: inherit;
+	}
 }

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

@@ -5,10 +5,12 @@ 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 {
@@ -18,6 +20,8 @@ pub struct PlateContainerProps {
 
 #[function_component]
 pub fn PlateContainer(props: &PlateContainerProps) -> Html {
+    let (main_state, _) = use_store::<MainState>();
+
     let cell_height = {
         let height = web_sys::window()
             .unwrap()
@@ -49,8 +53,15 @@ pub fn PlateContainer(props: &PlateContainerProps) -> Html {
         .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">