diff --git a/ChangeLog b/ChangeLog index 4af33522..54b1340f 100644 --- a/ChangeLog +++ b/ChangeLog @@ -14,6 +14,9 @@ ## Interface and handling +- refine GUI seed and CSV control widths, filter examples by task, cap result + table height and use dark active tabs for additional output views (PR #303 review) + - compact and left-align GUI parameter rows, split CSV controls into their own tab, describe every additional output format and plot energy/probability files with sequence names, source tabs and PNG export (PR #287 review) @@ -292,6 +295,16 @@ energies, restricted partition sums, and trackers. ################################################################################ ################################################################################ +261026 Alexander Mitrofanov + * gui/app.js, gui/{index.html,styles.css}, scripts/wasm/test-browser.py + * place Explicit seeds beside a half-width Seed constraint selector and halve + the CSV sort selector width; verify desktop/mobile control geometry + * show only examples for the selected task, retain complete CSV downloads while + scrolling result tables above 500 px, and match output tab selection styling + to the parameter tabs (PR #303 maintainer review) + * gui/docs/{json-workflow,step3-frontend-ui,step4-results-and-deployment}.md + * document task-specific examples, compact controls and the bounded result table + 261026 Alexander Mitrofanov * gui/{app,options,sessions,output-visualization}.js, gui/{index.html,styles.css} diff --git a/gui/app.js b/gui/app.js index d0c9cdbf..c95fcff2 100644 --- a/gui/app.js +++ b/gui/app.js @@ -90,16 +90,22 @@ function fieldRow(body, fields, suffix = '') { for (const definition of GROUPS) { const body = group(definition.key, definition.label); if (definition.key === 'seed-options') { + const primary = element('div', '', 'seed-primary-row'); const wrapper = element('div', '', 'field seed-mode'); const label = element('label', 'Seed constraint'); label.htmlFor = 'seed-mode'; const select = element('select'); select.id = 'seed-mode'; for (const [value, name] of [['none', 'Disable seed constraint'], ['explicit', 'Explicit seed'], ['identify', 'Identify seeds']]) { const option = element('option', name); option.value = value; select.append(option); } - select.value = 'identify'; wrapper.append(label, select); body.append(wrapper); + select.value = 'identify'; wrapper.append(label, select); + primary.append(wrapper, renderField(FIELDS.find((field) => field.key === 'seedTQ'))); + body.append(primary); } if (definition.rows) { - for (const row of definition.rows) fieldRow(body, row); + for (const row of definition.rows) { + if (definition.key === 'seed-options' && row[0].key === 'seedTQ') continue; + fieldRow(body, row); + } } else fieldRow(body, definition.fields); if (definition.strand) { const p = definition.strand; @@ -173,6 +179,9 @@ function updateLength(name) { } function updateAvailability() { const evaluation = getTask() === 'evaluation'; + for (const button of byId('example-options').querySelectorAll('[data-example-task]')) { + button.hidden = button.dataset.exampleTask !== getTask(); + } byId('evaluation-input').hidden = !evaluation; byId('task-help').textContent = evaluation ? 'Evaluate supplied structures for one query and one target. Prediction constraints are ignored.' : 'Predict interactions for all query–target sequence pairs.'; byId('compute').textContent = evaluation ? 'Evaluate interactions' : 'Compute interactions'; @@ -314,6 +323,7 @@ async function loadExamples() { container.replaceChildren(); for (const example of examples) { const button = element('button'); button.type = 'button'; + button.dataset.exampleTask = example.request.task; button.append(element('strong', example.name), element('span', example.description)); button.addEventListener('click', () => { if (byId('inputs').disabled) return; @@ -322,6 +332,7 @@ async function loadExamples() { }); container.append(button); } + updateAvailability(); } catch (error) { container.replaceChildren(element('p', `${error.message} Reload to try again.`, 'input-help')); } } loadExamples(); diff --git a/gui/docs/json-workflow.md b/gui/docs/json-workflow.md index df5f7dfb..1c2d9dee 100644 --- a/gui/docs/json-workflow.md +++ b/gui/docs/json-workflow.md @@ -68,7 +68,8 @@ uses native defaults for omitted parameters. Inactive controls keep their edits in the form for switching modes, but their values are omitted from executed and stored settings. Previously computed sessions remain available. Empty FASTA fields show the short demonstration sequences as placeholders only. The Examples -disclosure menu follows the Input Parameters label. +disclosure menu follows the Input Parameters label and lists only examples for +the selected Prediction or Evaluation task. Maintainers edit `gui/examples/index.json` (an array of local JSON filenames). Each listed file contains `name`, `description`, and `configuration`, where the diff --git a/gui/docs/step3-frontend-ui.md b/gui/docs/step3-frontend-ui.md index 59466b2b..3e41faf5 100644 --- a/gui/docs/step3-frontend-ui.md +++ b/gui/docs/step3-frontend-ui.md @@ -18,6 +18,9 @@ are at most 9 rem wide within bounded, left-aligned row grids; select/text input use compact type-specific tracks and text/data fields retain useful width. Rows keep their scientific grouping without stretching across the complete panel, use 16 px horizontal gaps and bottom-align labels above their controls. +The Seed tab places the constraint selector (12 rem) beside Explicit seeds on +desktop; the CSV sort selector uses a 19 rem track. Both controls stack at mobile +widths. The institutional link reads “Bioinformatics - University of Freiburg” and opens the group website. Footer and table notes use the available width, wrapping only when the viewport requires it. diff --git a/gui/docs/step4-results-and-deployment.md b/gui/docs/step4-results-and-deployment.md index c87d1b58..451181bf 100644 --- a/gui/docs/step4-results-and-deployment.md +++ b/gui/docs/step4-results-and-deployment.md @@ -23,7 +23,9 @@ This is relative suboptimality, not a free-energy change or probability. Every heading is a keyboard-operable sort button with `aria-sort`. Search covers all returned values. A separate checklist shows/hides table columns after the run; it does not change selected CSV output. All identifiers, output previews -and diagnostics render with `textContent`. Selected extra files appear below the +and diagnostics render with `textContent`. The table has a 500 px maximum height +with vertical scrolling for longer results and a sticky heading; CSV downloads +still contain every selected row. Selected extra files appear below the table with their original filename, covered sequence/sequence-pair names, a header-level download, and bounded text previews, including SVG source. Empty output is successful and still permits CSV/accessibility downloads. diff --git a/gui/index.html b/gui/index.html index 08878a27..275f8b1f 100644 --- a/gui/index.html +++ b/gui/index.html @@ -75,7 +75,7 @@