simple auto-completion for the search box

pdb-plotting/.gitignore

@@ -3,3 +3,4 @@
 /.settings/
 /.classpath
 /.project
+/build/

pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java

@@ -2,9 +2,17 @@ package org.lucares.pdbui;
 
 import java.io.File;
 import java.nio.file.Path;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
 
+import org.lucares.ludb.Proposal;
+import org.lucares.pdbui.domain.AutocompleteProposal;
+import org.lucares.pdbui.domain.AutocompleteProposalByValue;
+import org.lucares.pdbui.domain.AutocompleteResponse;
 import org.lucares.pdbui.domain.PlotRequest;
 import org.lucares.pdbui.domain.PlotResponse;
+import org.lucares.performance.db.CollectionUtils;
 import org.lucares.recommind.logs.InternalPlottingException;
 import org.lucares.recommind.logs.Plotter;
 import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
@@ -13,15 +21,18 @@ import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 @Controller
 @EnableAutoConfiguration
-public class PdbController implements HardcodedValues {
+public class PdbController implements HardcodedValues, CollectionUtils {
 
 	private final Plotter plotter;
+	private final PdbRepository db;
 
-	public PdbController(final Plotter plotter) {
+	public PdbController(final PdbRepository db, final Plotter plotter) {
+		this.db = db;
 		this.plotter = plotter;
 	}
 
@@ -34,8 +45,12 @@ public class PdbController implements HardcodedValues {
 	PlotResponse createPlot(@RequestBody final PlotRequest request) {
 
 		try {
-			System.out.println(request.getQuery());
+			final String query = request.getQuery();
-			final File image = plotter.plot(request.getQuery(), request.getHeight(), request.getWidth());
+			final int height = request.getHeight();
+			final int width = request.getWidth();
+
+			System.out.println(query);
+			final File image = plotter.plot(query, height, width);
 
 			final Path relativeImagePath = plotter.getOutputDir().relativize(image.toPath());
 			return new PlotResponse(WEB_IMAGE_OUTPUT_PATH + "/" + relativeImagePath.toString());
@@ -45,4 +60,47 @@ public class PdbController implements HardcodedValues {
 		}
 	}
 
+	@RequestMapping(path = "/autocomplete", //
+			method = RequestMethod.GET, //
+			consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE, //
+			produces = MediaType.APPLICATION_JSON_UTF8_VALUE //
+	)
+	@ResponseBody
+	AutocompleteResponse autocomplete(@RequestParam(name = "query") final String query,
+			@RequestParam(name = "caretIndex") final int caretIndex) {
+
+		try {
+			final AutocompleteResponse result = new AutocompleteResponse();
+			final int zeroBasedCaretIndex = caretIndex - 1;
+
+			final List<Proposal> proposals = db.autocomplete(query, zeroBasedCaretIndex);
+			final List<Proposal> nonEmptyProposals = filter(proposals, p -> p.getResults() > 0);
+
+			final List<AutocompleteProposal> autocompleteProposals = toAutocompleteProposals(nonEmptyProposals);
+			Collections.sort(autocompleteProposals, new AutocompleteProposalByValue());
+
+			result.setProposals(autocompleteProposals);
+			return result;
+
+		} catch (final Exception e) {
+			e.printStackTrace();
+			throw new InternalServerError(e);
+		}
+	}
+
+	private List<AutocompleteProposal> toAutocompleteProposals(final List<Proposal> proposals) {
+
+		final List<AutocompleteProposal> result = new ArrayList<>();
+
+		for (final Proposal proposal : proposals) {
+			final AutocompleteProposal e = new AutocompleteProposal();
+			e.setValue(proposal.getProposedTag());
+			e.setProposedQuery(proposal.getProposedQuery());
+
+			result.add(e);
+		}
+
+		return result;
+	}
+
 }

pdb-ui/src/main/java/org/lucares/pdbui/PdbRepository.java

@@ -2,7 +2,9 @@ package org.lucares.pdbui;
 
 import java.nio.file.Path;
 import java.nio.file.Paths;
+import java.util.List;
 
+import org.lucares.ludb.Proposal;
 import org.lucares.performance.db.PerformanceDb;
 import org.springframework.beans.factory.DisposableBean;
 import org.springframework.beans.factory.annotation.Value;
@@ -21,6 +23,10 @@ public class PdbRepository implements DisposableBean {
 		return db;
 	}
 
+	public List<Proposal> autocomplete(final String query, final int caretIndex) {
+		return db.autocomplete(query, caretIndex);
+	}
+
 	@Override
 	public void destroy() {
 		db.close();

pdb-ui/src/main/java/org/lucares/pdbui/domain/AutocompleteProposal.java

@@ -0,0 +1,27 @@
+package org.lucares.pdbui.domain;
+
+public class AutocompleteProposal {
+	private String value;
+	private String proposedQuery;
+
+	public String getValue() {
+		return value;
+	}
+
+	public void setValue(final String value) {
+		this.value = value;
+	}
+
+	@Override
+	public String toString() {
+		return value;
+	}
+
+	public void setProposedQuery(final String proposedQuery) {
+		this.proposedQuery = proposedQuery;
+	}
+
+	public String getProposedQuery() {
+		return proposedQuery;
+	}
+}

pdb-ui/src/main/java/org/lucares/pdbui/domain/AutocompleteProposalByValue.java

@@ -0,0 +1,12 @@
+package org.lucares.pdbui.domain;
+
+import java.util.Comparator;
+
+public class AutocompleteProposalByValue implements Comparator<AutocompleteProposal> {
+
+	@Override
+	public int compare(final AutocompleteProposal o1, final AutocompleteProposal o2) {
+		return o1.getValue().compareToIgnoreCase(o2.getValue());
+	}
+
+}

pdb-ui/src/main/java/org/lucares/pdbui/domain/AutocompleteResponse.java

@@ -0,0 +1,21 @@
+package org.lucares.pdbui.domain;
+
+import java.util.List;
+
+public class AutocompleteResponse {
+	private List<AutocompleteProposal> proposals;
+
+	public List<AutocompleteProposal> getProposals() {
+		return proposals;
+	}
+
+	public void setProposals(final List<AutocompleteProposal> proposals) {
+		this.proposals = proposals;
+	}
+
+	@Override
+	public String toString() {
+		return String.valueOf(proposals);
+	}
+
+}

pdb-ui/src/main/resources/resources/css/autocomplete.min.css

@@ -0,0 +1 @@
+.autocomplete,.autocomplete.open{transition:all .5s ease 0s;overflow-y:hidden}.autocomplete{position:absolute;max-height:0;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(0,1,.5,1)}.autocomplete.open{display:block;background-color:#FAFAFA;max-height:500px;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(0,1,.5,1)}.autocomplete.open:empty,.autocomplete:empty{display:none}.autocomplete:active,.autocomplete:focus,.autocomplete:hover{background-color:#FAFAFA;transition:all .5s ease 0s}.autocomplete>ul{list-style-type:none;margin:0;padding:0}.autocomplete>ul>li{cursor:pointer;padding:5px 0 5px 10px}.autocomplete>ul>li.locked{cursor:inherit}.autocomplete>ul>li.active,.autocomplete>ul>li:active,.autocomplete>ul>li:focus,.autocomplete>ul>li:hover{background-color:#EEE;transition:all .5s ease 0s}.autocomplete>ul>li.active a:active,.autocomplete>ul>li.active a:focus,.autocomplete>ul>li.active a:hover,.autocomplete>ul>li:active a:active,.autocomplete>ul>li:active a:focus,.autocomplete>ul>li:active a:hover,.autocomplete>ul>li:focus a:active,.autocomplete>ul>li:focus a:focus,.autocomplete>ul>li:focus a:hover,.autocomplete>ul>li:hover a:active,.autocomplete>ul>li:hover a:focus,.autocomplete>ul>li:hover a:hover{text-decoration:none}input[data-autocomplete]{border-color:grey;border-style:none none solid;border-width:0 0 1px;margin:0;padding:5px;width:100%}

pdb-ui/src/main/resources/resources/css/design.css

@@ -49,6 +49,17 @@ html, body {
     box-sizing: border-box;
 }
 
+#search-input-wrapper {
+	text-align: left;
+	display: flex;
+	padding: 5px;
+}
+
+#search-input-wrapper .autocomplete {
+	overflow-y: scroll;
+}
+
+
 #search-bar #search-submit {
 	margin-right:3px;
 }

pdb-ui/src/main/resources/resources/index.html

@@ -3,10 +3,12 @@
 <head>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
 <script type="text/javascript" src="js/search.js"></script>
+<script type="text/javascript" src="js/autocomplete.js"></script>
 <link rel="stylesheet" type="text/css" href="css/typography.css">
 <link rel="stylesheet" type="text/css" href="css/design.css">
 <link rel="stylesheet" type="text/css" href="css/icons.css">
 <link rel="stylesheet" type="text/css" href="css/loading.css">
+<link rel="stylesheet" type="text/css" href="css/autocomplete.min.css">
 </head>
 <body>
 	<div id="content">
@@ -14,7 +16,10 @@
 			<div id="logo">LOGO</div>
 		</div>
 		<div id="search-bar">
-			<textarea id="search-query">method=AuditService.logEvent</textarea>
+			<div id="search-input-wrapper">
+				<input id="search-input" data-autocomplete="autocomplete"
+					data-autocomplete-empty-message="nothing found" />
+			</div>
 			<button id="search-submit"><i class="fa fa-search"> Search</i></button>
 		</div>
 		<div id="result-view">

pdb-ui/src/main/resources/resources/js/.gitignore

@@ -0,0 +1,5 @@
+/horsey-master/
+/horsey-master.zip
+/autocomplete.js-2.1.0/
+/autocomplete.js-2.1.0.zip
+/search.js

pdb-ui/src/main/resources/resources/js/autocomplete.js

@@ -0,0 +1,449 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.AutoComplete = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/*
+ * @license MIT
+ *
+ * Autocomplete.js v2.1.0
+ * Developed by Baptiste Donaux
+ * https://autocomplete-js.com
+ *
+ * (c) 2016, Baptiste Donaux
+ */
+"use strict";
+var ConditionOperator;
+(function (ConditionOperator) {
+    ConditionOperator[ConditionOperator["AND"] = 0] = "AND";
+    ConditionOperator[ConditionOperator["OR"] = 1] = "OR";
+})(ConditionOperator || (ConditionOperator = {}));
+/**
+ * Core
+ *
+ * @class
+ * @author Baptiste Donaux <baptiste.donaux@gmail.com> @baptistedonaux
+ */
+var AutoComplete = (function () {
+    // Constructor
+    function AutoComplete(params, selector) {
+        if (params === void 0) { params = {}; }
+        if (selector === void 0) { selector = "[data-autocomplete]"; }
+        if (Array.isArray(selector)) {
+            selector.forEach(function (s) {
+                new AutoComplete(params, s);
+            });
+        }
+        else if (typeof selector == "string") {
+            var elements = document.querySelectorAll(selector);
+            Array.prototype.forEach.call(elements, function (input) {
+                new AutoComplete(params, input);
+            });
+        }
+        else {
+            AutoComplete.prototype.create(AutoComplete.merge(AutoComplete.defaults, params, {
+                DOMResults: document.createElement("div")
+            }), selector);
+        }
+    }
+    AutoComplete.prototype.create = function (params, element) {
+        params.Input = element;
+        if (params.Input.nodeName.match(/^INPUT$/i) && (params.Input.hasAttribute("type") === false || params.Input.getAttribute("type").match(/^TEXT|SEARCH$/i))) {
+            params.Input.setAttribute("autocomplete", "off");
+            params._Position(params);
+            params.Input.parentNode.appendChild(params.DOMResults);
+            params.$Listeners = {
+                blur: params._Blur.bind(params),
+                destroy: AutoComplete.prototype.destroy.bind(null, params),
+                focus: params._Focus.bind(params),
+                keyup: AutoComplete.prototype.event.bind(null, params),
+                keydown: function (event) {
+                    if (event.keyCode == 38 || event.keyCode == 40) {
+                        event.preventDefault();
+                    }
+                },
+                position: params._Position.bind(params)
+            };
+            for (var event in params.$Listeners) {
+                params.Input.addEventListener(event, params.$Listeners[event]);
+            }
+        }
+    };
+    AutoComplete.prototype.event = function (params, event) {
+        var eventIdentifier = function (condition) {
+            if ((match === true && mapping.Operator == ConditionOperator.AND) || (match === false && ConditionOperator.OR)) {
+                condition = AutoComplete.merge({
+                    Not: false
+                }, condition);
+                if (condition.hasOwnProperty("Is")) {
+                    if (condition.Is == event.keyCode) {
+                        match = !condition.Not;
+                    }
+                    else {
+                        match = condition.Not;
+                    }
+                }
+                else if (condition.hasOwnProperty("From") && condition.hasOwnProperty("To")) {
+                    if (event.keyCode >= condition.From && event.keyCode <= condition.To) {
+                        match = !condition.Not;
+                    }
+                    else {
+                        match = condition.Not;
+                    }
+                }
+            }
+        };
+        for (var name in params.KeyboardMappings) {
+            var mapping = AutoComplete.merge({
+                Operator: ConditionOperator.AND
+            }, params.KeyboardMappings[name]), match = ConditionOperator.AND == mapping.Operator;
+            mapping.Conditions.forEach(eventIdentifier);
+            if (match === true) {
+                mapping.Callback.bind(params, event)();
+            }
+        }
+    };
+    AutoComplete.prototype.ajax = function (params, callback, timeout) {
+        if (timeout === void 0) { timeout = true; }
+        if (params.$AjaxTimer) {
+            window.clearTimeout(params.$AjaxTimer);
+        }
+        if (timeout === true) {
+            params.$AjaxTimer = window.setTimeout(AutoComplete.prototype.ajax.bind(null, params, callback, false), params.Delay);
+        }
+        else {
+            if (params.Request) {
+                params.Request.abort();
+            }
+            var propertyHttpHeaders = Object.getOwnPropertyNames(params.HttpHeaders), method = params._HttpMethod(), url = params._Url(), queryParams = params._QueryArg() + "=" + params._Pre();
+            if (method.match(/^GET$/i)) {
+                url += "?" + queryParams;
+            }
+            params.Request = new XMLHttpRequest();
+            params.Request.open(method, url, true);
+            for (var i = propertyHttpHeaders.length - 1; i >= 0; i--) {
+                params.Request.setRequestHeader(propertyHttpHeaders[i], params.HttpHeaders[propertyHttpHeaders[i]]);
+            }
+            params.Request.onreadystatechange = callback;
+            params.Request.send(queryParams);
+        }
+    };
+    AutoComplete.prototype.destroy = function (params) {
+        for (var event in params.$Listeners) {
+            params.Input.removeEventListener(event, params.$Listeners[event]);
+        }
+        params.DOMResults.parentNode.removeChild(params.DOMResults);
+    };
+    AutoComplete.merge = function () {
+        var merge = {}, tmp;
+        for (var i = 0; i < arguments.length; i++) {
+            for (tmp in arguments[i]) {
+                merge[tmp] = arguments[i][tmp];
+            }
+        }
+        return merge;
+    };
+    AutoComplete.defaults = {
+        Delay: 150,
+        EmptyMessage: "No result here",
+        Highlight: {
+            getRegex: function (value) {
+                return new RegExp(value, "ig");
+            },
+            transform: function (value) {
+                return "<strong>" + value + "</strong>";
+            }
+        },
+        HttpHeaders: {
+            "Content-type": "application/x-www-form-urlencoded"
+        },
+        Limit: 0,
+        HttpMethod: "GET",
+        QueryArg: "q",
+        Url: null,
+        KeyboardMappings: {
+            "Enter": {
+                Conditions: [{
+                        Is: 13,
+                        Not: false
+                    }],
+                Callback: function () {
+                    if (this.DOMResults.getAttribute("class").indexOf("open") != -1) {
+                        var liActive = this.DOMResults.querySelector("li.active");
+                        if (liActive !== null) {
+                            this._Select(liActive);
+                            this.DOMResults.setAttribute("class", "autocomplete");
+                        }
+                    }
+                },
+                Operator: ConditionOperator.AND
+            },
+            "KeyUpAndDown": {
+                Conditions: [{
+                        Is: 38,
+                        Not: false
+                    },
+                    {
+                        Is: 40,
+                        Not: false
+                    }],
+                Callback: function (event) {
+                    event.preventDefault();
+                    var first = this.DOMResults.querySelector("li:first-child:not(.locked)"), last = this.DOMResults.querySelector("li:last-child:not(.locked)"), active = this.DOMResults.querySelector("li.active");
+                    if (active) {
+                        var currentIndex = Array.prototype.indexOf.call(active.parentNode.children, active), position = currentIndex + (event.keyCode - 39), lisCount = this.DOMResults.getElementsByTagName("li").length;
+                        if (position < 0) {
+                            position = lisCount - 1;
+                        }
+                        else if (position >= lisCount) {
+                            position = 0;
+                        }
+                        active.setAttribute("class", "");
+                        active.parentElement.childNodes.item(position).setAttribute("class", "active");
+                    }
+                    else if (last && event.keyCode == 38) {
+                        last.setAttribute("class", "active");
+                    }
+                    else if (first) {
+                        first.setAttribute("class", "active");
+                    }
+                },
+                Operator: ConditionOperator.OR
+            },
+            "AlphaNum": {
+                Conditions: [{
+                        Is: 13,
+                        Not: true
+                    }, {
+                        From: 35,
+                        To: 40,
+                        Not: true
+                    }],
+                Callback: function () {
+                    var oldValue = this.Input.getAttribute("data-autocomplete-old-value"), currentValue = this._Pre();
+                    if (currentValue !== "") {
+                        if (!oldValue || currentValue != oldValue) {
+                            this.DOMResults.setAttribute("class", "autocomplete open");
+                        }
+                        AutoComplete.prototype.ajax(this, function () {
+                            if (this.Request.readyState == 4 && this.Request.status == 200) {
+                                this._Render(this._Post(this.Request.response));
+                                this._Open();
+                            }
+                        }.bind(this));
+                    }
+                },
+                Operator: ConditionOperator.AND
+            }
+        },
+        DOMResults: null,
+        Request: null,
+        Input: null,
+        /**
+         * Return the message when no result returns
+         */
+        _EmptyMessage: function () {
+            var emptyMessage = "";
+            if (this.Input.hasAttribute("data-autocomplete-empty-message")) {
+                emptyMessage = this.Input.getAttribute("data-autocomplete-empty-message");
+            }
+            else if (this.EmptyMessage !== false) {
+                emptyMessage = this.EmptyMessage;
+            }
+            else {
+                emptyMessage = "";
+            }
+            return emptyMessage;
+        },
+        /**
+         * Returns the maximum number of results
+         */
+        _Limit: function () {
+            var limit = this.Input.getAttribute("data-autocomplete-limit");
+            if (isNaN(limit)) {
+                return this.Limit;
+            }
+            return parseInt(limit);
+        },
+        /**
+         * Apply transformation on labels response
+         */
+        _Highlight: function (label) {
+            return label.replace(this.Highlight.getRegex(this._Pre()), this.Highlight.transform);
+        },
+        /**
+         * Returns the HHTP method to use
+         */
+        _HttpMethod: function () {
+            if (this.Input.hasAttribute("data-autocomplete-method")) {
+                return this.Input.getAttribute("data-autocomplete-method");
+            }
+            return this.HttpMethod;
+        },
+        /**
+         * Returns the query param to use
+         */
+        _QueryArg: function () {
+            if (this.Input.hasAttribute("data-autocomplete-param-name")) {
+                return this.Input.getAttribute("data-autocomplete-param-name");
+            }
+            return this.QueryArg;
+        },
+        /**
+         * Returns the URL to use for AJAX request
+         */
+        _Url: function () {
+            if (this.Input.hasAttribute("data-autocomplete")) {
+                return this.Input.getAttribute("data-autocomplete");
+            }
+            return this.Url;
+        },
+        /**
+         * Manage the close
+         */
+        _Blur: function (now) {
+            if (now === void 0) { now = false; }
+            if (now) {
+                this.DOMResults.setAttribute("class", "autocomplete");
+            }
+            else {
+                var params = this;
+                setTimeout(function () {
+                    params._Blur(true);
+                }, 150);
+            }
+        },
+        /**
+         * Manage the open
+         */
+        _Focus: function () {
+            var oldValue = this.Input.getAttribute("data-autocomplete-old-value");
+            if (!oldValue || this.Input.value != oldValue) {
+                this.DOMResults.setAttribute("class", "autocomplete open");
+            }
+        },
+        /**
+         * Bind all results item if one result is opened
+         */
+        _Open: function () {
+            var params = this;
+            Array.prototype.forEach.call(this.DOMResults.getElementsByTagName("li"), function (li) {
+                if (li.getAttribute("class") != "locked") {
+                    li.onclick = function () {
+                        params._Select(li);
+                    };
+                }
+            });
+        },
+        /**
+         * Position the results HTML element
+         */
+        _Position: function () {
+            this.DOMResults.setAttribute("class", "autocomplete");
+            this.DOMResults.setAttribute("style", "top:" + (this.Input.offsetTop + this.Input.offsetHeight) + "px;left:" + this.Input.offsetLeft + "px;width:" + this.Input.offsetWidth + "px;");
+        },
+        /**
+         * Execute the render of results DOM element
+         */
+        _Render: function (response) {
+            var ul;
+            if (typeof response == "string") {
+                ul = this._RenderRaw(response);
+            }
+            else {
+                ul = this._RenderResponseItems(response);
+            }
+            if (this.DOMResults.hasChildNodes()) {
+                this.DOMResults.removeChild(this.DOMResults.childNodes[0]);
+            }
+            this.DOMResults.appendChild(ul);
+        },
+        /**
+         * ResponseItems[] rendering
+         */
+        _RenderResponseItems: function (response) {
+            var ul = document.createElement("ul"), li = document.createElement("li");
+            // Order
+            if (this._Limit() < 0) {
+                response = response.reverse();
+            }
+            for (var item = 0; item < response.length; item++) {
+                li.innerHTML = response[item].Label;
+                li.setAttribute("data-autocomplete-value", response[item].Value);
+                ul.appendChild(li);
+                li = document.createElement("li");
+            }
+            return ul;
+        },
+        /**
+         * string response rendering (RAW HTML)
+         */
+        _RenderRaw: function (response) {
+            var ul = document.createElement("ul"), li = document.createElement("li");
+            if (response.length > 0) {
+                this.DOMResults.innerHTML = response;
+            }
+            else {
+                var emptyMessage = this._EmptyMessage();
+                if (emptyMessage !== "") {
+                    li.innerHTML = emptyMessage;
+                    li.setAttribute("class", "locked");
+                    ul.appendChild(li);
+                }
+            }
+            return ul;
+        },
+        /**
+         * Deal with request response
+         */
+        _Post: function (response) {
+            try {
+                var returnResponse = [];
+                //JSON return
+                var json = JSON.parse(response);
+                if (Object.keys(json).length === 0) {
+                    return "";
+                }
+                if (Array.isArray(json)) {
+                    for (var i = 0; i < Object.keys(json).length; i++) {
+                        returnResponse[returnResponse.length] = { "Value": json[i], "Label": this._Highlight(json[i]) };
+                    }
+                }
+                else {
+                    for (var value in json) {
+                        returnResponse.push({
+                            "Value": value,
+                            "Label": this._Highlight(json[value])
+                        });
+                    }
+                }
+                return returnResponse;
+            }
+            catch (event) {
+                //HTML return
+                return response;
+            }
+        },
+        /**
+         * Return the autocomplete value to send (before request)
+         */
+        _Pre: function () {
+            return this.Input.value;
+        },
+        /**
+         * Choice one result item
+         */
+        _Select: function (item) {
+            if (item.hasAttribute("data-autocomplete-value")) {
+                this.Input.value = item.getAttribute("data-autocomplete-value");
+            }
+            else {
+                this.Input.value = item.innerHTML;
+            }
+            this.Input.setAttribute("data-autocomplete-old-value", this.Input.value);
+        },
+        $AjaxTimer: null,
+        $Listeners: {}
+    };
+    return AutoComplete;
+}());
+module.exports = AutoComplete;
+
+},{}]},{},[1])(1)
+});

