forked from IuricichF/CellTrackVis
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
272 lines (236 loc) · 22.3 KB
/
index.html
File metadata and controls
272 lines (236 loc) · 22.3 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
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
<!DOCTYPE html>
<html lang='en' class="text-gray-900 leading-tight">
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
<link rel="stylesheet" href="tailwind.css">
<meta charset="utf-8">
<script src="index_initialization.js"></script>
<title>Cell Tracking Visualization</title>
<style>
#image_slider {
background: gray;
/* border: solid 1px #82CFD0; */
border-radius: 8px;
-webkit-appearance: none;
}
</style>
</head>
<body class="min-h-screen white">
<div class="flex min-h-screen bg-gray-600">
<div id="dashboard" class="flex flex-col items-center w-60 h-800 overflow-hidden text-gray-400 bg-gray-900 rounded">
<a class="flex items-center w-full px-3 mt-3" href="index.html">
<span class="ml-2 text-base font-bold">Cell Tracking Dashboard</span>
</a>
<div id="dashboard_view" style="display: none" class="w-full px-2">
<div class="flex flex-col items-center w-full mt-2 border-t border-gray-700">
<a id="dashboard_overall_view" class="relative flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
onclick="initView.displayOneViewAndHideOthers(views[1]); initView.initializeAndBuildOverallView();">
<svg class="w-6 h-6 stroke-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M7 19h-6v-11h6v11zm8-18h-6v18h6v-18zm8 11h-6v7h6v-7zm1 9h-24v2h24v-2z"/>
</svg>
<span class="ml-2 text-sm font-medium">Overview</span>
</a>
<a id="dashboard_single_alg_view" class="relative flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
onclick="initView.displayOneViewAndHideOthers(views[2]); initView.initializeAndBuildSingleAlgView(single_alg_alg_select.value);">
<svg class="w-6 h-6 stroke-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M24 20l-6.455 4-5.545-4-5.545 4-6.455-4v-20l6.455 4 5.545-4 5.545 4 6.455-4v20zm-11.5-13h-1v-5.406l-4.5 3.246v4.16h-1v-4.106l-5-3.098v17.647l5 3.099v-6.542h1v6.374l4.5-3.246v-5.128h1v5.128l4.5 3.246v-5.374h1v5.542l5-3.099v-17.647l-5 3.098v3.106h-1v-3.16l-4.5-3.246v5.406zm8.172 7.016l-1.296-1.274 1.273-1.293-.708-.702-1.272 1.294-1.294-1.271-.703.702 1.296 1.276-1.273 1.296.703.703 1.277-1.298 1.295 1.275.702-.708zm-14.102-.606c-.373 0-.741-.066-1.092-.195l.407-1.105c.221.081.451.122.685.122.26 0 .514-.05.754-.149l.448 1.09c-.383.157-.787.237-1.202.237zm-2.601-2.374c-.535 0-.969.433-.969.968 0 .534.434.968.969.968.535 0 .969-.434.969-.968 0-.535-.434-.968-.969-.968zm11.271 1.591l-1.659-.945.583-1.024 1.66.945-.584 1.024zm-6.455-.02l-.605-1.011 1.638-.981.606 1.01-1.639.982zm3.918-1.408c-.243-.101-.5-.153-.763-.153-.231 0-.457.04-.674.118l-.402-1.108c.346-.125.708-.188 1.076-.188.419 0 .83.082 1.216.243l-.453 1.088z"/> </svg>
<span class="ml-2 text-sm font-medium">Single Algorithm</span>
</a>
<a id="dashboard_single_fov_view" class="relative flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
onclick="initView.displayOneViewAndHideOthers(views[3]);">
<svg class="w-6 h-6 stroke-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M10.921 11.459c-.231.173-.512.267-.801.267-.536 0-.805-.654-.428-1.031.205-.205.469-.336.756-.378.54-.078.777-.748.38-1.146-.397-.397-1.067-.16-1.146.381-.041.286-.173.551-.377.755-.379.379-1.032.109-1.032-.427 0-.29.093-.569.267-.801.329-.438.021-1.079-.54-1.079s-.869.641-.541 1.079c.173.231.267.512.267.801 0 .537-.652.807-1.031.428-.205-.205-.337-.469-.378-.756-.078-.54-.748-.778-1.146-.381-.397.398-.16 1.068.381 1.146.286.041.551.173.755.377.379.38.109 1.032-.428 1.032-.29 0-.569-.093-.801-.267-.437-.328-1.078-.02-1.078.541s.641.869 1.079.541c.231-.173.512-.267.801-.267.537 0 .807.652.428 1.031-.205.205-.469.336-.755.378-.541.078-.778.748-.381 1.146.398.397 1.068.16 1.146-.381.041-.286.173-.551.377-.755.38-.379 1.032-.109 1.032.427 0 .29-.093.569-.267.801-.328.437-.022 1.079.54 1.079.559 0 .871-.64.541-1.08-.173-.229-.267-.509-.267-.796 0-.538.652-.811 1.032-.431.205.205.336.469.377.755.078.541.748.778 1.146.381.397-.397.161-1.069-.382-1.146-.284-.04-.548-.171-.751-.375-.381-.38-.112-1.034.425-1.034.289 0 .568.093.801.267.435.327 1.078.021 1.078-.541s-.642-.868-1.079-.541zm-3.576 1.432c-.183 0-.33-.148-.33-.33s.147-.33.33-.33c.182 0 .33.148.33.33s-.148.33-.33.33zm.421-1.048c-.286 0-.518-.231-.518-.518s.232-.518.518-.518c.286 0 .518.231.518.518s-.232.518-.518.518zm.976.99c-.242 0-.438-.196-.438-.438s.196-.438.438-.438.438.196.438.438-.196.438-.438.438zm2.196 7.167h-10.938v-20h21v11.462c-.594-.472-1.269-.843-2-1.094v-4.368h-17v12h8.212c.136.713.384 1.386.726 2zm13.062 2.586l-2.831-2.832c.522-.79.831-1.735.831-2.754 0-2.761-2.238-5-5-5s-5 2.239-5 5 2.238 5 5 5c1.019 0 1.964-.309 2.755-.832l2.831 2.832 1.414-1.414zm-10-5.586c0-1.654 1.346-3 3-3s3 1.346 3 3-1.346 3-3 3-3-1.346-3-3z"/>
</svg>
<span class="ml-2 text-sm font-medium">Single FOV</span>
</a>
</div>
</div>
<div id="dashboard_option" style="display: none" class="flex flex-col items-center w-full mt-3 border-t border-gray-700">
<a class="flex items-center w-full px-3 mt-3" href="#">
<span class="ml-2 text-sm font-bold">Options</span>
</a>
<div id="overall_option" style="display: none">
<a class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300" href="#">
<span class="ml-2 text-sm font-medium text-left">Frame rate -
<select id="overall_dt_select" oninput="
algArr = [];
d3.select('#dashboard_view').style('display', 'none');
d3.select('#overall_display').style('display', 'none');
initView = initialization(+this.value);"></select>
</span>
<script>
const d3_overall_dt_select = d3.select("#overall_dt_select");
for (const dt of dtArr) {
d3_overall_dt_select.append("option")
.text(`${dt}`);
}
</script>
</a>
</div>
<div id="single_alg_option" style="display: none">
<a class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300" href="#">
<span class="ml-2 text-sm font-medium text-left">Algorithm -
<select id="single_alg_alg_select" oninput="single_alg_div.innerHTML = ''; initView.buildSingleAlgView(this.value);"></select>
</span>
<script>
const d3_single_alg_alg_select = d3.select("#single_alg_alg_select");
</script>
</a>
</div>
<div id="single_fov_option" style="display: none">
<a class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300" href="#">
<span class="ml-2 text-sm font-medium text-left">FOV -
<select id="single_fov_idx_select" oninput="
initView.initializeAndBuildSingleFOVView(single_fov_alg_select.value, +this.value);
"></select>
</span>
<script>
const d3_single_fov_idx_select = d3.select("#single_fov_idx_select");
for (let i = 1; i <= datasetNum; i++) {
d3_single_fov_idx_select.append("option")
.text(`${i}`);
}
</script>
</a>
<a class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300" href="#">
<span class="ml-2 text-sm font-medium text-left">Algorithm -
<select id="single_fov_alg_select" oninput="
initView.initializeAndBuildSingleFOVView(this.value, +single_fov_idx_select.value);
"></select>
</span>
<script>
const d3_single_fov_alg_select = d3.select("#single_fov_alg_select");
</script>
</a>
</div>
</div>
<div id="legend" class="w-full px-2">
</div>
<a id="dashboard_github_page"class="flex items-center justify-center w-full h-16 mt-auto bg-gray-800 hover:bg-gray-700 hover:text-gray-300" href="https://github.com/Lygihub/DataVis">
<svg class="w-6 h-6 stroke-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
<span class="ml-2 text-sm font-medium">Github page</span>
</a>
</div>
<div id="index_display" class="w-4/5 p-10 bg-gray-900 rounded-md h-full mt-10 container mx-auto shadow-md">
<p class="text-2xl text-gray-300">
Cell Tracking Dasbhoard
</p>
<p class="text-base text-gray-300 pt-8">
Motivation
</p>
<p class="text-sm text-gray-300">
In live-cell imaging, analyzing the movements of cells is crucial for many applicative scenarios such as biochemistry, bioinformatics, cell biology, and genetics.
Since following cells by hand is extremely tedious and time consuming, we can design algorithms to do that for us.
However, no algorithm is perfect which introduces the additional challenge to evaluate an algorithm accuracy to understand which algorithm we can trust.
For this purpose we are developing the Cell Tracking Visualization Dashboard, a web tool simplifying the analysis of cell tracking algorithm by single out and visualize error links from the
predicted data compare to ground truth data.
</p>
<p class="text-base text-gray-300 pt-8">
Design
</p>
<p class="text-sm text-gray-300">
There are three main views allowing the user to analyze cell tracking algorithms' performance at different level of granularity
<div class="grid grid-cols-12 p-8">
<div class="col-start-1 text-gray-300 text-sm">
<svg class="w-8 h-8 stroke-gray-200 fill-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path style="stroke:#9ca3af" d="M7 19h-6v-11h6v11zm8-18h-6v18h6v-18zm8 11h-6v7h6v-7zm1 9h-24v2h24v-2z"/>
</svg>
Overview
</div>
<div class="col-start-2 col-span-11 text-gray-300 pb-6">
The first objective is providing an overview of the algorithms' results. Through the Overview dashboard users can identify
problematic Fields of Views (FOV), overall algorithms' performance, and the best perfoming algorithm for each FOV.
To this end, the first view focuses on displaying number of error links produced by different algorithm for each FOV. FOVs are ordered by sum of number of error links.
</div>
<div class="col-start-1 text-gray-300 text-sm">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path style="stroke:#9ca3af" d="M24 20l-6.455 4-5.545-4-5.545 4-6.455-4v-20l6.455 4 5.545-4 5.545 4 6.455-4v20zm-11.5-13h-1v-5.406l-4.5 3.246v4.16h-1v-4.106l-5-3.098v17.647l5 3.099v-6.542h1v6.374l4.5-3.246v-5.128h1v5.128l4.5 3.246v-5.374h1v5.542l5-3.099v-17.647l-5 3.098v3.106h-1v-3.16l-4.5-3.246v5.406zm8.172 7.016l-1.296-1.274 1.273-1.293-.708-.702-1.272 1.294-1.294-1.271-.703.702 1.296 1.276-1.273 1.296.703.703 1.277-1.298 1.295 1.275.702-.708zm-14.102-.606c-.373 0-.741-.066-1.092-.195l.407-1.105c.221.081.451.122.685.122.26 0 .514-.05.754-.149l.448 1.09c-.383.157-.787.237-1.202.237zm-2.601-2.374c-.535 0-.969.433-.969.968 0 .534.434.968.969.968.535 0 .969-.434.969-.968 0-.535-.434-.968-.969-.968zm11.271 1.591l-1.659-.945.583-1.024 1.66.945-.584 1.024zm-6.455-.02l-.605-1.011 1.638-.981.606 1.01-1.639.982zm3.918-1.408c-.243-.101-.5-.153-.763-.153-.231 0-.457.04-.674.118l-.402-1.108c.346-.125.708-.188 1.076-.188.419 0 .83.082 1.216.243l-.453 1.088z"/>
</svg>
Single Algorithm
</div>
<div class="text-gray-300 col-start-2 col-span-11 pb-6 ">
The second objective is providing a detailed overview of a single algorithm's performance.
Through the Single Algorithm dashboard a user can study each single error link occured in eac FOV of the dataset.
Each FOV is represented by a card in the main view. Linking errors are explicitly represented in the domain space of the images.
Each point indicates the location at which the error is occurring (i.e., where the predicted track agrees with the ground truth track).
The line indicates the error link committed (i.e., the wrong connection between two points belonging to two different ground truth tracks).
Each card shows additional statistics regarding the FOV such us: the FOV index, the number of linking errors, the percentage of linking errors (i.e., number of errors / total number of linking * 100),
the total number of cells in the FOV, and the total number of links.
The last two values in particular provide a good indication of how challenging a FOV is since the more dense a FOV is (i.e., the more cells are imaged in the same FOV) the more likely linking errors are to occur.
</div>
<div class="col-start-1 text-gray-300 text-sm">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path style="stroke:#9ca3af" d="M10.921 11.459c-.231.173-.512.267-.801.267-.536 0-.805-.654-.428-1.031.205-.205.469-.336.756-.378.54-.078.777-.748.38-1.146-.397-.397-1.067-.16-1.146.381-.041.286-.173.551-.377.755-.379.379-1.032.109-1.032-.427 0-.29.093-.569.267-.801.329-.438.021-1.079-.54-1.079s-.869.641-.541 1.079c.173.231.267.512.267.801 0 .537-.652.807-1.031.428-.205-.205-.337-.469-.378-.756-.078-.54-.748-.778-1.146-.381-.397.398-.16 1.068.381 1.146.286.041.551.173.755.377.379.38.109 1.032-.428 1.032-.29 0-.569-.093-.801-.267-.437-.328-1.078-.02-1.078.541s.641.869 1.079.541c.231-.173.512-.267.801-.267.537 0 .807.652.428 1.031-.205.205-.469.336-.755.378-.541.078-.778.748-.381 1.146.398.397 1.068.16 1.146-.381.041-.286.173-.551.377-.755.38-.379 1.032-.109 1.032.427 0 .29-.093.569-.267.801-.328.437-.022 1.079.54 1.079.559 0 .871-.64.541-1.08-.173-.229-.267-.509-.267-.796 0-.538.652-.811 1.032-.431.205.205.336.469.377.755.078.541.748.778 1.146.381.397-.397.161-1.069-.382-1.146-.284-.04-.548-.171-.751-.375-.381-.38-.112-1.034.425-1.034.289 0 .568.093.801.267.435.327 1.078.021 1.078-.541s-.642-.868-1.079-.541zm-3.576 1.432c-.183 0-.33-.148-.33-.33s.147-.33.33-.33c.182 0 .33.148.33.33s-.148.33-.33.33zm.421-1.048c-.286 0-.518-.231-.518-.518s.232-.518.518-.518c.286 0 .518.231.518.518s-.232.518-.518.518zm.976.99c-.242 0-.438-.196-.438-.438s.196-.438.438-.438.438.196.438.438-.196.438-.438.438zm2.196 7.167h-10.938v-20h21v11.462c-.594-.472-1.269-.843-2-1.094v-4.368h-17v12h8.212c.136.713.384 1.386.726 2zm13.062 2.586l-2.831-2.832c.522-.79.831-1.735.831-2.754 0-2.761-2.238-5-5-5s-5 2.239-5 5 2.238 5 5 5c1.019 0 1.964-.309 2.755-.832l2.831 2.832 1.414-1.414zm-10-5.586c0-1.654 1.346-3 3-3s3 1.346 3 3-1.346 3-3 3-3-1.346-3-3z"/>
</svg>
Single FOV
</div>
<div class="text-gray-300 col-start-2 col-span-11">
The third dasbhoard allows us to evaluate the detailed algorithm's performance on a single FOV.
This view is organized into two components.
The first component is a lineage forest representing all occurrences of a mitosis event.
Ground truth data is used to generate the geometry of each lineage tree. The leftmost point of a lineage tree indicates the time at which the cell enters the FOV.
The rightmost point of a lineage tree indicates the time at which the cell exists the FOV.
Each branch in the tree represents a mitosis event. Each branch is colored in black if it contains no linking errors.
Otherwise, a linear color scale used used to encode the number of linking errors committed on each ground truth cell track. This way, a user can easily identify problematic cell tracks.
The second component allows the user to inspect specific cell tracks. This component displays all cell tracks belonging to the FOV under study.
The main purpose of this view is to allow the user to investigate each single linking error and the causes that may have originated the error.
To this end, the view also displays the original image set providing explicit representation of the cells from which tracks have been computed.
By means of a slider on the top of the cell track view the user can change the time frame thus changing the image displayed.
While moving the slider, error links are automatically filtered in order to show only error links that appeared at a time frame less or equal than the one represented in the image.
</div>
</div>
</p>
</div>
<div id="overall_display" style="display: none" class="box-content w-4/5 p-8 text-xl">
<div class="box-content p-4 ">
<div class="grid grid-cols-4 gap-3 place-content-start" id="overall_div"></div>
</div>
</div>
<div id="single_alg_display" style="display: none" class="box-content p-8 text-xl">
<div class="box-content p-4 ">
<div class="grid grid-cols-4 gap-3 place-content-start" id="single_alg_div"></div>
</div>
</div>
<div id="single_fov_display" style="display: none" class="w-4/5 p-10 bg-gray-900 rounded-md h-full mt-10 container mx-auto shadow-md">
<div id="single_fov_visualizer_display" style="display: none" class="grid grid-cols-2 gap-2">
<div class="text-gray-300 text-base border-b">
Information
</div>
<div class="text-gray-300 text-base border-b">
Linking errors per track
</div>
<div class="text-gray-400 text-sm " id="infoview">
<span id="infoFOV">FOV name</span><br>
<span id="infoTrack">Number of tracks with error</span><br>
<span id="infoErr">Number of errors</span>
</div>
<div id="image_slider_div" class="text-gray-300">
<div>
<input class="form-range" type="range" min="0" value="0" id="image_slider" background="gray" style="width: 93%; background:gray" oninput="singleFOV.updateTracking(+this.value)">
<label for="#image_slider" id="image_slider_label"> 0</label>
</div>
</div>
<div>
<svg id="tracking_svg" class="pt-2">
<image id="image"></image>
<g id="error_link"></g>
<g id="true_track"></g>
</svg>
</div>
<div id="error_cont">
<svg id="errors_svg" class="pt-2">
<g id="lineage">
</g>
</svg>
</div>
</div>
<div id="single_fov_compare_display" style="display: none" class="box-content p-8">
<div id="compareDiv" class="grid grid-cols-3 gap-2 place-content-start">
</div>
</div>
</div>
</div>
</body>
</html>