Skip to content

Commit add5cf0

Browse files
PramithaMJPramithaMJ
committed
feat: Add GC theory educational content and initial simulator styling.
1 parent d14cf22 commit add5cf0

File tree

5 files changed

+279
-0
lines changed

5 files changed

+279
-0
lines changed

‎src/features/gc/GCSimulator.module.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
width: 100%;
5+
height: 100%;
6+
overflow: hidden;
7+
}
8+
9+
@media (min-width: 768px) {
10+
.container {
11+
flex-direction: row;
12+
}
13+
}
14+
15+
.visualizer {
16+
flex: 1;
17+
background-color: var(--color-bg-primary);
18+
padding: var(--space-6);
19+
overflow-y: auto;
20+
overflow-x: auto;
21+
}
22+
23+
.title {
24+
font-size: var(--text-2xl);
25+
font-weight: 700;
26+
color: var(--color-text-primary);
27+
margin-bottom: var(--space-4);
28+
}
29+
30+
.generationCard {
31+
background-color: var(--color-bg-secondary);
32+
border-radius: var(--radius-xl);
33+
padding: var(--space-4);
34+
border: 1px solid var(--color-border-default);
35+
box-shadow: var(--shadow-xl);
36+
margin-bottom: var(--space-6);
37+
position: relative;
38+
overflow: hidden;
39+
min-width: 300px;
40+
}
41+
42+
.accentBorder {
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
width: 4px;
47+
height: 100%;
48+
}
49+
50+
.young {
51+
background-color: var(--color-gc-primary);
52+
}
53+
54+
.old {
55+
background-color: var(--color-old);
56+
}
57+
58+
.genTitle {
59+
font-weight: 700;
60+
color: var(--color-gc-primary);
61+
margin-bottom: var(--space-2);
62+
}
63+
64+
.genTitleOld {
65+
font-weight: 700;
66+
color: #fca5a5;
67+
margin-bottom: var(--space-2);
68+
}
69+
70+
.poolsGrid {
71+
display: grid;
72+
grid-template-columns: repeat(2, 1fr);
73+
gap: var(--space-4);
74+
}
75+
76+
.pool {
77+
background-color: rgba(15, 23, 42, 0.5);
78+
border-radius: var(--radius-lg);
79+
padding: var(--space-3);
80+
min-height: 140px;
81+
}
82+
83+
.poolHeader {
84+
font-size: var(--text-xs);
85+
color: var(--color-text-muted);
86+
font-weight: 700;
87+
margin-bottom: var(--space-2);
88+
}
89+
90+
.count {
91+
color: var(--color-text-secondary);
92+
}
93+
94+
.poolContent {
95+
display: flex;
96+
flex-wrap: wrap;
97+
align-content: flex-start;
98+
gap: var(--space-1);
99+
}
100+
101+
.poolContentLarge {
102+
display: flex;
103+
flex-wrap: wrap;
104+
align-content: flex-start;
105+
gap: var(--space-1);
106+
min-height: 200px;
107+
}
108+
109+
.controlPanel {
110+
width: 100%;
111+
background-color: #020617;
112+
border-left: 1px solid var(--color-border-subtle);
113+
display: flex;
114+
flex-direction: column;
115+
padding: var(--space-6);
116+
gap: var(--space-4);
117+
flex-shrink: 0;
118+
}
119+
120+
@media (min-width: 768px) {
121+
.controlPanel {
122+
width: 320px;
123+
}
124+
}
125+
126+
.buttonGroup {
127+
display: grid;
128+
grid-template-columns: repeat(2, 1fr);
129+
gap: var(--space-2);
130+
}

