added Null Closure Transition Table inside Drawer in ModifiedTable

Author: anserwaseem

src/common/AppBarAndDrawer.tsx

@@ -80,7 +80,7 @@ export const AppBarAndDrawer = (props: AppBarAndDrawerProps) => {
                   ...(props.open === 0 && { mt: 0.5 }),
                 }}
               >
-                {props.title}
+                {props.headerTitle}
               </Typography>
             </Grid>
           </Grid>
@@ -115,7 +115,7 @@ export const AppBarAndDrawer = (props: AppBarAndDrawerProps) => {
             align="center"
             fontWeight={"bold"}
           >
-            Transition Table
+            {props?.drawerTitle ?? "Transition Table"}
           </Typography>
           <IconButton
             onClick={() => {

src/common/props/AppBarAndDrawerProps.ts

@@ -1,8 +1,9 @@
 import { ToolsTransitionTableProps } from "../../features/components/tools/props/TransitionTableProps";
 
 export type AppBarAndDrawerProps = {
-  title: string;
+  headerTitle: string;
   open: number;
   setOpen: React.Dispatch<React.SetStateAction<number>>;
   transitionTableProps: ToolsTransitionTableProps;
+  drawerTitle?: string;
 };

src/features/NfaToDfa.tsx

@@ -110,6 +110,7 @@ export const NfaToDfa = () => {
       };
     }),
     setRows: setModifiedRows,
+    nullClosureRows: nullClosureRows,
     setIsModifiedTransitionTableComplete: setIsModifiedTransitionTableComplete,
   };
 

src/features/TestAString.tsx

@@ -273,12 +273,12 @@ const TestAString = (props: TestAStringProps) => {
   };
 
   const appBarAndDrawerProps: AppBarAndDrawerProps = {
-    title: "Test a String",
+    headerTitle: "Test a String",
     open,
     setOpen,
     transitionTableProps: {
-      rows: GetDrawerTransitionTableRows(dataContext, TestStringStateId),
-      columns: GetDrawerTransitionTableColumns(dataContext, false),
+      rows: GetDrawerTransitionTableRows(dataContext.rows, TestStringStateId),
+      columns: GetDrawerTransitionTableColumns(dataContext.columns, ["nul"]),
     },
   };
 

src/features/components/minimzeDfa/EquivalentStates.tsx

