Update xml wrapper related docs

docs/content/xml-datasources.md

@@ -2,9 +2,9 @@
 outline: deep
 ---
 
-# Data Sources
+## Data Sources
 
-A data source section is required in the Visualization XML in order to let Galaxy know which datatypes are compatible with your visualization.
+The Data Sources section is required in the Visualization XML to inform Galaxy of the compatible data types for your visualization.
 
 ```xml
 <data_sources>

docs/content/xml-inputs.md

@@ -1,8 +1,8 @@
-# Inputs
+## Inputs
 
-You may specify  `input` elements in the `settings` and `tracks` sections. This will allow users to parameterize and customize their visualization. Currently, Galaxy Charts supports the following input types: `boolean`, `color`, `float`, `integer`, `select`, and `text` input fields.
+You can specify input elements within the settings and tracks sections, allowing users to parameterize and customize their visualization. Galaxy Charts currently supports the following input types: `boolean`, `color`, `data`, `float`, `integer`, `select`, and `text`.
 
-Here is a generic `input` element template, specifying `label`, `help`, `name`, `type` attributes in addition to an optional `data` array used for `select` inputs:
+Below is a template for a generic input element. It includes attributes such as `label`, `help`, `name`, and `type`, along with an optional `data` array used for `select` inputs:
 
 ```md
 <input>
@@ -20,7 +20,6 @@ Here is a generic `input` element template, specifying `label`, `help`, `name`,
 </input>
 ```
 
-
 ## Boolean Input
 
 Boolean inputs are useful to display yes/no options to the user e.g.
@@ -59,6 +58,7 @@ Users may also select colors, this can be particular useful to distinguish data
     <type>color</type>
 </input>
 ```
+
 Translates to:
 
 <ClientOnly>
@@ -75,6 +75,32 @@ Translates to:
 `my_color_name`
 <span class="font-thin"> = {{ colorInput }}</span>
 
+## Data Input
+
+Using a `data` input field you can allow users to select a dataset from Galaxy:
+
+```md
+<input>
+    <label>My Data Label</label>
+    <help>My Data Help</help>
+    <name>my_data_name</name>
+    <type>data</type>
+</input>
+```
+
+Translates to:
+
+<ClientOnly>
+<div class="rounded border p-4">
+    <div class="font-bold pb-1">My Data Label</div>
+    <div class="text-xs pb-1">My Data Help</div>
+    <n-select v-model:value="dataInput" :options="dataOptions" filterable />
+</div>
+</ClientOnly>
+
+`my_data_name`
+<span class="font-thin"> = {{ dataInput }}</span>
+
 ## Float Input
 
 ```md
@@ -133,21 +159,34 @@ Translates to:
     <help>My Select Help</help>
     <name>my_select_name</name>
     <type>select</type>
-    <value>my_option_1</value>
+    <value>my_option_a</value>
     <data>
         <data>
-            <label>My Option 1 Label</label>
-            <value>my_option_1</value>
+            <label>My Option A Label</label>
+            <value>my_option_a</value>
         </data>
         <data>
-            <label>My Option 2 Label</label>
-            <value>my_option_2</value>
+            <label>My Option B Label</label>
+            <value>my_option_b</value>
         </data>
         ...
     </data>
 </input>
 ```
 
+Translates to:
+
+<ClientOnly>
+<div class="rounded border p-4">
+    <div class="font-bold pb-1">My Select Label</div>
+    <div class="text-xs pb-1">My Select Help</div>
+    <n-select v-model:value="selectInput" :options="selectOptions" />
+</div>
+</ClientOnly>
+
+`my_select_name`
+<span class="font-thin"> = {{ selectInput }}</span>
+
 ## Text Input
 
 Last but not least, `text` inputs can be declared.
@@ -176,10 +215,34 @@ Translates to:
 
 <script setup>
 import * as naiveui from 'naive-ui';
-const { NSwitch, NColorPicker, NSlider, NInputNumber, NInput } = naiveui;
+const { NSwitch, NColorPicker, NSelect, NSlider, NInputNumber, NInput } = naiveui;
 import { ref } from "vue";
 const booleanInput = ref(true);
 const colorInput = ref("#0284c7");
 const floatInput = ref(1);
-const textInput = ref("My Text")
+const dataInput = ref("dataset_id_a");
+const textInput = ref("My Text");
+const selectInput = ref("my_option_a");
+
+const dataOptions = [
+    {
+        label: 'Galaxy Dataset A',
+        value: 'dataset_id_a',
+    },
+    {
+        label: 'Galaxy Dataset B',
+        value: 'dataset_id_b'
+    },
+];
+
+const selectOptions = [
+    {
+        label: 'My Option A',
+        value: 'my_option_a',
+    },
+    {
+        label: 'My Option B',
+        value: 'my_option_b'
+    },
+];
 </script>

docs/content/xml-sections.md

@@ -2,7 +2,8 @@
 
 ## Settings Section
 
-The `settings` section contains an `array` of `input` elements enabling users to customize the visualization. These customization options also become available when embedding the visualization in Galaxy workflow reports. Here is an example of a `settings` section with a single `text` input element:
+The `settings` section includes an `array` of `input` elements that allow users to customize the visualization. These customization options are also available when embedding the visualization in Galaxy workflow reports. Below is an example of a `settings` section with a single `text` input element:
+
 ```md
 <settings>
     <input>
@@ -16,7 +17,8 @@ The `settings` section contains an `array` of `input` elements enabling users to
 
 ## Specs Section
 
-The `specs` section contains an `array` of static `key/value` pairs for arbitrary use e.g.
+The `specs` section includes an `array` of static `key-value` pairs for general use, such as:
+
 ```md
 <specs>
     <my_key>my_value</my_key>
@@ -26,7 +28,8 @@ The `specs` section contains an `array` of static `key/value` pairs for arbitrar
 
 ## Tracks Section
 
-The `tracks` section contains an `array` of `input` elements enabling users to configure individual data tracks e.g.
+The `tracks` section includes an `array` of `input` elements that allow users to configure individual data tracks, for example:
+
 ```md
 <tracks>
     <input>