Merge pull request #21007 from guerler/update_example

Add README and update the minimal visualization example

Author: guerler

config/plugins/visualizations/example/README.md

@@ -0,0 +1,6 @@
+# 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)

config/plugins/visualizations/example/static/example.xml

@@ -1,16 +1,15 @@
 <?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>
@@ -30,4 +29,13 @@
     <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>

config/plugins/visualizations/example/static/logo.png

@@ -1,33 +1,48 @@
 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);