Attach config to incoming data attribute

src/App.vue

@@ -3,13 +3,13 @@ import { GalaxyCharts } from "galaxy-charts";
 import Plugin from "./Plugin.vue";
 
 defineProps<{
-    config: object;
+    credentials?: RequestCredentials;
     xml: string;
 }>();
 </script>
 
 <template>
-    <GalaxyCharts :config="config" :xml="xml">
+    <GalaxyCharts :credentials="credentials" :xml="xml">
         <template #default="{ datasetId, datasetUrl, root, settings, specs, tracks }">
             <Plugin
                 :dataset-id="datasetId"

src/components/GalaxyCharts.vue

@@ -10,7 +10,7 @@ import { useConfigStore } from "@/store/configStore";
 import { InputElementType, InputValuesType, PluginConfigType } from "@/types";
 
 const props = defineProps<{
-    config: PluginConfigType;
+    credentials?: RequestCredentials;
     xml: string;
 }>();
 
@@ -30,13 +30,11 @@ const trackInputs = ref<Array<InputElementType>>([]);
 const trackValues = ref<Array<InputValuesType>>([]);
 
 // Parse incoming visualization details
-const { root, visualizationConfig, visualizationId, visualizationPlugin, visualizationTitle } = parseIncoming(
-    props.config,
-);
+const { root, visualizationConfig, visualizationId, visualizationPlugin, visualizationTitle } = parseIncoming();
 
 // Store values in config store
 const configStore = useConfigStore();
-configStore.setCredentials(props.config.credentials || "include");
+configStore.setCredentials(props.credentials || "include");
 configStore.setRoot(root || "/");
 
 // Collect plugin details and parse incoming settings

src/main.js

@@ -1,22 +1,27 @@
 import { createApp, h } from "vue";
 import App from "./App.vue";
 
-const config = {
-    credentials: process.env.credentials,
-    dataset_url: null,
-    dataset_id: "12e4b4feedfe9f3f",
-    settings: {
-        setting_text: "My Test Setting",
-        setting_boolean: true,
-        setting_conditional: {
-            case_false: "something else",
-            test_condition: "false",
+const dataIncoming = {
+    visualization_config: {
+        dataset_url: null,
+        dataset_id: "12e4b4feedfe9f3f",
+        settings: {
+            setting_text: "My Test Setting",
+            setting_boolean: true,
+            setting_conditional: {
+                case_false: "something else",
+                test_condition: "false",
+            },
         },
     },
 };
 
 const xml = "galaxy-charts.xml";
 
+// Attach config to the data-incoming attribute
+const appElement = document.querySelector("#app");
+appElement.setAttribute("data-incoming", JSON.stringify(dataIncoming));
+
 createApp({
-    render: () => h(App, { config: config, xml: xml }),
+    render: () => h(App, { credentials: process.env.credentials, xml: xml }),
 }).mount("#app");

src/utilities/parseIncoming.ts

@@ -8,7 +8,7 @@ interface ParsedIncoming {
     visualizationTitle: string;
 }
 
-export function parseIncoming(config: PluginConfigType): ParsedIncoming {
+export function parseIncoming(): ParsedIncoming {
     // Access attached data
     const element = document.getElementById("app");
     const incoming = JSON.parse(element?.getAttribute("data-incoming") || "{}") || {};
@@ -20,7 +20,7 @@ export function parseIncoming(config: PluginConfigType): ParsedIncoming {
     const visualizationTitle = incoming.visualization_title || "Unnamed Visualization";
 
     // Parse chart dict
-    let visualizationConfig = incoming.visualization_config || config;
+    let visualizationConfig = incoming.visualization_config;
     if (incoming.visualization_config?.chart_dict) {
         const chartDict = incoming.visualization_config.chart_dict;
         visualizationConfig.groups = chartDict.groups;