Merge pull request #21007 from guerler/update_example

# Galaxy Charts Minimal Example

This minimal example visualization shows the basic structure of a Galaxy visualization plugin.  

To enable it, open `static/example.xml` and remove the `hidden='true'` attribute.

[Click here to learn more.](https://charts.galaxyproject.org)

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE visualization SYSTEM "../../visualization.dtd">

<visualization name="Minimal Example" hidden="true">

    <description>Welcome to the Minimal JS-Based Example Plugin.</description>

    <description>Welcome to the Minimal Visualization Plugin</description>

    <data_sources>

        <data_source>

            <model_class>HistoryDatasetAssociation</model_class>

            <test type="isinstance" test_attr="datatype" result_type="datatype">tabular.Tabular</test>

            <to_param param_attr="id">dataset_id</to_param>

            <test test_attr="ext">tabular</test>

        </data_source>

    </data_sources>

    <params>

        <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>

        <param required="true">dataset_id</param>

    </params>

    <entry_point entry_point_type="script" src="script.js" />

    <settings>

    <specs>

        <spec_name>spec_value</spec_name>

    </specs>

    <tests>

        <test>

            <param name="dataset_id" value="http://cdn.jsdelivr.net/gh/galaxyproject/galaxy-test-data/1.tabular" ftype="tabular" />

        </test>

    </tests>

    <help format="markdown"><![CDATA[

Learn more at:

[https://charts.galaxyproject.org](https://charts.galaxyproject.org)

    ]]></help>

</visualization>

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" class="size-6">

    <circle cx="50" cy="50" r="45" stroke="#E30A17" stroke-width="5" />

    <path d="M 50,5 A 45,45 0 0,1 95,50 L 50,50 Z" fill="#E30A17"/>

</svg>

 No newline at end of file

const { root, visualization_config, visualization_plugin } = JSON.parse(document.getElementById("app").dataset.incoming);

const div = Object.assign(document.createElement("div"), {

    style: "border: 2px solid #25537b; border-radius: 1rem; padding: 1rem"

const container = Object.assign(document.createElement("div"), {

    style: `

        font-family: sans-serif;

        max-width: 600px;

        margin: 0rem auto;

        line-height: 1.5;

        font-size: 14px;

        position: relative;

        padding: 1rem;

        background-image: url(${root + visualization_plugin.logo});

        background-size: 10px;

        background-repeat: repeat;

        background-position: center;

        opacity: 0.5;

    `

});

const img = Object.assign(document.createElement("img"), {

    src: root + visualization_plugin.logo,

    style: "height: 3rem"

const content = Object.assign(document.createElement("div"), {

    style: "position: relative; z-index: 1; background: rgba(255, 255, 255, 0.9); padding: 1rem; border-radius: 0.5rem; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all;"

});

div.appendChild(img);

const dataset = Object.assign(document.createElement("div"), {

    innerText: `You have selected dataset: ${visualization_config.dataset_id}`,

    style: "margin-bottom: 1rem; font-weight: 600;"

});

content.appendChild(dataset);

Object.entries(visualization_plugin).forEach(([key, value]) => {

    const row = document.createElement("div");

    const row = Object.assign(document.createElement("div"), {

        style: "display: flex; margin-bottom: 0.25rem;"

    });

    const spanKey = Object.assign(document.createElement("span"), {

        innerText: `${key}: `,

        style: "font-weight: bold"

        innerText: key,

        style: "font-weight: 600; width: 150px; flex-shrink: 0;"

    });

    const spanValue = Object.assign(document.createElement("span"), {

        innerText: JSON.stringify(value)

        innerText: JSON.stringify(value),

        style: "color: #444;"

    });

    row.appendChild(spanKey);

    row.appendChild(spanValue);

    div.appendChild(row);

});

const dataset = Object.assign(document.createElement("div"), {

    innerText: `You have selected dataset: ${visualization_config.dataset_id}.`,

    style: "font-weight: bold; padding-top: 1rem;"

    content.appendChild(row);

});

div.appendChild(dataset);

document.body.appendChild(div);

container.appendChild(content);

document.body.appendChild(container);