Skip to content

Commit

Permalink
Merge pull request #11 from hicsail/hazim/web-ui/experimentPage
Browse files Browse the repository at this point in the history 
Hazim/web UI/experiment page
  • Loading branch information
@ZimLim
ZimLim authored Mar 4, 2024
2 parents 0f0e0f3 + 86ecf5c commit adb51cb
Show file tree
Hide file tree
Showing 12 changed files with 400 additions and 133 deletions.
9 changes: 5 additions & 4 deletions frontend/src/components/LayoutObject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,28 @@ import { Layout } from "../types/Layout";
interface LayoutComponentProps {
layoutOptions: Layout[];
value: Layout;
onChange: (arg0: Layout) => void;
}

export const LayoutComponent: FC<LayoutComponentProps> = (props) => {
const [selectedOption, setSelectedOption] = useState<Layout | null>(
props.layoutOptions[0],
);
const [selectedOption, setSelectedOption] = useState<Layout | null>();
const [mediaVol, setMediaVol] = useState("");
const [textfieldError, setTextfieldError] = useState(false);
const handleCheckboxChange = (option: Layout) => {
if (selectedOption === option) {
setSelectedOption(null);
} else {
setSelectedOption(option);
props.onChange(option)

}
};
const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
if (event.target) {
if (/^\d*$/.test(event.target.value)) {
setMediaVol(event.target.value);
setTextfieldError(false);
props.value.mediaVolume = parseInt(event.target.value);
props.value.params.mediaVolume = parseInt(event.target.value);
} else {
setTextfieldError(true);
}
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/MediaObject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { Media } from "../types/Media";
interface MediaComponentProps {
mediaOptions: Media[];
value: Media;
onChange: (arg0: Media) => void;
}

export const MediaComponent: FC<MediaComponentProps> = (props) => {
Expand All @@ -25,6 +26,8 @@ export const MediaComponent: FC<MediaComponentProps> = (props) => {
setSelectedOption(null);
} else {
setSelectedOption(option);
props.onChange(option)
props.value = option;
}
};
const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
Expand All @@ -33,7 +36,7 @@ export const MediaComponent: FC<MediaComponentProps> = (props) => {
console.log(event.target.value);
setMediaVol(event.target.value);
setTextfieldError(false);
props.value.mediaConcentration = parseInt(event.target.value);
props.value.params.mediaConcentration = parseInt(event.target.value);
} else {
setTextfieldError(true);
}
Expand Down
61 changes: 28 additions & 33 deletions frontend/src/components/ModelObject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,44 +11,42 @@ import {
Grid,
Divider,
} from "@mui/material";
import { FC, useState, ChangeEvent } from "react";
import { MetabolicModel, ModelParams } from "../types/Model";
import { FC, useState } from "react";
import { MetabolicModel } from "../types/Model";

interface ModelComponentProps {
modelOptions: MetabolicModel[];
value: MetabolicModel[];
value: MetabolicModel;
modelLimit: number;
onChange: (arg0: MetabolicModel) => void;
}

const defaultParams: ModelParams = {
const defaultParams: MetabolicModel['params'] = {
demographicNoise: false,
demographicNoiseAmplitude: "0",
uptakeVMax: "0",
uptakeKm: "0",
deathRate: "0",
biomassLinearDiffusivity: "0",
biomassNonlinearDiffusivity: "0",
demographicNoiseAmplitude: 0,
uptakeVMax: 0,
uptakeKm: 0,
deathRate: 0,
biomassLinearDiffusivity: 0,
biomassNonlinearDiffusivity: 0,
};

export const ModelComponent: FC<ModelComponentProps> = (props) => {
const [selectedOption, setSelectedOption] = useState<MetabolicModel | null>(
props.modelOptions[0],
);
const [modelParams, setModelParams] = useState<ModelParams>(defaultParams);
const [selectedOption, setSelectedOption] = useState<MetabolicModel | null>();
const [modelParams, setModelParams] = useState<MetabolicModel['params']>(defaultParams);
const [textfieldError, setTextfieldError] = useState(false);
const [chosenModels, setChosenModels] = useState<
{ name: string; params: ModelParams }[]
>([]);
const handleCheckboxChange = (option: MetabolicModel) => {
if (selectedOption === option) {
setSelectedOption(null);
} else {
setSelectedOption(option);
props.onChange(option)
}
};
const handleTextChange = (field: string, value: string) => {
if (/^\d*$/.test(value)) {
setModelParams({ ...modelParams, [field]: value });
setModelParams({ ...modelParams, [field]: parseInt(value) });
props.value.params = { ...modelParams, [field]: parseInt(value) }
setTextfieldError(false);
} else {
setTextfieldError(true);
Expand All @@ -59,15 +57,6 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
setModelParams({ ...modelParams, demographicNoise: value });
};

const handleAddModel = (params: ModelParams, name: string) => {
const model = {
name: name,
params: params,
};
console.log(model);
setChosenModels([...chosenModels, model]);
};

return (
<>
<Box component="form" noValidate autoComplete="off" width={"100%"}>
Expand Down Expand Up @@ -102,7 +91,7 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
<Grid item xs={6}>
<RadioGroup>
<FormControlLabel
key={index}
key={index + 1}
label="Yes"
control={
<Radio
Expand All @@ -115,7 +104,7 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
}
/>
<FormControlLabel
key={index}
key={index + 2}
label="No"
control={
<Radio
Expand All @@ -134,6 +123,7 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
<TextField
variant="filled"
label="Demographic Noise Amplitude"
type="number"
disabled={!modelParams.demographicNoise}
value={modelParams.demographicNoiseAmplitude}
onChange={(event) =>
Expand All @@ -151,6 +141,7 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
<TextField
variant="filled"
label="Uptake Vmax"
type="number"
value={modelParams.uptakeVMax}
onChange={(event) =>
handleTextChange("uptakeVMax", event.target.value)
Expand All @@ -164,6 +155,7 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
<TextField
variant="filled"
label="Uptake Km"
type="number"
value={modelParams.uptakeKm}
onChange={(event) =>
handleTextChange("uptakeKm", event.target.value)
Expand All @@ -177,6 +169,7 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
<TextField
variant="filled"
label="Death Rate"
type="number"
value={modelParams.deathRate}
onChange={(event) =>
handleTextChange("deathRate", event.target.value)
Expand All @@ -190,6 +183,7 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
<TextField
variant="filled"
label="Biomass Linear Diffusivity"
type="number"
value={modelParams.biomassLinearDiffusivity}
onChange={(event) =>
handleTextChange(
Expand All @@ -206,6 +200,7 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
<TextField
variant="filled"
label="Biomass Non-Linear Diffusivity"
type="number"
value={modelParams.biomassNonlinearDiffusivity}
onChange={(event) =>
handleTextChange(
Expand All @@ -219,14 +214,14 @@ export const ModelComponent: FC<ModelComponentProps> = (props) => {
}
sx={{ marginTop: 2 }}
/>
<Button
{/* <Button
sx={{ marginTop: 2 }}
variant="outlined"
disabled={chosenModels.length >= props.modelLimit}
onClick={() => handleAddModel(modelParams, option.name)}
disabled={props.value.length >= props.modelLimit}
onClick={() => handleAddModel(modelParams, option)}
>
ADD MODEL
</Button>
</Button> */}
</>
)}
<Divider />
Expand Down
76 changes: 60 additions & 16 deletions frontend/src/components/SidebarObject.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,72 @@
import {
Box,
TextField,
FormGroup,
FormControlLabel,
Checkbox,
Divider,
Card,
CardContent,
Accordion,
AccordionSummary,
AccordionDetails,
List,
ListItemText,
Typography,
Button
} from "@mui/material";
import { FC, useState, ChangeEvent } from "react";
import { SummaryCard } from "../types/ExperimentTypes";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
export interface SidebarcardProps {
item: SummaryCard
key: number;
}

interface SidebarcardProps {
label: string;
const textPairing: { [key: string]: string } = {
"mediaVolume": "Media Volume(ml)",
"mediaConcentration": "Media Concentration(mmol/cm3)",
"demographicNoise": "Demographic Noise",
"demographicNoiseAmplitude": "Demographic Noise Amplitude",
"uptakeVMax": "Uptake Vmax",
"uptakeKm": "Uptake Km",
"deathRate": "Death Rate",
"biomassLinearDiffusivity": "Biomass Linear Diffusivity",
"biomassNonlinearDiffusivity": "Biomass Non-Linear Diffusivity",
"simulatedTime": "Simulated Time",
"timeSteps": "Time Steps",
"nutrientDiffusivity": "Nutrient Diffusivity",
"logFrequency": "Log Frequency"
}

export const SidebarCard = () => {

export const SidebarCard: FC<SidebarcardProps> = (props) => {
return (
<Box sx={{ width: "95%", marginLeft: 1 }}>
<Card variant="outlined">
<CardContent>
<Typography variant="h6"></Typography>
</CardContent>
</Card>
<Box sx={{ width: "95%", marginLeft: 1, paddingBottom:'0.5vh' }} key={props.key}>

<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<Typography variant="h6">{props.item.label}</Typography>

</AccordionSummary>
<AccordionDetails>
<List>
<ListItemText>
{
Object.keys(props.item.info.params).map(key => {
let ret;
if(typeof(props.item.info.params[key]) === 'boolean'){
ret = <Typography textAlign={'left'} textOverflow={'wrap'}>{textPairing[key]}: {String(props.item.info.params[key])}</Typography>
}else{
ret = <Typography textAlign={'left'} textOverflow={'wrap'}>{textPairing[key]}: {props.item.info.params[key]}</Typography>
}
return(
ret
)
})
}
</ListItemText>
</List>
</AccordionDetails>
</Accordion>

</Box>
);
};
14 changes: 6 additions & 8 deletions frontend/src/pages/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function DashboardPage() {
width: "100%",
paddingLeft: 5,
paddingRight: 5,
paddingTop: "2.5%",
paddingTop: "2%",
maxHeight: "40%",
justifyContent: "space-between",
}}
Expand Down Expand Up @@ -100,7 +100,8 @@ export function DashboardPage() {
</Typography>
</Grid>

<Grid item>
<Grid item flexDirection={'column'}>

<Typography
variant="h4"
sx={{
Expand All @@ -114,23 +115,20 @@ export function DashboardPage() {
>
To start your layout, click continue.
</Typography>
</Grid>

<Grid item>
<Box>

<NavLink to="/experimentSetup">
<Button
variant="contained"
endIcon={<ChevronRightIcon />}
sx={{
height: "7.5vh",
width: "25vw",
width: "25vw"
}}
>
<Typography variant="h5">CONTINUE TO LAYOUT BUILDER</Typography>
</Button>
</NavLink>
</Box>

</Grid>
</Grid>
</Box>
Expand Down
Loading

0 comments on commit adb51cb

Please sign in to comment.