Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / d6e88e06e5fe70c535c84782733e11a148557af1 / . / asterix-examples / src / main / resources / black-cherry / cherry.tpl
blob: 7989daebed6df2866f69470bd6a5fe6bda34c6c9 [file] [log] [blame]
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]1<!DOCTYPE html>
2<html style="width: 100%; height: 100%;">
3 <head>
4 <title>ASTERIX Demo</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
genia.likes.science@gmail.comd42b4022013-08-09 05:05:23 -0700[diff] [blame]7 <link rel="shortcut icon" type="image/png" href="static/img/hyrax.png">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]8
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]9 <!-- Bootstrap & jQuery Styles -->
10 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
11 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]12
Eugenia Gabrielovad6e88e02013-10-19 08:26:54 -0700[diff] [blame^]13 <!-- Bootstrap Javascript -->
14 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
15
16 <script src="http://code.jquery.com/jquery.min.js"></script>
17 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
18 <script src="static/js/bootstrap.min.js"></script>
19 <script src="static/js/asterix-sdk-stable.js"></script>
20 <script src="static/js/rainbowvis.js"></script>
21 <script src="static/js/cherry.js"></script>
22
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]23 <style type="text/css">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]24
25 #map_canvas img {
26 max-width: none;
27 }
28
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]29 .panel-primary {
30 border-color: #273f93;
31 }
32
33 .panel-primary .panel-heading {
34 color: white;
35 background-color: #273f93;
36 border-color: #273f93;
37 }
38
39 #start-date, #end-date {
40 position: relative; z-index:100;
41 }
42
43 #keyword-textbox, #location-text-box {
44 width: 100%;
45 }
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]46 </style>
47 </head>
48 <body style="width: 100%; height: 100%;">
49
50 <!-- Nav -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]51 <div class="navbar navbar-default navbar-static-top">
52 <div class="container">
53 <div class="navbar-header">
54 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
55 <span class="icon-bar"></span>
56 <span class="icon-bar"></span>
57 <span class="icon-bar"></span>
58 </button>
59 <a class="navbar-brand" href="#" style="padding: 0.25em;">
60 <img src="static/img/finalasterixlogo.png">
61 </a>
62 </div>
63 <div class="navbar-collapse collapse">
64 <ul class="nav navbar-nav">
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]65 <li id="about-active"><a id="about-mode" href="#">About</a></li>
66 <li id="explore-active" class="active"><a id="explore-mode" href="#">Explore</a></li>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]67 <li id="review-active"><a id="review-mode" href="#">Review</a></li>
68 </ul>
69 </div>
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]70 </div>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]71 </div><!-- /Nav -->
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]72
73 <!-- Search Box -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]74 <div class="container">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]75
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]76 <div class="row" id="r1">
77 <div class="col-md-5">
78 <div class="container well" id="explore-well">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]79
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]80 <!-- Query Builder -->
81 <div class="panel panel-primary">
82 <div class="panel-heading"><h4><b>Query Builder</b></h4></div>
83
84 <!-- List group -->
85 <ul class="list-group">
86
87 <!-- Search Keyword -->
88 <li class="list-group-item">
89 <h4 class="list-group-item-heading">Keyword</h4>
90 <input type="text" id="keyword-textbox" placeholder="Enter a keyword, e.g., verizon">
91 </li>
92
93 <!-- Location -->
94 <li class="list-group-item">
95 <h4 class="list-group-item-heading">Location</h4>
96 <input class="textbox" type="text" id="location-text-box">
97 <div class="btn-group" data-toggle="buttons">
98 <label class="btn btn-default">
99 <input type="radio" id="location-button"> Location
100 </label>
101 <label class="btn btn-default">
102 <input type="radio" id="selection-button"> Selection
103 </label>
104 </div>
105 </li>
106
107 <!-- Date Range -->
108 <li class="list-group-item">
109 <h4 class="list-group-item-heading">Limit Date Range</h4>
110 <input type="text" class="textbox" id="start-date"><span class="badge">Start Date</span><br/>
111 <input type="text" class="textbox" id="end-date"><span class="badge">End Date</span>
112 </li>
113
114 <!-- Results Resolution -->
115 <li class="list-group-item">
116 <h4 class="list-group-item-heading">Result Group Size</h4>
117 <div class="grid-slider" id="grid-lat-slider"></div>
118 <div class="control-label">Latitude: <span id="gridlat">3.0</span></div>
119
120 <div class="grid-slider" id="grid-lng-slider"></div>
121 <div class="control-label">Longitude: <span id="gridlng">3.0</span></div>
122 </li>
123
124 <!-- Submission Buttons -->
125 <li class="list-group-item">
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]126 <button class="btn btn-primary" type="button" id="submit-button">Submit</button>
127 <button class="btn btn-primary" type="button" id="clear-button">Clear</button>
128 <button class="btn btn-primary" type="button" id="show-query-button">Show Query</button><br/>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]129 <input type="checkbox" value="Submit Asynchronously" name="async" id="asbox" />
130 Submit asynchronously?
131 </li>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]132 </ul>
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]133 </div>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]134 </div>
135
136 <div class="container well" id="review-well" style="display:none;">
137
138 <!-- Tweetbooks -->
139 <div class="panel panel-default">
140 <div class="panel-heading">
141 <h4 class="panel-title">Tweetbooks</h4>
142 </div>
143 <div class="panel-body">
144 <!-- Box to add a new Tweetbook -->
145 <div class="input-group">
146 <input type="text" class="form-control" id="new-tweetbook-entry" placeholder="Name a new tweetbook">
147 <span class="input-group-btn">
148 <button type="button" class="btn" id="new-tweetbook-button">Add</button>
149 </span>
genia.likes.science@gmail.com1400a752013-10-04 04:59:12 -0700[diff] [blame]150 </div>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]151 <hr/>
152
153 <!-- List to add existing tweetbooks -->
154 <div class="btn-group-vertical" id="review-tweetbook-titles"></div>
155 </div>
156 </div>
157
158 <!-- Background queries -->
159 <div class="panel panel-default">
160 <div class="panel-heading">
161 <h4 class="panel-title">Background Queries</h4>
162 </div>
163 <div class="panel-body">
164 <!-- Add existing background queries to list -->
165 <div class="btn-group-vertical" id="review-tweetbook-titles"></div>
166 <div id="async-handle-controls"></div>
genia.likes.science@gmail.com1400a752013-10-04 04:59:12 -0700[diff] [blame]167 </div>
168 </div>
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]169 </div>
Eugenia Gabrielovadbd50a42013-10-19 00:30:27 -0700[diff] [blame]170
171 <!-- Div to hold success/error messages -->
172 <div id="report-message"></div>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]173 </div>
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]174
Eugenia Gabrielovad6e88e02013-10-19 08:26:54 -0700[diff] [blame^]175 <div class="col-md-7"
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]176 <!-- Map Container -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]177 <div class="container well" id="right-col">
Eugenia Gabrielovad07556a2013-10-11 03:45:06 -0700[diff] [blame]178 <div id="map_canvas" style="max-width: 100%; height: auto;"></div>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]179 </div>
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]180
181 <!-- Legend Container -->
Eugenia Gabrielovad6e88e02013-10-19 08:26:54 -0700[diff] [blame^]182 <div id="rainbow-legend-container" class="container well" style="display:none;">
183
184 <div class="row">
185 <div class="col-md-5 col-md-offset-2" style="text-align: center;"># Tweets</div>
186 </div>
187
188 <div class="row">
189 <div id="legend-min" class="col-md-2" style="text-align:right;"></div>
190 <div id="legend-gradient" class="col-md-5" style="text-align: center;"></div>
191 <div id="legend-max" class="col-md-2"></div>
192 <div class="col-md-3">
193 <button id="windows-off-btn" class="btn btn-default">
194 Close Counts
195 </button>
196 </div>
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]197 </div>
198 </div>
199
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]200 </div>
201 </div>
202
203 <!-- Modals and Dialogs -->
204 <div class="row">
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]205
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]206 <!-- On Drilldown, here is a nice modal -->
207 <div class="modal fade" id="drilldown_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
208 <div class="modal-dialog">
209 <div class="modal-content">
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]210 <div class="modal-body" id="drilldown_modal_body">
211
212 <!-- Tweet -->
Eugenia Gabrielovad07556a2013-10-11 03:45:06 -0700[diff] [blame]213 <div id="modal-body-tweet" class="well well-sm"></div>
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]214
215 <!-- Existing comments about this tweet -->
216 <!-- Create new comment -->
Eugenia Gabrielovad07556a2013-10-11 03:45:06 -0700[diff] [blame]217 <div class="panel panel-default" id="modal-existing-note">
218 <div class="panel-heading">About this Tweetbook</div>
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]219 <div class="panel-body" id="modal-body-notes-holder">
220
Eugenia Gabrielovad07556a2013-10-11 03:45:06 -0700[diff] [blame]221 <div class="input-group">
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]222 <input type="text" class="form-control" id="modal-body-tweet-note">
223 <span class="input-group-btn">
224 <button class="btn btn-default" id="modal-body-trash-icon">
225 <span class="glyphicon glyphicon-trash"></span>
226 </button>
227 </span>
228 <span class="badge" id="modal-current-tweetbook"></span>
229 </div>
230
231 </div>
232 </div>
233
234 <!-- Create new comment -->
Eugenia Gabrielovad07556a2013-10-11 03:45:06 -0700[diff] [blame]235 <div class="panel panel-default" id="modal-save-tweet-panel">
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]236 <div class="panel-heading">Save to tweetbook</div>
237 <div class="panel-body" id="modal-save-body">
238
239 <div class="input-group">
240 <span class="input-group-addon">Note</span>
241 <input type="text" class="form-control" id="modal-body-add-note" placeholder="Add a note about this tweet">
242 </div>
243
244 <div class="input-group">
245 <span class="input-group-addon">Add to</span>
246 <input type="text" class="form-control" id="modal-body-add-to" placeholder="Add it to a Tweetbook">
247 </div><br/>
248
249 <!-- Comment on tweet to save -->
250 <button type="button" class="btn btn-default" id="save-comment-tweetbook-modal">Save</button>
Eugenia Gabrielovad07556a2013-10-11 03:45:06 -0700[diff] [blame]251
252 <div id="modal-body-message-holder"></div>
253
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]254 </div>
255 </div>
256 </div>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]257 <div class="modal-footer">
258 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
259 </div>
260 </div>
261 </div>
262 </div><!-- Modal -->
263
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]264 </div><!-- Row -->
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]265
266 <!-- About Row -->
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]267 <div class="row" id="aboutr" style="display:none;">
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]268 <div class="container">
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]269
270 <!-- Welcome Message -->
271 <div class="row">
272
273 <!-- Welcome Message -->
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]274 <p>Welcome to the top-level page of the mysteriously named Black Cherry Demo of AsterixDB. The purpose of this demo is to illustrate how a "cool application" can be built using the JavaScript SDK of AsterixDB and to exercise all of the AsterixDB HTTP APIs. If you are building an app of your own, reading the code for this app is a great way to get acquainted with what you'll need to know.</p>
275
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]276 <p>In this demo, which is based on spatial analysis of Tweets (it is 2013, afterall), you will see how to formulate aggregate queries and drill-down queries using the query door of the AsterixDB API. You will see how to do this either synchronously or asynchronously (for larger queries whose results may take a while to cook). You will also see how to create and drop datasets (to manage Tweetbooks, notebooks with user commentary on Tweets) and how to perform inserts and deletes (to add/remove Tweetbook entries). Let's walk through the demo.</p>
277
278 <hr/>
279
280 <div style="margin-bottom: 2em; text-align: center;">
281 <img src="static/img/Tutorial1.png" style="max-width:100%;">
282 </div><hr/>
283
284 <!-- Tutorial Part 2: Location Search -->
285 <div style="margin-bottom: 2em; text-align: center;">
286 <img src="static/img/Tutorial2.png" style="max-width:100%;">
287 </div><hr/>
288
289 <!-- Tutorial Part 3: Search Results, Drilling Down, Saving Comments -->
290 <div style="margin-bottom: 2em; text-align: center;">
Eugenia Gabrielovad6e88e02013-10-19 08:26:54 -0700[diff] [blame^]291 <img src="static/img/Tutorial3.png" style="max-width:100%;">
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]292 </div><hr/>
293
294 <!-- Tutorial Part 4: Review Mode -->
295 <div style="margin-bottom: 2em; text-align: center;">
296 <img src="static/img/Tutorial4.png" style="max-width:100%;">
297 </div>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]298 </div>
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]299
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]300
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]301 </div>
302 </div><!-- /About -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]303
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]304 </div><!-- container -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]305 </body>
306</html>