WIP: bootstrap tour, fixed scrollto issue with jquery.scrollTo and svg highlighting issue

Author: joernhees

visualise/static/js/visualise/tour.js

@@ -1,13 +1,27 @@
 function startTour(force_start){
+    var upcoming_step = null; // hack to know upcoming step in onShow
+    function next(t) {
+        // console.log("next, cur: " + t.getCurrentStep());
+        upcoming_step = t.getCurrentStep() + 1;
+    }
+    function prev(t) {
+        // console.log("prev, cur: " + t.getCurrentStep());
+        upcoming_step = t.getCurrentStep() - 1;
+    }
+
     function autoScrollSideBar(t) {
-        // to be called onShow, hence the currentstep + 1 below
-        var element = t.getStep(t.getCurrentStep() + 1).element;
+        // sadly not set at this point
+        // var element_offset = $("#sidebar-container .tour-step-backdrop").offset().top;
+
+        // to be called onShow, hence upcoming_step hack
+        var us = upcoming_step !== null ? upcoming_step : t.getCurrentStep();
+        var element = t.getStep(us).element;
         if (!element) {
             console.warn("autoScrollSideBar called, but can't get element");
             return;
         }
-        var element_offset = $(element).offset().top;
-        $("#sidebar-container").animate({scrollTop: element_offset}, 200);
+        // var element_offset = $(element).offset().top;
+        $("#sidebar-container").scrollTo(element, 200, {offset:-50});
     }
 
     function fixupSVGHighlighting(t) {
@@ -17,10 +31,20 @@ function startTour(force_start){
             console.warn("fixupSVGHighlighting called, but can't get element");
             return;
         }
-        console.log('dim:');
-        console.log($(element).width());
-        console.log($(element).height());
-        $(".tour-step-background").width($(element).width()).height($(element).height());
+
+        // need to fix highlight area as it doesn't properly get dimensions
+        var r = $(element)[0].getBoundingClientRect();
+        // var p = tour.getOptions();
+        // console.log($(element).width());
+        // console.log($(element).height());
+        $(".tour-step-background").width(r.width + 10).height(r.height + 10);
+
+        // also raise the svg element above the backdrop
+        $("#canvas").children("svg").attr("class", "tour-step-backdrop");
+    }
+
+    function fixupSVGHighlightingRemove(t) {
+        $("#canvas").children("svg").removeAttr("class");
     }
 
     var tour = new Tour({
@@ -29,6 +53,8 @@ function startTour(force_start){
         // autoscroll: true, // doesn't seem to work
         orphan: true,
         debug: true,
+        onNext: next,
+        onPrev: prev,
         steps: [
             {
                 content: "Welcome to the result visualisation of our <a href='https://w3id.org/associations/#gp_learner'>graph pattern learner</a>.<br>As the interface is quite powerful, this tour will briefly explain its components."
@@ -63,10 +89,47 @@ function startTour(force_start){
                 placement: 'left',
                 content: "You can also execute the SPARQL query for the current pattern pre-filled with the individual source node."
             },
+            {
+                element: '#sidebar-SPARQL-panel',
+                onShow: autoScrollSideBar,
+                placement: 'left',
+                content: "Here you can find the SPARQL SELECT query for the selected pattern that was learned and can execute it."
+            },
+            {
+                element: '#graph svg>g',
+                onShown: fixupSVGHighlighting,
+                onHide: fixupSVGHighlightingRemove,
+                content: "Instead of reading the ugly text version on the right, here you see a graphical representation of the pattern."
+            },
             {
                 element: '#graph svg>g',
                 onShown: fixupSVGHighlighting,
-                content: "This is a tooltip."
+                onHide: fixupSVGHighlightingRemove,
+                content: "The ?source and ?target are special variables that were filled with the ground truth pairs on listed on the right during training."
+            },
+            {
+                element: '#sidebar-select-panel',
+                onShow: autoScrollSideBar,
+                placement: 'left',
+                backdrop: false,
+                reflex: true,
+                content: "Select another pattern and see how everything else is updated..."
+            },
+            {
+                element: '#matrix-nav',
+                onShow: autoScrollSideBar,
+                placement: 'bottom',
+                backdrop: false,
+                reflex: true,
+                onNext: function (t) {$("#matrix-nav > a").click(); next(t);},
+                content: "After we've now seen how you can quickly explore the learned graph patterns, let's switch to the matrix tab."
+            },
+            {
+                element: '#main-content',
+                // onShow: autoScrollSideBar,
+                //placement: 'bottom',
+                onPrev: function (t) {$("#graph-nav > a").click(); prev(t);},
+                content: "The matrix tab gives an overview about how the patterns cover the ground truth pairs. Each block represents one ground truth pair. Just hover over them to see how the currently selected graph pattern covers each of them."
             },
             {
                 element: document.querySelectorAll('#step2')[0],

visualise/static/libs/bootstrap-tour-0.10.3/bootstrap-tour.min.css

@@ -0,0 +1,22 @@
+/* ========================================================================
+ * bootstrap-tour - v0.10.2
+ * http://bootstraptour.com
+ * ========================================================================
+ * Copyright 2012-2015 Ulrich Sossou
+ *
+ * ========================================================================
+ * Licensed under the MIT License (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================================
+ */
+
+.tour-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;background-color:#000;opacity:.8;filter:alpha(opacity=80)}.tour-step-backdrop{position:relative;z-index:1101;}.tour-step-backdrop>td{position:relative;z-index:1101}.tour-step-background{position:absolute!important;z-index:1100;background:inherit;border-radius:6px}.popover[class*=tour-]{z-index:1102}.popover[class*=tour-] .popover-navigation{padding:9px 14px}.popover[class*=tour-] .popover-navigation [data-role=end]{float:right}.popover[class*=tour-] .popover-navigation [data-role=prev],.popover[class*=tour-] .popover-navigation [data-role=next],.popover[class*=tour-] .popover-navigation [data-role=end]{cursor:pointer}.popover[class*=tour-] .popover-navigation [data-role=prev].disabled,.popover[class*=tour-] .popover-navigation [data-role=next].disabled,.popover[class*=tour-] .popover-navigation [data-role=end].disabled{cursor:default}.popover[class*=tour-].orphan{position:fixed;margin-top:0}.popover[class*=tour-].orphan .arrow{display:none}