### Initialize and Develop with Galaxy Charts Starter Template (Bash)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/README.md

This snippet demonstrates how to set up a new Galaxy Charts visualization project using the starter template. It involves cloning the template, installing dependencies, and starting the development server for live preview.

```bash
npx degit guerler/galaxy-charts-starter my-viz
cd my-viz
npm install
npm run dev
```

--------------------------------

### Install and Import Galaxy Charts Library

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

Instructions for installing the galaxy-charts package via npm and importing it into your project using ESM or UMD module formats. It also shows how to use the starter template.

```bash
# Install the package
npm install galaxy-charts

# Or using the starter template
npx degit guerler/galaxy-charts-starter my-viz
cd my-viz
npm install
```

```javascript
// ESM import in your Vue/JavaScript project
import { GalaxyCharts, useColumnsStore, GalaxyApi } from 'galaxy-charts';
import type { InputValuesType, PluginIncomingType } from 'galaxy-charts';

// UMD usage in browser
const { GalaxyCharts, useColumnsStore, GalaxyApi } = window.GalaxyCharts;
```

--------------------------------

### Example XML Entry Point Configuration

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-framework.md

Defines the script entry point for a JavaScript-based visualization plugin. It specifies the main JavaScript file, optional CSS file, and the DOM container ID for rendering the visualization.

```xml
<entry_point entry_point_type="script" src="index.js" css="index.css" container="app" />
```

--------------------------------

### Import Vite Charts Configuration

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-framework.md

Example of importing the downloaded `vite.config.charts.js` into your main `vite.config.js` file. This merges the Galaxy Charts configuration with your existing Vite settings.

```javascript
import { defineConfig } from "vite";
import { viteConfigCharts } from "./vite.config.charts";

export default defineConfig({
    ...viteConfigCharts,
    /* Insert your existing vite.config settings here. */
});
```

--------------------------------

### Galaxy Charts Project NPM Development and Build Commands

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

Standard NPM scripts for managing the Galaxy Charts project. Includes commands for starting the development server (`npm run dev`), building for production (`npm run build`), and running tests (`npm run test`).

```bash
# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test
```

--------------------------------

### Fetch Galaxy Version using GalaxyApi (JavaScript)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/configuration.md

Example of how to fetch the Galaxy API version using the GalaxyApi class from the 'galaxy-charts' package. This function makes a GET request to the '/api/version' endpoint and logs the response data or any errors encountered. It assumes the GalaxyApi is correctly initialized.

```javascript
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);
    }
}
```

--------------------------------

### Create Custom Visualization Plugin with Vue

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

Example of a Vue 3 component using the Composition API (`<script setup>`) to create a custom visualization plugin for Galaxy Charts. It demonstrates how to receive props like dataset information and settings, fetch data using `useColumnsStore`, and emit events for saving and updating configurations. Dependencies include Vue 3 and the 'galaxy-charts' library.

```vue
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import type { InputValuesType } from "galaxy-charts";
import { useColumnsStore } from "galaxy-charts";

const props = defineProps({
    datasetId: String,
    datasetUrl: String,
    root: String,
    settings: Object,
    specs: Object,
    tracks: Array
});

const emit = defineEmits({
    (event: "save", newSettings: InputValuesType): void;
    (event: "update", newSettings: InputValuesType): void;
});

const columnsStore = useColumnsStore();
const chartData = ref(null);

async function render() {
    // Fetch column data from Galaxy dataset
    const columns = await columnsStore.fetchColumns(
        props.datasetId,
        props.tracks,
        ["x", "y", "z"]
    );

    // Fetch the actual dataset
    const response = await fetch(props.datasetUrl);
    const data = await response.text();

    // Render your visualization with data and settings
    chartData.value = {
        columns,
        settings: props.settings,
        tracks: props.tracks,
        rawData: data
    };
}

function onSave() {
    emit("save", {
        updated_setting: "new value",
        chart_title: props.settings.chart_title,
    });
}

onMounted(() => render());
watch(() => props, () => render(), { deep: true });
</script>

<template>
    <div class="visualization-container">
        <h2>{{ settings.chart_title }}</h2>
        <div ref="viewport">
            <!-- Your D3/Chart.js/custom visualization here -->
            <pre>{{ chartData }}</pre>
        </div>
        <button @click="onSave">Save Configuration</button>
    </div>
</template>
```

