Skip to content

Commit 7775fa6

Browse files
anserwaseemanserwaseem
committed
added AppBar and Drawer in Test a String feature screen
1 parent b6f31dd commit 7775fa6

File tree

5 files changed

+131
-112
lines changed

5 files changed

+131
-112
lines changed

‎src/consts/StateIdsExtensions.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
// NFA to DFA
44
export const ModifiedTableStateId = "mtt";
5-
export const NullCLosureStateId = "nc";
5+
export const NullClosureStateId = "nc";
66
export const ResultantDfaStateId = "ntd";
77

88
// DFA Minimization
99
export const EquivalentStatesStateId = "est";
1010
export const MinimizedDfaStateId = "md";
1111

1212
// Test a String
13-
export const TestStringStateId = "ts";
13+
export const TestStringStateId = "ts";

‎src/features/NfaToDfa.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ResultantDfa } from "./components/nfaToDfa/ResultantDfa";
99
import { ResultantDfaProps } from "./components/nfaToDfa/props/ResultantDfaProps";
1010
import { DataContext } from "../components/Editor";
1111
import {
12-
NullCLosureStateId,
12+
NullClosureStateId,
1313
ModifiedTableStateId,
1414
ResultantDfaStateId,
1515
} from "../consts/StateIdsExtensions";
@@ -49,7 +49,7 @@ export const NfaToDfa = () => {
4949
.toString()
5050
.split(" ")
5151
.filter((key) => key !== "")
52-
.map((tv) => tv.replace(tv, tv + NullCLosureStateId))
52+
.map((tv) => tv.replace(tv, tv + NullClosureStateId))
5353
.join(" ") ?? row[key === "^" ? "nul" : key],
5454
])
5555
),
@@ -60,7 +60,7 @@ export const NfaToDfa = () => {
6060
const nullClosureStatesUnique = dataContext.states.map((state) => {
6161
return {
6262
...state,
63-
id: state.id + NullCLosureStateId,
63+
id: state.id + NullClosureStateId,
6464
};
6565
});
6666
console.log("nullClosureStatesUnique", nullClosureStatesUnique);
@@ -69,8 +69,8 @@ export const NfaToDfa = () => {
6969
(transition) => {
7070
return {
7171
...transition,
72-
start: transition.start + NullCLosureStateId,
73-
end: transition.end + NullCLosureStateId,
72+
start: transition.start + NullClosureStateId,
73+
end: transition.end + NullClosureStateId,
7474
};
7575
}
7676
);
@@ -103,7 +103,7 @@ export const NfaToDfa = () => {
103103
.toString()
104104
.split(" ")
105105
.filter((key) => key !== "")
106-
.map((tv) => tv.replace(NullCLosureStateId, ModifiedTableStateId))
106+
.map((tv) => tv.replace(NullClosureStateId, ModifiedTableStateId))
107107
.join(" ") ?? row[key === "^" ? "nul" : key],
108108
])
109109
),

‎src/features/TestAString.tsx‎

Lines changed: 111 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ import { startingStateColor, stateSelectedColor } from "../consts/Colors";
3030
import { PossibleTransitionValues } from "../consts/PossibleTransitionValues";
3131
import { TestStringMaxLength } from "../consts/TestStringMaxLength";
3232
import { TestStringStateId } from "../consts/StateIdsExtensions";
33+
import { AppBarAndDrawer } from "../common/AppBarAndDrawer";
34+
import { DrawerHeader } from "../common/DrawerHeader";
35+
import { MainContent } from "../common/MainContent";
36+
import { AppBarAndDrawerProps } from "../common/props/AppBarAndDrawerProps";
37+
import { GetDrawerTransitionTableColumns } from "../utils/GetDrawerTransitionTableColumns";
38+
import { GetDrawerTransitionTableRows } from "../utils/GetDrawerTransitionTableRows";
3339

