-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
752 lines (683 loc) · 46.6 KB
/
index.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
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSAM-lite </title>
<!-- Bootstrap core CSS -->
<link href="./scripts/pkgs/bootstrap-4.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./styles/styles.css" rel="stylesheet">
</head>
<body class="text-center" data-spy="scroll" data-target=".nav" data-offset="20">
<!-- header -->
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">SSAM.net</h3>
<nav class="nav nav-masthead justify-content-center fixed-top">
<a class="nav-link active smooth-scroll" href="#section-home">Home</a>
<a class="nav-link smooth-scroll" href="#section-data">Data Center</a>
<a class="nav-link smooth-scroll" href="#section-parameters">Parameters</a>
<a class="nav-link smooth-scroll smooth-scroll" href="#section-analysis">Analysis</a>
<!-- <a class="nav-link smooth-scroll" href="#section-download">Download</a> -->
<a class="nav-link smooth-scroll" href="#section-about">About</a>
</nav>
</div>
</header>
<!-- main content roll -->
<main role="main" class="inner cover">
<!-- home section -->
<div id="wrapper-home">
<div id="section-home" class="section-top-space" style="height:40vh;"></div>
<!-- creates the space above section & serves as target for the nav-links -->
<div id="tutorial-modal" class="modal-content">
<p>Welcome to <b><i>SSAM-lite</i></b>. <br>
This is a little tutorial to get you going.
It will guide you through the data preparation, processing and presentation.
<br>Have fun!
</p>
<p>
<a id="button-tutorial-close" class="btn btn-lg btn-secondary btn-close">Close</a>
<a href="#section-data" id="button-tutorial-next-0"
class="btn btn-lg btn-secondary btn-next">Next</a>
</p>
</div>
<div class="section-main-space container-fluid" style="min-height:20vh;">
<h1 class="cover-heading">Spatial Sequencing Analysis Pipeline.</h1>
<p class="lead">SSAM-lite is a complete spatial sequencing analysis pipeline that runs entirely in your
browser.
</p>
<p class="lead">
<a href="#" id="button-tutorial" class="btn btn-lg btn-secondary btn-tutorial">Tutorial</a>
<a id="button-go" href="#section-data" class="btn btn-lg btn-secondary smooth-scroll">Get going!</a>
</p>
</div>
</div>
<!-- data section -->
<div id="wrapper-data">
<div id="section-data" class="section-top-space" style="height: 40vh; width: 100%"></div>
<div id="section-data-title">
<div class="d-row, container-fluid" style="min-height: 10vh;">
<h1 class="cover-heading">Data Center</h1>
<p class="lead">Click or drag-and-drop to upload your data.
</p>
</div>
<div id="tutorial-modal-data" class="modal-content">
<p>This is the <b>Data Center</b>, where you can upload and display your data. <br>
Please download our test dataset to get familiar with the data formats and continue the
tutorial:
</p>
<p>
<a id="button-tutorial-close-1" class="btn btn-lg btn-secondary btn-close"> Close</a>
<a href="https://zenodo.org/record/5517606" id="button-tutorial-download"
class="btn btn-lg btn-secondary " target="_blank" rel="noopener noreferrer">
Dataset download</a>
<a href="#section-data-title" id="button-tutorial-next-1"
class="btn btn-lg btn-secondary btn-next">
Next</a>
</p>
</div>
<div id="tutorial-modal-data-coords" class="modal-content">
<p>Great! Now that you've downloaded the data, extract it to your hard drive. Pick one of the two
test data folders.
It contains two files:
<i>coordinates.csv</i> and <i>signatures.csv</i>.
</p>
<p>Let's first have a look at <i>coordinates.csv</i>: The comma-seperated-value file contains the
x,y-coordinates
obtained from your spatial sequencing experiment.
It is formatted as follows:
</p>
<img src="resources/imgs/tutorial/coordinate_prev.png" style="max-width: 100%;">
<p>
The file contains three columns: The first one contains the molecule label, the other two
contain x,y-coordinates per molecule. The column names do not matter, but you need to keep their
order if you work with your own data.
</p>
<p>
It's now time to upload the data! Click on the 'Coordinates' button on the right and select
the <i>coordinates.csv</i> for the upload.
</p>
<p>
<a id="button-tutorial-close-2" class="btn btn-lg btn-secondary btn-close">Close</a>
<a href="#section-data-title" id="button-tutorial-next-2"
class="btn btn-lg btn-secondary btn-next">
Next</a>
</p>
</div>
<div id="tutorial-modal-data-disp" class="modal-content">
<p>SSAM-lite lets you interactively investigate your data.
You can navigate through the plots as follows:
<ul>
<li>right drag: Zoom in</li>
<li>shift+right drag: Drag</li>
<li>double click: Original view</li>
<li>click legend: Switch on/off</li>
<li>double click legend: Switch all</li>
</ul>
</p>
<p>
<a id="button-tutorial-close-3" class="btn btn-lg btn-secondary btn-close"> Close</a>
<a href="#section-data-title" id="button-tutorial-next-3"
class="btn btn-lg btn-secondary btn-next">
Next</a>
</p>
</div>
<div id="tutorial-modal-data-sigs" class="modal-content">
<p> The <i>signatures.csv</i> is formated as follows:
<img src="./resources/imgs/tutorial/signatures_prev.png" style="max-width: 100%;"><br>
The table contains cell type-wise expression expectations, with columns showing mRNA class and
rows
showing cell types.
</p>
<p>Click on 'Signatures' to upload the <i>signatures.csv</i> and inspect the data.</p>
<p>
<a id="button-tutorial-close-4" class="btn btn-lg btn-secondary btn-close"> Close</a>
<a id="button-tutorial-next-4" class="btn btn-lg btn-secondary btn-next"
href="#section-parameters"> Next</a>
</p>
</div>
<!-- row for buttons & displays" -->
<div class="d-flex flex-wrap flex-lg-nowrap justify-content-center align-items-start">
<!-- field "coordinates" -->
<div class="d-flex flex-wrap justify-content-center justify-content-lg-end align-items-lg-end"
style="min-width: 350px; width: 40vw">
<div class="d-flex d-row data-button-wrap">
<form class="md-form">
<label for="btn-coordinates-hidden">
<div class="btn btn-mdb-color" id="coordinates-dragzone">
<input type="file" id="btn-coordinates-hidden" name="uploads-coordinates"
class="file-upload" hidden>
<div style="position:relative; height: 150px;">
<img src="./resources/imgs/buttons/icon_coords.png"
for="btn-coordinates-hidden" class="img-thumbnail"
style="position: relative; top: 0px; left: auto"
alt="upload coordinates">
<div id="coordinate-loader" class="loader"
style="position: relative; top: -95px; margin: auto; display: none;">
</div>
</div>
<h5>Coordinates</h5>
</div>
</label>
</form>
</div>
<div class="d-row" id="coordinates-preview"
style="width: 100%; height: 60vh; max-height: 100vw;">
</div>
<br>
<div id="divScale" class="slidecontainer" style="display:none;">
<div class="d-flex p-2 justify-content-center">
<input type="number" id="exampleScale" name="exampleScale" step="0.1" min="0" value="1">
</div>
<div class="d-flex justify-content-center">
<label for="exampleScale" data-toggle="exampleScale"
title="What's the scale of the input coordinates in 1/μm?">Scaling factor
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
</label>
</div>
</div>
<!-- <div id="divScale" class="form-group"
style="display:none; margin:20px;">
<input type="number" class="form-control" id="exampleScale" aria-describedby="scaleHelp"
value="1" step="0.1" min="0">
<small id="scaleHelp" class="form-text text-muted" ,
title="What's the scale of the input coordinates in 1/μm?">Scaling factor
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
</small>
</div> -->
</div>
<!-- field "signatures" -->
<div class="d-flex flex-wrap justify-content-center justify-content-lg-start align-items-lg-start"
style=" min-width: 350px; width: 40vw">
<!-- <div class="d-flex "> -->
<div class="d-flex d-row data-button-wrap">
<form class="md-form">
<label for="btn-signatures-hidden">
<div class=" btn btn-mdb-color " id="signatures-dragzone">
<input type="file" id="btn-signatures-hidden" name="uploads-signatures"
hidden />
<div style="position: relative; height: 150px;">
<img src="./resources/imgs/buttons/icon_signatures.png"
for="btn-signatures-hidden" class="img-thumbnail"
style="position: relative; top: 0px; left: auto;"
alt="upload signatures">
<div id="signature-loader" class="loader"
style="position: relative; top: -95px; margin: auto; display: none;">
</div>
</div>
<h5>Signatures</h5>
</div>
</label>
</form>
</div>
<div class="d-row" id="signatures-preview" ,
style="width: 100%; height: 60vh; max-height: 100vw;">
</div>
</div>
</div>
</div>
</div>
<!-- parameters section -->
<div id="wrapper-parameters">
<div id="section-parameters" class="section-top-space" style="height:30vh; width:100%"></div>
<div id="section-parameters-main" style="padding: 30px">
<div id="tutorial-modal-parameters" class="modal-content">
<p> In the <b>Parameters</b> section you can hand-tune the most important SSAM parameters.</p>
<p>
SSAM-lite provides a <i>preview function</i> that processes small tissue sub-sets on the fly
to enable parameter optimization in real time.<br>
Click 'Use preview generator for parameter search' to enable it! <br>
</p>
<p>
The parameters to optimize are:
</p>
<ul>
<li>Pixel width: The size of our discrete analysis and output area in pixels.</li>
<li>KDE kernel bandwidth: The 'smoothing factor' applied to the mRNA locations.</li>
<li>Expression threshold: Threshold for discarding areas with low expression signal.</li>
</ul>
<p>
We'll now have a look at each parameter in detail.
</p>
<p>
<a id="button-tutorial-close-5" class="btn btn-lg btn-secondary btn-close"> Close</a>
<a href="#section-parameters-main" id="button-tutorial-next-5"
class="btn btn-lg btn-secondary btn-next">
Next</a>
</p>
</div>
<div id="tutorial-modal-parameters-coordinates" class="modal-content">
<p> The coordinates preview on the left lets you chose the subset of the tissue to calculate the
preview on - simply click on the map to change it (but be patient as it might take a moment
for the adjustment to be computed).
</p>
<p> Below you can set the pixel width. This sets the size of the matrix the mRNAs are projected on.
A larger value increases the resolution but more ressources will be required for the
computations.
</p>
<p>
<a id="button-tutorial-close-6" class="btn btn-lg btn-secondary btn-close"> Close</a>
<a href="#section-parameters-main" id="button-tutorial-next-6"
class="btn btn-lg btn-secondary btn-next">
Next</a>
</p>
</div>
<div id="tutorial-modal-parameters-sigma" class="modal-content">
<p>
Increasing the KDE kernel bandwidth (in μm) creates a smooting effect between the
different mRNA spots, which integrates the mRNA signal. The center plot should help you
optimize the value.
</p>
<p>
The rightmost plot shows the algorithm's final cell-type assignment. <br>
Choose a <i>bandwidth</i> large enough to eliminate unwanted noise and at the same time
retain the desired structural detail in the result. <br>
Choose the <i>threshold</i> to remove unwanted, low-signal areas from the result.
</p>
<p>
As can be seen in the figure below, a small bandwidth (left column) will not integrate the
signal enough
(i.e. the resultant cell-type map is still grainy) while high values (right column) lead too
oversmoothing. <br>
If the expression threshold is too lenient, there will be no distinction between cells and
background (top row)
and if it is too rigid no/few cells will be detected. <br>
<img src="./resources/imgs/tutorial/parameter_effects.jpg" style="max-width: 100%;">
</p>
<p>
<a id="button-tutorial-close-7" class="btn btn-lg btn-secondary btn-close">Close</a>
<a href="#section-analysis" id="button-tutorial-next-7"
class="btn btn-lg btn-secondary btn-next">Next</a>
</p>
</div>
<div class="container-fluid justify-content-center">
<h1 class="cover-heading">Parameters</h1>
<p class="lead">Use previews to find an optimal set of parameters for your analysis.
</p>
</div>
<div id="btn-parameters" class="btn btn-lg btn-secondary" style="white-space: normal">
<div id="Progress-parameters Progress">
<div id="bar-parameters">
Use preview generator for parameter search
</div>
</div>
</div>
<!-- <div id="preview-loader" class="mainloader" style="display: none; "></div> -->
<div id="preview-generator" style="display: none;">
<input type="checkbox" id="liveParameterUpdateCheckbox" name="liveUpdate" value="tutorial_generator"
checked style="margin: 10px">
<label for="liveUpdate">Live update</label><br>
<div class="d-flex flex-row flex-wrap justify-content-center" style="min-height: 60vh;">
<!-- field coordinates: -->
<div class="d-flex flex-column justify-content-center" style="width: 30%; min-width: 250px;">
<div id="parameter-coordinates"
style="height: 90%; min-height: 250px; border: 2px solid white; padding: 0px"></div>
<div id="parameter-coordinates-input" class="d-flex flex-column slidecontainer"
style="min-height: 125px; padding: 10px">
<!-- <div class="d-flex justify-content-center">
<label for="vf-width" data-toggle="vf-width"
title="The size of our discrete analysis/output area in pixels">Pixel width
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
</label>
</div> -->
<!-- <div class="d-flex p-2 justify-content-center">
<input type="number" id="vf-width" name="vf-width" min="1" value="500">
</div>
<div class="d-flex justify-content-center">
<div id="vf-size-information">total size: -</div>
</div> -->
</div>
</div>
<!-- field vf: -->
<div class="d-flex flex-column justify-content-center" style="width: 30%; min-width: 250px;">
<div id="parameter-vf"
style="height: 90%; min-height: 250px; border: 2px solid white; padding: 0px"></div>
<div id="parameter-vf-input" class="d-flex flex-column slidecontainer"
style="min-height: 125px; padding: 10px">
<!-- <div class="d-flex justify-content-center">
<label for="KDE-bandwidth" data-toggle="KDE-bandwidth"
title="The 'smoothing factor' applied to the mRNA locations">KDE kernel
bandwidth
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
</label>
</div> -->
<!-- <div class="d-flex p-2 justify-content-center">
<input type="number" id="KDE-bandwidth" name="KDE-bandwidth" step="0.1" min="0.1"
value="3">
</div> -->
</div>
</div>
<!-- field cell type: -->
<div class="d-flex flex-column justify-content-center" style="width: 30%; min-width: 250px;">
<div id="parameter-celltypes"
style="height: 90%; min-height: 250px; border: 2px solid white; padding: 0px"></div>
<div id="parameter-celltypes-input" class="d-flex flex-column slidecontainer"
style="min-height: 125px; padding: 10px">
<!-- <div class="d-flex justify-content-center">
<label for="vf-width" data-toggle="threshold"
title="Threshold for discarding areas with low expression signal">Expression
threshold
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
</label>
</div> -->
<!-- <div class="d-flex p-2 justify-content-center">
<input type="number" id="threshold" name="threshold" step=0.1 min="0" value="2">
</div> -->
</div>
</div>
</div>
</div>
<div id="preview-default" style="display: block;">
<div class="d-flex flex-row flex-wrap justify-content-center" style="min-height: 20vh;">
<!-- field coordinates: -->
<div class="d-flex flex-column justify-content-center" style="width: 30%; min-width: 250px;">
<div id="parameter-coordinates-input-default" class="d-flex flex-column slidecontainer"
style="min-height: 125px; padding: 10px">
<div class="d-flex justify-content-center">
<label for="vf-width" data-toggle="vf-width"
title="The size of our discrete analysis/output area in pixels">Pixel width
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
</label>
</div>
<div class="d-flex p-2 justify-content-center">
<input type="number" id="vf-width" name="vf-width" min="1" value="500">
</div>
<div class="d-flex justify-content-center">
<div id="vf-size-information">total size: -</div>
</div>
</div>
</div>
<!-- field vf: -->
<div class="d-flex flex-column justify-content-center" style="width: 30%; min-width: 250px;">
<div id="parameter-vf-input-default" class="d-flex flex-column slidecontainer"
style="min-height: 125px; padding: 10px">
<div class="d-flex justify-content-center">
<label for="KDE-bandwidth" data-toggle="KDE-bandwidth"
title="The 'smoothing factor' applied to the mRNA locations">KDE kernel
bandwidth
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
</label>
</div>
<div class="d-flex p-2 justify-content-center">
<input type="number" id="KDE-bandwidth" name="KDE-bandwidth" step="0.1" min="0.1"
value="3">
</div>
</div>
</div>
<!-- field cell type: -->
<div class="d-flex flex-column justify-content-center" style="width: 30%; min-width: 250px;">
<div id="parameter-celltypes-input-default" class="d-flex flex-column slidecontainer"
style="min-height: 125px; padding: 10px">
<div class="d-flex justify-content-center">
<label for="vf-width" data-toggle="threshold"
title="Threshold for discarding areas with low expression signal">Expression
threshold
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
</label>
</div>
<div class="d-flex p-2 justify-content-center">
<input type="number" id="threshold" name="threshold" step=0.1 min="0" value="2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- analysis section -->
<div id="wrapper-analysis">
<div id="section-analysis" class="section-top-space" style="height:30vh; width:100%"></div>
<!-- section analysis-KDE -->
<div id="tutorial-modal-analysis-KDE" class="modal-content">
<p>Now we can start with the <b>Analysis</b>: Click on the button 'Run Kernel Density Estimation' to run
a
kernel density estimation on your dataset.
</p>
<p>This is the computationally most expensive step and might take a minute depending on your dataset
and the chosen parameters.
</p>
<p>
<a id="button-tutorial-close-8" class="btn btn-lg btn-secondary btn-close"> Close</a>
<a href="#section-assignments" id="button-tutorial-next-8"
class="btn btn-lg btn-secondary btn-next">
Next</a>
</p>
</div>
<div id="section-analysis-title">
<div class="d-row container-fluid justify-content-center">
<h1 class="cover-heading">Analysis</h1>
</div>
</div>
<div id="section-KDE" style="padding: 30px;">
<h3>Step 1: Kernel Density Estimation </h3>
<p class="lead">As a first step, we run a KDE that creates a density of mRNA expression.
</p>
<div id="btn-KDE" class="btn btn-lg btn-secondary">
<div id="Progress-KDE Progress">
<div id="Bar-KDE">
Run Kernel Density Estimation
</div>
</div>
</div>
</p>
</div>
<div id="vf-norm-preview" class="d-row container-fluid"
style="width: 80vw; max-width: 120vh; height: 80vh; max-height: 120vw; padding: 0px"></div>
<div id="section-assignments" class="d-row" style="height:10vh; width:100%"></div>
<div id="tutorial-modal-analysis-assignments" class="modal-content">
<p>On to the last step of the SSAM-lite pipeline: Click 'Infer Cell Types' to obtain an interactive cell
type map and a bar plot of the relative cell type abundance in the current field of view.
The cell type abundances will be recalculated if you zoom in to an area.
As described previously you can also hide specifc (or all) cell types by clicking
(double-clicking) on their names.
</p>
<p>To adjust the color palette you can upload a csv file with the cell type name in one column and a
hexadecimal encoded color in the other by clicking the 'Custom color map' button. Try it out by
uploading
the <i>custom_colors.csv</i> provided with the test data.
</p>
<p>
<a id="button-tutorial-close-9" class="btn btn-lg btn-secondary btn-close"> Close</a>
<a href="#section-assignments" id="button-tutorial-next-9"
class="btn btn-lg btn-secondary btn-next">
Next</a>
</p>
</div>
<div id="tutorial-modal-download" class="modal-content">
<p>To <b>download your results</b> you can hover over the image you want to save. A control panel will
appear
in the top-right corner of the plot which allows you to save it as png by clicking on the camera
icon. For the cell type abundance plot there is an additional save icon that downloads the values of the relative abundances
in a tsv format.
</p>
<p>The only thing left now is to analyze your own data!
</p>
<p>
<a id="button-tutorial-close-10" class="btn btn-lg btn-secondary btn-close"> Close</a>
</p>
</div>
<div id="section-assignments-title" class="" style="padding: 10px;">
<h3>Step 2: Cell Assignments</h3>
<p class="lead">We can now infer cell types.</p>
<div id="btn-types" class="btn btn-lg btn-secondary">
<div id="Progress-Types Progress">
<div id="Bar-Types">
Infer Cell Types
</div>
</div>
</div>
</div>
</p>
<!-- <div class="d-flex, flex-row, container-fluid"> -->
<div class="d-flex flex-wrap flex-lg-nowrap justify-content-center align-items-start">
<div id="celltypes-preview" class="container-fluid"
style="width: 60%; min-width: 350px; height: 90vh; max-height: 100vw; padding: 0px">
</div>
<div id='celltype-preview-right-panel' class="flex-wrap container-fluid"
style="width: 30%; min-width: 350px; height: 90vh; max-height: 100vw; padding: 0px">
<div id="celltypes-stats" class="d-column container-fluid"
style="background-color: transparent; height: 80%;">
</div>
<!-- <div id="current-highlight" , style="display: none;">-1</div> -->
<div id="section-cmap" class="d-column" style="height: 5vh; display: none">
<div class="d-flex d-row container-fluid" style="height: 5vh;">
<input type="file" id="btn-cmap-hidden" name="uploads-cmaps" class="file-upload" hidden>
<label for="btn-cmap-hidden">
<div id="btn-cmap" class="btn btn-lg btn-secondary">
Custom color map
</div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- reload option -->
<div id="wrapper-reload">
<div id="section-reload" class="section-top-space" style="height: 20vh; width: 100%"></div>
<div class="section-main-space d-row container-fluid justify-content-center" style="height:5vh;">
<div id="btn-reload" class="btn btn-lg btn-secondary">
Clear analysis
</div>
</div>
</div>
<!-- about section -->
<div id="wrapper-about">
<div id="section-about" class="section-top-space" style="height:10vh; width:100%"></div>
<div class="section-main-space d-row container-fluid justify-content-center" style="height:20vh;">
<h1 class="cover-heading">About</h1>
<div class="d-row">
<div style="text-align: center; padding-top: 40px; padding-bottom: 15px;">
The SSAM framework was conceived by Dr. Jeongbin Park
as part of his PhD project at the Berlin Institute of Health.
Read the original <a href="https://www.nature.com/articles/s41467-021-23807-4" target="_blank"
rel="noopener noreferrer"><u>SSAM publication</u></a>
to learn more about the methods.
</div>
<div style="text-align: center; padding: 15px;">
SSAM-lite has been designed and implemented by Sebastian Tiesmeyer at the Berlin Institute of
Health.
Learn more about SSAM-lite <a href="https://doi.org/10.3389/fgene.2022.785877"
target="_blank" rel="noopener noreferrer"><u>here</u></a>.
</div>
<div style="text-align: center; padding: 15px;">
For a comprehensive documentation of the SSAM-lite tool check out our
<a href="https://ssam-lite.readthedocs.io" target="_blank" rel="noopener noreferrer"><u>Read the
Docs page</u></a>.
</div>
<div style="text-align: center; padding-top: 15px; padding-bottom: 5px;">
If you are using SSAM-lite for your research please cite:
</div>
<div style="text-align: center; padding-top: 5px; padding-bottom: 50px;">
Tiesmeyer S, Sahay S, Müller-Bötticher N, Eils R, Mackowiak SD and Ishaque N (2022) <br>
SSAM-lite: A Light-Weight Web App for Rapid Analysis of Spatially Resolved Transcriptomics Data.<br>
<i>Front. Genet.</i> 13:785877. doi: 10.3389/fgene.2022.785877
<!-- <i>bioRxiv</i>. doi: 10.1101/2021.09.29.462194 -->
</div>
<div class="d-flex flex-row flex-wrap justify-content-around"
style="background-color: white; padding: 10px; border-radius: 20px;">
<div class="d-flex">
<a href="https://www.charite.de/" target="_blank" rel="noopener noreferrer">
<img src="./resources/imgs/Logo_Charite.svg.png"
style="height: 40px; width: auto; margin:5px; padding: 5px;">
</a>
</div>
<div class="d-flex">
<a href="http://www.bihealth.org" target="_blank" rel="noopener noreferrer">
<img src="./resources/imgs/logo_bihealth_en.png"
style="height: 40px; width: auto; margin:5px; padding: 5px;">
</a>
</div>
<div class="d-flex">
<a href="https://doi.org/10.3389/fgene.2022.785877" target="_blank" rel="noopener noreferrer">
<img src="./resources/imgs/logo-frontiers.png"
style="height: 40px; width: auto; margin:5px; padding: 5px;">
</a>
</div>
<div class="d-flex">
<a href="https://www.biorxiv.org/content/10.1101/2021.09.29.462194" target="_blank"
rel="noopener noreferrer">
<img src="./resources/imgs/logo_biorxiv.png "
style="height: 40px; width: auto; margin:5px; padding: 5px;">
</a>
</div>
<div class="d-flex">
<a href="https://github.com/HiDiHlabs/ssam-lite" target="_blank" rel="noopener noreferrer">
<img src="./resources/imgs/GitHub-Mark.png"
style="height: 40px; width: auto; margin:5px; padding: 5px;">
</a>
</div>
<div class="d-flex">
<a href="https://www.hidih.org/" target="_blank" rel="noopener noreferrer">
<img src="./resources/imgs/BIH-003_Logo_HiDiH_01_600px_200124.webp"
style="height: 40px; width: auto; margin:5px; padding: 5px;">
</a>
</div>
</div>
<div style="color: gray; padding: 30px;">
<a href="https://github.com/HiDiHlabs/ssam-lite/blob/main/LICENSE" target="_blank"
rel="noopener noreferrer" style="color: gray;">
© 2021 Sebastian Tiesmeyer, Naveed Ishaque, Roland Eils, Berlin Institute of Health @
Charité
</a>
-
<a href="https://github.com/HiDiHlabs/ssam-lite/releases" target="_blank"
rel="noopener noreferrer" style="color: gray;" id="version-string">
<span id="result"></span>
</a>
</div>
</div>
</div>
</div>
</main>
<!-- importing external scripts here: -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://rawgit.com/hippich/bower-semver/master/semver.min.js"></script>
<script src="./scripts/pkgs/bootstrap-4.0.0//dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="./scripts/pkgs/plotly/plotly-2.5.1.min.js"></script>
<script src="./scripts/model.js"></script>
<script src="./scripts/tutorial_generator.js"></script>
<script src="./scripts/view.js"></script>
<script src="./scripts/color_generator.js"></script>
<script src="./scripts/controller.js"></script>
</body>
</html>