Svelte front end #95

sfoale · 2025-07-15T12:13:01Z

No description provided.

Basic aladin visualisation implementation complete.

Address linting issues.

Add search pointings page. More visualization tweaks. Signed-off-by: Steve Foale <sfoale@lco.global>

Visualization improvements.

Attempting to get visualization centring correct.

Refactor the api into individual services and types.

…atest image.

…credentials.

Copilot

Pull request overview

Adds a new SvelteKit frontend surface area (UI primitives, search/forms, alert “service” components) plus a typed API client/services layer and supporting tooling/config for building, testing, and deployment.

Changes:

Introduces reusable UI components (loading/error, card/button, carousel, form helpers) and new tables/search panels.
Adds typed API client (axios) + service modules + TS types for FastAPI endpoints, plus frontend build/test workflows.
Adds frontend runtime assets/config (Tailwind layers, app.html CDN deps, Docker/nginx, docs standards).

Reviewed changes

Copilot reviewed 91 out of 379 changed files in this pull request and generated 21 comments.

Show a summary per file

File	Description
frontend/src/lib/components/ui/LoadingState.svelte	New reusable loading-state UI component.
frontend/src/lib/components/ui/LoadingSpinner.svelte	New spinner component with sizing/message options.
frontend/src/lib/components/ui/FootprintVisualization.svelte	Adds Plotly footprint visualization UI.
frontend/src/lib/components/ui/ErrorToast.svelte	Adds global error toast UI.
frontend/src/lib/components/ui/ErrorMessage.svelte	Adds inline error/warn/info message UI.
frontend/src/lib/components/ui/ErrorBoundary.svelte	Adds UI error boundary with retry/reset.
frontend/src/lib/components/ui/ControlGroup.svelte	Adds labeled form control wrapper with help/error text.
frontend/src/lib/components/ui/Carousel.svelte	Adds image carousel with autoplay and controls.
frontend/src/lib/components/ui/Card.svelte	Adds base Card UI container component.
frontend/src/lib/components/ui/Button.svelte	Adds variant/size Button component with loading + link mode.
frontend/src/lib/components/ui/AsyncErrorBoundary.svelte	Adds async wrapper that shows spinner + uses ErrorBoundary.
frontend/src/lib/components/ui/AlertBanner.svelte	Adds dismissible alert banner component.
frontend/src/lib/components/tables/ReportingInstrumentsTable.svelte	Adds reporting instruments table using new UI primitives.
frontend/src/lib/components/search/PointingsTable.svelte	Adds pointings results table with selection support.
frontend/src/lib/components/search/PointingsSearchForm.svelte	Adds search filter form for pointings.
frontend/src/lib/components/search/DoiRequestPanel.svelte	Adds DOI request UI for selected pointings.
frontend/src/lib/components/layout/Navigation.svelte	Adds top navigation with auth links.
frontend/src/lib/components/layout/InstrumentStats.svelte	Adds instrument summary stats widgets.
frontend/src/lib/components/instruments/ExistingInstrumentsTable.svelte	Adds “existing instruments” reference table UI.
frontend/src/lib/components/forms/examples/RegisterFormExample.svelte	Example registration form using validation schemas.
frontend/src/lib/components/forms/examples/LoginFormExample.svelte	Example login form using validation schemas.
frontend/src/lib/components/forms/TimeField.svelte	Adds specialized datetime input + validation wrapper.
frontend/src/lib/components/forms/FootprintTypeSelector.svelte	Adds footprint type selector with conditional inputs.
frontend/src/lib/components/forms/CoordinateFields.svelte	Adds RA/Dec input fields with validation and summary.
frontend/src/lib/components/forms/ConditionalSection.svelte	Adds conditional section with slide animation.
frontend/src/lib/components/alerts/services/UrlParameterService.svelte	Adds URL param parsing/building “service component”.
frontend/src/lib/components/alerts/services/PaginationService.svelte	Adds pagination state “service component”.
frontend/src/lib/components/alerts/services/FilterManagementService.svelte	Adds alert filter state/options “service component”.
frontend/src/lib/components/alerts/services/AlertStatusService.svelte	Adds alert status helper “service component”.
frontend/src/lib/components/alerts/services/AlertSearchService.svelte	Adds alert autocomplete search “service component”.
frontend/src/lib/components/alerts/services/AlertDataProcessingService.svelte	Adds alert loading/processing “service component”.
frontend/src/lib/components/alerts/SearchFiltersForm.svelte	Adds alert search filters UI with autocomplete.
frontend/src/lib/components/alerts/AlertHeaderComponent.svelte	Adds alert header UI wiring status + download links.
frontend/src/lib/api/types/pointing.types.ts	Adds Pointing-related API types.
frontend/src/lib/api/types/misc.types.ts	Adds misc API response types.
frontend/src/lib/api/types/instrument.types.ts	Adds instrument + footprint API types.
frontend/src/lib/api/types/icecube.types.ts	Adds IceCube API types.
frontend/src/lib/api/types/galaxy.types.ts	Adds galaxy + filters API types.
frontend/src/lib/api/types/doi.types.ts	Adds DOI API types.
frontend/src/lib/api/types/candidate.types.ts	Adds candidate API types.
frontend/src/lib/api/types/alert.types.ts	Adds GW alert API types.
frontend/src/lib/api/services/search.service.ts	Adds combined search/DOI helper service.
frontend/src/lib/api/services/pointing.service.ts	Adds pointings API service functions.
frontend/src/lib/api/services/misc.service.ts	Adds health/status API service functions.
frontend/src/lib/api/services/instrument.service.ts	Adds instruments/footprints API service functions.
frontend/src/lib/api/services/icecube.service.ts	Adds IceCube API service functions.
frontend/src/lib/api/services/galaxy.service.ts	Adds galaxy API service functions.
frontend/src/lib/api/services/doi.service.ts	Adds DOI API service functions.
frontend/src/lib/api/services/candidate.service.ts	Adds candidate API service functions.
frontend/src/lib/api/services/auth.service.ts	Adds auth API service functions.
frontend/src/lib/api/services/alert.service.ts	Adds alert querying + contour helpers.
frontend/src/lib/api/services/ajax.service.ts	Adds legacy-style ajax endpoint wrappers.
frontend/src/lib/api/index.ts	Exports aggregated API surface + types.
frontend/src/lib/api/client.ts	Adds axios client with auth + environment baseURL logic.
frontend/src/app.html	Adds CDN deps for jQuery/Aladin/Plotly.
frontend/src/app.css	Adds Tailwind + design system layer utilities.
frontend/src/tests/setup.ts	Adds Vitest test setup/mocks.
frontend/scripts/migrate-styles.js	Adds migration helper script for design system classes.
frontend/package.json.docs-script	Adds docs script snippet file.
frontend/package.json	Adds frontend dependencies/scripts.
frontend/nginx.conf	Adds nginx config for SPA + API proxy.
frontend/eslint.config.js	Adds eslint config + ignore list.
frontend/docs/component-documentation-standards.md	Adds component documentation standards doc.
frontend/README.md	Adds frontend developer documentation.
frontend/Dockerfile	Adds multi-stage build + nginx runtime.
frontend/.prettierrc	Adds prettier config for Svelte.
frontend/.prettierignore	Adds prettier ignore patterns.
frontend/.npmrc	Enforces engine-strict for Node.
frontend/.gitignore	Adds frontend gitignore rules.
frontend/.env.example	Adds example env config for API base URL.
docker-compose.yml	Removes redis/celery services from compose.
argocd-config/cluster-gwtm-dev.yaml	Adds ArgoCD cluster secret config.
argocd-config/argocd-config-app.yaml	Adds ArgoCD app to sync config repo path.
argocd-config/README.md	Documents ArgoCD config bootstrap and workflow.
README.md	Updates root README with FastAPI quick start + env var list.
.github/workflows/frontend-tests.yml	Adds frontend CI (check/lint/test/coverage).
.github/workflows/fastapi-tests.yml	Adds FastAPI CI with Dockerized DB + API tests.
.github/workflows/build-all.yml	Adds multi-image build/push workflow.
.dockerignore	Expands dockerignore patterns for leaner builds.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-09T20:32:10Z