@@ -568,7 +568,7 @@ export const EquivalentStates = (props: EquivalentStatesProps) => {
   };
 
   const appBarAndDrawerProps: AppBarAndDrawerProps = {
-    title: "Equivalent States",
+    headerTitle: "Equivalent States",
     open,
     setOpen,
     transitionTableProps,

src/features/components/minimzeDfa/MinimizedDfa.tsx

@@ -426,7 +426,7 @@ export const MinimizedDfa = (props: MinimizedDfaProps) => {
   };
 
   const appBarAndDrawerProps: AppBarAndDrawerProps = {
-    title: "Minimized DFA",
+    headerTitle: "Minimized DFA",
     open,
     setOpen,
     transitionTableProps,

src/features/components/nfaToDfa/ModifiedTable.tsx

@@ -20,7 +20,10 @@ import { ToolsTransitionTable } from "../tools/TransitionTable";
 import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
 import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
 import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
-import { ModifiedTableStateId } from "../../../consts/StateIdsExtensions";
+import {
+  ModifiedTableStateId,
+  NullClosureStateId,
+} from "../../../consts/StateIdsExtensions";
 import { AppBarAndDrawer } from "../../../common/AppBarAndDrawer";
 import { DrawerHeader } from "../../../common/DrawerHeader";
 import { MainContent } from "../../../common/MainContent";
@@ -37,7 +40,7 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
 
   const dataContext = useContext(DataContext);
 
-  const [duration, setDuration] = useState(AnimationDurationOptions[0]);
+  const [duration, setDuration] = useState(AnimationDurationOptions[3]);
   const [isPlaying, setIsPlaying] = useState(false);
 
   const [isComplete, setIsComplete] = useState(false); // set to true when data is completely displayed
@@ -73,11 +76,6 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
   const [open, setOpen] = useState(1);
 
   useEffect(() => {
-    console.log(
-      "ModifiedTable useEffect, isPlaying, duration: ",
-      isPlaying,
-      duration
-    );
     if (isPlaying) {
       let timer = setTimeout(() => {
         console.log("inside set timeout, index", index);
@@ -99,12 +97,6 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
   }, [props, modifiedTableRows, isPlaying]);
 
   const handleUpdateData = (rowIndex: number, rows: RowModel[]) => {
-    console.log(
-      "handleUpdateData, rowIndex, index, rows: ",
-      rowIndex,
-      index,
-      rows
-    );
     setModifiedTableRowId(rowIndex);
     setModifiedTableRows(
       rows.map((row, mapIndex) => {
@@ -171,16 +163,10 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
   };
 
   const handleDurationChange = (event: SelectChangeEvent) => {
-    console.log(
-      "ModifiedTable handleDurationChange, event.target.value, duration: ",
-      event.target.value,
-      duration
-    );
     setDuration(Number(event.target.value));
   };
 
   const handleAnimation = () => {
-    console.log("ModifiedTable handleAnimation");
     if (isComplete) {
       setIsReady(false);
       setIsComplete(false);
@@ -190,7 +176,6 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
   };
 
   const showNextRow = () => {
-    console.log("ModifiedTable show next row, index: ", index);
     const rowIndex = Math.floor(index / numberOfColumns);
     if (isComplete) {
       setIsReady(true);
@@ -228,12 +213,16 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
   };
 
   const appBarAndDrawerProps: AppBarAndDrawerProps = {
-    title: "Modified Transition Table",
+    headerTitle: "Modified Transition Table",
+    drawerTitle: "Null Closure Table",
     open,
     setOpen,
     transitionTableProps: {
-      rows: GetDrawerTransitionTableRows(dataContext, ModifiedTableStateId),
-      columns: GetDrawerTransitionTableColumns(dataContext, false),
+      rows: GetDrawerTransitionTableRows(
+        props.nullClosureRows,
+        NullClosureStateId
+      ),
+      columns: GetDrawerTransitionTableColumns(dataContext.columns, ["a", "b"]),
     },
   };
 
@@ -252,6 +241,7 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
               sm: 2,
               md: 3,
             }}
+            pt={1.6}
           >
             {/* Transition table grid */}
             <Grid item xs={12} md={4}>

src/features/components/nfaToDfa/NullClosure.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   ButtonGroup,
+  CssBaseline,
   FormControl,
   Grid,
   InputLabel,
@@ -285,12 +286,12 @@ export const NullClosure = (props: NullClosureProps) => {
   };
 
   const appBarAndDrawerProps: AppBarAndDrawerProps = {
-    title: "Null Closure",
+    headerTitle: "Null Closure",
     open,
     setOpen,
     transitionTableProps: {
-      rows: GetDrawerTransitionTableRows(dataContext, NullClosureStateId),
-      columns: GetDrawerTransitionTableColumns(dataContext, false),
+      rows: GetDrawerTransitionTableRows(dataContext.rows, NullClosureStateId),
+      columns: GetDrawerTransitionTableColumns(dataContext.columns, ["nul"]),
     },
   };
 
@@ -319,7 +320,7 @@ export const NullClosure = (props: NullClosureProps) => {
 
         <AppBarAndDrawer {...appBarAndDrawerProps} />
 
-        <MainContent open={open} sx={{ paddingBottom: 12 }}>
+        <MainContent open={open}>
           <DrawerHeader />
           {/* Grid to incorporate Transition table and Playground */}
           <Grid
@@ -329,6 +330,7 @@ export const NullClosure = (props: NullClosureProps) => {
               sm: 2,
               md: 3,
             }}
+            pt={1.6}
           >
             {/* Transition table grid */}
             <Grid item xs={12} md={4}>

src/features/components/nfaToDfa/ResultantDfa.tsx

@@ -515,12 +515,12 @@ export const ResultantDfa = (props: ResultantDfaProps) => {
   };
 
   const appBarAndDrawerProps: AppBarAndDrawerProps = {
-    title: "Resultant DFA",
+    headerTitle: "Resultant DFA",
     open,
     setOpen,
     transitionTableProps: {
-      rows: GetDrawerTransitionTableRows(dataContext, ResultantDfaStateId),
-      columns: GetDrawerTransitionTableColumns(dataContext, false),
+      rows: GetDrawerTransitionTableRows(dataContext.rows, ResultantDfaStateId),
+      columns: GetDrawerTransitionTableColumns(dataContext.columns, ["nul"]),
     },
   };
 
@@ -538,6 +538,7 @@ export const ResultantDfa = (props: ResultantDfaProps) => {
             sm: 2,
             md: 3,
           }}
+          pt={1.6}
         >
           {/* Transition table grid */}
           <Grid item xs={12} md={4}>

src/features/components/nfaToDfa/props/ModifiedTableProps.ts

@@ -3,6 +3,7 @@ import { RowModel } from "../../../../models";
 export type ModifiedTableProps = {
   rows: RowModel[];
   setRows: React.Dispatch<React.SetStateAction<RowModel[]>>;
+  nullClosureRows: RowModel[];
   setIsModifiedTransitionTableComplete?: React.Dispatch<
     React.SetStateAction<boolean>
   >;