From 07010c903eb90fe347b89af683d854d044de2ecf Mon Sep 17 00:00:00 2001
From: shimwell <mail@jshimwell.com>
Date: Tue, 18 Feb 2025 23:00:46 +0100
Subject: [PATCH 1/3] added button for enlarge

---
 src/sauce/home.rs | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/sauce/home.rs b/src/sauce/home.rs
index 3b66287..2f865af 100644
--- a/src/sauce/home.rs
+++ b/src/sauce/home.rs
@@ -36,6 +36,7 @@ pub struct PlotProps {
     pub is_y_log: UseStateHandle<bool>,
     pub is_x_log: UseStateHandle<bool>,
     pub clear_plot_callback: Callback<MouseEvent>,
+    pub is_fullscreen: UseStateHandle<bool>,
 }
 
 #[function_component(PlotComponent)]
@@ -43,11 +44,14 @@ pub fn plot_component(props: &PlotProps) -> Html {
     let selected_indexes = &props.selected_indexes;
     let is_y_log = props.is_y_log.clone();
     let is_x_log = props.is_x_log.clone();
+    let is_fullscreen = props.is_fullscreen.clone();
 
     let p = use_async::<_, _, ()>({
         let selected_indexes = selected_indexes.clone();
         let is_y_log = is_y_log.clone();
         let is_x_log = is_x_log.clone();
+        let is_fullscreen = is_fullscreen.clone();
+
 
         async move {
             let cache = generate_cache(&selected_indexes).await;
@@ -112,8 +116,16 @@ pub fn plot_component(props: &PlotProps) -> Html {
         p.run();
     });
 
+
+    // Style classes based on fullscreen state
+    let plot_classes = if *is_fullscreen {
+        "position-fixed top 0 left-0 w-100 h-100 z-50 bg-white"
+    } else {
+        "w-100 h-100"
+    };
+
     html! {
-        <div id="plot-div"></div>
+        <div id="plot-div" class={classes!(plot_classes)} style="min-height: 400px;"></div>
     }
 }
 
@@ -206,6 +218,7 @@ pub fn home() -> Html {
 
     let is_y_log = use_state(|| true);
     let is_x_log = use_state(|| true);
+    let is_fullscreen = use_state(|| false);
 
     let onclick_toggle_y_log = {
         let is_y_log = is_y_log.clone();
@@ -381,6 +394,14 @@ pub fn home() -> Html {
         })
     };
 
+    // Toggle fullscreen callback
+    let onclick_toggle_fullscreen = {
+        let is_fullscreen = is_fullscreen.clone();
+        Callback::from(move |_| {
+            is_fullscreen.set(!*is_fullscreen);
+        })
+    };
+
     // let pagination_options = yew_custom_components::pagination::Options::default()
     //     .show_prev_next(true)
     //     .show_first_last(true)
@@ -491,6 +512,13 @@ pub fn home() -> Html {
                 >
                     {if *is_y_log { "Switch Y to Linear Scale" } else { "Switch Y to Log Scale" }}
                 </button>
+
+                <button 
+                onclick={onclick_toggle_fullscreen}
+                class="btn btn-secondary mb-2"
+                >
+                    {if *is_fullscreen { "Exit Fullscreen" } else { "Enlarge Plot" }}
+                </button>
             </div>
                 
             <div class="d-flex mb-2">
@@ -522,6 +550,7 @@ pub fn home() -> Html {
                         is_y_log={is_y_log.clone()}
                         is_x_log={is_x_log.clone()}
                         clear_plot_callback={clear_plot_callback.clone()}
+                        is_fullscreen={is_fullscreen.clone()}
                     />
                 </div>
                 // <h5>{"Created by Jon Shimwell, source code available "}</h5>

From 67a20b6582eba6a57f1f932624940fc7c25db55b Mon Sep 17 00:00:00 2001
From: shimwell <mail@jshimwell.com>
Date: Tue, 18 Feb 2025 23:08:32 +0100
Subject: [PATCH 2/3] indent

---
 src/sauce/home.rs | 49 ++++++++++++++++++++---------------------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/sauce/home.rs b/src/sauce/home.rs
index 2f865af..88938a6 100644
--- a/src/sauce/home.rs
+++ b/src/sauce/home.rs
@@ -50,8 +50,6 @@ pub fn plot_component(props: &PlotProps) -> Html {
         let selected_indexes = selected_indexes.clone();
         let is_y_log = is_y_log.clone();
         let is_x_log = is_x_log.clone();
-        let is_fullscreen = is_fullscreen.clone();
-
 
         async move {
             let cache = generate_cache(&selected_indexes).await;
@@ -523,17 +521,17 @@ pub fn home() -> Html {
                 
             <div class="d-flex mb-2">
                 <div class="flex-grow-1 p-2 input-group me-2">
-                <Table<TableLine> 
-                    options={options.clone()} 
-                    limit={Some(limit)} 
-                    page={current_page} 
-                    // search={element_search.clone()} 
-                    classes={classes!("table", "table-hover")} 
-                    columns={columns.clone()}
-                    data={paginated_data} 
-                    orderable={true}
-                />
-                <h5>{sum}{" / 41337"}</h5>
+                    <Table<TableLine> 
+                        options={options.clone()} 
+                        limit={Some(limit)} 
+                        page={current_page} 
+                        // search={element_search.clone()} 
+                        classes={classes!("table", "table-hover")} 
+                        columns={columns.clone()}
+                        data={paginated_data} 
+                        orderable={true}
+                    />
+                    <h5>{sum}{" / 41337"}</h5>
                 </div>
                 <div class="flex-grow-1 p-2 input-group">
 
@@ -544,22 +542,17 @@ pub fn home() -> Html {
                 //     options={pagination_options} 
                 //     on_page={Some(handle_page)}
                 // />
-                <div class="flex-grow-1 p-2 input-group me-2">
-                    <PlotComponent
-                        selected_indexes={(*selected_indexes.current()).clone()}
-                        is_y_log={is_y_log.clone()}
-                        is_x_log={is_x_log.clone()}
-                        clear_plot_callback={clear_plot_callback.clone()}
-                        is_fullscreen={is_fullscreen.clone()}
-                    />
-                </div>
-                // <h5>{"Created by Jon Shimwell, source code available "}</h5>
-                //     <a href="/openmc-data-storage/nuclide_cross_section_plotter.rs/" target="_blank">
-                //         <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/240px-Octicons-mark-github.svg.png" alt="GitHub" style="width: 30px; height: 30px;"/>
-                //     </a>
-                
-                </div>
+                    <div class="flex-grow-1 p-2 input-group me-2">
+                        <PlotComponent
+                            selected_indexes={(*selected_indexes.current()).clone()}
+                            is_y_log={is_y_log.clone()}
+                            is_x_log={is_x_log.clone()}
+                            clear_plot_callback={clear_plot_callback.clone()}
+                            is_fullscreen={is_fullscreen.clone()}
+                        />
+                    </div>
                 </div>
+            </div>
         </>
     )
 }

From b797d7e527384dd1eff4ae4094ee44b761328fc4 Mon Sep 17 00:00:00 2001
From: shimwell <mail@jshimwell.com>
Date: Tue, 18 Feb 2025 23:44:23 +0100
Subject: [PATCH 3/3] full screen working but needs reduce

---
 src/sauce/home.rs | 102 +++++++++++++++++++++++-----------------------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/src/sauce/home.rs b/src/sauce/home.rs
index 88938a6..aed94cf 100644
--- a/src/sauce/home.rs
+++ b/src/sauce/home.rs
@@ -115,15 +115,20 @@ pub fn plot_component(props: &PlotProps) -> Html {
     });
 
 
-    // Style classes based on fullscreen state
-    let plot_classes = if *is_fullscreen {
-        "position-fixed top 0 left-0 w-100 h-100 z-50 bg-white"
+    let plot_classes = if *props.is_fullscreen {
+        "position-fixed top-0 start-0 w-100 h-100 bg-white z-50"
     } else {
-        "w-100 h-100"
+        "w-100 h-auto"
+    };
+
+    let container_style = if *props.is_fullscreen {
+        "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: white; z-index: 9999;"
+    } else {
+        "min-height: 400px;"
     };
 
     html! {
-        <div id="plot-div" class={classes!(plot_classes)} style="min-height: 400px;"></div>
+        <div id="plot-div" class={classes!(plot_classes)} style={container_style}></div>
     }
 }
 
@@ -416,7 +421,7 @@ pub fn home() -> Html {
     //     })
     // };
 
-    html!(
+    html!{
         <>
             <h1>{"Nuclide Microscopic Cross Section Plotter"}</h1>
 
@@ -502,47 +507,46 @@ pub fn home() -> Html {
                 class="btn btn-primary me-2"
                 >
                     {if *is_x_log { "Switch X to Linear Scale" } else { "Switch X to Log Scale" }}
-                </button>
-
-                <button
-                onclick={onclick_toggle_y_log}
-                class="btn btn-primary me-2"
-                >
-                    {if *is_y_log { "Switch Y to Linear Scale" } else { "Switch Y to Log Scale" }}
-                </button>
-
-                <button 
-                onclick={onclick_toggle_fullscreen}
-                class="btn btn-secondary mb-2"
-                >
-                    {if *is_fullscreen { "Exit Fullscreen" } else { "Enlarge Plot" }}
-                </button>
-            </div>
-                
-            <div class="d-flex mb-2">
-                <div class="flex-grow-1 p-2 input-group me-2">
-                    <Table<TableLine> 
-                        options={options.clone()} 
-                        limit={Some(limit)} 
-                        page={current_page} 
-                        // search={element_search.clone()} 
-                        classes={classes!("table", "table-hover")} 
-                        columns={columns.clone()}
-                        data={paginated_data} 
-                        orderable={true}
-                    />
-                    <h5>{sum}{" / 41337"}</h5>
+                    </button>
+
+                    <button
+                    onclick={onclick_toggle_y_log}
+                    class="btn btn-primary me-2"
+                    >
+                        {if *is_y_log { "Switch Y to Linear Scale" } else { "Switch Y to Log Scale" }}
+                    </button>
+    
+                    <button 
+                    onclick={onclick_toggle_fullscreen}
+                    class="btn btn-secondary mb-2"
+                    >
+                        {if *is_fullscreen { "Exit Fullscreen" } else { "Enlarge Plot" }}
+                    </button>
                 </div>
-                <div class="flex-grow-1 p-2 input-group">
-
-                // <Pagination 
-                //     total={total}
-                //     limit={limit} 
-                //     max_pages={6} 
-                //     options={pagination_options} 
-                //     on_page={Some(handle_page)}
-                // />
-                    <div class="flex-grow-1 p-2 input-group me-2">
+                    
+                <div class="d-flex mb-2">
+                    // Only show the table section when not in fullscreen
+                    {if !*is_fullscreen {
+                        html! {
+                            <div class="flex-grow-1 p-2 input-group me-2">
+                                <Table<TableLine> 
+                                    options={options.clone()} 
+                                    limit={Some(limit)} 
+                                    page={current_page} 
+                                    classes={classes!("table", "table-hover")} 
+                                    columns={columns.clone()}
+                                    data={paginated_data} 
+                                    orderable={true}
+                                />
+                                <h5>{sum}{" / 41337"}</h5>
+                            </div>
+                        }
+                    } else {
+                        html! {}
+                    }}
+                    
+                    // The plot container
+                    <div class={if *is_fullscreen { "w-100" } else { "flex-grow-1 p-2 input-group" }}>
                         <PlotComponent
                             selected_indexes={(*selected_indexes.current()).clone()}
                             is_y_log={is_y_log.clone()}
@@ -552,10 +556,8 @@ pub fn home() -> Html {
                         />
                     </div>
                 </div>
-            </div>
-        </>
-    )
-}
+            </>
+        }}
 
 #[derive(Clone, Serialize, Debug, Default)]
 struct TableLine {