Expand interactive tutorial beyond Overview.html

[Pasarus]

Issue raised by: [developer]

What?
Now that we've implemented an interactive tutorial to the homepage (#509, #550), the next steps will be to build upon this by using the framework we've build to add tutorials for other WebApp pages.

The existing implementation has been made to be extendable. To make a tour for a new pages, following the following steps:

---

Making a new tour

1. Create a <page name>_tour.js (e.g. run_queue_tour.js) in autoreduce_webapp/static/javascript/tours
2. Start the file with the following template code:

steps = [
    {
        element: "",
        title: "",
        content: "",
        placement: ""
    },  // Copy and paste this block to add steps to extend the tour
]
if (typeof tourSteps == 'undefined'){
    tourSteps = steps
}
else{
    tourSteps = tourSteps.concat(steps)
}

The conditional at the bottom handles whether this is the first tour file loaded onto the page or not

3. For each step of your tour, fill the element: attribute with the id of the html-element.
   
   Fill the other attributes with the title and content of the tour step, and where you would like the step to appear in relation to the element
   

4. Add the following links and scripts to the page of the tour:

<link rel="stylesheet" href="{% static "css/vendor/bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "css/vendor/bootstrap-tour.min.css" %}">
<script src="{% static "javascript/vendor/jquery.min.js" %}"></script>
<script src="{% static "javascript/vendor/bootstrap-tour.min.js" %}"></script>
<script src="{% static "javascript/vendor/bootstrap.min.js" %}"></script>

5. Add your new tour script, plus any additional tours you'd like to appear on the page (usually for example, the navbar_tour).
   

6. After all tours, add the create_tour.js script. This will initialise the tour, as well as a tour button on the right-hand-side of the "Auto-reduction" header.

<script src="{% static "javascript/create_tour.js" %}"></script>

Best of luck :slight_smile:

---

Where?
The WebApp

How to test the issue is resolved

• Tests the tutorial runs as expected
• Review the content of the tutorial