From 4922efb5e44ea27b0e1c4616e97036122c4ea954 Mon Sep 17 00:00:00 2001
From: Fotis Baltoumas <baltoumas@fleming.gr>
Date: Thu, 17 Sep 2026 11:22:06 +0300
Subject: [PATCH 1/5] Added playwright regression test and fixed more bugs

---
 frontend/e2e/smoke.spec.ts    | 39 +++++++++++++++++++++
 frontend/src/export/dialog.ts |  4 +--
 frontend/src/metrics.ts       | 64 +++++++++++++++++++++++++----------
 frontend/src/state.ts         |  1 -
 4 files changed, 88 insertions(+), 20 deletions(-)

diff --git a/frontend/e2e/smoke.spec.ts b/frontend/e2e/smoke.spec.ts
index 954d01c..99eabcd 100644
--- a/frontend/e2e/smoke.spec.ts
+++ b/frontend/e2e/smoke.spec.ts
@@ -47,6 +47,45 @@ test('layouts move the nodes', async ({ page }) => {
     .toBe(true)
 })
 
+test('Kamada-Kawai and Stress layouts run in the background worker on a big network', async ({
+  page,
+  request,
+}) => {
+  // Regression test: getFrWorker() (metrics.ts) builds the layout worker by
+  // stringifying module-private functions and dispatching them by their
+  // literal source names. This suite runs against the production build
+  // (see playwright.config.ts), where the bundler's minifier renames those
+  // functions; the dispatcher's hardcoded names didn't follow, so "kk" and
+  // "stress" threw "distanceLayout is not defined" inside the worker and
+  // silently failed (runComputedLayout only reports it into #layoutStatus,
+  // it never throws or logs). That only happens once a network is big
+  // enough to take the worker path (> 60 nodes) - a small example never
+  // exercised it.
+  const n = 80
+  const edges = Array.from({ length: n - 1 }, (_, i) => ({ source: `N${i}`, target: `N${i + 1}` }))
+  const r = await request.post('/api/external', { data: { name: 'Layout worker test', edges } })
+  expect(r.ok()).toBe(true)
+  const { url } = (await r.json()) as { url: string }
+  await page.goto(url)
+  await expect.poll(() => nodeCount(page)).toBe(n)
+
+  await page.locator('#sideTabDisplay').click()
+  await page.locator('#layoutSection h3').click()
+  await expect(page.locator('#btnRunLayout')).toBeVisible()
+
+  for (const kind of ['kk', 'stress']) {
+    const before = await positions(page)
+    await selectValue(page, '#layoutSelect', kind)
+    await page.locator('#btnRunLayout').click()
+    await expect
+      .poll(async () => JSON.stringify(await positions(page)) !== JSON.stringify(before), {
+        timeout: 20_000,
+      })
+      .toBe(true)
+    await expect(page.locator('#layoutStatus')).toBeEmpty()
+  }
+})
+
 test('tabs switch views, 3D view activates', async ({ page }) => {
   await openExample(page)
   for (const [tab, view] of [
diff --git a/frontend/src/export/dialog.ts b/frontend/src/export/dialog.ts
index 4b1b760..3485369 100644
--- a/frontend/src/export/dialog.ts
+++ b/frontend/src/export/dialog.ts
@@ -502,11 +502,11 @@ export function fr3dLayout(ids, edges, opts) {
 
   let laidOut = 0
   const parts = comps.map((m, c) => {
-    S.workRange = [laidOut / n, (laidOut + m.length) / n]
+    globalThis.__normaWorkRange = [laidOut / n, (laidOut + m.length) / n]
     laidOut += m.length
     return layoutComponent(m.length, compEdges[c])
   })
-  S.workRange = [0, 1]
+  globalThis.__normaWorkRange = [0, 1]
   // pack: the largest piece in the middle, the others on a shell around it
   const centers = [[0, 0, 0]]
   if (parts.length > 1) {
diff --git a/frontend/src/metrics.ts b/frontend/src/metrics.ts
index 7f8085f..f0d5c44 100644
--- a/frontend/src/metrics.ts
+++ b/frontend/src/metrics.ts
@@ -348,15 +348,27 @@ export const LARGE_NETWORK_NODES = 700
 // Progress of long computations (layouts, edge bundling), reported from
 // inside their loops as a fraction of the part in workRange. In the worker,
 // workSink posts it to the page; on the page itself it is not used.
-var workSink = null,
-  workLast = 0
-
+//
+// These live on globalThis (not as module-scope `var`s, and not on the
+// shared `S` state object) because getFrWorker() below rebuilds this
+// function's source with .toString() and pastes it into a separate worker
+// script that only shares globals, not module bindings: a module-scope var
+// or an `S.x` property read/written here would, after the production
+// build's minifier renames it, no longer match the plain, unrenamed name
+// the worker's hand-written preamble uses to set it up (or `S` wouldn't
+// exist there at all) - throwing "<renamed> is not defined" the moment a
+// layout ran in the worker (only reproducible on a network big enough to
+// take that path; see the "run in the worker" e2e test in smoke.spec.ts).
+// `globalThis.__normaWorkX` is immune: globalThis is never renamed, and
+// plain string property names survive the default (non-mangling) minifier.
 export function workStep(f) {
-  if (!workSink) return
+  const sink = globalThis.__normaWorkSink
+  if (!sink) return
   const now = Date.now()
-  if (now - workLast < 80) return
-  workLast = now
-  workSink(S.workRange[0] + (S.workRange[1] - S.workRange[0]) * Math.max(0, Math.min(1, f)))
+  if (now - (globalThis.__normaWorkLast || 0) < 80) return
+  globalThis.__normaWorkLast = now
+  const r = globalThis.__normaWorkRange || [0, 1]
+  sink(r[0] + (r[1] - r[0]) * Math.max(0, Math.min(1, f)))
 }
 
 function fdebBundle(segs, opts) {
@@ -723,7 +735,13 @@ function frLayout(ids, edges) {
     const w = Number.isFinite(e.weight) && e.weight > 0 ? e.weight : 1
     all.push({ s, t, w })
   })
-  const rand = mulberry32(FR_SEED)
+  // 123, not FR_SEED: this function is also pasted verbatim into the layout
+  // worker (see getFrWorker() below), which only shares globals with the
+  // page, not module bindings - a reference to the FR_SEED const would, once
+  // the production build's minifier renames it, no longer resolve to
+  // anything there. FR_SEED stays the single source of truth for every
+  // other (main-thread-only) caller; keep this literal equal to it.
+  const rand = mulberry32(123)
   const comps = connectedComponents(ids.length, all)
   const compOf = new Int32Array(ids.length)
   const localIdx = new Int32Array(ids.length)
@@ -737,11 +755,11 @@ function frLayout(ids, edges) {
   all.forEach((e) => compEdges[compOf[e.s]].push({ s: localIdx[e.s], t: localIdx[e.t], w: e.w }))
   let laidOut = 0
   const parts = comps.map((members, c) => {
-    S.workRange = [laidOut / ids.length, (laidOut + members.length) / ids.length]
+    globalThis.__normaWorkRange = [laidOut / ids.length, (laidOut + members.length) / ids.length]
     laidOut += members.length
     return { members, ...frComponent(members.length, compEdges[c], rand) }
   })
-  S.workRange = [0, 1]
+  globalThis.__normaWorkRange = [0, 1]
   packComponents(parts)
   const out = {}
   parts.forEach((p) =>
@@ -764,7 +782,6 @@ function frLayout(ids, edges) {
    the weighted Fruchterman-Reingold layout, and run in the worker.
    Edge weights are not used: distances are shortest paths in hops.
    ============================================================ */
-const DIST_LAYOUT_LIMIT = 2500
 // nodes per component
 
 // all-pairs hop distances of one component (local indices)
@@ -1070,11 +1087,16 @@ function distanceLayout(ids, edges, kind) {
   })
   let laidOut = 0
   const parts = comps.map((members, c) => {
-    S.workRange = [laidOut / ids.length, (laidOut + members.length) / ids.length]
+    globalThis.__normaWorkRange = [laidOut / ids.length, (laidOut + members.length) / ids.length]
     laidOut += members.length
-    if (members.length > DIST_LAYOUT_LIMIT)
+    // 2500, not DIST_LAYOUT_LIMIT: this function is also pasted verbatim
+    // into the layout worker (see getFrWorker() below), which only shares
+    // globals with the page, not module bindings - a reference to the
+    // DIST_LAYOUT_LIMIT const would, once the production build's minifier
+    // renames it, no longer resolve to anything there.
+    if (members.length > 2500)
       throw new Error(
-        `${kind === 'kk' ? 'Kamada–Kawai' : 'Stress majorization'} handles connected parts of up to ${DIST_LAYOUT_LIMIT.toLocaleString('en-US')} nodes; this network has one of ${members.length.toLocaleString('en-US')}. Use a force-directed layout instead.`
+        `${kind === 'kk' ? 'Kamada–Kawai' : 'Stress majorization'} handles connected parts of up to ${(2500).toLocaleString('en-US')} nodes; this network has one of ${members.length.toLocaleString('en-US')}. Use a force-directed layout instead.`
       )
     const lay =
       kind === 'kk'
@@ -1083,7 +1105,7 @@ function distanceLayout(ids, edges, kind) {
     // hop units -> FR-like units so packing gaps look alike
     return { members, x: lay.x, y: lay.y }
   })
-  S.workRange = [0, 1]
+  globalThis.__normaWorkRange = [0, 1]
   packComponents(parts)
   const out = {}
   parts.forEach((p) =>
@@ -1140,7 +1162,7 @@ export function getFrWorker() {
       ]
         .map((f) => f.toString())
         .join('\n') +
-      `\nconst FR_SEED = ${FR_SEED};\nconst DIST_LAYOUT_LIMIT = ${DIST_LAYOUT_LIMIT};\nvar workRange = [0, 1], workSink = null, workLast = 0;\n` +
+      '\n' +
       // The dispatcher below used to call these by their literal source
       // names, which broke once the production build's minifier renamed
       // these (non-exported) functions: the worker still got their bodies
@@ -1148,7 +1170,15 @@ export function getFrWorker() {
       // so the hardcoded names threw "X is not defined". Using .name reads
       // each function's *current* runtime name, so it always matches the
       // identifier its .toString() source was declared under.
-      `onmessage = e => { const m = e.data; let result; workRange = [0, 1]; workLast = 0; workSink = f => postMessage({ id: m.id, progress: f }); try{ result = m.kind === "fdeb" ? ${fdebBundle.name}(m.segs, m.opts) : m.kind === "fr3d" ? ${fr3dLayout.name}(m.ids, m.edges, m.opts) : (m.kind === "kk" || m.kind === "stress") ? ${distanceLayout.name}(m.ids, m.edges, m.kind) : ${frLayout.name}(m.ids, m.edges); } catch(err){ postMessage({ id: m.id, error: String(err && err.message || err) }); return; } postMessage({ id: m.id, result }); };`
+      //
+      // globalThis.__normaWork* (set here, read/written by the pasted
+      // workStep/frLayout/distanceLayout bodies) is the same fix applied to
+      // *data*: a module-scope var or the shared S object would hit the
+      // exact same renamed-name mismatch (or, for S, simply not exist in
+      // the worker at all), since unlike functions, a plain value has no
+      // .name to recover the identifier by. globalThis and plain string
+      // property names are never renamed by the minifier, so this is safe.
+      `onmessage = e => { const m = e.data; let result; globalThis.__normaWorkRange = [0, 1]; globalThis.__normaWorkLast = 0; globalThis.__normaWorkSink = f => postMessage({ id: m.id, progress: f }); try{ result = m.kind === "fdeb" ? ${fdebBundle.name}(m.segs, m.opts) : m.kind === "fr3d" ? ${fr3dLayout.name}(m.ids, m.edges, m.opts) : (m.kind === "kk" || m.kind === "stress") ? ${distanceLayout.name}(m.ids, m.edges, m.kind) : ${frLayout.name}(m.ids, m.edges); } catch(err){ postMessage({ id: m.id, error: String(err && err.message || err) }); return; } postMessage({ id: m.id, result }); };`
     const url = URL.createObjectURL(new Blob([src], { type: 'text/javascript' }))
     frWorker = new Worker(url)
     frWorker.onmessage = (e) => {
diff --git a/frontend/src/state.ts b/frontend/src/state.ts
index a39fe88..4841900 100644
--- a/frontend/src/state.ts
+++ b/frontend/src/state.ts
@@ -17,7 +17,6 @@ export const S = {
   dataCache: { version: -1, data: null },
   historyGestureOpen: false,
   cyLayoutsRunning: 0,
-  workRange: [0, 1],
   frRequestSeq: 0,
   normaEntrySeq: 0,
   viewSeq: 0,

From 5dfd5034c7bd58f3496ddb1e611223bd4dd43ade Mon Sep 17 00:00:00 2001
From: Fotis Baltoumas <baltoumas@fleming.gr>
Date: Thu, 17 Sep 2026 13:30:32 +0300
Subject: [PATCH 2/5] no hand-duplicated literals for FR_SEED/DIST_LAYOUT_LIMIT

---
 frontend/src/metrics.ts | 43 +++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/frontend/src/metrics.ts b/frontend/src/metrics.ts
index f0d5c44..eaa7139 100644
--- a/frontend/src/metrics.ts
+++ b/frontend/src/metrics.ts
@@ -735,13 +735,9 @@ function frLayout(ids, edges) {
     const w = Number.isFinite(e.weight) && e.weight > 0 ? e.weight : 1
     all.push({ s, t, w })
   })
-  // 123, not FR_SEED: this function is also pasted verbatim into the layout
-  // worker (see getFrWorker() below), which only shares globals with the
-  // page, not module bindings - a reference to the FR_SEED const would, once
-  // the production build's minifier renames it, no longer resolve to
-  // anything there. FR_SEED stays the single source of truth for every
-  // other (main-thread-only) caller; keep this literal equal to it.
-  const rand = mulberry32(123)
+  // globalThis.__normaFrSeed, not FR_SEED directly: see the comment by its
+  // declaration above (this function also runs inside the layout worker).
+  const rand = mulberry32(globalThis.__normaFrSeed)
   const comps = connectedComponents(ids.length, all)
   const compOf = new Int32Array(ids.length)
   const localIdx = new Int32Array(ids.length)
@@ -782,6 +778,18 @@ function frLayout(ids, edges) {
    the weighted Fruchterman-Reingold layout, and run in the worker.
    Edge weights are not used: distances are shortest paths in hops.
    ============================================================ */
+const DIST_LAYOUT_LIMIT = 2500
+// frLayout/distanceLayout read these off globalThis instead of closing over
+// the consts directly, because both functions are also pasted verbatim into
+// the layout worker (see getFrWorker() below), which only shares globals
+// with the page, not module bindings. A direct FR_SEED/DIST_LAYOUT_LIMIT
+// reference would, once the production build's minifier renames the const,
+// no longer resolve inside the worker; globalThis and plain string property
+// names are never renamed, so this keeps FR_SEED/DIST_LAYOUT_LIMIT above as
+// the single source of truth for both places instead of a hand-duplicated
+// literal that could silently drift if either value ever changes.
+globalThis.__normaFrSeed = FR_SEED
+globalThis.__normaDistLayoutLimit = DIST_LAYOUT_LIMIT
 // nodes per component
 
 // all-pairs hop distances of one component (local indices)
@@ -1089,14 +1097,13 @@ function distanceLayout(ids, edges, kind) {
   const parts = comps.map((members, c) => {
     globalThis.__normaWorkRange = [laidOut / ids.length, (laidOut + members.length) / ids.length]
     laidOut += members.length
-    // 2500, not DIST_LAYOUT_LIMIT: this function is also pasted verbatim
-    // into the layout worker (see getFrWorker() below), which only shares
-    // globals with the page, not module bindings - a reference to the
-    // DIST_LAYOUT_LIMIT const would, once the production build's minifier
-    // renames it, no longer resolve to anything there.
-    if (members.length > 2500)
+    // globalThis.__normaDistLayoutLimit, not DIST_LAYOUT_LIMIT directly: see
+    // the comment by its declaration above (this function also runs inside
+    // the layout worker).
+    const limit = globalThis.__normaDistLayoutLimit
+    if (members.length > limit)
       throw new Error(
-        `${kind === 'kk' ? 'Kamada–Kawai' : 'Stress majorization'} handles connected parts of up to ${(2500).toLocaleString('en-US')} nodes; this network has one of ${members.length.toLocaleString('en-US')}. Use a force-directed layout instead.`
+        `${kind === 'kk' ? 'Kamada–Kawai' : 'Stress majorization'} handles connected parts of up to ${limit.toLocaleString('en-US')} nodes; this network has one of ${members.length.toLocaleString('en-US')}. Use a force-directed layout instead.`
       )
     const lay =
       kind === 'kk'
@@ -1162,7 +1169,13 @@ export function getFrWorker() {
       ]
         .map((f) => f.toString())
         .join('\n') +
-      '\n' +
+      // FR_SEED/DIST_LAYOUT_LIMIT are interpolated here as plain values
+      // (${FR_SEED}, not the identifier), so this always carries whatever
+      // they're currently set to on the page - no duplicated literal to
+      // keep in sync. See the comment by DIST_LAYOUT_LIMIT's declaration
+      // for why the worker's copies of frLayout/distanceLayout read them
+      // back off globalThis rather than closing over the consts directly.
+      `\nglobalThis.__normaFrSeed = ${FR_SEED};\nglobalThis.__normaDistLayoutLimit = ${DIST_LAYOUT_LIMIT};\n` +
       // The dispatcher below used to call these by their literal source
       // names, which broke once the production build's minifier renamed
       // these (non-exported) functions: the worker still got their bodies

From e8eb466e17b2654539a25f8315536eabe3e76969 Mon Sep 17 00:00:00 2001
From: Fotis Baltoumas <baltoumas@fleming.gr>
Date: Thu, 17 Sep 2026 14:52:41 +0300
Subject: [PATCH 3/5] fixed importers & responsive UI

---
 frontend/norma.html        |  3 ++
 frontend/src/api/wiring.ts | 64 +++++++++++++++++++++++++
 frontend/src/enrichment.ts | 96 +++++++++++++++++++++++++++++++-------
 frontend/src/side_panel.ts |  7 +++
 frontend/src/style.css     | 76 ++++++++++++++++++++++++++++++
 5 files changed, 228 insertions(+), 18 deletions(-)

diff --git a/frontend/norma.html b/frontend/norma.html
index d2f6c2c..393d9d8 100644
--- a/frontend/norma.html
+++ b/frontend/norma.html
@@ -321,6 +321,7 @@ <h3 role="button" tabindex="0" aria-expanded="false">Reactome<button type="butto
         <div class="row"><button id="btnReactomeSearch" data-db-run="reactome">Search pathways</button></div>
         <div id="reactomePickRow" hidden>
           <select id="reactomePathway" size="5" aria-label="Pathway" class="db-pick"></select>
+          <button type="button" class="db-pick-copy" id="btnReactomeCopy">Copy selected</button>
         </div>
         <details class="string-more"><summary>Options</summary>
           <div class="row">
@@ -387,6 +388,7 @@ <h3 role="button" tabindex="0" aria-expanded="false">NDEx<button type="button" c
         <div class="row"><button id="btnNdexSearch" data-db-run="ndex">Search NDEx</button></div>
         <div id="ndexPickRow" hidden>
           <select id="ndexNetwork" size="6" aria-label="Network" class="db-pick"></select>
+          <button type="button" class="db-pick-copy" id="btnNdexCopy">Copy selected</button>
         </div>
         <p class="hint-line">Node attributes with a few distinct values (2–60) become groupings; the NDEx layout is kept.</p>
         <div class="row stack">
@@ -431,6 +433,7 @@ <h3 role="button" tabindex="0" aria-expanded="false">Gene Ontology<button type="
         <div id="goPickRow" hidden>
           <input id="goModelFilter" class="text-input" type="search" placeholder="Filter models by title" autocomplete="off" style="margin-top:6px;">
           <select id="goModel" size="6" aria-label="GO-CAM model" class="db-pick"></select>
+          <button type="button" class="db-pick-copy" id="btnGoCopy">Copy selected</button>
         </div>
         <input id="goModelId" class="text-input" type="text" placeholder="or a model ID, e.g. 5323da1800000002" autocomplete="off" style="margin-top:6px;">
         <div class="row"><button class="primary" id="btnGoModelFetch" data-db-run="go">Fetch GO-CAM network</button></div>
diff --git a/frontend/src/api/wiring.ts b/frontend/src/api/wiring.ts
index df69f03..b30af95 100644
--- a/frontend/src/api/wiring.ts
+++ b/frontend/src/api/wiring.ts
@@ -365,6 +365,67 @@ export function apiAnnounceReady() {
   } catch (e) {}
 }
 
+// Options in a native <select> can't be text-selected by dragging, so the
+// "Copy selected" buttons next to the Reactome/NDEx/GO-CAM pickers go
+// through the clipboard directly. A permission prompt some browsers/contexts
+// show for the async Clipboard API can sit unanswered indefinitely (e.g. an
+// embedded or automated page with nobody to click it), so that path is
+// capped with a short timeout and falls back to execCommand, which works
+// off the same click without ever prompting.
+function execCommandCopy(text) {
+  const ta = document.createElement('textarea')
+  ta.value = text
+  ta.style.position = 'fixed'
+  ta.style.opacity = '0'
+  document.body.appendChild(ta)
+  ta.focus()
+  ta.select()
+  let ok = false
+  try {
+    ok = document.execCommand('copy')
+  } catch (e) {
+    ok = false
+  }
+  document.body.removeChild(ta)
+  return ok
+}
+
+async function copyText(text) {
+  try {
+    await Promise.race([
+      navigator.clipboard.writeText(text),
+      new Promise((_, reject) => setTimeout(() => reject(new Error('timed out')), 1200)),
+    ])
+    return true
+  } catch (e) {
+    return execCommandCopy(text)
+  }
+}
+
+// The confirmation flashes on the button itself (like the API tab's "Copy"
+// buttons), rather than the usual toast() - the toast lands on #canvas,
+// which is hidden while the Welcome/Profiler/other tabs are the one shown,
+// so a person copying a picker result before ever opening a network would
+// never see it.
+async function copySelectedOption(buttonId, selectId) {
+  const btn = document.getElementById(buttonId)
+  const sel = document.getElementById(selectId)
+  const opt = sel.options[sel.selectedIndex]
+  const original = btn.textContent
+  const flash = (text) => {
+    btn.textContent = text
+    setTimeout(() => {
+      btn.textContent = original
+    }, 1200)
+  }
+  // A freshly populated multi-row <select> isn't guaranteed to start with
+  // an option selected (unlike a plain dropdown), so clicking this before
+  // choosing one is a real click-through, not just a shouldn't-happen case.
+  if (!opt) return flash('Choose one first')
+  const ok = await copyText(opt.text)
+  flash(ok ? 'Copied' : "Couldn't copy")
+}
+
 // page wiring, run by main.ts in the original order
 export function init() {
   /* ---------- wiring ---------- */
@@ -374,12 +435,15 @@ export function init() {
     const bind = (id, fn) => document.getElementById(id).addEventListener('click', fn)
     bind('btnReactomeSearch', reactomeSearch)
     bind('btnReactomeFetch', reactomeFetch)
+    bind('btnReactomeCopy', () => copySelectedOption('btnReactomeCopy', 'reactomePathway'))
     bind('btnOmnipathFetch', omnipathFetch)
     bind('btnNdexSearch', ndexSearch)
     bind('btnNdexFetch', ndexFetch)
+    bind('btnNdexCopy', () => copySelectedOption('btnNdexCopy', 'ndexNetwork'))
     bind('btnIntactFetch', intactFetch)
     bind('btnGoModels', goLoadModels)
     bind('btnGoModelFetch', goFetchModel)
+    bind('btnGoCopy', () => copySelectedOption('btnGoCopy', 'goModel'))
     bind('btnGoAnnotate', goAnnotateView)
     document.getElementById('goModelFilter').addEventListener('input', filterGoModels)
     const sc = document.getElementById('intactScore')
diff --git a/frontend/src/enrichment.ts b/frontend/src/enrichment.ts
index 0eb4925..a4338d6 100644
--- a/frontend/src/enrichment.ts
+++ b/frontend/src/enrichment.ts
@@ -1926,11 +1926,9 @@ export async function reactomeSearch() {
         `${DB_URLS.reactome}/search/query?query=${encodeURIComponent(q)}&species=${encodeURIComponent(species)}&types=Pathway&cluster=true`
       )
       const entries = ((r && r.results) || []).flatMap((g) => g.entries || [])
-      entries
-        .slice(0, 40)
-        .forEach((e) =>
-          sel.add(new Option(`${stripTags(e.name)} (${e.stId || e.id})`, e.stId || e.id))
-        )
+      sortedByName(entries.slice(0, 40), (e) => stripTags(e.name)).forEach((e) =>
+        sel.add(new Option(`${stripTags(e.name)} (${e.stId || e.id})`, e.stId || e.id))
+      )
     }
     document.getElementById('reactomePickRow').hidden = !sel.options.length
     dbStatus(
@@ -2374,11 +2372,21 @@ export async function ndexSearch() {
         body: JSON.stringify({ searchString: q }),
         contentType: 'application/json',
       })
-      ;((r && r.networks) || []).forEach((n) => {
+      // Some sources (e.g. WikiPathways) name networks "WP4284 - Cell Cycle":
+      // an id, then " - ", then the actual title. Shown and sorted by that
+      // title instead, with the id moved after it ("Cell Cycle (WP4284)"),
+      // matching the Reactome/GO-CAM "title (id)" pickers. Names with no
+      // such prefix (no digit in the leading token) are left as they are.
+      const networks = ((r && r.networks) || []).map((n) => {
+        const m = /^(\S*\d\S*) - (.+)$/.exec(String(n.name || ''))
+        return { ...n, ndexTitle: m ? m[2] : n.name, ndexId: m ? m[1] : null }
+      })
+      sortedByName(networks, (n) => n.ndexTitle).forEach((n) => {
         const big = (n.nodeCount || 0) > MAX_NETWORK_NODES ? ' — larger than NORMA shows' : ''
+        const label = n.ndexId ? `${n.ndexTitle} (${n.ndexId})` : n.ndexTitle
         sel.add(
           new Option(
-            `${n.name} · ${(n.nodeCount || 0).toLocaleString()} nodes, ${(n.edgeCount || 0).toLocaleString()} edges · ${n.owner || ''}${big}`,
+            `${label} · ${(n.nodeCount || 0).toLocaleString()} nodes, ${(n.edgeCount || 0).toLocaleString()} edges · ${n.owner || ''}${big}`,
             n.externalId
           )
         )
@@ -2712,18 +2720,55 @@ const RO_LABELS = {
 
 const termOf = (x) => (x == null ? null : typeof x === 'string' ? x : x.term || x.id || null)
 
+// The taxon/models listing gives "gocam": "http://model.geneontology.org/<id>"
+// (a full URL, not a bare id); gocam-model/<id> 404s on anything but the bare
+// id, so every candidate field is reduced to its last path segment here, once,
+// rather than passing whatever the API happened to send straight through.
+const bareGoId = (s) => (s == null ? null : String(s).replace(/^.*\//, ''))
+
 export async function goLoadModels() {
   await dbRun('go', async () => {
     const taxon = document.getElementById('goTaxon').value
     dbProgress('go', 'Listing GO-CAM models…')
     const r = await dbFetch('go', `${DB_URLS.goapi}/taxon/${encodeURIComponent(taxon)}/models`)
-    const list = (Array.isArray(r) ? r : (r && (r.models || r.results)) || []).map((m) =>
-      typeof m === 'string'
-        ? { id: m, title: m }
-        : { id: m.id || m.gocam || m.model_id, title: m.title || m.name || m.id || m.gocam }
-    )
+    const list = (Array.isArray(r) ? r : (r && (r.models || r.results)) || []).map((m) => {
+      if (typeof m === 'string') {
+        const id = bareGoId(m)
+        return { id, title: id }
+      }
+      const id = bareGoId(m.id || m.gocam || m.model_id)
+      return { id, title: m.title || m.name || id }
+    })
     goState.models = list.filter((m) => m.id)
-    filterGoModels()
+    const shown = filterGoModels()
+    // The taxon listing has no titles (just ids), so the ones actually shown
+    // are looked up one model at a time and the option text updated in
+    // place; goState.models keeps them (title !== id marks "already known"),
+    // so re-filtering to the same models within this session won't re-fetch.
+    const toName = shown.filter((m) => m.title === m.id)
+    if (toName.length) {
+      dbProgress('go', `Reading model titles: 0 of ${toName.length}…`)
+      await dbMap(
+        'go',
+        toName,
+        6,
+        async (m) => {
+          try {
+            const d = await dbFetch(
+              'go',
+              `${DB_URLS.goapi}/gocam-model/${encodeURIComponent(m.id)}`
+            )
+            if (d && d.title) m.title = d.title
+          } catch {
+            // keep the id as the label
+          }
+        },
+        (done, total) => dbProgress('go', `Reading model titles: ${done} of ${total}…`)
+      )
+      // titles just came in: re-render so the list re-sorts by them instead
+      // of staying in the id order it was first shown in
+      renderGoOptions(shown)
+    }
     dbStatus('go', [
       {
         level: goState.models.length ? 'ok' : 'warn',
@@ -2737,18 +2782,33 @@ export async function goLoadModels() {
 
 const goState = { models: [] }
 
-export function filterGoModels() {
-  const f = document.getElementById('goModelFilter').value.trim().toLowerCase()
+// Before a title is known, m.title === m.id (see goLoadModels): show the
+// bare id then, and "title (id)" once the real title comes in - the same
+// "name (id)" shape as the Reactome/NDEx pickers.
+const goOptionLabel = (m) => (m.title && m.title !== m.id ? `${m.title} (${m.id})` : m.id)
+
+// Sorted by whatever each model's label is showing right now (title once
+// known, the bare id until then), same as the Reactome/NDEx pickers.
+function renderGoOptions(models) {
   const sel = document.getElementById('goModel')
   sel.innerHTML = ''
-  goState.models
+  sortedByName(models, (m) => m.title).forEach((m) => sel.add(new Option(goOptionLabel(m), m.id)))
+}
+
+export function filterGoModels() {
+  const f = document.getElementById('goModelFilter').value.trim().toLowerCase()
+  // Capped lower than Reactome/NDEx's 40: each not-yet-named model shown
+  // costs its own gocam-model request (see goLoadModels), so this bounds a
+  // single "List models"/filter to at most 60 of those round trips.
+  const shown = goState.models
     .filter(
       (m) =>
         !f || String(m.title).toLowerCase().includes(f) || String(m.id).toLowerCase().includes(f)
     )
-    .slice(0, 300)
-    .forEach((m) => sel.add(new Option(m.title, m.id)))
+    .slice(0, 60)
+  renderGoOptions(shown)
   document.getElementById('goPickRow').hidden = !goState.models.length
+  return shown
 }
 
 export async function goFetchModel() {
diff --git a/frontend/src/side_panel.ts b/frontend/src/side_panel.ts
index ac5df23..7f8940c 100644
--- a/frontend/src/side_panel.ts
+++ b/frontend/src/side_panel.ts
@@ -18,6 +18,8 @@ export function init() {
     if (saved) {
       width = Number(saved.width) || DEFAULT_W
       collapsed = !!saved.collapsed
+    } else if (window.innerWidth <= 760) {
+      collapsed = true
     }
   } catch (e) {}
   const save = () => {
@@ -43,6 +45,11 @@ export function init() {
     save()
   }
   toggle.addEventListener('click', () => setCollapsed(!collapsed))
+  // on small screens the sidebar is an overlay drawer with a backdrop (#app::before);
+  // a tap on the backdrop reports #app itself as the target, so treat that as "close"
+  app.addEventListener('click', (e) => {
+    if (e.target === app && !collapsed) setCollapsed(true)
+  })
 
   handle.addEventListener('pointerdown', (e) => {
     if (e.button !== 0) return
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 4bcf0dc..7401205 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -3553,6 +3553,18 @@ button.danger:hover {
   width: 100%;
   margin-top: 6px;
   font-size: 12px;
+  overflow-x: auto;
+}
+.db-pick option {
+  white-space: nowrap;
+}
+/* Options in a native <select> can't be text-selected/copied by dragging,
+   so this copies the selected option's full label (including the part cut
+   off by the box's width) to the clipboard instead. */
+.db-pick-copy {
+  margin-top: 6px;
+  padding: 3px 10px;
+  font-size: 11.5px;
 }
 .menu-sep {
   display: flex;
@@ -3642,3 +3654,67 @@ details > summary + .menu-sep {
   background: #fde68a;
   color: #111827;
 }
+
+/* ---------- small screens (phones/narrow tablets): the sidebar becomes an
+   overlay drawer instead of a fixed grid column, and the dense toolbar rows
+   scroll horizontally instead of clipping or overlapping ---------- */
+@media (max-width: 760px) {
+  #app {
+    grid-template-columns: 0 minmax(0, 1fr);
+  }
+  #brand,
+  #sideTabs,
+  #sidebar {
+    position: fixed;
+    left: 0;
+    width: min(86vw, 320px);
+    z-index: 50;
+  }
+  #brand {
+    top: 0;
+    height: 52px;
+  }
+  #sideTabs {
+    top: 52px;
+    height: 42px;
+  }
+  #sidebar {
+    top: 94px;
+    bottom: 0;
+  }
+  #sideResizer {
+    display: none;
+  }
+  #sideToggle {
+    left: 0 !important;
+    z-index: 51;
+  }
+  /* backdrop behind the open drawer; tapping it closes the drawer (see side_panel.ts) */
+  #app:not(.side-collapsed)::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 45;
+  }
+  #viewHeader,
+  #topbar,
+  #ctxbar {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  #viewHeader > *,
+  #tabs > * {
+    flex-shrink: 0;
+  }
+  #brand .title small {
+    display: none;
+  }
+  .welcome-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .welcome-steps {
+    grid-template-columns: 1fr;
+  }
+}

From b81c2eccabcf054c70623e85ca0498dd59199075 Mon Sep 17 00:00:00 2001
From: Fotis Baltoumas <baltoumas@fleming.gr>
Date: Thu, 17 Sep 2026 15:12:59 +0300
Subject: [PATCH 4/5] Added file format checks and rearranged export

---
 frontend/e2e/smoke.spec.ts            |  28 +++++++++++++++++++++
 frontend/norma.html                   |  34 +++++++++++++-------------
 frontend/src/layouts/controls.test.ts | Bin 0 -> 3522 bytes
 frontend/src/layouts/controls.ts      |  27 ++++++++++++++++++++
 frontend/src/uploads.ts               |   2 ++
 5 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/layouts/controls.test.ts

diff --git a/frontend/e2e/smoke.spec.ts b/frontend/e2e/smoke.spec.ts
index 99eabcd..2ee6f83 100644
--- a/frontend/e2e/smoke.spec.ts
+++ b/frontend/e2e/smoke.spec.ts
@@ -174,3 +174,31 @@ test('unknown example shows an error, not a crash', async ({ page }) => {
   expect(await nodeCount(page)).toBe(0)
   void EXAMPLE
 })
+
+test('uploading a non-NORMA file is rejected with a warning before it reaches the canvas', async ({
+  page,
+}) => {
+  await page.goto('/')
+  await page.locator('#filesSection h3').click()
+  await page.setInputFiles('#normaFileInput', {
+    name: 'export.json',
+    mimeType: 'application/json',
+    buffer: Buffer.from('{"nodes":["A","B"],"edges":[["A","B"]]}'),
+  })
+  await expect(page.locator('#normaStatus .note.error')).toContainText(/looks like JSON/)
+  await expect(page.locator('#libNetworks .lib-empty')).toBeVisible()
+  await expect(page.locator('#libNetworks .lib-row')).toHaveCount(0)
+  expect(await nodeCount(page)).toBe(0)
+})
+
+test('uploading a valid network file is accepted and ready to show', async ({ page }) => {
+  await page.goto('/')
+  await page.locator('#filesSection h3').click()
+  await page.setInputFiles('#normaFileInput', {
+    name: 'network.txt',
+    mimeType: 'text/plain',
+    buffer: Buffer.from('Source\tTarget\tWeight\nA\tB\t1\nB\tC\t2\n'),
+  })
+  await expect(page.locator('#normaStatus .note.ok').first()).toContainText(/added/i)
+  await expect(page.locator('#libNetworks')).not.toBeEmpty()
+})
diff --git a/frontend/norma.html b/frontend/norma.html
index 393d9d8..92907c0 100644
--- a/frontend/norma.html
+++ b/frontend/norma.html
@@ -1036,6 +1036,23 @@ <h3 role="button" tabindex="0" aria-expanded="false">Performance<button type="bu
     </div>
 
     <div id="panelExport" class="side-panel" role="tabpanel" aria-labelledby="sideTabExport" hidden>
+      <div class="section collapsible collapsed" data-tint="exsave">
+        <h3 role="button" tabindex="0" aria-expanded="false">Save your work<button type="button" class="helplink" data-help="help-save" aria-label="Help: Save your work">?</button></h3>
+        <div class="menu-sep"><span>View file (.json) <span class="lib-hint">the current view</span></span></div>
+        <div class="row" style="margin-top:0;">
+          <button id="btnExport">Save view file</button>
+        </div>
+        <div class="menu-sep"><span>Session file (.json) <span class="lib-hint">all views and files</span></span></div>
+        <div class="row" style="margin-top:0;">
+          <button type="button" id="btnSessionSave">Save session file</button>
+        </div>
+        <div id="sessionSaveStatus" class="status" role="status" aria-live="polite"></div>
+        <div class="menu-sep"><span>Settings file (.json) <span class="lib-hint">display settings only</span></span></div>
+        <div class="row" style="margin-top:0;">
+          <button id="btnExportConfig">Save settings file</button>
+        </div>
+      </div>
+
       <div class="section collapsible collapsed" data-tint="exfiles">
         <h3 role="button" tabindex="0" aria-expanded="false">NORMA files<button type="button" class="helplink" data-help="help-save" aria-label="Help: NORMA files">?</button></h3>
         <p class="db-tag">Tab-separated files that NORMA (and the original NORMA) can read again.</p>
@@ -1076,23 +1093,6 @@ <h3 role="button" tabindex="0" aria-expanded="false">Other tools<button type="bu
         <div id="otherExportStatus" class="status" role="status" aria-live="polite"></div>
       </div>
 
-      <div class="section collapsible collapsed" data-tint="exsave">
-        <h3 role="button" tabindex="0" aria-expanded="false">Save your work<button type="button" class="helplink" data-help="help-save" aria-label="Help: Save your work">?</button></h3>
-        <div class="menu-sep"><span>View file (.json) <span class="lib-hint">the current view</span></span></div>
-        <div class="row" style="margin-top:0;">
-          <button id="btnExport">Save view file</button>
-        </div>
-        <div class="menu-sep"><span>Session file (.json) <span class="lib-hint">all views and files</span></span></div>
-        <div class="row" style="margin-top:0;">
-          <button type="button" id="btnSessionSave">Save session file</button>
-        </div>
-        <div id="sessionSaveStatus" class="status" role="status" aria-live="polite"></div>
-        <div class="menu-sep"><span>Settings file (.json) <span class="lib-hint">display settings only</span></span></div>
-        <div class="row" style="margin-top:0;">
-          <button id="btnExportConfig">Save settings file</button>
-        </div>
-      </div>
-
       <div class="section collapsible collapsed" data-tint="exarena">
         <h3 role="button" tabindex="0" aria-expanded="false">Arena3D<button type="button" class="helplink" data-help="help-arena3d" aria-label="Help: Arena3D">?</button></h3>
         <p class="db-tag">Each group becomes a layer.</p>
diff --git a/frontend/src/layouts/controls.test.ts b/frontend/src/layouts/controls.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e90eda2eb6e3e5f0baaaea2790a6985116e838cc
GIT binary patch
literal 3522
zcmb7H>rUfF6t2|%;&&h5D1Yp99S5>owL-uuuwgHdfJj!mDnYBko+Pu_o^)nRpomAS
z`bd3+e&dOWlfafmK+Jf~?K|JOAkwK+hVF>pOnGDiGF%(Fr;(B=dDp`J>1~MeR`2Aj
z+x~LeKI?bR`T<1~9$odMO4*@E_@RA(ikKUyDvpmt7C&eUn~}_nl8N><HkwU3<1B$)
zmQE86yZB%*N4`-aO?g}oC>2UcC9*MT6*XtVK88knnw%q@&+YE%apz0FGw26aWtto4
zi0P6iaz;iv56MiJp-UE1K20QxH8I6W@vm?bmuJFEh*7TjC{Ji2GGkSVOdAdnIU<eV
zGLziWRLMAxtUrv#OkF0B&bXOLb=729CShF2tO+a?*BXyBf@rvbxPfY~Gx&6JcJyV?
z`8=TA4I-~Ea~1KS889{GW@tWfF`k%VcJSt?x7Eh^>8~$`=C{pZ=AOE5x~-vU4KqBv
zDqp`GX8Q-nt>dlo;MFkm<|f;{-pQancz@EXSbeKxK5gK-6AP>|`>Pckyz3l6ySo5O
z){j;@Xb-x9bzuLrRop9Yz_&tTepnhkI5|E!>(336R|a#L<h%^TJ-aB}a~Xo-G2$=$
zFvWAJwfC{xIeUNbp!O}#fLtQSt;2(%nX>rn0=HHObT-3H`?XctY;1;bcr$#36K8oV
z1PHi>kikexb>F*YiHJ*9He#;CHIi)8sA<Zy2A4RE3Z~D=#X#{XQ<@Vi-U>x>meCcc
z?*-)7X?KtAkZlN&@0eitjj_Z!uTmnQm23r6K{B8!02lQ_CC$s$cUB%NN8j42*F%sq
zG;%Oea^~0J%{_ix&HF3$>Q|kDq>=mF_vSSBtn3qV6>lHJBAG~~za>=->pR3&uzHYO
zlwsAV!)K{`h4YA3!(9bx9_(Wp7PkC#cfLc91Ib^;Z(07nUJ{hK-bdGh&zgGPX5b{+
zIEV@ge(0a{Na(fxX3rZMU0#etRJ6GzdOBt@{XwH`?G{=>jaHnE#pu?*qfEwJZ!a~m
zP)`$qnnC%XS@U>oFPvWxoP8k4H<;;c6`6CqY$j4(X-dQuFYGt1o~mDMrPwW;^Ughb
zvFc)#wpGvSxawVa-{DeW=G%T%^YK=(>7;wy{M<dZrD5mkI{X>o^)uivl%+{AA21<y
zUf<x4Yp(1x*{yAbn>FHDBxB@dxAt*x*!aEndT*HRjI9%CvgaQ5c5J#x#Je@yxNFV5
zon~>P{KU=YA~N^r2|QR4SkWMnt|}~-B4g^dctbu9$03I1!L5-xVpC3GbgQXJ;Z34%
z=r1v?FJT56JMjR#Gm8PNFp-y7i$Trk^vG(UL`E!W*jC+`;2u|Y6#-Nz3){43ppIQr
zuy){GXjQfKz;@!9%##@WfU=40=E5!u(bYC~05=XUZw)8S|I7hB=D;Pirkp;$I6ORj
zgF3_F67du(0ww|mL0Dn!A7Z)>VQoqK?>~Rz`^TSt{=t4d7yeSiQ~1w;TF-!8Yh-TL
z237#XY%eJIYSD7>W4YniLgpHK&WI%m<gh1<Cw7afEjnF|^2`kkzLtqtM!AK-4aqT^
zuGyw2k?2|5Ydhiu8PBB4f!m6jZYd&{O0s#$BxNw5M1)NebEQ#q3XN>wB~J1*v)+y+
z$t-ZXw1mG3H^!OJc90j7Tf_c{<q5!92~IIkMZs_I8sFURpVfTMyQ6nkEBaw=`@Gh!
z1-1R!MNlgmAWj~RF77KyUY)X)?q}!g0%6RpN*Te2bZX{hgtn6KQQ`Gs4OujmVhd3~
zUs_V44=t6-(ja?uRq#BJY<ccHr;mF?G|cP}_#f%V=Wk)PTuqt<ArWU0^-4!cSz_~t
zG|p#tNe(|1Shum3FHxsX+6WLCt2H)$P>(aT1jm2{Xhn*bfN~QD|1P{MIt5C1X|&Ai
q-G5?xhbqtRrdTcQ2e#;bBo%+|Hu7M$TJNp~!e3l?0lCs}===xyK7x(_

literal 0
HcmV?d00001

diff --git a/frontend/src/layouts/controls.ts b/frontend/src/layouts/controls.ts
index 5aa19c7..a20f10f 100644
--- a/frontend/src/layouts/controls.ts
+++ b/frontend/src/layouts/controls.ts
@@ -473,6 +473,33 @@ export const NORMA_PARSERS = {
   colors: parseNormaColors,
 }
 
+// Sanity-checks upload content before it reaches the format-specific parsers
+// above, which all assume tab-separated text. Without this, a JSON/XML/
+// binary file doesn't fail cleanly: detectNormaKind has no header or
+// numeric/color column to recognise, so it falls back to "annotation" and
+// the file is silently read as a garbled (but technically valid) group
+// list instead of being rejected with a useful hint.
+export function checkNormaFileFormat(text) {
+  const trimmed = String(text).replace(/^/, '').trimStart()
+  if (!trimmed) return // an empty file is reported by the parsers themselves
+  const sample = trimmed.slice(0, 4000)
+  if (sample.slice(0, 200).includes('�') || sample.includes('')) {
+    throw new Error(
+      "This looks like a binary file, not plain text. NORMA's Files uploader needs a tab-separated .txt/.tsv/.csv file — export the data as text first."
+    )
+  }
+  if (sample[0] === '{' || sample[0] === '[') {
+    throw new Error(
+      'This looks like JSON, not a tab-separated NORMA file. If it’s a saved NORMA view or session, use "Open saved work" instead of the Files uploader.'
+    )
+  }
+  if (sample[0] === '<') {
+    throw new Error(
+      "This looks like an XML file (e.g. GraphML, GEXF or SVG), which the Files uploader doesn't read. Export it as a tab-separated Source/Target network, group/member list, or node/color file instead."
+    )
+  }
+}
+
 // Guesses a file's kind: a Source/Target header means a network; a second
 // column that is (almost) always a color means an expression file;
 // anything else is read as an annotation.
diff --git a/frontend/src/uploads.ts b/frontend/src/uploads.ts
index cf762ce..a73e07f 100644
--- a/frontend/src/uploads.ts
+++ b/frontend/src/uploads.ts
@@ -5,6 +5,7 @@ import {
   addNormaEntry,
   annotationText,
   articleFor,
+  checkNormaFileFormat,
   detectNormaKind,
   downloadText,
   fileStem,
@@ -57,6 +58,7 @@ export async function handleNormaUploads(fileList) {
   for (const file of files) {
     try {
       const text = await readFileText(file)
+      checkNormaFileFormat(text)
       if ((chosenKind === 'auto' || chosenKind === 'network') && isArena3dNetworkText(text)) {
         // an Arena3D network file: a network plus its layers as groups
         const conv = convertArena3dNetwork(text)

From 21f4f832abecee7d252f5d899c81e7bbb2d4ba73 Mon Sep 17 00:00:00 2001
From: Fotis Baltoumas <baltoumas@fleming.gr>
Date: Thu, 17 Sep 2026 15:17:52 +0300
Subject: [PATCH 5/5] Update controls.test.ts

---
 frontend/src/layouts/controls.test.ts | Bin 3522 -> 3524 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/frontend/src/layouts/controls.test.ts b/frontend/src/layouts/controls.test.ts
index e90eda2eb6e3e5f0baaaea2790a6985116e838cc..87167019cd4effd612d8528280e369ba322d6954 100644
GIT binary patch
delta 15
WcmX>keMEZ04kjiph0QydxVQl>iv-mG

delta 12
TcmX>ieMox44yMh!n7FtBBn$+r