-
Notifications
You must be signed in to change notification settings - Fork 1
/
treelike.html
164 lines (160 loc) · 7.97 KB
/
treelike.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="./lib/jquery-1.9.1.js"></script>
<!-- s cript type="text/javascript" src="./jquery/jquery-ui.js"></script -->
<script type="text/javascript" src="./lib/d3.js"></script>
<script type="text/javascript" src="./lib/science.js/science.v1.js"></script>
<script type="text/javascript" src="./lib/underscore.js"></script>
<script type="text/javascript" src="enlightened-data.js"></script>
<script type="text/javascript" src="./lib/jquery.csv.js"></script>
<script type="text/javascript" src="./treelike.js"></script>
<script type="text/javascript" src="./lib/bootstrap/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="./treelike.css"/>
</head>
<body>
<div class="gp-left gp-col">
<div class="gp-header gp-row" id="file-chooser">
<input type=file id=files name=files[] />
</div>
<div class="body gp-row gp-scroll-y dim-list">
<ul class="gp-listview dim-list displayed-dims"></ul>
<ul class="gp-listview dim-list unused-dims"></ul>
</div>
<div class="gp-footer gp-row">
</div>
</div>
<div class="gp-right gp-col">
<div class="gp-header gp-row gp-scroll-y" id="file-info">
</div>
<div class="body gp-row gp-scroll-y" id="main-pane">
</div>
<div class="gp-footer gp-row gp-scroll-y">
</div>
</div>
<script type="text/javascript">
if (navigator.userAgent.indexOf("IEMobile") >= 0) {
document.body.className += " iemobile";
window.onscroll = function () { window.scroll(0, 0) }
}
var gbo = {}, restoreData; // GLOBAL DATA OBJECT
$(function() {
function whenLoaded(dataSet) {
treelike.collapsibleTree.init(dataSet, '#main-pane');
var browserUI = treelike.browserUI.init(dataSet);
}
function handleFileSelect(evt) {
$('#file-chooser input').remove();
var files = evt.target.files; // FileList object
if (files.length !== 1) { throw new Error("weird number of files"); }
_(files).each(function(file) {
file.basename = file.name.replace(/\.[^\.]+$/, '');
gbo[file.basename] = new treelike.DataSet(
{ file: file, loaded: false });
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
var csv = event.target.result;
csv = csv.replace(/(\r|\n)+/g,'\n'); // does this fix a csv library bug?
var dataSet = gbo[file.basename];
//dataSet.raw = csv; // too big, don't hold on to
dataSet.loaded = true;
var data;
if (csv.slice(0,1) === '{' || csv.slice(0,1) === '[') {
data = JSON.parse(csv);
} else if (csv.slice(0,4) === 'var ') {
eval(csv);
var varname = csv.slice(4,50)
.match(/^([a-zA-Z_][a-zA-Z_0-9]*) ?=/)[1];
data = eval(varname);
} else {
data = $.csv.toObjects(csv, {onParseValue:$.csv.hooks.castToScalar});
}
dataSet.dataPrep(data);
whenLoaded(dataSet);
//return;
//dataSet.array = $.csv.toArrays(csv);
//var output = '<div class="span2">'
var output = '<div>'
output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
//output += (file.type && file.type !== 'text/plain') ? (file.type + '<br/>\n') : '';
output += (file.type && file.type !== 'text/plain') ? (file.type + ', ') : '';
output += file.size + ' bytes';
//output += "<br/>\n";
output += ", ";
output += data.length + ' rows';
output += "<br/>\n";
output += 'fields: ' + dataSet.allDims.join(', ');
//(file.lastModifiedDate && ('(' + file.lastModifiedDate.toLocaleDateString() + ')'));
output += '</div>';
var blurb = $(output);
$('#file-info').append(blurb);
blurb.on('click', function() {
whenLoaded(dataSet) });
};
reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
});
// post the results
}
/*
console.log($.eventReport());
$.eventReport = function(selector, root) {
var s = [];
$(selector || '*', root).addBack().each(function() {
// the following line is the only change
var e = $._data(this, 'events');
if(!e) return;
s.push(this.tagName);
if(this.id) s.push('#', this.id);
if(this.className) s.push('.', this.className.replace(/ +/g, '.'));
for(var p in e) {
var r = e[p],
h = r.length - r.delegateCount;
if(h)
s.push('\n', h, ' ', p, ' handler', h > 1 ? 's' : '');
if(r.delegateCount) {
for(var q = 0; q < r.length; q++)
if(r[q].selector) s.push('\n', p, ' for ', r[q].selector);
}
}
s.push('\n\n');
});
return s.join('');
}
$.fn.eventReport = function(selector) {
return $.eventReport(selector, this);
}
*/
$(document).ready(function() {
if(isAPIAvailable()) {
$('#files').bind('change', handleFileSelect);
}
});
function isAPIAvailable() {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
return true;
} else {
// source: File API availability - http://caniuse.com/#feat=fileapi
// source: <output> availability - http://html5doctor.com/the-output-element/
document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
// 6.0 File API & 13.0 <output>
document.writeln(' - Google Chrome: 13.0 or later<br />');
// 3.6 File API & 6.0 <output>
document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
// 10.0 File API & 10.0 <output>
document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
// ? File API & 5.1 <output>
document.writeln(' - Safari: Not supported<br />');
// ? File API & 9.2 <output>
document.writeln(' - Opera: Not supported');
return false;
}
}
});
</script>
</body>
</html>