--------------------------------

### Galaxy Charts Vue Component Integration Example

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

An example of integrating the `GalaxyCharts` component in a Vue application (`App.vue`). It demonstrates passing `incoming` data, including visualization configuration and plugin details, and using a slot to render a custom `ScatterPlot` component.

```vue
<!-- App.vue -->
<script setup>
import { GalaxyCharts } from 'galaxy-charts';
import ScatterPlot from './plugins/ScatterPlot.vue';

const incoming = {
    root: 'http://localhost:8080',
    visualization_config: {
        dataset_id: 'f2db41e1fa331b3e',
        settings: { chart_title: 'Test Plot' },
        tracks: [{ x: '1', y: '2' }]
    },
    visualization_plugin: {
        name: 'scatter_plot',
        settings: [
            { name: 'chart_title', type: 'text', value: 'My Chart' }
        ],
        tracks: [
            { name: 'x', type: 'data_column' },
            { name: 'y', type: 'data_column' }
        ]
    }
};
</script>

<template>
    <GalaxyCharts :incoming="incoming" credentials="include">
        <template v-slot="slotProps">
            <ScatterPlot v-bind="slotProps" />
        </template>
    </GalaxyCharts>
</template>
```

--------------------------------

### Tracks Section: Color Input Example (XML)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-sections.md

Demonstrates the 'tracks' section in Galaxy Charts, used for input elements specific to individual data tracks. This example shows a 'color' input type for customizing the color of a specific track. It includes a label, name, and type.

```xml
<tracks>
    <input>
        <label>Track: Color</label>
        <name>track_color</name>
        <type>color</type>
    </input>
    ...
</tracks>
```

--------------------------------

### Specs Section: Static Key-Value Pairs (XML)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-sections.md

Illustrates the 'specs' section in Galaxy Charts, which contains static key-value pairs for general configuration. These pairs are used for preset configurations and do not involve user interaction. Example shows a simple 'my_key' with 'my_value'.

```xml
<specs>
    <my_key>my_value</my_key>
    ...
</specs>
```

--------------------------------

### Direct Galaxy API Request with Fetch (JavaScript)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/configuration.md

Demonstrates how to make a direct GET request to the Galaxy API using the browser's native fetch function, without relying on the 'galaxy-charts' package. It targets the '/api/version' endpoint and includes configuration for credentials, headers, and the HTTP method. The response is parsed as JSON and logged to the console.

```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);
    }
}
```

--------------------------------

### Settings Section: Text Input Example (XML)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-sections.md

Defines a 'settings' section in Galaxy Charts with a single text input element for user customization. This allows users to provide textual input which can be used to configure the visualization. The input is defined by a label, a name, and its type.

```xml
<settings>
    <input>
        <label>Setting: Text</label>
        <name>setting_text</name>
        <type>text</type>
    </input>
    ...
</settings>
```

--------------------------------

### XML Example: Conditional Input with Boolean Test

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-inputs.md

This XML snippet demonstrates how to define a conditional input in Galaxy. A boolean `test_param` named 'my_condition' determines whether the inputs defined under the 'true' case or the 'false' case are displayed. This allows for dynamic form generation based on user choices.

```xml
<input>
    <label>My Conditional Input</label>
    <help>My Conditional Help</help>
    <name>my_conditional</name>
    <type>conditional</type>
    <test_param>
        <name>my_condition</name>
        <type>boolean</type>
        <value>true</value>
        <data>
            <data>
                <label>My Condition: True</label>
                <value>true</value>
            </data>
            <data>
                <label>My Condition: False</label>
                <value>false</value>
            </data>
        </data>
    </test_param>
    <cases>
        <cases>
            <value>true</value>
            <inputs>
                <inputs>
                    <label>My Text Area Label</label>
                    <help>My Text Area Help</help>
                    <name>my_textarea_name</name>
                    <type>textarea</type>
                </inputs>
                ...
            </inputs>
        </cases>
        <cases>
            <value>false</value>
            <inputs>
                <inputs>
                    <label>My Text Area Label</label>
                    <help>My Text Area Help</help>
                    <name>my_textarea_name</name>
                    <type>textarea</type>
                </inputs>
                ...
            </inputs>
        </cases>
    </cases>
</input>
```