3440
const TestAString = (props: TestAStringProps) => {
3541
console.log("re rendering TestAString: props");
@@ -63,6 +69,8 @@ const TestAString = (props: TestAStringProps) => {
6369
>([]);
6470
const [dialogError, setDialogError] = useState("");
6571

72+
const [open, setOpen] = useState(1);
73+
6674
useEffect(() => {
6775
if (dataContext) {
6876
setTestAStringStates(
@@ -264,6 +272,16 @@ const TestAString = (props: TestAStringProps) => {
264272
stateSize: dataContext.stateSize,
265273
};
266274

275+
const appBarAndDrawerProps: AppBarAndDrawerProps = {
276+
title: "Test a String",
277+
open,
278+
setOpen,
279+
transitionTableProps: {
280+
rows: GetDrawerTransitionTableRows(dataContext, TestStringStateId),
281+
columns: GetDrawerTransitionTableColumns(dataContext, false),
282+
},
283+
};
284+
267285
return (
268286
<>
269287
<Dialog open={props.isTestAStringDialogOpen} onClose={handleClose}>
@@ -293,106 +311,101 @@ const TestAString = (props: TestAStringProps) => {
293311
</Dialog>
294312

295313
{dialogError === "none" && (
296-
<Box sx={{ flexGrow: 1, m: 1, mt: 5 }}>
297-
<Typography
298-
variant="h5"
299-
component="div"
300-
gutterBottom
301-
align="center"
302-
fontWeight={"bold"}
303-
bgcolor={stateSelectedColor}
304-
>
305-
Test a String
306-
</Typography>
307-
308-
<Grid
309-
container
310-
columnSpacing={{
311-
xs: 1,
312-
sm: 2,
313-
md: 3,
314-
}}
315-
>
316-
<Grid item xs={12} alignItems={"center"}>
317-
<ButtonGroup
318-
disableElevation
319-
fullWidth
320-
variant="outlined"
321-
size="large"
322-
>
323-
{testString
324-
.replaceAll("^", "")
325-
.split("")
326-
.map((char, index) => (
327-
<TextField
328-
key={index}
329-
id={`testString${index}`}
330-
value={char}
331-
variant="standard"
332-
InputProps={{
333-
readOnly: true,
334-
sx: {
335-
textAlignLast: "center",
336-
},
337-
}}
338-
sx={{
339-
backgroundColor:
340-
Math.floor((testStringIndex - 1) / 2) === index
341-
? startingStateColor
342-
: "inherit",
343-
flexDirection: "inherit",
344-
borderRadius: "20px",
345-
border: `1px solid ${stateSelectedColor}`,
346-
borderWidth: "0 1px 0 1px",
347-
}}
348-
/>
349-
))}
350-
351-
<FormControl fullWidth>
352-
<InputLabel id="delay-select-label">Delay</InputLabel>
353-
<Select
354-
labelId="delay-select-label"
355-
id="delay-select"
356-
value={duration.toString()}
357-
label="Delay"
358-
onChange={handleDurationChange}
359-
>
360-
{AnimationDurationOptions.map((option) => (
361-
<MenuItem key={option} value={option}>
362-
{option}
363-
</MenuItem>
364-
))}
365-
</Select>
366-
</FormControl>
367-
368-
<Button
369-
onClick={handleAnimation}
370-
startIcon={
371-
isPlaying ? (
372-
<PauseRoundedIcon />
373-
) : isComplete ? (
374-
<ReplayRoundedIcon />
375-
) : (
376-
<PlayArrowRoundedIcon />
377-
)
378-
}
379-
>
380-
{isPlaying ? "Pause" : isComplete ? "Replay" : "Play"}
381-
</Button>
382-
<Button
383-
variant={isComplete ? "contained" : "outlined"}
384-
onClick={showNextRow}
385-
disabled={isReady}
314+
<Box sx={{ display: "flex", m: 1, mt: 5 }}>
315+
<AppBarAndDrawer {...appBarAndDrawerProps} />
316+
317+
<MainContent open={open} sx={{ paddingBottom: 12 }}>
318+
<DrawerHeader />
319+
320+
<Grid
321+
container
322+
columnSpacing={{
323+
xs: 1,
324+
sm: 2,
325+
md: 3,
326+
}}
327+
>
328+
<Grid item xs={12} alignItems={"center"}>
329+
<ButtonGroup
330+
disableElevation
331+
fullWidth
332+
variant="outlined"
333+
size="large"
386334
>
387-
{isComplete ? "Complete" : "Next"}
388-
</Button>
389-
</ButtonGroup>
390-
</Grid>
391-
{/* Playground grid */}
392-
<Grid item xs={12}>
393-
<ToolsPlayground {...playgroundProps} />
335+
{testString
336+
.replaceAll("^", "")
337+
.split("")
338+
.map((char, index) => (
339+
<TextField
340+
key={index}
341+
id={`testString${index}`}
342+
value={char}
343+
variant="standard"
344+
InputProps={{
345+
readOnly: true,
346+
sx: {
347+
textAlignLast: "center",
348+
},
349+
}}
350+
sx={{
351+
backgroundColor:
352+
Math.floor((testStringIndex - 1) / 2) === index
353+
? startingStateColor
354+
: "inherit",
355+
flexDirection: "inherit",
356+
borderRadius: "20px",
357+
border: `1px solid ${stateSelectedColor}`,
358+
borderWidth: "0 1px 0 1px",
359+
}}
360+
/>
361+
))}
362+
363+
<FormControl fullWidth>
364+
<InputLabel id="delay-select-label">Delay</InputLabel>
365+
<Select
366+
labelId="delay-select-label"
367+
id="delay-select"
368+
value={duration.toString()}
369+
label="Delay"
370+
onChange={handleDurationChange}
371+
>
372+
{AnimationDurationOptions.map((option) => (
373+
<MenuItem key={option} value={option}>
374+
{option}
375+
</MenuItem>
376+
))}
377+
</Select>
378+
</FormControl>
379+
380+
<Button
381+
onClick={handleAnimation}
382+
startIcon={
383+
isPlaying ? (
384+
<PauseRoundedIcon />
385+
) : isComplete ? (
386+
<ReplayRoundedIcon />
387+
) : (
388+
<PlayArrowRoundedIcon />
389+
)
390+
}
391+
>
392+
{isPlaying ? "Pause" : isComplete ? "Replay" : "Play"}
393+
</Button>
394+
<Button
395+
variant={isComplete ? "contained" : "outlined"}
396+
onClick={showNextRow}
397+
disabled={isReady}
398+
>
399+
{isComplete ? "Complete" : "Next"}
400+
</Button>
401+
</ButtonGroup>
402+
</Grid>
403+
{/* Playground grid */}
404+
<Grid item xs={12}>
405+
<ToolsPlayground {...playgroundProps} />
406+
</Grid>
394407
</Grid>
395-
</Grid>
408+
</MainContent>
396409
</Box>
397410
)}
398411
</>

‎src/features/components/nfaToDfa/NullClosure.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
2727
import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
2828
import { PossibleTransitionValues } from "../../../consts/PossibleTransitionValues";
2929
import { StyledTransitionLabel } from "../playground/StyledTransitionLabel";
30-
import { NullCLosureStateId } from "../../../consts/StateIdsExtensions";
30+
import { NullClosureStateId } from "../../../consts/StateIdsExtensions";
3131
import { AppBarAndDrawer } from "../../../common/AppBarAndDrawer";
3232
import { AppBarAndDrawerProps } from "../../../common/props/AppBarAndDrawerProps";
3333
import { DrawerHeader } from "../../../common/DrawerHeader";
@@ -230,7 +230,7 @@ export const NullClosure = (props: NullClosureProps) => {
230230
.toString()
231231
.split(" ")
232232
.filter((key) => key !== "")
233-
.map((tv) => tv.replace(NullCLosureStateId, ""))
233+
.map((tv) => tv.replace(NullClosureStateId, ""))
234234
.join(" ") ?? row[key === "^" ? "nul" : key],
235235
])
236236
),
@@ -251,7 +251,7 @@ export const NullClosure = (props: NullClosureProps) => {
251251
open,
252252
setOpen,
253253
transitionTableProps: {
254-
rows: GetDrawerTransitionTableRows(dataContext, NullCLosureStateId),
254+
rows: GetDrawerTransitionTableRows(dataContext, NullClosureStateId),
255255
columns: GetDrawerTransitionTableColumns(dataContext, false),
256256
},
257257
};

‎src/features/components/tools/Playground.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,13 @@ import { XarrowCoreProps } from "../playground/props/XarrowProps";
1414
import { Box } from "@mui/material";
1515
import { useState, useEffect, useContext } from "react";
1616
import { DataContext } from "../../../components/Editor";
17-
import { NullCLosureStateId, ResultantDfaStateId, EquivalentStatesStateId, MinimizedDfaStateId, TestStringStateId } from "../../../consts/StateIdsExtensions";
17+
import {
18+
NullClosureStateId,
19+
ResultantDfaStateId,
20+
EquivalentStatesStateId,
21+
MinimizedDfaStateId,
22+
TestStringStateId,
23+
} from "../../../consts/StateIdsExtensions";
1824

1925
export const ToolsPlayground = (props: ToolsPlaygroundProps) => {
2026
console.log("re rendering ToolsPlayground: props", props);
@@ -50,8 +56,8 @@ export const ToolsPlayground = (props: ToolsPlaygroundProps) => {
5056

5157
const stateToInquire = props.states?.at(0)?.id;
5258
const uniqueWord = // to ensure that the xarrow is unique
53-
stateToInquire?.includes(NullCLosureStateId)
54-
? NullCLosureStateId
59+
stateToInquire?.includes(NullClosureStateId)
60+
? NullClosureStateId
5561
: stateToInquire?.includes(ResultantDfaStateId)
5662
? ResultantDfaStateId
5763
: stateToInquire?.includes(EquivalentStatesStateId)

0 commit comments

Comments
 (0)