|
| 1 | +function startTour(force_start){ |
| 2 | + var upcoming_step = null; // hack to know upcoming step in onShow |
| 3 | + function next(t) { |
| 4 | + // console.log("next, cur: " + t.getCurrentStep()); |
| 5 | + upcoming_step = t.getCurrentStep() + 1; |
| 6 | + } |
| 7 | + function prev(t) { |
| 8 | + // console.log("prev, cur: " + t.getCurrentStep()); |
| 9 | + upcoming_step = t.getCurrentStep() - 1; |
| 10 | + } |
| 11 | + |
| 12 | + function autoScrollSideBar(t) { |
| 13 | + // sadly not set at this point |
| 14 | + // var element_offset = $("#sidebar-container .tour-step-backdrop").offset().top; |
| 15 | + |
| 16 | + // to be called onShow, hence upcoming_step hack |
| 17 | + var us = upcoming_step !== null ? upcoming_step : t.getCurrentStep(); |
| 18 | + var element = t.getStep(us).element; |
| 19 | + if (!element) { |
| 20 | + console.warn("autoScrollSideBar called, but can't get element"); |
| 21 | + return; |
| 22 | + } |
| 23 | + // var element_offset = $(element).offset().top; |
| 24 | + var panel = $(element).closest('.panel'); |
| 25 | + $("#sidebar-container").scrollTo(panel, 200, {offset:-50}); |
| 26 | + var panel_body = $(element).closest('.panel-body'); |
| 27 | + if (panel_body) { |
| 28 | + panel_body.scrollTo(element, 200, {offset: -100}); |
| 29 | + var tr = $(element).closest('tr'); |
| 30 | + if (tr) { |
| 31 | + panel_body.scrollTo(tr, 200, {offset: -50}); |
| 32 | + } |
| 33 | + } |
| 34 | + } |
| 35 | + |
| 36 | + function fixupSVGHighlighting(t) { |
| 37 | + // to be called onShown |
| 38 | + var element = t.getStep(t.getCurrentStep()).element; |
| 39 | + if (!element) { |
| 40 | + console.warn("fixupSVGHighlighting called, but can't get element"); |
| 41 | + return; |
| 42 | + } |
| 43 | + |
| 44 | + // need to fix highlight area as it doesn't properly get dimensions |
| 45 | + var r = $(element)[0].getBoundingClientRect(); |
| 46 | + // var p = tour.getOptions(); |
| 47 | + // console.log($(element).width()); |
| 48 | + // console.log($(element).height()); |
| 49 | + $(".tour-step-background").width(r.width + 10).height(r.height + 10); |
| 50 | + |
| 51 | + // also raise the svg element above the backdrop |
| 52 | + $("#canvas").children("svg").attr("class", "tour-step-backdrop"); |
| 53 | + } |
| 54 | + |
| 55 | + function fixupSVGHighlightingRemove(t) { |
| 56 | + $("#canvas").children("svg").removeAttr("class"); |
| 57 | + } |
| 58 | + |
| 59 | + var tour = new Tour({ |
| 60 | + backdrop: true, |
| 61 | + backdropPadding: 5, |
| 62 | + // autoscroll: true, // doesn't seem to work |
| 63 | + orphan: true, |
| 64 | + debug: true, |
| 65 | + onNext: next, |
| 66 | + onPrev: prev, |
| 67 | + steps: [ |
| 68 | + { |
| 69 | + 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, it can be overwhelming for newcomers. This tour will briefly walk you through all of its components." |
| 70 | + }, |
| 71 | + { |
| 72 | + element: '#sidebar-global-info-panel', |
| 73 | + onShow: autoScrollSideBar, |
| 74 | + placement: 'left', |
| 75 | + title: "Result step selection", |
| 76 | + content: "Let's start on the right. As you might know our evolutionary algorithm operates in several runs to cover the input source-target-pairs. Here you can select the overall aggregated results, the results of each run or even the results of an individual generation in a run." |
| 77 | + }, |
| 78 | + { |
| 79 | + element: '#sidebar-select-panel', |
| 80 | + onShow: autoScrollSideBar, |
| 81 | + title: "Learned pattern selection", |
| 82 | + placement: 'left', |
| 83 | + content: "Once the selected results are loaded, you can select the individual patterns in this panel." |
| 84 | + }, |
| 85 | + { |
| 86 | + element: '#sidebar-fitness-panel', |
| 87 | + onShow: autoScrollSideBar, |
| 88 | + title: "Pattern Fitness", |
| 89 | + placement: 'left', |
| 90 | + content: "In this panel you will see the fitness of the currently selected pattern.<br/>" + |
| 91 | + "The most important dimensions of the fitness are:" + |
| 92 | + "<ul>" + |
| 93 | + "<li><b>score:</b> The overall score of this pattern.</li>" + |
| 94 | + "<li><b>avg_reslens:</b> How noisy is this pattern? For a given ?source, how many ?targets does it return on average over the ground truth pairs?</li>" + |
| 95 | + "<li><b>gt_matches:</b> How many of our ground truth source-target-pairs does this pattern actually cover? (shown in next step)</li>" + |
| 96 | + "<li><b>qtime:</b> How long did it take to evaluate this pattern for all ground truth pairs?</li>" + |
| 97 | + "</ul>" |
| 98 | + }, |
| 99 | + { |
| 100 | + element: '#sidebar-pairs-panel', |
| 101 | + onShow: autoScrollSideBar, |
| 102 | + title: "Ground Truth Matches for pattern", |
| 103 | + placement: 'left', |
| 104 | + content: "Here you can see which of the ground truth source-target-pairs are matched by the selected pattern." |
| 105 | + }, |
| 106 | + { |
| 107 | + element: '#sidebar-pairs-panel .pair-link:first', |
| 108 | + onShow: autoScrollSideBar, |
| 109 | + placement: 'left', |
| 110 | + content: "You can also execute the SPARQL query for the current pattern pre-filled with the individual source node." |
| 111 | + }, |
| 112 | + { |
| 113 | + element: '#sidebar-SPARQL-panel', |
| 114 | + onShow: autoScrollSideBar, |
| 115 | + title: "Pattern's SPARQL query", |
| 116 | + placement: 'left', |
| 117 | + content: "Here you can find the SPARQL SELECT query for the selected pattern that was learned and can execute it." |
| 118 | + }, |
| 119 | + { |
| 120 | + element: '#graph svg>g', |
| 121 | + onShown: fixupSVGHighlighting, |
| 122 | + onHide: fixupSVGHighlightingRemove, |
| 123 | + title: "Pattern Visualisation", |
| 124 | + content: "Instead of the (ugly) text version on the right, here you see a graphical representation of the learned and selected SPARQL pattern." |
| 125 | + }, |
| 126 | + { |
| 127 | + element: '#graph svg>g', |
| 128 | + onShown: fixupSVGHighlighting, |
| 129 | + onHide: fixupSVGHighlightingRemove, |
| 130 | + title: "Pattern Visualisation", |
| 131 | + content: "The <span style='color:green'>?source</span> and <span style='color:red'>?target</span> are special variables that were filled with the ground truth pairs listed on the right during training." |
| 132 | + }, |
| 133 | + { |
| 134 | + element: '#sidebar-select-panel', |
| 135 | + onShow: autoScrollSideBar, |
| 136 | + placement: 'left', |
| 137 | + backdrop: false, |
| 138 | + reflex: true, |
| 139 | + content: "Select another pattern and see how everything else is updated... (you may click!)" |
| 140 | + }, |
| 141 | + { |
| 142 | + element: '#matrix-nav', |
| 143 | + onShow: autoScrollSideBar, |
| 144 | + placement: 'bottom', |
| 145 | + backdrop: false, |
| 146 | + reflex: true, |
| 147 | + onNext: function (t) {$("#matrix-nav > a").click(); next(t);}, |
| 148 | + content: "After we've now seen how you can quickly explore the learned graph patterns, let's switch to the matrix tab. (click above)" |
| 149 | + }, |
| 150 | + { |
| 151 | + element: '#main-content', |
| 152 | + // onShow: autoScrollSideBar, |
| 153 | + //placement: 'bottom', |
| 154 | + onPrev: function (t) {$("#graph-nav > a").click(); prev(t);}, |
| 155 | + 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." |
| 156 | + }, |
| 157 | + { |
| 158 | + element: '#matrix-container .matrix-div[data-original-title*="Precision: 1"]:first', |
| 159 | + // onShow: autoScrollSideBar, |
| 160 | + placement: 'auto bottom', |
| 161 | + backdrop: false, |
| 162 | + content: "For example, this is a high precision match of the current pattern selected on the right for the input ground truth pair (see the URIs on top). We also list how many patterns in total (including the current one) match it." |
| 163 | + }, |
| 164 | + { |
| 165 | + element: '#matrix-container .matrix-div[data-original-title*="Precision: 0<"]:first', |
| 166 | + // onShow: autoScrollSideBar, |
| 167 | + placement: 'auto bottom', |
| 168 | + backdrop: false, |
| 169 | + content: "This is a low precision example. The currently selected pattern on the right does not match this ground truth pair (but other patterns hopefully do)." |
| 170 | + }, |
| 171 | + { |
| 172 | + element: '#graph-radios input:not(:checked):first', |
| 173 | + onShow: autoScrollSideBar, |
| 174 | + placement: 'left', |
| 175 | + backdrop: false, |
| 176 | + reflex: true, |
| 177 | + content: "Selecting other patterns on the right will automatically update the matrix view." |
| 178 | + }, |
| 179 | + { |
| 180 | + element: '#no-graph-radio-container', |
| 181 | + onShow: autoScrollSideBar, |
| 182 | + placement: 'left', |
| 183 | + backdrop: false, |
| 184 | + reflex: true, |
| 185 | + title: "Accumulated precisions", |
| 186 | + content: "In the matrix view you can also select this option to get an accumulated view that shows how <b>all patterns</b> in the current run and generation together cover the ground truth pairs." |
| 187 | + }, |
| 188 | + { |
| 189 | + element: '#fingerprint-nav', |
| 190 | + // onShow: autoScrollSideBar, |
| 191 | + placement: 'bottom', |
| 192 | + backdrop: false, |
| 193 | + reflex: true, |
| 194 | + onNext: function (t) {$("#fingerprint-nav > a").click(); next(t);}, |
| 195 | + content: "Let's now switch to the fingerprint view. (click above)" |
| 196 | + }, |
| 197 | + { |
| 198 | + element: '#main-content', |
| 199 | + // onShow: autoScrollSideBar, |
| 200 | + //placement: 'bottom', |
| 201 | + onPrev: function (t) {$("#matrix-nav > a").click(); prev(t);}, |
| 202 | + content: "Each line in the fingerprint view represents a learned pattern and shows its condensed matrix view. You can use these fingerprints to quickly find \"different\" patterns with respect to the ground truth." |
| 203 | + }, |
| 204 | + { |
| 205 | + element: '#graph-fingerprint0', |
| 206 | + onShow: autoScrollSideBar, |
| 207 | + placement: 'bottom', |
| 208 | + backdrop: false, |
| 209 | + reflex: true, |
| 210 | + content: "As you might have guessed by now, you also see these fingerprints (only even more condensed) next to each of the graph patterns." |
| 211 | + }, |
| 212 | + { |
| 213 | + content: "That's it. Feel free to explore!" |
| 214 | + } |
| 215 | + ] |
| 216 | + }); |
| 217 | + tour.init(); |
| 218 | + if (force_start) { |
| 219 | + tour.restart(0); |
| 220 | + } |
| 221 | + tour.start(force_start); |
| 222 | +} |
0 commit comments