feat: use shepherd.js for intro tour

Author: sgratzl

package-lock.json

@@ -50,6 +50,7 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.32.13",
+    "shepherd.js": "^8.3.1",
     "sirv-cli": "^1.0.11",
     "svelte": "^3.38.2",
     "svelte-check": "^1.5.4",

package.json

@@ -4,9 +4,15 @@
   import TopMenu from './components/TopMenu.svelte';
   import { activeDatasets, initialViewport, isShowingPoints, navMode } from './store';
   import type { IChart } from './store';
+  import { onMount } from 'svelte';
+  import { tour } from './tour';
 
   let chart: Chart | null = null;
   $: ichart = chart as unknown as IChart | null;
+
+  onMount(() => {
+    tour.start();
+  });
 </script>
 
 <TopMenu chart={ichart} style="grid-area: menu" />

src/App.svelte

@@ -771,7 +771,7 @@
   });
 </script>
 
-<div {style} class="wrapper {className || ''}" bind:clientWidth={width} bind:clientHeight={height}>
+<div {style} class="wrapper {className || ''}" bind:clientWidth={width} bind:clientHeight={height} data-tour="chart">
   <canvas
     bind:this={canvas}
     {style}

src/components/Chart.svelte

@@ -24,27 +24,31 @@
     type="button"
     class="uk-button uk-button-default uk-button-small"
     title="Import dataset from a local CSV File"
+    data-tour="csv"
     uk-tooltip
     on:click|preventDefault={() => (doDialog = 'csv')}><Fa icon={faFolderOpen} /></button
   >
   <button
     type="button"
     class="uk-button uk-button-default uk-button-small"
     title="Import dataset from Delphi API"
+    data-tour="api"
     uk-tooltip
     on:click|preventDefault={() => (doDialog = 'api')}><Fa icon={faDatabase} /></button
   >
   <button
     type="button"
     class="uk-button uk-button-default uk-button-small"
     title="Add a line manually"
+    data-tour="manually"
     uk-tooltip
     on:click|preventDefault={() => (doDialog = 'addLine')}><Fa icon={faPencilAlt} /></button
   >
   <button
     type="button"
     class="uk-button uk-button-default uk-button-small"
     title="Create dataset via kernel function"
+    data-tour="kernel"
     uk-tooltip
     on:click|preventDefault={() => (doDialog = 'addKernel')}><Fa icon={faCode} /></button
   >

src/components/ImportDataSetsMenu.svelte

@@ -8,7 +8,7 @@
   export let style = '';
 </script>
 
-<side class="left" {style}>
+<side class="left" {style} data-tour="browser">
   <ImportDataSetsMenu />
   <div class="tree">
     {#each $datasetTree.datasets as child (child.title)}

src/components/LeftMenu.svelte

@@ -43,13 +43,14 @@
   }
 </script>
 
-<div class="menu" {style}>
+<div class="menu" {style} data-tour="top">
   <div class="uk-button-group">
     <button
       type="button"
       class="uk-button uk-button-default uk-button-small"
       on:click|preventDefault={randomizeColors}
       title="Randomize Colors"
+      data-tour="random"
       uk-tooltip><Fa icon={faPaintBrush} /></button
     >
     <button
@@ -58,6 +59,7 @@
       disabled={!chart}
       on:click|preventDefault={() => (chart ? chart.fitData(true) : null)}
       title="Fit data to screen"
+      data-tour="fit"
       uk-tooltip><Fa icon={faExpand} /></button
     >
     <button
@@ -66,6 +68,7 @@
       class:uk-active={$isShowingPoints}
       on:click|preventDefault={() => ($isShowingPoints = !$isShowingPoints)}
       title="Show or Hide points"
+      data-tour="points"
       uk-tooltip><Fa icon={faEllipsisH} /></button
     >
     <button
@@ -98,6 +101,7 @@
       disabled={!chart}
       title="Take a screenshot"
       uk-tooltip
+      data-tour="screenshot"
       on:click|preventDefault={takeScreenshot}><Fa icon={faImage} /></button
     >
     <button
@@ -106,10 +110,11 @@
       title="Link to this view"
       disabled={!chart}
       uk-tooltip
+      data-tour="link"
       on:click|preventDefault={() => (doDialog = 'directLink')}><Fa icon={faLink} /></button
     >
   </div>
-  <div class="uk-button-group">
+  <div class="uk-button-group" data-tour="navmode">
     <button
       type="button"
       class="uk-button uk-button-default uk-button-small"

src/components/TopMenu.svelte

@@ -2,7 +2,7 @@
   import type DataSet from '../../data/DataSet';
   import { activeDatasets } from '../../store';
   import Fa from 'svelte-fa';
-  import { faCheckSquare, faSquare } from '@fortawesome/free-solid-svg-icons';
+  import { faEyeSlash, faEye } from '@fortawesome/free-solid-svg-icons';
 
   export let node: DataSet;
 
@@ -18,7 +18,7 @@
 </script>
 
 <div class="tv_node" class:selected on:click={toggleSelected}>
-  <Fa icon={selected ? faCheckSquare : faSquare} {color} />
+  <Fa icon={selected ? faEye : faEyeSlash} {color} style="width: 1em" />
   {node.title}
 </div>
 

src/components/tree/TreeLeafNode.svelte

@@ -6,3 +6,7 @@
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr;
 }
+
+.shepherd-epivis-tour {
+  line-height: 1.5rem;
+}