pdb-ui/src/main/resources/resources/js/search.js

@@ -1,27 +1,29 @@
 
 $(document).ready(function(){
 
-	$('#search-submit').click(function(event){
+	$('#search-submit').click(plot);
-		event.preventDefault(); // prevent submit of form which would reload the page
+	
-		
+	AutoComplete({
-		showLoadingIcon();
+		HttpMethod: "GET",
-		var request = {};
+		Delay: 300,
-		request['query'] = $('#search-query').val();
+		_QueryArg: function() {
-		request['height'] = $('#result-view').height()-10;
+			var caretIndex = document.getElementById('search-input').selectionStart;
-		request['width'] = $('#result-view').width()-10;
+			return 'caretIndex=' + caretIndex + '&query';
-		
+		},
-		var success = function(response){
+		_Post: function(response) {
-				
+			var result = [];
-			$('#result-view').html('<img src=\"'+response.imageUrls+'" />');
+			var responseObject = JSON.parse(response);
-		};
+			responseObject['proposals'].forEach(function(item, index){
-		var error = function(e) {
+				var proposal = {};
-			//var response = JSON.parse(e.responseText);
+				proposal['Label'] = item.value;
-			$('#result-view').text("FAILED: " + JSON.stringify(e));
+				proposal['Value'] = item.proposedQuery;
-		};
+			
-		
+				result.push(proposal);
-
+			});
-		postJson("plots", request, success, error);
+			
-		
+			console.log(JSON.stringify(result));
+			return result;
+		}
 	});
 });
 
@@ -31,6 +33,28 @@ function showLoadingIcon()
 }
 
 
+function plot(event){
+	event.preventDefault(); // prevent submit of form which would reload the page
+	
+	showLoadingIcon();
+	var request = {};
+	request['query'] = $('#search-input').val();
+	request['height'] = $('#result-view').height()-10;
+	request['width'] = $('#result-view').width()-10;
+	
+	var success = function(response){
+			
+		$('#result-view').html('<img src=\"'+response.imageUrls+'" />');
+	};
+	var error = function(e) {
+		$('#result-view').text("FAILED: " + JSON.stringify(e));
+	};
+	
+
+	postJson("plots", request, success, error);
+	
+}
+
 function postJson(url, requestData, successCallback, errorCallback) {
 
 	$.ajax({
@@ -41,7 +65,6 @@ function postJson(url, requestData, successCallback, errorCallback) {
 		})
 		.done(successCallback)
 		.fail(errorCallback);
-
 }
 
 

performanceDb/build.gradle

@@ -1,7 +1,7 @@
 
 dependencies {
 	compile project(':pdb-api')
-	compile 'org.lucares:ludb:1.0.20161217184921'
+	compile 'org.lucares:ludb:1.0.20161223090600'
 	compile 'com.fasterxml.jackson.core:jackson-databind:2.8.5'
 	compile 'org.mapdb:mapdb:3.0.2'
 }

performanceDb/src/main/java/org/lucares/performance/db/CollectionUtils.java

@@ -1,5 +1,6 @@
 package org.lucares.performance.db;
 
+import java.util.Collection;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
@@ -21,7 +22,7 @@ public interface CollectionUtils {
 		return result;
 	}
 
-	public default <T> List<T> filter(final List<T> list, final Predicate<T> predicate) {
+	public default <T> List<T> filter(final Collection<T> list, final Predicate<T> predicate) {
 		return list.stream().filter(predicate).collect(Collectors.toList());
 	}
 }

performanceDb/src/main/java/org/lucares/performance/db/PerformanceDb.java

@@ -1,5 +1,6 @@
 package org.lucares.performance.db;
 
+import java.io.File;
 import java.io.IOException;
 import java.nio.file.Path;
 import java.time.OffsetDateTime;
@@ -15,6 +16,10 @@ import java.util.logging.Logger;
 import java.util.stream.Stream;
 import java.util.stream.StreamSupport;
 
+import org.lucares.ludb.Field;
+import org.lucares.ludb.FieldType;
+import org.lucares.ludb.H2DB;
+import org.lucares.ludb.Proposal;
 import org.lucares.pdb.api.Entry;
 import org.lucares.pdb.api.GroupResult;
 import org.lucares.pdb.api.Result;
@@ -26,8 +31,18 @@ public class PerformanceDb implements AutoCloseable {
 
 	private final TagsToFile tagsToFile;
 
+	private final H2DB db;
+
 	public PerformanceDb(final Path dataDirectory) {
-		tagsToFile = new TagsToFile(dataDirectory);
+
+		db = new H2DB(new File(dataDirectory.toFile(), "lu.db"));
+
+		final Field dateOffsetField = db.getField(Fields.DATE_OFFSET);
+		if (dateOffsetField == null) {
+			db.createField(Fields.DATE_OFFSET, FieldType.STRING);
+		}
+
+		tagsToFile = new TagsToFile(dataDirectory, db);
 	}
 
 	public void put(final Entry entry) throws WriteException {
@@ -166,6 +181,15 @@ public class PerformanceDb implements AutoCloseable {
 
 	@Override
 	public void close() {
-		tagsToFile.close();
+		try {
+			db.close();
+		} catch (final Exception e) {
+			// H2 doesn't actually do anything in close
+			throw new IllegalStateException(e);
+		}
+	}
+
+	public List<Proposal> autocomplete(final String query, final int caretIndex) {
+		return db.proposeTagForQuery(query, caretIndex);
 	}
 }

performanceDb/src/main/java/org/lucares/performance/db/TagsToFile.java

@@ -14,26 +14,18 @@ import java.util.UUID;
 
 import org.lucares.ludb.Document;
 import org.lucares.ludb.Field;
-import org.lucares.ludb.FieldExistsException;
 import org.lucares.ludb.FieldType;
 import org.lucares.ludb.H2DB;
 import org.lucares.pdb.api.Tags;
 
-public class TagsToFile implements AutoCloseable, CollectionUtils {
+public class TagsToFile implements CollectionUtils {
 
 	private final H2DB db;
 	private final Path dataDirectory;
 
-	public TagsToFile(final Path dataDirectory) {
+	public TagsToFile(final Path dataDirectory, final H2DB db) {
-		super();
 		this.dataDirectory = dataDirectory;
-		db = new H2DB(new File(dataDirectory.toFile(), "lu.db"));
+		this.db = db;
-		try {
-			db.createField(Fields.DATE_OFFSET, FieldType.STRING);
-		} catch (final FieldExistsException e) {
-			// TODO @ahr ludb needs a hasField method, or a
-			// createIfNotExists
-		}
 	}
 
 	private List<PdbFile> getFilesMatchingTagsExactly(final Tags tags) {
@@ -59,8 +51,7 @@ public class TagsToFile implements AutoCloseable, CollectionUtils {
 				result.add(pdbFile);
 			}
 		} catch (final NullPointerException e) {
-			// TODO @ahr ludb should handle unknown fields better
+			// TODO @ahr unknown fields in searches must be handled better
-			e.printStackTrace();
 		}
 
 		Collections.sort(result, PdbFileByTimeAsc.INSTANCE);
@@ -129,18 +120,18 @@ public class TagsToFile implements AutoCloseable, CollectionUtils {
 
 		ensureFieldsExist(tags);
 
-		tags.forEach((key, value) -> {
+		tags.forEach((fieldName, value) -> {
-			db.setProperty(file, key, value);
+			TagsUtils.setProperty(db, file, fieldName, value);
 		});
 
-		db.setProperty(file, Fields.DATE_OFFSET, day.serialize());
+		TagsUtils.setProperty(db, file, Fields.DATE_OFFSET, day.serialize());
 
 		result = new PdbFile(day, file, tags);
 		return result;
 	}
 
 	private void ensureFieldsExist(final Tags tags) {
-		final List<Field> fields = db.getAvailableFields();
+		final List<Field> fields = db.getAvailableFields("");
 		final Map<String, Field> fieldsMap = toMap(fields, Field::getName);
 
 		tags.forEach((key, value) -> {
@@ -166,15 +157,4 @@ public class TagsToFile implements AutoCloseable, CollectionUtils {
 
 		return result;
 	}
-
-	@Override
-	public void close() {
-		try {
-			db.close();
-		} catch (final Exception e) {
-			// H2 doesn't actually do anything in close
-			throw new IllegalStateException(e);
-		}
-	}
-
 }

performanceDb/src/main/java/org/lucares/performance/db/TagsUtils.java

@@ -1,5 +1,10 @@
 package org.lucares.performance.db;
 
+import java.io.File;
+
+import org.lucares.ludb.FieldNotExistsException;
+import org.lucares.ludb.FieldType;
+import org.lucares.ludb.H2DB;
 import org.lucares.pdb.api.Tags;
 
 class TagsUtils {
@@ -10,4 +15,17 @@ class TagsUtils {
 			}
 		});
 	}
+
+	static void setProperty(final H2DB db, final File file, final String fieldName, final String value) {
+		try {
+			db.setProperty(file, fieldName, value);
+		} catch (final FieldNotExistsException e) {
+			db.createField(fieldName, FieldType.STRING);
+			try {
+				db.setProperty(file, fieldName, value);
+			} catch (final FieldNotExistsException e1) {
+				throw new IllegalStateException(e1);
+			}
+		}
+	}
 }

performanceDb/src/main/java/org/lucares/performance/db/TimeRange.java

@@ -32,7 +32,6 @@ public class TimeRange {
 	}
 
 	public boolean inRange(final long epochMilli) {
-		// TODO @ahr cache the epoch millis
 		final long fromEpochMilli = from.toInstant().toEpochMilli();
 		final long toEpochMilli = to.toInstant().toEpochMilli();
 

performanceDb/src/test/java/org/lucares/performance/db/ObjectMapperTest.java

@@ -19,7 +19,6 @@ import java.util.concurrent.TimeUnit;
 import java.util.stream.Collectors;
 import java.util.stream.IntStream;
 
-import org.lucares.ludb.FieldType;
 import org.lucares.ludb.H2DB;
 import org.mapdb.DB;
 import org.mapdb.DBMaker;
@@ -127,12 +126,7 @@ public class ObjectMapperTest {
 			db.addDocument(file);
 
 			tagEntry.getTags().forEach((k, v) -> {
-				try {
+				TagsUtils.setProperty(db, file, k, v);
-					db.setProperty(file, k, v);
-				} catch (final NullPointerException e) {
-					db.createField(k, FieldType.STRING);
-					db.setProperty(file, k, v);
-				}
 			});
 
 		}

performanceDb/src/test/java/org/lucares/performance/db/TagsToFilesTest.java

@@ -1,11 +1,14 @@
 package org.lucares.performance.db;
 
+import java.io.File;
 import java.io.IOException;
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.time.OffsetDateTime;
 import java.time.ZoneOffset;
 
+import org.lucares.ludb.FieldType;
+import org.lucares.ludb.H2DB;
 import org.lucares.pdb.api.Tags;
 import org.testng.Assert;
 import org.testng.annotations.AfterMethod;
@@ -28,7 +31,12 @@ public class TagsToFilesTest {
 	}
 
 	public void test() throws Exception {
-		try (final TagsToFile tagsToFile = new TagsToFile(dataDirectory)) {
+
+		try (H2DB db = new H2DB(new File(dataDirectory.toFile(), "lu.db"))) {
+
+			db.createField(Fields.DATE_OFFSET, FieldType.STRING);
+
+			final TagsToFile tagsToFile = new TagsToFile(dataDirectory, db);
 
 			final OffsetDateTime date = OffsetDateTime.now(ZoneOffset.UTC);
 			final Tags tags = Tags.create("myKey", "myValue");