Project

General

Profile

1
<%@ page language="java"%>
2
<%
3
/**
4
 * 
5
 * '$RCSfile$'
6
 * Copyright: 2008 Regents of the University of California and the
7
 *             National Center for Ecological Analysis and Synthesis
8
 *    '$Author: leinfelder $'
9
 *      '$Date: 2011-01-04 11:46:10 -0800 (Tue, 04 Jan 2011) $'
10
 * '$Revision: 5765 $'
11
 * 
12
 * This program is free software; you can redistribute it and/or modify
13
 * it under the terms of the GNU General Public License as published by
14
 * the Free Software Foundation; either version 2 of the License, or
15
 * (at your option) any later version.
16
 * 
17
 * This program is distributed in the hope that it will be useful,
18
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
19
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
20
 * GNU General Public License for more details.
21
     
22
 * You should have received a copy of the GNU General Public License
23
 * along with this program; if not, write to the Free Software
24
 *  Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
25
 */  
26
%>
27

    
28
<%@ include file="../../common/common-settings.jsp"%>
29
<%@ include file="../../common/configure-check.jsp"%>
30

    
31
<html>
32
<head>
33
<title>Semantic search</title>
34
<link rel="stylesheet" type="text/css" href="<%=STYLE_SKINS_URL%>/semtools/semtools.css">
35
<link rel="stylesheet" type="text/css" href="<%=STYLE_COMMON_URL%>/jquery/jqueryui/css/smoothness/jquery-ui-1.8.6.custom.css">
36

    
37
<script language="javascript" type="text/javascript" src="<%=STYLE_COMMON_URL%>/jquery/jquery.js"></script>
38
<script language="javascript" type="text/javascript" src="<%=STYLE_COMMON_URL%>/jquery/jsTree/_lib/jquery.cookie.js"></script>
39
<script language="javascript" type="text/javascript" src="<%=STYLE_COMMON_URL%>/jquery/jsTree/jquery.jstree.js"></script>
40
<script language="javascript" type="text/javascript" src="<%=STYLE_COMMON_URL%>/jquery/jqueryui/js/jquery-ui-1.8.6.custom.min.js"></script>
41
<script language="javascript" type="text/javascript" src="<%=STYLE_COMMON_URL%>/jquery/busy/jquery.busy.js"></script>
42

    
43
<script language="javascript" type="text/javascript" src="<%=STYLE_SKINS_URL%>/semtools/search.js"></script>
44
<script language="javascript" type="text/javascript" src="<%=STYLE_SKINS_URL%>/semtools/semtools.js"></script>
45
<script language="javascript" type="text/javascript" src="<%=STYLE_COMMON_URL%>/branding.js"></script>
46

    
47
<script language="Javascript" type="text/JavaScript"><!--
48
function populateActiveDomain(divId, class) {
49
	// collect the filtering values we have so far
50
	// these are hidden input fields in the form for holding the selected values
51
	var entity = $("#activeEntitiesValue").val() ? $("#activeEntitiesValue").val() : "";
52
	var characteristic = $("#activeCharacteristicsValue").val() ? $("#activeCharacteristicsValue").val() : "";
53
	var protocol = $("#activeProtocolsValue").val() ? $("#activeProtocolsValue").val() : "";
54
	var measurement = $("#activeMeasurementsValue").val() ? $("#activeMeasurementsValue").val() : "";
55
	
56
	// TODO: remember the selected value for this when filtering by active domain
57
	var selectedNode = $("#" + divId).jstree("get_selected", $("#" + divId));
58
	var selectedNodeId = $(selectedNode).attr("id");
59
	//alert(divId + " selected node: " + selectedNodeId);
60
	
61
	// load the tree for the given div, passing in the other filtered values
62
	$("#" + divId).load(
63
		"<%=SERVLET_URL%>", 
64
		{
65
			'action': "getactivedomain",
66
			'class': class,
67
			'entity': entity,
68
			'characteristic': characteristic,
69
			'protocol': protocol,
70
			'measurement': measurement
71
		},
72
		// call back function when loading finishes
73
		function(response, status, xhr) {
74
			//alert("callback for: " + divId + " selected node: " + selectedNodeId);
75
			// error
76
			if (status == "error") {
77
				var msg = "Sorry but there was an error: ";
78
				$("#error").html(msg + xhr.status + " " + xhr.statusText);
79
			}
80
 
81
			// make it a js tree
82
			$(function () {
83
				$("#" + divId)
84
					//bind calls here
85
					.jstree({
86
						"ui" : {
87
							"select_limit" : 1,
88
							"select_multiple_modifier" : "alt",
89
							"selected_parent_close" : "select_parent"//,
90
							//"initially_select" : [ selectedNodeId ]
91
						},
92
						"themes" : {
93
							"theme" : "default",
94
							"dots" : true,
95
							"icons" : false
96
						},
97
						//"core" : { "initially_open" : [ selectedNodeId ] },
98
						"search" : { "case_insensitive" : true },
99
						//"cookies" : { 
100
						//		"save_opened" : "jstree_open_" + divId,
101
						//		"save_selected" : "jstree_select_" + divId,
102
						//},
103
						"plugins" : [ 
104
							"themes", 
105
							"html_data", 
106
							"ui", 
107
							//"cookies", 
108
							"search" ]
109
					});
110
			});
111

    
112
			// enable searching on it
113
			$("#" + divId + "Search").keyup(
114
				function () {
115
					var searchTerm = $("#" + divId + "Search").val();
116
					if (searchTerm.length >= 3) {
117
						// search
118
						$("#" + divId).jstree("search", searchTerm);
119
						// now prune
120
						prune(divId, "jstree-search");
121
						// is it an exact match?
122
						checkExactMatch(divId, searchTerm, "jstree-search");
123
					}
124
				});
125
			
126
			// toggle the active domain prune
127
			$("#" + divId + "Only").click(function() {
128
				doActiveDomain(divId);
129
			});	
130

    
131
			// actually prune if we should
132
			doActiveDomain(divId);
133

    
134
			// open first node always
135
			$("#" + divId).jstree("open_node", $("#" + divId).children("ul").first().children("li").first());
136
			
137
			// open to the node to last selected
138
			var nodePath = $("#" + divId).jstree("get_path", $(selectedNode));
139
			if (nodePath) {
140
				for (var index = 0; index < nodePath.length; index++) {
141
					$("#" + divId).jstree("open_node", $("#" + nodePath[index]));
142
				}
143
				// select the original node
144
				$("#" + divId).jstree("select_node", $(selectedNode), false);
145
				$("#" + divId).jstree("refresh", $(selectedNode));
146
				// TODO: scroll to selected node. 
147
				// This is supposed to be part of jsTree 1.0-rc2 but appears to be broken
148
			}
149
			
150
		});
151
}
152
/**
153
* Prunes the given tree to inlcude the given matched class 
154
**/
155
function prune(divId, matchClass) {
156

    
157
	// show all nodes (reset)
158
	$("#" + divId).find("li").show();
159
	
160
	// done if we don't have any thing to prune
161
	if (!matchClass) {
162
		return;
163
	}
164
	
165
	// get all non-matched anchor tags
166
	var nonmatches = $("#" + divId).find("a").not("." + matchClass);
167
	
168
	// get their parent nodes
169
	nonmatches = $(nonmatches).parents("li");
170

    
171
	// are there any matches under each parent node?
172
	$(nonmatches).each(
173
		function(index) {
174
			// do any chidren match?
175
			var childMatches = $(this).find("a." + matchClass);
176
			if (childMatches && childMatches.length > 0) {
177
				return true;
178
			}
179
			// parent matches?
180
			var parentMatches = $(this).parents("li").children("a." + matchClass);
181
			if (parentMatches && parentMatches.length > 0) {
182
				return true;
183
			}
184
			// hide this node if no matches under it
185
			$(this).hide();
186
		});
187
}
188
function checkExactMatch(divId, searchTerm, matchClass) {
189
	// get the current search matches
190
	var matches = $("#" + divId).find("a." + matchClass);
191
	// get their parent nodes
192
	matches = $(matches).parents("li");
193
	// check for exact matches
194
	var exactMatch = $(matches).filter("#" + searchTerm).first();
195
	if (exactMatch && exactMatch.length == 1) {
196
		//alert("exactMatch: " + exactMatch);
197
		// select in the tree, honoring the configured selection limit
198
		$("#" + divId).jstree("select_node", $(exactMatch), true);
199
		// act as those you clicked it
200
		// TODO: convert to event listeners on the tree
201
		select($(exactMatch).children("a"));
202
	}
203
}
204
function doActiveDomain(divId) {
205
	if ($("#" + divId + "Only").is(":checked")) {
206
		// prune to active
207
		prune(divId, "bold");
208
	} else {
209
		// reset
210
		prune(divId, null);
211
	}
212
}
213
function initialize(source) {
214
	// we don't want to reload the source of the filtering request
215
	// but we do want to reload the other trees for active domains
216
	// we reload all of them if no source is given - first time the page loads
217
	if (source) {
218
		source = $(source).attr("id");
219
	}
220
	if (!source) {
221
		source = "";
222
	}
223
	if (source != 'activeEntities') {
224
		populateActiveDomain('activeEntities', 'org.ecoinformatics.sms.annotation.Entity');
225
	}
226
	if (source != 'activeCharacteristics') {
227
		populateActiveDomain('activeCharacteristics', 'org.ecoinformatics.sms.annotation.Characteristic');
228
	}
229
	if (source != 'activeProtocols') {
230
		populateActiveDomain('activeProtocols', 'org.ecoinformatics.sms.annotation.Protocol');
231
	}
232
	if (source != 'activeMeasurements') {
233
		populateActiveDomain('activeMeasurements', 'org.ecoinformatics.sms.annotation.Measurement');
234
	}
235
}
236
function select(item) {
237

    
238
	// get the selected value, stored in the title attribute of the item <a> tag
239
	var value = $(item).attr("title");
240
	//alert("value: " + value);
241
	
242
	// get the parent div so we know what kind of class it is meant to filter
243
	// this is "the first parent of the class 'select'"
244
	var parent = $(item).parents("div.select:first");
245
	//alert("parent: " + parent);
246
	
247
	// set the value for the hidden input value
248
	// the input field of class "value" will hold it, this way we don't need to know the id
249
	var input = $(parent).children("input.value");
250
	$(input).val(value);
251
	//alert("input: " + input);
252
	
253
	// set it in the search field
254
	var treeInstance = $(item).parents("div.jstree:first");
255
	var shortName = $(item).parent().attr("id");
256
	$("#" + $(treeInstance).attr("id") + "Search").val(shortName)
257

    
258
	// refresh the search results
259
	doSearch($("#searchForm").get(0));
260
	
261
	// refresh the other trees for active domain after this filtering action
262
	initialize($(parent).children("div"));
263
}
264
function doSearch(formObj) {
265
	// set the hidden parameters based on the current state of the form
266
	checkSearch(formObj);
267
	
268
	// start the busy indicator
269
	$("#searchResults").busy(
270
			{
271
				position	: 'left', 
272
				offset		: -30, 
273
				hide		: true, 
274
				img			: "<%=STYLE_COMMON_URL%>/jquery/busy/busy.gif" 
275
			});
276
	
277
	//load the results
278
	$("#searchResults").load(
279
		"<%=SERVLET_URL%>" + " #content_wrapper",
280
		$(formObj).serialize(),
281
		// call back function when loading finishes
282
		function(response, status, xhr) {
283
			if (status == "error") {
284
				var msg = "Sorry but there was an error performing the search: ";
285
				$("#error").html(msg + xhr.status + " " + xhr.statusText);
286
			}
287
			// collapsible search results - show and hide the next div
288
			$(function() {
289
				$('.accordian').click(function() {
290
					var ref = $(this);
291
					$(this).parent().next().slideToggle(
292
						"slow",
293
						function() {
294
							if ($(ref).parent().next().is(":visible")) {
295
								$(ref).html("-");
296
							} else {
297
								$(ref).html("+");
298
							}
299
						});
300
					return false;
301
				}).parent().next().hide();
302
			});
303
			
304
			// stop the busy indicator
305
			$("#searchResults").busy("hide");
306
		});
307
		
308
	return false;
309
	
310
}
311
function clearForm() {
312
	// clear the form values
313
	$('#searchForm').get(0).reset();
314
	// clear each of the tree selections
315
	$(".jstree").each(function(index) {
316
		$(this).jstree("deselect_all");
317
	});
318
	$("input.value").each(function(index) {
319
		$(this).val("");
320
	});
321
	// reload the trees
322
	initialize();
323
	// reload the search results
324
	//alert($('#searchForm').get(0));
325
	doSearch($('#searchForm').get(0));
326
}
327
/**
328
 * Perform this when the page first loads
329
 */
