added constants for unique state ids being used across the project

anserwaseem · anserwaseem · commit 6810ec0da9c1 · 2022-12-29T18:25:41.000+05:00
diff --git a/src/consts/StateIdsExtensions.ts b/src/consts/StateIdsExtensions.ts
@@ -0,0 +1,13 @@
+// to ensure that the xarrow is unique, every state id is made unique by adding following extension to its id.
+
+// NFA to DFA
+export const ModifiedTableStateId = "mtt";
+export const NullCLosureStateId = "nc";
+export const ResultantDfaStateId = "ntd";
+
+// DFA Minimization
+export const EquivalentStatesStateId = "est";
+export const MinimizedDfaStateId = "md";
+
+// Test a String
+export const TestStringStateId = "ts";
diff --git a/src/features/MinimizeDfa.tsx b/src/features/MinimizeDfa.tsx
@@ -1,14 +1,12 @@
 import { useContext, useState } from "react";
-import { DraggableStateModel, RowModel, TransitionModel } from "../models";
 import { PossibleTransitionValues } from "../consts/PossibleTransitionValues";
-import { ResultantDfa } from "./components/nfaToDfa/ResultantDfa";
-import { ResultantDfaProps } from "./components/nfaToDfa/props/ResultantDfaProps";
 import { EquivalentStates } from "./components/minimzeDfa/EquivalentStates";
 import { EquivalentStatesProps } from "./components/minimzeDfa/props/EquivalentStatesProps";
 import { DataContext } from "../components/Editor";
 import { EquivalentStatesRowModel } from "../models/minimizeDfa/EquivalentStatesRowModel";
 import { MinimizedDfaProps } from "./components/minimzeDfa/props/MinimizedDfaProps";
 import { MinimizedDfa } from "./components/minimzeDfa/MinimizedDfa";
+import { MinimizedDfaStateId } from "../consts/StateIdsExtensions";
 
 export const MinimizeDfa = () => {
   console.log("re rendering MinimizeDfa");
@@ -39,7 +37,7 @@ export const MinimizeDfa = () => {
               .toString()
               .split(" ")
               .filter((key) => key !== "")
-              .map((tv) => tv.replace(tv, tv + "md"))
+              .map((tv) => tv.replace(tv, tv + MinimizedDfaStateId))
               .join(" ") ?? row[key === "^" ? "nul" : key],
           ])
         ),
@@ -48,14 +46,14 @@ export const MinimizeDfa = () => {
     states: dataContext.states.map((state) => {
       return {
         ...state,
-        id: `${state.id}md`,
+        id: state.id + MinimizedDfaStateId,
       };
     }),
     transitions: dataContext.transitions.map((transition) => {
       return {
         ...transition,
-        start: `${transition.start}md`,
-        end: `${transition.end}md`,
+        start: transition.start + MinimizedDfaStateId,
+        end: transition.end + MinimizedDfaStateId,
       };
     }),
     equivalentStatesRows: equivalentStatesRows,
diff --git a/src/features/NfaToDfa.tsx b/src/features/NfaToDfa.tsx
@@ -1,6 +1,5 @@
 import { useContext, useEffect, useState } from "react";
 import { DraggableStateModel, RowModel, TransitionModel } from "../models";
-import { NfaToDfaProps } from "./props/NfaToDfaProps";
 import { NullClosure } from "./components/nfaToDfa/NullClosure";
 import { NullClosureProps } from "./components/nfaToDfa/props/NullClosureProps";
 import { PossibleTransitionValues } from "../consts/PossibleTransitionValues";
@@ -9,6 +8,11 @@ import { ModifiedTableProps } from "./components/nfaToDfa/props/ModifiedTablePro
 import { ResultantDfa } from "./components/nfaToDfa/ResultantDfa";
 import { ResultantDfaProps } from "./components/nfaToDfa/props/ResultantDfaProps";
 import { DataContext } from "../components/Editor";
+import {
+  NullCLosureStateId,
+  ModifiedTableStateId,
+  ResultantDfaStateId,
+} from "../consts/StateIdsExtensions";
 
 export const NfaToDfa = () => {
   console.log("re rendering NfaToDfa");
@@ -45,7 +49,7 @@ export const NfaToDfa = () => {
               .toString()
               .split(" ")
               .filter((key) => key !== "")
-              .map((tv) => tv.replace(tv, tv + "nc"))
+              .map((tv) => tv.replace(tv, tv + NullCLosureStateId))
               .join(" ") ?? row[key === "^" ? "nul" : key],
           ])
         ),
