galaxyproject · guerler · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026
diff --git a/packages/openlayers/Makefile 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
@@ -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=<dataset-id>
+make dev GALAXY_DATASET_ID=<dataset-id> GALAXY_ROOT=http://127.0.0.1:8080
+make dev GALAXY_DATASET_ID=<dataset-id> GALAXY_ROOT=https://usegalaxy.org GALAXY_KEY=<api-key>
+```
diff --git 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
@@ -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
diff --git 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;
 }>();
 </script>
 
 <template>
-    <GalaxyCharts :credentials="credentials" :incoming="incoming">
-        <template #default="{ datasetId, datasetUrl, root, settings, specs, tracks }">
+    <GalaxyCharts :collapse="collapse" :container="container" :credentials="credentials" :incoming="incoming">
+        <template #default="{ datasetId, datasetUrl, root, save, settings, specs, tracks, transcripts, update }">
             <Plugin
                 :dataset-id="datasetId"
                 :dataset-url="datasetUrl"
                 :root="root"
                 :settings="settings"
                 :specs="specs"
-                :tracks="tracks" />
+                :tracks="tracks"
+                :transcripts="transcripts"
+                @save="save"
+                @update="update" />
         </template>
     </GalaxyCharts>
 </template>
diff --git a/packages/openlayers/src/Plugin.vue b/packages/openlayers/src/Plugin.vue
@@ -3,6 +3,8 @@ import { onMounted, ref, watch } from "vue";
 import { MapViewer } from "./openlayers";
 import { ArrowDownTrayIcon } from "@heroicons/vue/24/outline";
 
+const TEST_URL = "http://cdn.jsdelivr.net/gh/galaxyproject/galaxy-test-data/1.geojson";
+
 const props = defineProps({
     datasetId: String,
     datasetUrl: String,
@@ -18,8 +20,9 @@ const mv = new MapViewer({});
 
 function render() {
     viewport.value.innerHTML = "";
+    const datasetUrl = props.datasetId === "__test__" ? TEST_URL : props.datasetUrl;
     mv.loadFile(
-        props.datasetUrl,
+        datasetUrl,
         "geojson", //dataset.extension,
         props.settings.geometry_color,
         props.settings.geometry_type,

diff --git a/packages/openlayers/src/main.js b/packages/openlayers/src/main.js
@@ -20,7 +20,7 @@ async function main() {
         const dataIncoming = {
             visualization_config: {
                 // Placeholder for dataset ID
-                dataset_id: process.env.dataset_id,
+                dataset_id: process.env.dataset_id || "__test__",
                 // Placeholder for additional visualization settings
                 settings: {},
             },
@@ -40,7 +40,7 @@ async function main() {
      * and passing in any necessary props such as credentials.
      */
     createApp({
-        render: () => h(App, { credentials: process.env.credentials }),
+        render: () => h(App, { collapse: true, credentials: process.env.credentials }),
     }).mount("#app");
 }