diff --git a/src/App.test.js b/src/App.test.js
index 3e9105f..9d67630 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -19,6 +19,6 @@ describe("build user interface", () => {
         const wrapper = mount(App, { props: { incoming: incoming } });
         expect(wrapper.html()).toContain("Please wait...");
         await wrapper.vm.$nextTick();
-        expect(wrapper.html()).toContain('fill="#E30A17"');
+        expect(wrapper.html()).not.toContain('fill="#E30A17"');
     });
 });
diff --git a/src/components/GalaxyCharts.test.js b/src/components/GalaxyCharts.test.js
new file mode 100644
index 0000000..871907e
--- /dev/null
+++ b/src/components/GalaxyCharts.test.js
@@ -0,0 +1,62 @@
+import { describe, test, expect, mount } from "vitest";
+import { mount } from "@vue/test-utils";
+
+import Target from "./GalaxyCharts.vue";
+
+function mountTarget(incoming) {
+    return mount(Target, {
+        props: { incoming: incoming },
+        slots: {
+            default: `<template #default="{ datasetId, datasetUrl, root, settings, specs, tracks }">
+                <pre>{{ datasetId }}</pre>
+                <pre>{{ datasetUrl }}</pre>
+                <pre>{{ root }}</pre>
+                <pre>{{ settings }}</pre>
+                <pre>{{ specs }}</pre>
+                <pre>{{ tracks }}</pre>
+            </template>`,
+        },
+    });
+}
+
+describe("build user interface", () => {
+    test("Show error if dataset id and url are missing", async () => {
+        const wrapper = mount(Target);
+        expect(wrapper.html()).toContain("Visualization requires `dataset_id` or `dataset_url`.");
+    });
+
+    test("Load user interface only dataset id", async () => {
+        const incoming = {
+            visualization_config: { dataset_id: "MY_DATASET_ID" },
+        };
+        const wrapper = mountTarget(incoming);
+        expect(wrapper.html()).toContain("Please wait...");
+        await wrapper.vm.$nextTick();
+        const elements = wrapper.findAll("pre");
+        const values = ["MY_DATASET_ID", "/api/datasets/MY_DATASET_ID/display", "/", "{}", "{}", "[]"];
+        values.forEach((x, index) => expect(elements[index].text()).toEqual(x));
+        expect(wrapper.html()).not.toContain('fill="#E30A17"');
+    });
+
+    test("Load user interface", async () => {
+        const incoming = {
+            root: "ROOT",
+            visualization_config: {
+                dataset_id: "MY_DATASET_ID",
+                dataset_url: "MY_DATASET_URL",
+                settings: "SETTINGS",
+                tracks: "TRACKS",
+            },
+            visualization_plugin: {
+                specs: "SPECS",
+            },
+        };
+        const wrapper = mountTarget(incoming);
+        expect(wrapper.html()).toContain("Please wait...");
+        await wrapper.vm.$nextTick();
+        const elements = wrapper.findAll("pre");
+        const values = ["MY_DATASET_ID", "MY_DATASET_URL", "ROOT", "SETTINGS", "SPECS", "TRACKS"];
+        values.forEach((x, index) => expect(elements[index].text()).toEqual(x));
+        expect(wrapper.html()).not.toContain('fill="#E30A17"');
+    });
+});
diff --git a/src/components/GalaxyCharts.vue b/src/components/GalaxyCharts.vue
index 70ce843..db77712 100644
--- a/src/components/GalaxyCharts.vue
+++ b/src/components/GalaxyCharts.vue
@@ -115,7 +115,7 @@ function updateTracks(newTracks: Array<InputValuesType>): void {
             </n-float-button>
         </div>
         <SidePanel
-            v-else
+            v-else-if="!hidePanel"
             :dataset-id="datasetId"
             :description="description"
             :html="html"