Add tour page element

[eivindjahren]

Description of Change

Adds page element that creates a instructional tour of elements on the page such
as a visualization as described by #106.

Checklist

• PR description included and it is linked to an issue
• make test and make lint passes
• tests are changed or added
• relevant documentation is changed or added

Notes: Adds tour page element

[anders-kiaer]

@eivindjahren This PR looks to add a PageElement Tour which the Python user can use to add a general guided tour around the page.

Is this PR part 1 of solving #106? If not, can you add an example of how to use this framework on adding a guided tour around e.g. Map?

In #106 I was thinking more about giving any given PageElement the option of providing a tour, describing that given PageElement. In that use-case the user has no knowledge (and don't need to know anything) about the ids of the elements any given PageElement consists of. Optional Python user input, if any, could be to override the text descriptions at each step (this was a use case in the first-use report) for a given PageElement-instance.

The button for starting a tour of a PageElement cut be optionally hidden and visible on-hover (something like the plotly button bar), and maybe part of a same button bar as e.g. when solving #108 and #109?

Opinions/thoughts?

[eivindjahren]

@anders-kiaer

A tour for map can be added in the following way:

map = Map('test.csv')
tour_map = Tour(
   steps=[
       {
          'title': 'Compass',
          'content': 'This is the compass, drag it to rotate the map',
          'target': '#g_compass',
          'placement': 'bottom'
       }
   ],
   target=map)

web.index.add_content(tour_map)

Note that it is generally a problem with map that you cannot have more than one map
per page. With line chart you can do the following:

chart1 = LineChart('test.csv')
chart2 = LineChart('test2.csv')
tour_chart = Tour(
   steps=[
       {
          'title': 'You can toggle data points',
          'content': 'Click a legend to hide it',
          'target': '.legendToggle',
          'placement': 'bottom'
       }
   ],
   target=chart1)

web.index.add_content(chart1)
web.index.add_content(chart2)

And the tour should only be shown for the first chart.

[anders-kiaer]

Some further user perspectives which we should try to cover (in this or later PRs):

• We want to facilitate an easy way for the Python user to add "standard steps" for PageElements where standard steps are appropriate, like e.g. Map, HistoryMatching, GroupTree... Otherwise I believe default Python usage in most cases will be not to include tours, which again will reduce the readability/accessibility for end users browsing the result.
• The reader (end user, when browsing) should have the option of starting a tour or not. He/she should be able to start (and potentially redo) a tour for a given PageElement without being guided through the whole page. For instance, if a page has an instance of Map, GroupTree and HistoryMatch and the person easily understands the first two visualizations, it should be possible to get a tour of HistoryMatch alone. People with different background will in general have different needs of explanations. This is especially true in webviz, which is being used as a cross-disciplinary tool.
• Tour font (and color scheme?) being the same as in webviz theme.

[eivindjahren]

@anders-kiaer I will add a button to start the tour in this PR. It should be possible to add default tours for all page elements, but I think this should be a separate issue.