diff --git a/CLAUDE.md b/CLAUDE.md index 23d6a57..5f5565f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -117,24 +117,25 @@ cd web && npm run test:watch # Watch mode - Astro + Vue 3 static site for browser-only tools (no backend required) - npm package name: `babel-explorer` (directory stays `web/`) - Deployed to GitHub Pages - - Currently hosts: NodeNorm lookup (unified instance selection via checkboxes, expandable result table, shareable URLs) - - Calls NodeNorm API directly from the browser via `fetch()` (CORS-enabled) + - Currently hosts: + - **NodeNorm lookup** — unified instance selection, expandable result table, shareable URLs + - **NameRes lookup** — batch name → CURIE resolution with expected-CURIE validation via `[[CURIE]]` annotations + - **Autocomplete playground** — live-as-you-type NameRes with preset dropdown (Disease/Gene/SmallMolecule/Custom), debounce+abort, latency badges, expected-CURIE rank check, and side-by-side environment comparison + - Calls NodeNorm and NameRes APIs directly from the browser via `fetch()` (CORS-enabled) - Uses Bootstrap 5 (CDN) with the same dark-navbar styling as the Python frontend - CURIE link-outs via [biolink-model prefix map](https://github.com/biolink/biolink-model) (v4.3.7, fetched at runtime) - - Tested with Vitest + @vue/test-utils + happy-dom (99 tests); see `web/tests/README.md` + - Tested with Vitest + @vue/test-utils + happy-dom (276 tests); see `web/tests/README.md` - See `web/README.md` for development instructions and `web/FUTURE.md` for deferred features 7. **Shared Configuration** (`config/`): - - `config/translator-endpoints.json` — single source of truth for NodeNorm and NameRes deployment URLs across all environments (dev, exp, ci, test, prod) - - Consumed by Python CLI/frontend (`nodenorm.py`) and Astro frontend (`NodeNormApp.vue`) + - `config/translator-endpoints.json` — single source of truth for NodeNorm and NameRes deployment URLs across all environments + - Consumed by Python CLI/frontend (`nodenorm.py`) and Astro frontend (`NodeNormApp.vue`, `NameResApp.vue`, `AutocompleteApp.vue`) + - **NodeNorm envs**: `dev`, `exp`, `ci` (ElasticSearch-backed CI), `redis_ci` (Redis CI — kept for comparison, to be retired), `test`, `prod` + - **NameRes envs**: `dev`, `exp`, `ci` (Solr-backed CI — the stable default), `es_ci` (ElasticSearch CI — experimental), `test`, `prod` + - Note: NodeNorm and NameRes use the same `ci` key but point to different backends. NodeNorm CI is ES-based; NameRes CI is still Solr-based. The NameRes `es_ci` key is a separate experimental instance. ### Data Flow -1. User provides CURIEs via CLI -2. BabelDownloader ensures required Parquet files are downloaded -3. BabelXRefs queries files using DuckDB -4. If `--labels` or `--recurse` flags are set, NodeNorm is queried for additional metadata -5. Results are printed to stdout 1. User provides CURIEs via CLI, Python web UI, or Astro web UI 2. For DB-dependent tools (XRefs, IDs): BabelDownloader ensures required Parquet files are downloaded, BabelXRefs queries files using DuckDB 3. For API-only tools (NodeNorm): the Astro frontend calls the NodeNorm API directly from the browser; the Python frontend proxies through the server @@ -148,25 +149,32 @@ web/src/ layouts/BaseLayout.astro # Bootstrap 5 CDN + dark navbar components/ Navbar.astro # Dark navbar matching Python frontend - nodenorm/ - NodeNormApp.vue # Root Vue island (client:only="vue") - NodeNormForm.vue # Form: textarea, checkboxes + custom URL, API toggles - ComparisonView.vue # Results table (rows=CURIEs, cols=instances) with expandable rows - CurieDetailPanel.vue # Expandable detail body: description, types, IC, equiv IDs - CurieResultCard.vue # Accordion card wrapping CurieDetailPanel (single-instance use) - ResultsSummary.vue # Unified stat tiles: normalized count, disagreements, types - EquivalentIdTable.vue # Striped table with togglable columns - ColumnVisibility.vue # Page-wide column show/hide controls + nodenorm/ # NodeNorm tool components (App, Form, ComparisonView, CurieDetailPanel, CurieResultCard, ResultsSummary, EquivalentIdTable, ColumnVisibility) + nameres/ # NameRes tool components (App, Form, ComparisonView, DetailPanel, ResultsSummary) + autocomplete/ # Autocomplete tool components (App, Form, Results, ComparisonView, HighlightedFragment, ExpectedCuriePanel, LatencyBadge) shared/ + InstanceSelector.vue # Reusable env checkboxes + custom URL + localStorage prefs CurieLink.vue # CURIE → external URL link using biolink prefix map + BiolinkTypeLink.vue # Biolink type badge → link to biolink.github.io/biolink-model/{Type}; handles both prefixed ("biolink:Gene") and unprefixed ("Gene") types; used by NodeNorm, NameRes, and Autocomplete lib/ nodenorm-api.ts # fetch() wrapper for NodeNorm get_normalized_nodes (AbortSignal support) + nameres-api.ts # fetch() wrapper for NameRes /lookup; parseSearchTerms; validateExpectedCuries + nameres-types.ts # NameResResult, NameResApiOptions, DEFAULT_NAMERES_OPTIONS + nameres-url-state.ts # Encode/decode NameRes query state + autocomplete-url-state.ts # Encode/decode Autocomplete query state (q, preset, target, expected, debounce, highlight) + autocomplete-presets.ts # Disease/Gene/SmallMolecule/Custom preset definitions + detectPreset + autocomplete-diff.ts # computeInstanceDiffs (presence/rank/label/types mismatch) + classifyExpectedCurie + debounce.ts # debounce(fn, ms) with .cancel(); synchronous path when ms===0 + highlight-sanitize.ts # Whitelist sanitizer for Solr highlighting ( only) + instance-prefs.ts # sessionPrefs + localStorage helpers + sortInstances (ENV_ORDER canonical sort) — used by InstanceSelector and all App components curie-links.ts # Biolink prefix map loader + URL builder - url-state.ts # Encode/decode query state in URL params (readQueryState, buildQueryUrl) - types.ts # TypeScript interfaces + DEFAULT_API_OPTIONS + url-state.ts # Encode/decode NodeNorm query state + types.ts # NodeNorm TypeScript interfaces + DEFAULT_API_OPTIONS pages/ index.astro # Landing page with tool cards nodenorm.astro # NodeNorm tool page + nameres.astro # NameRes tool page + autocomplete.astro # Autocomplete playground page ``` Key patterns: @@ -195,6 +203,8 @@ The NodeNorm and Test Concordance pages include a dropdown to select from predef - **DuckDB for querying**: In-memory SQL queries against Parquet files for fast lookups - **Dual frontend**: DB-dependent tools on a server (FastAPI + htmx), API-only tools in the browser (Astro + Vue). Split follows data dependencies. - **Shared config**: `config/translator-endpoints.json` is the single source of truth for deployment URLs, consumed by both frontends and the CLI +- **Canonical instance ordering**: `sortInstances()` in `instance-prefs.ts` sorts by `ENV_ORDER` (Exp → Dev → CI → ES CI → Redis CI → Test → Prod → custom URLs). Called in every App component after setting `queriedInstances` so comparison tables always display in pipeline order. +- **Adding a new named instance**: requires (1) entry in `config/translator-endpoints.json`, (2) add env key to `PRIMARY_ENVS` in `InstanceSelector.vue` if it should appear in the main section rather than "Extended environments", (3) add to `ENV_ORDER` in `instance-prefs.ts` for sort position, (4) add label to `ENV_LABELS` in the relevant App component(s) and in `InstanceSelector.vue`, (5) add a `labelHtml()` case in `InstanceSelector.vue` if the label needs `` rendering (e.g. ES, Redis), (6) add to Python `env_labels` in `nodenorm.py` if it's a NodeNorm instance. ## Testing @@ -231,6 +241,7 @@ Tests live in `tests/` and are split into fast **unit tests** (mocked, no networ - **Data directory**: The `data/` directory is gitignored and contains downloaded Parquet files and generated DuckDB databases - **Babel versions**: The default Babel version is `2025nov19`, but this can be customized via `--local-dir` and `--babel-url` +- **Pre-existing Python test failures**: `tests/test_web.py::test_nodenorm_page` and `tests/test_web.py::test_test_concord_page` fail with `AttributeError: type object 'NodeNorm' has no attribute 'URLs'` — this is a pre-existing issue unrelated to the Astro frontend work. The `NodeNorm.URLs` attribute referenced in the Python web routes no longer matches the actual class interface. ## File Locations diff --git a/config/translator-endpoints.json b/config/translator-endpoints.json index acb974d..4c18629 100644 --- a/config/translator-endpoints.json +++ b/config/translator-endpoints.json @@ -1,15 +1,17 @@ { "nodenorm": { - "dev": "https://nodenormalization-sri.renci.org/", - "exp": "https://nodenormalization-exp.apps.renci.org/", - "ci": "https://nodenorm.ci.transltr.io/", - "test": "https://nodenorm.test.transltr.io/", - "prod": "https://nodenorm.transltr.io/" + "dev": "https://nodenormalization-sri.renci.org/", + "exp": "https://nodenormalization-exp.apps.renci.org/", + "ci": "https://nodenorm-es.ci.transltr.io/", + "redis_ci": "https://nodenorm.ci.transltr.io/", + "test": "https://nodenorm.test.transltr.io/", + "prod": "https://nodenorm.transltr.io/" }, "nameres": { "dev": "https://name-resolution-sri.renci.org/", "exp": "https://name-resolution-exp.apps.renci.org/", "ci": "https://name-lookup.ci.transltr.io/", + "es_ci": "https://namelookup-es.ci.transltr.io/", "test": "https://name-lookup.test.transltr.io/", "prod": "https://name-lookup.transltr.io/" } diff --git a/src/babel_explorer/core/nodenorm.py b/src/babel_explorer/core/nodenorm.py index 0bd6682..dd80431 100644 --- a/src/babel_explorer/core/nodenorm.py +++ b/src/babel_explorer/core/nodenorm.py @@ -16,11 +16,12 @@ def _load_nodenorm_urls() -> dict[str, str]: try: endpoints = json.loads(config_path.read_text()) env_labels = { - "dev": "Dev", - "exp": "Exp", - "ci": "CI", - "test": "Test", - "prod": "Production", + "dev": "Dev", + "exp": "Exp", + "ci": "CI", + "redis_ci": "Redis CI", + "test": "Test", + "prod": "Production", } return { f"NodeNorm {env_labels.get(env, env)}": url diff --git a/web/README.md b/web/README.md index be63d53..3880a78 100644 --- a/web/README.md +++ b/web/README.md @@ -8,7 +8,7 @@ babel-explorer has **two** web frontends: | Frontend | Stack | Deployment | Tools | Directory | |----------|-------|------------|-------|-----------| -| **This one** | Astro + Vue 3 | GitHub Pages | NodeNorm (more planned) | `web/` | +| **This one** | Astro + Vue 3 | GitHub Pages | NodeNorm, NameRes, Autocomplete | `web/` | | **Python frontend** | FastAPI + htmx | Kubernetes | XRefs, IDs, Test Concordance, NodeNorm | `src/babel_explorer/web/` | The split follows data dependencies: tools that only call external APIs (NodeNorm, NameRes) can run entirely in the browser. Tools that query multi-GB Parquet files via DuckDB need a server. @@ -20,7 +20,7 @@ Both frontends share the same Bootstrap 5 dark-navbar styling for visual consist ### NodeNorm Lookup (`/nodenorm`) - **Bulk normalization**: Enter multiple CURIEs, toggle API options (conflation, descriptions, individual types, taxa) -- **Unified instance selection**: Checkboxes for known NodeNorm deployments (Dev, Exp, CI, Test, Prod) plus a custom URL input; any combination of instances can be queried together +- **Unified instance selection**: Checkboxes for known NodeNorm deployments (Dev, Exp, ES CI, Redis CI, Test, Prod) plus a custom URL input; any combination of instances can be queried together - **Comparison table**: Results shown as a table — rows = CURIEs, columns = selected instances; rows highlighted amber when instances disagree on preferred ID - **Expandable row detail**: Click any CURIE row to reveal per-instance panels showing description, biolink types, IC score, and equivalent identifiers (prefix summary + expand/collapse for large cliques) - **Column visibility**: Toggle biolink type, taxa, description columns page-wide @@ -28,6 +28,27 @@ Both frontends share the same Bootstrap 5 dark-navbar styling for visual consist - **Shareable URLs**: Query state encoded in URL params (`?curie=`, `?target=`, non-default options); Share button copies link to clipboard; auto-submits on page load when URL contains CURIEs - **CURIE link-outs**: Identifiers link to external resources via [biolink-model prefix map](https://github.com/biolink/biolink-model) (v4.3.7) +### NameRes Lookup (`/nameres`) + +- **Batch name → CURIE resolution**: Enter multiple search terms (one per line), see ranked results per instance +- **Expected-CURIE validation**: Annotate any line with `[[CURIE]]` to mark expected results; validation reports success/partial/failure with the rank of the best match, configurable via a "fail if in top N" threshold +- **Multi-instance comparison**: Same unified instance selector as NodeNorm +- **API tuning**: `biolink_type`, `only_prefixes`, `exclude_prefixes`, `only_taxa` exposed in the form; limit and autocomplete mode toggles; shareable URL state and JSON export + +### Autocomplete Playground (`/autocomplete`) + +Purpose-built for evaluating NameRes as a real autocomplete (the primary way the Translator UI uses it). + +- **Live-as-you-type**: every keystroke re-queries after a configurable debounce (0/150/300/500 ms); in-flight requests are aborted via `AbortController` so stale responses never render +- **Preset dropdown**: one-click switches between the three Translator UI query shapes — Disease (`DiseaseOrPhenotypicFeature` + `only_prefixes=MONDO|HP`), Gene, Small Molecule — plus Custom. Presets only set `biolink_type` and `only_prefixes`; every other field stays user-editable +- **Advanced options**: debounce, autocomplete flag, highlighting toggle, exclude_prefixes, only_taxa (collapsed by default, auto-opens when any non-default is set) +- **Latency badges**: per-instance response time, with a tooltip noting parallel-contention when comparing multiple environments +- **Match-reason highlighting**: renders NameRes's Solr `highlighting` fragments (``-wrapped matches) behind a whitelist sanitiser — the only place `v-html` is used in the codebase +- **Single- vs multi-instance views**: one instance → rich ranked table with copy-API-URL per row; multiple → side-by-side comparison table with row/cell styling for missing CURIEs, rank drift, label/types mismatches; each column header has an `API↗` link to the raw NameRes JSON for that instance +- **Biolink type display**: the left-hand CURIE column shows the most specific Biolink type as a badge (linked to biolink.github.io/biolink-model); when instances disagree, all distinct types are shown and the type is repeated per-cell for easy comparison +- **Expected-CURIE panel**: paste CURIEs you expect to see; "Check" button fires a `limit=100` parallel lookup per instance and shows whether each expected CURIE appears in the top-N (green), top-100 (amber) or is missing (red). Round-trips through URL state for shareable review links +- **Shareable state**: `q`, `preset`, repeated `target`, repeated `expected`, per-field option overrides, non-default `debounce` and `highlight` all encoded in the URL + ## Development ```bash @@ -41,7 +62,7 @@ This starts a local dev server at `http://localhost:4321/babel-explorer/`. ## Testing ```bash -npm test # Run all 99 Vitest unit + component tests +npm test # Run all Vitest unit + component tests (~276 tests across lib and components) npm run test:watch # Watch mode ``` @@ -78,24 +99,31 @@ src/ pages/ index.astro # Landing page with tool cards nodenorm.astro # Hosts NodeNormApp Vue island + nameres.astro # Hosts NameResApp Vue island + autocomplete.astro # Hosts AutocompleteApp Vue island components/ Navbar.astro # Shared navbar (Astro component) - nodenorm/ # NodeNorm Vue components - NodeNormApp.vue # Root island: orchestrates form + results - NodeNormForm.vue # CURIE input, checkbox instance selection, custom URL, API options - ComparisonView.vue # Results table with expandable per-CURIE rows - CurieDetailPanel.vue # Detail body: description, types, IC, equiv IDs table - CurieResultCard.vue # Accordion card wrapping CurieDetailPanel - ResultsSummary.vue # Stat tiles: normalized count, disagreements, type badges - EquivalentIdTable.vue # Equiv ID table with togglable columns - ColumnVisibility.vue # Column show/hide controls + nodenorm/ # NodeNorm Vue components (App, Form, ComparisonView, CurieDetailPanel, CurieResultCard, ResultsSummary, EquivalentIdTable, ColumnVisibility) + nameres/ # NameRes Vue components (App, Form, ComparisonView, DetailPanel, ResultsSummary) + autocomplete/ # Autocomplete Vue components (App, Form, Results, ComparisonView, HighlightedFragment, ExpectedCuriePanel, LatencyBadge) shared/ + InstanceSelector.vue # Env checkboxes + custom URL + localStorage prefs (used by all tools) CurieLink.vue # CURIE → external URL link + BiolinkTypeLink.vue # Biolink type → link to biolink.github.io/biolink-model/{Type}; accepts both "biolink:Gene" and "Gene" lib/ nodenorm-api.ts # NodeNorm API fetch wrapper (supports AbortSignal) + nameres-api.ts # NameRes /lookup wrapper; parseSearchTerms; validateExpectedCuries + nameres-types.ts # NameRes TypeScript interfaces + DEFAULT_NAMERES_OPTIONS + nameres-url-state.ts # NameRes URL-state encode/decode + autocomplete-url-state.ts # Autocomplete URL-state encode/decode + DEFAULT_AUTOCOMPLETE_OPTIONS + parseExpectedCuries + autocomplete-presets.ts # Disease/Gene/SmallMolecule/Custom presets + detectPreset + autocomplete-diff.ts # Cross-instance diff signals + expected-CURIE classification + debounce.ts # debounce(fn, ms) with .cancel() and synchronous 0-ms path + highlight-sanitize.ts # Whitelist sanitizer — allow only / + instance-prefs.ts # sessionPrefs + localStorage helpers + sortInstances (ENV_ORDER canonical sort) curie-links.ts # Biolink prefix map loader - url-state.ts # Encode/decode query state in URL params - types.ts # TypeScript interfaces + url-state.ts # NodeNorm URL-state encode/decode + types.ts # NodeNorm TypeScript interfaces ``` ## Adding a New Tool diff --git a/web/src/components/Navbar.astro b/web/src/components/Navbar.astro index d503039..e898fff 100644 --- a/web/src/components/Navbar.astro +++ b/web/src/components/Navbar.astro @@ -25,6 +25,11 @@ const base = rawBase.endsWith('/') ? rawBase : rawBase + '/'; NameRes +
  • + + Autocomplete + +
    • diff --git a/web/src/components/autocomplete/AutocompleteApp.vue b/web/src/components/autocomplete/AutocompleteApp.vue new file mode 100644 index 0000000..14b6783 --- /dev/null +++ b/web/src/components/autocomplete/AutocompleteApp.vue @@ -0,0 +1,378 @@ + + + diff --git a/web/src/components/autocomplete/AutocompleteComparisonView.vue b/web/src/components/autocomplete/AutocompleteComparisonView.vue new file mode 100644 index 0000000..b370105 --- /dev/null +++ b/web/src/components/autocomplete/AutocompleteComparisonView.vue @@ -0,0 +1,185 @@ + + + diff --git a/web/src/components/autocomplete/AutocompleteForm.vue b/web/src/components/autocomplete/AutocompleteForm.vue new file mode 100644 index 0000000..2a974d7 --- /dev/null +++ b/web/src/components/autocomplete/AutocompleteForm.vue @@ -0,0 +1,291 @@ + + + diff --git a/web/src/components/autocomplete/AutocompleteResults.vue b/web/src/components/autocomplete/AutocompleteResults.vue new file mode 100644 index 0000000..a20fdc7 --- /dev/null +++ b/web/src/components/autocomplete/AutocompleteResults.vue @@ -0,0 +1,138 @@ + + + diff --git a/web/src/components/autocomplete/ExpectedCuriePanel.vue b/web/src/components/autocomplete/ExpectedCuriePanel.vue new file mode 100644 index 0000000..c3357ee --- /dev/null +++ b/web/src/components/autocomplete/ExpectedCuriePanel.vue @@ -0,0 +1,106 @@ + + + diff --git a/web/src/components/autocomplete/HighlightedFragment.vue b/web/src/components/autocomplete/HighlightedFragment.vue new file mode 100644 index 0000000..1f333c7 --- /dev/null +++ b/web/src/components/autocomplete/HighlightedFragment.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/web/src/components/autocomplete/LatencyBadge.vue b/web/src/components/autocomplete/LatencyBadge.vue new file mode 100644 index 0000000..e39f6fe --- /dev/null +++ b/web/src/components/autocomplete/LatencyBadge.vue @@ -0,0 +1,38 @@ + + + diff --git a/web/src/components/autocomplete/__tests__/AutocompleteApp.test.ts b/web/src/components/autocomplete/__tests__/AutocompleteApp.test.ts new file mode 100644 index 0000000..29d9381 --- /dev/null +++ b/web/src/components/autocomplete/__tests__/AutocompleteApp.test.ts @@ -0,0 +1,220 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; +import { mount, flushPromises } from '@vue/test-utils'; +import type { NameResResult } from '../../../lib/nameres-types'; + +// Mock the network layer before any component import. +vi.mock('../../../lib/nameres-api', () => ({ + parseSearchTerms: vi.fn(), + fetchNameResLookup: vi.fn(), + validateExpectedCuries: vi.fn(), +})); +vi.mock('../../../lib/curie-links', () => ({ + loadPrefixMap: vi.fn(async () => ({})), + getCurieUrl: vi.fn(() => null), +})); + +import AutocompleteApp from '../AutocompleteApp.vue'; +import * as nameresApi from '../../../lib/nameres-api'; + +function setLocation(search: string, pathname = '/autocomplete') { + Object.defineProperty(window, 'location', { + value: { + search, + pathname, + href: `http://localhost${pathname}${search}`, + }, + writable: true, + configurable: true, + }); +} + +function mkResult(curie: string, label: string): NameResResult { + return { curie, label, types: ['Disease'], taxa: [], synonyms: [], score: 1, clique_identifier_count: 1 }; +} + +describe('AutocompleteApp', () => { + beforeEach(() => { + setLocation(''); + vi.useFakeTimers(); + vi.mocked(nameresApi.fetchNameResLookup).mockReset(); + vi.mocked(nameresApi.fetchNameResLookup).mockResolvedValue([]); + }); + + afterEach(() => { + vi.useRealTimers(); + }); + + it('fires a single lookup after the debounce window when typing', async () => { + vi.mocked(nameresApi.fetchNameResLookup).mockResolvedValue([mkResult('MONDO:1', 'diabetes')]); + + const wrapper = mount(AutocompleteApp); + // Let onMounted + InstanceSelector's immediate emit settle. + await flushPromises(); + vi.mocked(nameresApi.fetchNameResLookup).mockClear(); + + const input = wrapper.find('#ac-query'); + await input.setValue('d'); + await input.setValue('di'); + await input.setValue('dia'); + // Still inside the debounce window — no calls yet. + expect(nameresApi.fetchNameResLookup).not.toHaveBeenCalled(); + + vi.advanceTimersByTime(150); + await flushPromises(); + + expect(nameresApi.fetchNameResLookup).toHaveBeenCalled(); + // All calls should be for the latest query. + for (const call of vi.mocked(nameresApi.fetchNameResLookup).mock.calls) { + expect(call[1]).toBe('dia'); + } + }); + + it('aborts in-flight requests when a new keystroke fires', async () => { + // Make fetchNameResLookup reject with AbortError when signal aborts. + vi.mocked(nameresApi.fetchNameResLookup).mockImplementation((_url, _q, _opts, signal) => { + return new Promise((_resolve, reject) => { + signal!.addEventListener('abort', () => { + const err: Error & { name?: string } = new Error('aborted'); + err.name = 'AbortError'; + reject(err); + }); + }); + }); + + const wrapper = mount(AutocompleteApp); + await flushPromises(); + vi.mocked(nameresApi.fetchNameResLookup).mockClear(); + + const input = wrapper.find('#ac-query'); + await input.setValue('di'); + vi.advanceTimersByTime(150); + await flushPromises(); + + // First fire happened; capture its signal. + const firstCall = vi.mocked(nameresApi.fetchNameResLookup).mock.calls[0]; + const firstSignal = firstCall?.[3] as AbortSignal; + expect(firstSignal?.aborted).toBe(false); + + // Now type more, let debounce fire again. + await input.setValue('diab'); + vi.advanceTimersByTime(150); + await flushPromises(); + + expect(firstSignal?.aborted).toBe(true); + }); + + it('passes limit=100 when Check button fires the deep lookup', async () => { + vi.mocked(nameresApi.fetchNameResLookup).mockResolvedValue([mkResult('MONDO:1', 'x')]); + + setLocation('?q=diab&expected=MONDO%3A1'); + const wrapper = mount(AutocompleteApp); + await flushPromises(); + vi.advanceTimersByTime(200); + await flushPromises(); + + // Clear the initial top-N call and then click Check. + vi.mocked(nameresApi.fetchNameResLookup).mockClear(); + + const btns = wrapper.findAll('button'); + const checkBtn = btns.find((b) => b.text().toLowerCase().includes('check')); + expect(checkBtn).toBeTruthy(); + await checkBtn!.trigger('click'); + await flushPromises(); + + expect(nameresApi.fetchNameResLookup).toHaveBeenCalled(); + const opts = vi.mocked(nameresApi.fetchNameResLookup).mock.calls[0][2]; + expect(opts.limit).toBe(100); + }); + + it('renders the single-instance Results view when only one instance is selected', async () => { + vi.mocked(nameresApi.fetchNameResLookup).mockResolvedValue([mkResult('MONDO:1', 'diabetes')]); + setLocation('?q=diab&target=dev'); + + const wrapper = mount(AutocompleteApp); + await flushPromises(); + vi.advanceTimersByTime(200); + await flushPromises(); + + // The comparison view has the "Comparison —" header; the single-instance view does not. + expect(wrapper.text()).not.toContain('Comparison —'); + expect(wrapper.text()).toContain('Copy API URL'); + }); + + // ── ES CI regression: target=es_ci must resolve to the ES CI base URL ───────── + // + // Bug: the comparison view showed an empty ES CI column even though clicking the + // "API↗" link returned results. Root cause: a mismatch between the env key used + // in the URL (`es_ci`) and how the instance URL was resolved / used as a key. + + it('resolves target=es_ci to the ES CI NameRes URL and queries it', async () => { + const esCiResult = mkResult('MONDO:0004979', 'asthma'); + vi.mocked(nameresApi.fetchNameResLookup).mockResolvedValue([esCiResult]); + + setLocation('?q=asthma&target=es_ci'); + const wrapper = mount(AutocompleteApp); + await flushPromises(); + vi.advanceTimersByTime(200); + await flushPromises(); + + // The fetch must have been called — not skipped because of an unrecognised env key. + expect(nameresApi.fetchNameResLookup).toHaveBeenCalled(); + + // The first argument to every call must be the ES CI base URL, not the bare + // string 'es_ci' (which would happen if resolveTarget fell through to its fallback). + const calls = vi.mocked(nameresApi.fetchNameResLookup).mock.calls; + for (const [baseUrl] of calls) { + expect(baseUrl).toContain('namelookup-es.ci.transltr.io'); + expect(baseUrl).not.toBe('es_ci'); + } + }); + + it('queries all four instances — including ES CI — when the URL lists target=dev&target=prod&target=ci&target=es_ci', async () => { + vi.mocked(nameresApi.fetchNameResLookup).mockImplementation((baseUrl) => { + if (baseUrl.includes('namelookup-es.ci.transltr.io')) { + return Promise.resolve([mkResult('MONDO:ES', 'es-ci-only result')]); + } + return Promise.resolve([mkResult('MONDO:OTHER', 'shared result')]); + }); + + setLocation('?q=diabetes&target=dev&target=prod&target=ci&target=es_ci'); + const wrapper = mount(AutocompleteApp); + await flushPromises(); + vi.advanceTimersByTime(200); + await flushPromises(); + + const calls = vi.mocked(nameresApi.fetchNameResLookup).mock.calls; + + // All four instances must have been queried. + expect(calls.length).toBeGreaterThanOrEqual(4); + + // ES CI specifically must be queried with its real URL, not 'es_ci'. + const esCiCall = calls.find(([baseUrl]) => baseUrl.includes('namelookup-es.ci.transltr.io')); + expect(esCiCall).toBeDefined(); + expect(esCiCall![0]).not.toBe('es_ci'); + + // The comparison view must be visible (4 queried instances → comparison, not single-instance). + expect(wrapper.text()).toContain('Comparison —'); + + // ES CI's unique result must appear in the rendered table. + expect(wrapper.text()).toContain('MONDO:ES'); + }); + + it('shows ES CI results in the comparison view column, not just an empty dash', async () => { + vi.mocked(nameresApi.fetchNameResLookup).mockImplementation((baseUrl) => { + if (baseUrl.includes('namelookup-es.ci.transltr.io')) { + return Promise.resolve([mkResult('MONDO:ES_UNIQUE', 'ES CI only')]); + } + return Promise.resolve([]); + }); + + setLocation('?q=diabetes&target=dev&target=es_ci'); + const wrapper = mount(AutocompleteApp); + await flushPromises(); + vi.advanceTimersByTime(200); + await flushPromises(); + + // The CURIE that only ES CI returned must be visible — it would be absent if the + // ES CI URL key in `perInstance` didn't match the key used by the comparison view. + expect(wrapper.text()).toContain('MONDO:ES_UNIQUE'); + }); +}); diff --git a/web/src/components/autocomplete/__tests__/AutocompleteForm.test.ts b/web/src/components/autocomplete/__tests__/AutocompleteForm.test.ts new file mode 100644 index 0000000..e5ca8ea --- /dev/null +++ b/web/src/components/autocomplete/__tests__/AutocompleteForm.test.ts @@ -0,0 +1,93 @@ +import { describe, it, expect } from 'vitest'; +import { mount } from '@vue/test-utils'; +import AutocompleteForm from '../AutocompleteForm.vue'; +import { DEFAULT_AUTOCOMPLETE_OPTIONS, DEFAULT_DEBOUNCE_MS } from '../../../lib/autocomplete-url-state'; +import type { NameResInstance, NameResApiOptions } from '../../../lib/nameres-types'; + +const instances: NameResInstance[] = [ + { name: 'NameRes Dev', env: 'dev', url: 'https://dev.example.com/' }, + { name: 'NameRes Prod', env: 'prod', url: 'https://prod.example.com/' }, +]; + +function makeProps(overrides: Partial> = {}) { + return { + instances, + query: '', + preset: 'disease' as const, + options: { ...DEFAULT_AUTOCOMPLETE_OPTIONS, biolink_type: 'DiseaseOrPhenotypicFeature', only_prefixes: 'MONDO|HP' } as NameResApiOptions, + selectedUrls: [instances[0].url], + expected: [], + expectedRaw: '', + debounceMs: DEFAULT_DEBOUNCE_MS, + highlight: true, + checking: false, + perInstance: new Map(), + queriedInstances: [instances[0]], + prefixMap: {}, + hasDeepResults: false, + ...overrides, + }; +} + +describe('AutocompleteForm', () => { + it('emits update:query on input', async () => { + const wrapper = mount(AutocompleteForm, { props: makeProps() }); + await wrapper.find('#ac-query').setValue('diabe'); + const emitted = wrapper.emitted('update:query'); + expect(emitted).toBeTruthy(); + expect(emitted![emitted!.length - 1]).toEqual(['diabe']); + }); + + it('preset change emits update:options with preset-implied biolink_type + only_prefixes', async () => { + const wrapper = mount(AutocompleteForm, { props: makeProps() }); + await wrapper.find('#ac-preset').setValue('gene'); + // First: update:preset. Second: update:options. + const presetEmitted = wrapper.emitted('update:preset'); + const optionsEmitted = wrapper.emitted('update:options'); + expect(presetEmitted?.[0]).toEqual(['gene']); + expect(optionsEmitted?.[0]?.[0]).toMatchObject({ + biolink_type: 'Gene', + only_prefixes: '', + }); + }); + + it('preset change to custom does NOT emit update:options', async () => { + const wrapper = mount(AutocompleteForm, { props: makeProps() }); + await wrapper.find('#ac-preset').setValue('custom'); + expect(wrapper.emitted('update:preset')?.[0]).toEqual(['custom']); + expect(wrapper.emitted('update:options')).toBeFalsy(); + }); + + it('hand-editing biolink_type away from preset switches preset to custom', async () => { + const wrapper = mount(AutocompleteForm, { props: makeProps() }); + // Simulate parent updating options to a hand-edited value. + await wrapper.setProps({ + options: { + ...DEFAULT_AUTOCOMPLETE_OPTIONS, + biolink_type: 'NotAPreset', + only_prefixes: '', + }, + }); + const presetEmitted = wrapper.emitted('update:preset'); + expect(presetEmitted?.[presetEmitted!.length - 1]).toEqual(['custom']); + }); + + it('renders the advanced options section (summary always visible)', () => { + const wrapper = mount(AutocompleteForm, { props: makeProps() }); + const summaries = wrapper.findAll('summary').map((s) => s.text()); + expect(summaries.some((s) => s.includes('Advanced options'))).toBe(true); + }); + + it('debounce select emits update:debounceMs', async () => { + const wrapper = mount(AutocompleteForm, { props: makeProps() }); + await wrapper.find('#ac-debounce').setValue('300'); + const emitted = wrapper.emitted('update:debounceMs'); + expect(emitted?.[0]).toEqual([300]); + }); + + it('highlight checkbox emits update:highlight', async () => { + const wrapper = mount(AutocompleteForm, { props: makeProps() }); + await wrapper.find('#ac-highlight').setValue(false); + expect(wrapper.emitted('update:highlight')?.[0]).toEqual([false]); + }); +}); diff --git a/web/src/components/nameres/NameResApp.vue b/web/src/components/nameres/NameResApp.vue index b51169d..313d115 100644 --- a/web/src/components/nameres/NameResApp.vue +++ b/web/src/components/nameres/NameResApp.vue @@ -4,6 +4,7 @@ import type { NameResResult, NameResInstance, NameResApiOptions, ParsedSearchTer import { DEFAULT_NAMERES_OPTIONS } from '../../lib/nameres-types'; import { parseSearchTerms, fetchNameResLookup } from '../../lib/nameres-api'; import { loadPrefixMap } from '../../lib/curie-links'; +import { sortInstances } from '../../lib/instance-prefs'; import { readNameResQueryState, buildNameResQueryUrl } from '../../lib/nameres-url-state'; import NameResForm from './NameResForm.vue'; import NameResComparisonView from './NameResComparisonView.vue'; @@ -15,6 +16,7 @@ const ENV_LABELS: Record = { dev: 'Dev', exp: 'Exp', ci: 'CI', + es_ci: 'ES CI', test: 'Test', prod: 'Production', }; @@ -172,9 +174,11 @@ async function handleSubmit(payload: { } resultsByInstance.value = resultMap; - queriedInstances.value = payload.instanceUrls - .map((url) => instances.find((inst) => inst.url === url) ?? { name: url, env: url, url }) - .filter((inst): inst is NameResInstance => inst != null); + queriedInstances.value = sortInstances( + payload.instanceUrls + .map((url) => instances.find((inst) => inst.url === url) ?? { name: url, env: url, url }) + .filter((inst): inst is NameResInstance => inst != null) + ); if (errors.length > 0) { error.value = `Some lookups failed: ${errors.slice(0, 5).join('; ')}${errors.length > 5 ? ` (+${errors.length - 5} more)` : ''}`; diff --git a/web/src/components/nodenorm/NodeNormApp.vue b/web/src/components/nodenorm/NodeNormApp.vue index 18929d5..41f6922 100644 --- a/web/src/components/nodenorm/NodeNormApp.vue +++ b/web/src/components/nodenorm/NodeNormApp.vue @@ -4,6 +4,7 @@ import type { NormalizedNode, NodeNormResponse, NodeNormInstance, ApiOptions } f import { DEFAULT_API_OPTIONS } from '../../lib/types'; import { fetchNormalizedNodes, parseCuries } from '../../lib/nodenorm-api'; import { loadPrefixMap } from '../../lib/curie-links'; +import { sortInstances } from '../../lib/instance-prefs'; import { readQueryState, buildQueryUrl } from '../../lib/url-state'; import NodeNormForm from './NodeNormForm.vue'; import ComparisonView from './ComparisonView.vue'; @@ -13,11 +14,12 @@ import endpoints from '../../../../config/translator-endpoints.json'; // Build instance list from shared config const ENV_LABELS: Record = { - dev: 'Dev', - exp: 'Exp', - ci: 'CI', - test: 'Test', - prod: 'Production', + dev: 'Dev', + exp: 'Exp', + ci: 'CI', + redis_ci: 'Redis CI', + test: 'Test', + prod: 'Production', }; const instances: NodeNormInstance[] = Object.entries(endpoints.nodenorm).map( @@ -171,9 +173,11 @@ async function handleSubmit(payload: { curies: string; instanceUrls: string[]; o } resultsByInstance.value = resultMap; - queriedInstances.value = payload.instanceUrls - .map((url) => instances.find((inst) => inst.url === url) ?? { name: url, env: url, url }) - .filter((inst): inst is NodeNormInstance => inst != null); + queriedInstances.value = sortInstances( + payload.instanceUrls + .map((url) => instances.find((inst) => inst.url === url) ?? { name: url, env: url, url }) + .filter((inst): inst is NodeNormInstance => inst != null) + ); if (errors.length > 0) { error.value = `Some instances failed: ${errors.join('; ')}`; diff --git a/web/src/components/shared/InstanceSelector.vue b/web/src/components/shared/InstanceSelector.vue index fe9447e..8406d86 100644 --- a/web/src/components/shared/InstanceSelector.vue +++ b/web/src/components/shared/InstanceSelector.vue @@ -8,15 +8,17 @@ import { sessionPrefs, savePrefs, loadPrefs } from '../../lib/instance-prefs'; * objects for use in result tables (ComparisonView column headers, etc.). */ const ENV_LABELS: Record = { - exp: 'RENCI Experimental', - dev: 'RENCI Dev', - ci: 'ITRB CI', - test: 'ITRB Test', - prod: 'ITRB Prod', + exp: 'RENCI Experimental', + dev: 'RENCI Dev', + ci: 'ITRB CI', + es_ci: 'ITRB ES CI', + redis_ci: 'ITRB Redis CI', + test: 'ITRB Test', + prod: 'ITRB Prod', }; /** Environments shown in the main section (always visible). */ -const PRIMARY_ENVS = new Set(['dev', 'ci', 'prod']); +const PRIMARY_ENVS = new Set(['dev', 'ci', 'es_ci', 'redis_ci', 'prod']); interface Instance { name: string; @@ -191,6 +193,14 @@ function removeCustomUrl() { customUrlAdded.value = null; } +/** Returns the display HTML for an instance's checkbox label. + * Safe: only developer-controlled strings reach v-html. */ +function labelHtml(inst: Instance): string { + if (inst.env === 'es_ci') return 'ITRB ES CI'; + if (inst.env === 'redis_ci') return 'ITRB Redis CI'; + return ENV_LABELS[inst.env] ?? inst.name; +} + function saveDefault() { const keys = [...selectedUrls.value].map( (url) => props.instances.find((i) => i.url === url)?.env ?? url, @@ -223,9 +233,7 @@ function saveDefault() { :checked="selectedUrls.has(inst.url)" @change="toggleUrl(inst.url)" /> - +