Add fetch option to docs

docs/content/configuration.md

@@ -21,19 +21,36 @@ Once connected to Galaxy, you can make API requests by importing `GalaxyApi` as
 import { GalaxyApi } from "galaxy-charts";
 
 async function fetchGalaxyVersion() {
-  try {
-    const { response, data } = await GalaxyApi().GET("/api/version");
-    console.log("API Version:", data);
-  } catch (error) {
-    console.error("Error fetching Galaxy version:", error);
-  }
+    try {
+        const { response, data } = await GalaxyApi().GET("/api/version");
+        console.log("API Version:", data);
+    } catch (error) {
+        console.error("Error fetching Galaxy version:", error);
+    }
 }
-
-fetchGalaxyVersion();
 ```
 
 `GalaxyApi` supports `GET`, `POST` and `PUT` requests.
 
+### Direct API Requests with Fetch
+If the `galaxy-charts` package is unavailable, you can still make API calls to remote Galaxy services directly using the [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) function. This method allows you to send HTTP requests to fetch data from remote servers or APIs. Below is an example of how you can use fetch to make a GET request:
+
+```javascript
+async function fetchGalaxyVersion() {
+    try {
+        const response = await fetch("/api/version", {
+            credentials: process.env.credentials || "include",
+            headers: { "Content-Type": "application/json" },
+            method: "GET",
+        });
+        const data = await response.json();
+        console.log("API Version:", data);
+    } catch (error) {
+        console.error("Error fetching Galaxy version:", error);
+    }
+}
+```
+
 ## How to Obtain an API Key
 
 1. Go to your Galaxy instance and sign in.

docs/content/introduction.md

@@ -39,7 +39,8 @@ With Galaxy Charts, you can develop visualizations locally in Vue, taking advant
 
 - **Local and Remote Data Access**: Load data locally or connect to a remote Galaxy instance to access data providers and resources through the Galaxy API, giving you flexibility in sourcing data.
 - **Automated Testing**: Test your visualization thoroughly in the local environment, ensuring it’s fully functional and bug-free before deploying it to Galaxy.
-- **Enhanced Development Workflow**: By integrating state-of-the-art development tools, Galaxy Charts provides a smooth and efficient workflow that significantly reduces the time and effort needed to build complex visualizations.
+- **Enhanced Development Workflow**: By integrating state-of-the-art development tools, Galaxy Charts provides an efficient workflow that reduces the time and effort needed to build or embed 3rd-party visualizations.
+- **Automated Input Form Rendering**: A standout feature of Galaxy Charts is its ability to dynamically generate an input form within a side panel on the right. This enables users to configure their visualizations.
 
 In short, Galaxy Charts transforms and simplifies the process of developing and deploying visualizations on the Galaxy platform, offering an unparalleled experience for developers working in the Galaxy ecosystem.
 

docs/content/xml-framework.md

@@ -131,6 +131,10 @@ Now that we've added the Galaxy Charts configuration, you can proxy your URL req
 Once your visualization is deployed, Galaxy will pass configuration data to it by attaching the data to the data-incoming attribute of the container element. To handle and utilize this data within your visualization, add the following logic to your main code file:
 
 ```javascript
+// Access container element
+const appElement = document.querySelector("#app");
+
+// Attach mock data for development
 if (import.meta.env.DEV) {
     // Build the incoming data object
     const dataIncoming = {
@@ -142,13 +146,11 @@ if (import.meta.env.DEV) {
     };
 
     // Attach config to the data-incoming attribute
-    const appElement = document.querySelector("#app");
     appElement.setAttribute("data-incoming", JSON.stringify(dataIncoming));
 }
 
 // Access attached data
-const element = document.getElementById("app");
-const incoming = JSON.parse(element?.getAttribute("data-incoming") || "{}");
+const incoming = JSON.parse(appElement?.getAttribute("data-incoming") || "{}");
 
 /** Now you can consume the incoming data in your application.
  * In this example, the data was attached in the development mode block.