fix issue with complex union types

DiamondLightSource · May 20, 2024 · c96dbf8 · c96dbf8
1 parent 50d7866
commit c96dbf8
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -7,8 +7,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
-    "check-types": "tsc",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview --port 3000",
     "test": "npx vitest",

diff --git a/src/app.tsx b/src/app.tsx
@@ -1,20 +1,18 @@
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import DataSideBar from "./data-entry/dataSideBar";
 import CentrePlot from "./plot/centrePlot";
 import BasicAppBar from "./basicAppBar";
 
 export default function App(): JSX.Element {
   return (
-    <Box>
+    <>
       <BasicAppBar />
       <Stack direction={"row"} spacing={1} margin={1}>
-        <Box>
           <DataSideBar />
-        </Box>
         <Stack direction={"column"} spacing={1} flexGrow={1}>
           <CentrePlot />
         </Stack>
-      </Stack>
-    </Box>
+        </Stack>
+    </>
   );
 }
diff --git a/src/basicAppBar.tsx b/src/basicAppBar.tsx
@@ -1,5 +1,4 @@
 import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import { useDetectorStore } from "./data-entry/detectorStore";
@@ -39,7 +38,6 @@ export default function BasicAppBar(): JSX.Element {
   };
 
   return (
-    <Box>
       <AppBar position="static">
         <Toolbar>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
@@ -59,6 +57,5 @@ export default function BasicAppBar(): JSX.Element {
           />
         </Toolbar>
       </AppBar>
-    </Box>
   );
 }
