removed 'show full results' state and made it fn of menu_state state …

…machine

frontend/src/App.tsx

@@ -34,7 +34,6 @@ const App = () => {
         menuState: [menuState, setMenuState],
         errorState: [errorState, setErrorState],
         showWarning: [showWarning, setShowWarning],
-        showFullResults: [, setShowFullResults]
     } = useContext(AppContext)!
 
 
@@ -127,8 +126,7 @@ const App = () => {
 
             const absErr: number = obj["abs_err"]
 
-            setMenuState('conf_result');
-            setShowFullResults(true);
+            setMenuState('conf_result_full');
             setAnalysisInfo({
                 integralRange: obj["cls"],
                 z: 1,

frontend/src/components/Canvas.tsx

@@ -36,7 +36,8 @@ const PreviewCanvas = () => {
         imageInfo: [imageInfo,],
         previewImg: [previewImg, setPreviewImg],
         selectedPhase: [selectedPhase,],
-        targetL: [targetL,]
+        targetL: [targetL,],
+        menuState: [menuState,]
     } = useContext(AppContext)!
 
     const containerRef = useRef<HTMLDivElement>(null);
@@ -157,6 +158,7 @@ const PreviewCanvas = () => {
         // Animated shrink of canvas into top left corner of parent div
         // sf is original width / target length
         if (targetL === null) { return; }
+        if (menuState != 'conf_result') { return }
         const canvas = canvasRef.current!;
 
         const shortestSide = Math.min(imageInfo?.width!, imageInfo?.height!);
@@ -188,7 +190,7 @@ const PreviewCanvas = () => {
             animateDiv(frontDivRef.current!, newCanvL, newCanvL)
         }
 
-    }, [targetL])
+    }, [menuState])
 
     return (
         <div ref={containerRef} style={centredStyle}>

frontend/src/components/Menu.tsx

@@ -169,9 +169,8 @@ const Result = () => {
         errVF: [errVF, setErrVF],
         pfB: [pfB,],
         accurateFractions: [accurateFractions,],
-        menuState: [, setMenuState],
+        menuState: [menuState, setMenuState],
         showInfo: [, setShowInfo],
-        showFullResults: [showFullResults, setShowFullResults],
     } = useContext(AppContext)!
 
     // we have two errVFs here because we want the values in the text to reflect the old
@@ -281,9 +280,12 @@ const Result = () => {
         </>
     )
 
-    const handleClose = () => { setShowFullResults(false) };
+    const handleClose = () => { setMenuState('conf_result') };
+
+    const showFull = (menuState == 'conf_result_full')
+
     const largeResults = (<>
-        <Modal show={showFullResults} onHide={handleClose} size="lg">
+        <Modal show={showFull} onHide={handleClose} size="lg">
             <Modal.Header style={{ backgroundColor: '#212529', color: '#ffffff' }} closeVariant="white" closeButton>
                 <Modal.Title>Results!</Modal.Title>
             </Modal.Header>
@@ -310,6 +312,12 @@ const Result = () => {
                         {/* TODO: add visualise button here! */}
                         <Accordion.Body style={{ visibility: "visible" }}>
                             For a {errVF.toFixed(2)}% uncertainty in phase fraction, you <b>need to measure a total image size of about {sizeText} (i.e. {nMore} more images)</b> at the same resolution.
+                            <div style={{ alignItems: 'right', display: 'flex-end', alignContent: 'right', }}>
+                                <Button variant="dark" onClick={handleClose} style={{ marginRight: '2em' }}>
+                                    Visualise!
+                                </Button>
+                            </div>
+
                         </Accordion.Body>
                     </Accordion.Item>
                     <Accordion.Item eventKey="2" >
@@ -343,8 +351,8 @@ const Result = () => {
     </>)
 
     return (<>
-        {(showFullResults == true) && largeResults}
-        {(showFullResults == false) && smallResults}
+        {(showFull == true) && largeResults}
+        {(showFull == false) && smallResults}
     </>)
 }
 
@@ -357,6 +365,8 @@ const getMenuInfo = (state: MenuState) => {
             return { title: "Choose Parameters", innerHTML: <ConfidenceSelect /> }
         case 'processing':
             return { title: "Processing", innerHTML: <div style={centreStyle}><Spinner /></div> }
+        case 'conf_result_full':
+            return { title: "Results", innerHTML: <Result /> }
         case 'conf_result':
             return { title: "Results", innerHTML: <Result /> }
         case 'hidden': // fall through
@@ -368,7 +378,6 @@ const getMenuInfo = (state: MenuState) => {
 export const Menu = () => {
     const {
         menuState: [menuState,],
-        showFullResults: [showFullResults,]
     } = useContext(AppContext)!
 
     const [collapse, setCollapse] = useState<boolean>(false);
@@ -377,7 +386,7 @@ export const Menu = () => {
 
     return (
         <>
-            {(showFullResults) ? getMenuInfo(menuState).innerHTML :
+            {(menuState == 'conf_result_full') ? getMenuInfo(menuState).innerHTML :
                 <ToastContainer className="p-5" position="bottom-end" >
                     <Toast show={!hide}>
                         <Toast.Header className="roundedme-2" closeButton={false}>

frontend/src/components/NormalSlider.tsx

@@ -8,8 +8,7 @@ import { head } from "underscore";
 
 const CANVAS_WIDTH = 428 * 2;
 const CANVAS_HEIGHT = 240 * 1.5;
-const TOP_VSPACE = 30
-const H_FOR_TEXT = 100;
+const H_FOR_TEXT = 80;
 const TEXT_OFFSET = 30;
 const SCALEBAR_WIDTH = 4;
 const H_GAUSS = CANVAS_HEIGHT - H_FOR_TEXT
@@ -86,7 +85,6 @@ const NormalSlider = () => {
         errVF: [errVF, setErrVF],
         pfB: [pfB, setPfB],
         accurateFractions: [accurateFractions,],
-        showFullResults: [showFullResults, setShowFullResults],
     } = useContext(AppContext)!
 
     const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -170,11 +168,12 @@ const NormalSlider = () => {
         const ctx = canv.getContext('2d')!;
         ctx.font = "28px Noto Sans"; // was 24
         ctx.fillStyle = headerHex;
-        ctx.fillText('Likelihood of true ϕ', 10, 40);
+        ctx.fillText('Likelihood of material p.f.', 10, 40);
 
+        const epsY = 24
         ctx.fillStyle = DARK_GREY;
-        ctx.fillText('ϕ of image', CANVAS_WIDTH / 2 - 60, CANVAS_HEIGHT - H_FOR_TEXT / 2 + 10);
-        ctx.fillText('Phase fraction (ϕ)', 10, CANVAS_HEIGHT - H_FOR_TEXT / 2 + 10);
+        ctx.fillText('p.f. of image', CANVAS_WIDTH / 2 - 60, CANVAS_HEIGHT - H_FOR_TEXT / 2 + epsY);
+        ctx.fillText('Phase Fraction (p.f.)', 10, CANVAS_HEIGHT - H_FOR_TEXT / 2 + epsY);
     }
 
     const drawText = (dataVals: Array<number>, xPositions: Array<number>, yOffset: number = TEXT_OFFSET, fontSize: number = 32) => {

frontend/src/components/context.tsx

@@ -21,7 +21,6 @@ const AppContextProvider = (props: {
     const [errorState, setErrorState] = useState<ErrorMessage>({ msg: "", stackTrace: "" });
     const [showWarning, setShowWarning] = useState<"" | "cls" | "size" | "over">("");
     const [showInfo, setShowInfo] = useState<boolean>(false);
-    const [showFullResults, setShowFullResults] = useState<boolean>(false);
 
 
     return (
@@ -40,7 +39,6 @@ const AppContextProvider = (props: {
                 errorState: [errorState, setErrorState],
                 showWarning: [showWarning, setShowWarning],
                 showInfo: [showInfo, setShowInfo],
-                showFullResults: [showFullResults, setShowFullResults],
             }}
         >
             {props.children}

frontend/src/components/interfaces.tsx

@@ -54,10 +54,6 @@ interface contextProps {
         showInfo: boolean,
         setShowInfo: (e: boolean) => void
     ],
-    showFullResults: [
-        showFullResults: boolean,
-        setShowFullResults: (e: boolean) => void
-    ]
 };
 
 const AppContext = createContext<contextProps | null>(null);
@@ -85,7 +81,7 @@ export function rgbaToHex(r: number, g: number, b: number, a: number) {
 export const colours: number[][] = [[255, 255, 255, 255], [31, 119, 180, 255], [255, 127, 14, 255], [44, 160, 44, 255], [214, 39, 40, 255], [148, 103, 189, 255], [140, 86, 75, 255]]
 export const IR_LIMIT_PX = 70
 
-export type MenuState = "hidden" | "phase" | "conf" | "processing" | "conf_result" | "length" | "length_result"
+export type MenuState = "hidden" | "phase" | "conf" | "processing" | "conf_result_full" | "conf_result" | "length"
 
 
 export interface ImageLoadInfo {