-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
443 lines (422 loc) · 26.4 KB
/
index.html
File metadata and controls
443 lines (422 loc) · 26.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://unpkg.com/d3-simple-slider"></script>
<script type="text/javascript" src="scripts/figures.js"></script>
<script type="text/javascript" src="scripts/utilities.js"></script>
<script type="text/javascript" src="scripts/slideshow.js"></script>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Overpass:wght@200;400;600&display=swap">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="showSlides(0)">
<main>
<section id="header">
<a id="top"></a>
<h1>Simulating Actin Compression</h1>
<h2>
Comparing simulations of actin filament compression reveals tradeoff between computational cost and capturing supertwist
</h2>
<h4>
Blair Lyons<sup>1, *</sup>,
Saurabh S. Mogre<sup>1, *</sup>,
Karthik Vegesna<sup>1, *</sup>,
Jessica S. Yu<sup>1, *</sup>,
Mark Hansen<sup>2</sup>,
Aadarsh Raghunathan<sup>2</sup>,
Graham T. Johnson<sup>1, §</sup>,
Eran Agmon<sup>3, §</sup>,
Matthew Akamatsu<sup>2, §</sup><br/>
</h4>
<p>
<sup>1</sup>Allen Institute for Cell Science, Seattle, WA, USA<br/>
<sup>2</sup>Department of Biology, University of Washington, Seattle, WA, USA<br/>
<sup>3</sup>Center for Cell Analysis and Modeling, University of Connecticut School of Medicine, Farmington, CT, USA<br/>
<sup>*</sup>Authors have equal contribution<br/>
<sup>§</sup>Corresponding authors
</p>
</section>
<section id="content">
<div>
<div class="responsive-iframe">
<div class="iframe">
<div class="placeholder-16-9"></div>
<iframe
src="https://simularium.allencell.org/embed?trajUrl=https://subcell-working-bucket.s3.us-west-2.amazonaws.com/actin_compression_cytosim_readdy_0.simularium&t=200"
frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
<p>
3D Visualization of compressed actin filaments simulated in ReaDDy <sup><a class="reference" href="#schoneberg_2013_readdy">1</a></sup>
and Cytosim <sup><a class="reference" href="#nedelec_2007_collective">2</a></sup>.
Filaments are aligned at the final time step of the simulation.
<span class="monomer-scale">ReaDDy filaments</span> show notable directional biphasic out-of-plane behavior,
indicative of filament twist only captured with monomer-scale resolution.
<span class="fiber-scale">Cytosim filaments</span> showed very little out-of-plane behavior,
and when they did, it was just as likely to be in either direction.
</p>
</div>
<div class="center-container">
<div class="center">
<a href="#more"><button class="nav_btn" type="button">More ▼</button></a>
</div>
</div>
<div class="spacer"><a id="more"></a></div>
<div class="chunk">
<div class="left">
<h3>
The dynamic bending and twisting of actin filaments mechanically drive many processes in cells.
</h3>
<p>
Fundamental cellular processes such as endocytosis, cell motility, and cytokinesis are reliant on a cell's ability
to produce force. The actin cytoskeleton plays a central role in force production in these processes.
</p>
<p>
Actin filaments bend and twist in response to mechanical forces, storing elastic energy. Bent actin filaments
are found in diverse cellular structures, where this elastic energy can be used to do mechanical work.
</p>
<p>
The helical structure of actin filaments results in the coupling of filament twisting and bending,
which impacts the geometry of the actin network in 3D space. This influences how actin networks respond to
and participate in subcellular force production.
</p>
</div>
<div class="right">
<div class="slideshow">
<div class="slide fullfade">
<img src="img/actin_comparison_figure_a_diagram.jpg" />
<p>
Diagram of a bending and twisting actin filament at a site of endocytosis.
</p>
</div>
<div class="slide fullfade">
<img src="img/bibeau2023twist_fig2A.png" />
<p>
Fluorescence micrograph of an actin filament (magenta) attached to a paramagnetic bead (cyan).
<br /><br />
JP Bibeau, NG Pandit, S Gray, N Shatery Nejad, CV Sindelar, W Cao, EM De La Cruz. <strong>Twist response of actin filaments</strong> (Figure 2A). <em>Proceedings of the National Academy of Sciences</em>, 120(4):e2208536120, 2023. DOI: <a target="_blank" href="https://doi.org/10.1073/pnas.2208536120">10.1073/pnas.2208536120</a>
</p>
</div>
<div class="slide fullfade">
<img src="img/reynolds2022bending_fig3A.png" />
<p>
Cryo-electron micrograph of purified actin filaments with curvature color coded in blue.
<br /><br />
MJ Reynolds, C Hachicho, AG Carl, R Gong, GM Alushin. <strong>Bending forces and nucleotide state jointly regulate F-actin structure</strong> (Figure 3A). <em>Nature</em>, 611:380-386, 2022. DOI: <a target="_blank" href="https://doi.org/10.1038/s41586-022-05366-w">10.1038/s41586-022-05366-w</a>
</p>
</div>
<div class="slide fullfade">
<img src="img/jasnin2013threedimensional_figS4G.png" />
<p>
Segmented actin filaments from cryo-electron tomogram of Ptk2 cells infected with Listeria Monocytogenes.
<br /><br />
M Jasnin, S Asano, E Gouin, R Hegerl, JM Plitzko, E Villa, P Cossart, W Baumeister. <strong>Three-dimensional architecture of actin filaments in Listeria monocytogenes comet tails</strong> (Figure S4G). <em>Proceedings of the National Academy of Sciences</em>, 110(51):20521-20526, 2013. DOI: <a target="_blank" href="https://doi.org/10.1073/pnas.1320155110">10.1073/pnas.1320155110</a>
</p>
</div>
<div class="slide fullfade">
<img src="img/jasnin2022elasticity_fig1C.png" />
<p>
Segmented actin filaments from cryo-electron tomogram of a podosome in a human white blood cell.
<br /><br />
M Jasnin, J Hervy, S Balor, A Bouissou, A Proag, R Voituriez, J Schneider, T Mangeat, I Maridonneau-Parini, W Baumeister, S Dmitrieff, R Poincloux. <strong>Elasticity of podosome actin networks produces nanonewton protrusive forces</strong> (Figure 1C). <em>Nature Communications</em>, 13:3842, 2022. DOI: <a target="_blank" href="https://doi.org/10.1038/s41467-022-30652-6">10.1038/s41467-022-30652-6</a>
</p>
</div>
<div class="slide fullfade">
<img src="img/serwas2022mechanistic_fig2B.png" />
<p>
Segmented actin filaments and cell membrane from cryo-electron tomogram of an endocytic site in a human skin melanoma cell.
<br /><br />
D Serwas, M Akamatsu, A Moayed, K Vegesna, R Vasan, JM Hill, J Schöneberg, KM Davies, P Rangamani, DG Drubin. <strong>Mechanistic insights into actin force generation during vesicle formation from cryo-electron tomography</strong> (Figure 2B). <em>Developmental Cell</em>, 57(9):1132-1145, 2022. DOI: <a target="_blank" href="https://doi.org/10.1016/j.devcel.2022.04.012">10.1016/j.devcel.2022.04.012</a>
</p>
</div>
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>
<div style="text-align:center">
<div class="dot" onclick="showSlides(0, false)"></div>
<div class="dot" onclick="showSlides(1, false)"></div>
<div class="dot" onclick="showSlides(2, false)"></div>
<div class="dot" onclick="showSlides(3, false)"></div>
<div class="dot" onclick="showSlides(4, false)"></div>
<div class="dot" onclick="showSlides(5, false)"></div>
</div>
</div>
</div>
<div class="spacer"></div>
<div class="chunk">
<div class="left, code_links">
<h3>
We developed two models of actin to compare twisting and bending at different spatiotemporal scales.
</h3>
<p>
Many different simulation methods have been developed to model actin.
Each simulation method has limitations depending on the spatial scale.
</p>
<p>
ReaDDy Actin filaments are composed of particles, one for each actin monomer, which are held together by potentials.
(<a href="https://github.com/simularium/readdy-models" target="_blank">ReaDDy actin model code</a>).
</p>
<p>
Cytosim actin filaments are represented by control points that define a mathematical line, which is acted upon by physical forces.
(<a href="https://github.com/simularium/Cytosim" target="_blank">our Cytosim code version</a>).
</p>
<p>
Our simulation, analysis, and visualization pipeline code is available
<a href="https://github.com/simularium/subcell-pipeline" target="_blank">here</a> and simulation data is available
<a href="https://open.quiltdata.com/b/allencell/tree/aics/subcellular_model_simulations/subcellular_model_simulations_actin_comparison/" target="_blank">here</a>.
</p>
</div>
<div class="right">
<p class="caption">
Diagram of actin filaments modeled at monomer-scale, in which the interactions of each monomer of the filament with its neighbors is explicitly simulated, and fiber-scale, in which the filament is modeled as a series of points connected by simple length and angle-limited springs that have no rotational constraints.
</p>
<div class="centered">
<img src="img/actin_comparison_figure_b.svg" width="80%" />
</div>
</div>
</div>
<div class="spacer"></div>
<div class="chunk">
<div class="left">
<h3>
We simulated the compression of these filaments to 350 nm across a range of velocities.
</h3>
<p>
We wanted to know how each simulator captured structural properties of actin in different situations.
We simulated compression at five velocities, spanning the range of velocities that were computationally feasible and physiologically relevant.
</p>
<p class="instructions">
Use the matrix to explore results from different simulators at different compression velocities.
</p>
</div>
<div class="right">
<div class="inputs" id="replicate">
<h4>Simulation replicates</h4>
<label class="container">
<input type="radio" name="replicate" id="replicate_0" onclick="generate_filaments_table()" checked />1
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="replicate" id="replicate_1" onclick="generate_filaments_table()" />2
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="replicate" id="replicate_2" onclick="generate_filaments_table()" />3
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="replicate" id="replicate_3" onclick="generate_filaments_table()" />4
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="replicate" id="replicate_4" onclick="generate_filaments_table()" />5
<span class="input radio"></span>
</label>
</div>
<div class="centered">
<table id="filaments_table">
<tbody>
<tr>
<th></th>
<th colspan="5">Compression velocity (µm/s)</th>
</tr>
<tr>
<th></th>
<th>0</th>
<th>4.7</th>
<th>15</th>
<th>47</th>
<th>150</th>
</tr>
<tr>
<th class="monomer-scale">ReaDDy</th>
<td id="filaments_table_monomer_0000"></td>
<td id="filaments_table_monomer_0047"></td>
<td id="filaments_table_monomer_0150"></td>
<td id="filaments_table_monomer_0470"></td>
<td id="filaments_table_monomer_1500"></td>
</tr>
<tr>
<th class="fiber-scale">Cytosim</th>
<td id="filaments_table_fiber_0000"></td>
<td id="filaments_table_fiber_0047"></td>
<td id="filaments_table_fiber_0150"></td>
<td id="filaments_table_fiber_0470"></td>
<td id="filaments_table_fiber_1500"></td>
</tr>
</tbody>
</table>
</div>
<script>generate_filaments_table()</script>
</div>
</div>
<div class="spacer"></div>
<div class="chunk">
<div class="left">
<h3>
Our quantitative analysis revealed a divergence particularly in terms of non-coplanarity.
</h3>
<p>
ReaDDy actin filaments showed high non-coplanarity in one direction, especially in filaments simulated at higher compression velocities.
Cytosim filaments showed very little out-of-plane behavior at any compression velocities, and when they did, it was just as likely to be in either direction.
</p>
<p class="instructions">
Explore trajectories by metrics and in PC space using the interactive plots.
</p>
</div>
<div class="right">
<p class="caption">
Trajectories of filaments in PC space for each simulator, velocity, and replicate. The start or end of each trajectory is marked by a diamond or circle, respectively.
</p>
<div class="inputs" id="feature">
<h4>Feature</h4>
<label class="container">
<input type="radio" name="feature" id="feature_simulator" onclick="generate_pca_trajectories_or_features()" checked />
Simulator trajectories
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="feature" id="feature_compression_ratio" onclick="generate_pca_trajectories_or_features()" />
Compression ratio
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="feature" id="feature_velocity" onclick="generate_pca_trajectories_or_features()" />
Compression velocity
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="feature" id="feature_twist_angle" onclick="generate_pca_trajectories_or_features()" />
Supertwist angle
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="feature" id="feature_non_coplanarity" onclick="generate_pca_trajectories_or_features()" />
Non-coplanarity
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="feature" id="feature_peak_asymmetry" onclick="generate_pca_trajectories_or_features()" />
Peak asymmetry
<span class="input radio"></span>
</label>
</div>
<div class="centered">
<div id="pca_trajectories_or_features"></div>
</div>
<script>generate_pca_trajectories_or_features()</script>
<p class="caption">
Metrics for each trajectory over time for each simulator, velocity, and replicate.
</p>
<div class="inputs" id="velocity">
<h4>Compression velocity</h4>
<label class="container">
<input type="radio" name="velocity" id="velocity_0047" onclick="generate_compression_metrics()" checked />
4.7 µm/s
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="velocity" id="velocity_0150" onclick="generate_compression_metrics()" />
15 µm/s
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="velocity" id="velocity_0470" onclick="generate_compression_metrics()" />
47 µm/s
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="velocity" id="velocity_1500" onclick="generate_compression_metrics()" />
150 µm/s
<span class="input radio"></span>
</label>
</div>
<div class="inputs" id="metric">
<h4>Compression metric</h4>
<label class="container">
<input type="radio" name="metric" id="metric_twist_angle" onclick="generate_compression_metrics()" checked />
Supertwist angle
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="metric" id="metric_non_coplanarity" onclick="generate_compression_metrics()" />
Non-coplanarity
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="metric" id="metric_compression_ratio" onclick="generate_compression_metrics()" />
Compression ratio
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="metric" id="metric_peak_asymmetry" onclick="generate_compression_metrics()" checked />
Peak asymmetry
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="metric" id="metric_contour_length" onclick="generate_compression_metrics()" />
Contour length
<span class="input radio"></span>
</label>
</div>
<div class="centered">
<div id="compression_metrics"></div>
</div>
<script>
generate_compression_metrics()
</script>
</div>
</div>
<div class="spacer"></div>
<div class="chunk">
<div class="left">
<h3>
Monomer-scale simulations captured characteristics of helical structure more effectively than fiber-scale simulations.
</h3>
<p>
Inverse PCA transforms of the filament shapes confirmed that PC1 captured filament compression and peak asymmetry, while PC2 scaled with filament non-coplanarity and twist. Inverse transforms also revealed that low values of PC2 correspond to twist in the opposite direction. Some Cytosim simulations show this behavior, likely because directional helicity is not enforced in Cytosim.
</p>
<p class="instructions">
Use the slider to explore inverse transforms for values of each PC.
</p>
</div>
<div class="right">
<p class="caption">
Latent walks for filament shape along PC 1 and PC 2.
</p>
<div class="inputs" id="component">
<h4>Principal component</h4>
<label class="container">
<input type="radio" name="component" id="component_PCA1" onclick="generate_pca_transform()" checked />PC 1
<span class="input radio"></span>
</label>
<label class="container">
<input type="radio" name="component" id="component_PCA2" onclick="generate_pca_transform()" />PC 2
<span class="input radio"></span>
</label>
</div>
<div class="centered">
<div id="pca_transform"></div>
<div id="pca_transform_slider"></div>
</div>
<script>generate_pca_transform()</script>
</div>
</div>
<div class="spacer"></div>
<div class="center-container">
<div class="center">
<a href="#top"><button class="nav_btn" type="button">Back to Top ▲</button></a>
</div>
</div>
</section>
<section id="footer">
<p id="schoneberg_2013_readdy">[1] J Schöneberg J and F Noé. <strong>ReaDDy - A software for particle-based reaction-diffusion dynamics in crowded cellular environments</strong>. <em>PLoS ONE</em>, 8(9):e74261, 2013. DOI: <a target="_blank" href="https://doi.org/10.1371/journal.pone.0074261">10.1371/journal.pone.0074261</a></p>
<p id="nedelec_2007_collective">[2] F Nedelec and D Foethke. <strong>Collective Langevin dynamics of flexible cytoskeletal fibers</strong>. <em>New Journal of Physics</em>, 9(11):427, 2007. DOI: <a target="_blank" href="https://doi.org/10.1088/1367-2630/9/11/427">10.1088/1367-2630/9/11/427</a></p>
</section>
</main>
</body>
</html>