-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathdata-browser.html
More file actions
266 lines (232 loc) · 12.7 KB
/
Copy pathdata-browser.html
File metadata and controls
266 lines (232 loc) · 12.7 KB
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html>
<head>
<title>EteRNA Medicine Browser Concept</title>
<link rel="stylesheet" type="text/css" href="css/jquery.layout-default.css"> <!-- 2009/03/04 -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"> <!-- ver 1.11.4 -->
<!-- Can't get to play with UI Layout
<link rel="stylesheet" type="text/css" href="css/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.multiselect.filter.css" />
-->
<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css" />
<link rel="stylesheet" type="text/css" href="css/eterna.min.css" />
<link rel="stylesheet" type="text/css" href="css/browser.css" />
<script type="text/javascript" src="js/lib/jquery-1.12.0.js"></script> <!-- ver 1.12.0 -->
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script> <!-- ver 1.11.4 -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-90868924-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="selections_panel" class="ui-layout-west no-scrollbar">
<div id="accordion-west">
<h3><a id="tab-panel-west-1" href="#" style="display:none">Puzzle Selection</a></h3>
<div>
<div class="trans-panel rounded-5 col-options-panel">
<div class="trans-panel-bg"></div>
<ul id="puzzle-list" class="ui-sortable col-option-holder"></ul>
<div class="clearer"></div>
<br/>
<div class="green-button clickable centered rounded-5 left-panel-btn" id="column-select-btn" style="width: 120px">Select Columns</div>
<!--
<div class="purple-button clickable centered rounded-5 left-panel-btn" id="lab-reset-btn">Clear all</div>
-->
</div>
</div>
<h3><a id="tab-panel-west-2" href="#" style="display:none">Column Selection</a></h3>
<div>
<!-- columns to download, copied from below -->
<div class="trans-panel rounded-5 col-options-panel">
<div class="trans-panel-bg"></div>
<span style="margin-left: 20px;">
<!--
<div class="purple-button clickable centered rounded-5 left-panel-btn" id="filter-reset-btn" style="width: 100px;">Clear Filter</div>
-->
</span>
<div class="clearer" style="margin-bottom: 5px;"></div>
<div class="clearer" style="margin-bottom: 5px;"></div>
<ul id="column-info" class="ui-sortable col-option-holder"></ul>
<div class="clearer"></div>
<br/>
<div class="green-button clickable centered rounded-5 left-panel-btn" id="load-data-btn" style="width: 120px">Load Data</div>
</div>
<div class="clearer"></div>
</div>
<h3><a id="tab-panel-west-3" href="#" style="display:none">Filter/Sort</a></h3>
<div>
<!-- column options, copied from <block> -->
<div class="trans-panel rounded-5 col-options-panel">
<div class="trans-panel-bg"></div>
<span id="tab-panel-west-3-header" style="margin-left: 20px;">
<label>
<input type="checkbox" id="regex-toggle" style="width:25px;"/>
<a href="https://en.wikipedia.org/wiki/Regular_expression" target="_blank"><i>RE</i></a> search
</label>
<!--
<div class="purple-button clickable centered rounded-5 left-panel-btn" id="filter-reset-btn" style="width: 100px;">Clear Filters</div>
-->
</span>
<ul id="displayed-info" class="ui-sortable col-option-holder"></ul>
<div class="clearer" style="margin-bottom: 5px;"></div>
<!--
<div class="purple-button clickable centered rounded-5 left-panel-btn" id="sort-reset-btn" style="width: 100px;">Clear Sort</div>
-->
<div class="blue-button clickable centered rounded-5 left-panel-btn" id="sele-all-btn" style="width: 100px;">Show All</div>
<div class="blue-button clickable centered rounded-5 left-panel-btn" id="sele-none-btn" style="width: 100px;">Hide All</div>
<div class="purple-button clickable centered rounded-5 left-panel-btn" id="filter-reset-btn" style="width: 100px;">Clear Filters</div>
<div class="clearer" style="margin-bottom: 5px;"></div>
</div>
<div class="clearer"></div>
</div>
<!--
<h3><a id="tab-panel-west-4" href="#" style="display:none">Advanced Sorting</a></h3>
<div id="tab-panel-west-4-text" style="display:none">
<p>There are two distinct methods of sorting. One is to sort by column values, over one or more columns. This meted of sorting can be controlled either here or in the list view itself.</p>
<p>The second type of sorting is by similarity (or dissimilarity) to a selected design. The Flash browser implements this for one special case -- similarity in sequence, measured with the Manhatten block metric.</p>
<p>The new browser will generalize this to multiple columns at once, using metrics appropriate to each column.</p>
<p>It will also allow the player to define dissimilarity columns. For example, a player might ask to see designs that are similar in predicted structure but dissimilar in the Eterna sub-scores at the top of the list. </p>
</div>
-->
</div>
</div>
<div id="concept-center" class="ui-layout-center">
<div id="loading-dialog"></div>
<div id="lab-red-header" class="red-header" style="font-size:20px; height:32px; margin-bottom:10px;">
<div id="lab-title" style="float:left; margin:5px;"></div>
<div id="table-button-container" style="float:right;">
<div class="clearer"></div>
</div>
</div>
<table id="center-table" style="color:#fff;">
<thead id="table-thead"></thead>
</table>
<h1 style="text-align:center;">
<!--
Loading Query...
-->
</h1>
</div>
<div id="tabs-east" class="ui-layout-east no-padding no-scrollbar">
<ul class="allow-overflow">
<li><a id="tab-panel-east-1-text" href="#tab-panel-east-1"></a></li> <!-- Add text later -->
<li><a id="tab-panel-east-2-text" href="#tab-panel-east-2"></a></li>
</ul>
<div class="ui-layout-content ui-widget-content no-scrollbar" style="border-top: 0;">
<div id="tab-panel-east-1" class="full-height no-padding add-scrollbar" style="background-color:#000030; color:#ccc;"></div>
<div id="tab-panel-east-2" class="full-height no-padding add-scrollbar" style="background-color:#000030; color:#ccc;"></div>
</div>
</div>
<!-- JS loading order matters -->
<script type="text/javascript" src="js/lib/layout/jquery.layout-latest.js"></script> <!-- ver 1.4.4 -->
<script type="text/javascript" src="js/lib/layout/jquery.layout.resizeTabLayout.js"></script> <!-- ver 1.3 -->
<script type="text/javascript" src="js/lib/layout/jquery.layout.resizePaneAccordions.min.js"></script> <!-- ver 1.2 -->
<!-- <script type="text/javascript" src="js/lib/dataTables/jquery.dataTables.min.js"></script> !!! temp; replaced with below for debugging --> <!-- ver 1.10.9 -->
<script type="text/javascript" src="js/lib/dataTables/jquery.dataTables.min.js"></script> <!-- ver 1.10.10 -->
<script type="text/javascript" src="js/lib/dataTables/jquery.dataTables.buttons.min.js"></script> <!-- ver 1.0.3 -->
<script type="text/javascript" src="js/lib/dataTables/jquery.dataTables.colReorder.min.js"></script> <!-- ver 1.2.0 -->
<script type="text/javascript" src="js/lib/dataTables/jquery.dataTables.select.min.js"></script> <!-- ver 1.0.1 -->
<script type="text/javascript" src="js/lib/dataTables/jquery.dataTables.scroller.min.js"></script> <!-- ver 1.3.0 -->
<!-- Can't get to play with UI Layout
<script type="text/javascript" src="js/lib/multiselect/jquery.multiselect.js"></script> <!- ver 1.0.1 ->
<script type="text/javascript" src="js/lib/multiselect/jquery.multiselect.filter.js"></script> <!- ver 1.3.0 ->
-->
<script type="text/javascript" src="js/lib/jquery.contextMenu.js"></script> <!-- ver ??? -->
<script type="text/javascript" src="js/secstr/svg.js"></script>
<script type="text/javascript" src="js/secstr/render_rna.js"></script>
<script type="text/javascript" src="js/secstr/main.js"></script>
<script type="text/javascript" src="js/leftPanel.js"></script>
<script type="text/javascript" src="js/columnSelection.js"></script>
<script type="text/javascript" src="js/centerPanel.js"></script>
<script type="text/javascript" src="js/rightPanel.js"></script>
<script type="text/javascript" src="js/contextMenu.js"></script>
<script type="text/javascript" src="js/demo_new.js"></script>
<script type="text/javascript">
// global variables
var gOptions= {}; // options, taken from the URL query string
var table; // The DataTables object
// gTableData is the primary data source, as received from the database query. It is dynamically restructured by the DataTables Reorder extension,
// whenever the user changes the column ordering.
// Once the DataTable is initialized, gTableData needs to be treated as read-only.
var gTableData = [];
// gDataColumnIndex acts as a hash table of column names to gTableData's column indices.
// It needs to be updated by application code (updateColOrderOpt2Table() and ?) whenever gTableData columns are reordered.
var gDataColumnIndex = {}; // column name -> gTableData[] column index )
var pageLayout; // The UI Layout object
var gaColumns = []; // array of column records retrieved from server
var gColumnsRowIndex = {}; // data column name -> index into rows of gaColumns
var gColumnsColumnIndex = {}; // column column name -> index into columns of gaColumns
var columnNameIndex = -1;
var gaDownloadedColumns = []; // Rename to gaDownloadedColumnNames
var gaDownloadedColumnIndex = {}; // Mapping of downloaded column names to original order
var gaColumnsToDownload = [];
var gaColumnSpecification = [];
var gAvailableColumns = [];
/* (It's not clear how automatically generating percentages fits into the longer term plan)
col_groups = []; // Partially implemented? Siqi used for calculating percentages
*/
var gProjectIDs = {}; // The projects encompassed by the selected puzzles
var gaPuzzles = [];
var gPuzzleIndex = {};
var gaSelectedPuzzles = [];
var shape_data = [], max_len = 0, n_fields = 0;
var puzzle_set_url;
var tableNotLoaded = true;
navigator.userAgent += " (gzip)"; // Needed for fusion table API to compress responses
$(document).ready(function() {
resizePaneAccordions = $.layout.callbacks.resizePaneAccordions;
resizeTabLayout = $.layout.callbacks.resizeTabLayout;
// OUTER/PAGE LAYOUT
pageLayout = $("body").layout({ // DO NOT use "var pageLayout" here
initClosed: true,
"north": {
"resizable": false,
"slidable": false,
"togglerLength_open": 0,
"spacing_open": 0,
},
"west": {
"size": 450,
"onresize": resizePaneAccordions, // west accordion a child of pane,
resizerCursor: "ew-resize"
},
"east": {
"size": 450,
"onresize": resize2DStructure, // east accordion nested inside a tab-panel
resizerCursor: "ew-resize"
},
// "east__initClosed": true,
"center": {
"closable": false,
"resizable": true,
"spacing_open": 0,
"onresize": resizeCenterTable, // tabs/panels are wrapped with an inner-layout
}
});
// TABS INSIDE EAST-PANE
pageLayout.panes.east.tabs({ "activate": resizePaneAccordions }); // resize tab2-accordion when tab is activated
pageLayout.sizeContent("east"); // resize pane-content-elements after creating east-tabs
// INIT ALL ACCORDIONS - EVEN THOSE NOT VISIBLE
$("#accordion-west").accordion({ "heightStyle": "fill" });
$("#accordion-east").accordion({ "heightStyle": "fill" });
// display panel accordion names that were set to hidden in the HTML
$("[id^='tab-panel-west']").css( "display", "block" );
$("[id^='tab-panel-east']").css( "display", "block" );
// show loading animation
$("#loading-dialog").dialog({"modal": true});
// remove extra borders and resize it square
$(".ui-dialog > .ui-resizable-handle").remove();
// have to be after dialog() call
$("#loading-dialog").css({"min-height": 0, "padding-top": 0});
// Add the title to the right tabs. (Simply hiding them before initialization messed UI Layout up)
$("#tab-panel-east-1-text").text("2D Structure");
$("#tab-panel-east-2-text").text("Switch Graph");
initAction();
});
</script>
</body>
</html>