Skip to content

Commit 5721969

Browse files
oestebanoesteban
committed
enh: initial scaffold for OHBM'22 educational
1 parent 01e21c1 commit 5721969

File tree

3 files changed

+2908
-0
lines changed

3 files changed

+2908
-0
lines changed

‎docs/assets/OHBM2022/index.html

Lines changed: 399 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,399 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Educational session: Executing BIDS-Apps on large datasets and the *NiPreps* framework</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" type="text/css" href="/assets/asciinema-player/asciinema-player.css" />
7+
<style>
8+
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,400italic);
9+
10+
.blur {
11+
-webkit-filter: blur(5px) opacity(.3);
12+
-moz-filter: blur(10px) opacity(.3);
13+
-o-filter: blur(5px) opacity(.3);
14+
-ms-filter: blur(5px) opacity(.3);
15+
filter: blur(5px) opacity(.3);
16+
}
17+
18+
html {
19+
height: 100%;
20+
}
21+
body {
22+
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
23+
height: 100%;
24+
}
25+
h1, h2, h3 {
26+
font-weight: 600;
27+
margin-bottom: 0;
28+
}
29+
30+
.middle {
31+
margin: 0;
32+
position: absolute;
33+
top: 50%;
34+
width:100%;
35+
-ms-transform: translateY(-50%);
36+
transform: translateY(-50%);
37+
}
38+
39+
.remark-slide-content { height: 100%; padding: 1em 1em 0 0;}
40+
.remark-slide-content h1 { font-size: 3em; }
41+
.remark-slide-content h2 { font-size: 2em; }
42+
.remark-slide-content h3 { font-size: 1.6em; }
43+
.footnote {
44+
position: absolute;
45+
bottom: 3em;
46+
font-size: 0.7em;
47+
}
48+
li p { line-height: 1.25em; }
49+
.remark-slide-content>ul { margin-left: 250px; }
50+
.remark-slide-content li { margin-left: 1em; }
51+
.red { color: #fa0000; }
52+
.blue { color: #0000fa; }
53+
.green { color: #698b69; }
54+
.large { font-size: 2em; }
55+
a, a > code {
56+
color: rgb(249, 38, 114);
57+
text-decoration: none;
58+
}
59+
code {
60+
background: #e7e8e2;
61+
border-radius: 3px;
62+
}
63+
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
64+
.remark-code-line-highlighted { background-color: #373832; }
65+
.pull-left {
66+
float: left;
67+
width: 39%;
68+
}
69+
.pull-right {
70+
float: right;
71+
width: 39%;
72+
height: 75%;
73+
}
74+
.pull-right ~ p {
75+
clear: both;
76+
}
77+
#slideshow .slide .content code {
78+
font-size: 0.8em;
79+
}
80+
#slideshow .slide .content pre code {
81+
font-size: 0.9em;
82+
padding: 15px;
83+
}
84+
.section-separator .middle {
85+
margin-left: 210px;
86+
width: 80%;
87+
}
88+
89+
.perma-sidebar {
90+
background-color: #009933;
91+
color: #f4f4f4;
92+
width: 40px;
93+
height: 120%;
94+
float: left;
95+
padding: 0;
96+
margin: -1em 2em 0 0;
97+
text-align: center;
98+
}
99+
.perma-sidebar p {
100+
text-align: left;
101+
font-size: 80%;
102+
height: 35px;
103+
width: 670px;
104+
margin: 320px 0 0 -315px;
105+
}
106+
.perma-sidebar h2:last-of-type, .perma-sidebar h3:last-child {
107+
color: #d2c295;
108+
}
109+
110+
/* .sidebar-slug {
111+
bottom: 12px;
112+
left: 0;
113+
position: absolute;
114+
width: 210px;
115+
text-align: center;
116+
}
117+
.sidebar-slug img {
118+
width: 180px;
119+
}*/
120+
121+
.svg-reportlet { width: 75%; }
122+
123+
/* Slide-specific styling */
124+
#slide-inverse .footnote {
125+
bottom: 12px;
126+
left: 20px;
127+
}
128+
#slide-how .slides {
129+
font-size: 0.9em;
130+
position: absolute;
131+
top: 151px;
132+
right: 140px;
133+
}
134+
#slide-how .slides h3 {
135+
margin-top: 0.2em;
136+
}
137+
#slide-how .slides .first, #slide-how .slides .second {
138+
padding: 1px 20px;
139+
height: 90px;
140+
width: 120px;
141+
-moz-box-shadow: 0 0 10px #777;
142+
-webkit-box-shadow: 0 0 10px #777;
143+
box-shadow: 0 0 10px #777;
144+
}
145+
#slide-how .slides .first {
146+
background: #fff;
147+
position: absolute;
148+
top: 20%;
149+
left: 20%;
150+
z-index: 1;
151+
}
152+
#slide-how .slides .second {
153+
position: relative;
154+
background: #fff;
155+
z-index: 0;
156+
}
157+
158+
/* Two-column layout */
159+
.left-column {
160+
width: 23%;
161+
height: 82%;
162+
float: left;
163+
}
164+
.left-column h2:last-of-type, .left-column h3:last-child {
165+
color: #000;
166+
}
167+
.right-column {
168+
width: 55%;
169+
float: right;
170+
padding-top: 1em;
171+
}
172+
/* Two-column layout (40% left) */
173+
.left-column2 {
174+
width: 35%;
175+
height: 85%;
176+
float: left;
177+
}
178+
.left-column h2:last-of-type, .left-column h3:last-child {
179+
color: #000;
180+
}
181+
.right-column2 {
182+
width: 43%;
183+
float: right;
184+
padding-top: 1em;
185+
}
186+
/* Two-column layout (60% left) */
187+
.left-column3 {
188+
width: 43%;
189+
height: 85%;
190+
float: left;
191+
}
192+
.left-column h2:last-of-type, .left-column h3:last-child {
193+
color: #000;
194+
}
195+
.right-column3 {
196+
width: 35%;
197+
float: right;
198+
padding-top: 1em;
199+
}
200+
/* Two-column layout (even split) */
201+
.left-column-mid {
202+
width: 45%;
203+
float: left;
204+
}
205+
.right-column-mid {
206+
width: 45%;
207+
float: right;
208+
}
209+
/* Two-column layout (flipped) */
210+
.left-column-inv {
211+
color: #777;
212+
width: 75%;
213+
height: 92%;
214+
float: left;
215+
}
216+
.left-column h2:last-of-type, .left-column h3:last-child {
217+
color: #000;
218+
}
219+
.right-column-inv {
220+
width: 20%;
221+
float: right;
222+
padding-top: 1em;
223+
}
224+
.caption {
225+
font-size: 0.7em;
226+
}
227+
.slide-slug {
228+
bottom: 12px;
229+
opacity: .5;
230+
position: absolute;
231+
left: 4em;
232+
}
233+
234+
.small code {
235+
font-size: 9pt;
236+
}
237+
238+
.large {
239+
font-size: 24pt;
240+
}
241+
242+
.distribute {
243+
display: flex;
244+
height: 100%;
245+
justify-content: space-between;
246+
flex-direction: column;
247+
width: 100%;
248+
}
249+
250+
.cut-right {
251+
margin-right: 100px;
252+
}
253+
254+
.rotate{
255+
-webkit-transform: rotate(-90deg);
256+
-moz-transform: rotate(-90deg);
257+
-o-transform: rotate(-90deg);
258+
-ms-transform: rotate(-90deg);
259+
transform: rotate(-90deg);
260+
}
261+
</style>
262+
</head>
263+
<body>
264+
<script src="/assets/asciinema-player/asciinema-player.min.js"></script>
265+
<textarea id="source">
266+
267+
name: title
268+
layout: true
269+
class: center
270+
---
271+
layout: false
272+
count: false
273+
274+
.middle.center[
275+
# Executing BIDS-Apps on large datasets and the *NiPreps* framework
276+
277+
<br />
278+
<br />
279+
280+
### Oscar Esteban
281+
#### CHUV | Lausanne University Hospital
282+
283+
###### [www.nipreps.org/assets/OHBM2022](https://www.nipreps.org/assets/OHBM2022)
284+
]
285+
286+
---
287+
layout: false
288+
count: false
289+
290+
.middle.center[
291+
# Executing BIDS-Apps on large datasets and the *NiPreps* framework
292+
293+
<br />
294+
<br />
295+
296+
### Oscar Esteban
297+
#### CHUV | Lausanne University Hospital
298+
299+
###### [www.nipreps.org/assets/OHBM2022](https://www.nipreps.org/assets/OHBM2022)
300+
]
301+
302+
---
303+
name: newsection
304+
layout: true
305+
class: section-separator
306+
307+
.perma-sidebar[
308+
<p class="rotate">
309+
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0; height: 20px; padding-top: 6px;" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>
310+
<span style="padding-left: 10px;">Executing BIDS-Apps on large datasets and the <em>NiPreps</em> framework</span>
311+
</p>
312+
]
313+
314+
---
315+
316+
# Outline
317+
318+
* Managing large datasets - Datalad primer
319+
* BIDS, and why BIDS?
320+
* BIDS-Apps
321+
* The case of fMRIPrep
322+
* The NeuroImaging PREProcessing toolS (NiPreps)
323+
324+
325+
---
326+
327+
# Datalad primer
328+
329+
* Datalad (amongst many features) allows versioning of data
330+
* Datalad is based on Git and git-annex
331+
* It is critical to maintain large datasets with versioning
332+
* Enables access to lots of open datasets
333+
* More: www.datalad.org
334+
335+
---
336+
337+
# BIDS - [bids.neuroimaging.io](https://bids.neuroimaging.io)
338+
339+
Specification: [bids-specification.readthedocs.io](https://bids-specification.readthedocs.io)
340+
341+
---
342+
343+
# Example dataset: AOMIC-PIOP2
344+
345+
<div class="asciicast" id="496624"></div>
346+
347+
---
348+
349+
# Actually getting the data (`datalad get`)
350+
351+
<div class="asciicast" id="496610"></div>
352+
353+
</textarea>
354+
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
355+
<script>
356+
var slideshow = remark.create({
357+
highlightStyle: 'monokai',
358+
highlightLanguage: 'remark',
359+
highlightLines: true,
360+
countIncrementalSlides: false,
361+
highlightSpans: true,
362+
ratio: '16:9'
363+
});
364+
365+
// Now retrieve all IDs of asciinema casts
366+
const allcasts = new Map();
367+
368+
slideshow.on('afterShowSlide', function (slide) {
369+
// Slide is the slide being navigated
370+
var slideNumber = slide.getSlideIndex();
371+
var element = document.getElementsByClassName("remark-visible")[0].getElementsByClassName('asciicast')
372+
if (element.length == 0 ) {
373+
return;
374+
}
375+
376+
if (allcasts.has(slideNumber)) {
377+
allcasts.get(slideNumber).play();
378+
return;
379+
}
380+
381+
var castid = element[0].attributes["id"].value;
382+
allcasts.set(slideNumber, AsciinemaPlayer.create(
383+
'https://asciinema.org/a/' + castid + '.cast',
384+
document.getElementById(castid),
385+
{ autoPlay: true, speed: 2, idle_time_limit: 8, rows: 17 }
386+
));
387+
});
388+
389+
slideshow.on('beforeHideSlide', function (slide) {
390+
// Slide is the slide being navigated
391+
var slideNumber = slide.getSlideIndex();
392+
if (allcasts.has(slideNumber)) {
393+
allcasts.get(slideNumber).pause();
394+
}
395+
});
396+
397+
</script>
398+
</body>
399+
</html>

0 commit comments

Comments
 (0)