Skip to content

Adjust web layout: source-first row and 3-column analysis grid #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
iritkatriel wants to merge 7 commits into from
Closed

Adjust web layout: source-first row and 3-column analysis grid #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
82fbbb9
Rework web app layout to prioritize source panel.
iritkatriel Apr 23, 2026
01cdb0a
Update web driver tests for structured view output.
iritkatriel Apr 23, 2026
cbc79a9
Move source panel Run button closer to title.
iritkatriel Apr 23, 2026
4319246
Place Run button before Source title in panel header.
iritkatriel Apr 23, 2026
d964375
Reduce source panel width on large web layouts.
iritkatriel Apr 23, 2026
11d9593
Split source and run controls into separate first-row panels.
iritkatriel Apr 23, 2026
9ca2447
Keep source and run panels aligned at medium widths.
iritkatriel Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions tests/test_web_driver.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,25 @@
class WebDriverTests(unittest.TestCase):
def test_view_tokens_includes_token_names(self) -> None:
rendered = driver.view_tokens("x = 1\n")
self.assertIn("NAME", rendered)
self.assertIn("NUMBER", rendered)
self.assertIn("NAME", rendered["text"])
self.assertIn("NUMBER", rendered["text"])
self.assertEqual(len(rendered["lines"]), len(rendered["text"].splitlines()))

def test_view_ast_returns_module_dump(self) -> None:
rendered = driver.view_ast("x = 1\n", optimize=False)
self.assertIn("Module(", rendered)
self.assertIn("Assign(", rendered)
self.assertIn("Module(", rendered["text"])
self.assertIn("Assign(", rendered["text"])
self.assertEqual(len(rendered["lines"]), len(rendered["text"].splitlines()))

def test_view_pseudo_smoke(self) -> None:
rendered = driver.view_pseudo("def f(x):\n return x\n\nprint(f(42))\n")
self.assertIn("LOAD_CONST", rendered)
self.assertIn("LOAD_CONST", rendered["text"])
self.assertEqual(len(rendered["lines"]), len(rendered["text"].splitlines()))

def test_view_compiled_smoke(self) -> None:
rendered = driver.view_compiled("x = 1\n")
self.assertIn("LOAD_CONST", rendered)
self.assertIn("LOAD_CONST", rendered["text"])
self.assertEqual(len(rendered["lines"]), len(rendered["text"].splitlines()))

def test_instruction_items_supports_list_and_get_instructions(self) -> None:
inst = dis.Instruction(
Expand Down
60 changes: 55 additions & 5 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,22 @@
padding: 14px;
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
grid-auto-rows: minmax(320px, 1fr);
grid-template-columns: repeat(3, minmax(320px, 1fr));
grid-auto-rows: minmax(320px, auto);
}
@media (max-width: 1200px) {
main {
grid-template-columns: repeat(2, minmax(320px, 1fr));
}
.panel.source-panel { grid-column: span 1; }
.panel.run-panel { grid-column: span 1; }
}
@media (max-width: 860px) {
main {
grid-template-columns: minmax(320px, 1fr);
}
.panel.source-panel { grid-column: 1 / -1; }
.panel.run-panel { grid-column: 1 / -1; }
}
.panel {
display: flex;
Expand All @@ -96,6 +110,7 @@
min-height: 320px;
}
.panel.hidden { display: none; }
.panel.source-panel { grid-column: span 2; }
.panel > h2 {
margin: 0;
padding: 8px 12px;
Expand All @@ -108,6 +123,31 @@
letter-spacing: 0.04em;
text-transform: uppercase;
}
.panel-titlebar {
margin: 0;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
background: #1b212a;
border-bottom: 1px solid var(--panel-border);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.panel-titlebar h2 {
margin: 0;
font-size: 12px;
font-weight: 600;
color: #f0f4f8;
}
.run-controls {
display: flex;
flex: 1;
align-items: flex-start;
justify-content: center;
padding: 12px;
}
.panel > .content {
flex: 1;
overflow: auto;
Expand Down Expand Up @@ -142,6 +182,9 @@
min-height: 0;
}
.ace_editor { font-size: 12px !important; }
.source-panel #editor {
min-height: 360px;
}
.banner {
padding: 8px 16px;
color: var(--error);
Expand All @@ -167,7 +210,6 @@
<h1><strong>codoscope</strong> — <span id="pyver">loading CPython…</span></h1>
<span class="status" id="status"></span>
<span class="spacer"></span>
<button id="run" disabled>Run</button>
<div class="toggles" id="toggles">
<label><input type="checkbox" data-view="source" checked><span>Source</span></label>
<label><input type="checkbox" data-view="tokens" checked><span>Tokens</span></label>
Expand All @@ -183,13 +225,21 @@ <h1><strong>codoscope</strong> — <span id="pyver">loading CPython…</span></h
automatically once the cross-origin-isolation service worker installs.
</div>
<main id="grid">
<section class="panel" data-view="source">
<h2>Source</h2>
<section class="panel source-panel" data-view="source">
<div class="panel-titlebar">
<h2>Source</h2>
</div>
<div id="editor">def f(x):
return x * 2 + 10 + 1

print(f(42))</div>
</section>
<section class="panel run-panel">
<h2>Actions</h2>
<div class="run-controls">
<button id="run" disabled>Run</button>
</div>
</section>
<section class="panel" data-view="tokens">
<h2>Tokens</h2><pre class="content"></pre>
</section>
Expand Down
Loading