@@ -56,7 +60,7 @@ export const NfaToDfa = () => {
     const nullClosureStatesUnique = dataContext.states.map((state) => {
       return {
         ...state,
-        id: `${state.id}nc`,
+        id: state.id + NullCLosureStateId,
       };
     });
     console.log("nullClosureStatesUnique", nullClosureStatesUnique);
@@ -65,8 +69,8 @@ export const NfaToDfa = () => {
       (transition) => {
         return {
           ...transition,
-          start: `${transition.start}nc`,
-          end: `${transition.end}nc`,
+          start: transition.start + NullCLosureStateId,
+          end: transition.end + NullCLosureStateId,
         };
       }
     );
@@ -99,7 +103,7 @@ export const NfaToDfa = () => {
               .toString()
               .split(" ")
               .filter((key) => key !== "")
-              .map((tv) => tv.replace("nc", "mtt"))
+              .map((tv) => tv.replace(NullCLosureStateId, ModifiedTableStateId))
               .join(" ") ?? row[key === "^" ? "nul" : key],
           ])
         ),
@@ -120,7 +124,9 @@ export const NfaToDfa = () => {
               .toString()
               .split(" ")
               .filter((key) => key !== "")
-              .map((tv) => tv.replace("mtt", "ntd"))
+              .map((tv) =>
+                tv.replace(ModifiedTableStateId, ResultantDfaStateId)
+              )
               .join(" ") ?? row[key === "^" ? "nul" : key],
           ])
         ),
diff --git a/src/features/TestAString.tsx b/src/features/TestAString.tsx
@@ -29,6 +29,7 @@ import { DataContext } from "../components/Editor";
 import { startingStateColor, stateSelectedColor } from "../consts/Colors";
 import { PossibleTransitionValues } from "../consts/PossibleTransitionValues";
 import { TestStringMaxLength } from "../consts/TestStringMaxLength";
+import { TestStringStateId } from "../consts/StateIdsExtensions";
 
 const TestAString = (props: TestAStringProps) => {
   console.log("re rendering TestAString: props");
@@ -68,7 +69,7 @@ const TestAString = (props: TestAStringProps) => {
         dataContext.states.map((state) => {
           return {
             ...state,
-            id: `${state.id}ts`,
+            id: state.id + TestStringStateId,
           };
         })
       );
@@ -185,7 +186,7 @@ const TestAString = (props: TestAStringProps) => {
         dataContext.states.map((state) => {
           return {
             ...state,
-            id: `${state.id}ts`,
+            id: state.id + TestStringStateId,
           };
         })
       );
@@ -254,12 +255,12 @@ const TestAString = (props: TestAStringProps) => {
     transitions: testAStringTransitions.map((transition) => {
       return {
         ...transition,
-        start: `${transition.start}ts`,
-        end: `${transition.end}ts`,
+        start: transition.start + TestStringStateId,
+        end: transition.end + TestStringStateId,
       };
     }),
     setTransitions: setTestAStringTransitions,
-    currentStates: statesToHighlight.map((state) => `${state}ts`),
+    currentStates: statesToHighlight.map((state) => state + TestStringStateId),
     stateSize: dataContext.stateSize,
   };
 
diff --git a/src/features/components/minimzeDfa/EquivalentStates.tsx b/src/features/components/minimzeDfa/EquivalentStates.tsx
@@ -40,7 +40,11 @@ import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
 import HorizontalRuleIcon from "@mui/icons-material/HorizontalRule";
 import DataArrayIcon from "@mui/icons-material/DataArray";
-import { appBarBackgroundColor, drawerHeaderBoxShadow } from "../../../consts/Colors";
+import {
+  appBarBackgroundColor,
+  drawerHeaderBoxShadow,
+} from "../../../consts/Colors";
+import { EquivalentStatesStateId } from "../../../consts/StateIdsExtensions";
 
 const drawerWidth = 200;
 const columnNames = PossibleTransitionValues.filter((value) => value !== "^");
@@ -623,7 +627,7 @@ export const EquivalentStates = (props: EquivalentStatesProps) => {
               .toString()
               .split(" ")
               .filter((key) => key !== "")
-              .map((tv) => tv.replace("est", ""))
+              .map((tv) => tv.replace(EquivalentStatesStateId, ""))
               .join(" ") ?? row[key === "^" ? "nul" : key],
           ])
         ),
