django_simple/todo/templates/details.html

   1 {% extends "base.html" %}
   2
   3 {% load i18n lazysignup_tags %}
   4 {% block content %}
   5
   6 {% if user|is_lazy_user %}
   7 <ul class="list-group">
   8
   9 <li class="list-group-item new-task-item task-item">
  10
  11 <div class="col-md-2 form-group">
  12 <form action="/refresh_done/" method="post">
  13 {% csrf_token %}
  14 <input type="submit" class="btn" value="Refresh" name="refreshbtn">
  15 </form>
  16 </div>
  17
  18 <div class="col-md-10 form-group">
  19 <h5 style="text-align:right;float:right;">
  20 {% if not task.done %}
  21  {% if task.running > 0  %}
  22   {% if task.running == 100  %}
  23   postprocessing
  24   {% else %}
  25   running
  26   {% endif %}
  27  {% else %}
  28   waiting in the queue to start
  29  {% endif %}
  30 {% endif %}
  31 </h5>
  32 </div>
  33 </li>
  34 </ul>
  35 {% endif %}
  36
  37 <h3> Task <b>{{ task.name }}</b></h3>
  38 Created {{ task.created_date  }}
  39         <ul class="list-group">
  40
  41                         <li class="list-group-item task-item">
  42                                 <div class="col-md-4"> done ?</div>
  43                                 <div class="col-md-8">
  44                                         {% if task.done %}
  45                                                 <span class="fa fa-check-square-o"></span>
  46                                             {% if task.type == "md" or task.type == "remd" %}
  47                                               <form action="restart/"
  48                                                 method="get"
  49                                                 style="text-align;float:right;">
  50                                                 {% csrf_token %}
  51                                                  <input type="submit"
  52                                                  class="btn btn-default"
  53                                                  value="Restart"
  54                                                  name="restartbtn">
  55                                                  </button>
  56                                               </form>
  57                                             {% endif %}
  58                                         {% else %}
  59                                           {% if task.running > 0  %}
  60                                                 <span class="fa fa-spinner
  61                                                 fa-spin"></span>
  62                                                 {{ task.running }}%
  63                                               {% if task.running == 100  %}
  64                                               postprocessing
  65                                               {% endif %}
  66                                           {% else %}
  67                                                 <span class="fa fa-square-o"></span>
  68                                           {% endif %}
  69                                         {% endif %}
  70
  71                                 </div>
  72                         </li>
  73 <div>
  74     <fieldset class="majorpoints">
  75     <legend class="majorpointslegend"
  76     style="background-color:#d3d3d3;cursor: pointer;">Show input parameters</legend>
  77     <div class="hiders" style="display:none" >
  78
  79                         <li class="list-group-item task-item">
  80                             <div class="col-md-6"> type </div>
  81                             <div class="col-md-6">{{ task.type }}</div>
  82                         </li>
  83
  84                         <li class="list-group-item task-item">
  85                             <div class="col-md-6"> pbsjob </div>
  86                             <div class="col-md-6">{{ task.pbsjob }}</div>
  87                         </li>
  88
  89
  90                         <li class="list-group-item task-item">
  91                             <div class="col-md-6"> force field </div>
  92                             <div class="col-md-6">{{ task.unres_ff }}</div>
  93                         </li>
  94
  95                         <li class="list-group-item task-item">
  96                             <div class="col-md-4"> sequence </div>
  97                             <div class="col-md-8 monospace">{{ task.md_seq}}</div>
  98                         </li>
  99
 100                         <li class="list-group-item task-item">
 101                             <div class="col-md-4"> secondary structure
 102                             restraints </div>
 103                             <div class="col-md-8 monospace">{{ task.md_2d}}</div>
 104                         </li>
 105
 106
 107                         <li class="list-group-item task-item">
 108                             <div class="col-md-6"> SSBOND </div>
 109                             <div class="col-md-6">{{ task.ssbond}}</div>
 110                         </li>
 111
 112
 113         {% if task.type == "min" %}
 114
 115
 116                         <li class="list-group-item task-item">
 117                             <div class="col-md-6"> algorithm</div>
 118                             <div class="col-md-6">{{ task.min_choice }}</div>
 119                         </li>
 120                         <li class="list-group-item task-item">
 121                             <div class="col-md-6"> overlap</div>
 122                             <div class="col-md-6">{{ task.min_overlap }}</div>
 123                         </li>
 124                         <li class="list-group-item task-item">
 125                             <div class="col-md-6"> searchsc</div>
 126                             <div class="col-md-6">{{ task.min_searchsc }}</div>
 127                         </li>
 128                         <li class="list-group-item task-item">
 129                             <div class="col-md-6"> maxmin</div>
 130                             <div class="col-md-6">{{ task.min_maxmin }}</div>
 131                         </li>
 132                         <li class="list-group-item task-item">
 133                             <div class="col-md-6"> maxfun</div>
 134                             <div class="col-md-6">{{ task.min_maxfun }}</div>
 135                         </li>
 136                         <li class="list-group-item task-item">
 137                             <div class="col-md-6"> pdbout</div>
 138                             <div class="col-md-6">{{ task.min_pdbout }}</div>
 139                         </li>
 140                         <li class="list-group-item task-item">
 141                             <div class="col-md-6"> input pdb </div>
 142                             <div class="col-md-6">{{ task.myfile1 }}</div>
 143                         </li>
 144                         <li class="list-group-item task-item">
 145                             <div class="col-md-6"> pdb code</div>
 146                             <div class="col-md-6">{{ task.pdbcode }}</div>
 147                         </li>
 148                         <li class="list-group-item task-item">
 149                             <div class="col-md-6"> unres_pdb</div>
 150                             <div class="col-md-6">{{ task.min_unres_pdb }}</div>
 151                         </li>
 152
 153         {% endif %}
 154         {% if task.type == "md" %}
 155                         <li class="list-group-item task-item">
 156                             <div class="col-md-6"> starting </div>
 157                             <div class="col-md-6">{{ task.md_start}}</div>
 158                         </li>
 159
 160                         <li class="list-group-item task-item">
 161                             <div class="col-md-6"> input pdb </div>
 162                             <div class="col-md-6">{{ task.myfile1 }}</div>
 163                         </li>
 164                         <li class="list-group-item task-item">
 165                             <div class="col-md-6"> pdb code</div>
 166                             <div class="col-md-6">{{ task.pdbcode }}</div>
 167                         </li>
 168                         <li class="list-group-item task-item">
 169                             <div class="col-md-6"> seed </div>
 170                             <div class="col-md-6">{{ task.md_seed}}</div>
 171                         </li>
 172                         <li class="list-group-item task-item">
 173                             <div class="col-md-6"> pdbref </div>
 174                             <div class="col-md-6">{{ task.md_pdbref}}</div>
 175                         </li>
 176                         <li class="list-group-item task-item">
 177                             <div class="col-md-6"> respa </div>
 178                             <div class="col-md-6">{{ task.md_respa}}</div>
 179                         </li>
 180                         <li class="list-group-item task-item">
 181                             <div class="col-md-6"> temperature </div>
 182                             <div class="col-md-6">{{ task.md_temp}}</div>
 183                         </li>
 184                         <li class="list-group-item task-item">
 185                             <div class="col-md-6"> nstep </div>
 186                             <div class="col-md-6">{{ task.md_nstep}}</div>
 187                         </li>
 188                         <li class="list-group-item task-item">
 189                             <div class="col-md-6"> total steps (with restarts) </div>
 190                             <div class="col-md-6">{{ task.md_total_steps}}</div>
 191                         </li>
 192                         <li class="list-group-item task-item">
 193                             <div class="col-md-6"> ntwe </div>
 194                             <div class="col-md-6">{{ task.md_ntwe}}</div>
 195                         </li>
 196                         <li class="list-group-item task-item">
 197                             <div class="col-md-6"> ntwx </div>
 198                             <div class="col-md-6">{{ task.md_ntwx}}</div>
 199                         </li>
 200                         <li class="list-group-item task-item">
 201                             <div class="col-md-6"> dt </div>
 202                             <div class="col-md-6">{{ task.md_dt}}</div>
 203                         </li>
 204                         <li class="list-group-item task-item">
 205                             <div class="col-md-6"> thermostat </div>
 206                             <div class="col-md-6">{{ task.md_lang}}</div>
 207                         </li>
 208
 209                         {% if task.md_lang == "berendsen" %}
 210
 211                         <li class="list-group-item task-item">
 212                             <div class="col-md-6"> tau </div>
 213                             <div class="col-md-6">{{ task.md_tau}}</div>
 214                         </li>
 215
 216                         {% else %}
 217
 218                         <li class="list-group-item task-item">
 219                             <div class="col-md-6"> scal_fric </div>
 220                             <div class="col-md-6">{{ task.md_scal_fric}}</div>
 221                         </li>
 222
 223                         {% endif %}
 224
 225                         <li class="list-group-item task-item">
 226                             <div class="col-md-6"> mdpdb </div>
 227                             <div class="col-md-6">{{ task.md_mdpdb}}</div>
 228                         </li>
 229                         <li class="list-group-item task-item">
 230                             <div class="col-md-6"> RESPA </div>
 231                             <div class="col-md-6">{{ task.md_respa}}</div>
 232                         </li>
 233
 234
 235         {% endif %}
 236
 237         {% if task.type == "remd" or task.type == "dock" %}
 238
 239                         <li class="list-group-item task-item">
 240                             <div class="col-md-6"> nrep </div>
 241                             <div class="col-md-6">{{ task.remd_nrep}}</div>
 242                         </li>
 243                         <li class="list-group-item task-item">
 244                             <div class="col-md-6"> starting </div>
 245                             <div class="col-md-6">{{ task.md_start}}</div>
 246                         </li>
 247
 248                         <li class="list-group-item task-item">
 249                             <div class="col-md-6"> input pdb </div>
 250                             <div class="col-md-6">{{ task.myfile1 }}</div>
 251                         </li>
 252                         <li class="list-group-item task-item">
 253                             <div class="col-md-6"> pdb code</div>
 254                             <div class="col-md-6">{{ task.pdbcode }}</div>
 255                         </li>
 256                         {% if task.type == "dock" %}
 257                         <li class="list-group-item task-item">
 258                             <div class="col-md-6"> input pdb2 </div>
 259                             <div class="col-md-6">{{ task.myfile2 }}</div>
 260                         </li>
 261                         <li class="list-group-item task-item">
 262                             <div class="col-md-6"> pdb code2</div>
 263                             <div class="col-md-6">{{ task.pdbcode2 }}</div>
 264                         </li>
 265                         <li class="list-group-item task-item">
 266                             <div class="col-md-6"> dock_peptide</div>
 267                             <div class="col-md-6">{{ task.dock_peptide }}</div>
 268                         </li>
 269
 270                         {% endif %}
 271                         <li class="list-group-item task-item">
 272                             <div class="col-md-6"> seed </div>
 273                             <div class="col-md-6">{{ task.md_seed}}</div>
 274                         </li>
 275                         <li class="list-group-item task-item">
 276                             <div class="col-md-6"> pdbref </div>
 277                             <div class="col-md-6">{{ task.md_pdbref}}</div>
 278                         </li>
 279                         {% if task.md_start == "pdbstart" %}
 280                         <li class="list-group-item task-item">
 281                             <div class="col-md-6"> preminim maxfun </div>
 282                             <div class="col-md-6">{{ task.min_maxfun }}</div>
 283                         </li>
 284                         {% endif %}
 285                         <li class="list-group-item task-item">
 286                             <div class="col-md-6"> respa </div>
 287                             <div class="col-md-6">{{ task.md_respa}}</div>
 288                         </li>
 289                         <li class="list-group-item task-item">
 290                             <div class="col-md-6"> nstep </div>
 291                             <div class="col-md-6">{{ task.md_nstep}}</div>
 292                         </li>
 293                         <li class="list-group-item task-item">
 294                             <div class="col-md-6"> total steps (with restarts) </div>
 295                             <div class="col-md-6">{{ task.md_total_steps}}</div>
 296                         </li>
 297                         <li class="list-group-item task-item">
 298                             <div class="col-md-6"> ntwe </div>
 299                             <div class="col-md-6">{{ task.md_ntwe}}</div>
 300                         </li>
 301                         <li class="list-group-item task-item">
 302                             <div class="col-md-6"> nstex </div>
 303                             <div class="col-md-6">{{ task.remd_nstex}}</div>
 304                         </li>
 305                         <li class="list-group-item task-item">
 306                             <div class="col-md-6"> ntwx </div>
 307                             <div class="col-md-6">{{ task.md_ntwx}}</div>
 308                         </li>
 309                         <li class="list-group-item task-item">
 310                             <div class="col-md-6"> dt </div>
 311                             <div class="col-md-6">{{ task.md_dt}}</div>
 312                         </li>
 313                         <li class="list-group-item task-item">
 314                             <div class="col-md-6"> thermostat </div>
 315                             <div class="col-md-6">{{ task.md_lang}}</div>
 316                         </li>
 317
 318                         {% if task.md_lang == "berendsen" %}
 319
 320                         <li class="list-group-item task-item">
 321                             <div class="col-md-6"> tau </div>
 322                             <div class="col-md-6">{{ task.md_tau}}</div>
 323                         </li>
 324
 325                         {% else %}
 326
 327                         <li class="list-group-item task-item">
 328                             <div class="col-md-6"> scal_fric </div>
 329                             <div class="col-md-6">{{ task.md_scal_fric}}</div>
 330                         </li>
 331
 332                         {% endif %}
 333
 334                         <li class="list-group-item task-item">
 335                             <div class="col-md-6"> RESPA </div>
 336                             <div class="col-md-6">{{ task.md_respa}}</div>
 337                         </li>
 338
 339                         <li class="list-group-item task-item">
 340                             <div class="col-md-6"> temperatures </div>
 341                             <div class="col-md-6">{{ task.remd_multi_t}}</div>
 342                         </li>
 343                         <li class="list-group-item task-item">
 344                             <div class="col-md-6"> multiplex </div>
 345                             <div class="col-md-6">{{ task.remd_multi_m}}</div>
 346                         </li>
 347                         <li class="list-group-item task-item">
 348                             <div class="col-md-6"> temperature for clustering</div>
 349                             <div class="col-md-6">{{ task.remd_cluter_temp}}</div>
 350                         </li>
 351                         {% if task.saxs_data != "" %}
 352                         <li class="list-group-item task-item">
 353                             <div class="col-md-6"> wsaxs </div>
 354                             <div class="col-md-6">{{ task.wsaxs }}</div>
 355                         </li>
 356                         <li class="list-group-item task-item">
 357                             <div class="col-md-6"> scal_rad (saxs) </div>
 358                             <div class="col-md-6">{{ task.scal_rad }}</div>
 359                         </li>
 360                         <li class="list-group-item task-item">
 361                             <div class="col-md-6"> saxs distribution </div>
 362                             <div class="col-md-6"><pre> {{ task.saxs_data }}</pre></div>
 363                         </li>
 364                         {% endif %}
 365
 366         {% endif %}
 367
 368                         <li class="list-group-item task-item">
 369                             <div class="col-md-6"> Box X Y Z</div>
 370                             <div class="col-md-2">{{ task.boxx}}</div>
 371                             <div class="col-md-2">{{ task.boxy}}</div>
 372                             <div class="col-md-2">{{ task.boxz}}</div>
 373                         </li>
 374
 375 </div>
 376 </div>
 377         <p>
 378         <h3> Results </h3>
 379                         <li class="list-group-item task-item">
 380                             <div class="col-md-4"> Directory </div>
 381                             <div class="col-md-8">
 382                             <a href="/myfiles/list/{{task.jobdirname}}/">
 383                             {{ task.jobdirname }}
 384                             </a>
 385                             {% if task.done %}
 386                             &nbsp;
 387                             <a class="btn btn-default"
 388                             href="/{{task.id}}/all.zip">
 389                             Download as zip</a>
 390                             {% endif %}
 391                             </div>
 392                         </li>
 393
 394
 395         {% if task.done %}
 396
 397                         {% if task.type == "min" %}
 398
 399                         <li class="list-group-item task-item">
 400                             <div class="col-md-2"> Etot </div>
 401                             <div class="col-md-10">{{ task.etot }}</div>
 402                         </li>
 403 <!--
 404                         <li class="list-group-item task-item">
 405                           <div class="col-md-2"> UNRES model </div>
 406                           <div class="col-md-10">
 407                           <a
 408                            href="/myfiles/download-file/{{task.jobdirname}}/unres.pse">
 409                           <img
 410                           src="/myfiles/download-file/{{task.jobdirname}}/unres.png"
 411                           width="500"></a> </div>
 412                         </li>
 413 -->
 414                         <li class="list-group-item task-item">
 415                           <div class="col-md-2"> UNRES model NGL viewer</div>
 416                           <div class="col-md-10" id="viewport_unres"
 417                           style="width:500px;height:500px;">
 418                           </div>
 419                         </li>
 420
 421
 422 <!--
 423                         <li class="list-group-item task-item">
 424                           <div class="col-md-2"> Structure overlap </div>
 425                           <div class="col-md-10"> <img
 426                           src="/myfiles/download-file/{{task.jobdirname}}/unres_overlap.png"
 427                           width="500"> </div>
 428                         </li>
 429 -->
 430                         <li class="list-group-item task-item">
 431                           <div class="col-md-2"> Structure overlap NGL viewer</div>
 432                           <div class="col-md-10" id="viewport_min"
 433                           style="width:500px;height:500px;">
 434                           </div>
 435                         </li>
 436                         <li class="list-group-item task-item">
 437                <div class="col-md-12">
 438                <button id="toggleAllatom">Input structure on/off</button>
 439                <button id="toggleSidechains2">Side-chains on/off</button>
 440                </div>
 441                         </li>
 442                         {% endif %}
 443
 444                         <li class="list-group-item task-item">
 445                             <div class="col-md-2"> Results </div>
 446                             <div class="col-md-10">{{ task.results_text|linebreaks }}</div>
 447                         </li>
 448
 449                         {% if task.type == "md" %}
 450
 451                         <li class="list-group-item task-item">
 452                           <div class="col-md-2"> Temperature histogram </div>
 453                           <div class="col-md-10"> <img
 454                           src="/myfiles/download-file/{{task.jobdirname}}/temp_hist.png"
 455                           width="500"> </div>
 456                         </li>
 457
 458                         <li class="list-group-item task-item">
 459                           <div class="col-md-2"> Potential energy </div>
 460                           <div class="col-md-10"> <img
 461                           src="/myfiles/download-file/{{task.jobdirname}}/md_ene.png"
 462                           width="500"> </div>
 463                         </li>
 464
 465                             <li class="list-group-item task-item">
 466                             <div class="col-md-2"> Movie </div>
 467                             <div class="col-md-10">
 468
 469                             <video width="500" height="400"
 470                             preload="auto" controls="controls">
 471                             <source
 472                             src="/myfiles/download-file/{{task.jobdirname}}/md.ogv"
 473                             type="video/ogg; codecs=theora"> </source>
 474                             </video>
 475
 476                             </div>
 477                             </li>
 478
 479 {% if task.md_mdpdb %}
 480                         <li class="list-group-item task-item">
 481                           <div class="col-md-2"> Trajectory NGL viewer</div>
 482                           <div class="col-md-10" id="viewport_traj"
 483                           style="width:500px;height:500px;">
 484                           </div>
 485                         </li>
 486                         <li class="list-group-item task-item">
 487                <div class="col-md-6">
 488 <input id="clipRange" type="range" value=1 min=1 max= {% widthratio task.md_total_steps task.md_ntwx 1 %} step=1 ></input><span id="clipRange_val">1</span> frame
 489 </div>
 490 <div class="col-md-6">
 491 <button id="toggleRunMDs">run/pause MD</button>
 492 <button id="toggleSidechains1">side-chains on/off</button>
 493 </div>
 494                         </li>
 495
 496 {% endif %}
 497
 498                         <li class="list-group-item task-item">
 499                           <div class="col-md-2"> Radius of gyration based
 500                           on C<sup>α</sup> coordinates </div>
 501                           <div class="col-md-10"> <img
 502                           src="/myfiles/download-file/{{task.jobdirname}}/md_gyr.png"
 503                           width="500"> </div>
 504                         </li>
 505
 506
 507
 508                            {% if task.md_pdbref %}
 509                         <li class="list-group-item task-item">
 510                           <div class="col-md-2"> C<sup>&alpha;</sup> RMSD </div>
 511                           <div class="col-md-10"> <img
 512                           src="/myfiles/download-file/{{task.jobdirname}}/md_rms.png"
 513                           width="500"> </div>
 514                         </li>
 515
 516                         <li class="list-group-item task-item">
 517                           <div class="col-md-2"> fraction of native
 518                           side-chain concacts </div>
 519                           <div class="col-md-10"> <img
 520                           src="/myfiles/download-file/{{task.jobdirname}}/md_fracn.png"
 521                           width="500"> </div>
 522                         </li>
 523
 524                            {% endif %}
 525
 526                            {% if task.md_start == "pdbstart" %}
 527                         <li class="list-group-item task-item">
 528                           <div class="col-md-2"> fluctuations </div>
 529                           <div class="col-md-10"> <img
 530                           src="/myfiles/download-file/{{task.jobdirname}}/fluct_plot.png"
 531                           width="500"> </div>
 532                         </li>
 533 <!--
 534                         <li class="list-group-item task-item">
 535                           <div class="col-md-2"> fluctuations putty on
 536                           starting structure</div>
 537                           <div class="col-md-10">
 538                           <a
 539                           href="/myfiles/download-file/{{task.jobdirname}}/fluct.pse">
 540                           <img
 541                           src="/myfiles/download-file/{{task.jobdirname}}/fluct.png"
 542                           width="500"></a> </div>
 543                         </li>
 544 -->
 545                         <li class="list-group-item task-item">
 546                           <div class="col-md-2"> fluctuations putty on
 547                           starting structure NGL viewer</div>
 548                           <div class="col-md-10" id="viewport_putty"
 549                           style="width:500px;height:500px;">
 550                           </div>
 551                         </li>
 552
 553
 554                            {% endif %}
 555
 556
 557
 558                         {% endif %}
 559
 560                         {% if task.type == "remd" or task.type == "dock" %}
 561
 562                         <li class="list-group-item task-item">
 563                           <div class="col-md-2"> Energy histogram </div>
 564                           <div class="col-md-10"> <img
 565                           src="/myfiles/download-file/{{task.jobdirname}}/remd_ene_hist.png"
 566                           width="500"> </div>
 567                         </li>
 568
 569                         <li class="list-group-item task-item">
 570                           <div class="col-md-2"> Energy vs. temperature </div>
 571                           <div class="col-md-10"> <img
 572                           src="/myfiles/download-file/{{task.jobdirname}}/remd_Tene.png"
 573                           width="500"> </div>
 574                         </li>
 575
 576                         <li class="list-group-item task-item">
 577                           <div class="col-md-2"> Cv vs. temperature </div>
 578                           <div class="col-md-10"> <img
 579                           src="/myfiles/download-file/{{task.jobdirname}}/remd_cv.png"
 580                           width="500"> </div>
 581                         </li>
 582
 583                            {% if task.md_pdbref %}
 584
 585                         <li class="list-group-item task-item">
 586                           <div class="col-md-2"> Average C<sup>&alpha;</sup> RMSD vs. temperature </div>
 587                           <div class="col-md-10"> <img
 588                           src="/myfiles/download-file/{{task.jobdirname}}/remd_rmsd.png"
 589                           width="500"> </div>
 590                         </li>
 591
 592                         <li class="list-group-item task-item">
 593                           <div class="col-md-2"> potential energy vs.
 594                           C<sup>&alpha;</sup> RMSD</div>
 595                           <div class="col-md-10"> <img
 596                           src="/myfiles/download-file/{{task.jobdirname}}/remd_ene_rms.png"
 597                           width="500"> </div>
 598                         </li>
 599
 600                         <li class="list-group-item task-item">
 601                           <div class="col-md-2"> C<sup>&alpha;</sup> RMSD vs. step*replica
 602                           colored by bath temperature</div>
 603                           <div class="col-md-10"> <img
 604                           src="/myfiles/download-file/{{task.jobdirname}}/remd_step_rms.png"
 605                           width="500"> </div>
 606                         </li>
 607
 608
 609                            {% endif %}
 610
 611                         <li class="list-group-item task-item">
 612                           <div class="col-md-2"> exchanges (walk in T) </div>
 613                           <div class="col-md-10"> <img
 614                           src="/myfiles/download-file/{{task.jobdirname}}/remd_ex.png"
 615                           width="500"> </div>
 616                         </li>
 617
 618                            {% if task.saxs_data != "" %}
 619                         <li class="list-group-item task-item">
 620                           <div class="col-md-2"> P(r) of input SAXS data and
 621                           calculated for 5 models and the input pdb</div>
 622                           <div class="col-md-10"> <img
 623                           src="/myfiles/download-file/{{task.jobdirname}}/saxs.png"
 624                           width="500"> </div>
 625                         </li>
 626                            {% endif %}
 627
 628         <li class="list-group-item task-item">
 629         <div class="col-md-4">
 630         <button onclick="plusDivs(-1)">&#10094;</button>
 631         </div>
 632         <div class="col-md-6">
 633         select model
 634         </div>
 635         <div class="col-md-2">
 636         <button onclick="plusDivs(1)">&#10095;</button>
 637         </div>
 638         </li>
 639
 640                         <div class="model">
 641 <!--                    <li class="list-group-item task-item">
 642                           <div class="col-md-2"> model1 after conversion
 643                           to allatom
 644                           {{ task.remd_model1|linebreaks }}
 645                           </div>
 646                           <div class="col-md-10">
 647                           <a
 648                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL1.pdb">
 649                           <img
 650                           src="/myfiles/download-file/{{task.jobdirname}}/model1.png" width="500">
 651                           </a></div>
 652                         </li> -->
 653                         <li class="list-group-item task-item">
 654                           <div class="col-md-2"> model1
 655                           {% if not task.damino %}
 656                           after conversion to allatom
 657                           {% endif %}
 658                           {{ task.remd_model1|linebreaks }}
 659                           NGL viewer</div>
 660                           <div class="col-md-10" id="viewport_M1"
 661                           style="width:500px;height:500px;">
 662                           </div>
 663                         </li>
 664                         <li class="list-group-item task-item">
 665                <div class="col-md-12">
 666                {% if task.md_pdbref %}
 667                <button id="toggleRefM1">Reference structure on/off</button>
 668                {% endif %}
 669                <button id="toggleSidechainsM1">Side-chains on/off</button>
 670                <a class="btn btn-default"
 671                href="/myfiles/download-file/{{task.jobdirname}}/MODEL1.pdb">Download</a>
 672                </div>
 673                         </li>
 674
 675                         </div>
 676                         <div class="model">
 677 <!--                    <li class="list-group-item task-item">
 678                           <div class="col-md-2"> model2 after conversion
 679                           to allatom
 680                           {{ task.remd_model2|linebreaks }}
 681                           </div>
 682                           <div class="col-md-10">
 683                           <a
 684                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL2.pdb">
 685                           <img
 686                           src="/myfiles/download-file/{{task.jobdirname}}/model2.png" width="500">
 687                           </a></div>
 688                         </li> -->
 689                         <li class="list-group-item task-item">
 690                           <div class="col-md-2"> model2
 691                           {% if not task.damino %}
 692                           after conversion to allatom
 693                           {% endif %}
 694                           {{ task.remd_model2|linebreaks }}
 695                           NGL viewer</div>
 696                           <div class="col-md-10" id="viewport_M2"
 697                           style="width:500px;height:500px;">
 698                           </div>
 699                         </li>
 700                         <li class="list-group-item task-item">
 701                <div class="col-md-12">
 702                {% if task.md_pdbref %}
 703                <button id="toggleRefM2">Reference structure on/off</button>
 704                {% endif %}
 705                <button id="toggleSidechainsM2">Side-chains on/off</button>
 706                <a class="btn btn-default"
 707                href="/myfiles/download-file/{{task.jobdirname}}/MODEL2.pdb">Download</a>
 708                </div>
 709                         </li>
 710
 711
 712                         </div>
 713                         <div class="model">
 714 <!--                    <li class="list-group-item task-item">
 715                           <div class="col-md-2"> model3 after conversion
 716                           to allatom
 717                           {{ task.remd_model3|linebreaks }}
 718                           </div>
 719                           <div class="col-md-10">
 720                           <a
 721                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL3.pdb">
 722                           <img
 723                           src="/myfiles/download-file/{{task.jobdirname}}/model3.png" width="500">
 724                           </a></div>
 725                         </li>-->
 726                         <li class="list-group-item task-item">
 727                           <div class="col-md-2"> model3
 728                           {% if not task.damino %}
 729                           after conversion to allatom
 730                           {% endif %}
 731                           {{ task.remd_model3|linebreaks }}
 732                           NGL viewer</div>
 733                           <div class="col-md-10" id="viewport_M3"
 734                           style="width:500px;height:500px;">
 735                           </div>
 736                         </li>
 737                         <li class="list-group-item task-item">
 738                <div class="col-md-12">
 739                {% if task.md_pdbref %}
 740                <button id="toggleRefM3">Reference structure on/off</button>
 741                {% endif %}
 742                <button id="toggleSidechainsM3">Side-chains on/off</button>
 743                <a class="btn btn-default"
 744                href="/myfiles/download-file/{{task.jobdirname}}/MODEL3.pdb">Download</a>
 745                </div>
 746                         </li>
 747
 748                         </div>
 749                         <div class="model">
 750 <!--                    <li class="list-group-item task-item">
 751                           <div class="col-md-2"> model4 after conversion
 752                           to allatom
 753                           {{ task.remd_model4|linebreaks }}
 754                           </div>
 755                           <div class="col-md-10">
 756                           <a
 757                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL4.pdb">
 758                           <img
 759                           src="/myfiles/download-file/{{task.jobdirname}}/model4.png" width="500">
 760                           </a></div>
 761                         </li>-->
 762                         <li class="list-group-item task-item">
 763                           <div class="col-md-2"> model4
 764                           {% if not task.damino %}
 765                           after conversion to allatom
 766                           {% endif %}
 767                           {{ task.remd_model4|linebreaks }}
 768                           NGL viewer</div>
 769                           <div class="col-md-10" id="viewport_M4"
 770                           style="width:500px;height:500px;">
 771                           </div>
 772                         </li>
 773                         <li class="list-group-item task-item">
 774                <div class="col-md-12">
 775                {% if task.md_pdbref %}
 776                <button id="toggleRefM4">Reference structure on/off</button>
 777                {% endif %}
 778                <button id="toggleSidechainsM4">Side-chains on/off</button>
 779                <a class="btn btn-default"
 780                href="/myfiles/download-file/{{task.jobdirname}}/MODEL4.pdb">Download</a>
 781                </div>
 782                         </li>
 783
 784                         </div>
 785                         <div class="model">
 786 <!--                    <li class="list-group-item task-item">
 787                           <div class="col-md-2"> model5 after conversion
 788                           to allatom
 789                           {{ task.remd_model5|linebreaks }}
 790                           </div>
 791                           <div class="col-md-10">
 792                           <a
 793                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL5.pdb">
 794                           <img
 795                           src="/myfiles/download-file/{{task.jobdirname}}/model5.png" width="500">
 796                           </a></div>
 797                         </li>-->
 798                         <li class="list-group-item task-item">
 799                           <div class="col-md-2"> model5
 800                           {% if not task.damino %}
 801                           after conversion to allatom
 802                           {% endif %}
 803                           {{ task.remd_model5|linebreaks }}
 804                           NGL viewer</div>
 805                           <div class="col-md-10" id="viewport_M5"
 806                           style="width:500px;height:500px;">
 807                           </div>
 808                         </li>
 809                         <li class="list-group-item task-item">
 810                <div class="col-md-12">
 811                {% if task.md_pdbref %}
 812                <button id="toggleRefM5">Reference structure on/off</button>
 813                {% endif %}
 814                <button id="toggleSidechainsM5">Side-chains on/off</button>
 815                <a class="btn btn-default"
 816                href="/myfiles/download-file/{{task.jobdirname}}/MODEL5.pdb">Download</a>
 817                </div>
 818                         </li>
 819
 820                         </div>
 821                         {% endif %}
 822
 823         {% endif %}
 824
 825         </ul>
 826
 827 <script src="/static/jquery.min.js"></script>
 828 <script src="https://unpkg.com/ngl"></script>
 829
 830 <script>
 831 $('.majorpointslegend').click(function(){
 832     $(this.parentNode).find('.hiders').toggle();
 833     if($(this.parentNode).find('.majorpointslegend').text()=='Show input parameters'){
 834         $(this.parentNode).find('.majorpointslegend').text('Hide input parameters');
 835     }else{
 836         $(this.parentNode).find('.majorpointslegend').text('Show input parameters');
 837     }
 838 });
 839 </script>
 840
 841 {% if task.type == "remd" or task.type == "dock" %}
 842 <script>
 843 function display_model(numstr){
 844
 845 {% if task.md_pdbref %}
 846   var stage = new NGL.Stage("viewport_M"+numstr);
 847   stage.setParameters( { backgroundColor: "white",fogFar: 60, fogNear: 45 } );
 848   Promise.all([
 849       stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/plik1.pdb" ,{defaultRepresentation: false}) .then( function( o ){
 850         o.addRepresentation( "cartoon",{ name:"ref", color:"grey"
 851         })
 852         o.addRepresentation( "line", {name:"refsc",visible: false,
 853          sele:"not hydrogen and sidechainAttached"
 854         })
 855         return o
 856       }),
 857       stage.loadFile(
 858       "/myfiles/download-file/{{task.jobdirname}}/MODEL"+numstr+".pdb",{defaultRepresentation: false}) .then( function( o ){
 859  {% if task.damino %}
 860         o.addRepresentation( "licorice",{ name: "unres", color:
 861                "residueindex",colorScale:["blue","cyan", "green",
 862                "yellow","orange", "red"], sele:".CA"
 863                        })
 864         o.addRepresentation( "licorice",{ name: "unressc", visible: false, color:
 865        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
 866         , sele:"*" })
 867  {% else %}
 868         o.addRepresentation( "cartoon",{ name: "unres", color:
 869                "residueindex",colorScale:["blue","cyan", "green",
 870                "yellow","orange", "red"]
 871                        })
 872         o.addRepresentation( "line",{ name: "unressc", visible: false, color:
 873        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
 874         , sele:"not hydrogen and sidechainAttached" })
 875  {% endif %}
 876         return o
 877       })
 878   ]).then(function (ol1) {
 879    ol1[ 1 ].superpose(ol1[ 0 ], false, ".CA")
 880    ol1[ 0 ].autoView()
 881   })
 882             var ref=true;
 883             var side=false;
 884             var toggleAll = document.getElementById( "toggleRefM"+numstr );
 885             toggleAll.addEventListener( "click", function(){
 886                         ref=! ref;
 887                         stage.getRepresentationsByName(
 888                                 "ref" ).list.forEach( function( repre ){
 889                                 repre.setVisibility( !repre.visible );
 890                         } );
 891                 if (side) {
 892                         stage.getRepresentationsByName(
 893                                 "refsc" ).list.forEach( function( repre ){
 894                                 repre.setVisibility( !repre.visible );
 895                         } );
 896                 }
 897
 898             } );
 899      var toggleSidechains =document.getElementById("toggleSidechainsM"+numstr );
 900      toggleSidechains.addEventListener( "click", function(){
 901              side=!side;
 902              if (ref) {
 903                  stage.getRepresentationsByName(
 904                         "refsc" ).list.forEach( function( repre ){
 905                         repre.setVisibility( !repre.visible );
 906              } );
 907       }
 908       stage.getRepresentationsByName("unressc").list.forEach( function( repre ){
 909                         repre.setVisibility( !repre.visible );
 910         } );
 911
 912       } );
 913 {% else %}
 914   var stage = new NGL.Stage("viewport_M"+numstr);
 915   stage.setParameters( { backgroundColor: "white",fogFar: 60, fogNear: 45 } );
 916   stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/MODEL"+numstr+".pdb",{defaultRepresentation: false}) .then( function( o ){
 917  {% if task.damino %}
 918         o.addRepresentation( "licorice",{ name: "unres", color:
 919                "residueindex",colorScale:["blue","cyan", "green",
 920                "yellow","orange", "red"],sele:".CA"
 921                        });
 922         o.addRepresentation( "licorice",{ name: "unressc", visible: false, color:
 923        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
 924         , sele:"*" });
 925  {% else %}
 926         o.addRepresentation( "cartoon",{ name: "unres", color:
 927                "residueindex",colorScale:["blue","cyan", "green",
 928                "yellow","orange", "red"]
 929                        });
 930         o.addRepresentation( "line",{ name: "unressc", visible: false, color:
 931        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
 932         , sele:"not hydrogen and sidechainAttached" });
 933  {% endif %}
 934         o.autoView();
 935   })
 936      var toggleSidechains =document.getElementById("toggleSidechainsM"+numstr );
 937      toggleSidechains.addEventListener( "click", function(){
 938       stage.getRepresentationsByName("unressc").list.forEach( function( repre ){
 939                         repre.setVisibility( !repre.visible );
 940         } );
 941
 942       } );
 943
 944 {% endif %}
 945 }
 946
 947
 948 window.addEventListener("resize",
 949 function (event) {
 950       stage.handleResize();
 951 },false);
 952
 953
 954 display_model("1")
 955
 956
 957 var slideIndex = 1;
 958 var y = document.getElementsByClassName("model");
 959 var lista=[];
 960 var ii;
 961 for (ii = 0; ii < y.length; ii++) {
 962  lista.push(0)
 963 }
 964 lista[0]=1;
 965 showDivs(slideIndex);
 966
 967 function plusDivs(n) {
 968   showDivs(slideIndex += n);
 969 }
 970
 971 function showDivs(n) {
 972   var i;
 973   var x = document.getElementsByClassName("model");
 974   if (n > x.length) {slideIndex = 1}
 975   if (n < 1) {slideIndex = x.length}
 976   for (i = 0; i < x.length; i++) {
 977      x[i].style.display = "none";
 978   }
 979   x[slideIndex-1].style.display = "block";
 980
 981   if (lista[slideIndex-1] == 0 && slideIndex == 2) {
 982     display_model("2")
 983   }
 984
 985   if (lista[slideIndex-1] == 0 && slideIndex == 3) {
 986      display_model("3")
 987   }
 988
 989   if (lista[slideIndex-1] == 0 && slideIndex == 4) {
 990      display_model("4")
 991   }
 992
 993   if (lista[slideIndex-1] == 0 && slideIndex == 5) {
 994      display_model("5")
 995   }
 996
 997
 998   if (lista[slideIndex-1] == 0) {lista[slideIndex-1]=1}
 999 }
