Skip to content

Commit f403a55

Browse files
joernheesjoernhees
committed
WIP: more tour
1 parent 7ee66c5 commit f403a55

File tree

2 files changed

+74
-18
lines changed

2 files changed

+74
-18
lines changed

‎visualise/static/css/visualise_graphs.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@ input[type=number] {
7575
color: #959595;
7676
}
7777

78+
.tour-backdrop {
79+
opacity: 0.5;
80+
}
81+
7882
/*******************\
7983
** graph styling **
8084
\*******************/

‎visualise/static/js/visualise/tour.js

Lines changed: 70 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -57,30 +57,40 @@ function startTour(force_start){
5757
onPrev: prev,
5858
steps: [
5959
{
60-
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."
60+
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."
6161
},
6262
{
6363
element: '#sidebar-global-info-panel',
6464
onShow: autoScrollSideBar,
6565
placement: 'left',
6666
title: "Result step selection",
67-
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 individual generations from each run, the results of each run or the overall aggregated results."
67+
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."
6868
},
6969
{
7070
element: '#sidebar-select-panel',
7171
onShow: autoScrollSideBar,
72+
title: "Learned pattern selection",
7273
placement: 'left',
7374
content: "Once the selected results are loaded, you can select the individual patterns in this panel."
7475
},
7576
{
7677
element: '#sidebar-fitness-panel',
7778
onShow: autoScrollSideBar,
79+
title: "Pattern Fitness",
7880
placement: 'left',
79-
content: "In this panel you will see the fitness of the currently selected pattern."
81+
content: "In this panel you will see the fitness of the currently selected pattern.<br/>" +
82+
"The most important dimensions of the fitness are:" +
83+
"<ul>" +
84+
"<li><b>score:</b> The overall score of this pattern.</li>" +
85+
"<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>" +
86+
"<li><b>gt_matches:</b> How many of our ground truth source-target-pairs does this pattern actually cover? (shown in next step)</li>" +
87+
"<li><b>qtime:</b> How long did it take to evaluate this pattern for all ground truth pairs?</li>" +
88+
"</ul>"
8089
},
8190
{
8291
element: '#sidebar-pairs-panel',
8392
onShow: autoScrollSideBar,
93+
title: "Ground Truth Matches for pattern",
8494
placement: 'left',
8595
content: "Here you can see which of the ground truth source-target-pairs are matched by the selected pattern."
8696
},
@@ -92,28 +102,31 @@ function startTour(force_start){
92102
{
93103
element: '#sidebar-SPARQL-panel',
94104
onShow: autoScrollSideBar,
105+
title: "Pattern's SPARQL query",
95106
placement: 'left',
96107
content: "Here you can find the SPARQL SELECT query for the selected pattern that was learned and can execute it."
97108
},
98109
{
99110
element: '#graph svg>g',
100111
onShown: fixupSVGHighlighting,
101112
onHide: fixupSVGHighlightingRemove,
102-
content: "Instead of reading the ugly text version on the right, here you see a graphical representation of the pattern."
113+
title: "Pattern Visualisation",
114+
content: "Instead of the (ugly) text version on the right, here you see a graphical representation of the learned and selected SPARQL pattern."
103115
},
104116
{
105117
element: '#graph svg>g',
106118
onShown: fixupSVGHighlighting,
107119
onHide: fixupSVGHighlightingRemove,
108-
content: "The ?source and ?target are special variables that were filled with the ground truth pairs on listed on the right during training."
120+
title: "Pattern Visualisation",
121+
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."
109122
},
110123
{
111124
element: '#sidebar-select-panel',
112125
onShow: autoScrollSideBar,
113126
placement: 'left',
114127
backdrop: false,
115128
reflex: true,
116-
content: "Select another pattern and see how everything else is updated..."
129+
content: "Select another pattern and see how everything else is updated... (you may click!)"
117130
},
118131
{
119132
element: '#matrix-nav',
@@ -122,7 +135,7 @@ function startTour(force_start){
122135
backdrop: false,
123136
reflex: true,
124137
onNext: function (t) {$("#matrix-nav > a").click(); next(t);},
125-
content: "After we've now seen how you can quickly explore the learned graph patterns, let's switch to the matrix tab."
138+
content: "After we've now seen how you can quickly explore the learned graph patterns, let's switch to the matrix tab. (click above)"
126139
},
127140
{
128141
element: '#main-content',
@@ -132,23 +145,62 @@ function startTour(force_start){
132145
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."
133146
},
134147
{
135-
element: document.querySelectorAll('#step2')[0],
136-
content: "Ok, wasn't that fun?",
137-
position: 'right'
148+
element: '#matrix-container .matrix-div[data-original-title*="Precision: 1"]:first',
149+
// onShow: autoScrollSideBar,
150+
placement: 'bottom',
151+
backdrop: false,
152+
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."
138153
},
139154
{
140-
element: '#step3',
141-
content: 'More features, more fun.',
142-
position: 'left'
155+
element: '#matrix-container .matrix-div[data-original-title*="Precision: 0<"]:first',
156+
// onShow: autoScrollSideBar,
157+
placement: 'bottom',
158+
backdrop: false,
159+
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)."
143160
},
144161
{
145-
element: '#step4',
146-
content: "Another step.",
147-
position: 'bottom'
162+
element: '#graph-radios input:not(:checked):first',
163+
// onShow: autoScrollSideBar,
164+
placement: 'left',
165+
backdrop: false,
166+
reflex: true,
167+
content: "Selecting other patterns on the right will automatically update the matrix view."
168+
},
169+
{
170+
element: '#no-graph-radio-container',
171+
// onShow: autoScrollSideBar,
172+
placement: 'left',
173+
backdrop: false,
174+
reflex: true,
175+
title: "Accumulated precisions",
176+
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."
177+
},
178+
{
179+
element: '#fingerprint-nav',
180+
onShow: autoScrollSideBar,
181+
placement: 'bottom',
182+
backdrop: false,
183+
reflex: true,
184+
onNext: function (t) {$("#fingerprint-nav > a").click(); next(t);},
185+
content: "Let's now switch to the fingerprint view. (click above)"
186+
},
187+
{
188+
element: '#main-content',
189+
// onShow: autoScrollSideBar,
190+
//placement: 'bottom',
191+
onPrev: function (t) {$("#matrix-nav > a").click(); prev(t);},
192+
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."
193+
},
194+
{
195+
element: '#graph-fingerprint0',
196+
// onShow: autoScrollSideBar,
197+
placement: 'bottom',
198+
backdrop: false,
199+
reflex: true,
200+
content: "As you might have guessed by now, you also see these fingerprints (only even more condensed) next to each of the graph patterns."
148201
},
149202
{
150-
element: '#step5',
151-
content: 'Get it, use it.'
203+
content: "That's it. Feel free to explore!"
152204
}
153205
]
154206
});

0 commit comments

Comments
 (0)