Skip to content

Commit 5259c30

Browse files
PramithaMJPramithaMJ
committed
feat: add Streams Simulator with pipeline visualization and theory, and integrate it into the application.
1 parent b011ad1 commit 5259c30

File tree

5 files changed

+824
-1
lines changed

5 files changed

+824
-1
lines changed

‎src/App.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { NavigationProvider, ConsoleProvider, SearchProvider, useNavigation, isModuleView } from './contexts';
77
import { Layout, ModuleHub, ModuleTabs } from './components';
8-
import { GCModule, ThreadsModule, JITModule, JMMModule, StaticModule, ArchitectureModule, PlatformModule, JDBCModule } from './features';
8+
import { GCModule, ThreadsModule, JITModule, JMMModule, StaticModule, ArchitectureModule, PlatformModule, JDBCModule, ServletModule, StreamsModule } from './features';
99
import type { ModuleId } from './types';
1010

1111
/**
@@ -29,6 +29,8 @@ function ModuleRenderer() {
2929
architecture: ArchitectureModule,
3030
platform: PlatformModule,
3131
jdbc: JDBCModule,
32+
servlet: ServletModule,
33+
streams: StreamsModule,
3234
};
3335

3436
const ModuleComponent = moduleComponents[currentView];

‎src/features/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,7 @@ export { StaticModule } from './static';
66
export { ArchitectureModule } from './architecture';
77
export { PlatformModule } from './platform';
88
export { JDBCModule } from './jdbc';
9+
export { ServletModule } from './servlet';
10+
export { StreamsModule } from './streams';
11+
912

‎src/features/streams/StreamsSimulator.module.css‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
/* Streams Simulator Styles */
2+
3+
.container {
4+
width: 100%;
5+
height: 100%;
6+
padding: var(--space-6);
7+
overflow-y: auto;
8+
background-color: var(--color-bg-primary);
9+
}
10+
11+
.grid {
12+
display: grid;
13+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
14+
gap: var(--space-6);
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
}
18+
19+
.panel {
20+
background-color: var(--color-bg-secondary);
21+
border: 1px solid var(--color-border-default);
22+
border-radius: var(--radius-xl);
23+
padding: var(--space-6);
24+
}
25+
26+
.fullWidth {
27+
grid-column: 1 / -1;
28+
}
29+
30+
.panelTitle {
31+
font-size: var(--text-xl);
32+
font-weight: 700;
33+
color: var(--color-text-primary);
34+
margin: 0 0 var(--space-1) 0;
35+
}
36+
37+
.panelSubtitle {
38+
font-size: var(--text-sm);
39+
color: var(--color-text-muted);
40+
margin: 0 0 var(--space-4) 0;
41+
}
42+
43+
/* Data Display */
44+
.dataDisplay {
45+
display: flex;
46+
flex-wrap: wrap;
47+
gap: var(--space-2);
48+
margin-bottom: var(--space-4);
49+
}
50+
51+
.dataItem {
52+
width: 36px;
53+
height: 36px;
54+
background-color: rgba(129, 140, 248, 0.2);
55+
border: 1px solid #818cf8;
56+
border-radius: var(--radius-md);
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
60+
font-weight: 700;
61+
color: #818cf8;
62+
}
63+
64+
/* Parallel Toggle */
65+
.parallelToggle {
66+
padding: var(--space-3);
67+
background-color: rgba(255, 255, 255, 0.03);
68+
border-radius: var(--radius-md);
69+
}
70+
71+
.parallelToggle label {
72+
display: flex;
73+
align-items: center;
74+
gap: var(--space-2);
75+
cursor: pointer;
76+
color: var(--color-text-secondary);
77+
font-size: var(--text-sm);
78+
}
79+
80+
.parallelToggle input {
81+
width: 18px;
82+
height: 18px;
83+
accent-color: #818cf8;
84+
}
85+
86+
/* Operations Grid */
87+
.opsGrid {
88+
display: grid;
89+
grid-template-columns: repeat(2, 1fr);
90+
gap: var(--space-2);
91+
}
92+
93+
.opsGrid button {
94+
padding: var(--space-2);
95+
background-color: rgba(255, 255, 255, 0.05);
96+
border: 1px solid var(--color-border-default);
97+
border-radius: var(--radius-md);
98+
color: var(--color-text-secondary);
99+
font-family: var(--font-mono);
100+
font-size: var(--text-xs);
101+
cursor: pointer;
102+
transition: all 0.2s;
103+
}
104+
105+
.opsGrid button:hover {
106+
border-color: #818cf8;
107+
color: #818cf8;
108+
}
109+
110+
/* Pipeline Display */
111+
.pipelineDisplay {
112+
background-color: #0a0a0a;
113+
border: 1px solid var(--color-border-default);
114+
border-radius: var(--radius-lg);
115+
padding: var(--space-4);
116+
font-family: var(--font-mono);
117+
font-size: var(--text-sm);
118+
margin-bottom: var(--space-4);
119+
overflow-x: auto;
120+
white-space: nowrap;
121+
}
122+
123+
.pipelineDisplay code {
124+
color: var(--color-text-secondary);
125+
}
126+
127+
.dot {
128+
color: var(--color-text-muted);
129+
}
130+
131+
.opCode {
132+
color: #818cf8;
133+
}
134+
135+
.terminal {
136+
color: #86efac;
137+
}
138+
139+
/* Action Buttons */
140+
.actionButtons {
141+
display: flex;
142+
gap: var(--space-2);
143+
}
144+
145+
.executeBtn {
146+
flex: 1;
147+
padding: var(--space-3);
148+
background-color: #818cf8;
149+
color: white;
150+
border: none;
151+
border-radius: var(--radius-md);
152+
font-weight: 700;
153+
cursor: pointer;
154+
transition: background-color 0.2s;
155+
}
156+
157+
.executeBtn:hover:not(:disabled) {
158+
background-color: #6366f1;
159+
}
160+
161+
.executeBtn:disabled {
162+
opacity: 0.5;
163+
cursor: not-allowed;
164+
}
165+
166+
.clearBtn {
167+
padding: var(--space-3) var(--space-4);
168+
background-color: transparent;
169+
border: 2px solid var(--color-border-default);
170+
border-radius: var(--radius-md);
171+
color: var(--color-text-muted);
172+
font-weight: 700;
173+
cursor: pointer;
174+
transition: all 0.2s;
175+
}
176+
177+
.clearBtn:hover:not(:disabled) {
178+
border-color: #f87171;
179+
color: #f87171;
180+
}
181+
182+
.clearBtn:disabled {
183+
opacity: 0.5;
184+
cursor: not-allowed;
185+
}
186+
187+
/* Placeholder */
188+
.placeholder {
189+
text-align: center;
190+
padding: var(--space-8);
191+
color: var(--color-text-muted);
192+
font-style: italic;
193+
}
194+
195+
/* Steps Container */
196+
.stepsContainer {
197+
display: flex;
198+
flex-direction: column;
199+
gap: var(--space-3);
200+
}
201+
202+
.stepRow {
203+
display: flex;
204+
align-items: center;
205+
gap: var(--space-4);
206+
padding: var(--space-3);
207+
background-color: rgba(129, 140, 248, 0.05);
208+
border: 1px solid rgba(129, 140, 248, 0.2);
209+
border-radius: var(--radius-md);
210+
flex-wrap: wrap;
211+
}
212+
213+
.stepOp {
214+
font-family: var(--font-mono);
215+
font-size: var(--text-sm);
216+
color: #818cf8;
217+
font-weight: 700;
218+
min-width: 120px;
219+
}
220+
221+
.stepData {
222+
display: flex;
223+
align-items: center;
224+
gap: var(--space-2);
225+
}
226+
227+
.dataLabel {
228+
font-size: var(--text-xs);
229+
color: var(--color-text-muted);
230+
}
231+
232+
.stepData code {
233+
font-size: var(--text-sm);
234+
color: var(--color-text-secondary);
235+
}
236+
237+
.stepArrow {
238+
color: #818cf8;
239+
font-weight: bold;
240+
}

0 commit comments

Comments
 (0)