diff --git a/packages/openlayers/Makefile b/packages/openlayers/Makefile new file mode 100644 index 00000000..f8c0d0d4 --- /dev/null +++ b/packages/openlayers/Makefile @@ -0,0 +1,61 @@ +SHELL := /bin/bash + +.DEFAULT_GOAL := help + +HOST ?= 127.0.0.1 +PORT ?= 4173 +GALAXY_ROOT ?= http://127.0.0.1:8080 +GALAXY_DATASET_ID ?= +GALAXY_KEY ?= + +.PHONY: help deps deps-update test test-unit test-e2e test-e2e-update build check dev + +help: + @printf "%s\n" \ + "OpenLayers package targets" \ + "" \ + "Targets:" \ + " make deps Install package dependencies with npm" \ + " make deps-update Bump package dependencies to latest releases" \ + " make test Run unit tests followed by Playwright e2e tests" \ + " make test-unit Run only the Vitest unit tests" \ + " make test-e2e Run only the Playwright e2e tests" \ + " make test-e2e-update Regenerate Playwright snapshot baselines" \ + " make build Build the production bundle" \ + " make check Run tests and then build" \ + " make dev Start the Vite dev server" \ + "" \ + "Variables:" \ + " HOST Dev server host (default: $(HOST))" \ + " PORT Dev server port (default: $(PORT))" \ + " GALAXY_ROOT Galaxy root URL (default: $(GALAXY_ROOT))" \ + " GALAXY_DATASET_ID Optional Galaxy dataset ID; falls back to a sample GeoJSON if unset" \ + " GALAXY_KEY Optional Galaxy API key" + +deps: + npm install + +deps-update: + npm update + +test: + npm test + +test-unit: + npm run test:unit + +test-e2e: + npm run test:e2e + +test-e2e-update: + npm run test:e2e -- --update-snapshots + +build: + npm run build + +check: + $(MAKE) test + $(MAKE) build + +dev: + GALAXY_ROOT="$(GALAXY_ROOT)" GALAXY_DATASET_ID="$(GALAXY_DATASET_ID)" GALAXY_KEY="$(GALAXY_KEY)" npm run dev -- --host "$(HOST)" --port "$(PORT)" diff --git a/packages/openlayers/README.md b/packages/openlayers/README.md index 608124c5..cb7d193b 100644 --- a/packages/openlayers/README.md +++ b/packages/openlayers/README.md @@ -1,3 +1,34 @@ # Galaxy OpenLayers Galaxy OpenLayers is a visualization that implements features of [OL10](https://github.com/openlayers) within [Galaxy Charts](https://galaxyproject.github.io/galaxy-charts/) JavaScript-based library for the [Galaxy Project](https://github.com/galaxyproject/galaxy) platform. + +## Make Targets + +Run all commands from `packages/openlayers`. + +- `make deps` installs package dependencies with npm. +- `make deps-update` bumps dependencies to the latest releases tracked in `package.json` and `package-lock.json`. +- `make test` runs the Vitest unit tests followed by the Playwright e2e tests. +- `make test-unit` runs only the Vitest unit tests. +- `make test-e2e` runs only the Playwright e2e tests (requires `make dev` running in another terminal). +- `make test-e2e-update` regenerates the Playwright snapshot baselines under `test-data/`. +- `make build` builds the production bundle into `static/`. +- `make check` runs tests and then builds. +- `make dev` starts the Vite dev server. + +## Local Dev + +`make dev` runs the Vite dev server. With no arguments it serves the visualization with a `__test__` dataset id, which `Plugin.vue` resolves to a sample GeoJSON file (`http://cdn.jsdelivr.net/gh/galaxyproject/galaxy-test-data/1.geojson`) so you can iterate without a running Galaxy. + +```bash +cd packages/openlayers +make dev +``` + +To test against a real Galaxy dataset, pass `GALAXY_DATASET_ID` (and optionally `GALAXY_ROOT` / `GALAXY_KEY`): + +```bash +make dev GALAXY_DATASET_ID= +make dev GALAXY_DATASET_ID= GALAXY_ROOT=http://127.0.0.1:8080 +make dev GALAXY_DATASET_ID= GALAXY_ROOT=https://usegalaxy.org GALAXY_KEY= +``` diff --git a/packages/openlayers/package.json b/packages/openlayers/package.json index e6e5ab04..ed86eab2 100644 --- a/packages/openlayers/package.json +++ b/packages/openlayers/package.json @@ -1,31 +1,38 @@ { "name": "@galaxyproject/openlayers", - "version": "0.0.6", + "version": "0.0.7", "type": "module", "license": "MIT", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", - "prettier": "prettier --write 'package.json' '*.js' 'src/**/*.js' 'src/**/*.vue'" + "prettier": "prettier --write 'package.json' '*.js' 'src/**/*.js' 'src/**/*.vue'", + "test": "npm run test:unit && npm run test:e2e", + "test:unit": "vitest --run", + "test:watch": "vitest --watch", + "test:e2e": "playwright test" }, - "files": ["static"], + "files": [ + "static" + ], "devDependencies": { "@heroicons/vue": "^2.1.5", - "@vitejs/plugin-vue": "^5.0.5", - "autoprefixer": "^10.4.19", - "axios": "^1.7.7", + "@playwright/test": "^1.56.0", + "@tailwindcss/vite": "^4.2.2", + "@vitejs/plugin-vue": "^6.0.5", + "axios": "^1.15.0", "file-saver": "^2.0.5", - "galaxy-charts": "^0.0.73", + "galaxy-charts": "^0.1.9", "galaxy-charts-xml-parser": "^1.0.3", - "ol": "^10.2.1", - "postcss": "^8.4.40", - "prettier": "^3.3.3", - "shpjs": "^6.1.0", - "tailwindcss": "^3.4.7", - "typescript": "^5.5.4", - "vite": "^5.3.4", - "vitest": "^3.0.9", - "vue": "^3.4.31" + "happy-dom": "^20.0.11", + "ol": "^10.8.0", + "prettier": "^3.8.1", + "shpjs": "^6.2.0", + "tailwindcss": "^4.2.2", + "typescript": "^6.0.2", + "vite": "^8.0.8", + "vitest": "^4.1.4", + "vue": "^3.5.32" } } diff --git a/packages/openlayers/playwright.config.ts b/packages/openlayers/playwright.config.ts new file mode 100644 index 00000000..fa2a8004 --- /dev/null +++ b/packages/openlayers/playwright.config.ts @@ -0,0 +1,9 @@ +import { defineConfig } from "@playwright/test"; + +export default defineConfig({ + snapshotPathTemplate: "{testDir}/test-data/{arg}.png", + testIgnore: ["src/**"], + use: { + headless: !!process.env.CI, + }, +}); diff --git a/packages/openlayers/postcss.config.js b/packages/openlayers/postcss.config.js deleted file mode 100644 index 49c0612d..00000000 --- a/packages/openlayers/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/packages/openlayers/src/App.vue b/packages/openlayers/src/App.vue index dfdcba23..6be509ee 100644 --- a/packages/openlayers/src/App.vue +++ b/packages/openlayers/src/App.vue @@ -3,21 +3,26 @@ import { GalaxyCharts, type PluginIncomingType } from "galaxy-charts"; import Plugin from "./Plugin.vue"; defineProps<{ + collapse?: boolean; + container?: string; credentials?: RequestCredentials; incoming?: PluginIncomingType; }>();