--------------------------------

### Make Authenticated Galaxy API Requests with GalaxyApi

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

Create authenticated HTTP requests to Galaxy instances using the GalaxyApi client. Supports GET, POST, and PUT operations with automatic error handling and response parsing. Returns data and response objects for further processing.

```typescript
import { GalaxyApi } from 'galaxy-charts';

const api = GalaxyApi();

// Get dataset metadata
async function getDatasetInfo(datasetId: string) {
    try {
        const { data, response } = await api.GET(`/api/datasets/${datasetId}`);
        console.log('Dataset info:', data);
        return data;
    } catch (error) {
        console.error('Failed to fetch dataset:', error);
    }
}

// Create a new visualization
async function createVisualization(config: any) {
    try {
        const { data } = await api.POST('/api/visualizations', {
            type: 'scatter_plot',
            title: 'New Analysis',
            config: config
        });
        console.log('Created visualization:', data.id);
        return data;
    } catch (error) {
        console.error('Failed to create visualization:', error);
    }
}

// Update existing visualization
async function updateVisualization(vizId: string, config: any) {
    try {
        const { data } = await api.PUT(`/api/visualizations/${vizId}`, {
            config: config
        });
        console.log('Updated visualization');
        return data;
    } catch (error) {
        console.error('Failed to update:', error);
    }
}

// Usage
const datasetId = 'f2db41e1fa331b3e';
getDatasetInfo(datasetId);
```

--------------------------------

### Vue.js Example: Input State Management

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-inputs.md

This Vue.js script demonstrates state management for various input types commonly used in web applications, including boolean toggles, color pickers, data selectors, and text areas. It utilizes the 'naive-ui' library for component rendering and 'ref' from 'vue' for reactive state.

```javascript
import * as naiveui from 'naive-ui';
const { NSwitch, NColorPicker, NSelect, NSlider, NInputNumber, NInput } = naiveui;
import { ref } from "vue";
const booleanInput = ref(true);
const colorInput = ref("#0284c7");
const dataInput = ref("dataset_id_a");
const dataJsonInput = ref("json_entry_id_a");
const dataTableInput = ref("table_row_1");
const floatInput = ref(1);
const integerInput = ref(1);
const textareaInput = ref("My Text Area");
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 dataJsonOptions = [
    {
        label: 'JSON Entry Id A',
        value: 'json_entry_id_a',
    },
    {
        label: 'JSON Entry Id B',
        value: 'json_entry_id_b'
    },
];

const dataTableOptions = [
    {
        label: 'Galaxy Table Row 1',
        value: 'table_row_1',
    },
    {
        label: 'Galaxy Table Row 2',
        value: 'table_row_2',
    },
];

const selectOptions = [
    {
        label: 'My Option A',
        value: 'my_option_a',
    },
    {
        label: 'My Option B',
        value: 'my_option_b'
    },
];
```

--------------------------------

### Mount GalaxyCharts Component in Vue.js

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

Integrates the GalaxyCharts component into a Vue.js application, passing visualization data and configurations. This setup allows for dynamic rendering of visualizations based on incoming data and plugin definitions.

```javascript
import { createApp } from 'vue';
import { GalaxyCharts } from 'galaxy-charts';
import MyPlugin from './MyPlugin.vue';

const app = createApp({
    components: { GalaxyCharts, MyPlugin },
    data() {
        return {
            incoming: {
                root: 'http://localhost:8080',
                visualization_id: '123abc',
                visualization_title: 'My Analysis',
                visualization_config: {
                    dataset_id: 'f2db41e1fa331b3e',
                    settings: {
                        chart_title: 'Gene Expression',
                        point_size: 8,
                        color_scheme: 'viridis'
                    },
                    tracks: [
                        { x: '1', y: '2', color: '#e74c3c' },
                        { x: '1', y: '3', color: '#3498db' }
                    ]
                },
                visualization_plugin: {
                    name: 'scatter_plot',
                    description: 'Interactive scatter plot',
                    specs: { type: 'scatter', version: '1.0' },
                    settings: [/* XML parsed to JSON */],
                    tracks: [/* XML parsed to JSON */]
                }
            }
        };
    },
    template: `
        <GalaxyCharts
            :incoming="incoming"
            :credentials="'include'"
            container="my-viz-container">
            <template v-slot="slotProps">
                <MyPlugin v-bind="slotProps" />
            </template>
        </GalaxyCharts>
    `
});

app.mount('#app');
```

