From c68cfd283c5b7e58e67c14844dce4bbbf99312a7 Mon Sep 17 00:00:00 2001 From: Gaurav Vaidya Date: Thu, 23 Apr 2026 23:39:08 -0400 Subject: [PATCH 01/13] Add Autocomplete playground tool to Astro/Vue frontend Live-as-you-type NameRes with debounce+abort, preset dropdown (Disease/Gene/SmallMolecule/Custom), latency badges, Solr highlighting, expected-CURIE rank check, and single- or multi-instance views with rank/label/types diff highlighting. State round-trips through the URL for shareable review links. Co-Authored-By: Claude Opus 4.7 --- CLAUDE.md | 39 +- web/README.md | 52 ++- web/src/components/Navbar.astro | 5 + .../autocomplete/AutocompleteApp.vue | 367 ++++++++++++++++++ .../AutocompleteComparisonView.vue | 148 +++++++ .../autocomplete/AutocompleteForm.vue | 291 ++++++++++++++ .../autocomplete/AutocompleteResults.vue | 137 +++++++ .../autocomplete/ExpectedCuriePanel.vue | 106 +++++ .../autocomplete/HighlightedFragment.vue | 29 ++ .../components/autocomplete/LatencyBadge.vue | 38 ++ .../__tests__/AutocompleteApp.test.ts | 142 +++++++ .../__tests__/AutocompleteForm.test.ts | 93 +++++ .../lib/__tests__/autocomplete-diff.test.ts | 113 ++++++ .../__tests__/autocomplete-url-state.test.ts | 157 ++++++++ web/src/lib/__tests__/debounce.test.ts | 58 +++ .../lib/__tests__/highlight-sanitize.test.ts | 69 ++++ web/src/lib/autocomplete-diff.ts | 138 +++++++ web/src/lib/autocomplete-presets.ts | 65 ++++ web/src/lib/autocomplete-url-state.ts | 141 +++++++ web/src/lib/debounce.ts | 39 ++ web/src/lib/highlight-sanitize.ts | 30 ++ web/src/pages/autocomplete.astro | 15 + web/src/pages/index.astro | 12 + web/tests/README.md | 31 +- 24 files changed, 2282 insertions(+), 33 deletions(-) create mode 100644 web/src/components/autocomplete/AutocompleteApp.vue create mode 100644 web/src/components/autocomplete/AutocompleteComparisonView.vue create mode 100644 web/src/components/autocomplete/AutocompleteForm.vue create mode 100644 web/src/components/autocomplete/AutocompleteResults.vue create mode 100644 web/src/components/autocomplete/ExpectedCuriePanel.vue create mode 100644 web/src/components/autocomplete/HighlightedFragment.vue create mode 100644 web/src/components/autocomplete/LatencyBadge.vue create mode 100644 web/src/components/autocomplete/__tests__/AutocompleteApp.test.ts create mode 100644 web/src/components/autocomplete/__tests__/AutocompleteForm.test.ts create mode 100644 web/src/lib/__tests__/autocomplete-diff.test.ts create mode 100644 web/src/lib/__tests__/autocomplete-url-state.test.ts create mode 100644 web/src/lib/__tests__/debounce.test.ts create mode 100644 web/src/lib/__tests__/highlight-sanitize.test.ts create mode 100644 web/src/lib/autocomplete-diff.ts create mode 100644 web/src/lib/autocomplete-presets.ts create mode 100644 web/src/lib/autocomplete-url-state.ts create mode 100644 web/src/lib/debounce.ts create mode 100644 web/src/lib/highlight-sanitize.ts create mode 100644 web/src/pages/autocomplete.astro diff --git a/CLAUDE.md b/CLAUDE.md index 23d6a57..fa3099a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -117,16 +117,19 @@ 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 (275 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`) + - Consumed by Python CLI/frontend (`nodenorm.py`) and Astro frontend (`NodeNormApp.vue`, `NameResApp.vue`, `AutocompleteApp.vue`) ### Data Flow @@ -148,25 +151,31 @@ 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 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 # Shared sessionPrefs + localStorage helpers (used by InstanceSelector) 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: diff --git a/web/README.md b/web/README.md index be63d53..e9a34ce 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. @@ -28,6 +28,26 @@ 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 +- **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 +61,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 (~275 tests across lib and components) npm run test:watch # Watch mode ``` @@ -78,24 +98,30 @@ 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 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 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..863d65f --- /dev/null +++ b/web/src/components/autocomplete/AutocompleteApp.vue @@ -0,0 +1,367 @@ + + + diff --git a/web/src/components/autocomplete/AutocompleteComparisonView.vue b/web/src/components/autocomplete/AutocompleteComparisonView.vue new file mode 100644 index 0000000..1f8a49a --- /dev/null +++ b/web/src/components/autocomplete/AutocompleteComparisonView.vue @@ -0,0 +1,148 @@ + + + diff --git a/web/src/components/autocomplete/AutocompleteForm.vue b/web/src/components/autocomplete/AutocompleteForm.vue new file mode 100644 index 0000000..65a1fd1 --- /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..7b08bea --- /dev/null +++ b/web/src/components/autocomplete/AutocompleteResults.vue @@ -0,0 +1,137 @@ + + + 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..cf4875d --- /dev/null +++ b/web/src/components/autocomplete/__tests__/AutocompleteApp.test.ts @@ -0,0 +1,142 @@ +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'); + }); +}); 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/lib/__tests__/autocomplete-diff.test.ts b/web/src/lib/__tests__/autocomplete-diff.test.ts new file mode 100644 index 0000000..fcd6834 --- /dev/null +++ b/web/src/lib/__tests__/autocomplete-diff.test.ts @@ -0,0 +1,113 @@ +import { describe, it, expect } from 'vitest'; +import type { NameResResult } from '../nameres-types'; +import { computeInstanceDiffs, classifyExpectedCurie } from '../autocomplete-diff'; + +function r(curie: string, label: string, types: string[] = ['Disease']): NameResResult { + return { curie, label, types, taxa: [], synonyms: [], score: 1, clique_identifier_count: 1 }; +} + +describe('computeInstanceDiffs', () => { + it('computes union sorted by best rank across instances', () => { + const perInstance = new Map([ + ['A', [r('X:1', 'Alpha'), r('X:2', 'Beta')]], + ['B', [r('X:3', 'Gamma'), r('X:1', 'Alpha')]], + ]); + const d = computeInstanceDiffs(perInstance); + // X:1 best rank 0 in A; X:3 best rank 0 in B; X:2 best rank 1 in A. + expect(d.unionCuries[0] === 'X:1' || d.unionCuries[0] === 'X:3').toBe(true); + expect(d.unionCuries).toContain('X:2'); + expect(d.unionCuries.length).toBe(3); + }); + + it('tracks presence per instance', () => { + const perInstance = new Map([ + ['A', [r('X:1', 'Alpha')]], + ['B', [r('X:2', 'Beta')]], + ]); + const d = computeInstanceDiffs(perInstance); + expect(d.presenceByInstance.get('A')?.has('X:1')).toBe(true); + expect(d.presenceByInstance.get('A')?.has('X:2')).toBe(false); + expect(d.presenceByInstance.get('B')?.has('X:2')).toBe(true); + }); + + it('detects label mismatch', () => { + const perInstance = new Map([ + ['A', [r('X:1', 'Alpha')]], + ['B', [r('X:1', 'Alpha (v2)')]], + ]); + const d = computeInstanceDiffs(perInstance); + expect(d.labelMismatch.has('X:1')).toBe(true); + }); + + it('detects types mismatch independent of ordering', () => { + const perInstance = new Map([ + ['A', [r('X:1', 'A', ['Disease', 'PhenotypicFeature'])]], + ['B', [r('X:1', 'A', ['PhenotypicFeature', 'Disease'])]], // same set, different order + ['C', [r('X:1', 'A', ['Disease'])]], + ]); + const d = computeInstanceDiffs(perInstance); + // A and B agree (set equality), but C differs. + expect(d.typesMismatch.has('X:1')).toBe(true); + }); + + it('agreeing types across instances do not produce a mismatch', () => { + const perInstance = new Map([ + ['A', [r('X:1', 'A', ['Disease', 'PhenotypicFeature'])]], + ['B', [r('X:1', 'A', ['PhenotypicFeature', 'Disease'])]], + ]); + const d = computeInstanceDiffs(perInstance); + expect(d.typesMismatch.has('X:1')).toBe(false); + }); + + it('computes uniqueToInstance', () => { + const perInstance = new Map([ + ['A', [r('X:1', 'x'), r('X:2', 'y')]], + ['B', [r('X:1', 'x'), r('X:3', 'z')]], + ]); + const d = computeInstanceDiffs(perInstance); + expect([...(d.uniqueToInstance.get('A') ?? [])]).toEqual(['X:2']); + expect([...(d.uniqueToInstance.get('B') ?? [])]).toEqual(['X:3']); + }); + + it('rankByCurie has Infinity-equivalent semantics via absence', () => { + const perInstance = new Map([ + ['A', [r('X:1', 'x')]], + ['B', []], + ]); + const d = computeInstanceDiffs(perInstance); + expect(d.rankByCurie.get('X:1')?.get('A')).toBe(0); + expect(d.rankByCurie.get('X:1')?.get('B')).toBeUndefined(); + }); + + it('handles empty input', () => { + const d = computeInstanceDiffs(new Map()); + expect(d.unionCuries).toEqual([]); + expect(d.labelMismatch.size).toBe(0); + }); +}); + +describe('classifyExpectedCurie', () => { + const top5 = [r('A:1', 'a'), r('A:2', 'a')]; + const deep = [r('A:1', 'a'), r('A:2', 'a'), r('A:3', 'a'), r('A:4', 'a')]; + + it('hit when present in top-N', () => { + const c = classifyExpectedCurie('A:1', top5, deep); + expect(c).toEqual({ curie: 'A:1', status: 'hit', rank: 0, of: 2 }); + }); + + it('deep when present in top-100 but not top-N', () => { + const c = classifyExpectedCurie('A:3', top5, deep); + expect(c).toEqual({ curie: 'A:3', status: 'deep', rank: 2, of: 4 }); + }); + + it('miss when not in deep either', () => { + const c = classifyExpectedCurie('NO:1', top5, deep); + expect(c.status).toBe('miss'); + expect(c.rank).toBe(-1); + }); + + it('unknown when no deep lookup has been performed', () => { + const c = classifyExpectedCurie('NO:1', top5, undefined); + expect(c.status).toBe('unknown'); + }); +}); diff --git a/web/src/lib/__tests__/autocomplete-url-state.test.ts b/web/src/lib/__tests__/autocomplete-url-state.test.ts new file mode 100644 index 0000000..2a7b124 --- /dev/null +++ b/web/src/lib/__tests__/autocomplete-url-state.test.ts @@ -0,0 +1,157 @@ +import { describe, it, expect, beforeEach } from 'vitest'; +import { + DEFAULT_AUTOCOMPLETE_OPTIONS, + DEFAULT_DEBOUNCE_MS, + parseExpectedCuries, +} from '../autocomplete-url-state'; + +function setLocation(search: string, pathname = '/autocomplete') { + Object.defineProperty(window, 'location', { + value: { search, pathname, href: `http://localhost${pathname}${search}` }, + writable: true, + configurable: true, + }); +} + +describe('readAutocompleteQueryState', () => { + beforeEach(() => { + setLocation(''); + }); + + it('returns defaults for empty query string', async () => { + setLocation(''); + const { readAutocompleteQueryState } = await import('../autocomplete-url-state'); + const s = readAutocompleteQueryState(); + expect(s.query).toBe(''); + expect(s.preset).toBe('disease'); + expect(s.targets).toEqual([]); + expect(s.options).toEqual({}); + expect(s.expected).toEqual([]); + expect(s.debounceMs).toBeUndefined(); + expect(s.highlight).toBeUndefined(); + }); + + it('parses q, preset, targets, expected', async () => { + setLocation('?q=diab&preset=gene&target=dev&target=prod&expected=NCBIGene:1234&expected=HGNC:5'); + const { readAutocompleteQueryState } = await import('../autocomplete-url-state'); + const s = readAutocompleteQueryState(); + expect(s.query).toBe('diab'); + expect(s.preset).toBe('gene'); + expect(s.targets).toEqual(['dev', 'prod']); + expect(s.expected).toEqual(['NCBIGene:1234', 'HGNC:5']); + }); + + it('falls back to default preset for invalid values', async () => { + setLocation('?preset=bogus'); + const { readAutocompleteQueryState } = await import('../autocomplete-url-state'); + expect((await (await import('../autocomplete-url-state')).readAutocompleteQueryState()).preset).toBe('disease'); + }); + + it('parses option overrides', async () => { + setLocation('?limit=20&autocomplete=false&biolink_type=Gene&only_prefixes=NCBIGene'); + const { readAutocompleteQueryState } = await import('../autocomplete-url-state'); + const s = readAutocompleteQueryState(); + expect(s.options.limit).toBe(20); + expect(s.options.autocomplete).toBe(false); + expect(s.options.biolink_type).toBe('Gene'); + expect(s.options.only_prefixes).toBe('NCBIGene'); + }); + + it('parses debounce and highlight', async () => { + setLocation('?debounce=300&highlight=false'); + const { readAutocompleteQueryState } = await import('../autocomplete-url-state'); + const s = readAutocompleteQueryState(); + expect(s.debounceMs).toBe(300); + expect(s.highlight).toBe(false); + }); + + it('ignores debounce that is not in the allowlist', async () => { + setLocation('?debounce=999'); + const { readAutocompleteQueryState } = await import('../autocomplete-url-state'); + const s = readAutocompleteQueryState(); + expect(s.debounceMs).toBeUndefined(); + }); +}); + +describe('buildAutocompleteQueryUrl', () => { + beforeEach(() => { + setLocation('', '/autocomplete'); + }); + + it('writes only q when everything else is default (disease preset)', async () => { + const { buildAutocompleteQueryUrl } = await import('../autocomplete-url-state'); + const url = buildAutocompleteQueryUrl({ + query: 'diab', + preset: 'disease', + targets: [], + options: { ...DEFAULT_AUTOCOMPLETE_OPTIONS, biolink_type: 'DiseaseOrPhenotypicFeature', only_prefixes: 'MONDO|HP' }, + expected: [], + debounceMs: DEFAULT_DEBOUNCE_MS, + highlight: true, + }); + expect(url).toBe('/autocomplete?q=diab'); + }); + + it('includes preset, targets, expected, and advanced flags when non-default', async () => { + const { buildAutocompleteQueryUrl } = await import('../autocomplete-url-state'); + const url = buildAutocompleteQueryUrl({ + query: 'nea', + preset: 'gene', + targets: ['dev', 'prod'], + options: { ...DEFAULT_AUTOCOMPLETE_OPTIONS, biolink_type: 'Gene' }, + expected: ['NCBIGene:1234'], + debounceMs: 0, + highlight: false, + }); + expect(url).toContain('q=nea'); + expect(url).toContain('preset=gene'); + expect(url).toContain('target=dev'); + expect(url).toContain('target=prod'); + expect(url).toContain('expected=NCBIGene%3A1234'); + expect(url).toContain('debounce=0'); + expect(url).toContain('highlight=false'); + // Biolink_type matches the preset's implied value — should NOT be written. + expect(url).not.toContain('biolink_type'); + }); + + it('writes biolink_type/only_prefixes when they differ from preset-implied values', async () => { + const { buildAutocompleteQueryUrl } = await import('../autocomplete-url-state'); + const url = buildAutocompleteQueryUrl({ + query: 'x', + preset: 'disease', + targets: [], + // Override only_prefixes away from the preset's "MONDO|HP" + options: { ...DEFAULT_AUTOCOMPLETE_OPTIONS, biolink_type: 'DiseaseOrPhenotypicFeature', only_prefixes: 'MONDO' }, + expected: [], + debounceMs: DEFAULT_DEBOUNCE_MS, + highlight: true, + }); + expect(url).toContain('only_prefixes=MONDO'); + expect(url).not.toContain('biolink_type'); + }); +}); + +describe('parseExpectedCuries', () => { + it('splits on whitespace, commas, and newlines', () => { + expect(parseExpectedCuries('MONDO:1 HP:2,CHEBI:3\nHGNC:4')).toEqual([ + 'MONDO:1', 'HP:2', 'CHEBI:3', 'HGNC:4', + ]); + }); + + it('normalizes prefix to upper case but preserves identifier casing', () => { + expect(parseExpectedCuries('mondo:0004979')).toEqual(['MONDO:0004979']); + expect(parseExpectedCuries('ncbigene:1234')).toEqual(['NCBIGENE:1234']); + }); + + it('deduplicates', () => { + expect(parseExpectedCuries('MONDO:1\nMONDO:1')).toEqual(['MONDO:1']); + }); + + it('skips blank tokens', () => { + expect(parseExpectedCuries(' \n MONDO:1 \n ')).toEqual(['MONDO:1']); + }); + + it('leaves CURIEs with no colon alone', () => { + expect(parseExpectedCuries('plainword')).toEqual(['plainword']); + }); +}); diff --git a/web/src/lib/__tests__/debounce.test.ts b/web/src/lib/__tests__/debounce.test.ts new file mode 100644 index 0000000..a33a82c --- /dev/null +++ b/web/src/lib/__tests__/debounce.test.ts @@ -0,0 +1,58 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; +import { debounce } from '../debounce'; + +describe('debounce', () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + afterEach(() => { + vi.useRealTimers(); + }); + + it('coalesces rapid calls into the last one', () => { + const spy = vi.fn(); + const d = debounce(spy, 100); + d('a'); + d('b'); + d('c'); + expect(spy).not.toHaveBeenCalled(); + vi.advanceTimersByTime(100); + expect(spy).toHaveBeenCalledTimes(1); + expect(spy).toHaveBeenCalledWith('c'); + }); + + it('fires again after the window elapses', () => { + const spy = vi.fn(); + const d = debounce(spy, 50); + d(1); + vi.advanceTimersByTime(50); + d(2); + vi.advanceTimersByTime(50); + expect(spy).toHaveBeenCalledTimes(2); + }); + + it('cancel() drops a pending invocation', () => { + const spy = vi.fn(); + const d = debounce(spy, 100); + d('x'); + d.cancel(); + vi.advanceTimersByTime(200); + expect(spy).not.toHaveBeenCalled(); + }); + + it('invokes synchronously when ms is 0', () => { + const spy = vi.fn(); + const d = debounce(spy, 0); + d('immediate'); + // No timer advance needed — should already have run. + expect(spy).toHaveBeenCalledTimes(1); + expect(spy).toHaveBeenCalledWith('immediate'); + }); + + it('invokes synchronously when ms is negative (treated as 0)', () => { + const spy = vi.fn(); + const d = debounce(spy, -10); + d('x'); + expect(spy).toHaveBeenCalledTimes(1); + }); +}); diff --git a/web/src/lib/__tests__/highlight-sanitize.test.ts b/web/src/lib/__tests__/highlight-sanitize.test.ts new file mode 100644 index 0000000..f7a3661 --- /dev/null +++ b/web/src/lib/__tests__/highlight-sanitize.test.ts @@ -0,0 +1,69 @@ +import { describe, it, expect } from 'vitest'; +import { sanitizeHighlight, stripHighlightTags, escapeHtml } from '../highlight-sanitize'; + +describe('sanitizeHighlight', () => { + it('preserves bare and ', () => { + expect(sanitizeHighlight('diabetes')).toBe('diabetes'); + }); + + it('preserves multiple em pairs', () => { + expect(sanitizeHighlight('a and b')).toBe('a and b'); + }); + + it('escapes '); + expect(out).toContain('hi'); + expect(out).not.toContain('