diff --git a/src/features/components/minimzeDfa/MinimizedDfa.tsx b/src/features/components/minimzeDfa/MinimizedDfa.tsx
@@ -41,7 +41,11 @@ import {
   TransitionModel,
 } from "../../../models";
 import { StyledTransitionLabel } from "../playground/StyledTransitionLabel";
-import { appBarBackgroundColor, drawerHeaderBoxShadow } from "../../../consts/Colors";
+import {
+  appBarBackgroundColor,
+  drawerHeaderBoxShadow,
+} from "../../../consts/Colors";
+import { MinimizedDfaStateId } from "../../../consts/StateIdsExtensions";
 
 const drawerWidth = 300;
 let sliceIndex = 0; // index of such row (of Equivalence table) is saved where more than one Ticks are present
@@ -180,14 +184,17 @@ export const MinimizedDfa = (props: MinimizedDfaProps) => {
       return () => clearTimeout(timer);
     } else if (mergeStep === 1) {
       const stateToMergeInto = minimizedDfaStates.find(
-        (state) => state.id?.replace("md", "") === stateNamesToMerge[0]
+        (state) =>
+          state.id?.replace(MinimizedDfaStateId, "") === stateNamesToMerge[0]
       );
       const statesToMerge = minimizedDfaStates.filter((state) =>
         stateNamesToMerge
           .filter(
-            (stateName) => stateName?.replace("md", "") !== stateNamesToMerge[0]
+            (stateName) =>
+              stateName?.replace(MinimizedDfaStateId, "") !==
+              stateNamesToMerge[0]
           )
-          .includes(state.id?.replace("md", ""))
+          .includes(state.id?.replace(MinimizedDfaStateId, ""))
       );
 
       // run timer 100 times for duration * 10 time
@@ -289,8 +296,8 @@ export const MinimizedDfa = (props: MinimizedDfaProps) => {
           {
             labels: <StyledTransitionLabel label={transitionValue} />,
             value: transitionValue,
-            start: row?.state + "md",
-            end: (row?.[transitionValue] as string) + "md",
+            start: row?.state + MinimizedDfaStateId,
+            end: (row?.[transitionValue] as string) + MinimizedDfaStateId,
             animateDrawing: true,
             _extendSVGcanvas: isSelfTransition ? 25 : 0,
             _cpx1Offset: isSelfTransition ? -50 : 0,
@@ -353,17 +360,21 @@ export const MinimizedDfa = (props: MinimizedDfaProps) => {
       return prev
         .filter(
           (state) =>
-            !stateNamesToMerge.slice(1).includes(state.id?.replace("md", ""))
+            !stateNamesToMerge
+              .slice(1)
+              .includes(state.id?.replace(MinimizedDfaStateId, ""))
         )
         .map((state) => {
-          if (state.id?.replace("md", "") === stateNamesToMerge[0]) {
+          if (
+            state.id?.replace(MinimizedDfaStateId, "") === stateNamesToMerge[0]
+          ) {
             return {
               ...state,
               id:
-                state.id?.replace("md", "") +
+                state.id?.replace(MinimizedDfaStateId, "") +
                 " " +
                 stateNamesToMerge.slice(1).join(" ") +
-                "md",
+                MinimizedDfaStateId,
             };
           } else {
             return state;
diff --git a/src/features/components/nfaToDfa/ModifiedTable.tsx b/src/features/components/nfaToDfa/ModifiedTable.tsx
@@ -22,6 +22,7 @@ import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
 import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
 import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
 import { stateSelectedColor } from "../../../consts/Colors";
+import { ModifiedTableStateId } from "../../../consts/StateIdsExtensions";
 
 const numberOfColumns = 3; // one for state, one for a and one for b
 let index = numberOfColumns;
@@ -207,7 +208,7 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
               .toString()
               .split(" ")
               .filter((key) => key !== "")
-              .map((tv) => tv.replace("mtt", ""))
+              .map((tv) => tv.replace(ModifiedTableStateId, ""))
               .join(" ") ?? row[key === "^" ? "nul" : key],
           ])
         ),
diff --git a/src/features/components/nfaToDfa/NullClosure.tsx b/src/features/components/nfaToDfa/NullClosure.tsx
@@ -29,6 +29,7 @@ import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
 import { PossibleTransitionValues } from "../../../consts/PossibleTransitionValues";
 import { stateSelectedColor } from "../../../consts/Colors";
 import { StyledTransitionLabel } from "../playground/StyledTransitionLabel";
+import { NullCLosureStateId } from "../../../consts/StateIdsExtensions";
 
 const numberOfColumns = 2; // one for state and one for null
 let index = numberOfColumns;
@@ -220,7 +221,7 @@ export const NullClosure = (props: NullClosureProps) => {
               .toString()
               .split(" ")
               .filter((key) => key !== "")
-              .map((tv) => tv.replace("nc", ""))
+              .map((tv) => tv.replace(NullCLosureStateId, ""))
               .join(" ") ?? row[key === "^" ? "nul" : key],
           ])
         ),
diff --git a/src/features/components/nfaToDfa/ResultantDfa.tsx b/src/features/components/nfaToDfa/ResultantDfa.tsx
@@ -30,6 +30,7 @@ import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
 import { StyledTransitionLabel } from "../playground/StyledTransitionLabel";
 import { stateSelectedColor } from "../../../consts/Colors";
 import { DataContext } from "../../../components/Editor";
+import { ResultantDfaStateId } from "../../../consts/StateIdsExtensions";
 
 const numberOfColumns = 3; // one for state, one for a and one for b
 let index = numberOfColumns;
@@ -181,13 +182,13 @@ export const ResultantDfa = (props: ResultantDfaProps) => {
               isInitial:
                 resultantDfaRows.length === 0 &&
                 stateToProcess
-                  .replaceAll("ntd", "")
+                  .replaceAll(ResultantDfaStateId, "")
                   .split(", ")
                   .includes(
                     dataContext.rows.find((row) => row.isInitial).state
                   ),
               isFinal: stateToProcess
-                .replaceAll("ntd", "")
+                .replaceAll(ResultantDfaStateId, "")
                 .split(", ")
                 .some((s) =>
                   dataContext.rows
@@ -491,7 +492,7 @@ export const ResultantDfa = (props: ResultantDfaProps) => {
               .toString()
               .split(" ")
               .filter((key) => key !== "")
-              .map((tv) => tv.replace("ntd", ""))
+              .map((tv) => tv.replace(ResultantDfaStateId, ""))
               .join(" ") ?? row[key === "^" ? "nul" : key],
           ])
         ),
diff --git a/src/features/components/tools/Playground.tsx b/src/features/components/tools/Playground.tsx
@@ -14,6 +14,7 @@ import { XarrowCoreProps } from "../playground/props/XarrowProps";
 import { Box } from "@mui/material";
 import { useState, useEffect, useContext } from "react";
 import { DataContext } from "../../../components/Editor";
+import { NullCLosureStateId, ResultantDfaStateId, EquivalentStatesStateId, MinimizedDfaStateId, TestStringStateId } from "../../../consts/StateIdsExtensions";
 
 export const ToolsPlayground = (props: ToolsPlaygroundProps) => {
   console.log("re rendering ToolsPlayground: props", props);
@@ -49,16 +50,16 @@ export const ToolsPlayground = (props: ToolsPlaygroundProps) => {
 
   const stateToInquire = props.states?.at(0)?.id;
   const uniqueWord = // to ensure that the xarrow is unique
-    stateToInquire?.includes("nc")
-      ? "nc"
-      : stateToInquire?.includes("ntd")
-      ? "ntd"
-      : stateToInquire?.includes("est")
-      ? "est"
-      : stateToInquire?.includes("md")
-      ? "md"
-      : stateToInquire?.includes("ts")
-      ? "ts"
+    stateToInquire?.includes(NullCLosureStateId)
+      ? NullCLosureStateId
+      : stateToInquire?.includes(ResultantDfaStateId)
+      ? ResultantDfaStateId
+      : stateToInquire?.includes(EquivalentStatesStateId)
+      ? EquivalentStatesStateId
+      : stateToInquire?.includes(MinimizedDfaStateId)
+      ? MinimizedDfaStateId
+      : stateToInquire?.includes(TestStringStateId)
+      ? TestStringStateId
       : "";
 
   const xarrowProps: XarrowCoreProps = {
diff --git a/src/features/props/NfaToDfaProps.ts b/src/features/props/NfaToDfaProps.ts