330
function pageLoad() {
331
	initialize();
332
	doSearch($('#searchForm').get(0));
333
}
334
function donothing() {}
335
--></script>
336

    
337
</head>
338
<body onload="pageLoad()">
339
<script language="javascript">
340
	insertTemplateOpening("<%=CONTEXT_URL%>");
341
</script>
342

    
343
<div id="content_wrapper">
344
 
345
<h2>Semantic search</h2>
346

    
347
<div id="error">
348
	<!-- error messages here -->
349
</div>
350

    
351
<!-- set up the tabs -->
352
<script>
353
	$(function() {
354
		$("#searchTabs").tabs();
355
		$("#searchTabs").tabs("add", "#ecpTab", "Entity, Characteristic, Protocol");
356
		$("#searchTabs").tabs("add", "#measurementTab", "Measurement");
357
		$("#searchTabs").tabs("add", "#optionsTab", "Options");
358
	});
359
</script>
360

    
361
<form method="POST" 
362
		action="<%=SERVLET_URL%>" 
363
		target="_top" 
364
		id="searchForm" 
365
		name="searchForm" 
366
		onSubmit="return doSearch(this)">
367
	<input name="query" type="hidden" />
368
	<input name="qformat" value="semtools" type="hidden" />
369
	<input name="includeHeader" value="false" type="hidden" />
