Update docs

docs/.vitepress/config.mts

@@ -14,33 +14,32 @@ export default defineConfig({
 
     sidebar: [
       {
-        text: 'Getting Started',
+        text: 'Introduction',
         items: [
           { text: 'What is Galaxy Charts?', link: '/content/introduction' },
-          { text: 'Start Developing', link: '/content/installation' },
+          { text: 'Getting Started', link: '/content/installation' },
           { text: 'Connect to Galaxy', link: '/content/configuration' },
-          { text: 'Examples', link: '/content/examples' },
         ]
       },
       {
-        text: 'Visualization XML Wrapper',
+        text: 'XML Wrapper',
         items: [
             { text: 'Introduction', link: '/content/xml-introduction' },
-            { text: 'Available Sections', link: '/content/xml-sections' },
-            { text: 'Available Inputs', link: '/content/xml-inputs' }
+            { text: 'Data Sources', link: '/content/xml-datasources' },
+            { text: 'Sections', link: '/content/xml-sections' },
+            { text: 'Inputs', link: '/content/xml-inputs' },
         ]
       },
       {
-        text: 'Visualization Vue Wrapper',
+        text: 'Core Component',
         items: [
-            { text: 'Component Usage', link: '/content/vue-component' },
-            { text: 'Additional Utilities', link: '/content/vue-utilities' }
+            { text: 'Introduction', link: '/content/vue-introduction' },
+            { text: 'Utilities', link: '/content/vue-utilities' }
         ]
       },
       {
         text: 'Deploy to Galaxy',
         items: [
-            { text: 'Configure Data Source', link: '/content/deploy-datasource' },
             { text: 'Build and Link Plugin', link: '/content/deploy-plugin' },
             { text: 'Create Pull Request', link: '/content/deploy-request' },
         ]

docs/content/installation.md

@@ -1,4 +1,4 @@
-# Developing Visualizations for Galaxy
+# Develop Visualizations for Galaxy
 
 Follow these steps to start developing a new visualization for Galaxy.
 

docs/content/vue-introduction.md

@@ -0,0 +1,40 @@
+# Core Component
+
+The `GalaxyCharts` core component is used to embed a JavaScript-based visualization by placing the visualization code within its `#default` slot. This component parses static `config` options and the XML visualization wrapper to render both the viewport and input form.
+
+```vue
+<script setup>
+import { GalaxyCharts } from "galaxy-charts";
+
+// Configuration to override default settings
+const config = {
+    dataset_url: "MY_DATASET_URL",
+    settings: {
+        setting_text: "MY_TEST_SETTING",
+        setting_boolean: true,
+    },
+};
+
+// XML wrapper for your visualization
+const xml = "MY_VISUALIZATION.xml";
+</script>
+
+<template>
+    <GalaxyCharts :config="config" :xml="xml">
+        <template #default="{ datasetId, datasetUrl, root, settings, specs, tracks }">
+            <!-- Place your plugin code here! -->
+        </template>
+    </GalaxyCharts>
+</template>
+```
+
+## Overview of Slot Values
+
+| Variable | Description |
+|----------|-------------|
+|**datasetId**| The ID of the main dataset to be visualized. Every visualization requires a primary dataset, although additional datasets can be added later if needed.|
+|**datasetUrl**| The URL of the dataset to be visualized. The entire dataset may be requested for visualization, or only parts/metadata may be retrieved via the Galaxy API.|
+|**root**| The proxy route to the Galaxy server (default is '/').|
+|**settings**| Configuration settings specific to the visualization, as declared in the XML wrapper.|
+|**specs**| Static specification values defined in the XML wrapper.|
+|**tracks**| Track configuration values for the visualization, as specified in the XML wrapper.|

docs/content/vue-utilities.md

@@ -1,6 +1,6 @@
-# Additional Utilities
+# Utilities
 
-Galaxy Charts is bundled with utilitites to simplify interaction with Galaxy.
+Galaxy Charts is bundled with utilities to simplify interaction with Galaxy.
 
 ## Column Store
 

docs/content/deploy-datasource.md → docs/content/xml-datasources.md

@@ -2,21 +2,21 @@
 outline: deep
 ---
 
-# Configure Data Source
+# 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.
 
 ```xml
-    <data_sources>
-        <data_source>
-            <model_class>HistoryDatasetAssociation</model_class>
-            <test test_attr="ext" result_type="datatype">{{ COMPATIBLE_EXTENSION }}</test>
-            <to_param param_attr="id">dataset_id</to_param>
-        </data_source>
-    </data_sources>
-    <params>
-        <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
-    </params>
+<data_sources>
+    <data_source>
+        <model_class>HistoryDatasetAssociation</model_class>
+        <test test_attr="ext" result_type="datatype">{{ COMPATIBLE_EXTENSION }}</test>
+        <to_param param_attr="id">dataset_id</to_param>
+    </data_source>
+</data_sources>
+<params>
+    <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
+</params>
 ```
 
 Galaxy supports a variety of datatype extensions:

docs/content/xml-inputs.md

@@ -1,4 +1,4 @@
-# Available 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.
 

docs/content/xml-introduction.md

@@ -1,4 +1,4 @@
-# Visualization XML Wrapper
+# XML Wrapper
 
 Galaxy Visualizations are configured using XML files. The files contain Visualization specific attributes such as the `name`, `description` and the associated npm package details.
 
@@ -9,5 +9,6 @@ Galaxy Visualizations are configured using XML files. The files contain Visualiz
         <requirement type="npm" version="MY_NPM_PACKAGE_VERSION" package="MY_NPM_PACKAGE_NAME"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
+    ...
 </visualization>
 ```

docs/content/xml-sections.md

@@ -1,4 +1,4 @@
-# Available Sections
+# Sections
 
 ## Settings Section