--------------------------------

### Create Vite Project with npm

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-framework.md

Command to create a new Vite project. Replace 'MY_VISUALIZATION' with your desired project name. Follow the prompts to select a template; plain Vanilla JavaScript is recommended for beginners.

```bash
npm create vite@latest MY_VISUALIZATION
```

--------------------------------

### Build Visualization Package with npm

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/deploy-plugin.md

This bash command builds your visualization package, preparing it for publishing to npm. It assumes a 'build' script is defined in your package.json.

```bash
npm run build
```

--------------------------------

### Minimal Plugin XML Configuration

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-framework.md

Defines a basic visualization plugin with a name, description, and specifies the entry point script. This XML file is essential for Galaxy to recognize and load the plugin.

```xml
<visualization name="Minimal Plugin">
    <description>A basic example of a visualization plugin.</description>
    <entry_point entry_point_type="script" src="minimal.js" />
</visualization>
```

--------------------------------

### Galaxy Visualization XML Configuration

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-framework.md

XML configuration file to be placed in the Vite project's `public` directory. It defines the visualization's name, description, and entry points for scripts and CSS.

```xml
<visualization name="Vite Plugin (Vanilla/Vue/React and more)">
    <description>A basic example of a Vite plugin.</description>
    <entry_point entry_point_type="script" src="index.js" css="index.css" />
</visualization>
```

--------------------------------

### Download Vite Charts Configuration

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-framework.md

Command to download the Galaxy Charts Vite configuration file. This file provides essential settings for integrating with Galaxy. Save it to your visualization's root directory.

```bash
wget https://galaxyproject.github.io/galaxy-charts/downloads/vite.config.charts.js -O vite.config.charts.js
```

--------------------------------

### Configure package.json for Galaxy Visualizations

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/deploy-plugin.md

This JSON snippet shows the necessary configuration in package.json to include static assets for your visualization. Ensure the 'files' field correctly points to your static assets directory.

```json
{
  "files": ["static"]
}
```

--------------------------------

### Publish Visualization Package to npm

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/deploy-plugin.md

This bash command publishes your built visualization package to npm. Ensure your package is built and all required assets (XML, logo, JS, CSS) are included in the static directory before running this command.

```bash
npm publish --access public
```

--------------------------------

### Run Galaxy Charts with API Connection (Bash)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/configuration.md

Command to run the Galaxy Charts standalone application, connecting it to a Galaxy instance. It requires setting the GALAXY_KEY and GALAXY_ROOT environment variables before executing the npm run dev command. Ensure you replace placeholders with your actual API key and Galaxy server URL.

```bash
GALAXY_KEY=MY_API_KEY GALAXY_ROOT=MY_GALAXY_SERVER npm run dev
```

--------------------------------

### Vue Main Entry Point for Galaxy Charts Application

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

The main JavaScript file (`main.js`) for a Vue.js application, responsible for creating and mounting the root Vue instance. It imports the `App.vue` component and initializes the application.

```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');
```

--------------------------------

### Embed Markdown Help Content in Visualization (XML)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-introduction.md

Includes markdown-formatted help documentation directly within the visualization's XML configuration. This content is displayed in the Galaxy UI when the visualization is launched, providing usage instructions and other relevant information.

```xml
<visualization name="MY_VISUALIZATION">
    ...
    <help format="markdown"><![CDATA[
    # What is My Visualization?

    This visualization displays...
    ]]></help>
</visualization>
```

--------------------------------

### Define Visualization Name and Description (XML)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-introduction.md

Configures a Galaxy visualization with a name and description. The 'name' attribute is a unique identifier, and 'description' provides a brief overview, potentially including third-party plugin references. It also specifies the entry point for the visualization's script and CSS.

```xml
<visualization name="MY_VISUALIZATION">
    <description>MY_DESCRIPTION</description>
    <entry_point entry_point_type="script" src="index.js" css="index.css" />
    ...
</visualization>
```

