Skip to content

Commit 3932a9d

Browse files
andra961andra961
committed
add problem drescription, splitting the view in two
1 parent 2678687 commit 3932a9d

File tree

13 files changed

+727
-213
lines changed

13 files changed

+727
-213
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Graph-Visualizer
22

3-
A `react.js`(with `typescript`) app to visualize and interact with graph algorithms. In particular, in its current form, the app aims to solve the Leetcode problem [rotting-oranges](https://leetcode.com/problems/rotting-oranges/), which requires a `Breadth First Search` to be solved optimally in `O(m * n)` time and `O(m * n)` space complexity.
3+
A `react.js`(with `typescript`) app to visualize and interact with graph algorithms. In particular, in its current form, the app aims to solve the Leetcode problem [rotting-oranges](https://leetcode.com/problems/rotting-oranges/), which requires a `Breadth First Search` to be solved optimally in `O(m * n)` time and `O(m * n)` space complexity. The app aims to visualize the `Breadth First Search` algorithm in action and show its state (minutes passed included) as it progresses.
44

55
# Try it yourself
66

‎package-lock.json

Lines changed: 551 additions & 141 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@types/react-dom": "^18.0.5",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
16+
"react-markdown": "^8.0.4",
1617
"react-scripts": "5.0.1",
1718
"typescript": "^4.7.4",
1819
"web-vitals": "^2.1.4"

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Graph Visualizer</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
.App {
2-
margin-top: 100px;
32
width: 100vw;
3+
height: 100vh;
44
display: flex;
55
flex-direction: row;
6-
justify-content: center;
6+
}
7+
8+
@media screen and (max-width: 500px) {
9+
.App {
10+
flex-direction: column;
11+
}
712
}

‎src/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from "react";
22
import Grid from "./components/Grid";
33
import "./App.css";
4+
import Description from "./components/Description";
45

56
function App() {
67
return (
78
<div className="App">
9+
<Description />
810
<Grid />
911
</div>
1012
);

‎src/components/Description/Description.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.descriptionContainer {
2+
border-right: 1px solid lightgrey;
3+
padding: 20px;
4+
flex: 1;
5+
overflow-y: scroll;
6+
}
7+
8+
@media screen and (max-width: 500px) {
9+
.descriptionContainer {
10+
border-bottom: 1px solid lightgrey;
11+
}
12+
}

‎src/components/Description/Description.tsx

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from "react";
2+
import "./Description.css";
3+
4+
const Description = () => {
5+
return (
6+
<div className="descriptionContainer">
7+
<h2>Rotten Oranges</h2>
8+
You are given an <code>m x n</code> <code>grid</code> where each cell can
9+
have one of three values:
10+
<ul>
11+
<li>0 representing an empty cell</li>
12+
<li>1 representing a fresh orange, or</li>
13+
<li>2 representing a rotten orange</li>
14+
</ul>
15+
Every minute, any fresh orange that is <b>4-directionally adjacent</b> to
16+
a rotten orange becomes rotten. Return the minimum number of minutes that
17+
must elapse until no cell has a fresh orange. If this is impossible,
18+
return <code>-1</code>
19+
<h2>How to set the initial state</h2>
20+
Click a cell to cycle between the 3 states:
21+
<ul>
22+
<li>empty cells represent...empty cells </li>
23+
<li>
24+
<span
25+
style={{
26+
backgroundColor: "orange",
27+
borderRadius: "5px",
28+
color: "white",
29+
padding: "0px 5px",
30+
}}
31+
>
32+
orange
33+
</span>{" "}
34+
spheres represent fresh oranges
35+
</li>
36+
<li>
37+
<span
38+
style={{
39+
backgroundColor: "green",
40+
borderRadius: "5px",
41+
color: "white",
42+
padding: "0px 5px",
43+
}}
44+
>
45+
green
46+
</span>{" "}
47+
spheres represent rotten oranges
48+
</li>
49+
</ul>
50+
Once you are done, press the <code>Launch Algorithm</code> button to see
51+
the algorithm in action!
52+
<h2>About the algorithm</h2>
53+
The optimal solution uses <code>multiple source</code>{" "}
54+
<code>Breadth First Search</code> with a queue. <br />
55+
First, each cell is scanned to find the sources, the rotten oranges. The
56+
queue is then initialized with the sources found and the{" "}
57+
<code>Breadth First Search</code> starts. <br /> Only fresh oranges will
58+
be <code>visited</code>, meaning they get rotted too and they will start
59+
rot adjacent fresh oranges too!
60+
<br /> Each time a <code>level</code> is visited, the minutes counter is
61+
increased (starts from 0). Once the <code>Breadth First Search</code> is
62+
over (and the queue empty), the minutes counter will tell how many minutes
63+
it took! <br />
64+
<code>Time complexity: O(n * m)</code> <br />
65+
<code>Space complexity: O(n * m)</code>
66+
</div>
67+
);
68+
};
69+
70+
export default Description;

‎src/components/Description/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Description";

‎src/components/Grid/Grid.css

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
1-
.startAlgoButton {
1+
.button {
22
cursor: pointer;
33
border-radius: 10px;
44
background-color: blueviolet;
55
border: none;
66
color: white;
7-
font-weight: 100;
7+
font-weight: 300;
88
margin-right: 5px;
9+
padding: 0px 5px;
910
}
10-
.resetButton {
11-
cursor: pointer;
12-
border-radius: 10px;
13-
background-color: blueviolet;
14-
border: none;
15-
color: white;
16-
font-weight: 100;
17-
margin-right: 5px;
11+
.gridContainer {
12+
flex: 1;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
1817
}
19-
.fillButton {
20-
cursor: pointer;
21-
border-radius: 10px;
22-
background-color: blueviolet;
23-
border: none;
24-
color: white;
25-
font-weight: 100;
26-
margin-right: 5px;
18+
.gridBox {
19+
margin: 0 0;
2720
}

0 commit comments

Comments
 (0)