diff --git a/src/data-entry/beamstop.tsx b/src/data-entry/beamstop.tsx
@@ -80,7 +80,7 @@ export default function BeamStopDataEntry(): JSX.Element {
       </Stack>
       {/* Position */}
       <Typography>Position:</Typography>
-      <Stack direction={"row"} spacing={2}>
+      <Stack direction={"row"} spacing={1}>
         <TextField
           type="number"
           size="small"

diff --git a/src/data-entry/dataSideBar.tsx b/src/data-entry/dataSideBar.tsx
@@ -72,11 +72,11 @@ export default function DataSideBar(): JSX.Element {
   };
 
   return (
-    <Card>
+    <Card sx={{ maxHeight: "92vh", overflow: "scroll"}}>
       <CardContent>
         <Stack spacing={1}>
           <Typography variant="h6">Beamline</Typography>
-          <Stack direction={"row"} spacing={2}>
+          <Stack direction={"row"} spacing={1}>
             <Autocomplete
               size="small"
               options={Object.keys(beamlineConfigStore.beamlineRecord)}
@@ -102,7 +102,7 @@ export default function DataSideBar(): JSX.Element {
           </Stack>
           <Divider />
           <Typography variant="h6">Detector</Typography>
-          <Stack direction={"row"} spacing={2}>
+          <Stack direction={"row"} spacing={1}>
             <Autocomplete
               size="small"
               options={Object.keys(detectorStore.detectorRecord)}

diff --git a/src/plot/centrePlot.tsx b/src/plot/centrePlot.tsx
@@ -7,7 +7,7 @@ import {
   SvgRect,
   VisCanvas,
 } from "@h5web/lib";
-import { Box, Card, CardContent, Stack } from "@mui/material";
+import {Card, CardContent, Stack } from "@mui/material";
 import { Unit, MathType, divide, multiply, unit, createUnit } from "mathjs";
 import { Vector2, Vector3 } from "three";
 import { computeQrange } from "../calculations/qrange";
@@ -167,7 +167,6 @@ export default function CentrePlot(): JSX.Element {
   const domains = getDomains(plotDetector);
 
   return (
-    <Box>
       <Stack direction="column" spacing={1}>
         <Stack direction="row" spacing={1}>
           <Card>
@@ -304,16 +303,13 @@ export default function CentrePlot(): JSX.Element {
               </div>
             </CardContent>
           </Card>
-          <Box flexGrow={1}>
             <LegendBar />
-          </Box>
         </Stack>
         <ResultsBar
           visableQRange={visibleQRangeUnits}
           fullQrange={fullQRangeUnits}
         />
       </Stack>
-    </Box>
   );
 }
 

diff --git a/src/plot/legendBar.tsx b/src/plot/legendBar.tsx
@@ -19,7 +19,7 @@ export default function LegendBar(): JSX.Element {
   const plotConfig = usePlotStore();
 
   return (
-    <Card sx={{ height: 1, width: 1 }}>
+    <Card sx={{flexGrow: 1}}>
       <CardContent>
         <Stack spacing={1}>
           <Typography variant="h6"> Legend</Typography>

diff --git a/src/results/rangeTable.tsx b/src/results/rangeTable.tsx
@@ -1,13 +1,11 @@
 import {
-  Box,
   FormControl,
   InputLabel,
   MenuItem,
   Paper,
   Select,
   SelectChangeEvent,
   Table,
-  TableBody,
   TableCell,
   TableContainer,
   TableHead,
@@ -49,35 +47,34 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
     .to(resultsStore.dUnits as string);
 
   return (
-    <Box flexGrow={1}>
-      <TableContainer component={Paper}>
+      <TableContainer component={Paper} sx={{ maxWidth: "30vw"}}>
         <Table sx={{ minWidth: 50 }} aria-label="simple table" size="small">
           {/* TABLE HEAD */}
           <TableHead>
             <TableRow>
-              <TableCell>Values</TableCell>
-              <TableCell align="right">Min</TableCell>
-              <TableCell align="right">Max</TableCell>
-              <TableCell align="right">Units</TableCell>
+              <TableCell align="center">Values</TableCell>
+              <TableCell align="center">Min</TableCell>
+              <TableCell align="center">Max</TableCell>
+              <TableCell align="center">Units</TableCell>
             </TableRow>
           </TableHead>
           {/* TABLE BODY */}
           <TableRow key={"q"}>
             {/* Q RANGE ROW */}
-            <TableCell component="th" scope="row">
+            <TableCell component="th" scope="row" align="center">
               {ScatteringOptions.q}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(qRange.min.toNumber())
                 ? ""
                 : qRange.min.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(qRange.max.toNumber())
                 ? ""
                 : qRange.max.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               <FormControl>
                 <InputLabel>q</InputLabel>
                 <Select
@@ -98,20 +95,20 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
           </TableRow>
           <TableRow key={"s"}>
             {/* S RANGE ROW*/}
-            <TableCell component="th" scope="row">
+            <TableCell component="th" scope="row" align="center">
               {ScatteringOptions.s}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(sRange.min.toNumber())
                 ? ""
                 : sRange.min.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(sRange.max.toNumber())
                 ? ""
                 : sRange.max.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               <FormControl>
                 <InputLabel>s</InputLabel>
                 <Select
@@ -132,20 +129,20 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
           </TableRow>
           <TableRow key={"d"}>
             {/* D RANGE ROW*/}
-            <TableCell component="th" scope="row">
+            <TableCell component="th" scope="row" align="center">
               {ScatteringOptions.d}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(dRange.min.toNumber())
                 ? ""
                 : dRange.min.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(dRange.max.toNumber())
                 ? ""
                 : dRange.max.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               <FormControl>
                 <InputLabel>d</InputLabel>
                 <Select
@@ -164,9 +161,7 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
               </FormControl>
             </TableCell>
           </TableRow>
-          <TableBody></TableBody>
         </Table>
       </TableContainer>
-    </Box>
   );
 }
diff --git a/src/results/resultsBar.tsx b/src/results/resultsBar.tsx
@@ -1,5 +1,4 @@
 import {
-  Box,
   Card,
   CardContent,
   Divider,
@@ -161,8 +160,10 @@ export default function ResultsBar({
 
   const units = displayUnits(textBoxUnits);
   return (
-    <Box sx={{ flexGrow: 1 }}>
-      <Card sx={{ height: 1 }}>
+      <Card sx={{ 
+        height: 1 ,
+        maxHeight: "27vh",
+        overflow: "scroll", flexGrow: 1,}}>
         <CardContent>
           <Stack spacing={1}>
             <Typography variant="h6"> Results</Typography>
@@ -210,7 +211,7 @@ export default function ResultsBar({
                     </Stack>
                     <RangeFormControl resultStore={resultStore} />
                   </Stack>
-                </Stack>
+
                 {diagramVisible && diagramFull && diagramRequested ? (
                   <RangeDiagram
                     visibleRange={diagramVisible satisfies UnitRange}
@@ -219,11 +220,11 @@ export default function ResultsBar({
                 ) : (
                   <MessageDiagram message="No solution" />
                 )}
+                </Stack>
               </Stack>
             </Stack>
           </Stack>
         </CardContent>
       </Card>
-    </Box>
   );
 }