‎src/features/gc/GCTheory.module.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.container {
2+
flex: 1;
3+
overflow-y: auto;
4+
background-color: var(--color-bg-primary);
5+
padding: var(--space-8);
6+
}
7+
8+
.content {
9+
max-width: 768px;
10+
margin: 0 auto;
11+
display: flex;
12+
flex-direction: column;
13+
gap: var(--space-8);
14+
}
15+
16+
.title {
17+
font-size: var(--text-3xl);
18+
font-weight: 700;
19+
color: var(--color-text-primary);
20+
}
21+
22+
.card {
23+
background-color: var(--color-bg-secondary);
24+
padding: var(--space-6);
25+
border-radius: var(--radius-lg);
26+
border-left: 4px solid;
27+
}
28+
29+
.green {
30+
border-color: var(--color-gc-primary);
31+
}
32+
33+
.blue {
34+
border-color: var(--color-info);
35+
}
36+
37+
.yellow {
38+
border-color: var(--color-warning);
39+
}
40+
41+
.red {
42+
border-color: var(--color-error);
43+
}
44+
45+
.cardTitle {
46+
font-size: var(--text-xl);
47+
font-weight: 700;
48+
color: var(--color-text-primary);
49+
margin-bottom: var(--space-2);
50+
}
51+
52+
.cardText {
53+
color: var(--color-text-secondary);
54+
line-height: 1.7;
55+
}
56+
57+
.cardText code {
58+
background-color: var(--color-bg-tertiary);
59+
padding: 2px 6px;
60+
border-radius: var(--radius-sm);
61+
font-family: var(--font-mono);
62+
font-size: var(--text-sm);
63+
}
64+
65+
.list {
66+
color: var(--color-text-secondary);
67+
padding-left: var(--space-5);
68+
display: flex;
69+
flex-direction: column;
70+
gap: var(--space-2);
71+
}

‎src/features/gc/GCTheory.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* GC Theory View
3+
* Educational content about garbage collection
4+
*/
5+
6+
import styles from './GCTheory.module.css';
7+
8+
export function GCTheory() {
9+
return (
10+
<div className={styles.container}>
11+
<div className={styles.content}>
12+
<h2 className={styles.title}>Garbage Collection Deep Dive</h2>
13+
14+
<div className={`${styles.card} ${styles.green}`}>
15+
<h3 className={styles.cardTitle}>Generational Hypothesis</h3>
16+
<p className={styles.cardText}>
17+
Most objects die young. Therefore, the heap is split. Allocation happens in{' '}
18+
<strong>Eden</strong>. Only survivors move to <strong>Survivor</strong> spaces,
19+
then eventually to <strong>Old Gen</strong>.
20+
</p>
21+
</div>
22+
23+
<div className={`${styles.card} ${styles.blue}`}>
24+
<h3 className={styles.cardTitle}>Card Table & Write Barriers</h3>
25+
<p className={styles.cardText}>
26+
How does GC know if an Old Gen object points to a Young Gen object without
27+
scanning the whole Old Gen? The JVM uses a <strong>Card Table</strong>. When
28+
you write a reference (<code>old.field = young</code>), a "Write Barrier"
29+
marks that memory card as dirty. Minor GC only scans dirty cards.
30+
</p>
31+
</div>
32+
33+
<div className={`${styles.card} ${styles.yellow}`}>
34+
<h3 className={styles.cardTitle}>GC Algorithms</h3>
35+
<ul className={styles.list}>
36+
<li>
37+
<strong>Serial GC:</strong> Single-threaded, simple, for small heaps
38+
</li>
39+
<li>
40+
<strong>Parallel GC:</strong> Multi-threaded, throughput-focused
41+
</li>
42+
<li>
43+
<strong>G1 GC:</strong> Low-latency, divides heap into regions
44+
</li>
45+
<li>
46+
<strong>ZGC/Shenandoah:</strong> Ultra-low pause times, concurrent
47+
</li>
48+
</ul>
49+
</div>
50+
51+
<div className={`${styles.card} ${styles.red}`}>
52+
<h3 className={styles.cardTitle}>Stop-The-World (STW)</h3>
53+
<p className={styles.cardText}>
54+
During certain GC phases, all application threads must pause. This is called a
55+
"Stop-The-World" event. Modern collectors like ZGC minimize STW pauses to
56+
under 1ms regardless of heap size.
57+
</p>
58+
</div>
59+
</div>
60+
</div>
61+
);
62+
}

‎src/features/gc/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { GCModule } from './GCModule';
2+
export { GCSimulator } from './GCSimulator';
3+
export { GCTheory } from './GCTheory';

‎src/features/threads/ThreadsModule.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Threads Module - Main Container
3+
*/
4+
5+
import { useNavigation } from '../../contexts';
6+
import { ThreadsSimulator } from './ThreadsSimulator';
7+
import { ThreadsTheory } from './ThreadsTheory';
8+
9+
export function ThreadsModule() {
10+
const { activeTab } = useNavigation();
11+
12+
return activeTab === 'simulator' ? <ThreadsSimulator /> : <ThreadsTheory />;
13+
}

0 commit comments

Comments
 (0)