PageSourceSearch

https://glycoanalysis.info/manual

html glycoanalysis.info collected 2026-10-05 02:02:02 UTC 56,262 bytes, 926 lines download raw bytes

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.