From 344e0df697e17f752d11cbf535674fa45c8968fb Mon Sep 17 00:00:00 2001 From: Akash Dhruv Date: Wed, 17 Jun 2026 17:06:38 -0500 Subject: [PATCH 1/4] updates for webview fixes --- .../Webview/modern_static/build_page.py | 26 +- .../Webview/modern_static/generator.py | 2 +- .../Webview/modern_static/html_utils.py | 2 + .../backend/Webview/modern_static/style.css | 291 ++++++++++++++---- 4 files changed, 239 insertions(+), 82 deletions(-) diff --git a/FlashXTest/backend/Webview/modern_static/build_page.py b/FlashXTest/backend/Webview/modern_static/build_page.py index c66f6ad..e7f0147 100644 --- a/FlashXTest/backend/Webview/modern_static/build_page.py +++ b/FlashXTest/backend/Webview/modern_static/build_page.py @@ -3,9 +3,11 @@ """ import html +import os import re from pathlib import Path from typing import List, Dict +from urllib.parse import quote as url_quote from .html_utils import page_header, page_header_nobody, page_footer @@ -23,7 +25,7 @@ def generate_build_page_frameset(site_name: str, inv_name: str, build_name: str) def generate_left_frame_html( - site_name: str, inv_name: str, build_name: str, build_dir: Path + site_name: str, inv_name: str, build_name: str, build_dir: Path, build_output_dir: Path ) -> str: """Return HTML for the left frame listing structured sections for a build.""" title = f"{site_name} – {inv_name} – {build_name}" @@ -39,14 +41,17 @@ def generate_left_frame_html( + f"{html.escape(inv_name)}" ) + def _rel_href(file: Path) -> str: + return url_quote(os.path.relpath(file, build_output_dir), safe="/") + # invocation files lines.append("

test.info
test.info
deleted_files
deleted_files

") # Setup @@ -58,7 +63,7 @@ def generate_left_frame_html( call_text = sc.read_text().strip() if so.is_file(): lines.append( - f'

{html.escape(call_text)}

' + f'

{html.escape(call_text)}

' ) else: lines.append(f"

{html.escape(call_text)}

") @@ -73,15 +78,11 @@ def generate_left_frame_html( lines.append("

Compilation

") lines.append("

gmake_call
gmake_call
gmake_output
gmake_output
gmake_error
gmake_error

") if ct.is_file(): lines.append( @@ -138,8 +139,7 @@ def generate_left_frame_html( lines.append("") def _process_li_line(file: Path) -> str: - """A Helper function to build string for a list item.""" - return f'

{html.escape(file.name)}

' + return f'

{html.escape(file.name)}

' lines.append("

{html.escape(title)}

{html.escape(title)}

Date: Wed, 17 Jun 2026 17:30:42 -0500 Subject: [PATCH 2/4] more updates --- .../Webview/modern_static/build_page.py | 12 +++---- .../Webview/modern_static/generator.py | 33 +++++++++---------- .../Webview/modern_static/html_utils.py | 17 +++++----- .../Webview/modern_static/index_page.py | 3 +- .../Webview/modern_static/invocation_page.py | 4 +-- 5 files changed, 35 insertions(+), 34 deletions(-) diff --git a/FlashXTest/backend/Webview/modern_static/build_page.py b/FlashXTest/backend/Webview/modern_static/build_page.py index e7f0147..b4a49f6 100644 --- a/FlashXTest/backend/Webview/modern_static/build_page.py +++ b/FlashXTest/backend/Webview/modern_static/build_page.py @@ -12,10 +12,10 @@ from .html_utils import page_header, page_header_nobody, page_footer -def generate_build_page_frameset(site_name: str, inv_name: str, build_name: str) -> str: +def generate_build_page_frameset(site_name: str, inv_name: str, build_name: str, css_content: str) -> str: """Return a frameset HTML page.""" title = f"{site_name} – {inv_name} – {build_name}" - lines: List[str] = page_header_nobody(title, css_href="../../../style.css") + lines: List[str] = page_header_nobody(title, css_content) lines.append('') lines.append(' ') lines.append(' ') @@ -25,13 +25,13 @@ def generate_build_page_frameset(site_name: str, inv_name: str, build_name: str) def generate_left_frame_html( - site_name: str, inv_name: str, build_name: str, build_dir: Path, build_output_dir: Path + site_name: str, inv_name: str, build_name: str, build_dir: Path, build_output_dir: Path, css_content: str ) -> str: """Return HTML for the left frame listing structured sections for a build.""" title = f"{site_name} – {inv_name} – {build_name}" lines: List[str] = page_header( title, - css_href="../../../style.css", + css_content, base_target="rightframe", body_class="left-frame", ) @@ -211,12 +211,12 @@ def _process_li_line(file: Path) -> str: return "\n".join(lines) -def generate_right_frame_html(site_name: str, inv_name: str, build_name: str) -> str: +def generate_right_frame_html(site_name: str, inv_name: str, build_name: str, css_content: str) -> str: """Return HTML for the right frame initial content.""" title = f"{site_name} – {inv_name} – {build_name}" lines: List[str] = page_header( title, - css_href="../../../style.css", + css_content, body_class="right-frame", ) lines.append("

Select a file from the left to view its contents.

") diff --git a/FlashXTest/backend/Webview/modern_static/generator.py b/FlashXTest/backend/Webview/modern_static/generator.py index e44b08e..250aea4 100644 --- a/FlashXTest/backend/Webview/modern_static/generator.py +++ b/FlashXTest/backend/Webview/modern_static/generator.py @@ -68,8 +68,19 @@ def generate_flashx_testview( output_dir.mkdir(parents=True, exist_ok=False) + # Read CSS once; embed inline in every page so files are self-contained + pkg_dir = Path(__file__).parent + style_src = pkg_dir / "style.css" + css_content = style_src.read_text(encoding="utf-8") if style_src.is_file() else "" + + # Copy JS assets (still needed as external files) + js_src = pkg_dir / "js" + if js_src.is_dir(): + dst_js = output_dir / "js" + shutil.copytree(js_src, dst_js, dirs_exist_ok=True) + # Write overview index.html - index_html = generate_html(board, sites, invocations_sorted, inv_dir_lookup) + index_html = generate_html(board, sites, invocations_sorted, inv_dir_lookup, css_content) (output_dir / "index.html").write_text(index_html, encoding="utf-8") # Write site-combined invocation pages @@ -77,22 +88,10 @@ def generate_flashx_testview( inv_index_dir.mkdir(parents=True, exist_ok=True) for inv_name in invocations_sorted: combined = generate_combined_invocation_page( - inv_name, inv_dir_lookup.get(inv_name, {}), sites + inv_name, inv_dir_lookup.get(inv_name, {}), sites, css_content ) (inv_index_dir / f"{inv_name}.html").write_text(combined, encoding="utf-8") - # Copy shared CSS and JS assets - pkg_dir = Path(__file__).parent - # style.css - style_src = pkg_dir / "style.css" - if style_src.is_file(): - shutil.copy(style_src, output_dir / "style.css") - # js assets - js_src = pkg_dir / "js" - if js_src.is_dir(): - dst_js = output_dir / "js" - shutil.copytree(js_src, dst_js, dirs_exist_ok=True) - # Generate build pages (frameset, left/right) for site_path in site_paths: site_output_dir = output_dir / site_path.name @@ -105,17 +104,17 @@ def generate_flashx_testview( build_output_dir.mkdir(parents=True, exist_ok=True) # Frameset (build_output_dir / "frameset.html").write_text( - generate_build_page_frameset(site_path.name, inv_dir.name, b.name), + generate_build_page_frameset(site_path.name, inv_dir.name, b.name, css_content), encoding="utf-8", ) # Left frame (build_output_dir / "leftframe.html").write_text( - generate_left_frame_html(site_path.name, inv_dir.name, b.name, b, build_output_dir), + generate_left_frame_html(site_path.name, inv_dir.name, b.name, b, build_output_dir, css_content), encoding="utf-8", ) # Right frame (build_output_dir / "rightframe.html").write_text( - generate_right_frame_html(site_path.name, inv_dir.name, b.name), + generate_right_frame_html(site_path.name, inv_dir.name, b.name, css_content), encoding="utf-8", ) diff --git a/FlashXTest/backend/Webview/modern_static/html_utils.py b/FlashXTest/backend/Webview/modern_static/html_utils.py index 3b6845c..199e56e 100644 --- a/FlashXTest/backend/Webview/modern_static/html_utils.py +++ b/FlashXTest/backend/Webview/modern_static/html_utils.py @@ -9,14 +9,17 @@ def zebra_row_class(idx: int) -> str: return "row-alt" if idx % 2 else "row" +def _css_tag(css_content: str) -> str: + return f" " + + def page_header( title: str, - css_href: str, + css_content: str, base_target: Optional[str] = None, body_class: Optional[str] = None, ) -> List[str]: - """Return common HTML header lines including DOCTYPE, head, and opening body. - Optionally set and a CSS class on .""" + """Return common HTML header lines including DOCTYPE, head, and opening body.""" lines: List[str] = [ "", '', @@ -24,10 +27,9 @@ def page_header( ' ', ' ', f" {html.escape(title)}", - f' ', + _css_tag(css_content), "", ] - # opening body with optional class body_attrs = [] if body_class: body_attrs.append(f'class="{body_class}"') @@ -36,13 +38,12 @@ def page_header( body_tag += " " + " ".join(body_attrs) body_tag += ">" lines.append(body_tag) - # optional base target for frames if base_target: lines.append(f'') return lines -def page_header_nobody(title: str, css_href: str) -> List[str]: +def page_header_nobody(title: str, css_content: str) -> List[str]: """Return HTML header lines without opening body (e.g., for frameset pages).""" return [ "", @@ -51,7 +52,7 @@ def page_header_nobody(title: str, css_href: str) -> List[str]: ' ', ' ', f" {html.escape(title)}", - f' ', + _css_tag(css_content), "", ] diff --git a/FlashXTest/backend/Webview/modern_static/index_page.py b/FlashXTest/backend/Webview/modern_static/index_page.py index 6bd7064..7e24a81 100644 --- a/FlashXTest/backend/Webview/modern_static/index_page.py +++ b/FlashXTest/backend/Webview/modern_static/index_page.py @@ -16,11 +16,12 @@ def generate_html( sites: List[str], invocations: List[str], inv_dir_lookup: Dict[str, Dict[str, Path]], + css_content: str, title: str = "FlashXTest Invocations", ) -> str: """Return *index.html* as a single string.""" - lines: List[str] = page_header(title, css_href="style.css") + lines: List[str] = page_header(title, css_content) # dynamic tooltip support: include tooltip script and container lines.append('') diff --git a/FlashXTest/backend/Webview/modern_static/invocation_page.py b/FlashXTest/backend/Webview/modern_static/invocation_page.py index 4dfadb7..e082f25 100644 --- a/FlashXTest/backend/Webview/modern_static/invocation_page.py +++ b/FlashXTest/backend/Webview/modern_static/invocation_page.py @@ -36,7 +36,7 @@ def _generate_site_table_header(site: str) -> List[str]: def generate_combined_invocation_page( - inv_name: str, site_dirs: Dict[str, Path], site_order: List[str] + inv_name: str, site_dirs: Dict[str, Path], site_order: List[str], css_content: str ) -> str: """Produce a page that lists all sites for one invocation with build tables.""" sections: List[str] = [] @@ -91,7 +91,7 @@ def generate_combined_invocation_page( sections.append("") title = f"Invocation {inv_name}" - header = page_header(title, css_href="../style.css") + header = page_header(title, css_content) # Page content: heading, back link, filters, site tables, and init script content = [ f"

{html.escape(title)}

", From 69f8bffb15a6950a896de15f94b7e23ae4ccf8ea Mon Sep 17 00:00:00 2001 From: akashdhruv Date: Wed, 17 Jun 2026 15:41:00 -0700 Subject: [PATCH 3/4] Update meta --- FlashXTest/__meta__.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FlashXTest/__meta__.py b/FlashXTest/__meta__.py index 33e125b..6c5cb44 100644 --- a/FlashXTest/__meta__.py +++ b/FlashXTest/__meta__.py @@ -1,6 +1,6 @@ """Metadata for FlashXTest package""" __pkgname__ = "FlashXTest" -__version__ = "2025.02" +__version__ = "2026.06.b" __authors__ = "The Flash-X Team" __license__ = "MIT License" From 0b8683675733af72d55b20dfbd3a581e503ea91e Mon Sep 17 00:00:00 2001 From: Akash Dhruv Date: Wed, 17 Jun 2026 19:21:57 -0500 Subject: [PATCH 4/4] update webview interface --- .../Webview/modern_static/index_page.py | 54 ++++++---- .../Webview/modern_static/invocation_page.py | 92 +++++++++------- .../modern_static/js/invocation_filter.js | 64 +++++++---- .../Webview/modern_static/js/table_sort.js | 96 +++++++++++++++++ .../backend/Webview/modern_static/status.py | 4 +- .../backend/Webview/modern_static/style.css | 102 ++++++++++++++---- 6 files changed, 317 insertions(+), 95 deletions(-) create mode 100644 FlashXTest/backend/Webview/modern_static/js/table_sort.js diff --git a/FlashXTest/backend/Webview/modern_static/index_page.py b/FlashXTest/backend/Webview/modern_static/index_page.py index 7e24a81..5a5207b 100644 --- a/FlashXTest/backend/Webview/modern_static/index_page.py +++ b/FlashXTest/backend/Webview/modern_static/index_page.py @@ -10,6 +10,8 @@ from .html_utils import zebra_row_class, page_header, page_footer from .status import InvocationStatus, parse_build_status +_STATUS_SORT = {"red": "0", "yellow": "1", "green": "2"} + def generate_html( board: Dict[str, Dict[str, InvocationStatus]], @@ -23,9 +25,9 @@ def generate_html( lines: List[str] = page_header(title, css_content) - # dynamic tooltip support: include tooltip script and container + # Tooltip support lines.append('') - lines.append("") + lines.append("") lines.append('

') lines.append('

') lines.append('

') @@ -33,33 +35,37 @@ def generate_html( lines.append(f"

{html.escape(title)}

") - # Start the table with fixed layout + # Search bar to filter invocation rows by name + lines.append('") + lines.append('') - # header row + # Header row lines.append(" ") lines.append(' ') for site in sites: lines.append(f" ") lines.append(" ") - # body rows + + # Body rows for idx, inv_name in enumerate(invocations): lines.append(f' ') - # dynamic hover for invocation inv_href = f"invocations/{html.escape(inv_name)}.html" - # header/body for tooltip - # Build execution summary across all sites - # Collect all builds for this invocation - builds = [] # list of (site, build_path) + # Build tooltip summary + builds = [] for site in sites: - inv_paths = inv_dir_lookup.get(inv_name, {}) - site_inv = inv_paths.get(site) + site_inv = inv_dir_lookup.get(inv_name, {}).get(site) if site_inv and site_inv.is_dir(): for b in site_inv.iterdir(): if b.is_dir(): builds.append((site, b)) total_tests = len(builds) - failing = [] # list of (site, build_name, exit_msg) + failing = [] for site, b in builds: status, exit_msg = parse_build_status(b) if status.colour != "green": @@ -69,12 +75,13 @@ def generate_html( else: header_text = f"All {total_tests} tests completed successfully" header_js = json.dumps(header_text) - body_lines = [f"{name} - {msg}" for _, name, msg in failing] - body_js = json.dumps("
".join(body_lines)) + body_js = json.dumps("
".join(f"{name} - {msg}" for _, name, msg in failing)) + lines.append( - f' " + f' " ) for site in sites: @@ -82,8 +89,17 @@ def generate_html( if status is None: lines.append(" ") else: - lines.append(f' ') + sort_val = _STATUS_SORT.get(status.colour, "9") + lines.append( + f' " + ) lines.append(" ") + lines.append("

Invocation	{html.escape(site)}
" - + f"{html.escape(inv_name)}	' + f'" + f"{html.escape(inv_name)}		{status.emoji}	' + f"{status.emoji}

") + + # Search filter script + lines.append('') + lines.extend(page_footer()) return "\n".join(lines) diff --git a/FlashXTest/backend/Webview/modern_static/invocation_page.py b/FlashXTest/backend/Webview/modern_static/invocation_page.py index e082f25..b378c53 100644 --- a/FlashXTest/backend/Webview/modern_static/invocation_page.py +++ b/FlashXTest/backend/Webview/modern_static/invocation_page.py @@ -9,62 +9,73 @@ from .html_utils import zebra_row_class, page_header, page_footer from .status import parse_build_status +# Maps status colour to a numeric sort value so dropdowns produce a +# consistent order (worst → best: red=0, yellow=1, green=2). +_STATUS_SORT = {"red": "0", "yellow": "1", "green": "2"} + def _generate_site_table_header(site: str) -> List[str]: - """A helper function to generate the header for a site table.""" - content = [ + """Generate the filter controls header for one site section.""" + return [ '

', - f"

{html.escape(site)}

", - '

', - ' Status: ", - ' Error Type: ", - "

", + f"

{html.escape(site)}

", + '

', + ' Status:', + ' ', + ' ", + " ", + " ", + ' Error Type:', + ' ', + ' ", + " ", + " ", + "

", "

", # close site-header ] - return content def generate_combined_invocation_page( inv_name: str, site_dirs: Dict[str, Path], site_order: List[str], css_content: str ) -> str: - """Produce a page that lists all sites for one invocation with build tables.""" + """Produce a page listing all sites for one invocation with filterable build tables.""" sections: List[str] = [] for site in site_order: inv_dir = site_dirs.get(site) if not inv_dir: continue - # Section per site with heading and its own filter controls - sections.append('

') - # Generate the header for the site table + sections.append('

') sections.extend(_generate_site_table_header(site)) - # Build table with fixed layout and column classes sections.append('') sections.append(" ") sections.append(' ') sections.append(' ') sections.append(' ') sections.append(" ") + builds = sorted( [d for d in inv_dir.iterdir() if d.is_dir()], key=lambda p: p.name ) for idx, b in enumerate(builds): status, exit_msg = parse_build_status(b) - # link to detailed build frameset page - rel_link = f"../{html.escape(site)}/{html.escape(inv_name)}/{html.escape(b.name)}/frameset.html" - # Determine error types for filtering + rel_link = ( + f"../{html.escape(site)}/{html.escape(inv_name)}" + f"/{html.escape(b.name)}/frameset.html" + ) + # Determine error types for the type-filter dropdown err_types = [] lm = exit_msg.lower() if "setup" in lm: @@ -76,31 +87,38 @@ def generate_combined_invocation_page( if "testing" in lm: err_types.append("testing") types_str = " ".join(err_types) - # Table row with data attributes and column classes + sort_val = _STATUS_SORT.get(status.colour, "9") + sections.extend( [ - f' ', - f' ', - f' ', + f' ', + f' ", + f' ', f' ', " ", ] ) + sections.append("

Build	Status	Summary
{html.escape(b.name)}	{status.emoji}
' + f'' + f"{html.escape(b.name)}	{status.emoji}	{html.escape(exit_msg)}

") - # Close the site section - sections.append("

") + # "No results" message shown by JS when all rows are filtered out + sections.append('

No builds match the selected filters.

') + sections.append("

") # close site-section title = f"Invocation {inv_name}" header = page_header(title, css_content) - # Page content: heading, back link, filters, site tables, and init script content = [ f"

{html.escape(title)}

", '

← Back to overview

', *sections, - "", '', - "", + "", ] footer = page_footer() - return "\n".join(header + content + footer) diff --git a/FlashXTest/backend/Webview/modern_static/js/invocation_filter.js b/FlashXTest/backend/Webview/modern_static/js/invocation_filter.js index 5dfa576..90fc90c 100644 --- a/FlashXTest/backend/Webview/modern_static/js/invocation_filter.js +++ b/FlashXTest/backend/Webview/modern_static/js/invocation_filter.js @@ -1,36 +1,62 @@ /** * invocation_filter.js - * Client-side filtering for per-site build tables. + * Client-side filtering for per-site build tables using the Status and Error + * Type dropdown selects. Each .site-section card is handled independently. */ -(function() { +(function () { + 'use strict'; + function initInvocationFilter() { - // For each site section, bind filters to its table var sections = document.querySelectorAll('.site-section'); - sections.forEach(function(section) { + + sections.forEach(function (section) { var statusFilter = section.querySelector('.status-filter'); - var typeFilter = section.querySelector('.type-filter'); - var table = section.querySelector('table.inv-table'); + var typeFilter = section.querySelector('.type-filter'); + var table = section.querySelector('table.inv-table'); + var noResultsMsg = section.querySelector('.no-results-msg'); + if (!statusFilter || !typeFilter || !table) return; + function applyFilter() { var status = statusFilter.value; - var type = typeFilter.value; - var rows = table.querySelectorAll('tr[data-status]'); - rows.forEach(function(row) { - var rowStatus = row.getAttribute('data-status'); - var rowTypes = row.getAttribute('data-errortypes') || ''; - var types = rowTypes.split(' ').filter(function(t) { return t; }); - var statusMatch = (status === 'all' || rowStatus === status); - var typeMatch = (type === 'all' || types.indexOf(type) !== -1); - row.style.display = (statusMatch && typeMatch) ? '' : 'none'; + var type = typeFilter.value; + var rows = table.querySelectorAll('tr[data-status]'); + var visibleCount = 0; + var altToggle = 0; + + rows.forEach(function (row) { + var rowStatus = row.getAttribute('data-status') || ''; + var rowTypes = (row.getAttribute('data-errortypes') || '').split(' ') + .filter(function (t) { return t; }); + + var statusOk = (status === 'all' || rowStatus === status); + var typeOk = (type === 'all' || rowTypes.indexOf(type) !== -1); + var show = statusOk && typeOk; + + row.style.display = show ? '' : 'none'; + + if (show) { + // Re-apply zebra stripes to visible rows only + row.classList.remove('row', 'row-alt'); + row.classList.add(altToggle % 2 === 0 ? 'row' : 'row-alt'); + altToggle++; + visibleCount++; + } }); + + // Show "no results" message when every row is filtered out + if (noResultsMsg) { + noResultsMsg.style.display = (visibleCount === 0) ? 'block' : 'none'; + } } - // Bind change events + statusFilter.addEventListener('change', applyFilter); typeFilter.addEventListener('change', applyFilter); - // Initial filtering + + // Apply on load so the initial selection is respected applyFilter(); }); } - // Expose init function + window.initInvocationFilter = initInvocationFilter; -})(); +}()); diff --git a/FlashXTest/backend/Webview/modern_static/js/table_sort.js b/FlashXTest/backend/Webview/modern_static/js/table_sort.js new file mode 100644 index 0000000..dc93403 --- /dev/null +++ b/FlashXTest/backend/Webview/modern_static/js/table_sort.js @@ -0,0 +1,96 @@ +/** + * table_sort.js + * Click-to-sort for th[data-sortable] headers and text search on the index page. + */ +(function () { + 'use strict'; + + /* Return the sort key for a cell: data-sort-value attr, then trimmed text. */ + function cellKey(cell) { + var v = cell.getAttribute('data-sort-value'); + return (v !== null ? v : (cell.textContent || '')).trim().toLowerCase(); + } + + /* Re-apply zebra stripes after sorting; skip hidden rows. */ + function restripe(rows) { + var vis = 0; + rows.forEach(function (row) { + row.classList.remove('row', 'row-alt'); + if (row.style.display !== 'none') { + row.classList.add(vis % 2 === 0 ? 'row' : 'row-alt'); + vis++; + } + }); + } + + function sortTable(th) { + var table = th.closest('table'); + if (!table) return; + + var headers = Array.from(th.parentElement.children); + var colIdx = headers.indexOf(th); + var prevDir = th.getAttribute('aria-sort'); + var dir = prevDir === 'ascending' ? 'descending' : 'ascending'; + + headers.forEach(function (h) { h.removeAttribute('aria-sort'); }); + th.setAttribute('aria-sort', dir); + + var rows = Array.from(table.querySelectorAll('tr')).filter(function (r) { + return r.classList.contains('row') || r.classList.contains('row-alt'); + }); + + rows.sort(function (a, b) { + var ak = cellKey(a.children[colIdx] || {}); + var bk = cellKey(b.children[colIdx] || {}); + var cmp = ak < bk ? -1 : ak > bk ? 1 : 0; + return dir === 'ascending' ? cmp : -cmp; + }); + + var parent = table.querySelector('tbody') || table; + rows.forEach(function (row) { parent.appendChild(row); }); + restripe(rows); + } + + /* Wire up all sortable headers in the document. */ + function initTableSort() { + document.querySelectorAll('th[data-sortable]').forEach(function (th) { + th.addEventListener('click', function () { sortTable(th); }); + }); + } + + /* Live text search on the index page invocation list. */ + function initInvocationSearch() { + var input = document.getElementById('invocationSearch'); + if (!input) return; + input.addEventListener('input', function () { + var q = input.value.trim().toLowerCase(); + var rows = document.querySelectorAll( + '.index-table tr.row, .index-table tr.row-alt' + ); + var vis = 0; + rows.forEach(function (row) { + var text = (row.textContent || '').toLowerCase(); + var show = !q || text.indexOf(q) !== -1; + row.style.display = show ? '' : 'none'; + if (show) { + row.classList.remove('row', 'row-alt'); + row.classList.add(vis % 2 === 0 ? 'row' : 'row-alt'); + vis++; + } + }); + }); + } + + window.initTableSort = initTableSort; + window.initInvocationSearch = initInvocationSearch; + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', function () { + initTableSort(); + initInvocationSearch(); + }); + } else { + initTableSort(); + initInvocationSearch(); + } +}()); diff --git a/FlashXTest/backend/Webview/modern_static/status.py b/FlashXTest/backend/Webview/modern_static/status.py index 13579dc..9ccb57c 100644 --- a/FlashXTest/backend/Webview/modern_static/status.py +++ b/FlashXTest/backend/Webview/modern_static/status.py @@ -3,7 +3,7 @@ """ from pathlib import Path -from typing import List +from typing import List, Tuple class InvocationStatus: @@ -68,7 +68,7 @@ def classify_invocation(inv_dir: Path) -> InvocationStatus: return InvocationStatus(colour=colour) -def parse_build_status(build_dir: Path) -> tuple[InvocationStatus, str]: +def parse_build_status(build_dir: Path) -> Tuple[InvocationStatus, str]: """Return (InvocationStatus, exit_msg) for a single build directory.""" errors_file = build_dir / "errors" if not errors_file.exists(): diff --git a/FlashXTest/backend/Webview/modern_static/style.css b/FlashXTest/backend/Webview/modern_static/style.css index 3659645..11455f7 100644 --- a/FlashXTest/backend/Webview/modern_static/style.css +++ b/FlashXTest/backend/Webview/modern_static/style.css @@ -45,6 +45,33 @@ a:hover { text-decoration: underline; color: var(--primary-dark); } p { margin: 0.5rem 0; } +/* -- Toolbar (search bar row) ----------------- */ +.toolbar { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1rem; + flex-wrap: wrap; +} + +.search-bar { + font-size: 0.875rem; + font-family: inherit; + color: var(--text); + padding: 6px 10px; + border: 1px solid var(--border); + border-radius: 4px; + background: var(--surface); + width: 280px; + transition: border-color 0.15s, box-shadow 0.15s; +} +.search-bar::placeholder { color: var(--text-muted); } +.search-bar:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(21, 101, 160, .15); +} + /* -- Tables ----------------------------------- */ table { width: 100%; @@ -68,12 +95,23 @@ th { font-weight: 600; letter-spacing: 0.02em; border-color: var(--primary-dark); + white-space: nowrap; + position: sticky; + top: 0; + z-index: 2; } /* zebra rows */ .row-alt { background: #f6f9fc; } -/* link cells – remove td padding so the anchor fills the full cell */ +/* subtle row hover */ +tr.row:hover td, +tr.row-alt:hover td { + background: var(--primary-light); + transition: background 0.1s; +} + +/* link cells – anchor fills the full cell */ .col-invocation, .col-build { text-align: left; @@ -95,9 +133,9 @@ th { } /* -- Status colours --------------------------- */ -.green { background: var(--green-bg); color: var(--green-text); } -.yellow { background: var(--yellow-bg); color: var(--yellow-text); } -.red { background: var(--red-bg); color: var(--red-text); } +.green { background: var(--green-bg); color: var(--green-text); font-weight: 600; } +.yellow { background: var(--yellow-bg); color: var(--yellow-text); font-weight: 600; } +.red { background: var(--red-bg); color: var(--red-text); font-weight: 600; } /* -- Index page ------------------------------- */ .index-table { table-layout: fixed; } @@ -148,30 +186,58 @@ th { white-space: nowrap; } -/* Styled select/dropdown */ -.filters select { +/* -- Select wrapper: CSS-only custom arrow ---- */ +.select-wrap { + position: relative; + display: inline-block; +} + +/* The CSS triangle arrow */ +.select-wrap::after { + content: ''; + position: absolute; + right: 9px; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 6px solid var(--text-muted); + pointer-events: none; +} + +.select-wrap select { font-size: 0.85rem; font-family: inherit; color: var(--text); - padding: 4px 28px 4px 8px; + padding: 5px 30px 5px 9px; border: 1px solid var(--border); border-radius: 4px; - background-color: var(--surface); - /* custom caret arrow */ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2357606a'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 8px center; + background: var(--surface); + /* Remove native arrow so only our CSS one is visible */ -webkit-appearance: none; + -moz-appearance: none; appearance: none; cursor: pointer; - transition: border-color 0.12s; + transition: border-color 0.12s, box-shadow 0.12s; + min-width: 110px; } -.filters select:hover { border-color: var(--primary); } -.filters select:focus { - outline: 2px solid var(--primary); - outline-offset: 1px; +.select-wrap select:hover { border-color: var(--primary); } +.select-wrap select:focus { + outline: none; border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(21, 101, 160, .15); +} + +/* -- "No results" banner ---------------------- */ +.no-results-msg { + display: none; + padding: 0.6rem 1rem; + font-size: 0.85rem; + color: var(--text-muted); + font-style: italic; } /* -- Invocation table ------------------------- */ @@ -232,7 +298,7 @@ th { padding: 4px 6px; } -/* -- Build page – right frame (placeholder) -- */ +/* -- Build page – right frame ----------------- */ .right-frame { padding: 1.5rem 2rem; font-size: 0.9rem;