--------------------------------

### Define Plugin Configuration in XML

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

XML files define the structure and parameters for visualization plugins. This includes specifying data sources, user-configurable settings, and visualization metadata. It serves as the blueprint for how a visualization should be rendered and configured.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
<visualization name="scatter_plot">
    <description>Interactive scatter plot for tabular data</description>
    <data_sources>
        <data_source>
            <model_class>HistoryDatasetAssociation</model_class>
            <test test_attr="ext">tabular</test>
        </data_source>
    </data_sources>
    <params>
        <param required="true">dataset_id</param>
    </params>
    <entry_point entry_point_type="script" src="index.js" css="index.css" />
    <specs>
        <type>scatter</type>
        <version>1.0</version>
    </specs>
    <macros>
        <import>galaxy-charts.macro.xml</import>
    </macros>
    <settings>
        <input>
            <label>Chart Title</label>
            <name>chart_title</name>
            <type>text</type>
            <value>My Scatter Plot</value>
        </input>
        <input>
            <label>Point Size</label>
            <name>point_size</name>
            <type>integer</type>
            <value>5</value>
            <min>1</min>
            <max>20</max>
        </input>
        <input>
            <label>Color Scheme</label>
            <name>color_scheme</name>
            <type>select</type>
            <value>viridis</value>
            <data>
                <data>
                    <label>Viridis</label>
                    <value>viridis</value>
                </data>
                <data>
                    <label>Plasma</label>
                    <value>plasma</value>
                </data>
            </data>
        </input>
    </settings>
    <tracks>
        <input>
            <label>X Column</label>
            <name>x</name>
            <type>data_column</type>
        </input>
        <input>
            <label>Y Column</label>
            <name>y</name>
            <type>data_column</type>
        </input>
        <input>
            <label>Track Color</label>
            <name>color</name>
            <type>color</type>
            <value>#3498db</value>
        </input>
    </tracks>
</visualization>
```

--------------------------------

### Configure Data Sources for Galaxy Visualizations (XML)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-datasources.md

This XML snippet defines the data sources compatible with a Galaxy visualization. It specifies the model class for the data association and includes a test attribute to check for compatible extensions. The `<params>` section indicates a required dataset parameter.

```xml
<data_sources>
    <data_source>
        <model_class>HistoryDatasetAssociation</model_class>
        <test test_attr="ext">{{ COMPATIBLE_EXTENSION }}</test>
    </data_source>
</data_sources>
<params>
    <param required="true">dataset_id</param>
</params>
```

--------------------------------

### Vite Configuration for Local Development Environment in Galaxy Charts

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

Configuration file (`vite.config.js`) for setting up a local development environment using Vite. It includes proxy configurations for API and static file requests to `http://localhost:8080` and sets up path aliasing.

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vite2-plugin-vue';

export default defineConfig({
    plugins: [vue()],
    server: {
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
            },
            '/static': {
                target: 'http://localhost:8080',
                changeOrigin: true,
            }
        }
    },
    resolve: {
        alias: {
            '@': '/src'
        }
    }
});
```

--------------------------------

### HTML Template for Script Endpoint Visualization

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-framework.md

A minimal HTML template used by the script endpoint of the Galaxy visualization framework. It links to the visualization's JavaScript and CSS files and sets up a div container, dynamically populated by Galaxy with data.

```html
<html>
    <head>
        <link rel="stylesheet" href="{{ entry_point.css }}" />
        <script src="{{ entry_point.src }}"></script>
    </head>
    <body>
        <div id="{{ entry_point.container }}" data-incoming="{{ DATA_FROM_GALAXY }}"></div>
    </body>
</html>
```

--------------------------------

### Minimal JavaScript Plugin Logic

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-framework.md

This JavaScript code snippet demonstrates the core logic of a minimal plugin. It retrieves data injected into a DOM element by Galaxy and displays it within a new div. This serves as a foundation for accessing and rendering data in a plugin.

```javascript
// minimal.js
var element = document.getElementById("app");
element.innerText = element.dataset.incoming;
```

--------------------------------

### Define Reusable Macros for XML Sections (XML)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-introduction.md

Defines reusable XML sections within a 'macros' element in a separate file (e.g., macro.xml). This promotes code reuse and reduces duplication across multiple visualization XML configurations.

```xml
<macros>
    <xml name="my_macro">
        ...
    </xml>
