galaxyproject · guerler · Aug 1, 2025 · Aug 1, 2025 · Aug 1, 2025 · Aug 1, 2025
diff --git a/packages/ghost/.gitignore b/packages/ghost/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/ghost/index.html b/packages/ghost/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/packages/ghost/package.json b/packages/ghost/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "@galaxyproject/ghost",
+    "private": false,
+    "version": "0.0.4",
+    "type": "module",
+    "files": [
+        "static"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "prettier": "prettier --write 'package.json' '*.js' 'src/*.js' 'public/*.js'"
+    },
+    "devDependencies": {
+        "jszip": "^3.10.1",
+        "prettier": "^3.6.2",
+        "vite": "^7.0.4"
+    }
+}
diff --git a/packages/ghost/prettier.config.js b/packages/ghost/prettier.config.js
@@ -0,0 +1,5 @@
+export default {
+    tabWidth: 4,
+    printWidth: 120,
+    bracketSameLine: true,
+};
diff --git a/packages/ghost/public/ghost-worker.js b/packages/ghost/public/ghost-worker.js
@@ -0,0 +1,127 @@
+const DESTROY = 5000;
+const TIMEOUT = 100;
+
+const virtualFS = new Map();
+
+let ready = false;
+let scope = "";
+
+const getMimeType = (path) => {
+    const mimeMap = {
+        ".css": "text/css",
+        ".js": "application/javascript",
+        ".json": "application/json",
+        ".jsonp": "application/javascript",
+        ".png": "image/png",
+        ".jpg": "image/jpeg",
+        ".html": "text/html",
+        ".svg": "image/svg+xml",
+        ".woff": "font/woff",
+        ".woff2": "font/woff2",
+        ".ttf": "font/ttf",
+    };
+    const ext = path.slice(path.lastIndexOf(".")).split("?")[0];
+    return mimeMap[ext] || "text/plain";
+};
+
+self.addEventListener("install", (event) => {
+    console.log("[GHOST] Installing...");
+    event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener("activate", (event) => {
+    console.log("[GHOST] Activating...");
+    event.waitUntil(clients.claim());
+});
+
+self.addEventListener("message", (event) => {
+    if (event.data.type === "CREATE") {
+        scope = event.data.scope;
+        const files = Object.entries(event.data.files);
+        for (const [path, content] of files) {
+            virtualFS.set(path, content);
+        }
+        console.log(`[GHOST] Serving ${files.length} files from ${scope}`);
+        ready = true;
+    }
+    if (event.data.type === "DESTROY") {
+        virtualFS.clear();
+        console.log("[GHOST] Destroyed filesystem");
+        ready = false;
+    }
+});
+
+self.addEventListener("fetch", (event) => {
+    console.log("[GHOST] Intercepting...");
+    const url = new URL(event.request.url);
+    const isSameOrigin = url.origin === self.location.origin;
+    const scoped = scope.endsWith("/") ? scope : scope + "/";
+
+    // Only handle same-origin requests
+    if (isSameOrigin) {
+        if (event.request.method === "GET" && url.pathname.startsWith(scoped)) {
+            event.respondWith(
+                (async () => {
+                    const start = Date.now();
+                    while (!ready) {
+                        if (Date.now() - start > TIMEOUT * TIMEOUT) {
+                            return new Response("Filesystem not ready", {
+                                status: 503,
+                                headers: { "Cache-Control": "no-store" },
+                            });
+                        }
+                        await new Promise((r) => setTimeout(r, TIMEOUT));
+                    }
+                    const path = decodeURIComponent(url.pathname).split("?")[0];
+                    if (virtualFS.has(path)) {
+                        const mime = getMimeType(path);
+                        const content = virtualFS.get(path);
+                        return new Response(content, { headers: { "Content-Type": mime } });
+                    }
+                    return new Response("Not Found", { status: 404, statusText: "Not Found" });
+                })(),
+            );
+        } else {
+            // Block other same-origin requests (outside our scope)
+            console.error("[GHOST] Blocking same-origin request:", url.href);
+            event.respondWith(
+                new Response("Blocked by Service Worker", {
+                    status: 403,
+                    statusText: "Forbidden",
+                    headers: { "Content-Type": "text/plain" },
+                }),
+            );
+        }
+    }
+});
+
+// Function to check if there are any active clients within the same scope
+const checkClientsAndCleanup = async () => {
+    // Get all clients that are within the same scope
+    const clientsList = await clients.matchAll({
+        type: "window",
+        includeUncontrolled: true,
+    });
+
+    // Filter clients by scope
+    const scopedClients = clientsList.filter((client) => {
+        const clientUrl = new URL(client.url);
+        return clientUrl.pathname.startsWith(scope);
+    });
+
+    // If no scoped clients are present, start cleanup
+    if (scopedClients.length === 0) {
+        // Clear interval
+        clearInterval(clientCheckInterval);
+
+        // Cleanup logic: unregister service worker or any other resource cleanup
+        await self.registration.unregister();
+
+        // Clear filesystem
+        virtualFS.clear();
+        console.log("[GHOST] Service worker unregistered");
+    }
+};
+
+// Start checking for active clients
+const clientCheckInterval = setInterval(checkClientsAndCleanup, DESTROY);
diff --git a/packages/ghost/public/ghost.xml b/packages/ghost/public/ghost.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
+<visualization name="GHost" embeddable="true">
+    <description>Virtual Webserver for HTML archives</description>
+    <data_sources>
+        <data_source>
+            <model_class>HistoryDatasetAssociation</model_class>
+            <test test_attr="ext">qzv</test>
+        </data_source>
+    </data_sources>
+    <params>
+        <param required="true">dataset_id</param>
+    </params>
+    <entry_point entry_point_type="script" src="index.js" css="index.css" />
+    <tests>
+        <test>
+            <param name="dataset_id" label="Raincloud Baseline" ftype="qzv" value="https://raw.githubusercontent.com/qiime2/q2-fmt/master/demo/raincloud-baseline0.qzv" />
+        </test>
+        <test>
+            <param name="dataset_id" label="FastTree Empire" ftype="qzv" value="https://raw.githubusercontent.com/caporaso-lab/q2view-visualizations/main/uu-fasttree-empire.qzv" />
+        </test>
+    </tests>
+    <help format="markdown"><![CDATA[
+# What is GHost?
+
+GHost is a Galaxy visualization for securely displaying interactive websites that are packaged
+as QIIME 2 visualization files (`.qzv`) or similar ZIP archives containing an `index.html` file.
+These archives often contain JavaScript, and data assets for rich, client-side exploration of analysis results.
+
+When you open a `.qzv` dataset with GHost:
+
+1. The file is fetched and unzipped in your browser.
+2. The `index.html` is located and assets load through a **service worker** at a dedicated scope.
+3. The service worker serves only the files from the archive, blocking all other same-origin requests
+   (for example, API calls) to prevent malicious content from interacting with Galaxy.
+
+## Key Features
+
+- **Secure Sandbox**: Blocks access to Galaxy APIs from within the visualization.
+- **Dynamic Asset Loading**: No need to pre-extract archives on the server.
+- **Format Agnostic**: Works with any ZIP that contains a self-contained HTML visualization.
+
+## Security Notes
+
+- Only GET requests within the visualization's virtual scope are served.
+- All other same-origin requests are blocked with a `403 Forbidden` response.
+- Cross-origin requests are unaffected but subject to normal browser CORS rules.
+
+## When to Use GHost
+
+GHost is ideal for:
+- Viewing `.qzv` files generated by QIIME 2.
+- Displaying any self-contained HTML/JS/CSS visualization from a ZIP.
+- Running third-party visualizations in a safe, sandboxed environment inside Galaxy.
+    ]]></help>
+</visualization>
diff --git a/packages/ghost/public/logo.svg b/packages/ghost/public/logo.svg
diff --git a/packages/ghost/src/main.css b/packages/ghost/src/main.css
@@ -0,0 +1,25 @@
+:root {
+    --message-background: rgba(255, 255, 255, 0.9);
+    --message-color: rgba(0, 0, 0, 0.9);
+}
+
+#message {
+    background: var(--message-background);
+    border-radius: 4px;
+    color: var(--message-color);
+    display: none;
+    font-family: sans-serif;
+    font-weight: 100;
+    font-size: 0.85rem;
+    left: 1rem;
+    padding: 0.7rem;
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    word-break: break-all;
+    z-index: 9999;
+}
+
+body {
+    margin: 0;
+}