From 6468dfb315be9bc2d5ee3497d61686b5e0bf3e73 Mon Sep 17 00:00:00 2001
From: Jeremy Magland <jmagland@flatironinstitute.org>
Date: Fri, 17 May 2024 10:52:32 -0400
Subject: [PATCH] Update sampling options panel layout with Grid component

---
 .../SamplingOptsPanel/SamplingOptsPanel.tsx   | 143 ++++++++++--------
 gui/src/app/pages/HomePage/HomePage.tsx       |   2 +-
 2 files changed, 79 insertions(+), 66 deletions(-)

diff --git a/gui/src/app/SamplingOptsPanel/SamplingOptsPanel.tsx b/gui/src/app/SamplingOptsPanel/SamplingOptsPanel.tsx
index 26379695..f8a87a04 100644
--- a/gui/src/app/SamplingOptsPanel/SamplingOptsPanel.tsx
+++ b/gui/src/app/SamplingOptsPanel/SamplingOptsPanel.tsx
@@ -1,6 +1,7 @@
 import { FunctionComponent, useCallback } from "react";
 import { SamplingOpts, defaultSamplingOpts } from "../StanSampler/StanSampler";
 import { Hyperlink } from "@fi-sci/misc";
+import { Grid } from "@mui/material";
 
 type SamplingOptsPanelProps = {
     samplingOpts: SamplingOpts;
@@ -21,6 +22,9 @@ type SamplingOptsPanelProps = {
 //  Seed. Any uint32.
 
 
+const sp1 = 0.5;
+const sp2 = 1;
+
 const SamplingOptsPanel: FunctionComponent<SamplingOptsPanelProps> = ({ samplingOpts, setSamplingOpts }) => {
     const num_chains = samplingOpts.num_chains;
     const readOnly = setSamplingOpts === undefined;
@@ -29,71 +33,80 @@ const SamplingOptsPanel: FunctionComponent<SamplingOptsPanelProps> = ({ sampling
     }, [setSamplingOpts])
     return (
         <div>
-            <table>
-                <tbody>
-                    <tr title="Number of sampling chains">
-                        <td># chains</td>
-                        <td>
-                            <NumberEdit
-                                value={num_chains}
-                                onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, num_chains: value as number })}
-                                min={1}
-                                max={8}
-                                readOnly={readOnly}
-                                type="int"
-                            />
-                        </td>
-                    </tr>
-                    <tr title="Number of warmup draws per chain">
-                        <td># warmup</td>
-                        <td>
-                            <NumberEdit
-                                value={samplingOpts.num_warmup}
-                                onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, num_warmup: value as number })}
-                                min={0}
-                                readOnly={readOnly}
-                                type="int"
-                            />
-                        </td>
-                    </tr>
-                    <tr title="Number of regular draws per chain">
-                        <td># samples</td>
-                        <td>
-                            <NumberEdit
-                                value={samplingOpts.num_samples}
-                                onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, num_samples: value as number })}
-                                min={1}
-                                readOnly={readOnly}
-                                type="int"
-                            />
-                        </td>
-                    </tr>
-                    <tr title="Radius of the hypercube from which initial values for the model parameters are drawn (I think)">
-                        <td>init radius</td>
-                        <td>
-                            <NumberEdit
-                                value={samplingOpts.init_radius}
-                                onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, init_radius: value as number })}
-                                min={0}
-                                readOnly={readOnly}
-                                type="float"
-                            />
-                        </td>
-                    </tr>
-                    <tr title="Random seed for the sampler. Leave blank (not 0) for a random seed">
-                        <td>seed</td>
-                        <td>
-                            <NumberEdit
-                                value={samplingOpts.seed}
-                                onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, seed: value })}
-                                min={0}
-                                readOnly={readOnly}
-                                type="int"
-                            />
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+            <Grid container spacing={sp1}>
+                <Grid container item xs={12} spacing={sp2} title="Number of sampling chains">
+                    <Grid item xs={6}>
+                        # chains
+                    </Grid>
+                    <Grid item xs={6}>
+                        <NumberEdit
+                            value={num_chains}
+                            onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, num_chains: value as number })}
+                            min={1}
+                            max={8}
+                            readOnly={readOnly}
+                            type="int"
+                        />
+                    </Grid>
+                </Grid>
+                <Grid container item xs={12} spacing={sp2} title="Number of warmup draws per chain">
+                    <Grid item xs={6}>
+                        # warmup
+                    </Grid>
+                    <Grid item xs={6}>
+                        <NumberEdit
+                            value={samplingOpts.num_warmup}
+                            onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, num_warmup: value as number })}
+                            min={0}
+                            readOnly={readOnly}
+                            type="int"
+                        />
+                    </Grid>
+                </Grid>
+                <Grid container item xs={12} spacing={sp2} title="Number of regular draws per chain">
+                    <Grid item xs={6}>
+                        # samples
+                    </Grid>
+                    <Grid item xs={6}>
+                        <NumberEdit
+                            value={samplingOpts.num_samples}
+                            onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, num_samples: value as number })}
+                            min={1}
+                            readOnly={readOnly}
+                            type="int"
+                        />
+                    </Grid>
+                </Grid>
+                <Grid container item xs={12} spacing={sp2} title="Radius of the hypercube from which initial values for the model parameters are drawn (I think)">
+                    <Grid item xs={6}>
+                        init radius
+                    </Grid>
+                    <Grid item xs={6}>
+                        <NumberEdit
+                            value={samplingOpts.init_radius}
+                            onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, init_radius: value as number })}
+                            min={0}
+                            readOnly={readOnly}
+                            type="float"
+                        />
+                    </Grid>
+                </Grid>
+                <Grid container item xs={12} spacing={sp2} title="Random seed for the sampler. Leave blank (not 0) for a random seed.">
+                    <Grid item xs={6}>
+                        seed
+                    </Grid>
+                    <Grid item xs={6}>
+                        <NumberEdit
+                            value={samplingOpts.seed}
+                            onChange={(value) => setSamplingOpts && setSamplingOpts({ ...samplingOpts, seed: value })}
+                            min={0}
+                            readOnly={readOnly}
+                            type="int"
+                        />
+                    </Grid>
+                </Grid>
+            </Grid>
+            <div style={{position: 'relative', height: 5}} />
             <div>
                 <Hyperlink onClick={handleReset} color="gray">reset</Hyperlink>
             </div>
diff --git a/gui/src/app/pages/HomePage/HomePage.tsx b/gui/src/app/pages/HomePage/HomePage.tsx
index e5c67478..e51de2e9 100644
--- a/gui/src/app/pages/HomePage/HomePage.tsx
+++ b/gui/src/app/pages/HomePage/HomePage.tsx
@@ -217,7 +217,7 @@ const LowerRightView: FunctionComponent<LowerRightViewProps> = ({ width, height,
         }
     }, [dataFileContent])
     const samplingOptsPanelHeight = 140
-    const samplingOptsPanelWidth = Math.min(150, width / 2)
+    const samplingOptsPanelWidth = Math.min(180, width / 2)
 
     const {sampler} = useStanSampler(compiledMainJsUrl)
     const {status: samplerStatus} = useSamplerStatus(sampler)