-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathfiltertutorial.html
684 lines (674 loc) · 26.8 KB
/
filtertutorial.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="img/favicon.ico?v=2" />
<link
rel="mask-icon"
href="{{ base_path }}/img/favicon.ico?v=M44lzPylqQ"
color="#000000"
/>
<!-- This corresponds to a fontawesome kit but can be customized -->
<script
src="https://kit.fontawesome.com/48644805cd.js"
crossorigin="anonymous"
></script>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap"
rel="stylesheet"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Styles -->
<link rel="stylesheet" href="css/style.css?v=1.0.1" />
<link rel="stylesheet" href="css/style_documentation.css?v=1.0.1" />
<title>Vascular Model Repository</title>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-YVVR1546XJ"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-YVVR1546XJ");
</script>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">VMR</a>
<button
class="navbar-toggler ml-auto custom-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarSupportedContent"
>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Repository
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="dataset.html">Dataset</a>
<a class="dropdown-item" href="additionaldata.html"
>Additional data</a
>
<a class="dropdown-item" href="statistics.html">Statistics</a>
</div>
</li>
<li class="nav-item dropdown active">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Support
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="documentation.html"
>Documentation</a
>
<a class="dropdown-item" href="tutorial.html">Tutorial</a>
<a class="dropdown-item" href="FAQs.html">FAQs</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contributors.html"
>Contributors <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html">Contact us</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="skiptoTop">
<span id="top"
><i class="fa-solid fa-circle-arrow-up"></i
></span>
</section>
<div class="container-fluid main-content centerBox">
<h1>Using the Filters</h1>
<div class="row" id="model-gallery">
<div class="col-lg-3 col-sm-12 tOC">
<form>
<a class="accordion" href="tutorial.html">Tutorial</a>
<br />
<a class="accordion" href="gallerytutorial.html"
>Using the Gallery</a
>
<a class="accordion" href="menututorial.html">Using the Menu Bar</a>
<a class="accordion" href="sharingtutorial.html">Sharing Models</a>
<br />
<a class="accordion" href="#Opening_the_filter_menu">Opening the Menu</a>
<button
class="accordion tOCDropDown"
id="accordion021"
type="button"
>
About the Filter Menu
</button>
<div class="panel" id="panel021">
<a class="accordion" href="#The_Gallery_Header"
>The Gallery Header</a
>
<a class="accordion" href="#The_Error_Message"
>The Error Message</a
>
<a class="accordion" href="#The_Clear_All_Button"
>The Clear All Button</a
>
<a class="accordion" href="#The_Collapse_All_Button"
>The Collapse All Button</a
>
</div>
<button
class="accordion tOCDropDown"
id="accordion023"
type="button"
>
The Different Categories
</button>
<div class="panel" id="panel023">
<a class="accordion" href="#The_Search_Bar">The Search Bar</a>
<a class="accordion" href="#The_Simulation_Results_Filter"
>The Simulation Results Filter</a
>
<a class="accordion" href="#The_Age_Filter">The Age Filter</a>
<a class="accordion" href="#The_Drop-Down_Menus"
>The Drop-Down Menus</a
>
<a class="accordion" href="#The_Checkboxes">The Checkboxes</a>
<a class="accordion" href="#The_Project_Must_Contain_Filter"
>The Project Must Contain Filter</a
>
</div>
<!-- end panel -->
</form>
<!-- end form for table of contents -->
</div>
<!-- end table of contents-->
<div class="col-lg-9 col-12">
<div id="documentation">
<h2 id="Opening_the_filter_menu">Opening the filter menu</h2>
<p>
To open the filter menu, find the word "FILTERS" on the top left
of the page and click on it.
</p>
<img
src="img/help/filters/opening_filter_bar.png"
alt="Opening Page of Gallery"
/>
<h2 id="About_the_filter_menu">About the filter menu</h2>
<h3 id="The_Gallery_Header">The Gallery Header</h3>
<p>
At the top of the gallery, there is a header that indicates how
many models are showing in the gallery. It also displays whether
or not there are filters currently being applied.
</p>
<img
src="img/help/filters/model_gallery_header.png"
alt="Opening page highlight on filter header"
/>
<h3 id="The_Error_Message">The Error Message</h3>
<p>
If what you are looking for is too specific, an error message may
appear. If so, it means the specific models you are searching for
are not currently avaliable in our repository. You may need to
enter in fewer specifications into the filter for models to appear
in the gallery.
</p>
<img
src="img/help/filters/errorMessageExZ1.jpg"
alt="Image of error message."
/>
<img
class="inline"
src="img/help/filters/errorMessageExZ2.jpg"
alt="Image of what the error message says."
/>
<img
class="inline"
src="img/help/filters/errorMessageEx.jpg"
alt="Image of how to get an error message."
/>
<p>
In the example above, an error message has appeared. This is
because the Vascular Model Repository does not currently contain
models that are of pulmonary arteries that have undergone the
coronary artery bypass graft procedure.
</p>
<h3 id="The_Clear_All_Button">The Clear All Button</h3>
<p>
If you want to return to the default state of the dataset gallery,
click on the Clear All button. It will clear all of the filters
that are currently applied.
</p>
<img
class="inline"
src="img/help/filters/clearAllBefore.jpg"
alt="Image of what a filled up filter bar looks like."
/>
<img
class="inline"
src="img/help/filters/clearAllAfter.jpg"
alt="Image of cleared filter bar."
/>
<h3 id="The_Collapse_All_Button">The Collapse All Button</h3>
<p>
If you want to collapse all the filter menus, click on the
Collapse All Button. Doing so, however, will not clear the filters
that are currently applied.
</p>
<img
class="inline"
src="img/help/filters/collapseAllBefore.jpg"
alt="Image of a filled up filter bar"
/>
<img
class="inline"
src="img/help/filters/collapseAllAfter.jpg"
alt="Image of a collaped filter bar"
/>
<p>
In the example above, the collapse all button has been pressed,
which collapsed all the filter headers. The filters remain
applied.
</p>
<h2 id="Looking_at_the_different_categories">
Looking at the different categories
</h2>
<h3 id="The_Search_Bar">The Search Bar</h3>
<p>
With the search bar, you are able to search for specific models.
To search for multiple characteristics, add a space between each
characteristic. To apply the filter, write in an entry and hit the
ENTER key.
</p>
<img
src="img/help/filters/searchBarExZ.jpg"
alt="Example of what a search looks like in the search bar"
/>
<img
src="img/help/filters/model_gallery_searchbar.png"
alt="Full screen of what a search looks like with the search bar"
/>
<p>
In the example above, the models that are a result of the search
bar entry are all male models of aortas that have aneurysms.
</p>
<p>
If you are looking for one specific model, you can also search for
the name of that model in the search bar.
</p>
<p>
Some models have been renamed to match the VMR's naming conventions.
These conventions are detailed in the
<a href="documentation.html">Documentation</a> under the header
"Our convention for naming models." To search for models that have been renamed,
you can use either new name or their legacy name with the search bar.
</p>
<h3 id="The_Simulation_Results_Filter">
The Simulation Results Filter
</h3>
<p>
Some models in this repository have simulation result files that
you can download. For more information about these files, go to
<a href="documentation.html">Documentation</a>. This filter allows
you to search for the models whose simulation results are
avaliable.
</p>
<img
src="img/help/filters/simResultsDefault.jpg"
alt="Image of default state of simulation results button."
/>
<p>
Above is what the default for the simulation results button is. In
this state, no models are being filtered for simulation results.
</p>
<p>
To apply this filter, click on the mode you want to be in. If
"MUST HAVE" is showing, you are filtering for the models that have
simulation results. If "OPTIONAL" is showing, you are not
filtering for simulation results.
</p>
<img
src="img/help/filters/simResultsApplied.jpg"
alt="Image of applied state of simulation results button."
/>
<img
src="img/help/filters/model_gallery_resultsApplied.png"
alt="Image of what gallery looks like with simulation results selected."
/>
<p>
In the example above, the models that are the result of clicking
the simulation results button are those that have downloadable
<code>.vtu</code> and <code>.vtp</code> simulation result files.
</p>
<h3 id="The_Age_Filter">The Age Filter</h3>
<p>
With the filter for age, you are able to search within an age
range. The current minimum for the filter is 0 years of age, and
the current maximum is 120 years.
</p>
<img
src="img/help/filters/ageG.jpg"
alt="Image of what the age filter looks like."
/>
<p>
Both the minimum and maximum bounds are inclusive. To apply the
filter, hit the ENTER key.
</p>
<img
src="img/help/filters/ageExZ.jpg"
alt="Image of what the applied age filter looks like."
/>
<img
src="img/help/filters/model_gallery_ageApplied.png"
alt="Image of what the gallery looks like with the filter applied."
/>
<p>
In the example above, the models that are a result of the age
filter entries are 5 years old.
</p>
<h3 id="The_Drop-Down_Menus">The Drop-Down Menus</h3>
<p>
With the two drop down menus, you are able to search for models of
a specific sex and species. To apply the filters, select the
subcategory you are looking for.
</p>
<!-- <img src="img/help/" alt="Image of what "> -->
<img
src="img/help/filters/dropdownExZ.jpg"
alt="Image of what the applied drop down menus look like."
/>
<img
src="img/help/filters/model_gallery_sexApplied.png"
alt="Image of what the gallery looks like with the drop down menus applied"
/>
<p>
In the example above, the models that are a result of the drop
down menu entries are both female and human.
</p>
<p>
To deselect a drop down menu entry without clearing all applied
filters, click on the "Select One" option.
</p>
<img
class="inline"
src="img/help/filters/dropdownResetEx.jpg"
alt="Image of where to click to reset dropdown menu."
/>
<img
class="inline"
src="img/help/filters/dropdownResetEx2.jpg"
alt="Image of resetted dropdown menu"
/>
<h3 id="The_Checkboxes">The Checkboxes</h3>
<p>
With checkboxes under the four categories "Anatomy," "Disease,"
"Procedure," and "Modality" you are able to search for models of a
specific anatomy, disease, surgical procedure, or image modality.
</p>
<p>To apply the filters, click or unclick a checkbox.</p>
<img
class="inline"
src="img/help/filters/checkbox_example.jpg"
alt="Image of what an applied check box looks like."
/>
<img
class="inline"
src="img/help/filters/model_gallery_checkboxApplied.png"
alt="Image of what the gallery looks like with the applied checkbox"
/>
<p>
In the example above, the models that are a result of the checkbox
entries are of aortas.
</p>
<p>
Some models check off more than one box per category. However,
selecting more than one option under a category will return the
union of those entries. To search for models that specifically
have 2 or more entries under the same category, you will find the
search bar to be more helpful.
</p>
<p>
Between categories (such as "Anatomy" and "Disease"), the
checkboxes act as an intersection of the entries.
</p>
<img
class="inline"
src="img/help/filters/unioncheckboxes.jpg"
alt="Image of what applying multiple checkboxes under one category looks like."
/>
<img
class="inline"
src="img/help/filters/model_gallery_unionCheckboxesApplied.png"
alt="Image of what the gallery looks like with given filters"
/>
<p>
In the example above, the models that are a result of the checkbox
entries are either of aortas with aneurysm(s) or of coronary
arteries with aneurysm(s).
</p>
<p>
Some diseases in the "Disease" category have subcategories.
</p>
<img
src="img/help/filters/disease_filter.jpg"
alt="Image of the disease filter"
/>
To select a parent category, click on the box next to the name of the
parent category.
</p>
<img
class="inline"
src="img/help/filters/disease_unselected_parent.png"
alt="Image of the disease filter"
/>
<img
class="inline"
src="img/help/filters/disease_selected_parent.jpg"
alt="Image of the disease filter"
/>
<p>
To view the subcategories of a parent category,
click on the name of the parent category.
</p>
<img
class="inline"
src="img/help/filters/disease_selected_parent_label.png"
alt="Image of the disease filter"
/>
<img
class="inline"
src="img/help/filters/disease_expanded_children.jpg"
alt="Image of the disease filter"
/>
<p>
Selecting a parent category will select all of its subcategories.
Deselecting a subcategory will deselect its parent categories.
</p>
<img
class="inline"
src="img/help/filters/disease_deselect_example_pre.png"
alt="Image of the disease filter"
/>
<img
class="inline"
src="img/help/filters/disease_deselect_example_post.jpg"
alt="Image of the disease filter"
/>
<p>
Some parents share the same subcategories. This would be the case, for example,
with Kawasaki Disease, which is both the subcategory of Coronary Artery Disease
and Aneurysm.
</p>
<p>
For this case, Kawasaki Disease shows up as an option under both
Coronary Artery Disease and Aneurysm. When one checkbox labeled Kawasaki Disease
is selected, all checkboxes labeled Kawasaki Disease are selected.
This attribute is shown below.
</p>
<img
src="img/help/filters/disease_selects_all_same.jpg"
alt="Image of the disease filter"
/>
<h3 id="The_Project_Must_Contain_Filter">
The Project Must Contain Filter
</h3>
<p>
A few models do not contain certain files. With the Project Must
Contain filter, you are able to filter through the models that
have the files you are looking to download.
</p>
<p>
Unlike the filter above, these checkboxes act as intersections. To
apply the filters, click or unclick a checkbox.
</p>
<img
class="inline"
src="img/help/filters/mustContainExZ.jpg"
alt="Image of what applied project must contain filter looks like."
/>
<img
class="inline"
src="img/help/filters/model_gallery_mustContainApplied.png"
alt="Image of what applied project must contain filter looks like in the gallery."
/>
<p>
In the example above, the models that are a result of the applied filter
contain both the "Paths" file and the "Simulations" file.
</p>
</div>
<!-- end documentation-->
</div>
<!-- end column-->
</div>
<!-- end row-->
</div>
<!-- end container -->
<section id="contact-section">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 col-12">
<div style="text-align: left">
<div class="contact-info">
<ul class="contact-address">
<li>
<i class="fa fa-map-marker fa-lg"></i> Clark Center
E1.3.<br /> 318
Campus Drive,<br />
Stanford, <br />
CA 94305-5428
</li>
<li><i class="fa fa-envelope"></i> [email protected]</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class="explore" style="text-align: left">
<h5>Explore</h5>
<div><a href="dataset.html">Dataset</a></div>
<div><a href="tutorial.html">Tutorial</a></div>
<div><a href="documentation.html">Documentation</a></div>
<div><a href="FAQs.html">FAQs</a></div>
<div><a href="contacts.html">Contact us</a></div>
</div>
</div>
<div class="col-md-4 col-12" style="text-align: center">
<div class="social-media">
<div>Follow SimVascular on social media</div>
<div class="container">
<div class="row">
<div class="col-4">
<div
href="#"
style="
display: flex;
justify-content: center;
font-size: 20px;
"
>
<a
href="https://www.facebook.com/groups/835227759855853"
target="_blank"
class="social-logo"
><i class="fa fa-facebook fa-lg"></i
></a>
</div>
</div>
<div class="col-4">
<div
href="#"
style="
display: flex;
justify-content: center;
font-size: 20px;
"
>
<a
href="https://twitter.com/simvascular"
target="_blank"
class="social-logo"
;
><i class="fa fa-twitter fa-lg"></i
></a>
</div>
</div>
<div class="col-4">
<div
href="#"
style="
display: flex;
justify-content: center;
font-size: 20px;
"
>
<a
href="https://www.youtube.com/channel/UCT61XgTRqpfb39Hyio9IqGQ"
target="_blank"
class="social-logo"
><i class="fa fa-youtube fa-lg"></i
></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script src="js/jquery-2.1.1.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>
<!-- <script src="js/jquery-2.1.1.js"></script> -->
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/documentation.js?v=1.0.2"></script>
</body>
</html>