Skip to content

Commit a59e995

Browse files
anserwaseemanserwaseem
committed
fixed bug in ModifiedTable where duplicate transitions were shown in table & explanations, and replay wasn't working fine
1 parent 5ed3eff commit a59e995

File tree

7 files changed

+109
-99
lines changed

7 files changed

+109
-99
lines changed

‎src/common/AppBarAndDrawer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
styled,
1010
useTheme,
1111
} from "@mui/material";
12-
import { useState } from "react";
1312
import { appBarBackgroundColor, drawerHeaderBoxShadow } from "../consts/Colors";
1413
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
1514
import { ToolsTransitionTable } from "../features/components/tools/TransitionTable";
@@ -48,6 +47,8 @@ const AppBar = styled(MuiAppBar, {
4847
}));
4948

5049
export const AppBarAndDrawer = (props: AppBarAndDrawerProps) => {
50+
console.log("re rendering AppBarAndDrawer, props: ", props);
51+
5152
const theme = useTheme();
5253

5354
return (

‎src/common/ErrorSnackbar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { Snackbar, Alert, AlertTitle } from "@mui/material";
22
import { ErrorSnackbarProps } from "./props/ErrorSnackbarProps";
33

44
export const ErrorSnackbar = (props: ErrorSnackbarProps) => {
5+
console.log("re rendering ErrorSnackbar, props: ", props);
6+
57
return (
68
<Snackbar
79
open={true}

‎src/features/NfaToDfa.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -122,17 +122,18 @@ export const NfaToDfa = () => {
122122
PossibleTransitionValues.concat("state").map((key) => [
123123
key === "^" ? "nul" : key,
124124
row[key === "^" ? "nul" : key]
125-
.toString()
126-
.split(" ")
127-
.filter((key) => key !== "")
128-
.map((tv) =>
129-
tv.replace(ModifiedTableStateId, ResultantDfaStateId)
125+
?.toString()
126+
?.split(" ")
127+
?.filter((key) => key !== "")
128+
?.map((tv) =>
129+
tv?.replace(ModifiedTableStateId, ResultantDfaStateId)
130130
)
131-
.join(" ") ?? row[key === "^" ? "nul" : key],
131+
?.join(" ") ?? row[key === "^" ? "nul" : key],
132132
])
133133
),
134134
};
135135
}),
136+
modifiedTableRows: modifiedRows,
136137
setIsResultantDfaComplete: setIsResultantDfaComplete,
137138
playgroundSize: dataContext.playgroundSize,
138139
stateSize: dataContext.stateSize,

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

Lines changed: 88 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
8585
if (isPlaying) {
8686
let timer = setTimeout(() => {
8787
if (!showExplanation) {
88-
console.log("inside set timeout, index", index);
8988
const rowIndex = Math.floor(index / numberOfColumns);
9089

9190
handleUpdateData(rowIndex, props.rows.slice(0, rowIndex));
@@ -104,34 +103,23 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
104103
}, [props, modifiedTableRows, isPlaying, showExplanation]);
105104

106105
const handleUpdateData = (rowIndex: number, rows: RowModel[]) => {
107-
setModifiedTableRowId(rowIndex);
108-
setModifiedTableRows(
109-
rows.map((row, mapIndex) => {
110-
console.log("rowIndex, index, mapIndex: ", rowIndex, index, mapIndex);
111-
return {
112-
...row,
113-
// ...Object.fromEntries(
114-
// PossibleTransitionValues.filter(
115-
// (transition) => transition !== "^"
116-
// ).map((key, tvIndex) => [
117-
// key,
118-
// row[key] // for each Possible Transition Value except ^, replace each value with its corresponding nul closure
119-
// .toString()
120-
// .split(", ")
121-
// .map((tv) => tv.replace(tv, row.nul))
122-
// .join(", "),
123-
// ])
124-
// ),
125-
a:
126-
rowIndex - 1 === mapIndex
127-
? ((index - 1) % rowIndex === 0 && index !== 3 && index !== 6) ||
128-
// b condition
129-
index === 5 ||
130-
((index - 1) % rowIndex === 1 &&
131-
index !== 3 &&
132-
index !== 4 &&
133-
index !== 6)
134-
? row.a // replace each state name with its corresponding nul closure
106+
if (rowIndex <= rows.length) {
107+
setModifiedTableRowId(rowIndex);
108+
109+
let updatedRow = rows?.at(-1);
110+
updatedRow = {
111+
...updatedRow,
112+
a:
113+
((index - 1) % rowIndex === 0 && index !== 3 && index !== 6) ||
114+
// b condition
115+
index === 5 ||
116+
((index - 1) % rowIndex === 1 &&
117+
index !== 3 &&
118+
index !== 4 &&
119+
index !== 6)
120+
? Array.from(
121+
new Set(
122+
updatedRow.a // replace each state name with its corresponding nul closure
135123
?.split(", ")
136124
?.filter((tv) => tv !== "")
137125
?.map((tv) =>
@@ -140,18 +128,21 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
140128
props.rows.find((r) => r.state === tv)?.nul ?? tv
141129
)
142130
)
143-
?.filter((tv) => tv !== "")
144-
?.join(", ") ?? ""
145-
: ""
146-
: row.a,
147-
b:
148-
rowIndex - 1 === mapIndex
149-
? index === 5 ||
150-
((index - 1) % rowIndex === 1 &&
151-
index !== 3 &&
152-
index !== 4 &&
153-
index !== 6)
154-
? row.b // replace each state name with its corresponding nul closure
131+
?.join(", ")
132+
?.split(", ")
133+
?.sort()
134+
)
135+
)?.join(", ") ?? ""
136+
: "",
137+
b:
138+
index === 5 ||
139+
((index - 1) % rowIndex === 1 &&
140+
index !== 3 &&
141+
index !== 4 &&
142+
index !== 6)
143+
? Array.from(
144+
new Set(
145+
updatedRow.b // replace each state name with its corresponding nul closure
155146
?.split(", ")
156147
?.filter((tv) => tv !== "")
157148
?.map((tv) =>
@@ -160,14 +151,21 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
160151
props.rows.find((r) => r.state === tv)?.nul ?? tv
161152
)
162153
)
163-
?.filter((tv) => tv !== "")
164-
?.join(", ") ?? ""
165-
: ""
166-
: row.b,
167-
};
168-
})
169-
);
170-
setShowExplanation(true);
154+
?.join(", ")
155+
?.split(", ")
156+
?.sort()
157+
)
158+
)?.join(", ") ?? ""
159+
: "",
160+
};
161+
162+
setModifiedTableRows((mtRows) => {
163+
mtRows[rowIndex - 1] = updatedRow;
164+
return mtRows;
165+
});
166+
167+
setShowExplanation(true);
168+
}
171169
};
172170

173171
const handleExplanation = () => {
@@ -184,18 +182,24 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
184182
dataContext?.rows?.[modifiedTableRowId - 1]?.a
185183
? `Updated ${
186184
dataContext?.rows?.[modifiedTableRowId - 1]?.a
187-
} with its null closure i.e., {${dataContext?.rows?.[
188-
modifiedTableRowId - 1
189-
]?.a
190-
?.split(" ")
191-
.map((s) =>
192-
props.nullClosureRows
193-
?.find(
194-
(r) => r.state.replaceAll(NullClosureStateId, "") === s
185+
} with its null closure i.e., {${Array.from(
186+
new Set(
187+
dataContext?.rows?.[modifiedTableRowId - 1]?.a
188+
?.split(" ")
189+
?.map((s) =>
190+
props.nullClosureRows
191+
?.find(
192+
(r) =>
193+
r.state.replaceAll(NullClosureStateId, "") === s
194+
)
195+
?.nul?.replaceAll(NullClosureStateId, "")
195196
)
196-
?.nul?.replaceAll(NullClosureStateId, "")
197+
?.filter((s) => s?.replaceAll(",", ""))
198+
?.join(", ")
199+
?.split(", ")
200+
?.sort()
197201
)
198-
.join(", ")}}`
202+
)?.join(", ")}}`
199203
: ""
200204
)
201205
: (openSnackbar = false);
@@ -205,18 +209,24 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
205209
dataContext?.rows?.[modifiedTableRowId - 1]?.b
206210
? `Updated ${
207211
dataContext?.rows?.[modifiedTableRowId - 1]?.b
208-
} with its null closure i.e., {${dataContext?.rows?.[
209-
modifiedTableRowId - 1
210-
]?.b
211-
?.split(" ")
212-
.map((s) =>
213-
props.nullClosureRows
214-
?.find(
215-
(r) => r.state.replaceAll(NullClosureStateId, "") === s
212+
} with its null closure i.e., {${Array.from(
213+
new Set(
214+
dataContext?.rows?.[modifiedTableRowId - 1]?.b
215+
?.split(" ")
216+
?.map((s) =>
217+
props.nullClosureRows
218+
?.find(
219+
(r) =>
220+
r.state.replaceAll(NullClosureStateId, "") === s
221+
)
222+
?.nul?.replaceAll(NullClosureStateId, "")
216223
)
217-
?.nul?.replaceAll(NullClosureStateId, "")
224+
?.filter((s) => s?.replaceAll(",", ""))
225+
?.join(", ")
226+
?.split(", ")
227+
?.sort()
218228
)
219-
.join(", ")}}`
229+
)?.join(", ")}}`
220230
: ""
221231
)
222232
: (openSnackbar = false);
@@ -243,8 +253,10 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
243253
if (isComplete) {
244254
setIsReady(false);
245255
setIsComplete(false);
246-
index = 1;
256+
index = numberOfColumns;
247257
setIsPlaying(true);
258+
setModifiedTableRowId(0);
259+
setModifiedTableRows([]);
248260
} else setIsPlaying((v) => !v);
249261
};
250262

@@ -277,11 +289,11 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
277289
PossibleTransitionValues.concat("state").map((key) => [
278290
key === "^" ? "nul" : key,
279291
row[key === "^" ? "nul" : key]
280-
.toString()
281-
.split(" ")
282-
.filter((key) => key !== "")
283-
.map((tv) => tv.replace(ModifiedTableStateId, ""))
284-
.join(" ") ?? row[key === "^" ? "nul" : key],
292+
?.toString()
293+
?.split(" ")
294+
?.filter((key) => key !== "")
295+
?.map((tv) => tv?.replace(ModifiedTableStateId, ""))
296+
?.join(" ") ?? row[key === "^" ? "nul" : key],
285297
])
286298
),
287299
};
@@ -367,7 +379,7 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
367379
))}
368380
</Select>
369381
</FormControl>
370-
{/* <Button onClick={handleAnimationPause}>Pause</Button> */}
382+
371383
<Button
372384
onClick={handleAnimation}
373385
startIcon={

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
Box,
44
Button,
55
ButtonGroup,
6-
CssBaseline,
76
FormControl,
87
Grid,
98
InputLabel,
@@ -53,7 +52,7 @@ export const NullClosure = (props: NullClosureProps) => {
5352
const [isComplete, setIsComplete] = useState(false); // set to true when data is completely displayed
5453
const [isReady, setIsReady] = useState(false); // set to true when animation is completed and user clicks on "Complete" button i.e., when user is ready to move on to next step
5554

56-
const [nullClosureRowId, setNullClosureRowId] = useState(0); // TODO why is this needed?
55+
const [nullClosureRowId, setNullClosureRowId] = useState(0);
5756
const [nullClosureRows, setNullClosureRows] = useState<RowModel[]>([]);
5857
const columns: GridColumns = [
5958
{ field: "id", hide: true, hideable: false },
@@ -210,11 +209,6 @@ export const NullClosure = (props: NullClosureProps) => {
210209
};
211210

212211
const handleDurationChange = (event: SelectChangeEvent) => {
213-
console.log(
214-
"NullClosure handleDurationChange, event.target.value, duration: ",
215-
event.target.value,
216-
duration
217-
);
218212
setDuration(Number(event.target.value));
219213
};
220214

@@ -358,7 +352,7 @@ export const NullClosure = (props: NullClosureProps) => {
358352
))}
359353
</Select>
360354
</FormControl>
361-
{/* <Button onClick={handleAnimationPause}>Pause</Button> */}
355+
362356
<Button
363357
onClick={handleAnimation}
364358
startIcon={

‎src/utils/GetDrawerTransitionTableColumns.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ export const GetDrawerTransitionTableColumns = (
55
columnsToHide: string[]
66
): GridColumns<any> => {
77
return columns
8-
.filter((col) => col.field !== "action" && col.field !== "id")
9-
.map((col) => {
8+
?.filter((col) => col.field !== "action" && col.field !== "id")
9+
?.map((col) => {
1010
return {
1111
...col,
1212
editable: false,
13-
hide: columnsToHide.includes(col.field),
13+
hide: columnsToHide?.includes(col.field),
1414
};
1515
});
1616
};

‎src/utils/GetDrawerTransitionTableRows.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ export const GetDrawerTransitionTableRows = (
1212
PossibleTransitionValues.concat("state").map((key) => [
1313
key === "^" ? "nul" : key,
1414
row[key === "^" ? "nul" : key]
15-
.toString()
16-
.split(" ")
17-
.filter((key) => key !== "")
18-
.map((tv) => tv.replace(stateIdExtension, ""))
19-
.join(" ") ?? row[key === "^" ? "nul" : key],
15+
?.toString()
16+
?.split(" ")
17+
?.filter((key) => key !== "")
18+
?.map((tv) => tv?.replace(stateIdExtension, ""))
19+
?.join(" ") ?? row[key === "^" ? "nul" : key],
2020
])
2121
),
2222
};

0 commit comments

Comments
 (0)