</macros>
```

--------------------------------

### Define Test Cases for Galaxy Visualizations (XML)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-datasources.md

This XML section allows for the definition of test cases for a Galaxy visualization. Each test case specifies a parameter name, a URL to a test data file, and its file type. This helps ensure the visualization functions correctly with various inputs.

```xml
<tests>
    <test>
        <param name="dataset_id" value="http://cdn.jsdelivr.net/gh/galaxyproject/galaxy-test-data/1.{{ COMPATIBLE_EXTENSION }}" ftype="{{ COMPATIBLE_EXTENSION }}" />
    </test>
</tests>
```

--------------------------------

### Include and Expand Macros in Visualization (XML)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-introduction.md

Includes external macro definitions from a specified file (e.g., macro.xml) and expands a defined macro within the main visualization XML. This allows for the reuse of common XML structures.

```xml
<visualization name="MY_VISUALIZATION">
    <macros>
        <import>macro.xml</import>
    </macros>
    ...
    <expand macro="my_macro"/>
    ...
</visualization>
```

--------------------------------

### Accessing Incoming Data from Galaxy (JavaScript)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-framework.md

JavaScript code to access data passed from Galaxy. It retrieves the container element, attaches mock data for development, and then parses the 'data-incoming' attribute to extract dataset information and root path.

```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 = {
        root: "/",
        visualization_config: {
            dataset_id: process.env.dataset_id,
        },
    };

    // Attach config to the data-incoming attribute
    appElement.dataset.incoming = JSON.stringify(dataIncoming);
}

// Access attached data
const incoming = JSON.parse(appElement?.dataset.incoming || "{}");

/** Now you can consume the incoming data in your application.
 * In this example, the data was attached in the development mode block.
 * In production, this data will be provided by Galaxy.
 */
const datasetId = incoming.visualization_config.dataset_id;
const root = incoming.root;

/* Build the data request url. Modify the API route if necessary. */
const url = `${root}api/datasets/${datasetId}/display`;

/* Place your code here... */
```

--------------------------------

### Color Input Configuration in XML

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-inputs.md

Sets up a color picker input for users to select colors, useful for distinguishing data tracks. The XML specifies label, help, name, and type as 'color'. It renders a color picker component.

```xml
<input>
    <label>My Color Label</label>
    <help>My Color Help</help>
    <name>my_color_name</name>
    <type>color</type>
</input>
```

--------------------------------

### Data Input Configuration in XML

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-inputs.md

Allows users to select a Galaxy dataset, optionally filtered by file extension. The XML includes label, help, name, type 'data', and an optional 'extension' tag for filtering. This renders a selectable dropdown.

```xml
<input>
    <label>My Data Label</label>
    <help>My Data Help</help>
    <name>my_data_name</name>
    <type>data</type>
    <extension>my_data_extension</extension>
</input>
```

--------------------------------

### Data Table Input Configuration in XML

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-inputs.md

Enables loading options from Galaxy Tool Data tables. The XML defines label, help, name, type 'data_table', and a 'tables' tag containing one or more 'table' elements specifying the table names. Renders a selectable dropdown.

```xml
<input>
    <label>My Data Table</label>
    <help>My Data Table</help>
    <name>my_data_table_name</name>
    <type>data_table</type>
    <tables>
        <table>tool_data_table_name</table>
    </tables>
</input>
```

--------------------------------

### Data JSON Input Configuration in XML

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-inputs.md

Configures an input that loads a JSON array of objects from a URL, populating a select field. The XML specifies label, help, name, type 'data_json', and a 'url' for the JSON source. Each object requires 'id' and 'name'.

```xml
<input>
    <label>My Data JSON</label>
    <help>My Data JSON</help>
    <name>my_data_json_name</name>
    <type>data_json</type>
    <url>my_data_json_url</url>
</input>
```

--------------------------------

### Fetch and Cache Dataset Columns with useColumnsStore

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

Retrieve and automatically cache column data from Galaxy datasets using the columns store. Supports checking column specifications, extracting unique column indices, and fetching actual column values with automatic caching. Handles 'auto' values by skipping them.

```typescript
import { useColumnsStore } from 'galaxy-charts';

const columnsStore = useColumnsStore();

async function analyzeDataset(datasetId: string) {
    const tracks = [
        { x: '1', y: '2', z: '3' },
        { x: '1', y: '4', z: '5' }
    ];

    // Check if all columns are specified
    const hasColumns = columnsStore.checkColumns(tracks, ['x', 'y', 'z']);
    console.log('All columns specified:', hasColumns);

    // Get unique column indices
    const columnList = columnsStore.getColumns(tracks, ['x', 'y', 'z']);
    console.log('Columns to fetch:', columnList); // ['1', '2', '3', '4', '5']

    // Fetch actual column data (cached automatically)
    const columnData = await columnsStore.fetchColumns(datasetId, tracks, ['x', 'y', 'z']);
    console.log('Column data:', columnData);
    // [
    //   { x: [1.2, 3.4, ...], y: [5.6, 7.8, ...], z: [9.0, 1.2, ...] },
    //   { x: [1.2, 3.4, ...], y: [3.3, 4.4, ...], z: [8.8, 9.9, ...] }
    // ]

    return columnData;
}

// Columns with "auto" are skipped
const tracksWithAuto = [
    { x: 'auto', y: '2' },  // x will be skipped
    { x: '1', y: 'auto' }   // y will be skipped
];

const result = await columnsStore.fetchColumns('dataset123', tracksWithAuto, ['x', 'y']);
// Only fetches columns '1' and '2', skips 'auto'
```

--------------------------------

### Select Input Configuration and Rendering (XML, Vue.js)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-inputs.md

Sets up a select input field with options for filtering. The XML defines the label, help text, name, type, and whether filtering is enabled. This is rendered using Vue.js n-select component, dynamically populated with options provided in the 'data' section.

```xml
<input>
    <label>My Select Label</label>
    <help>My Select Help</help>
    <name>my_select_name</name>
    <type>select</type>
    <filterable>false</filterable>
    <value>my_option_a</value>
    <data>
        <data>
            <label>My Option A Label</label>
            <value>my_option_a</value>
        </data>
        <data>
            <label>My Option B Label</label>
            <value>my_option_b</value>
        </data>
        ...
    </data>
</input>
```

```html
<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>
```

--------------------------------

### Create Conditional Form Inputs with XML

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

Define form inputs that dynamically appear or disappear based on user selections using conditional logic within XML. The `<input type="conditional">` element specifies a test parameter (`<test_param>`) and associated cases (`<cases>`), where each case defines specific inputs to be displayed when the test parameter matches a certain value. This allows for creating interactive and context-aware forms.

```xml
<input>
    <label>Chart Type</label>
    <name>chart_conditional</name>
    <type>conditional</type>
    <test_param>
        <name>chart_type</name>
        <type>select</type>
        <value>scatter</value>
        <data>
            <data>
                <value>scatter</value>
                <label>Scatter Plot</label>
            </data>
            <data>
                <value>line</value>
                <label>Line Chart</label>
            </data>
            <data>
                <value>bar</value>
                <label>Bar Chart</label>
            </data>
        </data>
    </test_param>
    <cases>
        <cases>
            <value>scatter</value>
            <inputs>
                <inputs>
                    <label>Point Size</label>
                    <name>point_size</name>
                    <type>integer</type>
                    <value>5</value>
                </inputs>
                <inputs>
                    <label>Show Regression</label>
                    <name>show_regression</name>
                    <type>boolean</type>
                </inputs>
            </inputs>
        </cases>
        <cases>
            <value>line</value>
            <inputs>
                <inputs>
                    <label>Line Width</label>
                    <name>line_width</name>
                    <type>integer</type>
                    <value>2</value>
                </inputs>
                <inputs>
                    <label>Smooth Lines</label>
                    <name>smooth</name>
                    <type>boolean</type>
                </inputs>
            </inputs>
        </cases>
        <cases>
            <value>bar</value>
            <inputs>
                <inputs>
                    <label>Bar Orientation</label>
                    <name>orientation</name>
                    <type>select</type>
                    <value>vertical</value>
                    <data>
                        <data>
                            <label>Vertical</label>
                            <value>vertical</value>
                        </data>
                        <data>
                            <label>Horizontal</label>
                            <value>horizontal</value>
                        </data>
                    </data>
                </inputs>
            </inputs>
        </cases>
    </cases>
</input>
```

--------------------------------

### Vue Component Structure for GalaxyCharts

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/vue-introduction.md

This snippet shows the basic structure of a Vue component utilizing the GalaxyCharts component. It demonstrates how to pass credentials and incoming data as props, and how to access slot values for embedding custom plugin code.

```vue
<template>
    <GalaxyCharts :credentials="credentials" :incoming="incoming">
        <template #default="{ datasetId, datasetUrl, root, save, settings, specs, tracks, update ">
            <!-- Place your plugin code here! -->
        </template>
    </GalaxyCharts>
</template>
```

--------------------------------

### Access Galaxy Data Tables with TypeScript

Source: https://context7.com/galaxyproject/galaxy-charts/llms.txt

Fetch reference data such as genome builds and tool data from Galaxy data tables using the `galaxy-charts` library. The `useDataTableStore` hook provides methods to access these tables, with automatic caching for efficiency. The function returns an array of table entries, each containing a label and detailed value information.

```typescript
import { useDataTableStore } from 'galaxy-charts';

const dataTableStore = useDataTableStore();

async function getGenomeBuilds() {
    // Fetch fasta_indexes data table
    const fastaIndexes = await dataTableStore.getDataTable('fasta_indexes');

    console.log(fastaIndexes);
    // [ 
    //   { 
    //     label: 'hg38', 
    //     value: { 
    //       id: 'hg38', 
    //       columns: ['value', 'dbkey', 'name', 'path'], 
    //       row: ['hg38', 'hg38', 'Human Dec. 2013 (hg38)', '/data/hg38.fa'], 
    //       table: 'fasta_indexes' 
    //     } 
    //   }, 
    //   { label: 'mm10', value: { ... } } 
    // ]

    return fastaIndexes;
}

async function getTwobitReferences() {
    // Access different table
    const twobit = await dataTableStore.getDataTable('twobit');

    // Results are cached automatically
    const twobitAgain = await dataTableStore.getDataTable('twobit');

    return twobit;
}

// Use in visualization
async function setupReferenceSelector() {
    try {
        const references = await dataTableStore.getDataTable('fasta_indexes');

        // Build selector options
        return references.map(ref => ({
            label: ref.value.row[2], // name column
            value: ref.value.id,
            path: ref.value.row[3]  // path column
        }));
    } catch (error) {
        console.error('Failed to load data table:', error);
        return [];
    }
}
```

--------------------------------

### Boolean Input Configuration in XML

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/xml-inputs.md

Configures a boolean input for yes/no options in Galaxy Charts. The XML defines the label, help text, name, and type as 'boolean'. This translates to a UI switch component.

```xml
<input>
    <label>My Boolean Label</label>
    <help>My Boolean Help</help>
    <name>my_boolean_name</name>
    <type>boolean</type>
</input>
```

--------------------------------

### Fetch and Cache Tabular Column Data (JavaScript)

Source: https://github.com/galaxyproject/galaxy-charts/blob/main/docs/content/vue-utilities.md

The `fetchColumns` function retrieves and caches tabular column data from a Galaxy server. It simplifies data access for visualizations by fetching columns based on dataset ID, track configurations, and specified keys. The function returns data structured according to the provided keys and caches results for performance.

```javascript
const store = useColumnsStore();
const response = await store.fetchColumns(datasetId, tracks, keys);
```

```javascript
// Define input parameters
const datasetId = "Dataset ID of tabular dataset with 4 or more columns"
const tracks = [{
    color: "blue",
    name: "Series 1",
    x: 0,
    y: 1
}, {
    color: "gray",
    name: "Series 2",
    x: 2,
    y: 3
}];
const keys = ["x", "y"];

// Make request to column data provider of Galaxy instance
const store = useColumnsStore();
const response = await store.fetchColumns(datasetId, tracks, keys);

// Prepare results for plotting library
const plotData = [];
response.forEach((columns, index) => {
    const track = props.tracks[index];
    plotData.push({
        marker: {
            color: track.color,
        },
        name: track.name,
        x: columns.x,
        y: columns.y,
    });
});
```