-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
120 lines (116 loc) · 13.4 KB
/
index.html
File metadata and controls
120 lines (116 loc) · 13.4 KB
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
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport"/>
<title>Icephys Dandiset Visualization</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"/>
<link href="assets/css/bs-theme-overrides.css" rel="stylesheet"/>
<link href="assets/css/styles.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-table@1.22.4/dist/bootstrap-table.min.css" rel="stylesheet"/>
</head>
<body class="fs-6 fw-lighter focus-ring focus-ring-primary">
<div class="container-fluid d-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-center align-items-center align-content-center align-items-xxl-center" style="position: static;background: var(--bs-body-bg);">
<div class="row" id="header-row">
<div class="col-md">
<div class="row">
<div class="col">
<div class="card card-base">
<div class="card-body">
<h4 class="card-title" id="db_title">Icephys Dandiset Visualization</h4>
<h6 class="text-muted card-subtitle mb-2" id="db_subtitle"></h6>
<p class="card-text" id="db_desc"> This is a visualization of some of the intracellular electrophysiology (icephys) data found across the open
neuroscience initiative DANDI. The data is visualized using a UMAP and a parallel coordinates plot. The data is also visualized in a table format.
This is currently a work in progress and is not yet complete. Please cite the original authors of the data when using this data. </p><div></div><a class="card-link" href="https://twitter.com/smestern">smestern on X</a><div></div><a class="card-link" href="https://dandiarchive.org/">Dandi</a><a class="card-link" href="#"></a><a class="card-link" href="#"></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card card-base">
<div class="card-body">
<h6 class="text-muted card-subtitle" id="Label-Viz">Label Visualized</h6>
<div id="umap-drop-menu"><div class="form-check"><input checked="" class="form-check-input" id="dandiset label" name="label-select" type="radio" value="dandiset label"/><label class="form-check-label" for="dandiset label">dandiset label</label></div><div class="form-check"><input class="form-check-input" id="species" name="label-select" type="radio" value="species"/><label class="form-check-label" for="species">species</label></div><div class="form-check"><input class="form-check-input" id="brain_region" name="label-select" type="radio" value="brain_region"/><label class="form-check-label" for="brain_region">brain_region</label></div><div class="form-check"><input class="form-check-input" id="contributor" name="label-select" type="radio" value="contributor"/><label class="form-check-label" for="contributor">contributor</label></div><div class="form-check"><input class="form-check-input" id="GMM cluster label" name="label-select" type="radio" value="GMM cluster label"/><label class="form-check-label" for="GMM cluster label">GMM cluster label</label></div><div class="form-check"><input class="form-check-input multi-key" id="Ephys Feat:" name="label-select" type="radio" value="Ephys Feat:"/><label class="form-check-label" for="Ephys Feat:"><select class="form-select" id="Ephys Feat:-select"><option value="Input resistance Log[(MOhm)]">Input resistance Log[(MOhm)]</option><option value="Tau Log[(ms)]">Tau Log[(ms)]</option><option value="Baseline voltage (mV)">Baseline voltage (mV)</option><option value="Sag">Sag</option><option value="Rheo-AP Threshold (mV)">Rheo-AP Threshold (mV)</option><option value="Rheo-AP Peak (mV)">Rheo-AP Peak (mV)</option><option value="Rheo-AP Upstroke (mV/ms)">Rheo-AP Upstroke (mV/ms)</option><option value="Rheo-AP width Log[(ms)]">Rheo-AP width Log[(ms)]</option><option value="Rheo-AP Fast Trough (mV)">Rheo-AP Fast Trough (mV)</option><option value="Mean AP Threshold (mV)">Mean AP Threshold (mV)</option><option value="Mean AP Peak (mV)">Mean AP Peak (mV)</option><option value="Mean AP Upstroke (mV/ms)">Mean AP Upstroke (mV/ms)</option><option value="Mean AP Width Log[(ms)]">Mean AP Width Log[(ms)]</option><option value="Mean AP Fast Trough (mV)">Mean AP Fast Trough (mV)</option><option value="Avg Firing Rate (Hz)">Avg Firing Rate (Hz)</option><option value="Latency (s)">Latency (s)</option></select></label></div></div>
</div>
</div>
</div>
</div>
<div class="row visually-hidden" id="dataset-select">
<div class="col">
<div class="card card-base">
<div class="card-body">
<h6 class="text-muted card-subtitle" id="Label-Viz-1">Datasets Visualized</h6>
<div id="dataset-drop-menu"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-10" id="plot-col">
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center row">
<div class="col">
<div class="card card-base" id="embed_card">
<div class="card-body" style="min-height: 25vh;">
<h4 class="card-title">UMAP</h4>
<div id="graphDiv_scatter" style="min-height: 400px;max-height: 90vh;"></div>
</div>
</div>
</div>
<div class="col col-para">
<div class="card card-base" id="para_card">
<div class="card-body" style="max-height: 90vh;min-height: 400px;">
<h4 class="card-title">Paracoords</h4>
<div id="graphDiv_parallel"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<table data-classes="table table-responsive table-card-alt" data-detail-view="false" data-pagination="true" data-resizable="true" data-search="false" data-show-columns="false" data-show-export="false" data-show-header="false" data-toggle="table" id="table">
<thead>
<tr>
<th data-class="file-ID" data-field="specimen_id" data-formatter="valFormatter" data-searchable="false" data-sortable="false">specimen_id</th><th data-field="_plot" data-formatter="plotFormatterDummy" data-searchable="false" data-sortable="false"></th><th data-field="_ephys" data-formatter="ephysFormatterDummy" data-searchable="false" data-sortable="false"></th><th data-field="_plot_fi" data-formatter="plotFormatterDummy" data-searchable="false" data-sortable="false"></th><th data-field="_link" data-formatter="linkFormatterDummy" data-searchable="false" data-sortable="false"></th><th data-field="Avg Firing Rate (Hz)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Avg Firing Rate (Hz)</th><th data-field="Baseline voltage (mV)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Baseline voltage (mV)</th><th data-field="File Download" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">File Download</th><th data-field="GMM cluster label" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">GMM cluster label</th><th data-field="ID" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">ID</th><th data-field="Input resistance Log[(MOhm)]" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Input resistance Log[(MOhm)]</th><th data-field="Latency (s)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Latency (s)</th><th data-field="Mean AP Fast Trough (mV)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Mean AP Fast Trough (mV)</th><th data-field="Mean AP Peak (mV)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Mean AP Peak (mV)</th><th data-field="Mean AP Threshold (mV)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Mean AP Threshold (mV)</th><th data-field="Mean AP Upstroke (mV/ms)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Mean AP Upstroke (mV/ms)</th><th data-field="Mean AP Width Log[(ms)]" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Mean AP Width Log[(ms)]</th><th data-field="Rheo-AP Fast Trough (mV)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Rheo-AP Fast Trough (mV)</th><th data-field="Rheo-AP Peak (mV)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Rheo-AP Peak (mV)</th><th data-field="Rheo-AP Threshold (mV)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Rheo-AP Threshold (mV)</th><th data-field="Rheo-AP Upstroke (mV/ms)" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Rheo-AP Upstroke (mV/ms)</th><th data-field="Rheo-AP width Log[(ms)]" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Rheo-AP width Log[(ms)]</th><th data-field="Sag" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Sag</th><th data-field="Tau Log[(ms)]" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Tau Log[(ms)]</th><th data-field="Umap X" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Umap X</th><th data-field="Umap Y" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">Umap Y</th><th data-field="View Dandiset" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">View Dandiset</th><th data-field="View File Metadata" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">View File Metadata</th><th data-field="brain_region" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">brain_region</th><th data-field="contributor" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">contributor</th><th data-field="dandiset label" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">dandiset label</th><th data-field="foldername" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">foldername</th><th data-field="label" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">label</th><th data-field="species" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">species</th><th data-field="species_meta" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">species_meta</th><th data-field="specimen_id.1" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">specimen_id.1</th><th data-field="supervised umap X" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">supervised umap X</th><th data-field="supervised umap Y" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">supervised umap Y</th><th data-field="umap X" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">umap X</th><th data-field="umap Y" data-formatter="valFormatter" data-searchable="false" data-sortable="true" data-visible="false">umap Y</th></tr>
</thead>
</table>
</div>
</div>
<div>
<script>
function plotFormatterDummy(value, row, index, field) {
return '<div id="graphDiv_' + row['ID'] + field + '"></div>';
}
function valFormatter(value, row, index, field) {
//make a nice text for the value
html = []
html.push('<div class="col">')
html.push('<div class="feat-title">' + field + '</div>')
html.push('<span class="feat-value">' + value + '</span>')
html.push('</div>')
return html.join('')
}
function ephysFormatterDummy(value, row, index, field) {
return '<div id="table_' + row['ID'] + '"></div>';
}
function linkFormatterDummy(value, row, index, field) {
return '<div id="link_' + row['ID'] + '" class="file-link"></div>';
}
</script>
<script crossorigin="anonymous" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script charset="utf-8" src="https://cdn.plot.ly/plotly-3.3.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-table@1.22.4/dist/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.4/dist/bootstrap-table.min.js"></script>
<script src="./assets/data.js"></script>
<!-- Load common utilities FIRST, then mode-specific template -->
<script src="./assets/template.js"></script>
</div></body>
</html>