diff --git a/.github/workflows/code.yml b/.github/workflows/code.yml index e0c0cc1..d1fc0a3 100644 --- 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 index 72bc7f5..f7f09a4 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,14 @@ + + + + + dedi-web + - - - - - dedi-web - - - -
- - - - \ No newline at end of file + +
+ + + diff --git a/src/app.tsx b/src/app.tsx index 354186a..54b2e32 100644 --- 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 ( - - - - - + + + + + + + - + + + - - + ); } diff --git a/src/calculations/circularDevice.ts b/src/calculations/circularDevice.ts index 2d67829..67fbeed 100644 --- 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; -} \ No newline at end of file +} diff --git a/src/calculations/numericRange.test.ts b/src/calculations/numericRange.test.ts index b20d1f5..9f12a19 100644 --- 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) -}) \ No newline at end of file + 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 index 91061ca..c086a32 100644 --- 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 index 52e43ea..8811b40 100644 --- 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 index f2be7ff..bfa71ce 100644 --- 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 ( - - - - - - - - - - {} - - - - - Dedi Web - - - - - ); -} \ No newline at end of file + const [state, setState] = React.useState({ menuOpen: false }); + const toggleDrawer = (open: boolean) => () => { + setState({ menuOpen: open }); + }; + return ( + + + + + + + + + + {} + + + + + Dedi Web + + + + + ); +} diff --git a/src/components/centrePlot.tsx b/src/components/centrePlot.tsx index 0ff3e97..2d970ac 100644 --- 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 ( - - - -
- - - - {/**/} - -
- - - ) -} \ No newline at end of file + return ( + + + +
+ + + + {/**/} + +
+ + + + ); +} diff --git a/src/components/dataSideBar.tsx b/src/components/dataSideBar.tsx index 9aac8a4..1f14a77 100644 --- a/src/components/dataSideBar.tsx +++ b/src/components/dataSideBar.tsx @@ -1,85 +1,311 @@ -import { Box, Card, CardContent, Stack, Typography, Divider, Autocomplete, TextField, Button } from "@mui/material"; +import { + Card, + CardContent, + Stack, + Typography, + Divider, + Autocomplete, + TextField, + Button, + FormControl, + Select, + MenuItem, + InputLabel, + SelectChangeEvent, + ButtonGroup, + Input, +} from "@mui/material"; import { BeamlineConfig, DetectorType } from "../utils/types"; +import React from "react"; +import RemoveIcon from "@mui/icons-material/Remove"; +import AddIcon from "@mui/icons-material/Add"; +enum DistanceUnits { + millimetre = "millimetre", + micrometre = "micrometre", +} + +enum EnergyUnits { + electronVolts = "electronVolts", + kiloElectronVolts = "kiloElectronVolts", +} + +enum WavelengthUnits { + nanmometres = "nanometeres", + angstroms = "angstroms", +} + +enum AngleUnits { + radians = "radians", + degrees = "degrees", +} export default function DataSideBar(): JSX.Element { - return ( - - - - - Configuration - - Predefined Configuration Templates - - } - /> - - - Detector - } - /> - Resolution: 150x160 - - Pixel size - } - /> - - - - Beamstop - - Diameter: {4} - } - /> - - - - - Position - - x: - px - - - y: - px - - - - - - Clearance - Diameter: {4} - } - /> - - - - ) -} \ No newline at end of file + const [cameraDiameterUnits, setCameraDiameterUnits] = + React.useState(DistanceUnits.millimetre); + + const handleCameraDiameterUnits = (event: SelectChangeEvent) => { + setCameraDiameterUnits(event.target.value as DistanceUnits); + }; + + const [clearanceDiameterUnits, setClearnaceDiameterUnits] = + React.useState(DistanceUnits.millimetre); + + const handleClearanceDiameterUnits = (event: SelectChangeEvent) => { + setClearnaceDiameterUnits(event.target.value as DistanceUnits); + }; + + const [beamstopDiameterUnits, setBeamstopDiameterUnits] = + React.useState(DistanceUnits.millimetre); + + const handleBeamstopDiameterUnits = (event: SelectChangeEvent) => { + setBeamstopDiameterUnits(event.target.value as DistanceUnits); + }; + const [pixelSizeUnits, setPixelSizeUnits] = React.useState( + DistanceUnits.millimetre, + ); + + const handlePixelSizeUnits = (event: SelectChangeEvent) => { + setPixelSizeUnits(event.target.value as DistanceUnits); + }; + const [beamEnergyUnits, setBeamEnergyUnits] = React.useState( + EnergyUnits.electronVolts, + ); + + const handleBeamEnergyUnits = (event: SelectChangeEvent) => { + setBeamEnergyUnits(event.target.value as EnergyUnits); + }; + + const [wavelengthUnits, setWavelengthUnits] = React.useState( + WavelengthUnits.nanmometres, + ); + + const handleWavelengthUnits = (event: SelectChangeEvent) => { + setWavelengthUnits(event.target.value as WavelengthUnits); + }; + + const [cameraLength, setCameraLength] = React.useState(1.9); + + const handleCameraLength = (event: React.ChangeEvent) => { + setCameraLength(parseFloat(event.target.value)); + }; + const [angleUnits, setAngleUnits] = React.useState( + AngleUnits.radians, + ); + + const handleAngleUnits = (event: SelectChangeEvent) => { + setAngleUnits(event.target.value as AngleUnits); + }; + + const [angle, setAngle] = React.useState(90); + + const handleAngleChange = (event: React.ChangeEvent) => { + setAngle(parseFloat(event.target.value)); + }; + + return ( + + + + Configuration + + Predefined Configuration Templates + + ( + + )} + /> + + + Detector + ( + + )} + /> + Resolution: 150x160 + + Pixel size + + units + + + + + + Beamstop + + Diameter: {4} + + units + + + + + + + Position + + x: + px + + + y: + px + + + + + + Clearance + + Diameter: {4} + + units + + + + + Camera Tube + + Diameter: {4} + + units + + + + Position + + x: + px + + + y: + px + + + Beam properties + + Energy + + units + + + + + WaveLength + + units + + + + Minimum allowed wavelength: {4} + Maximum allowed wavelength: {4} + + + Camera Length: + + + + + + m + + + + Angle: + + + units + + + + + + + ); +} diff --git a/src/components/legendBar.tsx b/src/components/legendBar.tsx index a61b3c0..c8f3618 100644 --- a/src/components/legendBar.tsx +++ b/src/components/legendBar.tsx @@ -1,14 +1,31 @@ -import { Box, Card, CardContent, Stack, Typography, } from "@mui/material"; +import { + Card, + CardContent, + Checkbox, + FormControlLabel, + FormGroup, + Stack, + Typography, +} from "@mui/material"; export default function LegendBar(): JSX.Element { return ( - - - - - Legend side bar - - - - ) -} \ No newline at end of file + + + + Legend + Add something to do with colors here + + } label="Detector" /> + } label="Beamstop" /> + } label="Camera tube" /> + } label="Q range" /> + } label="Mask" /> + } label="Calibrant" /> + + Currently selected Calibrant is: {5} + + + + ); +} diff --git a/src/components/resultsBar.tsx b/src/components/resultsBar.tsx index 1404a18..d950c16 100644 --- a/src/components/resultsBar.tsx +++ b/src/components/resultsBar.tsx @@ -1,8 +1,8 @@ -import { Box, Card, CardContent, Stack, Typography, } from "@mui/material"; +import { Box, Card, CardContent, Stack, Typography } from "@mui/material"; export default function ResultsBar(): JSX.Element { return ( - + @@ -10,5 +10,6 @@ export default function ResultsBar(): JSX.Element { - ) -} \ No newline at end of file + + ); +} diff --git a/src/components/sideMenu.tsx b/src/components/sideMenu.tsx index 8e4797c..36a2f69 100644 --- a/src/components/sideMenu.tsx +++ b/src/components/sideMenu.tsx @@ -2,20 +2,20 @@ import Box from "@mui/material/Box"; import List from "@mui/material/List"; import Divider from "@mui/material/Divider"; import ListItem from "@mui/material/ListItem"; -import { Typography } from "@mui/material"; - +import { Button, Stack, Typography } from "@mui/material"; export default function SideMenu() { - - return ( - Maybe settings here + + Reset to default + + ); -} \ No newline at end of file +} diff --git a/src/index.css b/src/index.css index 0c24de1..929290a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,5 @@ -@import 'normalize.css'; -@import '@h5web/lib/styles.css'; +@import "normalize.css"; +@import "@h5web/lib/styles.css"; body { margin: 0; diff --git a/src/main.tsx b/src/main.tsx index c883341..8d93f3a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./app.tsx"; -import BasicAppBar from './components/basicAppBar.tsx'; +import BasicAppBar from "./components/basicAppBar.tsx"; import "./index.css"; import { Box } from "@mui/material"; @@ -11,6 +11,5 @@ ReactDOM.createRoot(document.getElementById("root")!).render( - , + , ); - diff --git a/tsconfig.node.json b/tsconfig.node.json index 1c17a14..ef0fd3f 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -7,7 +7,5 @@ "allowSyntheticDefaultImports": true, "strictNullChecks": true }, - "include": [ - "vite.config.ts" - ] -} \ No newline at end of file + "include": ["vite.config.ts"] +}