1000 </script>
1001 {% endif %}
1002
1003 {% if not task.done %}
1004 <script>
1005 function worker() {
1006   $.ajax({
1007     data:{csrfmiddlewaretoken: '{{ csrf_token }}'},
1008     url: "/refresh_done/",
1009     type:"post",
1010     success: function(data) {
1011       document.location.reload();
1012     },
1013     complete: function() {
1014       // Schedule the next request when the current one's complete
1015       setTimeout(worker, 30000);
1016     }
1017   });
1018 };
1019 $(document).ready(function() {
1020   // run the first time; all subsequent calls will take care of themselves
1021   setTimeout(worker, 30000);
1022 });
1023 </script>
1024 {% endif %}
1025
1026 {% if task.type == "min" %}
1027 <script>
1028 window.addEventListener("resize",
1029      function (event) {
1030      stage.handleResize();
1031      },false);
1032
1033 var stage_unres = new NGL.Stage("viewport_unres");
1034 stage_unres.setParameters( { backgroundColor: "white" } );
1035 /**
1036 [color_Red, color_Green, color_Blue, ellipsoid_width, ellipsoid_length ]
1037 */
1038 var resdb = {   'CYS': [1.000, 1.000, 0.000, 1.33741, 2.96868],
1039                 'MET': [0.000, 1.000, 0.000, 1.36694, 3.08863],
1040                 'PHE': [0.000, 0.392, 0.000, 1.48323, 3.04238],
1041                 'ILE': [0.000, 1.000, 0.000, 1.44098, 3.17389],
1042                 'LEU': [0.000, 1.000, 0.000, 1.51054, 2.52078],
1043                 'VAL': [0.000, 1.000, 0.000, 1.42072, 2.68924],
1044                 'TRP': [0.000, 0.392, 0.000, 1.23867, 3.47403],
1045                 'TYR': [0.596, 0.984, 0.596, 1.23060, 3.35434],
1046                 'ALA': [0.000, 1.000, 0.000, 1.23266, 1.72686],
1047                 'GLY': [1.000, 1.000, 1.000, 1.24626, 1.11383],
1048                 'THR': [1.000, 0.000, 1.000, 1.28674, 2.59210],
1049                 'SER': [1.000, 0.000, 1.000, 1.22820, 1.68800],
1050                 'GLN': [1.000, 0.000, 1.000, 1.24239, 2.22201],
1051                 'ASN': [1.000, 0.000, 1.000, 1.24447, 2.24946],
1052                 'GLU': [1.000, 0.000, 0.000, 1.25448, 2.05551],
1053                 'ASP': [1.000, 0.000, 0.000, 1.25417, 1.77556],
1054                 'HIS': [1.000, 0.000, 1.000, 1.21103, 3.02627],
1055                 'ARG': [0.000, 0.000, 1.000, 1.13573, 3.25143],
1056                 'LYS': [0.000, 0.000, 1.000, 1.22604, 4.50054],
1057                 'PRO': [0.000, 1.000, 1.000, 1.35131, 2.20525]
1058                         };
1059 stage_unres.loadFile("/myfiles/download-file/{{task.jobdirname}}/file_GB000.pdb", {defaultRepresentation: false}).then
1060        (function ( o ){
1061        var shape = new NGL.Shape("shape")
1062        var chain = ""
1063        o.addRepresentation("licorice");
1064        o.structure.eachAtom(function(atom){
1065          if (atom.atomname == "CA" && atom.chainname == chain) {
1066           px=CAx+(atom.x-CAx)/2;
1067           py=CAy+(atom.y-CAy)/2;
1068           pz=CAz+(atom.z-CAz)/2;
1069           shape.addSphere([px,py,pz],[0.643, 0.933, 0.960],0.6,"p");
1070          }
1071          if (atom.atomname == "CA") {
1072          chain= atom.chainname
1073          CAx= atom.x;
1074          CAy= atom.y
1075          CAz= atom.z
1076          }
1077          if (atom.atomname == "CB") {
1078           mx = (atom.x-CAx);
1079           my = (atom.y-CAy);
1080           mz = (atom.z-CAz);
1081           norm=Math.sqrt(mx*mx+my*my+mz*mz);
1082           res=atom.resname;
1083           var longaxis=resdb[res][4]
1084           var shortaxis=resdb[res][3]
1085           mx = mx /norm*longaxis;
1086           my = my /norm*longaxis;
1087           mz = mz /norm*longaxis;
1088           resn=res+atom.resno
1089           shape.addEllipsoid([ atom.x, atom.y, atom.z ],
1090               [ resdb[res][0], resdb[res][1], resdb[res][2]],
1091               shortaxis, [ mx, my, mz ], [ 0, shortaxis, 0 ],resn);
1092          }
1093        });
1094        var shapeComp = stage_unres.addComponentFromObject(shape)
1095        shapeComp.addRepresentation("buffer")
1096        o.autoView();
1097 });
1098
1099
1100
1101 var stage = new NGL.Stage("viewport_min");
1102 stage.setParameters( { backgroundColor: "white" } );
1103 Promise.all([
1104   stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/file_GB000.pdb" ,{defaultRepresentation: false}) .then( function( o ){
1105      o.addRepresentation( "backbone",{ color:
1106        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
1107      })
1108      o.addRepresentation( "licorice",{ color:
1109        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange","red"]
1110      })
1111      return o
1112   }),
1113
1114   stage.loadFile("/myfiles/download-file/{{task.jobdirname}}/plik.pdb",{defaultRepresentation: false}) .then( function( o ){
1115      o.addRepresentation( "backbone",{ name: "allatom", color:
1116        "residueindex",colorScale:["blue","cyan", "green","yellow","orange", "red"]
1117      })
1118      o.addRepresentation( "line",{ name: "allatomsc", color:
1119        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
1120        ,sele:"not hydrogen and sidechainAttached"
1121      })
1122      return o
1123   })
1124 ]).then(function (ol) {
1125    ol[ 0 ].superpose(ol[ 1 ], false, ".CA")
1126    ol[ 0 ].autoView()
1127 })
1128
1129 var allatom=true;
1130 var side=true;
1131 var toggleAll = document.getElementById( "toggleAllatom" );
1132 toggleAll.addEventListener( "click", function(){
1133                         allatom=! allatom;
1134                         stage.getRepresentationsByName(
1135                                 "allatom" ).list.forEach( function( repre ){
1136                                 repre.setVisibility( !repre.visible );
1137                         } );
1138             if (side) {
1139                         stage.getRepresentationsByName(
1140                                 "allatomsc" ).list.forEach( function( repre ){
1141                                 repre.setVisibility( !repre.visible );
1142                         } );
1143             }
1144 } );
1145 var toggleSidechains = document.getElementById("toggleSidechains2" );
1146 toggleSidechains.addEventListener( "click", function(){
1147           side=!side;
1148           if (allatom) {
1149                 stage.getRepresentationsByName(
1150                         "allatomsc" ).list.forEach( function( repre ){
1151                                 repre.setVisibility( !repre.visible );
1152                 } );
1153
1154           }
1155           stage.getRepresentationsByName("licorice").list.forEach( function( repre ){
1156                 repre.setVisibility( !repre.visible );
1157           } );
1158
1159 } );
1160 </script>
1161 {% endif %}
1162
1163 {% if task.type == "md" and task.md_start == "pdbstart" %}
1164 <script>
1165 window.addEventListener("resize",
1166      function (event) {
1167      stage.handleResize();
1168      },false);
1169
1170 var stage = new NGL.Stage("viewport_putty");
1171 stage.setParameters( { backgroundColor: "white" } );
1172
1173 var tooltip = document.createElement("div")
1174 Object.assign(tooltip.style, {
1175   display: "none",
1176   position: "fixed",
1177   zIndex: 10,
1178   pointerEvents: "none",
1179   backgroundColor: "rgba( 0, 0, 0, 0.6 )",
1180   color: "lightgrey",
1181   padding: "8px",
1182   fontFamily: "sans-serif"
1183 })
1184 document.body.appendChild(tooltip)
1185
1186 stage.loadFile("/myfiles/download-file/{{task.jobdirname}}/plik_bf.pdb", {defaultRepresentation: false}).then
1187        (function ( o ){
1188        o.addRepresentation("tube",{ color: "bfactor" , scale: 0.25,
1189        sele: "backbone",
1190        radius:"bfactor",
1191        colorScale:["blue","cyan", "green", "yellow","orange", "red"] });
1192        o.addRepresentation("licorice",{sele:"sidechainAttached and CYS and not hydrogen"});
1193        o.autoView();
1194 })
1195
1196 // remove default hoverPick mouse action
1197 stage.mouseControls.remove("hoverPick")
1198
1199 stage.signals.hovered.add(function (pickingProxy) {
1200   if (pickingProxy && (pickingProxy.atom || pickingProxy.bond)) {
1201     var atom = pickingProxy.atom || pickingProxy.closestBondAtom
1202     var mp = pickingProxy.mouse.position
1203     var bf= atom.bfactor.toFixed(2)
1204     tooltip.innerText = atom.qualifiedName()+" Fluctuation="+ bf
1205     tooltip.style.bottom = window.innerHeight - mp.y + 3 + "px"
1206     tooltip.style.left = mp.x + 3 + "px"
1207     tooltip.style.display = "block"
1208   } else {
1209     tooltip.style.display = "none"
1210   }
1211 })
1212 </script>
1213 {% endif %}
1214
1215 {% if task.type == "md" and task.md_mdpdb %}
1216 <script>
1217 window.addEventListener("resize",
1218      function (event) {
1219      stage.handleResize();
1220      },false);
1221
1222       var stage = new NGL.Stage("viewport_traj");
1223       stage.setParameters( { backgroundColor: "white" } );
1224       stage.setParameters( { cameraType: "orthographic" } );
1225       var traj;
1226       var player;
1227       stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/file_MD000.pdb", {
1228        asTrajectory: true } ) .then( function( o ){
1229         o.setName ("unres_md");
1230         o.addRepresentation( "backbone",{ color:
1231        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
1232         });
1233         o.addRepresentation( "licorice",{ color:
1234        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
1235         });
1236         o.setPosition([0, 0, 100]);
1237         o.autoView();
1238         o.addTrajectory();
1239       });
1240
1241             var toggleSidechains = document.getElementById( "toggleSidechains1" );
1242             toggleSidechains.addEventListener( "click", function(){
1243                                                         stage.getRepresentationsByName( "licorice" ).list.forEach( function( repre ){
1244                                                                         repre.setVisibility( !repre.visible );
1245                                                         } );
1246             } );
1247
1248
1249       function numberWithCommas(x) {
1250                 return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
1251       }
1252       var toggleRunMDs = document.getElementById( "toggleRunMDs" );
1253       var isRunning = false;
1254       toggleRunMDs.addEventListener( "click", function(){
1255          var trajComp = stage.getComponentsByName("unres_md").list[0].trajList[0];
1256          var player = new NGL.TrajectoryPlayer(trajComp.trajectory, {timeout: 10, mode: "once"});
1257                                 if( !isRunning ){
1258                                         player.play();
1259                                         isRunning = true;
1260
1261                     trajComp.signals.frameChanged.add(function(){
1262                       var fnum=trajComp.trajectory.currentFrame+1;
1263                       clipRange.value = fnum;
1264                       clipRange_val.innerHTML = numberWithCommas(parseInt(clipRange.value*1));
1265                     });
1266
1267                                 }else{
1268                                         player.play();
1269                                         player.pause();
1270                                         isRunning = false;
1271                                 }
1272       } );
1273       var clipRange = document.getElementById( "clipRange" );
1274       var clipRange_val = document.getElementById( "clipRange_val" );
1275       clipRange.oninput = function( e ){
1276                 var trajComp = stage.getComponentsByName("unres_md").list[0].trajList[0];
1277                 trajComp.setFrame(e.target.value-1)
1278                 clipRange_val.innerHTML = numberWithCommas(parseInt(e.target.value*1));
1279       };
1280
1281 </script>
1282 {% endif %}
1283
1284
1285 {% endblock %}