Add api key handling

package.json

@@ -21,7 +21,7 @@
         "dist/galaxy-charts.umd.cjs"
     ],
     "scripts": {
-        "dev": "vite",
+        "dev": "vite build && vite",
         "build": "vite build",
         "preview": "vite preview",
         "prettier": "prettier --write 'package.json' '*.js' 'src/**/*.js' 'src/**/*.vue'",

server.config.js

@@ -1,3 +1,3 @@
 export default {
-    GALAXY_API: "http://127.0.0.1:8080/api",
+    GALAXY_ROOT: "http://127.0.0.1:8080",
 };

src/App.vue

@@ -2,7 +2,8 @@
 import { GalaxyCharts } from "galaxy-charts";
 import Plugin from "@/Plugin.vue";
 const config = {
-    dataset_url: "galaxy-charts.txt",
+    dataset_url: null,
+    dataset_id: "unavailable",
     settings: {
         setting_text: "My Test Setting",
         setting_boolean: true,

src/api/datasets.js

@@ -1,13 +1,12 @@
-import axios from "axios";
 import { rethrowSimple } from "@/utilities/simpleError";
+import { fetcher } from "@/utilities/fetcher";
 import { useConfigStore } from "@/store/configStore";
 
 export async function datasetsGet(id) {
     const configStore = useConfigStore();
     const url = `${configStore.getRoot()}api/datasets/${id}`;
     try {
-        const { data } = await axios.get(url);
-        return data;
+        return await fetcher(url);
     } catch (err) {
         rethrowSimple(err);
     }
@@ -22,7 +21,7 @@ export async function datasetsGetColumns(datasetId, columnList) {
             provider: "dataset-column",
             indeces: columnList.toString(),
         }).toString();
-        const { data } = await axios.get(`${url}?${params}`);
+        const data = await fetcher(`${url}?${params}`);
         const columnLength = columnList.length;
         const results = new Array(columnLength);
         for (let i = 0; i < results.length; i++) {

src/components/ApiStatus.vue

@@ -18,7 +18,7 @@ async function checkVersion() {
         version.value = await versionGet(props.root);
     } catch (err) {
         console.log(
-            "Unable to connect to Galaxy. Verify Galaxy is running and properly configured in `server.config.js`.",
+            `Unable to connect to Galaxy. Verify Galaxy is running and properly configured in 'server.config.js'.`,
         );
         version.value = "";
     }
@@ -34,14 +34,14 @@ checkVersion();
                 <CheckCircleIcon class="text-green-600" />
             </n-icon>
         </template>
-        <span class="text-xs">Connected to Galaxy Version {{ version }}</span>
+        <span class="text-xs">Connected to Galaxy Version {{ version }}.</span>
     </n-tooltip>
     <n-tooltip v-else class="mx-1" trigger="hover">
         <template #trigger>
             <n-icon class="mx-1">
                 <ExclamationCircleIcon class="text-red-600" />
             </n-icon>
         </template>
-        <span class="text-xs">Galaxy is not running or not configured: `server.config.js`.</span>
+        <span class="text-xs">Galaxy is not accessible, review `server.config.js`.</span>
     </n-tooltip>
 </template>

src/store/configStore.js

@@ -1,29 +1,18 @@
 import { ref } from "vue";
 
-const apiKey = ref("");
 const root = ref("/");
 
 export function useConfigStore() {
-    function getApiKey() {
-        return apiKey.value;
-    }
-
     function getRoot() {
         return root.value;
     }
 
-    function setApiKey(newRoot) {
-        root.value = newRoot;
-    }
-
     function setRoot(newRoot) {
         root.value = newRoot;
     }
 
     return {
-        getApiKey,
         getRoot,
-        setApiKey,
         setRoot,
     };
 }

vite.config.js

@@ -6,24 +6,26 @@ import serverConfig from "./server.config";
 import { libInjectCss } from "vite-plugin-lib-inject-css";
 import { configDefaults } from "vitest/config";
 
-// determine server route
-let GALAXY_API = "";
-if (process.env.GALAXY_API) {
-    GALAXY_API = process.env.GALAXY_API;
-} else if (serverConfig.GALAXY_API) {
-    GALAXY_API = serverConfig.GALAXY_API;
+// collect Galaxy server root
+let GALAXY_ROOT = "";
+if (process.env.GALAXY_ROOT) {
+    GALAXY_ROOT = process.env.GALAXY_ROOT;
+} else if (serverConfig.GALAXY_ROOT) {
+    GALAXY_ROOT = serverConfig.GALAXY_ROOT;
 } else {
-    console.warn("GALAXY_API not available. Please provide as environment variable or specify in 'server.config'.");
+    console.log("GALAXY_ROOT not available. Please provide as environment variable or specify in 'server.config'.");
+}
+
+// collect Galaxy API key
+let GALAXY_KEY = "";
+if (process.env.GALAXY_KEY) {
+    GALAXY_KEY = process.env.GALAXY_KEY;
+} else {
+    console.log("GALAXY_KEY not available. Please provide as environment variable to access a remote Galaxy instance.");
 }
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue(), tailwindcss(), libInjectCss()],
-    resolve: {
-        alias: {
-            "@": path.resolve(__dirname, "src"),
-        },
-    },
     build: {
         lib: {
             entry: path.resolve(__dirname, "lib/galaxy-charts.js"),
@@ -37,12 +39,28 @@ export default defineConfig({
             },
         },
     },
+    define: {
+        'process.env.GALAXY_KEY': JSON.stringify(GALAXY_KEY),
+    },
+    plugins: [vue(), tailwindcss(), libInjectCss()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "src"),
+        },
+    },
     server: {
         proxy: {
             "/api": {
-                target: GALAXY_API,
                 changeOrigin: true,
-                rewrite: (path) => path.replace(/^\/api/, ""),
+                rewrite: (path) => {
+                    if (GALAXY_KEY) {
+                        const separator = path.includes("?") ? "&" : "?";
+                        return `${path}${separator}key=${GALAXY_KEY}`;
+                    } else {
+                        return path;
+                    }
+                },
+                target: GALAXY_ROOT,
             },
         },
     },