frontend/src/lib/components/ui/LoadingState.svelte

+	 * @default ''
+	 */
+	export let spinnerClass: string = '';
+


Reactive assignments are creating containerClass, spinnerSize, and textSize without declaring them. In Svelte (+ TS), assigning to undeclared variables is a compile-time error. Declare these (let containerClass = '', let spinnerSize = '', let textSize = '') with appropriate types before using them in $: blocks.

Suggested change

// Derived class strings used in reactive statements

let containerClass: string = '';

let spinnerSize: string = '';

let textSize: string = '';

Copilot · 2026-02-09T20:32:10Z

frontend/src/lib/components/ui/LoadingState.svelte

+		.filter(Boolean)
+		.join(' ');
+
+	$: spinnerSize = {


Reactive assignments are creating containerClass, spinnerSize, and textSize without declaring them. In Svelte (+ TS), assigning to undeclared variables is a compile-time error. Declare these (let containerClass = '', let spinnerSize = '', let textSize = '') with appropriate types before using them in $: blocks.

Copilot · 2026-02-09T20:32:11Z

frontend/src/lib/components/ui/LoadingState.svelte

+		large: 'h-12 w-12'
+	}[size];
+
+	$: textSize = {


Reactive assignments are creating containerClass, spinnerSize, and textSize without declaring them. In Svelte (+ TS), assigning to undeclared variables is a compile-time error. Declare these (let containerClass = '', let spinnerSize = '', let textSize = '') with appropriate types before using them in $: blocks.

Copilot · 2026-02-09T20:32:11Z

frontend/src/lib/components/ui/LoadingSpinner.svelte

+		lg: 'h-16 w-16',
+		xl: 'h-32 w-32'
+	};
+