370
	<input name="action" value="semquery" type="hidden" />
371

    
372
	<!-- tabs for the search interface -->		
373
	<div id="searchTabs">
374
		<!-- place holder for ui tabs -->
375
		<ul></ul>
376
	
377
		<!-- other criteria tabs -->
378
		<div id="ecpTab">
379
			<table>
380
				<tr>
381
					<td>
382
						<table class="subGroup subGroup_border">
383
							
384
							<tr>
385
								<th><p>Find observations of</p></th>
386
							</tr>
387
							<tr>
388
								<td>
389
									<input type="text" id="activeEntitiesSearch" />
390
									<input type="checkbox" id="activeEntitiesOnly" title="Show only active concepts" />
391
									<div class="select">
392
										<div id="activeEntities" class="activeTree">
393
											<p>loading...</p>
394
										</div>
395
										<input type="hidden" class="value" name="activeEntitiesValue" id="activeEntitiesValue"/>
396
										<input type="hidden" name="activeEntitiesClass" id="activeEntitiesClass" value="http://ecoinformatics.org/oboe/oboe.1.0/oboe-core.owl#Entity"/>
397
									</div>
398
								</td>
399
							</tr>
400
						</table>
401
					</td>
402
					<td>
403
						<table class="subGroup subGroup_border">
