This repository has been archived by the owner on Jul 18, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dataview.html
190 lines (160 loc) · 8.16 KB
/
dataview.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
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
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>The Vistorian</title>
<link rel="stylesheet" type="text/css" href="./styles.css"/>
<link rel="stylesheet" type="text/css" href="./dataview_styles.css"/>
<link rel="stylesheet" type="text/css" href="./tablestyle.css"/>
<script src="https://networkcube.github.io/networkcube/core/networkcube.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
<link rel="stylesheet" href="lib/jquery-ui.css">
<script src="lib/jquery-ui.js"></script>
</head>
<body>
<table id="main">
<tr>
<td id="menu">
<a href="index.html"><img width="100%" src="logos/logo2.png"/></a>
<p id="intro">
This is your data view. Below you find a list of visualizations and the
networks currently in your browser.
</p>
<div id="visualizationListDiv">
<h2>Visualizations</h2>
<ul id="visualizationList" class="nointent"></ul>
</div>
<div id="networkListDiv">
<h2>
Networks
<input type="button" class="menuButton hastooltip" value="New" onclick="createNetwork()""
title="Create new network from one or more tables."/>
</h2>
<ul id="networkList" class="nointent"></ul>
</div>
<div id="tableListDiv">
<h2>My Data Tables
<input id="files" type="file" name="file" class="inputfile" value="Upload" name="files[]" data-multiple-caption="{count} files selected" multiple />
<label for="files" class="menuButton hastooltip" title="Upload a new table in CSV file.">
Upload
</label>
</h2>
<ul id="tableList" class="nointent"></ul>
</div>
<div>
<input id="clearCacheButton" type="button" class=" hastooltip" value="Clear temporary cache" title="Removes networks from chache without deleting them. Networks to be visualized must be saved again, before visualizing." onclick="clearCache()"></button>
</div>
</td>
<td id="center">
<div id="noNetworkTables" style="display:block;">
<p>No tables or networks selected. Select a table or network from the list on the left.
</p>
</div>
<div id="networkTables" style="display:none;">
<div id="networkInfoDiv">
<p class="title">Network Name: <input id="networknameInput" type="text" size="80"/>
<input id="saveNetworkButton" class="tableMenuButton" type="button" value="Save" onclick="saveCurrentNetwork(false)"/>
<input id="deleteNetworkButton" class="tableMenuButton" type="button" value="Delete" onclick="deleteCurrentNetwork()"/>
</p>
</div>
<!-- Show Node table here -->
<div id="nodeTableContainer">
<p class="title tableMenu" >Node Table:
<select id="nodetableSelect" onchange="setNodeTable(this)">
<option>---</option>
</select>
</p>
<div id="nodeTableDiv"></div>
</div>
<!-- Show link table here -->
<div id="linkTableContainer">
<p class="title tableMenu">Link Table:
<select id="linktableSelect" onchange="setLinkTable(this)">
<option>---</option>
</select>
</p>
<div id="linkTableDiv"></div>
</div>
<!-- Show location table here -->
<div id="locationTableContainer">
<p class="title tableMenu">Select Location Table:
<select id="locationtableSelect" onchange="setLocationTable(this)">
<option>---</option>
</select>
</p>
<div id="locationTableDiv"></div>
</div>
</div>
<div id="individualTables" style="display:none;">
<div id="tableInfoDiv">
<input id="deleteTableButton" type="button" value="Delete" onclick="deleteCurrentTable()"/>
</p>
</div>
<div id="individualTable"></div>
</div>
<div id="chooseNetworktype" style="display:none;">
<h2>Create new network</h2>
<p>Which of the below form has your data?</p>
<h3>a) Node-Table Format:</h3>
<img src="figures/node-table.png" alt="" class="tablePic" onclick="setNetworkConfig('node')">
<br/>
<br/>
<h3>b) Link-Table Format:</h3>
<img src="figures/link-table.png" alt="" class="tablePic" onclick="setNetworkConfig('link')">
<br/>
<br/>
<h3>c) Node- and Link-Table Format:</h3>
<img src="figures/both-table.png" alt="" class="tablePic" onclick="setNetworkConfig('both')">
</div>
</div>
</tr>
</table>
<div id="footer">
<a class="footer" href="mailto:networkcube@microsoft.com" target="_top">Contact Us</a> |
<a class="footer" href="https://go.microsoft.com/fwlink/?LinkId=521839" title="privacy">Privacy & Cookies</a> |
<a class="footer" href="https://go.microsoft.com/fwlink/?LinkID=760869" title="terms of use">Terms Of Use</a> |
<a class="footer" href="http://go.microsoft.com/fwlink/?LinkId=506942" title="trademarks">Trademarks</a>
© 2016 Microsoft <img src="logos/logo-microsoft.png" height="20px"> © 2016 INRIA <img src="logos/logo-inria.png" height="20px">
</div>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<script src="./lib/jstorage.js"></script>
<script src="./classes/storage.js"></script>
<script src="./classes/utils.js"></script>
<script src="./classes/vistorian.js"></script>
<script type="text/javascript" src="dataview.js"></script>
<script>
// Hack to make upload button look nice:
// from: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
'use strict';
$(document).tooltip();
;( function ( document, window, index )
{
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
console.log('input', input)
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener( 'change', function( e )
{
console.log('>> change')
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = e.target.value.split( '\\' ).pop();
console.log('fileName', fileName)
if( fileName )
label.querySelector( 'span' ).innerHTML = fileName;
else
label.innerHTML = labelVal;
});
// Firefox bug fix
input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
});
}( document, window, 0 ));
</script>
</body>