spinnerClass and containerClass are assigned in reactive statements but never declared. This will fail compilation. Declare them as let spinnerClass = '' and let containerClass = '' (optionally typed) before the $: statements.

Suggested change

let spinnerClass: string = '';

let containerClass: string = '';

Copilot · 2026-02-09T20:32:11Z

frontend/src/lib/components/ui/Card.svelte

+	 * @type {'none' | 'sm' | 'md' | 'lg'}
+	 * @default 'md'
+	 */
+	export let padding: 'none' | 'sm' | 'md' | 'lg' = 'md';


The Card component only supports padding/shadow/hover/clickable/class, but other added components use <Card title=... variant=...> and named slots like slot=\"header\". Those props/slots will be ignored, breaking UI sections (e.g., headers never render). Either (a) extend Card.svelte to support title/variant and named slots (e.g., header, footer) and document them, or (b) update caller components to use Card’s actual API.

Copilot · 2026-02-09T20:32:15Z

frontend/src/lib/components/alerts/services/UrlParameterService.svelte

+	export function parseUrlParameters(pageStore: Readable<{ url: URL }>) {
+		pageStore.subscribe(($page) => {


This function subscribes to pageStore but never unsubscribes. If parseUrlParameters() can be called multiple times (or the component is created/destroyed), this will leak subscriptions and duplicate dispatches. Return the unsubscribe function from subscribe() so callers can clean up (typically via onDestroy).

Copilot · 2026-02-09T20:32:15Z

frontend/Dockerfile

@@ -0,0 +1,54 @@
+# Multi-stage build for production efficiency
+FROM node:18 AS builder


The frontend has engine-strict=true and the repository docs/scripts expect Node 20+, but the Dockerfile pins Node 18 for both build and dev stages—npm ci can fail. Also, the nginx:alpine image typically doesn’t include curl, so the HEALTHCHECK will fail by default. Update Node images to 20+ and either install curl (or switch to an available tool like wget) in the runtime image.

Copilot · 2026-02-09T20:32:16Z

frontend/Dockerfile

@@ -0,0 +1,54 @@
+# Multi-stage build for production efficiency
+FROM node:18 AS builder
+


The frontend has engine-strict=true and the repository docs/scripts expect Node 20+, but the Dockerfile pins Node 18 for both build and dev stages—npm ci can fail. Also, the nginx:alpine image typically doesn’t include curl, so the HEALTHCHECK will fail by default. Update Node images to 20+ and either install curl (or switch to an available tool like wget) in the runtime image.

Copilot · 2026-02-09T20:32:16Z

frontend/src/__tests__/setup.ts

+	PUBLIC_API_URL: 'http://localhost:8000'
+}));
+
+vi.mock('$env/dynamic/public', () => ({
+	env: {
+		PUBLIC_API_URL: 'http://localhost:8000'


The runtime client code reads env.PUBLIC_API_BASE_URL, but the test mocks provide PUBLIC_API_URL. This mismatch can cause tests to exercise the wrong baseURL path (or default fallback). Align the mocked env var name with PUBLIC_API_BASE_URL so tests reflect actual configuration.

Suggested change

PUBLIC_API_URL: 'http://localhost:8000'

}));

vi.mock('$env/dynamic/public', () => ({

env: {

PUBLIC_API_URL: 'http://localhost:8000'

PUBLIC_API_BASE_URL: 'http://localhost:8000'

}));

vi.mock('$env/dynamic/public', () => ({

env: {

PUBLIC_API_BASE_URL: 'http://localhost:8000'

Copilot · 2026-02-09T20:32:16Z

frontend/package.json.docs-script

+}
+
+// Add these to your existing package.json


This file contains trailing // comments, so it’s not valid JSON. If it’s meant as documentation, consider renaming to .md (or .jsonc) to avoid tooling confusion and accidental parsing failures.

Suggested change

}

// Add these to your existing package.json

}

- Add explicit let declarations for reactive variables in UI components. - Extend Card component with title and variant props for callers. - Fix unreachable spinner in Button anchor branch. - Replace ErrorBoundary resetOnPropsChange with resetKey pattern. - Fix ControlGroup SSR hydration mismatch and deprecated substr. - Fix AlertSearchService using undefined currentParams variable. - Fix null handling for URLSearchParams.get() in FilterManagementService. - Fix subscription leak in UrlParameterService with onDestroy cleanup. - Remove stray escape characters in SearchFiltersForm FAR label. - Update Dockerfile from Node 18 to Node 20 and use wget for healthcheck. - Align test setup env var name to PUBLIC_API_BASE_URL. - Rename package.json.docs-script to .md to avoid invalid JSON.

github-actions · 2026-02-11T16:08:20Z

{"total": {"lines":{"total":1140,"covered":592,"skipped":0,"pct":51.92},"statements":{"total":1140,"covered":592,"skipped":0,"pct":51.92},"functions":{"total":43,"covered":40,"skipped":0,"pct":93.02},"branches":{"total":215,"covered":209,"skipped":0,"pct":97.2},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":100}}
,"/home/runner/work/gwtm/gwtm/frontend/src/lib/stores/auth.ts": {"lines":{"total":154,"covered":0,"skipped":0,"pct":0},"functions":{"total":1,"covered":0,"skipped":0,"pct":0},"statements":{"total":154,"covered":0,"skipped":0,"pct":0},"branches":{"total":1,"covered":0,"skipped":0,"pct":0}}
,"/home/runner/work/gwtm/gwtm/frontend/src/lib/stores/formStore.ts": {"lines":{"total":352,"covered":0,"skipped":0,"pct":0},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":352,"covered":0,"skipped":0,"pct":0},"branches":{"total":1,"covered":1,"skipped":0,"pct":100}}
,"/home/runner/work/gwtm/gwtm/frontend/src/lib/utils/astronomicalCalculations.ts": {"lines":{"total":64,"covered":64,"skipped":0,"pct":100},"functions":{"total":4,"covered":4,"skipped":0,"pct":100},"statements":{"total":64,"covered":64,"skipped":0,"pct":100},"branches":{"total":10,"covered":10,"skipped":0,"pct":100}}
,"/home/runner/work/gwtm/gwtm/frontend/src/lib/utils/errorHandling.ts": {"lines":{"total":220,"covered":194,"skipped":0,"pct":88.18},"functions":{"total":15,"covered":15,"skipped":0,"pct":100},"statements":{"total":220,"covered":194,"skipped":0,"pct":88.18},"branches":{"total":77,"covered":73,"skipped":0,"pct":94.8}}
,"/home/runner/work/gwtm/gwtm/frontend/src/lib/validation/validators.ts": {"lines":{"total":350,"covered":334,"skipped":0,"pct":95.42},"functions":{"total":22,"covered":20,"skipped":0,"pct":90.9},"statements":{"total":350,"covered":334,"skipped":0,"pct":95.42},"branches":{"total":126,"covered":125,"skipped":0,"pct":99.2}}
}

- Split function.py into focused modules (type_checks, geometry, doi, formatters) - Add AlertRole StrEnum for type-safe alert role comparisons - Refactor candidate filters to data-driven pattern with operator lookups - Replace grade calculator if/elif chains with threshold table lookups - Replace repeated probability rounding with getattr/setattr loop - Use strftime for date formatting in delete_test_alerts - Add local filesystem storage backend to gwtm_io - Add @contextmanager db_session() wrapper, delete unused db/utils.py - Migrate test deps to pyproject.toml, update CI workflow

sfoale added 30 commits June 17, 2025 12:06

Initial steps for svelte front end. Work in progress.

7fa0df5

Update readme

a00851a

Adding visualisation. Work in progress.

8d28223

Merge fastapi branch.

82dee5e

Basic aladin visualisation implementation complete.

Add missing files

d428471

Default to unpaginated list for query_alerts.

dc154b9

No authorisation required for alert query.

d91a5ab

Make visualization page more modular.

62df90a

Add reporting instruments page.

2072d6c

Address linting issues.

Refactor extracting reusable ui components

d601521

Extend query alerts endpoint to the instrument id page.

f54cce6

Adding footprint visualization to the instrument page.

46cc1c8

Refactoring to extract common functionality.

614a74b

Refactor: extarct astro calculations.

f44e754

Refactor: add data loader service.

287a356

Refactor: extract AlertTypeManager.

369c77e

Refactoring: add VisualizationDataManager

fe6af1e

Refactoring to extract reusable components.

86d8c90

Add search pointings page. More visualization tweaks. Signed-off-by: Steve Foale <sfoale@lco.global>

Added functionality for pointings page.

087a5a1

Visualization improvements.

Get front page image carousel working.

4c289e3

Attempting to get visualization centring correct.

Fix visualization centering.

1c09ced

Fix time slider on visualisation page.

ad44d27

Refactor the api into individual services and types.

Add instruments query page

ae719aa

Refactor alerts page using service components

ae50664

Refactored alerts select page extracting components.

83ee64d

Fix alert page event explorer summary tab.

3de7ab1

Fix linting issues and formatting.

8e306b7

Fix unused variables, missing keys errors etc.

094f688

Fix form validation and empty object types

c233a60

Implement JWT authentication and update frontend.

9303769

sfoale added 10 commits December 8, 2025 15:16

Set imagePullPolicy to Always for listener images to Always to pull l…

e87d523

…atest image.

Refactor listener API config to separate host/port/path fields.

b5483ef

Configure ingress for IP-based access and use port 80 for listeners.

a593e0b

Fix ingress template YAML indentation for catch-all routing.

2b1a1ab

Add GitOps-managed ArgoCD configuration

fc5c2de

Add instructions for adding a values-secrets.yaml to provide storage …

36b77d5

…credentials.

Update frontend README

a03d85b

Prettier README to pass linting.

a7ff18e

Add template file for values-secrets.yaml.

d7aad4a

Bump version of Aladin Lite to use latest 3.7.0-beta.

3f807ef

moira-andrews self-requested a review February 4, 2026 19:59

Fix liniting error.

5fc22ab

cmccully requested a review from Copilot February 9, 2026 20:27

Copilot AI reviewed Feb 9, 2026

View reviewed changes

sfoale added 9 commits February 10, 2026 10:57

Add swift support to flask interface.

19edb58

No longer hard code storage bucket source for flask.

b9ffbc5

Bump memory available for flask in dev.

ff01ce1

Bump memory and cpu for prod deployments too.

3aecb36

Address fastapi review comments.

9c8397d

More review comments addressed.

5042492

Fix test failures

57896bf

Address more test failures

fc085a8

cmccully changed the base branch from master to fastapi February 11, 2026 16:52

sfoale added 5 commits February 12, 2026 11:00

Fix contour loading by replacing pd.read_json with json.loads

f24d52c

Fix alternate graceid lookup (e.g. GW190425 -> S190425z)

d8e6cda

Formatting only

4710be4

Formatting only

35bf731

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Svelte front end #95

Svelte front end #95

Uh oh!

sfoale commented Jul 15, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

github-actions bot commented Feb 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

+	// Derived class strings used in reactive statements
+	let containerClass: string = '';
+	let spinnerSize: string = '';
+	let textSize: string = '';



	let spinnerClass: string = '';
	let containerClass: string = '';

		export function parseUrlParameters(pageStore: Readable<{ url: URL }>) {
		pageStore.subscribe(($page) => {

		@@ -0,0 +1,54 @@
		# Multi-stage build for production efficiency
		FROM node:18 AS builder

		}

		// Add these to your existing package.json No newline at end of file

Svelte front end #95

Are you sure you want to change the base?

Svelte front end #95

Uh oh!

Conversation

sfoale commented Jul 15, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant