From 60ed24a7fa5f479cd031e0e35ef633cd7b9225f2 Mon Sep 17 00:00:00 2001 From: guerler Date: Mon, 4 Nov 2024 16:30:54 +0300 Subject: [PATCH] Update docs --- docs/.vitepress/config.mts | 19 +++++---- docs/content/examples.md | 11 ----- docs/content/installation.md | 2 +- docs/content/vue-component.md | 27 ------------- docs/content/vue-introduction.md | 40 +++++++++++++++++++ docs/content/vue-utilities.md | 4 +- ...eploy-datasource.md => xml-datasources.md} | 22 +++++----- docs/content/xml-inputs.md | 2 +- docs/content/xml-introduction.md | 3 +- docs/content/xml-sections.md | 2 +- 10 files changed, 67 insertions(+), 65 deletions(-) delete mode 100644 docs/content/examples.md delete mode 100644 docs/content/vue-component.md create mode 100644 docs/content/vue-introduction.md rename docs/content/{deploy-datasource.md => xml-datasources.md} (93%) diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 7618bf2..2cf32cc 100644 --- a/docs/.vitepress/config.mts +++ b/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' }, ] diff --git a/docs/content/examples.md b/docs/content/examples.md deleted file mode 100644 index aaac9c9..0000000 --- a/docs/content/examples.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -outline: deep ---- - -# Examples - -Here are some examples. - -## NGL Protein Structure Viewer - -## Plotly-JS Diagrams \ No newline at end of file diff --git a/docs/content/installation.md b/docs/content/installation.md index c3c6eeb..2c7fc68 100644 --- a/docs/content/installation.md +++ b/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. diff --git a/docs/content/vue-component.md b/docs/content/vue-component.md deleted file mode 100644 index 1c2e6d2..0000000 --- a/docs/content/vue-component.md +++ /dev/null @@ -1,27 +0,0 @@ -# Component Usage - -The Galaxy Charts core component is used to wrap a JavaScript-based Visualization by placing the visualization code into its `#default` slots. The component will parse static `config` options and the Visualization XML to render a viewport and the input form. - -```vue - - - - -``` diff --git a/docs/content/vue-introduction.md b/docs/content/vue-introduction.md new file mode 100644 index 0000000..fceb797 --- /dev/null +++ b/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 + + + +``` + +## 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.| \ No newline at end of file diff --git a/docs/content/vue-utilities.md b/docs/content/vue-utilities.md index 0f206fa..3d76f03 100644 --- a/docs/content/vue-utilities.md +++ b/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 diff --git a/docs/content/deploy-datasource.md b/docs/content/xml-datasources.md similarity index 93% rename from docs/content/deploy-datasource.md rename to docs/content/xml-datasources.md index c2beb26..79c6735 100644 --- a/docs/content/deploy-datasource.md +++ b/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 - - - HistoryDatasetAssociation - {{ COMPATIBLE_EXTENSION }} - dataset_id - - - - dataset_id - + + + HistoryDatasetAssociation + {{ COMPATIBLE_EXTENSION }} + dataset_id + + + + dataset_id + ``` Galaxy supports a variety of datatype extensions: diff --git a/docs/content/xml-inputs.md b/docs/content/xml-inputs.md index 670e57e..3cfe2aa 100644 --- a/docs/content/xml-inputs.md +++ b/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. diff --git a/docs/content/xml-introduction.md b/docs/content/xml-introduction.md index 4de9616..3f6cc05 100644 --- a/docs/content/xml-introduction.md +++ b/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 + ... ``` \ No newline at end of file diff --git a/docs/content/xml-sections.md b/docs/content/xml-sections.md index d9b722a..6e0a6bd 100644 --- a/docs/content/xml-sections.md +++ b/docs/content/xml-sections.md @@ -1,4 +1,4 @@ -# Available Sections +# Sections ## Settings Section