Skip to content

Add WebAssembly browser interface and GitHub Pages build (#286) - #287

Open
Alexander-Mitrofanov wants to merge 17 commits into
masterfrom
feat/286-wasm-webinterface
Open

Alexander-Mitrofanov wants to merge 17 commits into
masterfrom
feat/286-wasm-webinterface

Conversation

@Alexander-Mitrofanov

@Alexander-Mitrofanov Alexander-Mitrofanov commented Oct 20, 2026 •

Copy link
Copy Markdown
Collaborator

IntaRNA can now predict short RNA pairs directly in a browser using the existing CLI, ViennaRNA energy models and accessibility calculations. A Web Worker keeps the interface responsive and makes cancellation immediate.

Fixes #286.

Changes

  • Cross-compile pinned zlib 1.3.1, Boost 1.87.0, ViennaRNA 2.7.0 and IntaRNA with Emscripten 4.0.23. Produce matching intarna.js/intarna.wasm, retain C++23 and exceptions, verify real dependency APIs, and document narrow compatibility fixes for ViennaRNA's bundled dlib.
  • Run each prediction in a fresh module worker with MEMFS FASTA input and CSV output. Terminate on completion, error or Abort/Escape; ignore stale results and support a clean restart.
  • Add responsive query/target FASTA editors, valid defaults, RNA/DNA normalization, validation, loading/error states and diagnostics. Display correctly oriented inclusive coordinates, energy and relative suboptimality with numeric sorting, text filtering and native CSV download.
  • Build and test on PRs. Combine the existing guide/API and the browser interface into one Pages artifact, preserving /IntaRNA/ and /IntaRNA/api/ while adding /IntaRNA/webinterface/. The documentation workflow is now a reusable build; only the combined pipeline deploys, on upstream master after checks pass.
  • Correct generated-header/pkg-config paths needed by separate build directories. Update README, ChangeLog and all four requested step documents. Each implementation step has a dedicated commit.

Validation

  • Actual WASM build with SHA-256-pinned official dependency archives: passed.
  • node scripts/wasm/smoke.mjs: native-reference energy/coordinates/suboptimals, structured accessibility costs (E = -28.04, ED1 = 4.60, ED2 = 4.86 kcal/mol), and C++ input-error handling passed.
  • npm test --prefix webinterface: five protocol/lifecycle/CSV test groups passed.
  • Real Chromium and Firefox integration suites on a nested URL: passed. Covered prediction, sorting/filtering/download, mobile overflow, abort during startup and synchronous C++, restart, empty results, literal HTML-like identifiers and engine-load failure recovery. Desktop screenshot visually reviewed.
  • Native OpenMP release build, GCC 16.2.0/ViennaRNA 2.7.2, make tests -j2: all eight API/CLI groups passed; 462,689 assertions across 119 API cases. The existing shell harness required tracked fixtures linked into the separate build directory.
  • Shell syntax, workflow YAML and git diff --check: passed. GitHub independently runs GCC 14 release/debug, Apple Clang and the complete WASM/browser/combined-site pipeline.

Deployment and limits

This PR is ready for review; it does not merge itself or change live Pages settings. Pages already uses GitHub Actions. After merge, the workflow deploys the combined tested site through the existing github-pages environment.

The browser accepts one query/target pair, 7–2,000 nt per strand, query length × target length ≤ 1,000,000, and up to 100 interactions. It uses native prediction defaults and a single worker, with memory growth capped at 1 GiB. Longer inputs and advanced settings remain available through the CLI. Sequences stay on the device; no backend, external fonts, CDN or cross-origin isolation headers are needed.

Implementation and reproducible validation: docs/step1-wasm-compilation.md and webinterface/docs/.

@Alexander-Mitrofanov
Alexander-Mitrofanov marked this pull request as ready for review October 20, 2026 19:36
@martin-raden

Copy link
Copy Markdown
Member

@Alexander-Mitrofanov

thanks, please revise:

build source versions

  • store the library and repository versions (viennarna, intarna) that are used for the WASM compilation and store them in a textfile such that this information can be shown in the webinterface

c++ source fixes

  • many virtual functions that override respective functions from their ancestor class are not showing the "override" keyword in their function definitions. identify and extend respective definitions such that the emscripter compiler does not need to complain during compilation

styling similar to varri

enable task selection in webinterface

the webinterface should allow using IntaRNA in two modes: "prediction" (IntaRNA personality) and "evaluation" (IntaRNAeval personality)

  • enable that the user can switch between the modes, which has an influence on the default values and available parameters

table output

  • add a way to hide/show available output column to focus on the columns of interest after computation
  • rename the computed "\Delta E" column to "mfe \Delta" such that this value is not mistaken to free energy change

sequence input

  • allow for the setting of start index information (default 1) for each sequence
  • allow for multi-FASTA input (in "prediction" mode) and extend the FASTA input checks respectively

parameter groups

  • for each IntaRNA CLI parameter group create a respective folded parameter menu below the sequence input and above the output field
    • embed also the fasta/startidx input part in a new "Sequence input" group that can be folded
    • ensure only one of the groups is open at the same time, ie. opening one group closes the open one
  • implement all parameters of each group that are reasonable in the online webinterface especially
    • energy parameters (parameter set, temperature, ...)
    • overlap
    • CSV output columns (make a list with checkboxes to easily enable, disable them for output; check the CLI documentation for available options)
    • additional output file formats
      • if selected, also show created output files below the output table
    • ignore:
      • base pair maximization model
  • check the CLI parameter setup in CommandLineParsing.cpp for default values, allowed ranges and input validation tests and implement respective UI replacements in javascript for the webinterface to avoid errors when calling IntaRNA

Address #287 review: configurable browser prediction and evaluation
@martin-raden

Copy link
Copy Markdown
Member

@Alexander-Mitrofanov

thanks, please revise:

add varri-based visualization

  • add iframe-based visualization of selected interaction (row in interaction table) below the table
  • use input and output information like startidx names of the sequences etc. to generate the varri URL

ZIP download button

  • enable the download of an "all-in-one" ZIP file which contains
    • the input sequences in two fasta files
    • an IntaRNA parameter file that lists
      • a comment with the used library and intarna versions (as listed in the version file created during WASM creation) for reproduction purpose
      • a comment with an example IntaRNA call that uses the provided parameter file to reproduce the output
      • all non-default input parameter settings from the user interface
    • the output CSV file
    • the created additional output files
  • add a "Download ZIP" button next to "Download CSV" that triggers the ZIP download and that has a tooltip that shortly describes its purpose

styling

  • most input fields a single numbers but spread over half the input page range. restyle the input parameter groups to a more compact and more modern and beautiful layout
  • add "Bioinformatics - " as a prefix before the "university freiburg" in the header similar to the varri webserver header and link the group's website instead of the university website
  • instead of organizing the groups of parameters as foldable sections below each other, organize them as multi-tab-pane, i.e. all group names are listed in the top
  • the "Energy is reported in kcal/m .." footer information has a line break before the link (maybe because of to low max-width). avoid the linebreak
    • same for the information below the interaction table

@martin-raden

martin-raden commented Oct 23, 2026 •

Copy link
Copy Markdown
Member

@Alexander-Mitrofanov

thanks, please revise using at least one commit per section/task in a new pull request targeting this branch "feat/286-wasm-webinterface"

(repository) rename webinterface to gui

  • to simplify the final url rename the webinterface subfolder from "webinterface" to "gui" and update all respective scripts, documentation etc. wrt. that change

(intarna) JSON IntaRNA parameter file support

  • currently IntaRNA parses its own key-value pair formatted parameter file
  • extend IntaRNA with the ability to also parse a JSON-based encoding of paramters
    • e.g. make use of the boost.json or consider integrating the header-only json container in https://github.com/nlohmann/json; evaluate the respective overhead both in terms of needed code, increase in tool complexity, maintenance, etc. and decide on an option.
    • still support both parameter file formats either using the same CLI parameter with automatic format detection (preferred) or by the same parameter with extended syntax (requiring a prefix for json files like "--parameterFile=JSON:myFile.bla")
    • also support the JSON text encoding/embedding of all input files like multi-sequence FASTA file sequence input, accessibility input, etc., such that all parameters can be set from the JSON parameter file

(gui) WASM JSON interface

  • use the new JSON-based parameterization as the default parameter input when calling the IntaRNA WASM module to simplify and generalize the webserver interface for upcoming parameter etc.

(gui) JSON import/export

  • extend the input section of webinterface with two buttons to "Load" and "Store" the current parameters from/to JSON.
    • add respective buttons right of the "Reset Parameters" button
    • "Store" should export all non-standard parameter settings in JSON format for download
      • also add a comment header (similar to the parameter file produced for ZIP export) that lists
        • tool and library versions
        • an example call how to call IntaRNA with the given json parameter file
      • this functionality (and output file) should also be used for ZIP export instead of exporting the FASTA files and config files separately. thus the ZIP should contain only the parameter.json file and all output files
    • "Load" should import a given JSON file and set all parameters respectively

(gui) Reset and Examples

  • Reset should clear and reset input fields and also remove example data
  • make the current example sequences in the FASTA fields only the grayed out background suggestions of the textarea via its "placeholder" attribute to give a hint but to avoid prefill of user-required fields
  • remove the current "Load Example" button and add an "Example" dropdown button menu (similar to the example menu in varri https://backofenlab.github.io/vaRRI/) left of "Reset Parameters" that prefills an example from a stored json file; that way, the maintainer can later easily change the example by replacing/editing the file; the json file should contain (1) short example name for the list (2) example description (3) the JSON parameter encoding to load; create two simple first examples to be replaced by the maintainer later on but to implement and show the "example framework"

(gui) FASTA file upload

  • add an "Upload" button in the header of each FASTA input area that allows to select and upload a local FASTA file
  • also add "drag-and-drop" support of textfiles into the FASTA input areas
    • add a respective small hint like "or drop in the field" right of the Upload button

(gui) task selection

  • replace "RNA–RNA interactions" with "RNA–RNA interactions considering Seeds and Accessibility"
  • remove "Predict interactions or evaluate the energy of structures you provide."
  • replace the "Task: DROPDOWN" part with a horizontal list of task names that are always visible and the current selected one is clearly highlighted (and provides a respective subheader detailing the task)
  • the goal is to always provide an overview of the different tasks that can can be tackled with the webserver

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

js port + user interface via github pages

2 participants