Merge pull request #4585 from galaxyproject/improve-my.gtn

Improve my.galaxy.training

_layouts/base.html

@@ -31,8 +31,7 @@
         <meta name="theme-color" content="#2c3143"/>
 
         {{ page | generate_dublin_core: site }}
-	{%- assign og_desc = page.description | default: page.excerpt | default:topic.summary | default: page.content | default: "Collection of tutorials developed and maintained by the worldwide Galaxy community" -%}
-
+    	  {%- assign og_desc = page.description | default: page.excerpt | default:topic.summary | default: page.content | default: "Collection of tutorials developed and maintained by the worldwide Galaxy community" -%}
         <meta name="description" content="{{ og_desc | strip_html | regex_replace:'[\n\r\s]',' ' | truncate: 1000 }}">
         <meta property="og:site_name" content="Galaxy Training Network">
 	<meta property="og:title" content="{{ og_title | default: page.title }}">

assets/css/main.scss

@@ -1264,7 +1264,8 @@ li {
 // The default presentation
 body {
 	.show-when-galaxy-proxy-active {
-		cursor: not-allowed;
+		// cursor: not-allowed;
+		display: none;
 	}
 
 	span.tool, span.workflow {

faqs/galaxy/workflows_run_ds.md

@@ -0,0 +1,31 @@
+---
+title: Importing and Launching a Dockstore workflow
+area: workflows
+box_type: hands_on
+layout: faq
+contributors: [hexylena]
+---
+
+{% if include.dockstore_id %}
+
+<div class="show-when-galaxy-proxy-active">
+
+Click here to run <span class="workflow" data-workflow="https://dockstore.org/api/ga4gh/trs/v2/tools/#{{ include.dockstore_id }}"><strong>{{ include.title }}</strong> <i class="fas fa-share-alt" aria-hidden="true"></i></span>
+
+</div>
+
+<div class="hide-when-galaxy-proxy-active">
+
+Click here to run <a href="https://my.galaxy.training/?path=/workflows/trs_import%3ftrs_server=dockstore.org%26run_form=true%26trs_id=%2523{{ include.dockstore_id }}"><strong>{{ include.title }}</strong> <i class="fas fa-share-alt" aria-hidden="true"></i></a>
+
+
+</div>
+
+{% else %}
+
+1. Go to [Workflow → Import](https://my.galaxy.training/?path=/workflows/import) in your Galaxy
+2. Switch tabs to TRS ID
+3. Ensure the TRS server is set to "dockstore.org"
+4. Provide your workflow hub ID
+
+{% endif %}

faqs/galaxy/workflows_run_trs.md

@@ -7,7 +7,7 @@ contributors: [hexylena]
 ---
 
 <div class="show-when-galaxy-proxy-active">
-Click here to run the 
+Click here to run 
 <span class="workflow" data-workflow="{{ site.url }}{{ site.baseurl }}{{ include.path | convert_workflow_path_to_trs }}"><strong>{{ include.title }}</strong> <i class="fas fa-share-alt" aria-hidden="true"></i></span>
 workflow.
 </div>

faqs/galaxy/workflows_run_wfh.md

@@ -0,0 +1,30 @@
+---
+title: Importing and Launching a WorkflowHub.eu Workflow
+area: workflows
+box_type: hands_on
+layout: faq
+contributors: [hexylena]
+---
+
+{% if include.wfhub_id %}
+
+<div class="show-when-galaxy-proxy-active">
+
+Click here to run <span class="workflow" data-workflow="https://workflowhub.eu/ga4gh/trs/v2/tools/{{ include.wfhub_id }}/versions/{{ include.wfhub_version | default: 1 }}"><strong>{{ include.title }}</strong> <i class="fas fa-share-alt" aria-hidden="true"></i></span>
+
+</div>
+
+<div class="hide-when-galaxy-proxy-active">
+
+Click here to run <a href="https://my.galaxy.training/?path=/workflows/trs_import%3ftrs_server=workflowhub.eu%26run_form=true%26trs_id={{ include.wfhub_id }}%26trs_version={{ include.wfhub_version | default: 1}}"><strong>{{ include.title }}</strong> <i class="fas fa-share-alt" aria-hidden="true"></i></a>
+
+</div>
+
+{% else %}
+
+1. Go to [Workflow → Import](https://my.galaxy.training/?path=/workflows/import) in your Galaxy
+2. Switch tabs to TRS ID
+3. Ensure the TRS server is set to "workflowhub.eu"
+4. Provide your workflow hub ID
+
+{% endif %}

faqs/gtn/my-galaxy-training.md

@@ -0,0 +1,30 @@
+---
+title: What is my.galaxy.training
+area: introduction
+layout: faq
+box_type: tip
+contributors: [hexylena]
+---
+
+The [`my.galaxy.training`](https://my.galaxy.training) is part of the GTN. We found that often need to direct our learners to specific pages within Galaxy, but which Galaxy? Should we add three links, one for each of the current bigger UseGalaxy.* servers? That would be really annoying for users who aren't using one of those servers.
+
+E.g. how do we link to [/user](https://my.galaxy.training/?path=/user), the user preferences page which is available on every Galaxy Instance? This service handles that in a private and user-friendly manner.
+
+## (Learners) How to Use It
+
+When you access a my.galaxy.training page you'll be prompted to select a server, simply select one and you're good to go! 
+
+If you want to enter a private Galaxy instance, perhaps, behind a firewall, that's also an option! Just select the 'other' option and provide your domain. Since the redirection happens in your browser with no servers involved, as long as *you* can access the server, you'll get redirected to the right location.
+
+## (Tutorial Authors) How to use it
+
+If you want to link to a specific page within Galaxy, simple construct the URL: `https://my.galaxy.training/?path=/user` where everything after `?path` is the location they should be redirected to on Galaxy. That example link will eventually redirect the learner to something like `https://usegalaxy.eu/user`.
+
+## Technical Background
+
+So we took inspiration from [Home Assistant](https://my.home-assistant.io/) which had the same problem, how to redirect users to pages on their own servers. The `my.galaxy.training` service is a very simple static page which looks in the user's [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) for their preferred server.
+If it's not set, the user can click one of the common domains, and be redirected. When they access another link, they'll be prompted to use a button that remembers which server they chose.
+
+## Data Privacy
+
+Any domain selected is not tracked nor communicated to any third party. Your preferred server is stored in your browser, and never transmitted to the GTN. That's why we use localStorage instead of cookies.

news/_posts/2023-12-12-tutorial-run-wfh-ds.md

@@ -0,0 +1,20 @@
+---
+title: "Tutorial Feature: Easier launching of WorkflowHub & Dockstore Workflows"
+contributions:
+  authorship: [hexylena]
+  funding: [by-covid]
+tags: [feature update, gtn, tutorials]
+layout: news
+---
+
+While most GTN tutorials include their associated workflow directly in the GTN, some may wish to write a tutorial about running workflows from WorkflowHub, e.g. leveraging the [IWC workflow collection](https://workflowhub.eu/projects/33).
+
+We've added two snippets which make that easier than ever:
+
+{% snippet faqs/galaxy/workflows_run_wfh.md title="gromacs-mmgbsa/main" wfhub_id="248" %}
+
+And one for Dockstore:
+
+{% snippet faqs/galaxy/workflows_run_ds.md title="My Cool Workflow" dockstore_id="workflow/github.com/jmchilton/galaxy-workflow-dockstore-example-1/mycoolworkflow" %}
+
+You can read more about these snippets and how to use them yourself in your tutorials in the [GTN Contribution Guide section on Workflows]({% link topics/contributing/tutorials/create-new-tutorial-content/tutorial.md %}#workflows).

short/galaxy.html

@@ -1,61 +1,124 @@
 ---
 layout: base
-title: My Galaxy instance
+title: My Galaxy Instance
+description: This page will redirect you to a specific page in your preferred Galaxy instance.
 ---
 
-<h1> My Galaxy Instance </h1>
+<div class="row justify-content-md-center">
+	<div class="card col-md-6">
+		<div class="card-body">
+			<h1 class="h5 card-title" style="margin-top: 0">My Galaxy Training</h1>
 
-<p>
-My Galaxy Instance allows the GTN to link you to specific pages in your preferred Galaxy
-</p>
+			<p class="card-text">
+			This page lets us redirect you to specific pages in your preferred Galaxy. See the <a href="{% link faqs/gtn/my-galaxy-training.md %}">FAQ</a> for more information.
+			</p>
 
-<a id="clickthrough" class="btn btn-primary" href="https://usegalaxy.eu">Go to your server</a>
-<input id="domain" type="text" placeholder="usegalaxy.eu" />
-<button id="edit" class="btn btn-secondary">Edit</button>
-<button id="save" class="btn btn-primary">Save</button>
+			<p class="card-text">
+				You are being redirected to <code id="path"></code>
+			</p>
+
+			<h2 class="preferred-set">Go!</h2>
+			<p class="preferred-set card-text">
+				<a id="preferred" class="btn btn-primary" href="https://usegalaxy.eu">Go to https://usegalaxy.eu</a>
+			</p>
+
+			<details id="set-preferred" open>
+				<summary>Select your Preferred Galaxy Server</summary>
+				<p class="card-text">
+					<a class="clickthrough btn btn-primary" href="https://usegalaxy.eu">UseGalaxy.eu 🌍🇪🇺</a>
+					<a class="clickthrough btn btn-primary" href="https://usegalaxy.org">UseGalaxy.org 🌎🇺🇸</a>
+					<a class="clickthrough btn btn-primary" href="https://usegalaxy.org.au">UseGalaxy.org.au 🌏</a>
+					<button id="set-other" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">Other</button>
+				</p>
+			</details>
+		</div>
+	</div>
+
+</div>
+
+<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Set Custom Server</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+	<input id="domain" type="text" placeholder="usegalaxy.eu" />
+	<b>Note</b>: This URL is only stored in your browser.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button id="save-other" type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+.preferred-set {
+	display: none;
+	text-align: center;
+}
+</style>
 
-<p>
-Configure My Galaxy Instance by entering your preferred Galaxy Server (e.g. usegalaxy.eu or usegalaxy.org.au) and clicking Save.
-</p>
-<p>
-<b>Note</b>: This URL is only stored in your browser.
-</p>
 
 <script>
-// Without jquery we wait for the page to load
-document.addEventListener("DOMContentLoaded", function(event) {
-	// Get the path from the URL parameter named 'path'
-	let params = new URLSearchParams(window.location.search);
-	let path = params.get('path') || '/';
-	var url = localStorage.getItem('gxy-url');
-
-	function setUrl(url, path) {
-		$('#clickthrough').attr('href', 'https://' + url + path);
-		$("#clickthrough").text(`Go to your https://${url}${path}`);
-		$('#clickthrough').show();
-		$('#domain').hide();
-		$('#domain').val(url);
-		$('#edit').show();
-		$('#save').hide();
-	}
-	if (url) {
-		setUrl(url, path);
-	} else {
-		$('#edit').hide();
-		$('#clickthrough').hide();
-	}
-
-	$('#save').click(function() {
-		var url = $('#domain').val();
-		localStorage.setItem('gxy-url', url);
-		setUrl(url, path);
+let path = params.get('path') || '/';
+var preferred_server = localStorage.getItem('gxy-url');
+
+document.getElementById('path').innerHTML = path;
+
+function showPreferred(server_domain) {
+	// Show the preferred server buttons
+	document.querySelectorAll('.preferred-set').forEach(function(el) {
+		el.style.display = 'block';
+	});
+	// Collapse the details box
+	document.getElementById('set-preferred').open = false;
+	document.getElementById('preferred').innerHTML = 'Go to ' + server_domain;
+	document.getElementById('preferred').href = server_domain + path;
+}
+// If no preferred server is set
+if (preferred_server === null) {
+	// Dialog is open by default.
+} else {
+	showPreferred(preferred_server);
+}
+
+document.querySelectorAll('.clickthrough').forEach(function(el) {
+	el.addEventListener('click', function(event) {
+		// Don't follow the link
+		var href = $(this).attr('href');
+		event.preventDefault();
+		console.log(href);
+		// Set the url
+		localStorage.setItem('gxy-url', href);
+		// Redirect
+		window.location.href = href + path;
 	});
-	$('#edit').click(function() {
-		$('#clickthrough').hide();
-		$('#domain').show();
-		$('#domain').val(url);
-		$('#edit').hide();
-		$('#save').show();
+});
+
+// They're bootstrap modals, and this is the only modal interaction, so we have
+// to wait for BS+JQ to be available.
+document.addEventListener("DOMContentLoaded", function(event) {
+	document.getElementById('save-other').addEventListener('click', function(event) {
+		// Set the url
+		var domain = document.getElementById('domain').value;
+		if (domain === '') {
+			alert('Please enter a domain');
+			return;
+		}
+		if (!domain.startsWith('http')) {
+			domain = 'https://' + domain;
+		}
+		localStorage.setItem('gxy-url', domain);
+		showPreferred(domain);
+
+		//Close
+		$('#exampleModal').modal('hide');
 	});
 });
 </script>

topics/contributing/tutorials/create-new-tutorial-content/tutorial.md

@@ -920,6 +920,42 @@ The alternative is to figure out the ID for the tool you want to use:
 ![Finding the tool ID](../../images/tool-id.png)
 
 
+## Workflows
+
+In some tutorials you aren't as interested in teaching users the individual steps for analysing data, but rather want to focus on some downstream aspects of analysis, or to showcase the best practice workflows that are already available for a user to use! In those cases it can be useful to have a nicer way of inviting the user to execute those steps.
+
+### WorkflowHub
+
+You can use a dedicated snippet to invite users to run a WorkflowHub workflow:
+
+{% raw %}
+```markdown
+{% snippet faqs/galaxy/workflows_run_wfh.md title="mRNA-Seq BY-COVID Pipeline" wfhub_id="685" %}
+```
+{% endraw %}
+
+Rendered:
+
+{% snippet faqs/galaxy/workflows_run_wfh.md title="mRNA-Seq BY-COVID Pipeline" wfhub_id="685" %}
+
+Note that it links to a specific workflow, on any Galaxy server. When this tutorial is opened from within the Tutorial Mode, that link will change to one on the current server, removing the intermediate step.
+
+### Dockstore
+
+Please note that the dockstore ID should be provided without the `#` character.
+
+{% raw %}
+```markdown
+{% snippet faqs/galaxy/workflows_run_ds.md title="My Cool Workflow" dockstore_id="workflow/github.com/jmchilton/galaxy-workflow-dockstore-example-1/mycoolworkflow" %}
+```
+{% endraw %}
+
+Rendered:
+
+{% snippet faqs/galaxy/workflows_run_ds.md title="My Cool Workflow" dockstore_id="workflow/github.com/jmchilton/galaxy-workflow-dockstore-example-1/mycoolworkflow" %}
+
+This snippet has the same behaviour, it will use my.galaxy.training links to make them server independent, but in Tutorial Mode it will open on the current server.
+
 
 ## FAQs (snippets)