-
Notifications
You must be signed in to change notification settings - Fork 0
/
2 viewer in same page.html
78 lines (66 loc) · 3.84 KB
/
2 viewer in same page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---- jQuery is not required dependency package ---->
<script src="hgv.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="uniqueID" style="border-style: solid; border-color: lightgrey; width: 400px; height: 300px; right: 0;"></div>
---------------------------------------------------------------------------------------------------------------
<div id="uniqueID2" style="border-style: solid; border-color: lightgrey; width: 400px; height: 300px; right: 0;"></div>
<script>
// The template for the hierarchical glycan viewer
var demo_option_new = {
essentials : {
div_ID : "uniqueID", // the ID of div container
component : {}, // the data
topoOnly : 0,
viewRoot : "",
useGlyTouCanAsImageSource : true,
GlyTouCanImagePara: {
style: "extended", // Other Options: normal, compact
format: "png", // Other Options: jpg
notation: "cfg" // Other Options: cfgbw, uoxf, uoxf-color, cfg-uoxf, iupac
},
imgURL1 : "img/", // Unnecessary if useGlyTouCanAsImageSource is true
imgURL2 : ".png"
},
display : {
enableTitle: false,
enableNavi: true,
naviOption: {
size: 0.2,
position: 4
},
orientation: 2 // 1, 2, 3, 4 Stand for top2bottom left2right bottom2top right2left
},
contextMenu : {
enable: true,
defaultMenu: false,
externalURL1: "https://edwardslab.bmcb.georgetown.edu/glycomotifdev/GM.",
externalURL2: ""
}
};
// Deep copy the template option, and change the parameters accordingly
var option1 = jQuery.extend(true, {}, demo_option_new);
var option2 = jQuery.extend(true, {}, demo_option_new);
option2.essentials.div_ID = "uniqueID2";
option2.display.orientation = 1;
// Deep copy the viewer itself
// It is especially recommended when 2 or more viewer will be loaded in one HTML page
var hgv1 = jQuery.extend(true, {}, glycanviewer);
var hgv2 = jQuery.extend(true, {}, glycanviewer);
var comp1, comp2;
comp1 = {"mw": "Unknown", "nodes": {"G00012MO": {"type": "Whatever", "name": "G00012MO", "level": 0}, "G00072MO": {"type": "Whatever", "name": "G00072MO", "level": 0}, "Topology": {"alternativeImageURL": "https://glytoucan.org/glycans/G00012MO/image?style=compact&format=png¬ation=cfg", "type": "Whatever", "name": "Topology", "level": 0}}, "root": "Topology", "name": "Topology", "edges": {"Topology": [{"to": "G00012MO", "from": "Topology", "type": "contains"}, {"to": "G00072MO", "from": "Topology", "type": "contains"}]}};
comp2 = {"mw": "Unknown", "nodes": {"G94956AW": {"type": "Whatever", "name": "G94956AW", "level": 0}, "G47548GA": {"type": "Whatever", "name": "G47548GA", "level": 0}, "G06873PC": {"type": "Whatever", "name": "G06873PC", "level": 0}, "fakeroot": {"hidden": true, "type": "Whatever", "name": "fakeroot", "level": 0}}, "root": "fakeroot", "name": "fakeroot", "edges": {"G47548GA": [{"to": "G94956AW", "from": "G47548GA", "type": "contains"}, {"to": "G06873PC", "from": "G47548GA", "type": "contains"}], "fakeroot": [{"to": "G47548GA", "hidden": true, "from": "fakeroot", "type": "contains"}]}};
option1.essentials.component = comp1;
option2.essentials.component = comp2;
hgv1.init(option1);
hgv2.init(option2);
</script>
</body>
</html>