Skip to content

Commit

Permalink
dreaming of scrollable mui cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@tizayi
tizayi committed Aug 24, 2023
1 parent 3820e43 commit 8f0cafb
Show file tree
Hide file tree
Showing 7 changed files with 133 additions and 57 deletions.
6 changes: 3 additions & 3 deletions src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function App(): JSX.Element {
return (
<Box margin={1}>
<Stack direction={"row"} spacing={1}>
<Box maxWidth={"40vw"} maxHeight={"92vh"}>
<Box >
<DataSideBar />
</Box>
<Stack direction={"column"} spacing={1} flexGrow={1}>
Expand All @@ -20,7 +20,7 @@ export default function App(): JSX.Element {
</Stack>
<ResultsBar />
</Stack>
</Stack>
</Box>
</Stack >
</Box >
);
}
1 change: 1 addition & 0 deletions src/components/basicAppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ 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) => () => {
Expand Down
87 changes: 38 additions & 49 deletions src/components/dataSideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,8 @@ import { BeamlineConfig, DetectorType } from "../utils/types";
import React from "react";
import RemoveIcon from "@mui/icons-material/Remove";
import AddIcon from "@mui/icons-material/Add";
import { DistanceUnits, EnergyUnits, WavelengthUnits, AngleUnits } from "../utils/units";

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 {
const [cameraDiameterUnits, setCameraDiameterUnits] =
Expand Down Expand Up @@ -104,14 +86,15 @@ export default function DataSideBar(): JSX.Element {
};

return (
<Card sx={{ height: 1 }}>
<Card sx={{ height: 1 }} >
<CardContent>
<Stack spacing={1}>
<Typography variant="h6">Configuration</Typography>
<Divider></Divider>
<Typography> Predefined Configuration Templates</Typography>
<Stack direction={"row"}>
<Autocomplete
size="small"
disablePortal
id="combo-box-demo"
options={Object.values(BeamlineConfig)}
Expand All @@ -124,6 +107,7 @@ export default function DataSideBar(): JSX.Element {
<Divider />
<Typography variant="h6">Detector</Typography>
<Autocomplete
size="small"
disablePortal
id="combo-box-demo"
options={Object.values(DetectorType)}
Expand All @@ -138,13 +122,14 @@ export default function DataSideBar(): JSX.Element {
<FormControl>
<InputLabel>units</InputLabel>
<Select
size="small"
value={pixelSizeUnits}
label="units"
onChange={handlePixelSizeUnits}
>
<MenuItem value={DistanceUnits.millimetre}>mm x mm</MenuItem>
<MenuItem value={DistanceUnits.millimetre}>{DistanceUnits.millimetre}x{DistanceUnits.millimetre}</MenuItem>
<MenuItem value={DistanceUnits.micrometre}>
{"\u03bcm x \u03bcm"}
{DistanceUnits.micrometre}x{DistanceUnits.micrometre}
</MenuItem>
</Select>
</FormControl>
Expand All @@ -157,31 +142,30 @@ export default function DataSideBar(): JSX.Element {
<FormControl>
<InputLabel>units</InputLabel>
<Select
size="small"
value={beamstopDiameterUnits}
label="units"
onChange={handleBeamstopDiameterUnits}
>
<MenuItem value={DistanceUnits.millimetre}>mm</MenuItem>
<MenuItem value={DistanceUnits.millimetre}>{DistanceUnits.millimetre}</MenuItem>
<MenuItem value={DistanceUnits.micrometre}>
{"\u03bcm"}
{DistanceUnits.micrometre}
</MenuItem>
</Select>
</FormControl>
</Stack>
</Stack>
<Divider />
<Stack>
<Typography variant="h6">Position</Typography>
<Stack direction={"row"}>
<Typography flexGrow={2}>x:</Typography>
<Typography flexGrow={2}>px</Typography>
</Stack>
<Stack direction={"row"}>
<Typography flexGrow={2}>y:</Typography>
<Typography flexGrow={2}>px</Typography>
</Stack>
<Button>Centre detector</Button>
<Button>Centre top edge</Button>
<Typography variant="h6">Position</Typography>
<Stack direction={"row"}>
<Typography flexGrow={2}>x:</Typography>
<Typography flexGrow={2}>px</Typography>
<Button size="small">Centre detector</Button>
</Stack>
<Stack direction={"row"}>
<Typography flexGrow={2}>y:</Typography>
<Typography flexGrow={2}>px</Typography>
<Button size="small">Centre top edge</Button>
</Stack>
<Divider />
<Typography variant="h6">Clearance</Typography>
Expand All @@ -190,13 +174,14 @@ export default function DataSideBar(): JSX.Element {
<FormControl>
<InputLabel>units</InputLabel>
<Select
size="small"
value={clearanceDiameterUnits}
label="units"
onChange={handleClearanceDiameterUnits}
>
<MenuItem value={DistanceUnits.millimetre}>mm</MenuItem>
<MenuItem value={DistanceUnits.millimetre}>{DistanceUnits.millimetre}</MenuItem>
<MenuItem value={DistanceUnits.micrometre}>
{"\u03bcm"}
{DistanceUnits.micrometre}
</MenuItem>
</Select>
</FormControl>
Expand All @@ -208,13 +193,13 @@ export default function DataSideBar(): JSX.Element {
<FormControl>
<InputLabel>units</InputLabel>
<Select
size="small"
value={cameraDiameterUnits}
label="units"
onChange={handleCameraDiameterUnits}
>
<MenuItem value={DistanceUnits.millimetre}>mm</MenuItem>
<MenuItem value={DistanceUnits.micrometre}>
{"\u03bcm"}
<MenuItem value={DistanceUnits.millimetre}>{DistanceUnits.millimetre}</MenuItem>
<MenuItem value={DistanceUnits.micrometre}>{DistanceUnits.micrometre}
</MenuItem>
</Select>
</FormControl>
Expand All @@ -235,12 +220,13 @@ export default function DataSideBar(): JSX.Element {
<FormControl>
<InputLabel>units</InputLabel>
<Select
size="small"
value={beamEnergyUnits}
label="units"
onChange={handleBeamEnergyUnits}
>
<MenuItem value={EnergyUnits.electronVolts}>eV</MenuItem>
<MenuItem value={EnergyUnits.kiloElectronVolts}>keV</MenuItem>
<MenuItem value={EnergyUnits.electronVolts}>{EnergyUnits.electronVolts}</MenuItem>
<MenuItem value={EnergyUnits.kiloElectronVolts}>{EnergyUnits.kiloElectronVolts}</MenuItem>
</Select>
</FormControl>
</Stack>
Expand All @@ -249,13 +235,13 @@ export default function DataSideBar(): JSX.Element {
<FormControl>
<InputLabel>units</InputLabel>
<Select
size="small"
value={wavelengthUnits}
label="units"
onChange={handleWavelengthUnits}
>
<MenuItem value={WavelengthUnits.nanmometres}>nm</MenuItem>
<MenuItem value={WavelengthUnits.angstroms}>
{"\u212B"}
<MenuItem value={WavelengthUnits.nanmometres}>{WavelengthUnits.nanmometres}</MenuItem>
<MenuItem value={WavelengthUnits.angstroms}>{WavelengthUnits.angstroms}
</MenuItem>
</Select>
</FormControl>
Expand All @@ -272,13 +258,15 @@ export default function DataSideBar(): JSX.Element {
value={cameraLength}
/>
<Button
size="small"
onClick={() =>
setCameraLength(Math.round((cameraLength - 2.5) * 100) / 100)
}
>
<RemoveIcon fontSize="small" />
</Button>
<Button
size="small"
onClick={() =>
setCameraLength(Math.round((cameraLength + 2.5) * 100) / 100)
}
Expand All @@ -295,17 +283,18 @@ export default function DataSideBar(): JSX.Element {
<FormControl>
<InputLabel>units</InputLabel>
<Select
size="small"
value={angleUnits}
label="units"
onChange={handleAngleUnits}
>
<MenuItem value={AngleUnits.radians}>rad</MenuItem>
<MenuItem value={AngleUnits.degrees}>deg</MenuItem>
<MenuItem value={AngleUnits.radians}>{AngleUnits.radians}</MenuItem>
<MenuItem value={AngleUnits.degrees}>{AngleUnits.degrees}</MenuItem>
</Select>
</FormControl>
</Stack>
</Stack>
</CardContent>
</Card>
</Card >
);
}
66 changes: 64 additions & 2 deletions src/components/resultsBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,74 @@
import { Box, Card, CardContent, Stack, Typography } from "@mui/material";
import { Box, Card, CardContent, Divider, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Stack, Typography } from "@mui/material";
import { AngleUnits } from "../utils/units";
import React from "react";
const theta = "\u03B8"

enum ScatteringQuantity {
q = "q",
d = "d",
s = "s",
twoTheta = "2" + theta,
}



export default function ResultsBar(): JSX.Element {
const [angleUnits, setAngleUnits] = React.useState<AngleUnits>(
AngleUnits.radians,
);

const handleAngleUnits = (event: SelectChangeEvent) => {
setAngleUnits(event.target.value as AngleUnits);
};
const [quantity, setQuantity] = React.useState<ScatteringQuantity>(
ScatteringQuantity.q
);

const handleQuantity = (event: SelectChangeEvent) => {
setQuantity(event.target.value as ScatteringQuantity);
};

return (
<Box sx={{ flexGrow: 2 }}>
<Card sx={{ height: 1 }}>
<CardContent>
<Stack spacing={2}>
<Typography variant="h4"> Results bottom bar </Typography>
<Typography variant="h6"> Results bottom bar </Typography>
<Divider />
<Stack direction={"row"} spacing={3}>
<Typography>Scattering quantity: </Typography>
<FormControl>
<InputLabel>quantity</InputLabel>
<Select
size="small"
value={quantity}
label="units"
onChange={handleQuantity}
>
<MenuItem value={ScatteringQuantity.q}>{ScatteringQuantity.q}</MenuItem>
<MenuItem value={ScatteringQuantity.d}>{ScatteringQuantity.d}</MenuItem>
<MenuItem value={ScatteringQuantity.s}>{ScatteringQuantity.s}</MenuItem>
<MenuItem value={ScatteringQuantity.twoTheta}>{ScatteringQuantity.twoTheta}</MenuItem>

</Select>
</FormControl>
<FormControl>
<InputLabel>units</InputLabel>
<Select
size="small"
value={angleUnits}
label="units"
onChange={handleAngleUnits}
>
<MenuItem value={AngleUnits.radians}>rad</MenuItem>
<MenuItem value={AngleUnits.degrees}>deg</MenuItem>
</Select>
</FormControl>
</Stack>
<Typography>Min {quantity} value: </Typography>
<Typography>Max {quantity} value: </Typography>
<Typography>Requested min {quantity} value: </Typography>
<Typography>Requested max {quantity} value: </Typography>
</Stack>
</CardContent>
</Card>
Expand Down
2 changes: 2 additions & 0 deletions src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import BasicAppBar from "./components/basicAppBar.tsx";
import "./index.css";
import { Box } from "@mui/material";



ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<Box>
Expand Down
6 changes: 3 additions & 3 deletions src/utils/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Vector2D from "../calculations/vector";
import { Vector2 } from "three";

export enum BeamlineConfig {
SaxAnIso = "I22 SAXS Anisotropic",
Expand All @@ -23,10 +23,10 @@ export interface Detector {

export interface Beamstop {
diameter: number;
position: Vector2D;
position: Vector2;
}

export interface CameraTube {
diameter: number;
position: Vector2D;
position: Vector2;
}
22 changes: 22 additions & 0 deletions src/utils/units.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const mu = "\u03bc"
const angstrum = "\u212B"

export enum DistanceUnits {
millimetre = "mm",
micrometre = mu + "m",
}

export enum EnergyUnits {
electronVolts = "eV",
kiloElectronVolts = "keV",
}

export enum WavelengthUnits {
nanmometres = "nm",
angstroms = angstrum
}

export enum AngleUnits {
radians = "rad",
degrees = "deg",
}

0 comments on commit 8f0cafb

Please sign in to comment.