Skip to content

Commit a70ec08

Browse files
PramithaMJPramithaMJ
committed
feat: implement interactive static vs instance memory layout simulator with memory and code comparison views.
1 parent 36cb5bf commit a70ec08

3 files changed

Lines changed: 585 additions & 0 deletions

File tree

‎src/features/static/StaticModule.tsx‎

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

‎src/features/static/StaticSimulator.module.css‎

Lines changed: 368 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,368 @@
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+
text-align: center;
29+
}
30+
31+
.viewToggle {
32+
display: flex;
33+
justify-content: center;
34+
gap: var(--space-2);
35+
margin-bottom: var(--space-6);
36+
}
37+
38+
.toggleBtn {
39+
padding: var(--space-2) var(--space-4);
40+
border-radius: var(--radius-lg);
41+
border: 1px solid var(--color-border-default);
42+
background: transparent;
43+
color: var(--color-text-secondary);
44+
font-size: var(--text-sm);
45+
font-weight: 600;
46+
cursor: pointer;
47+
transition: all var(--transition-fast);
48+
}
49+
50+
.toggleBtn:hover {
51+
border-color: var(--color-border-hover);
52+
color: var(--color-text-primary);
53+
}
54+
55+
.toggleBtn.active {
56+
background: linear-gradient(135deg, #ec4899, #f472b6);
57+
border-color: transparent;
58+
color: white;
59+
}
60+
61+
.memoryLayout {
62+
display: grid;
63+
grid-template-columns: 1fr 1fr;
64+
gap: var(--space-6);
65+
min-width: 700px;
66+
}
67+
68+
@media (max-width: 900px) {
69+
.memoryLayout {
70+
grid-template-columns: 1fr;
71+
}
72+
}
73+
74+
.metaspaceSection,
75+
.heapSection {
76+
background-color: var(--color-bg-secondary);
77+
border-radius: var(--radius-xl);
78+
padding: var(--space-4);
79+
border: 1px solid var(--color-border-default);
80+
}
81+
82+
.sectionHeader {
83+
display: flex;
84+
align-items: center;
85+
gap: var(--space-3);
86+
margin-bottom: var(--space-4);
87+
}
88+
89+
.sectionIcon {
90+
font-size: var(--text-2xl);
91+
}
92+
93+
.sectionTitle {
94+
font-weight: 700;
95+
font-size: var(--text-lg);
96+
color: #f472b6;
97+
margin: 0;
98+
}
99+
100+
.sectionTitleHeap {
101+
font-weight: 700;
102+
font-size: var(--text-lg);
103+
color: var(--color-gc-primary);
104+
margin: 0;
105+
}
106+
107+
.sectionSubtitle {
108+
font-size: var(--text-xs);
109+
color: var(--color-text-muted);
110+
}
111+
112+
.classBox {
113+
background-color: rgba(244, 114, 182, 0.1);
114+
border: 2px solid #f472b6;
115+
border-radius: var(--radius-lg);
116+
padding: var(--space-4);
117+
}
118+
119+
.classHeader {
120+
font-family: var(--font-mono);
121+
font-size: var(--text-sm);
122+
color: var(--color-text-primary);
123+
margin-bottom: var(--space-3);
124+
padding-bottom: var(--space-2);
125+
border-bottom: 1px solid rgba(244, 114, 182, 0.3);
126+
}
127+
128+
.keyword {
129+
color: #a855f7;
130+
}
131+
132+
.memberList {
133+
display: flex;
134+
flex-direction: column;
135+
gap: var(--space-2);
136+
}
137+
138+
.staticMember {
139+
display: flex;
140+
align-items: center;
141+
gap: var(--space-2);
142+
font-family: var(--font-mono);
143+
font-size: var(--text-sm);
144+
padding: var(--space-2);
145+
background: rgba(244, 114, 182, 0.1);
146+
border-radius: var(--radius-sm);
147+
}
148+
149+
.staticBadge {
150+
background: linear-gradient(135deg, #ec4899, #f472b6);
151+
color: white;
152+
font-size: 10px;
153+
font-weight: 700;
154+
padding: 2px 6px;
155+
border-radius: var(--radius-sm);
156+
text-transform: uppercase;
157+
}
158+
159+
.instanceBadge {
160+
background: linear-gradient(135deg, #059669, #10b981);
161+
color: white;
162+
font-size: 10px;
163+
font-weight: 700;
164+
padding: 2px 6px;
165+
border-radius: var(--radius-sm);
166+
text-transform: uppercase;
167+
}
168+
169+
.memberName {
170+
color: var(--color-text-secondary);
171+
}
172+
173+
.staticValue {
174+
color: #f472b6;
175+
font-weight: 700;
176+
}
177+
178+
.classFooter {
179+
margin-top: var(--space-3);
180+
font-size: var(--text-xs);
181+
color: var(--color-text-muted);
182+
font-style: italic;
183+
}
184+
185+
.instancesGrid {
186+
display: grid;
187+
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
188+
gap: var(--space-3);
189+
min-height: 200px;
190+
}
191+
192+
.emptyHeap {
193+
grid-column: 1 / -1;
194+
display: flex;
195+
align-items: center;
196+
justify-content: center;
197+
color: var(--color-text-muted);
198+
font-size: var(--text-sm);
199+
font-style: italic;
200+
padding: var(--space-8);
201+
}
202+
203+
.instanceBox {
204+
background-color: rgba(134, 239, 172, 0.1);
205+
border: 2px solid var(--color-gc-primary);
206+
border-radius: var(--radius-lg);
207+
padding: var(--space-3);
208+
animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
209+
}
210+
211+
@keyframes popIn {
212+
0% {
213+
transform: scale(0);
214+
opacity: 0;
215+
}
216+
217+
100% {
218+
transform: scale(1);
219+
opacity: 1;
220+
}
221+
}
222+
223+
.instanceHeader {
224+
font-family: var(--font-mono);
225+
font-size: var(--text-xs);
226+
color: var(--color-gc-primary);
227+
font-weight: 700;
228+
margin-bottom: var(--space-2);
229+
padding-bottom: var(--space-1);
230+
border-bottom: 1px solid rgba(134, 239, 172, 0.3);
231+
}
232+
233+
.instanceMembers {
234+
display: flex;
235+
flex-direction: column;
236+
gap: var(--space-1);
237+
}
238+
239+
.instanceMember {
240+
display: flex;
241+
justify-content: space-between;
242+
font-family: var(--font-mono);
243+
font-size: 11px;
244+
}
245+
246+
.instanceValue {
247+
color: var(--color-gc-primary);
248+
font-weight: 700;
249+
}
250+
251+
.sharedRef {
252+
color: #f472b6;
253+
font-size: 10px;
254+
}
255+
256+
/* Comparison View */
257+
.comparisonView {
258+
display: flex;
259+
gap: var(--space-6);
260+
align-items: flex-start;
261+
justify-content: center;
262+
flex-wrap: wrap;
263+
min-width: 700px;
264+
}
265+
266+
.codeCard {
267+
background-color: var(--color-bg-secondary);
268+
border-radius: var(--radius-xl);
269+
padding: var(--space-4);
270+
border: 1px solid var(--color-border-default);
271+
width: 320px;
272+
}
273+
274+
.codeCardHeader {
275+
display: flex;
276+
align-items: center;
277+
gap: var(--space-2);
278+
font-weight: 700;
279+
color: var(--color-text-primary);
280+
margin-bottom: var(--space-3);
281+
}
282+
283+
.codeBlock {
284+
background-color: #000;
285+
padding: var(--space-3);
286+
border-radius: var(--radius-md);
287+
font-family: var(--font-mono);
288+
font-size: 11px;
289+
color: var(--color-text-secondary);
290+
overflow-x: auto;
291+
margin: 0;
292+
line-height: 1.5;
293+
}
294+
295+
.codeNote {
296+
margin-top: var(--space-3);
297+
font-size: var(--text-xs);
298+
color: var(--color-success);
299+
}
300+
301+
.vsCircle {
302+
width: 48px;
303+
height: 48px;
304+
background: linear-gradient(135deg, #334155, #1e293b);
305+
border: 2px solid var(--color-border-default);
306+
border-radius: 50%;
307+
display: flex;
308+
align-items: center;
309+
justify-content: center;
310+
font-weight: 700;
311+
color: var(--color-text-muted);
312+
flex-shrink: 0;
313+
}
314+
315+
/* Control Panel */
316+
.controlPanel {
317+
width: 100%;
318+
background-color: #020617;
319+
border-left: 1px solid var(--color-border-subtle);
320+
display: flex;
321+
flex-direction: column;
322+
padding: var(--space-6);
323+
gap: var(--space-4);
324+
flex-shrink: 0;
325+
}
326+
327+
@media (min-width: 768px) {
328+
.controlPanel {
329+
width: 320px;
330+
}
331+
}
332+
333+
.fieldControl {
334+
background-color: var(--color-bg-secondary);
335+
padding: var(--space-4);
336+
border-radius: var(--radius-lg);
337+
}
338+
339+
.controlLabel {
340+
display: block;
341+
font-size: var(--text-xs);
342+
color: var(--color-text-muted);
343+
text-transform: uppercase;
344+
font-weight: 700;
345+
margin-bottom: var(--space-2);
346+
}
347+
348+
.counterButtons {
349+
display: flex;
350+
align-items: center;
351+
justify-content: center;
352+
gap: var(--space-3);
353+
}
354+
355+
.counterValue {
356+
font-size: var(--text-2xl);
357+
font-weight: 700;
358+
color: #f472b6;
359+
min-width: 48px;
360+
text-align: center;
361+
}
362+
363+
.hint {
364+
font-size: var(--text-xs);
365+
color: var(--color-warning);
366+
margin-top: var(--space-2);
367+
text-align: center;
368+
}

0 commit comments

Comments
 (0)