1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <!--Import Google Icon Font--> 5 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 6 7 <!-- Compiled and minified CSS --> 8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 9 10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" integrity="sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous" /> 11 12 <!-- cytoscape --> 13 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-panzoom/2.5.3/cytoscape.js-panzoom.css"> 14 <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.2/css/tabulator_site.min.css" rel="stylesheet"> 15 16 17 <!-- Required meta tags --> 18 <meta charset="utf-8"> 19 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 20 <link rel="stylesheet" type="text/css" href="/static/stylesheets/main.css"> 21 <link rel="stylesheet" type="text/css" href="/static/stylesheets/navbar.css"> 22 <!-- Bootstrap CSS --> 23 <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 24 integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> --> 25 <link href="https://fonts.googleapis.com/css2?family=Chonburi&display=swap" rel="stylesheet"> 26 27 <!-- favicon --> 28 <link rel="shortcut icon" href="/static/images/logo.png"> 29 30 <meta name="google-signin-client_id" content="375023823115-qcbmj5d09v1nrn3l4h1to69breac1jlb.apps.googleusercontent.com"> 31 <title>GALAXY ver3</title> 32 <style> 33 .click-table{ 34 padding: 8px; 35 } 36 #tree_window{ 37 height: 100vh !important; 38 width: 100vw; 39 /* overflow: visible; */ 40 41 /* top: 0; 42 bottom: 0; */ 43 max-height: 100%; 44 /* position: absolute; */ 45 } 46 #tree_window_main{ 47 height: 95%; 48 } 49 #tree_window_bottom{ 50 height: 5%; 51 bottom: 0; 52 position: absolute; 53 } 54 55 #manual_map{ 56 width: 100%; 57 height: auto; 58 } 59 #index_table > tbody > tr > td{ 60 padding: 0; 61 } 62 #index_table > tbody > tr > td > a{ 63 width: 100%; 64 height: 100%; 65 display: block; 66 padding: 3% 0; 67 } 68 69 </style> 70 71 72 </head> 73<!-- https://glycotoolkit.com/GLAD/batch-convert-excel-to-glad ããã¥ã¢ã«åè--> 74 <body> 75 <nav class="nav-extended grey darken-3"> 76 <div class="nav-wrapper"> 77 <img class="hide-on-med-and-down" src="/static/images/logo.png" alt="" width="100rem" style="position: absolute; margin-left: 1rem;"> 78 <a href="/" class="brand-logo center">GALAXY Ver. 3</a> 79 </div> 80 81 <div class="container"> 82 <div class="row"> 83 <div class="col s12"> 84 <ul id="custom-nav-top" style="background-color: rgba(0, 0, 0, 0);"> 85 <li class="col s3 center-align"><a class="white-text" href="/system">Main</a></li> 86 <li class="col s3 center-align"><a class="white-text" href="http://www.glycoanalysis.info/galaxy2/" target="_blank">Version 2</a></li> 87 <li class="col s3 center-align"><a class="white-text" href="/manual" id="manual_tab">Manual</a></li> 88 <li class="col s2 center-align"><a class="white-text" href="/about">About</a></li> 89 90 <li class="col s1 center-align"> 91 <a class='dropdown-trigger btn' href='#' data-target='user_menu_new'> 92 <i class="material-icons">person_add</i> 93 </a> 94 </li> 95 96 </ul> 97 </div> 98 </div> 99 100 </div> 101</nav> 102 103<!-- Dropdown Structure --> 104 105<ul id='user_menu_new' class='dropdown-content' style="min-width: 200px !important"> 106 <!-- <a href="/login" target="_blank"><li><img src="/static/images/googleSign.png" width="100%"></li></a> --> 107 <li style="width: 100%"><a href="/login" target="_blank"><img src="/static/images/googleSign.png" width="100%"></a></li> 108</ul> 109 110 111<div class="container-fluid" id="manual"> 112 <div class="row" style="display: flex; flex-wrap: wrap;"> 113 <div class="col hide-on-med-and-down s12 m6 l6"> 114 <div class="card-panel z-depth-4" style="height: 100%;"> 115 <div class="container-fluid"> 116 <div class="row"> 117 <div class="col s12"> 118 <h1 id="display" class="teal-text text-lighten-2">Display</h1> 119 <h4 class="teal-text text-lighten-2">Click on the image to jump to the corresponding explanation in the manual below.</h2> 120 <div class="divider" style="margin: 20px auto; width: 50%;"></div> 121 <h6 class="red-text text-accent-2">If the click action does not work, please Click button below.</h6> 122 <button class="waves-effect waves-light btn" onClick="window.location = window.location" style="margin: 20px auto;">Reload page resource</button> 123 </div> 124 <div class="col s12" align="center"> 125 <!-- <canvas style="width: 699px; height: 893px; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px; opacity: 1;"></canvas> --> 126 <!-- <img src="./assets/image/main.png" class="manual_image" usemap="#ImageMap" alt="" id="manual_map"> --> 127 <img src="/static/images/manual/main.png" class="manual_image" alt="" usemap="#ImageMap" id="manual_map"> 128 129 <map name="ImageMap"> 130 <!-- Topã®ã¿ã --> 131 <area shape="rect" coords="110,36,231,61" href="#content_topTab_main" alt="" id="manual_topTab_main"> 132 <area shape="rect" coords="231,36,345,62" href="#content_topTab_version2" alt="" id="manual_topTab_version2"> 133 <area shape="rect" coords="344,36,468,63" href="#content_topTab_manual" alt="" id="manual_topTab_manual"> 134 <area shape="rect" coords="469,36,584,62" href="#content_topTab_about" alt="" id="manual_topTab_about"> 135 <area shape="rect" coords="80,36,620,62" href="#content_topTab" alt="" id="manual_topTab_cover"> 136 137 <!-- Control panel upper --> 138 <area shape="rect" coords="17,117,232,152" href="#content_controlpanel_upper_axis" alt="" /> 139 <area shape="rect" coords="243,116,355,153" href="#content_controlpanel_upper_sialic" alt="" /> 140 <area shape="rect" coords="391,116,500,152" href="#content_controlpanel_upper_glucuronic" alt="" /> 141 <area shape="rect" coords="542,117,650,153" href="#content_controlpanel_upper_sulfate" alt="" /> 142 <area shape="rect" coords="257,170,433,198" href="#content_controlpanel_upper_utility_reset" alt="" /> 143 <area shape="rect" coords="480,173,652,196" href="#content_controlpanel_upper_utility_last" alt="" /> 144 <area shape="rect" coords="10,77,685,214" href="#content_controlpanel_upper" alt=""> 145 146 <!-- Control panel lower --> 147 <area shape="rect" coords="77,220, 183,250" href="#content_controlpanel_lower_axis" alt="" /> 148 <area shape="rect" coords="183,220,293,250" href="#content_controlpanel_lower_tree" alt="" /> 149 <area shape="rect" coords="293,220,399,250" href="#content_controlpanel_lower_composition" alt="" /> 150 <area shape="rect" coords="399,220,505,250" href="#content_controlpanel_lower_code" alt="" /> 151 <area shape="rect" coords="505,220,611,250" href="#content_controlpanel_lower_source" alt="" /> 152 <area shape="rect" coords="10,215,685,325" href="#content_controlpanel_lower" alt="" /> 153 154 <!-- Graph Area --> 155 <area shape="rect" coords="14,393,90,420" href="#content_grapharea_ex_switch" alt="" /> 156 <area shape="rect" coords="200,391,280,420" href="#content_grapharea_in_switch" alt="" /> 157 <area shape="rect" coords="14,430,388,720" href="#content_grapharea_plot" alt="" /> 158 <area shape="rect" coords="17,725,388,811" href="#content_grapharea_range" alt="" /> 159 <area shape="rect" coords="6,350,399,890" href="#content_grapharea" alt="" /> 160 161 <!-- Click result Area --> 162 <area shape="rect" coords="549,370,681,409" href="#content_result_glytoucan" alt="" /> 163 <area shape="rect" coords="424,417,679,522" href="#content_result_image" alt="" /> 164 <area shape="rect" coords="430,600,510,850" href="#content_result_enzyme" alt="" /> 165 <area shape="rect" coords="510,600,590,850" href="#content_result_product" alt="" /> 166 <area shape="rect" coords="590,600,670,850" href="#content_result_substrate" alt="" /> 167 <area shape="rect" coords="410,350,686,890" href="#content_result" alt="" /> 168 </map> 169 </div> 170 </div> 171 </div> 172 </div> 173 </div> 174 <div class="col s12 m12 l6"> 175 <div class="card-panel z-depth-4" style="height: 100%;"> 176 <div class="container-fluid"> 177 <div class="row"> 178 <div class="col s12"> 179 <table class="highlight centered" id="index_table"> 180 <caption><h1 id="index" class="teal-text text-lighten-2">Index</h1></caption> 181 <thead> 182 <tr> 183 <th>Class</th> 184 <th>Sub class</th> 185 <th>Title</th> 186 </tr> 187 </thead> 188 <tbody> 189 <tr> 190 <td rowspan="4"> 191 <a href="#content_topTab"> 192 Nav bar 193 </a> 194 </td> 195 <td rowspan="4"></td> 196 <td> 197 <a href="#content_topTab_main"> 198 Main tab 199 </a> 200 </td> 201 </tr> 202 <tr> 203 <td> 204 <a href="#content_topTab_version2"> 205 Version 2 tab 206 </a> 207 </td> 208 </tr> 209 <tr> 210 <td> 211 <a href="#content_topTab_manual"> 212 Manual tab 213 </a> 214 </td> 215 </tr> 216 <tr> 217 <td> 218 <a href="#content_topTab_about"> 219 About tab 220 </a> 221 </td> 222 </tr> 223 224 <tr> 225 <td rowspan="12"> 226 <a href="#content_controlpanel"> 227 Control panel 228 </a> 229 </td> 230 <td rowspan="7"> 231 <a href="#content_controlpanel_upper"> 232 Upper panel 233 </a> 234 </td> 235 <td> 236 <a href="#content_controlpanel_upper_axis"> 237 Axis type 238 </a> 239 </td> 240 </tr> 241 <tr> 242 <td> 243 <a href="#content_controlpanel_upper_sialic"> 244 Sialic acid 245 </a> 246 </td> 247 </tr> 248 <tr> 249 <td> 250 <a href="#content_controlpanel_upper_glucuronic"> 251 Glucuronic acid 252 </a> 253 </td> 254 </tr> 255 <tr> 256 <td> 257 <a href="#content_controlpanel_upper_sulfate"> 258 Sulfate 259 </a> 260 </td> 261 </tr> 262 <tr> 263 <td> 264 <a href="#content_controlpanel_upper_utility"> 265 Utilities 266 </a> 267 </td> 268 </tr> 269 <tr> 270 <td> 271 <a href="#content_controlpanel_upper_utility_reset"> 272 Reset 273 </a> 274 </td> 275 </tr> 276 <tr> 277 <td> 278 <a href="#content_controlpanel_upper_utility_last"> 279 Last 280 </a> 281 </td> 282 </tr> 283 <tr> 284 <td rowspan="5"> 285 <a href="#content_controlpanel_lower"> 286
286 Lower panel 287 </a> 288 </td> 289 <td> 290 <a href="#content_controlpanel_lower_axis"> 291 Axis 292 </a> 293 </td> 294 </tr> 295 <tr> 296 <td> 297 <a href="#content_controlpanel_lower_tree"> 298 Tree 299 </a> 300 </td> 301 </tr> 302 <tr> 303 <td> 304 <a href="#content_controlpanel_lower_composition"> 305 Composition 306 </a> 307 </td> 308 </tr> 309 <tr> 310 <td> 311 <a href="#content_controlpanel_lower_code"> 312 Code 313 </a> 314 </td> 315 </tr> 316 <tr> 317 <td> 318 <a href="#content_controlpanel_lower_source"> 319 Source 320 </a> 321 </td> 322 </tr> 323 324 325 <tr> 326 <td rowspan="4"> 327 <a href="#content_graphare"> 328 Graph area 329 </a> 330 </td> 331 <td rowspan="4"></td> 332 <td> 333 <a href="#content_grapharea_ex_switch"> 334 Experimental switch 335 </a> 336 </td> 337 </tr> 338 <tr> 339 <td> 340 <a href="#content_grapharea_in_switch"> 341 Inferred switch 342 </a> 343 </td> 344 </tr> 345 <tr> 346 <td> 347 <a href="#content_grapharea_plot"> 348 Plot area 349 </a> 350 </td> 351 </tr> 352 <tr> 353 <td> 354 <a href="#content_grapharea_range"> 355 "About" Tab 356 </a> 357 </td> 358 </tr> 359 360 <tr> 361 <td rowspan="5"> 362 <a href="#content_result"> 363 Clicked result 364 </a> 365 </td> 366 <td rowspan="5"></td> 367 <td> 368 <a href="#content_result_glytoucan"> 369 GlyTouCan ID 370 </a> 371 </td> 372 </tr> 373 <tr> 374 <td> 375 <a href="#content_result_image"> 376 Glycan Image 377 </a> 378 </td> 379 </tr> 380 <tr> 381 <td> 382 <a href="#content_result_enzyme"> 383 Enzyme 384 </a> 385 </td> 386 </tr> 387 <tr> 388 <td> 389 <a href="#content_result_product"> 390 Product 391 </a> 392 </td> 393 </tr> 394 <tr> 395 <td> 396 <a href="#content_result_substrate"> 397 Substrate 398 </a> 399 </td> 400 </tr> 401 </tbody> 402 </table> 403 </div> 404 </div> 405 </div> 406 </div> 407 </div> 408 </div> 409 410 <div class="row" id="content_wrapper"> 411 <div class="col s12 m10"> 412 <!-- Top Tabbar --> 413 <div class="card-panel z-depth-4"> 414 <div class="container-fluid"> 415 <div class="row"> 416 <div class="col s12"> 417 <h1 id="content_topTab" class="teal-text scrollspy">Top tabs</h1> 418 <div class="divider" style="margin-bottom: 15px;"></div> 419 <p>Users will be able to switch the contents by clicking those tabs listed below. 420 <ol> 421 <li>Main - <a href="#content_topTab_main">jump</a></li> 422 <li>Version 2 - <a href="#content_topTab_version2">jump</a></li> 423 <li>Manual - <a href="#content_topTab_manual">jump</a></li> 424 <li>About - <a href="#content_topTab_about">jump</a></li> 425 </ol> 426 The possible actions that an user can do will be introduced in the next content. 427 </p> 428 <div class="divider" style="margin-bottom: 15px;"></div> 429 <h3 id="content_topTab_main" class="teal-text">"Main" Tab</h3> 430 <p> 431 "Main" tab leads an user to main system page, and this tab is selected by default. 432 </p> 433 434 <div class="divider" style="margin-bottom: 15px;"></div> 435 <h3 id="content_topTab_version2" class="teal-text">"Version" 2 Tab</h3> 436 <p> 437 "Version 2" tab leads an user to previous version of "GALAXY".<br> 438 The new browser tab will be opend automatically to display that. 439 </p> 440 441 <div class="divider" style="margin-bottom: 15px;"></div> 442 <h3 id="content_topTab_manual" class="teal-text">"Manual" Tab</h3> 443 <p> 444 "Manual" tab leads an user to system manual page(now you are checking). 445 </p> 446 447 <div class="divider" style="margin-bottom: 15px;"></div> 448 <h3 id="content_topTab_about" class="teal-text">"About" Tab</h3> 449 <p> 450 "About" tab leads an user to the document which describes the detail about the research background. 451 </p> 452 </div> 453 </div> 454 </div> 455 </div> 456 457 <!-- Control panel ä¸é¨--> 458 <div class="card-panel z-depth-4"> 459 <div class="container-fluid"> 460 <div class="row"> 461 <div class="col s12"> 462 <h1 class="teal-text" id="content_controlpanel">Control panel</h1> 463 <div class="divider" style="margin-bottom: 15px;"></div> 464 <h2 id="content_controlpanel_upper" class="scrollspy">Upper panel</h2> 465 <div class="divider" style="margin-bottom: 15px;"></div> 466 <h3 id="content_controlpanel_upper_axis" class="teal-text">-Axis type</h3> 467 <p> 468 An user will be able to select axis type of the graph at the middle. <br> 469 These are the available options. <br> 470 <ol> 471 <li>ODS - Amide</li> 472 <li>ODS - Molecular Weight(Mw)</li> 473 <li>Amide - Mw</li> 474 </ol> 475 </p> 476 <div class="divider" style="margin-bottom: 15px;"></div> 477 478 <h3 id="content_controlpanel_upper_sialic" class="teal-text">-Sialic acid</h3> 479 <p> 480 An user will be able to filter the data by sialic acid. <br> 481 It will consider the content of "N-Acetylneuraminic acid" and "N-Glycolylneuraminic acid".<br> 482 The form will accept these string patterns. 483 <ul> 484 <li>x â limited its value as x</li> 485 <li>x- â limited its value as over x</li> 486 <li>-x â limited its value as below x</li> 487 <li>x-y â limited its value between x and y</li> 488 </ul> 489 </p> 490 <div class="divider" style="margin-bottom: 15px;"></div> 491 492 <h3 id="content_controlpanel_upper_glucuronic" class="teal-text">-Glucuronic acid</h3> 493 <p> 494 An user will be able to filter the data by glucuronic acid. <br> 495 It will consider the content of "D-Gluc
495opyranuronic acid".<br> 496 The form will accept these string patterns. 497 <ul> 498 <li>x â limited its value as x</li> 499 <li>x- â limited its value as over x</li> 500 <li>-x â limited its value as below x</li> 501 <li>x-y â limited its value between x and y</li> 502 </ul> 503 </p> 504 <div class="divider" style="margin-bottom: 15px;"></div> 505 506 <h3 id="content_controlpanel_upper_sulfate" class="teal-text">-Sulfate</h3> 507 <p> 508 An user will be able to filter the data by sulfation. <br> 509 It will consider the content of "6-O-sulfate"(6S).<br> 510 The form will accept these string patterns. 511 <ul> 512 <li>x â limited its value as x</li> 513 <li>x- â limited its value as over x</li> 514 <li>-x â limited its value as below x</li> 515 <li>x-y â limited its value between x and y</li> 516 </ul> 517 </p> 518 <div class="divider" style="margin-bottom: 15px;"></div> 519 <h3 class="teal-text" id="content_controlpanel_upper_utility">-Utilities</h3> 520 <p> 521 The system has two useful functions.<br> 522 <ol> 523 <li>Reset</li> 524 <li>Last</li> 525 </ol> 526 </p> 527 <div class="divider" style="margin-bottom: 15px;"></div> 528 <h4 id="content_controlpanel_upper_utility_reset" class="teal-text">Reset</h4> 529 <p> 530 Once this function is called, all form will be cleared and the graph will be generated with original data again. 531 </p> 532 <div class="divider" style="margin-bottom: 15px;"></div> 533 534 <h4 id="content_controlpanel_upper_utility_last" class="teal-text">Last</h4> 535 <p> 536 <b>UNDER DEVELOPMENT</b> 537 </p> 538 <div class="divider" style="margin-bottom: 15px;"></div> 539 540 <h2 id="content_controlpanel_lower" class="scrollspy">Lower panel</h2> 541 â»ã¿ãåãæ¿ãã®Gifæ¿å ¥ 542 <div class="divider" style="margin-bottom: 15px;"></div> 543 <h3 id="content_controlpanel_lower_axis" class="teal-text">-Axis</h3> 544 <img src="/static/images/manual/axis_inputform.png" class="materialboxed responsive-img manual_image" alt="" style="width: 80%; margin: auto 0!important;"> 545 <!-- <img class="materialboxed responsive-img manual_image" src="./assets/image/axis_inputform.png" alt="" style="width: 80%; margin: auto 0!important;"> --> 546 <p> 547 The axis form will accept four values at one time.<br> 548 Only the forms corresponding to the selected axis type are fillable.<br> 549 Respective "Value" specifies standard value, and "Range" accepts margin.<br> 550 For example, if <b>10</b> is given for ODS value and <b>1</b> is given for ODS range, the system will filter data which ODS value is <b>9 - 11</b>. 551 </p> 552 <div class="divider" style="margin-bottom: 15px;"></div> 553 554 <h3 id="content_controlpanel_lower_tree" class="teal-text">-Tree</h3> 555 <img src="/static/images/manual/tree_inputform.png" class="materialboxed responsive-img manual_image" alt="" style="width: 80%; margin: auto 0!important;"> 556 <!-- <img class="materialboxed responsive-img manual_image" src="./assets/image/tree_inputform.png" alt="" style="width: 80%; margin: auto 0!important;"> --> 557 <p> 558 An user can open tree map at external window like the image above.<br> 559 The procedure of tree search is following these orders.<br> 560 <ol> 561 <li>Select search mode from "Fit" or "Fuzzy"</li> 562 <ul> 563 <li>Fit: limits the plot which matches completely the same as the selected structure</li> 564 <li>Fuzzy: limits the plots which contains the selected structure</li> 565 </ul> 566 â»User will be able to switch the search mode from the bottom menu later as well. 567 â»Filtering will be re-proceeded with the selecting nodes information. 568 <li>Select the node(s)</li> 569 Selected nodes will turn to
569skyblue background. 570 <li>Save selection(optional))</li> 571 <li>Restore(optional)</li> 572 â»"Restore" works when the previous selection is saved on the server. 573 </ol> 574 </p> 575 <div class="divider" style="margin-bottom: 15px;"></div> 576 577 <h3 id="content_controlpanel_lower_composition" class="teal-text">-Composition</h3> 578 <img src="/static/images/manual/composition_inputform.png" class="materialboxed responsive-img manual_image" alt="" style="width: 80%; margin: auto 0!important;"> 579 <!-- <img class="materialboxed responsive-img manual_image" src="./assets/image/composition_inputform.png" alt="" style="width: 80%; margin: auto 0!important;"> --> 580 <p> 581 Composition search form accepts numbers of each monosaccharide.<br> 582 The forms will not be appeared unless an user will check the box next to the category name.<br> 583 â»Even numbers are filled in the forms, the system will reffer condition of a checked monosaccharide.<br> 584 "Composition search" also has two search mode.<br> 585 <ul> 586 <li><b>Fit</b>: limits the plots which matche completely the same composition as designated.</li> 587 <li><b>Fuzzy</b>: limits the plots which contains the designated number of each monosaccharide.</li> 588 </ul> 589 </p> 590 <div class="divider" style="margin-bottom: 15px;"></div> 591 592 <h3 id="content_controlpanel_lower_code" class="teal-text">-Code</h3> 593 <p> 594 An user will be able to search by code.<br> 595 The code list is available from <a href="./assets/data/galaxy_mapping_list.csv" download>this link(download CSV)</a>.<br> 596 â»The code is determined by following the rule described <a href="http://www.glycoanalysis.info/galaxy2/ENG/systemman.jsp#CODE" target="_blank">here</a>. 597 </p> 598 <div class="divider" style="margin-bottom: 15px;"></div> 599 600 <h3 id="content_controlpanel_lower_source" class="teal-text">-Source</h3> 601 <p> 602 <b>UNDER DEVELOPMENT</b> 603 </p> 604 <div class="divider" style="margin-bottom: 15px;"></div> 605 </div> 606 </div> 607 </div> 608 </div> 609 610 <!--ãGraph area --> 611 <div class="card-panel z-depth-4"> 612 <div class="container-fluid"> 613 <div class="row"> 614 <div class="col s12"> 615 <h1 id="content_grapharea" class="teal-text scrollspy">Graph area</h1> 616 <div class="divider" style="margin-bottom: 15px;"></div> 617 <h3 id="content_grapharea_ex_switch" class="teal-text">Experimental switch</h3> 618 <p> 619 An user will be able to switch whether displaying "Experimental dataset" on the graph or not. 620 </p> 621 622 <div class="divider" style="margin-bottom: 15px;"></div> 623 <h3 id="content_grapharea_in_switch" class="teal-text">Inferred switch</h3> 624 <p> 625 An user will be able to switch whether displaying "Inferred dataset" on the graph or not. 626 </p> 627 <div class="divider" style="margin-bottom: 15px;"></div> 628 <h3 id="content_grapharea_plot" class="teal-text">Plot area</h3> 629 <img src="/static/images/manual/grapharea.png" class="materialboxed responsive-img manual_image" alt="" style="width: 80%; margin: auto 0!important;"> 630 <!-- <img class="materialboxed responsive-img manual_image" src="./assets/image/grapharea.png" alt="" style="width: 80%; margin: auto 0!important;"> --> 631 <p> 632 Plot area displays data by two dimentional graph.<br> 633 There are some features for this area.<br> 634 <ol> 635 <li>Selecting plot to show more information in the result area</li> 636 <li>Checking general information by hovering mouse on a plot(as showed on image above)</li> 637 <li>Zooming out/in by using mouse wheel or multi fingers(on tablet)</li> 638 <li>Panning the graph</li> 639 </ol> 640 </p> 641 <h5 id="content_grapharea_plot_fill_color" class="teal-text">Plot color</h5> 642 <p> 643 Plots are colored by one of those below. 644 <ul> 645 <li class="manual-svg-list"> 646 <svg width="50" height="50"> 647 <circle cx="25" cy="25" r="15" style="fill: #f08080;stroke-width:1;stroke:rgb(0,0,0)" /> 648 </svg>
649 <span> 650 : Experimental dataset(default) 651 </span> 652 </li> 653 <li class="manual-svg-list"> 654 <svg width="50" height="50"> 655 <circle cx="25" cy="25" r="15" style="fill: #6495ed;stroke-width:1;stroke:rgb(0,0,0)" /> 656 </svg> 657 <span> 658 : Inferred dataset(default) 659 </span> 660 </li> 661 <li class="manual-svg-list"> 662 <svg width="50" height="50"> 663 <circle cx="25" cy="25" r="15" style="fill: #6d46f0;stroke-width:1;stroke:rgb(0,0,0)" /> 664 </svg> 665 <span> 666 : Single selected plot 667 </span> 668 </li> 669 <li class="manual-svg-list"> 670 <svg width="50" height="50"> 671 <circle cx="25" cy="25" r="15" style="fill: #32cd32;stroke-width:1;stroke:rgb(0,0,0)" /> 672 </svg> 673 <span> 674 : Filtered plots 675 </span> 676 </li> 677 <li class="manual-svg-list"> 678 <svg width="50" height="50"> 679 <circle cx="25" cy="25" r="15" style="fill: #dc143c;stroke-width:1;stroke:rgb(0,0,0)" /> 680 </svg> 681 <span> 682 : Tab selected plot(among filtered plots) 683 </span> 684 </li> 685 </ul> 686 </p> 687 688 <h5 id="content_grapharea_plot_stroke_color" class="teal-text">Border color</h5> 689 <p> 690 Plot border is colored by one of those colors when enzyme relation is highlihgted. 691 <ul> 692 <li class="manual-svg-list"> 693 <svg width="50" height="50"> 694 <circle cx="25" cy="25" r="15" style="fill: gray;stroke-width:5;stroke:#ffeb3b" /> 695 </svg> 696 <span> 697 : α-Galactosidase 698 </span> 699 </li> 700 <li class="manual-svg-list"> 701 <svg width="50" height="50"> 702 <circle cx="25" cy="25" r="15" style="fill: gray;stroke-width:5;stroke:#b71c1c" /> 703 </svg> 704 <span> 705 : α-Fucosidase 706 </span> 707 </li> 708 <li class="manual-svg-list"> 709 <svg width="50" height="50"> 710 <circle cx="25" cy="25" r="15" style="fill: gray;stroke-width:5;stroke:#ffc107" /> 711 </svg> 712 <span> 713 : β-Galactosidase 714 </span> 715 </li> 716 <li class="manual-svg-list"> 717 <svg width="50" height="50"> 718 <circle cx="25" cy="25" r="15" style="fill: gray;stroke-width:5;stroke:#039be5" /> 719 </svg>
720 <span> 721 : β-HexNAcase 722 </span> 723 </li> 724 <li class="manual-svg-list"> 725 <svg width="50" height="50"> 726 <circle cx="25" cy="25" r="15" style="fill: gray;stroke-width:5;stroke:#ff5722" /> 727 </svg> 728 <span> 729 : β-Xylosidase 730 </span> 731 </li> 732 <li class="manual-svg-list"> 733 <svg width="50" height="50"> 734 <circle cx="25" cy="25" r="15" style="fill: gray;stroke-width:5;stroke:#673ab7" /> 735 </svg> 736 <span> 737 : α-Sialidase 738 </span> 739 </li> 740 <li class="manual-svg-list"> 741 <svg width="50" height="50"> 742 <circle cx="25" cy="25" r="15" style="fill: gray;stroke-width:5;stroke:#1a237e" /> 743 </svg> 744 <span> 745 : α-Glucuronidase 746 </span> 747 </li> 748 <li class="manual-svg-list"> 749 <svg width="50" height="50"> 750 <circle cx="25" cy="25" r="15" style="fill: gray;stroke-width:5;stroke:#00bcd4" /> 751 </svg> 752 <span> 753 : Desulfation 754 </span> 755 </li> 756 </ul> 757 </p> 758 <div class="divider" style="margin-bottom: 15px;"></div> 759 <h3 id="content_grapharea_range" class="teal-text">Range information</h3> 760 <p> 761 Range information table is placed under the graph.<br> 762 The table shows the brief information of genral parameters in the format below.<br> 763 <code>"minimum - maximum"</code><br> 764 The data is separated by the dataset type. 765 </p> 766 </div> 767 </div> 768 </div> 769 </div> 770 771 <!-- Clicked result --> 772 <div class="card-panel z-depth-4"> 773 <div class="container-fluid"> 774 <div class="row"> 775 <div class="col s12"> 776 <h1 id="content_result" class="teal-text scrollspy">Highlight</h1> 777 <div class="divider" style="margin-bottom: 15px;"></div> 778 <img src="/static/images/manual/clickResult.png" class="materialboxed responsive-img manual_image" alt="" style="width: 80%; margin: auto 0!important;"> 779 <!-- <img class="materialboxed responsive-img manual_image" src="./assets/image/clickResult.png" alt="" style="width: 80%; margin: auto 0!important;"> --> 780 </p> 781 <div class="divider" style="margin-bottom: 15px;"></div> 782 <h3 id="content_result_glytoucan" class="teal-text">GlyTouCan ID</h3> 783 <p> 784 Mapped GlyTouCan ID is displayed on the top of the result area.<br> 785 Target link is opened at an external tab on your web browser.<br> 786 â»What is <a href="https://glytoucan.org">GlyTouCan</a>? 787 </p> 788 789 <div class="divider" style="margin-bottom: 15px;"></div> 790 <h3 id="content_result_image" class="teal-text">Glycan Image</h3> 791 <p>
792 Glycan Image is generated with <a href="https://www.ncbi.nlm.nih.gov/glycans/snfg.html">Symbol Nomenclature for Glycans(SNFG)</a>. 793 </p> 794 795 <div class="divider" style="margin-bottom: 15px;"></div> 796 <h3 id="content_result_enzyme" class="teal-text">Enzyme</h3> 797 <p> 798 Eight kinds of enzyme are listed in the table, and all of them are clickable if the glycan has product or substrate.<br> 799 The clicking will highlight those product or substrate on the graph with a style described <a href="#content_grapharea_plot_stroke_color">here</a>.<br> 800 Example highlight is looked like the figure below.<br> 801 </p> 802 <img src="/static/images/manual/enzyme_highlight.png" class="materialboxed responsive-img manual_image" alt="" style="width: 80%; margin: auto 0!important;"> 803 <!-- <img class="materialboxed responsive-img manual_image" src="./assets/image/enzyme_highlight.png" alt="" style="width: 80%; margin: auto 0!important;"> --> 804 <div class="divider" style="margin-bottom: 15px;"></div> 805 <h3 id="content_result_product" class="teal-text">Product</h3> 806 <p> 807 If a glycan has a product by processing with an enzyme, its GlyTouCan ID would be appeared as a botton.<br> 808 By hovering the cursor on the botton, an user will be able to check the glycan image.<br> 809 <img src="/static/images/manual/product_hover.png" class="materialboxed responsive-img manual_image" alt="" style="width: 80%; margin: auto 0!important;"> 810 <!-- <img class="materialboxed responsive-img manual_image" src="./assets/image/product_hover.png" alt="" style="width: 80%; margin: auto 0!important;"> --> 811 <br> 812 Moreover, clicking the botton triggers showing up of the modal window for checking more information briefly.<br> 813 <img src="/static/images/manual/product_click.png" class="materialboxed responsive-img manual_image" alt="" style="width: 80%; margin: auto 0!important;"> 814 <!-- <img class="materialboxed responsive-img manual_image" src="./assets/image/product_click.png" alt=""> --> 815 </p> 816 817 <div class="divider" style="margin-bottom: 15px;"></div> 818 <h3 id="content_result_substrate" class="teal-text">Substrate</h3> 819 <p> 820 If a glycan has a substrate by processing with an enzyme, its GlyTouCan ID would be collected in a drop-down button.<br> 821 After opening the drop-down, by hovering the cursor on the GlyTouCan ID, an user will be able to check the glycan image.<br> 822 Moreover, clicking the botton triggers showing up of the modal window for checking more information briefly.<br> 823 Those features are the same as described in the product section. 824 </p> 825 </div> 826 </div> 827 </div> 828 </div> 829 </div> 830 <div class="col hide-on-small-only m2" id="pushpin_cover"> 831 <div style="height: 1px;" class="pushpin"> 832 <ul class="section table-of-contents" id="toc_block"> 833 <li> 834 <a href="#content_topTab" class="active">Top Tabs</a> 835 </li> 836 <li> 837 <a href="#content_controlpanel_upper" class="">Upper control panel</a> 838 </li> 839 <li> 840 <a href="#content_controlpanel_lower" class="">Lower control panel</a> 841 </li> 842 <li> 843 <a href="#content_grapharea" class="">Graph Area</a> 844 </li> 845 <li> 846 <a href="#content_result">Clicked Result</a> 847 </li> 848 </ul> 849 </div> 850 </div> 851 <div class="fixed-action-btn"> 852 <button id="sc2top" class="btn-floating btn-large red"><i class="large material-icons">arrow_upward</i></button> 853 </div> 854 </div> 855 856</div> 857 858
858<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
858 859
859<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
859 860 861 <!-- Compiled and minified JavaScript --> 862
862<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
862 863 <!--
863<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
863 --> 864 <style> 865 .pin-top { 866 position: relative; 867 } 868 869 .pin-bottom { 870 position: relative; 871 } 872 873 .pinned { 874 position: fixed !important; 875 } 876 </style> 877
877<script type="text/javascript"> 878 $('.dropdown-trigger').dropdown(); 879 </script>
879 880 881<!-- map highlight ã¢ã¸ã¥ã¼ã« -->
882<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js" integrity="sha512-eZB7hQa0bRlrKMQ2njpP0d/Klu6o30Gsr8e5FUCjUT3fSlnVkm/1J14n58BuwgaMuObrGb7SvUfQuF8qFsPU4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 1 bytes, line 882
882
883<script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.2/jquery.maphilight.min.js" integrity="sha512-1YiTT24MNHA6DRzyu+w9F5Egc8evYlyEnzSSTD4/M7q42xEb5fSpNgn0+1CPy3evubHs3xdlh8uXgae0DOhR7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 1 bytes, line 883
883
884<script type="text/javascript"> 885 $('.fixed-action-btn').floatingActionButton({ 886 'hoverEnabled': false 887 }); 888 889 $(document).ready(function(){ 890 $('#toc_block').pushpin({ 891 'top': $('#content_wrapper').offset().top, 892 'offset': 150 893 }); 894 $('#manual_map').rwdImageMaps(); 895 $('#manual_map').maphilight({ 896 fill: true, // ã¨ãªã¢ãå¡ãã¤ã¶ã(true) 897 fillColor: '32cd32', // å¡ãã¤ã¶ãã«ã©ã¼ã³ã¼ã 898 fillOpacity: 0.5, // å¡ãã¤ã¶ãã®éé度(0=éæã1=å®å ¨ãªå¡ãã¤ã¶ã) 899 alwaysOn: false, //常ã«è¡¨ç¤ºããããããã©ã«ãå¤ã䏿¸ããã 900 fade: true, 901 groupby: false, 902 wrapClass: true, 903 shadow: true 904 }); 905 }) 906 907 $(window).resize(function() { 908 $('#toc_block').pushpin({ 909 'top': $('#content_wrapper').offset().top, 910 'offset': 100 911 }); 912 }); 913 914 $('#sc2top').click(function(){ 915 $('html, body').animate({ 916 scrollTop: 0 917 },700, 'easeOutQuart'); 918 919 return false; 920 }); 921</script>
921 922 923 924 925 </body> 926</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.