404
							<tr>
405
								<th><p>with measurements of</p></th>
406
							</tr>
407
							<tr>
408
								<td>
409
									<input type="text" id="activeCharacteristicsSearch" />
410
									<input type="checkbox" id="activeCharacteristicsOnly" title="Show only active concepts" />
411
									<div class="select">
412
										<div id="activeCharacteristics" class="activeTree">
413
											<p>loading...</p>
414
										</div>
415
										<input type="hidden" class="value" name="activeCharacteristicsValue" id="activeCharacteristicsValue"/>
416
										<input type="hidden" name="activeCharacteristicsClass" id="activeCharacteristicsClass" value="http://ecoinformatics.org/oboe/oboe.1.0/oboe-core.owl#Characteristic"/>
417
									</div>
418
								</td>
419
							</tr>
420
						</table>
421
					</td>
422
					<td>
423
						<table class="subGroup subGroup_border">
424
							<tr>
425
								<th><p>using procedures outlined by</p></th>
426
							</tr>
427
							<tr>
428
								<td>
429
									<input type="text" id="activeProtocolsSearch" />
430
									<input type="checkbox" id="activeProtocolsOnly" title="Show only active concepts" />
431
									<div class="select">
432
										<div id="activeProtocols" class="activeTree">
433
											<p>loading...</p>
