add options to config side bar

DiamondLightSource · Aug 23, 2023 · 3820e43 · 3820e43
1 parent e0f1c82
commit 3820e43
Show file tree

Hide file tree

Showing 16 changed files with 478 additions and 252 deletions.
diff --git a/.github/workflows/code.yml b/.github/workflows/code.yml
@@ -26,12 +26,9 @@ jobs:
 
       - name: Install
         run: npm install
-      
+
       - name: lint
         run: npm run lint
 
       - name: Unit Tests
         run: npm run test
-
-
-
diff --git a/index.html b/index.html
@@ -1,16 +1,14 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>dedi-web</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>dedi-web</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,25 +1,26 @@
-import { Box, Stack, } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import DataSideBar from "./components/dataSideBar";
 import ResultsBar from "./components/resultsBar";
 import CentrePlot from "./components/centrePlot";
 import LegendBar from "./components/legendBar";
 
-
 export default function App(): JSX.Element {
-
   return (
-    <Box margin={1} >
-      <Stack direction={'row'} spacing={1}>
-        <DataSideBar />
-        <Stack direction={'column'} spacing={1} flexGrow={1}>
-          <Stack direction={'row'} spacing={1}>
+    <Box margin={1}>
+      <Stack direction={"row"} spacing={1}>
+        <Box maxWidth={"40vw"} maxHeight={"92vh"}>
+          <DataSideBar />
+        </Box>
+        <Stack direction={"column"} spacing={1} flexGrow={1}>
+          <Stack direction={"row"} spacing={1}>
             <CentrePlot />
-            <LegendBar />
+            <Box flexGrow={1}>
+              <LegendBar />
+            </Box>
           </Stack>
           <ResultsBar />
         </Stack>
       </Stack>
-    </Box >
-
+    </Box>
   );
 }
diff --git a/src/calculations/circularDevice.ts b/src/calculations/circularDevice.ts
@@ -6,4 +6,4 @@ import { Vector2 } from "three";
 export interface CircularDevice {
   centre: Vector2;
   diameter: number;
-}
+}
diff --git a/src/calculations/numericRange.test.ts b/src/calculations/numericRange.test.ts
@@ -2,25 +2,25 @@ import { expect, test } from "vitest";
 import NumericRange from "./numericRange";
 
 test("test numeric range contains value ", () => {
-    const range1 = new NumericRange(1, 4);
-    expect(range1.containsValue(2));
+  const range1 = new NumericRange(1, 4);
+  expect(range1.containsValue(2));
 });
 
 test("test numeric range contains range", () => {
-    const range1 = new NumericRange(1, 4)
-    const range2 = new NumericRange(2, 3)
-    expect(range1.containsRange(range2))
+  const range1 = new NumericRange(1, 4);
+  const range2 = new NumericRange(2, 3);
+  expect(range1.containsRange(range2));
 
-    const range3 = new NumericRange(6, 9)
-    expect(range1.containsRange(range3)).toBe(false)
-})
+  const range3 = new NumericRange(6, 9);
+  expect(range1.containsRange(range3)).toBe(false);
+});
 
 test("test numeric range interset", () => {
-    const range1 = new NumericRange(1, 4)
-    const range2 = new NumericRange(2, 8)
-    const intersection = new NumericRange(2, 4)
-    expect(range1.intersect(range2)?.equals(intersection))
+  const range1 = new NumericRange(1, 4);
+  const range2 = new NumericRange(2, 8);
+  const intersection = new NumericRange(2, 4);
+  expect(range1.intersect(range2)?.equals(intersection));
 
-    const range3 = new NumericRange(20, 28)
-    expect(range1.intersect(range3)).toBe(null)
-})
+  const range3 = new NumericRange(20, 28);
+  expect(range1.intersect(range3)).toBe(null);
+});
diff --git a/src/calculations/ray.test.ts b/src/calculations/ray.test.ts
@@ -3,9 +3,8 @@ import { Ray } from "./ray";
 import { Vector2 } from "three";
 
 test("Getting a point from a ray", () => {
-    const ray1 = new Ray(new Vector2(1, 1), new Vector2(1, 1));
-    const vector1 = ray1.getPoint(5)
-    const vector2 = new Vector2(6, 6)
-    expect(vector1?.equals(vector2))
+  const ray1 = new Ray(new Vector2(1, 1), new Vector2(1, 1));
+  const vector1 = ray1.getPoint(5);
+  const vector2 = new Vector2(6, 6);
+  expect(vector1?.equals(vector2));
 });
