varri-js 1.0.0 → 1.0.1

package/CITATION.bib

@@ -0,0 +1,13 @@
+@misc{raden_varrii_js_2026,
+  title        = {vaRRI-js - Visual annotation of RNA-RNA interactions},
+  author       = {Raden, Martin and Ganter, Fabian},
+  year         = {2026},
+  url          = {https://backofenlab.github.io/vaRRI-js/},
+  note         = {Web application and JavaScript library},
+  abstract     = {vaRRI-js is a browser-based JavaScript library for visualizing RNA-RNA interactions (RRIs) as 2D diagrams with annotations such as base-pair highlights, probability profiles, subsequence highlights, and point mutation annotations.},
+  keywords     = {RNA, RNA-RNA interaction, visualization, JavaScript, bioinformatics},
+  version      = {1.0.0},
+  license      = {MIT},
+  organization = {University of Freiburg, Department of Computer Science, Bioinformatics Lab},
+  organization_url  = {https://www.bioinformatics.uni-freiburg.de/}
+}

package/CITATION.cff

@@ -0,0 +1,33 @@
+cff-version: 1.2.0
+title: vaRRI-js - Visual annotation of RNA-RNA interactions
+message: >-
+  If you use this software in a publication, please cite it using the metadata
+  in this file.
+type: software
+authors:
+  - given-names: Martin
+    family-names: Raden
+    affiliation: University of Freiburg, Germany
+    orcid: 'https://orcid.org/0000-0002-7926-5911'
+  - given-names: Fabian
+    family-names: Ganter
+    affiliation: University of Freiburg, Germany
+  - name: Bioinformatics Lab, University of Freiburg
+    affiliation: Department of Computer Science, University of Freiburg
+    website: 'https://www.bioinformatics.uni-freiburg.de/'
+version: 1.0.0
+date-released: '2026-07-31'
+repository-code: 'https://github.com/BackofenLab/vaRRI-js'
+url: 'https://backofenlab.github.io/vaRRI-js/'
+abstract: >-
+  vaRRI-js is a browser-based JavaScript library for visualizing RNA-RNA
+  interactions (RRIs) as 2D diagrams with annotations such as base-pair
+  highlights, probability profiles, subsequence highlights, and point mutation
+  annotations.
+keywords:
+  - RNA
+  - RNA-RNA interaction
+  - visualization
+  - JavaScript
+  - bioinformatics
+license: MIT

package/README.md

@@ -132,6 +132,50 @@ Install vaRRI-js in an application with:
 npm install varri-js
 ```
 
+Starting with version 1.0.1, the package includes the complete viewer as well as the library.
+
+### Open `index.html` in Browser
+
+After installation via npm, you find the vaRRI-js user interface `index.html` in the following subfolder
+
+```bash
+node_modules/varri-js/index.html
+```
+
+You can open it with any recent browser and start working
+
+
+### Local Webserver (optional)
+
+Alternatively, serving the installed viewer locally using a local webserver requires e.g. Python 3:
+
+```bash
+python3 -m http.server 8080 --bind 127.0.0.1 --directory node_modules/varri-js
+```
+
+Open `http://localhost:8080/index.html`. Applications can serve or copy the whole package
+directory using their own static-file server, retaining the relative directory layout.
+The viewer includes example inputs, SVG/PNG export controls, help, citation data and local logos.
+Use HTTP rather than `file://` so the help and citation pages can load their packaged data.
+
+The JavaScript `main` and root export intentionally remain `src/vaRRI.js`: `require('varri-js')`
+and ESM default imports return the library API. The viewer has a separate public entry:
+
+```javascript
+const viewerPath = require.resolve('varri-js/index.html');
+```
+
+Resolving this path does not start a server; serve its containing directory to make the viewer
+and its assets available. HTML is a browser document, not a JavaScript module.
+
+**Network requirements:** the existing viewer uses jsDelivr for `marked` and external
+university logos from `www.bioinf.uni-freiburg.de`. The help page also uses cdnjs for its
+Markdown stylesheet, and the citation page loads Citation.js from jsDelivr. These URLs
+are retained, so this is not a fully offline distribution. Deployments with restricted
+network access must provide those assets locally and update the HTML references/CSP.
+Opening the help or citation page through `file://` can additionally fetch fallback content
+from `raw.githubusercontent.com`; serving the package over HTTP uses the local files.
+
 The package exports the CommonJS-compatible API as `varri-js` and ships the browser assets under
 `varri-js/fornac/` and `varri-js/dist/`. For a static page served from an npm-based application,
 load the browser files in this order:
@@ -573,16 +617,26 @@ The `src` directory provides a [detailed vaRRI-js Library API documentation](src
 
 ## Release Process
 
-Publishing is automated by [`.github/workflows/publish-npm.yml`](.github/workflows/publish-npm.yml).
-For the first publication, repository maintainers can configure a granular npm token with package
-write access as the `NPM_TOKEN` GitHub Actions secret. Every published GitHub release runs the
-tests, builds and checks the package, derives the npm version from the release tag, and publishes
-with provenance.
-
-After the package exists on npm, the recommended long-term setup is an npm trusted publisher for
-the `BackofenLab/vaRRI-js` repository and `publish-npm.yml` workflow, with `npm publish` selected as
-an allowed action. The workflow already grants the required OIDC permission; after a successful
-trusted-publishing run, the long-lived `NPM_TOKEN` secret can be removed.
+Publishing is automated by [`.github/workflows/publish-npm.yml`](https://github.com/BackofenLab/vaRRI-js/blob/main/.github/workflows/publish-npm.yml).
+The initial `varri-js@1.0.0` publication was manual. Before automated releases, an npm package
+owner must configure a **GitHub Actions trusted publisher** in the package's npm settings:
+organization `BackofenLab`, repository `vaRRI-js`, workflow filename `publish-npm.yml`, no
+environment name, with direct `npm publish` allowed. This one-time account action may request
+2FA. The workflow uses OIDC and does not require an `NPM_TOKEN` secret or interactive 2FA for
+each release. See [npm trusted publishing](https://docs.npmjs.com/trusted-publishers/).
+
+Merge the workflow changes before creating a release tag on a commit containing them.
+Every published GitHub release runs the tests, derives the npm version from the release tag,
+builds and installs a temporary package to verify its contents, and publishes with provenance.
+Stable releases use the `latest` npm tag; semantic prerelease versions or GitHub releases
+marked as prereleases use `next`. Use `npm install varri-js@next` to try a prerelease.
+Use a new, increasing stable version for each stable release: npm versions are immutable,
+and re-running an already successful publish cannot overwrite that version. Publishing a
+GitHub release is the trigger; pushing a Git tag alone does not publish the npm package.
+
+Run `npm run test:ci` and `npm run test:package` locally before proposing a release. The
+package check installs the actual tarball in a temporary consumer and checks module exports,
+viewer asset references, documentation images, and citation data. It also runs in PR CI.
 
 Release tags must be valid semantic versions with an optional leading `v`, for example `v1.2.3`
 or `1.2.3`. The workflow changes `package.json` and `package-lock.json` only inside the temporary

package/citation.html

@@ -0,0 +1,316 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Citation — vaRRI-js</title>
+  <link rel="icon" type="image/png" href="logo/vaRRI.logo.40x40.png">
+
+  <!-- External Stylesheets (matching index.html) -->
+  <link rel="stylesheet" href="fornac/fornac.css" />
+  <link rel="stylesheet" href="style.css" />
+
+  <style>
+    /* Tab Buttons & Layout overrides */
+    .tab-header {
+      display: flex;
+      gap: 0.25rem;
+      border-bottom: 2px solid #e9ecef;
+      margin-bottom: 1rem;
+      overflow-x: auto;
+    }
+
+    .tab-btn {
+      padding: 0.6rem 1.2rem;
+      background: none;
+      border: none;
+      border-bottom: 3px solid transparent;
+      font-weight: 600;
+      color: #6c757d;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .tab-btn:hover { 
+      color: #1d7fa4; 
+    }
+    
+    .tab-btn.active {
+      color: #1d7fa4;
+      border-bottom-color: #1d7fa4;
+    }
+
+    /* Content Area */
+    .tab-content { 
+      display: none; 
+    }
+    
+    .tab-content.active { 
+      display: block; 
+    }
+
+    .action-bar {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 0.5rem;
+    }
+
+    pre.citation-pre {
+      background: #f8f9fa;
+      padding: 1.25rem;
+      border-radius: 6px;
+      border: 1px solid #e9ecef;
+      overflow-x: auto;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+      font-size: 0.9rem;
+      line-height: 1.45;
+      color: #212529;
+    }
+  </style>
+
+  <!-- Citation.js Library -->
+  <script src="https://cdn.jsdelivr.net/npm/citation-js@0.7.14/build/citation.min.js"></script>
+</head>
+<body>
+
+<header>
+  <a class="group-logo-link" href="https://www.bioinf.uni-freiburg.de" target="_blank" rel="noopener noreferrer" aria-label="Visit the Bioinformatics Group Freiburg website">
+    <img class="group-logo" src="https://www.bioinf.uni-freiburg.de/assets/images/bioinf-fr-logo-blau.png" alt="Bioinformatics Group Freiburg logo" />
+  </a>
+  <img class="varri-logo" src="logo/vaRRI.logo.200x200.png" alt="vaRRI-js logo">
+  <div class="header-title">
+    <h1>vaRRI-js</h1>
+    <p>Visual Annotation of RNA–RNA Interactions</p>
+  </div>
+  <div class="uni-logo-wrap">
+    <a class="uni-logo-link" href="https://www.bioinf.uni-freiburg.de" target="_blank" rel="noopener noreferrer" aria-label="Open the University Freiburg Bioinformatics website in a new tab">
+      <span class="uni-logo-text">Bioinformatics -</span>
+      <img src="https://www.bioinf.uni-freiburg.de/assets/images/logo-uni-freiburg.png" alt="University Freiburg logo" class="img-fluid uni-logo" />
+    </a>
+  </div>
+</header>
+
+<main>
+  <div class="controls-column" style="grid-column: 1 / -1; max-width: 1000px; margin: 0 auto; width: 100%;">
+    
+    <aside class="panel control-panel">
+      <details class="control-group" open>
+        <summary>Citation & Export</summary>
+        <div class="control-group-body">
+          <p style="margin-top:0; color:#6c757d;">
+            Choose a format to copy or download the citation data.</p>
+
+          <!-- Tab Navigationsleiste -->
+          <div class="tab-header" id="tab-header">
+            <button class="tab-btn active" onclick="switchTab('bibtex')">BibTeX</button>
+            <button class="tab-btn" onclick="switchTab('cff')">CFF</button>
+            <button class="tab-btn" onclick="switchTab('apa')">APA</button>
+            <button class="tab-btn" onclick="switchTab('ieee')">IEEE</button>
+            <button class="tab-btn" onclick="switchTab('ris')">RIS (EndNote/Zotero)</button>
+          </div>
+
+          <!-- Inhaltsbereich -->
+          <div id="tab-contents"></div>
+        </div>
+      </details>
+    </aside>
+
+    <!-- Link zurück zur Hauptanwendung -->
+    <aside class="panel control-panel">
+      <details class="control-group">
+        <summary>
+          <a href="index.html">
+            ← Back to Visualization
+          </a>
+        </summary>
+      </details>
+    </aside>
+
+  </div>
+</main>
+
+<footer class="site-footer" aria-label="Service information">
+  <div class="footer-content">
+    <p>
+      Disclaimer: This service is provided "as is" without any warranties or guarantees.
+    </p>
+    <p>
+      For comments or feedback, please contact 
+      <a href="https://www.bioinf.uni-freiburg.de/" target="_blank" rel="noopener noreferrer">Freiburg Bioinformatics Group of the University of Freiburg</a>.
+    </p>
+    <p>
+      The source code for this service is freely available on
+      <a href="https://github.com/BackofenLab/vaRRI-js" target="_blank" rel="noopener noreferrer">GitHub</a>.
+    </p>
+  </div>
+</footer>
+
+<!-- JavaScript Logik -->
+<script>
+  const GITHUB_RAW_BASE = 'https://raw.githubusercontent.com/BackofenLab/vaRRI-js/main/';
+
+  const TABS_CONFIG = {
+    bibtex: { label: 'BibTeX', filename: 'CITATION.bib', mime: 'text/plain', source: 'CITATION.bib', type: 'raw' },
+    cff:    { label: 'CFF',    filename: 'CITATION.cff', mime: 'text/yaml',  source: 'CITATION.cff', type: 'raw' },
+    apa:    { label: 'APA',    filename: 'citation.txt', mime: 'text/plain', source: 'CITATION.bib', type: 'parsed', style: 'apa' },
+    ieee:   { label: 'IEEE',   filename: 'citation.txt', mime: 'text/plain', source: 'CITATION.bib', type: 'parsed', style: 'ieee' },
+    ris:    { label: 'RIS',    filename: 'citation.ris', mime: 'application/x-research-info-systems', source: 'CITATION.bib', type: 'parsed', style: 'ris' }
+  };
+
+  const dataStore = {};
+  let currentTab = 'bibtex';
+
+  document.addEventListener('DOMContentLoaded', async () => {
+    buildTabStructure();
+    await Promise.all([
+      loadFileWithFallback('CITATION.bib'),
+      loadFileWithFallback('CITATION.cff')
+    ]);
+    renderTabContent(currentTab);
+  });
+
+  async function loadFileWithFallback(filename) {
+    try {
+      const response = await fetch(filename);
+      if (!response.ok) throw new Error(`Status ${response.status}`);
+      dataStore[filename] = await response.text();
+      return;
+    } catch (localErr) {
+      console.warn(`Lokaler Aufruf für "${filename}" fehlgeschlagen. Versuche Fallback...`);
+    }
+
+    try {
+      const response = await fetch(GITHUB_RAW_BASE + filename);
+      if (!response.ok) throw new Error(`GitHub Status ${response.status}`);
+      dataStore[filename] = await response.text();
+    } catch (githubErr) {
+      dataStore[filename] = `[Fehler: Datei "${filename}" konnte nicht geladen werden.]`;
+    }
+  }
+
+  function buildTabStructure() {
+    const container = document.getElementById('tab-contents');
+    container.innerHTML = '';
+    Object.keys(TABS_CONFIG).forEach(key => {
+      const conf = TABS_CONFIG[key];
+      const tabDiv = document.createElement('div');
+      tabDiv.id = `content-${key}`;
+      tabDiv.className = `tab-content ${key === currentTab ? 'active' : ''}`;
+      tabDiv.innerHTML = `
+        <div class="action-bar">
+          <button class="btn btn-sm" onclick="downloadTabContent('${key}')" style="background:#1d7fa4; color:#fff;">
+            💾 ${conf.label} herunterladen
+          </button>
+        </div>
+        <pre id="pre-${key}" class="citation-pre">Wird geladen...</pre>
+      `;
+      container.appendChild(tabDiv);
+    });
+  }
+
+  function parseBibTeX(bibText) {
+    const fields = {};
+    const matches = bibText.matchAll(/(\w+)\s*=\s*[{"]([^}"]+)[}"]/g);
+    for (const match of matches) {
+      fields[match[1].toLowerCase()] = match[2].trim();
+    }
+    return fields;
+  }
+
+  function formatCitation(bibText, style) {
+    const b = parseBibTeX(bibText);
+    const authors = b.author || 'Unknown Author';
+    const title = b.title || 'Untitled';
+    const year = b.year || 'n.d.';
+    const journal = b.journal || b.booktitle || '';
+    const volume = b.volume ? `, ${b.volume}` : '';
+    const number = b.number ? `(${b.number})` : '';
+    const pages = b.pages ? `, ${b.pages}` : '';
+    const doi = b.doi ? ` https://doi.org/${b.doi}` : '';
+    const url = b.url ? ` ${b.url}` : '';
+    const link = doi || url;
+    const note = b.note ? ` (${b.note})` : '';
+    const RIS_type = journal == '' ? 'COMP' : 'JOUR';
+
+    if (style === 'apa') {
+      return `${authors} (${year}). ${title}. ${journal}${volume}${number}${pages}.${note}${link}`;
+    }
+    
+    if (style === 'ieee') {
+      return `${authors}, "${title}," ${journal}${volume}${number}${pages}, ${year}.${note}${link}`;
+    }
+    
+    if (style === 'ris') {
+      const risLines = [
+        `TY  - ${RIS_type}`,
+        `AU  - ${authors}`,
+        `TI  - ${title}`,
+        `JO  - ${journal}`,
+        `PY  - ${year}`,
+        `VL  - ${b.volume || ''}`,
+        `IS  - ${b.number || ''}`,
+        `SP  - ${b.pages || ''}`,
+        `DO  - ${b.doi || ''}`,
+        `UR  - ${b.url || ''}`,
+        `AB  - ${b.abstract || ''}`,
+        `N1  - ${b.note || ''}`
+      ];
+
+      if (b.keywords) {
+        b.keywords.split(/[,;]/).forEach(kw => {
+          if (kw.trim()) risLines.push(`KW  - ${kw.trim()}`);
+        });
+      }
+
+      risLines.push('ER  -');
+      return risLines.filter(line => !line.endsWith('  - ')).join('\n');
+    }
+
+    return bibText;
+  }
+
+  async function renderTabContent(tabKey) {
+    const conf = TABS_CONFIG[tabKey];
+    const preElem = document.getElementById(`pre-${tabKey}`);
+    
+    if (conf.type === 'raw') {
+      preElem.textContent = dataStore[conf.source] || 'Kein Inhalt verfügbar.';
+    } else if (conf.type === 'parsed') {
+      const rawBib = dataStore[conf.source];
+      if (!rawBib || rawBib.startsWith('[Fehler')) {
+        preElem.textContent = 'Zitationsdaten konnten nicht geladen werden.';
+        return;
+      }
+      preElem.textContent = formatCitation(rawBib, conf.style);
+    }
+  }
+
+  function switchTab(tabKey) {
+    currentTab = tabKey;
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+      btn.classList.toggle('active', btn.getAttribute('onclick').includes(`'${tabKey}'`));
+    });
+    document.querySelectorAll('.tab-content').forEach(content => {
+      content.classList.toggle('active', content.id === `content-${tabKey}`);
+    });
+    renderTabContent(tabKey);
+  }
+
+  function downloadTabContent(tabKey) {
+    const conf = TABS_CONFIG[tabKey];
+    const text = document.getElementById(`pre-${tabKey}`).textContent;
+    const blob = new Blob([text], { type: `${conf.mime};charset=utf-8` });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = conf.filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+</script>
+</body>
+</html>