Skip to content

Commit ddbc118

Browse files
GaelGilGaelGil
committed
updated traversal p[age
1 parent cee3d59 commit ddbc118

File tree

5 files changed

+132
-42
lines changed

5 files changed

+132
-42
lines changed

‎src/components/SortingVisualizer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const SortingVisualizer: React.FC<ArrayProps> = ({ arraysInfo }) => {
3535
if (!algorithm || isSorting) return;
3636
setIsSorting(true);
3737

38-
await fakeSort(array, setArray, algorithm);
38+
// await fakeSort(array, setArray, algorithm);
3939

4040
setIsSorting(false);
4141
};

‎src/components/TraversalVisualizer.tsx‎

Lines changed: 122 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,73 @@ import { Container } from "react-bootstrap";
33
import AlgorithmForm from "./AlgorithmForm";
44
import AlgorithmInfo from "./AlgorithmInfo";
55
import type { GraphProps } from "../types/info";
6-
7-
const generateRandomArray = (length = 50, min = 20, max = 200): number[] =>
8-
Array.from(
9-
{ length },
10-
() => Math.floor(Math.random() * (max - min + 1)) + min
11-
);
6+
import { conflict } from "../services/graphAlgorithms/helper";
7+
import type { Item } from "../types/item";
8+
import "../css/Graphs.css";
129

1310
const TraversalVisualizer: React.FC<GraphProps> = ({ graphsInfo }) => {
14-
const [array, setArray] = useState<number[]>([]);
15-
const [algorithm, setAlgorithm] = useState<string>("");
11+
const [matrix, setMatrix] = useState<any[][]>([]);
12+
const [start, setStart] = useState({ row: 0, col: 0 });
13+
const [objectives, setObjectives] = useState<Item[]>([]);
14+
const [obstacles, setObstacles] = useState<Item[]>([]);
15+
const [weights, setWeights] = useState<Item[]>([]);
16+
const [algorithm, setAlgorithm] = useState("");
1617
const [isSorting, setIsSorting] = useState(false);
1718

19+
const generateMatrix = () => {
20+
const n = 30; // nxn array
21+
const newMatrix = Array.from({ length: n }, () => Array(50).fill(" ")); // generate array
22+
const objectivesArray = []; // array to hold bojectives
23+
const obstaclesArray = []; // array to hold obstacles
24+
const weightsArray = []; // array to hold obstacles
25+
const numObjectives = 1; // number of objectives
26+
const numObstacles = 100; // number of obstacles
27+
const numWeights = 50; // number of weights
28+
let placed = 0;
29+
// create and set the starting point
30+
let x = Math.floor(Math.random() * newMatrix.length);
31+
let y = Math.floor(Math.random() * newMatrix[0].length);
32+
33+
setStart({ row: x, col: y });
34+
newMatrix[x][y] = "s";
35+
36+
while (placed < numObjectives + numObstacles + numWeights) {
37+
// generate random x and y cord
38+
x = Math.floor(Math.random() * newMatrix.length);
39+
y = Math.floor(Math.random() * newMatrix[0].length);
40+
if (!conflict(x, y, newMatrix)) {
41+
// if not conflict
42+
if (placed === 0) {
43+
objectivesArray.push({ row: x, col: y }); // add to objective
44+
newMatrix[x][y] = "o";
45+
} else if (
46+
placed >= numObjectives &&
47+
placed <= numObjectives + numObstacles
48+
) {
49+
obstaclesArray.push({ row: x, col: y }); // add to obstacles
50+
newMatrix[x][y] = "w";
51+
} else {
52+
weightsArray.push({ row: x, col: y }); // add to weight
53+
newMatrix[x][y] = "e";
54+
}
55+
placed += 1;
56+
}
57+
}
58+
59+
setObjectives(objectivesArray);
60+
setObstacles(obstaclesArray);
61+
setWeights(weightsArray);
62+
// setMatrix(newMatrix);
63+
return newMatrix;
64+
};
65+
1866
useEffect(() => {
19-
setArray(generateRandomArray());
67+
setMatrix(generateMatrix());
2068
}, []);
2169

22-
const resetArray = () => {
70+
const resetMatrix = () => {
2371
if (!isSorting) {
24-
setArray(generateRandomArray());
72+
setMatrix(generateMatrix());
2573
}
2674
};
2775

@@ -34,39 +82,82 @@ const TraversalVisualizer: React.FC<GraphProps> = ({ graphsInfo }) => {
3482
if (!algorithm || isSorting) return;
3583
setIsSorting(true);
3684

37-
await fakeSort(array, setArray, algorithm);
85+
// await fakeSort(array, setArray, algorithm);
3886

3987
setIsSorting(false);
4088
};
4189

4290
return (
43-
<Container className="d-flex flex-column justify-content-center align-items-center min-vh-100">
44-
<div className="array-container mb-4">
45-
{array.map((value, idx) => (
46-
<div
47-
key={idx}
48-
className="array-bar"
49-
style={{ height: `${value}px` }}
50-
></div>
91+
<div className="GraphTraversalVisualiser container d-flex flex-column align-items-center py-4">
92+
<div className="matrix-container d-flex flex-column mb-4">
93+
{matrix.map((row, rowIndex) => (
94+
<div key={rowIndex} className={"matrix-row matrix-row-" + rowIndex}>
95+
{row.map((cell, colIndex) => (
96+
<div
97+
key={colIndex}
98+
className={`matrix-cell
99+
${
100+
start.row === rowIndex && start.col === colIndex
101+
? "start"
102+
: ""
103+
}
104+
${
105+
objectives.some(
106+
(obj) =>
107+
obj.row === rowIndex && obj.col === colIndex
108+
)
109+
? "objective"
110+
: ""
111+
}
112+
${
113+
obstacles.some(
114+
(obs) =>
115+
obs.row === rowIndex && obs.col === colIndex
116+
)
117+
? "obstacle"
118+
: ""
119+
}
120+
${
121+
weights.some(
122+
(weight) =>
123+
weight.row === rowIndex &&
124+
weight.col === colIndex
125+
)
126+
? "weight"
127+
: ""
128+
}
129+
col-index-${colIndex}`}
130+
>
131+
{cell}
132+
</div>
133+
))}
134+
</div>
51135
))}
52136
</div>
53-
54-
<div style={{ maxWidth: "400px", width: "100%" }}>
55-
<AlgorithmForm
56-
value={algorithm}
57-
options={["Merge", "Bubble", "Selection", "Insertion"]}
58-
onChange={handleChange}
59-
onSubmit={handleSubmit}
60-
onReset={resetArray}
61-
disabled={isSorting}
62-
/>
137+
<div className="legend mb-4 text-center">
138+
<ul>
139+
<li className="start">Start</li>
140+
<li className="objective">Objective</li>
141+
<li className="path">Path</li>
142+
<li className="obstacle">Obstacle</li>
143+
<li className="expanded">Expanded Nodes</li>
144+
<li className="weight">Weighted (ignored for bfs and dfs)</li>
145+
</ul>
63146
</div>
147+
<AlgorithmForm
148+
value={algorithm}
149+
options={["Astar", "BFS", "DFS", "UCS"]}
150+
onChange={handleChange}
151+
onSubmit={handleSubmit}
152+
onReset={resetMatrix}
153+
disabled={isSorting}
154+
/>
64155

65156
<Container className="mt-5">
66157
<h2 className="text-center mb-4">About Sorting Algorithms</h2>
67158
<AlgorithmInfo items={graphsInfo} />
68159
</Container>
69-
</Container>
160+
</div>
70161
);
71162
};
72163

‎src/css/Graphs.css‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010
margin: 0px;
1111
}
1212

13-
14-
1513
.legend {
1614
align-content: center;
1715
display: flex;
@@ -28,7 +26,6 @@
2826
padding: 10px;
2927
}
3028

31-
3229
.matrix-cell {
3330
width: 30px;
3431
height: 30px;
@@ -58,15 +55,12 @@
5855
background-color: #ffc107 !important;
5956
}
6057

61-
6258
.weight {
6359
background-color: red !important;
64-
color: white;
65-
60+
color: white;
6661
}
6762

6863
.expanded {
6964
background-color: aquamarine !important;
70-
/* color: white; */
71-
65+
/* color: white; */
7266
}

‎src/pages/Visualiser.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import SortingVisualizer from "../components/SortingVisualizer";
44
import TraversalVisualizer from "../components/TraversalVisualizer";
55
import { arraysInfo } from "../data/arraysInfo";
66
import { graphsInfo } from "../data/graphsInfo";
7-
// import type { Info, InfoProps } from "../types/info";
87

98
const VisualizersPage: React.FC = () => {
10-
const [selected, setSelected] = useState<"sorting" | "graph">("sorting");
9+
const [selected, setSelected] = useState<"sorting" | "graph">("sorting"); // declare the default state as string
1110

1211
return (
1312
<Container className="mt-5">
1413
<h1 className="text-center mb-4">Algorithm Visualizers</h1>
1514

15+
{/* the selection options for sorting options */}
1616
<ButtonGroup className="mb-4 d-flex justify-content-center">
1717
<ToggleButton
1818
id="sorting-toggle"
@@ -38,6 +38,7 @@ const VisualizersPage: React.FC = () => {
3838
</ToggleButton>
3939
</ButtonGroup>
4040

41+
{/* if we are sorting render the sorting component */}
4142
{selected === "sorting" ? (
4243
<SortingVisualizer arraysInfo={arraysInfo} />
4344
) : (

‎src/types/item.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export type Item = {
2+
row: number;
3+
col: number;
4+
};

0 commit comments

Comments
 (0)