434
										</div>
435
										<input type="hidden" class="value" name="activeProtocolsValue" id="activeProtocolsValue" />
436
										<input type="hidden" name="activeProtocolsClass" id="activeProtocolsClass" value="http://ecoinformatics.org/oboe/oboe.1.0/oboe-core.owl#Protocol"/>
437
									</div>
438
								</td>
439
							</tr>
440
						</table>
441
					</td>
442
				</tr>
443
			</table>
444
		</div>
445
		
446
		<!-- measurement -->
447
		<div id="measurementTab">
448
			<table class="subGroup subGroup_border onehundred_percent">
449
				
450
				<tr>
451
					<th><p>a template that defines Entity, Characteristic, Standard, and/or Protocol</p></th>
452
				</tr>
453
				
454
				<tr>
455
					<td>
456
						<input type="text" id="activeMeasurementsSearch" />
457
						Only active? <input type="checkbox" id="activeMeasurementsOnly" title="Show only active concepts"/>
458
						<div class="select">
459
							<div id="activeMeasurements" class="activeTree" style="width: 100%">
460
								<p>loading...</p>
461
							</div>
462
							<input type="hidden" class="value" name="activeMeasurementsValue" id="activeMeasurementsValue"/>
463
							<input type="hidden" name="activeMeasurementsClass" id="activeMeasurementsClass" value="http://ecoinformatics.org/oboe/oboe.1.0/oboe-core.owl#Measurement"/>
464
						</div>
465
					</td>
466
				</tr>
467
			</table>
468
		</div>
469
		
470
		<!-- query options -->
471
		<div id="optionsTab">
472
			<table class="group group_border">
473
				<tr>
474
					<th colspan="2">
475
						<p>
476
							Locate <b>data packages</b> that have been semantically annotated within the observation model by
477
							selecting concepts from OBOE extension ontologies
478
						</p>
479
					</th>
480
				</tr>
481
				
482
				<tr>
483
					
484
					<td colspan="1">Match All? <input type="checkbox" name="matchAll" checked="checked"/></td>
485
				
486
					<td colspan="1">From same Observation? <input type="checkbox" name="strict"/></td>
487
				</tr>
488
				
489
			</table>
490
		</div>	
491
					
492
	</div>
493
	
494
	<br/>
495
	
496
	<!-- search results here -->	
497
	<table class="subGroup subGroup_border onehundred_percent">
498
		<tr>
499
			<th>
500
				Search Results
501
				<input type="reset" value="Clear" onclick="clearForm()"/>
502
			</th>
503
		</tr>
504
		<tr>
505
			<td>
506
				<div id="searchResults">
507
				No query has been specified	
508
				</div>
509
			</td>
510
		</tr>
511
	</table>	
512

    
513
</form>
514

    
515

    
516

    
517
<!-- Included default search/login -->
518
<% if ( PropertyService.getProperty("spatial.runSpatialOption").equals("true") ) { %>
519
<script language="javascript">
520
	insertMap("<%=CONTEXT_URL%>");
521
</script>
522
<br/>
523
<% } %>
524
  
525
<script language="javascript">
526
	insertSearchBox("<%=CONTEXT_URL%>");
527
	insertLoginBox("<%=CONTEXT_URL%>");	
528
</script>
529

    
530
</div>
531

    
532
<script language="javascript">
533
	insertTemplateClosing("<%=CONTEXT_URL%>");
534
</script>
535

    
536
</body>
537
</html>
(5-5/14)