-
diff --git a/src/calculations/ray.ts b/src/calculations/ray.ts
@@ -1,4 +1,4 @@
-import { Vector2 } from 'three'
+import { Vector2 } from "three";
 import NumericRange from "./numericRange";
 
 export class Ray {
@@ -15,8 +15,8 @@ export class Ray {
 
   /**
    * Returns a point in the ray
-   * @param scalar 
-   * @returns 
+   * @param scalar
+   * @returns
    */
   getPoint(scalar: number): Vector2 | null {
     if (scalar < 0) return null;
@@ -59,8 +59,8 @@ export class Ray {
     const b =
       2 * coeffOfx2 * this.direction.x * this.initial_point.x +
       coeffOfxy *
-      (this.direction.x * this.initial_point.y +
-        this.direction.y * this.initial_point.x) +
+        (this.direction.x * this.initial_point.y +
+          this.direction.y * this.initial_point.x) +
       2 * coeffOfy2 * this.direction.y * this.initial_point.y +
       coeffOfx * this.direction.x +
       coeffOfy * this.direction.y;

diff --git a/src/components/basicAppBar.tsx b/src/components/basicAppBar.tsx
@@ -1,52 +1,52 @@
 import * as React from "react";
-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 IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
+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 IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
 import { Drawer } from "@mui/material";
 import SideMenu from "./sideMenu";
 
 export default function BasicAppBar(): JSX.Element {
-    const [state, setState] = React.useState({ menuOpen: false });
-    const toggleDrawer = (open: boolean) => () => {
-        setState({ menuOpen: open });
-    };
-    return (
-        <Box sx={{ flexGrow: 2 }}>
-            <AppBar position="static">
-                <Toolbar>
-                    <React.Fragment>
-                        <IconButton
-                            size="large"
-                            edge="start"
-                            color="inherit"
-                            aria-label="menu"
-                            sx={{ mr: 2 }}
-                            onClick={toggleDrawer(true)}
-                        >
-                            <MenuIcon />
-                        </IconButton>
-                        <Drawer
-                            anchor="left"
-                            open={state.menuOpen}
-                            onClose={toggleDrawer(false)}
-                        >
-                            <Box
-                                sx={{ width: 250 }}
-                                role="presentation"
-                                onClick={toggleDrawer(false)}
-                            >
-                                {<SideMenu />}
-                            </Box>
-                        </Drawer>
-                    </React.Fragment>
-                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-                        Dedi Web
-                    </Typography>
-                </Toolbar>
-            </AppBar>
-        </Box>
-    );
-}
+  const [state, setState] = React.useState({ menuOpen: false });
+  const toggleDrawer = (open: boolean) => () => {
+    setState({ menuOpen: open });
+  };
+  return (
+    <Box sx={{ flexGrow: 2 }}>
+      <AppBar position="static">
+        <Toolbar>
+          <React.Fragment>
+            <IconButton
+              size="large"
+              edge="start"
+              color="inherit"
+              aria-label="menu"
+              sx={{ mr: 2 }}
+              onClick={toggleDrawer(true)}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Drawer
+              anchor="left"
+              open={state.menuOpen}
+              onClose={toggleDrawer(false)}
+            >
+              <Box
+                sx={{ width: 250 }}
+                role="presentation"
+                onClick={toggleDrawer(false)}
+              >
+                {<SideMenu />}
+              </Box>
+            </Drawer>
+          </React.Fragment>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Dedi Web
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+}
diff --git a/src/components/centrePlot.tsx b/src/components/centrePlot.tsx
@@ -1,43 +1,33 @@
 import { Box, Card, CardContent } from "@mui/material";
-import { VisCanvas, Pan, Zoom } from '@h5web/lib';
+import { VisCanvas, Pan, Zoom } from "@h5web/lib";
 
 export default function CentrePlot(): JSX.Element {
-    return (
-        <Box>
-            <Card>
-                <CardContent>
-                    <div style={{ display: "grid", height: "60vh", width: "50vw" }}>
-                        <VisCanvas
-                            abscissaConfig={{
-                                isIndexAxis: true,
-                                showGrid: true,
-                                visDomain: [
-                                    50,
-                                    100
-                                ]
-                            }}
-                            aspect={{}}
-                            ordinateConfig={{
-                                isIndexAxis: true,
-                                showGrid: true,
-                                visDomain: [
-                                    50,
-                                    100
-                                ]
-                            }}
-                            showAxes={true}
-                        >
-                            <Pan
-                                button={[
-                                    0
-                                ]}
-                                modifierKey={[]}
-                            />
-                            <Zoom />
-                            {/*<f />*/}
-                        </VisCanvas>
-                    </div>
-                </CardContent>
-            </Card>
-        </Box >)
-}
+  return (
+    <Box>
+      <Card>
+        <CardContent>
+          <div style={{ display: "grid", height: "60vh", width: "50vw" }}>
+            <VisCanvas
+              abscissaConfig={{
+                isIndexAxis: true,
+                showGrid: true,
+                visDomain: [50, 100],
+              }}
+              aspect={{}}
+              ordinateConfig={{
+                isIndexAxis: true,
+                showGrid: true,
+                visDomain: [50, 100],
+              }}
+              showAxes={true}
+            >
+              <Pan button={[0]} modifierKey={[]} />
+              <Zoom />
+              {/*<f />*/}
+            </VisCanvas>
+          </div>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}