Repository navigation
Expand file tree
/
Copy pathdata-structures.html
More file actions
381 lines (369 loc) · 20 KB
/
Copy pathdata-structures.html
File metadata and controls
381 lines (369 loc) · 20 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
<!doctype html>
<!--
The DSA workspace is a separate document so its curriculum, persistence, and
future visualizations cannot crowd or silently alter the Python workspace.
-->
<html lang="en">
<head>
<!-- UTF-8 safely supports interface symbols and Python source text. -->
<meta charset="UTF-8" />
<!-- The real viewport width drives responsive laptop and mobile layouts. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Search and link previews identify the page as an honest foundation preview. -->
<meta
name="description"
content="Prepare and study Python data structures and algorithms in a dedicated Code Explorer workspace."
/>
<!-- Native controls may use either palette because both themes are supported. -->
<meta name="color-scheme" content="dark light" />
<!-- A page-specific title distinguishes this workspace in tabs and bookmarks. -->
<title>Data Structures and Algorithms | Code Explorer</title>
<!-- The shared terminal icon preserves project identity. -->
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<!-- CodeMirror loads through esm.sh and the local worker loads pinned Pyodide from jsDelivr. -->
<link rel="preconnect" href="https://esm.sh" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<!-- The synchronized version query prevents stale cross-workspace styling. -->
<link rel="stylesheet" href="styles.css?v=20260728-35" />
</head>
<body class="dsa-page">
<!-- The shared decorative layer never enters the accessibility tree. -->
<div class="ambient-grid" aria-hidden="true"></div>
<!-- This header keeps page identity, status, theme, guide, and source access visible. -->
<header class="site-header">
<!-- A normal link returns to the learning-path choice without requiring JavaScript. -->
<a class="brand" href="index.html" aria-label="Code Explorer home">
<span class="brand-mark" aria-hidden="true">>_</span>
<span>CODE EXPLORER</span>
</a>
<!-- Named controls remain understandable without recognizing icons. -->
<div class="header-actions">
<!-- JavaScript changes both dot class and text after the editor foundation is ready. -->
<span class="runtime-status" id="runtimeStatus">
<span class="status-dot"></span>
<span id="runtimeLabel">Loading Python</span>
</span>
<!-- The visible label says which theme the button will activate. -->
<button class="icon-button theme-button" id="themeButton" type="button" aria-label="Switch to dark mode">
<span id="themeLabel">Dark mode</span>
</button>
<!-- This workspace-specific guide never redirects learners into the Python guide. -->
<a
class="icon-button guide-button"
href="https://github.com/amanalip/code-explorer/blob/main/README_DSA.md"
target="_blank"
rel="noreferrer"
aria-label="Open the data structures and algorithms tool guide in a new tab"
>
Tool Guide
</a>
<!-- The repository link keeps a complete accessible name around its visual mark. -->
<a class="icon-button" href="https://github.com/amanalip/code-explorer" target="_blank" rel="noreferrer" aria-label="Open Code Explorer on GitHub">
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.65 7.65 0 0 1 8 4.58c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
</svg>
</a>
</div>
</header>
<!-- The main region owns the independent source and learning-view foundation. -->
<main>
<section class="workspace dsa-workspace" aria-label="Python data structures and algorithms workspace">
<!-- Heading copy explains the stable learner purpose without release-management labels. -->
<div class="workspace-heading">
<div>
<a class="back-button" href="index.html">← Home</a>
<h1>Data structures and algorithms workspace</h1>
<p class="dsa-heading-copy">
Run and replay reviewed foundations, structures, graphs, recursive calls,
optimization states, bit masks, and mathematical invariants. Pasted Python
remains welcome with honest evidence limits.
</p>
</div>
<!-- Catalog, study comments, and tracing are enabled only by their verified state. -->
<div class="workspace-actions">
<button class="text-button" id="dsaExamplesButton" type="button">
Examples
</button>
<button class="text-button learning-comments-button" id="dsaLearningCommentsButton" type="button" disabled>
Learning comments
</button>
<!-- Run remains unavailable until CodeMirror or its textarea fallback has finished mounting. -->
<button class="primary-button compact" id="dsaRunButton" type="button" disabled>
Run trace
</button>
</div>
</div>
<!-- Two bounded columns place source beside the eighteen-view learning shell. -->
<div class="dsa-workspace-grid">
<!-- The DSA editor has its own source key and does not overwrite workspace.html. -->
<section class="panel editor-panel" id="dsaEditorPanel">
<div class="panel-header">
<div>
<span class="panel-index">01</span>
<span class="panel-title">DSA PYTHON SOURCE</span>
</div>
<!-- Implemented presentation actions remain distinct from unavailable trace actions. -->
<div class="editor-header-tools">
<button class="editor-tool-button" id="dsaWrapButton" type="button" aria-pressed="true">Wrap on</button>
<button
class="editor-tool-button automatic-comments-toggle"
id="dsaAutomaticCommentsButton"
type="button"
aria-pressed="false"
disabled
title="Automatic comments require a completed trace"
>
Automatic comments off
</button>
<label class="editor-font-control" for="dsaFontSizeSelect">
<span>Font</span>
<select id="dsaFontSizeSelect" aria-label="DSA editor font size">
<option value="12">12 px</option>
<option value="14" selected>14 px</option>
<option value="16">16 px</option>
<option value="18">18 px</option>
<option value="20">20 px</option>
<option value="22">22 px</option>
</select>
</label>
<!-- Clipboard actions remain disabled until an enhanced or fallback editor owns source. -->
<button class="editor-tool-button editor-clipboard-button" id="dsaCopyButton" type="button" disabled>Copy</button>
<button class="editor-tool-button editor-clipboard-button" id="dsaPasteButton" type="button" disabled>Paste</button>
<span class="file-label">main.py</span>
</div>
</div>
<!--
The selected reviewed question remains visible while its source is
studied or edited. Pasted and independently written source never
receives invented curriculum wording.
-->
<section
class="selected-program-question hidden"
id="dsaSelectedProgramQuestion"
aria-labelledby="dsaSelectedProgramQuestionTitle"
>
<span>Selected question</span>
<strong id="dsaSelectedProgramQuestionTitle"></strong>
<p id="dsaSelectedProgramQuestionDescription"></p>
</section>
<!-- The reusable controller mounts CodeMirror or a native fallback here. -->
<div class="editor-shell" id="dsaEditorShell">
<div id="dsaEditor" aria-label="DSA Python code editor"></div>
<!--
The read-only teaching copy replaces only the editor surface.
Its IDE chrome, line numbers, note bands, and status text remain
presentation only and never enter learner source or copied code.
-->
<section
class="dsa-automatic-preview hidden"
id="dsaAutomaticPreview"
aria-label="Read-only automatically commented Python"
>
<div class="learning-comments-editor-chrome" aria-hidden="true">
<span class="learning-editor-lights"><i></i><i></i><i></i></span>
<span class="learning-editor-tab"><b>PY</b> main.py <em>with DSA notes</em></span>
<span class="learning-editor-mode">Read only</span>
</div>
<div
class="learning-comments-preview"
id="dsaAutomaticPreviewDocument"
tabindex="0"
role="region"
aria-label="Automatically commented DSA Python preview"
></div>
<div class="learning-comments-status" aria-hidden="true">
<span>Python 3</span>
<span id="dsaAutomaticLineCount">0 lines</span>
<span>Original source unchanged</span>
</div>
</section>
</div>
<!-- Statistics always describe original source, never future presentation overlays. -->
<div class="editor-footer">
<span id="dsaCodeStats">0 lines</span>
<span>Python 3 · local browser trace</span>
</div>
</section>
<!-- The learning shell proves navigation and language before runtime rendering begins. -->
<section class="panel story-panel dsa-learning-panel">
<!-- Four areas are generated from one validated contract. -->
<nav class="learning-mode-nav" id="dsaAreaNav" aria-label="DSA learning area"></nav>
<!-- Tabs stay on one horizontal row at desktop widths and scroll only on narrow screens. -->
<div class="panel-header tabs-header">
<div class="panel-tabs dsa-view-tabs" id="dsaViewTabs" role="tablist" aria-label="DSA learning view"></div>
<span class="step-count" id="dsaStepCount">STEP 00 / 00</span>
</div>
<!--
The selected result owns bounded mouse, touch, and keyboard scrolling.
A focusable tab panel lets keyboard learners use Page Up, Page Down,
Home, End, and arrow keys without moving the complete page.
-->
<div
class="dsa-view-stage"
id="dsaViewStage"
role="tabpanel"
tabindex="0"
aria-label="Selected DSA learning view"
></div>
</section>
<!-- Playback controls navigate the completed recording without rerunning Python. -->
<section class="panel dsa-playback-panel" aria-label="DSA trace playback">
<div class="playback-controls dsa-playback-controls">
<button class="control-button" id="dsaPreviousButton" type="button" disabled aria-label="Previous DSA trace step">←</button>
<button id="dsaPlayButton" class="play-button" type="button" disabled aria-label="Play DSA trace">▶</button>
<button class="control-button" id="dsaNextButton" type="button" disabled aria-label="Next DSA trace step">→</button>
<button class="control-button restart-button" id="dsaRestartButton" type="button" disabled aria-label="Restart DSA trace">↺</button>
</div>
<div class="progress-area dsa-progress-area">
<input id="dsaTimeline" type="range" min="0" max="0" value="0" disabled aria-label="DSA execution step" />
<div class="progress-labels"><span>START</span><span id="dsaProgressLabel">0%</span><span>END</span></div>
</div>
<label class="speed-control" for="dsaSpeedSelect">
<span>SPEED</span>
<select id="dsaSpeedSelect">
<option value="900">0.5x</option>
<option value="520" selected>1x</option>
<option value="260">2x</option>
</select>
</label>
</section>
<!-- Console output is reconstructed from the selected recorded step. -->
<section class="panel dsa-console-panel" aria-labelledby="dsaConsoleTitle">
<div class="panel-header">
<div>
<span class="panel-index">02</span>
<span class="panel-title" id="dsaConsoleTitle">CONSOLE OUTPUT</span>
</div>
<button class="clear-output" id="dsaClearOutputButton" type="button">Clear view</button>
</div>
<pre id="dsaConsoleOutput">// Output will appear here</pre>
</section>
</div>
</section>
</main>
<!-- Ownership stays visible without competing with the workspace. -->
<footer class="site-footer">
<small>© 2026 Aman Ali Pogaku</small>
</footer>
<!-- The DSA catalog uses vertical section navigation and independently scrolling cards. -->
<dialog class="examples-dialog dsa-examples-dialog" id="dsaExamplesDialog">
<div class="dialog-header">
<div>
<span class="eyebrow"><span></span> DSA curriculum</span>
<h2>Explore 535 reviewed programs</h2>
<p class="dialog-intro">Follow the section order or open any implemented program directly.</p>
</div>
<button class="dialog-close" id="dsaCloseExamplesButton" type="button" aria-label="Close DSA examples">×</button>
</div>
<!--
The DSA curriculum explorer separates section navigation, program
selection, and full reviewed context so 535 records remain readable.
-->
<div class="example-browser-body" id="dsaExampleBrowserBody">
<aside class="example-browser-toolbar" aria-label="DSA curriculum sections">
<!--
Search stays in browser memory and composes with the active section.
Reviewed program information, metadata, complexity, and source are indexed.
-->
<div class="example-search">
<label for="dsaExampleSearchInput">Search programs</label>
<input
id="dsaExampleSearchInput"
type="search"
placeholder="ID, algorithm, structure, or code"
autocomplete="off"
spellcheck="false"
aria-describedby="dsaExampleSearchHelp"
/>
<span id="dsaExampleSearchHelp">Use more words to narrow the results.</span>
</div>
<span class="example-curriculum-label">Implemented order</span>
<div class="example-filters" id="dsaExampleFilters" role="group" aria-label="Filter DSA programs"></div>
</aside>
<!-- Program rows update the preview without changing the editor. -->
<section class="example-results-pane" aria-label="DSA curriculum programs">
<div class="example-results-header">
<div>
<span>Program library</span>
<strong>Choose a lesson to inspect</strong>
</div>
<span class="example-count" id="dsaExampleCount" role="status" aria-live="polite"></span>
</div>
<div class="example-grid dsa-example-grid" id="dsaExampleGrid"></div>
</section>
<!-- The explicit preview action is the only control that loads source. -->
<aside class="example-preview dsa-example-preview" id="dsaExamplePreview" aria-label="Selected DSA program preview" aria-live="polite"></aside>
</div>
</dialog>
<!-- The study-copy dialog keeps generated comments separate from editable source. -->
<dialog class="learning-comments-dialog dsa-comments-dialog" id="dsaCommentsDialog">
<div class="dialog-header learning-comments-header">
<div>
<span class="eyebrow"><span></span> Trace-powered study copy</span>
<div class="learning-comments-title-row">
<h2>DSA Learning Comments</h2>
<span class="learning-comments-readonly">Read only</span>
</div>
</div>
<button class="dialog-close" id="dsaCloseCommentsButton" type="button" aria-label="Close DSA learning comments">×</button>
</div>
<!--
The shared toolbar gives DSA learners the same detail control as the
Python workspace while explicitly separating evidence and curriculum context.
-->
<div class="learning-comments-toolbar">
<label for="dsaCommentDetail">
<span>Comment detail</span>
<select id="dsaCommentDetail">
<option value="essential">Essential</option>
<option value="guided" selected>Guided</option>
<option value="detailed">Detailed</option>
</select>
</label>
<div class="learning-comments-toolbar-copy">
<!-- The three-part legend prevents reviewed guidance from looking observed. -->
<span class="learning-comments-legend dsa-comments-legend" aria-label="DSA preview legend">
<span><i class="learning-legend-note"></i> Syntax or trace note</span>
<span><i class="learning-legend-curriculum"></i> Curriculum context</span>
<span><i class="learning-legend-source"></i> Python source</span>
</span>
<p id="dsaCommentsSummary">Run a trace to generate conservative Python notes and any exact reviewed context.</p>
</div>
</div>
<!-- The IDE-like shell is a safe presentation layer around the exact generated document. -->
<section class="learning-comments-editor dsa-comment-preview-shell" aria-label="Read-only DSA commented Python study editor">
<div class="learning-comments-editor-chrome" aria-hidden="true">
<span class="learning-editor-lights"><i></i><i></i><i></i></span>
<span class="learning-editor-tab"><b>PY</b> main.py <em>with DSA notes</em></span>
<span class="learning-editor-mode">Study view</span>
</div>
<div
class="learning-comments-preview"
id="dsaCommentPreview"
tabindex="0"
role="region"
aria-label="Commented DSA Python preview"
></div>
<div class="learning-comments-status" aria-hidden="true">
<span>Python 3</span>
<span id="dsaCommentLineCount">0 lines</span>
<span>UTF-8</span>
<span>LF</span>
<span>DSA notes visible</span>
</div>
</section>
<!-- Copy and replacement now share the visible, bounded Python dialog footer. -->
<div class="learning-comments-actions">
<p><strong>Your original stays unchanged.</strong> Replacing the editor requires confirmation.</p>
<div>
<button class="secondary-button" id="dsaCopyCommentsButton" type="button">Copy commented code</button>
<button class="primary-button compact" id="dsaReplaceCommentsButton" type="button">Replace editor</button>
</div>
</div>
</dialog>
<!-- Clipboard and fallback-editor messages use a polite non-modal status region. -->
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<!-- One version keeps this page aligned with its contracts and shared modules. -->
<script type="module" src="dsa-app.js?v=20260728-35"></script>
</body>
</html>