xiNET_website/examples.php at master · colin-combe/xiNET_website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <?php $pageName = "Examples";include("head.php");?>
        <?php include("xiNET_scripts.php");?>
    </head>
    <body>
        <!-- Sidebar -->
        <?php include("navigation.php");?>
        <!-- Slidey panels -->
        <?php include("slideyPanels.php"); ?>
        <!-- Main -->
        <div id="main">
            <div class="container">
                <div class="page-header">Example:&nbsp;
                    <select class="btn btn-1 btn-1a" id="dataSets"  onchange="loadData();" >
<!--
                        <option value="TFIIF">TFIIF</option>
-->
                        <option selected value="PolII">PolII</option>
                        <option value="NPC">NPC</option>
						<option value="PP2A">PP2A</option>
                    </select>
                    <div style='float:right'>
<!--
                        <button class="btn btn-1 btn-1a network-control resetzoom" onclick="xlv.reset();">
                            Reset
                        </button>
-->
                        <button class="btn btn-1 btn-1a network-control" onclick="xlv.exportSVG();">Export SVG</button>
                        <label class="btn">
                                Legend
                                <input onclick="toggleLegendPanel()" type="checkbox">
                        </label>
                        <label class="btn">
                                Details
                                <input onclick="toggleInfoPanel()" type="checkbox">
                        </label>
                        <label class="btn">
                                Help
                                <input id="help" onclick="toggleHelpPanel()" type="checkbox">
                        </label>
                    </div>
                </div>
            </div>
            <div class="long-citation" id="citation"></div>
            <div id="networkContainer"></div>
            <?php include("filterBar.php"); ?>
        </div> <!-- MAIN -->

        <script type="text/javascript">
        //<![CDATA[
            var config = [
                //~ {//TFIIF
                    //~ file:"./data/TFIIF.csv",
                    //~ cite:"<p>Data from <a href='http://www.nature.com/emboj/journal/v29/n4/full/emboj2009401a.html' target='_blank'>Chen ZA, Jawhari A, Fischer L, Buchen C, Tahir S, Kamenski T, Rasmussen M, Lariviere L, Bukowski-Wills J-C, Nilges M, Cramer P &amp; Rappsilber J (2010) Architecture of the RNA polymerase II–TFIIF complex revealed by cross-linking and mass spectrometry. The EMBO Journal 29: 717–726</a>.</p>"
                //~ },
                {//PolII
                    file:"./data/PolII.csv",
                    cite:"<p>Data from <a href='http://www.nature.com/emboj/journal/v29/n4/full/emboj2009401a.html' target='_blank'>Chen ZA, Jawhari A, Fischer L, Buchen C, Tahir S, Kamenski T, Rasmussen M, Lariviere L, Bukowski-Wills J-C, Nilges M, Cramer P &amp; Rappsilber J (2010) Architecture of the RNA polymerase II–TFIIF complex revealed by cross-linking and mass spectrometry. The EMBO Journal 29: 717–726</a>.</p>",
                    customAnnot:"./data/TFIIF_annot.csv"
                },
                {//NPC
                    file:"./data/NPC.csv",
                    cite:"<p>Data from <a href='http://www.sciencedirect.com/science/article/pii/S0092867413014165' target='_blank'>Bui, K. H., von Appen, A., DiGuilio, A. L., Ori, A., Sparks, L., Mackmull, M.-T., Bock, T., Hagen, W., Andrés-Pons, A., Glavy, J. S., and Beck, M. (2013) Integrated Structural Analysis of the Human Nuclear Pore Complex Scaffold. Cell 155, 1233–1243</a>.</p>"
                },
                {//PP2A
                    file:"./data/PP2A.csv",
                    cite:"<p>Data from <a href='http://www.sciencemag.org/content/337/6100/1348' target='_blank'>Herzog, F., Kahraman, A., Boehringer, D., Mak, R., Bracher, A., Walzthoeni, T., Leitner, A., Beck, M., Hartl, F.-U., Ban, N., Malmstrom, L., and Aebersold, R. (2012) Structural Probing of a Protein Phosphatase 2A Network by Chemical Cross-Linking and Mass Spectrometry. Science 337, 1348–1352</a>.</p>"
                },
            ];

            function loadData(){
                var dataSetsSelect = document.getElementById('dataSets');
                var path = config[dataSetsSelect.selectedIndex].file;
                document.getElementById('citation').innerHTML = config[dataSetsSelect.selectedIndex].cite;

                if (config[dataSetsSelect.selectedIndex].customAnnot){
                    d3.text(config[dataSetsSelect.selectedIndex].customAnnot, "text/csv", function(annot) {
                        d3.text(path, "text/csv", function(text) {
                            xlv.clear();
                            xlv.readCSV(text, null, annot);
                            initSlider();
                        });
                    });
                }
                else {
                    d3.text(path, "text/csv", function(text) {
                        xlv.clear();
                        xlv.readCSV(text);
                        initSlider();
                    });
                }
            }

            //~ window.addEventListener('load', function() {
                var targetDiv = document.getElementById('networkContainer');
                var messageDiv = document.getElementById('networkCaption');
                xlv = new xiNET.Controller(targetDiv);
                xlv.setMessageElement(messageDiv);
                loadData();
                changeAnnotations();
                xlv.showSelfLinks(document.getElementById('selfLinks').checked);
                xlv.showAmbig(document.getElementById('ambig').checked);
            //~ }, false);

                 function changeAnnotations(){
                    var annotationSelect = document.getElementById('annotationsSelect');
                    xlv.setAnnotations(annotationSelect.options[annotationSelect.selectedIndex].value);
                 };
                 function initSlider(){
                                if (xlv.scores === null){
                            d3.select('#scoreSlider').style('display', 'none');
                        }
                        else {
                            document.getElementById('scoreLabel1').innerHTML = "Score:" + getMinScore();
                            document.getElementById('scoreLabel2').innerHTML = getMaxScore();
                            sliderChanged();
                            d3.select('#scoreSlider').style('display', 'inline-block');
                        }
                  };


                 //]]>
        </script>
    </body>
</html>