It seems that elasticsearch.angular.js is only used to send Ajax Requests, which could also easily be done by using plain $http. Since this dependency has a size of a few hundred KB I ask myself if there is another benefit that I'm not aware of?

Firstly, nice work - I managed to get something up and running very quickly.

I've got multiple indices that I want to view so it would be nice if you could change the index using say a select.

Not sure if this is the right thing to do, but got something working by making the eui-index directive point to model, e.g. eui-index="{{esIndex}}", which can then be updated from a select.

Then altered the euiIndex directive's link function to $observe the attribute, rather than just taking its initial value.

    attrs.$observe('euiIndex', function(value) {
        indexCtrl.indexVM.index = value;
    }); 

XMLHttpRequest cannot load http://localhost:9200/cases/_search?size=10&from=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

How do I fix this?

Hi,

I'm not sure it's implemented, is it possible to order the aggregation ?
like in the doc of elastic.co
{
"aggs" : {
"genders" : {
"terms" : {
"field" : "gender",
"order" : { "_term" : "asc" }
}
}
}
}

Thanks,

Hello

I've followed all the steps needed, and exactly followed the JSFiddle also, but no matter what I do, ElasticUI won't play ball with Pencilblue.

I'm thinking the module might not be loaded properly or something. Is there any way to check this? You can check http://henleymcc.herokuapp.com/ to see that all the files required are loaded in the head, the index is defined on the body, and the searchbox is defined in the HTML above the 'TEST' span (upper right menu, under Courses) but the searchbox is not showing.

I've checked the JSFiddle and the searchbox should basically load even without any sort of additional config (such as the .constant, the host, the index, etc.). All you need in JSFiddle to get it to load is to have the required .js files in the head and an angular.module 'elasticui' defined and loading, and it will show.

But not for me. I'm wondering why would that be.

Hi Yousef,

I want to share how i did pagination with elastic ui: I used Angular-pagination.

Pagination is done like this :

                <div paging
                    ul-class="pagination pagination-lg"
                    page="indexVM.page" 
                    page-size="indexVM.pageSize" 
                    total="indexVM.results.hits.total"
                    adjacent="1"
                    dots="..."
                    scroll-top="true" 
                    hide-if-empty="true"
                    show-prev-next="true">
                </div>  

I am using ElasticUI to access my elasticsearch to display the result. I am running the same code in IE11 its working very fine without any issues. When I ran the same code in chrome its not showing any content fetched from Elasticsearch.

I have 2 eui-query with an input tag in same html doc. 2nd one is created after I search in the 1st one.

After searching in the 1st one, results are shown, however after the 2nd one is activated/created, elasticUI does a MatchAll behind scenes and results from the previous search are gone and I would like to keep them in my screen.

Is there a way to disable the MatchAll in this case?

Yousef, thanks for the amazing tools.

What is the best way to call setData on drag start of a result in the elasticui result list?

Something like this jsfiddle: http://jsfiddle.net/4LeyLp2s/

        $item.on('dragstart', function(ev) {
            var fcId = $item.data('feature-collection-id'),
                fc = fcs[fcId],
                data = ev.originalEvent.dataTransfer;
            data.setData('features', JSON.stringify(fc));

Hi

Iam trying to use exact match for one of the columns specified in searchBox. But it always defaults to match , instead i wanted to use match_phrase.

Arun

I have a problem when I tried to use aggs with multiple selection.

I have a list

<ul id="mySelect" eui-aggregation="ejs.TermsAggregation('brand').field('brand.raw').order('_term','ASC')" eui-filter-self="false">
    <li class="col s12" ng-repeat="bucket in aggResult.buckets">
        <label class="checkbox" eui-filter="ejs.TermsFilter('brand.raw', bucket.key)">
            <input type="checkbox" id="brand{{bucket.key}}" ng-model="filter.enabled">
            <label for="brand{{bucket.key}}">{{bucket.key}}</label>
        </label>
    </li>                 
</ul>

and when I choose several items from list, filters looks like this
"filter":{"bool":{"must":[{"terms":{"brand.raw":["Brand 1"]}},{"terms":{"brand.raw":["Brand 2"]}}]}}

but nothing is returned from ES, for working it must be like that
"filter":{"bool":{"must":[{"terms":{"brand.raw":["Brand 1","Brand 2"]}}]}}

Do you think it's possible ?

Thanks.

Hi,

First of all, i want to thank you for your effort to this project.

I was guessing if it is possible to have a new type of search box featured with the autocomplete.

To populate the list of suggestions there would be another attribute with the url of the suggestion list or the path of the list on the elasticsearch server .

In fact it will be a combination of the current search box with angucomplete-alt

The searchbox directive would be used like that :

  <eui-searchbox field="INDEX_FIELD" autocomplete-url="URL_FOR_SUGGESTION_DATA" trigger-at="NUMBER_OF_CHARACTER" start-after="MILLISECONDS" ></eui-searchbox>

Thanks again for your efforts.

Hi,

I am trying to use eui-query to do date range slider . The idea is to create and set dynamically based on the datepicker value. Once the range is set , i want to hit elastic search with the range filter along with other facet filter.

<input id = "rangeSetting" type="text" eui-query="ejs.RangeQuery('Timestamp') .gt('2014-10-31T00:00:00+05:30') .lt('2014-10-31T11:25:39+05:30')" ng-model="querystring" eui-enabled="querystring.length"/>

Even though i created this, the elasticsearch call is not forced upon changes to this input. How do i achieve this.

Arun

I have a fully working solution with ElasticUI, a product search page where the user can filter for price, brand, features, free text search, etc. The problem is, when navigating to the detail page of a product then back to the list, the previously set filters are gone.

Is there a way to persist the previously selected facets, the search results and the page number where the user was last?

Hello,

With your exemple and comments about euiChecklist, i suppose that i can select more than one option.
But when i click on an options, others disappear.

Anyone have a idea about this issue ?

Hi,

I tried to get the result of an aggregation directly in JS but without success.

var maxRes = ejs.MaxAggregation('max_price').field('price.raw');

But I dont know how to execute the aggregation and get the result.

Do you think it's possible ?

Thanks,

Hi,

is there a way to save the query (incl. filters) sent to elasticsearche to use it later on?

Thanks
Martin

Hi,

trying to highlight multible fields like this: eui-highlight="ejs.Highlight(['subject', 'textContent']).preTags('').postTags('')

But, does not work. Any tip for me?
Thanks
Martin

See also: http://stackoverflow.com/questions/24776209/how-to-highlight-search-results-with-elasticui

Current implementation seems to assume eui-filters are stable, but I am trying to dynamically add/remove them like elasticsearch-head does.
It is not intuitive that a disappeared eui-filter is still in indexVM, and the user must reload the page to deactivate it.
I appreciate if FilterController and its families add something like follows in init().

this.scope.$on '$destroy', (ev) =>
  this.scope.filter.enabled = false
  this.updateFilter()

The readme on the ElasticUI project page shows a screenshot of your Twitter dashboard with a date histogram. Is that widget part of ElasticUI?

My multi-select checklist widgets are filtering as I narrow my selection. Does your library support post_filter to change this behavior and/or is there another trick?

Thanks,
Peter

Hi,

I am trying to setup your demo but I get the following error on page load:
TypeError: Cannot read property 'replace' of undefined
at d.link.pre (http://rawgit.com/YousefED/ElasticUI/master/dist/elasticui.min.js:5:17870)
at nodeLinkFn (https://code.angularjs.org/1.2.16/angular.js:6559:13)
at compositeLinkFn (https://code.angularjs.org/1.2.16/angular.js:5986:15)
at compositeLinkFn (https://code.angularjs.org/1.2.16/angular.js:5989:13)
at compositeLinkFn (https://code.angularjs.org/1.2.16/angular.js:5989:13)
at compositeLinkFn (https://code.angularjs.org/1.2.16/angular.js:5989:13)
at nodeLinkFn (https://code.angularjs.org/1.2.16/angular.js:6573:24)
at compositeLinkFn (https://code.angularjs.org/1.2.16/angular.js:5986:15)
at publicLinkFn (https://code.angularjs.org/1.2.16/angular.js:5891:30)
at https://code.angularjs.org/1.2.16/angular.js:1384:27

Do you have any idea what the reason might be?

Hi,

I'd like to know if it's possible for eui-aggregation, eui-singleselect, ... to get the full value of the field and not split it and lowercase it.

Thanks,

Hi ,

I have seen in the doc that i can change for example filter.enabled from scope. Is it possible? The directive uses an isolate scope.

thanks

Hi,

I'm wondering if it is possible to use another type of aggregation other than TermsAggregation ( for example : AvgAggregation) but it seems that it is not supported.

Inside the link function of eui-aggregation the statements lets agg attribute undefined after the eval.

                    scope.aggregation = {
                        agg: scope.$eval(element.attr('eui-aggregation') + " | euiCached"),
                        filterSelf: filterSelf
                    };

Thanks in advance.

I have a use-case where I want to display results in increments other than 10. I don't see any way to change the pageSize for the initial request. It seems odd aggregation sizes can be set but query sizes cannot. Would it be difficult to implement a .size() option on queries?

Hi everyone,
perhaps someone can help with some "syntax-issue"?. I'm trying to sort my index result by distance to a given geopoint with following syntax:

div eui-sort="ejs.Sort().geoDistance(Location('49.8218,11.06')).order('asc')" eui-enabled="true"></div

where Location is the GeoPoint within the index which stores the geodata of my docs.

if i use the syntax as described for the sort-componente (something like div eui-sort="ejs.Sort('Name')order('asc')" eui-enabled="true"></div) everything seems to be fine.

any help is appreciated.

cheers

Hi everyone,

is it possible to reset the filters within an Aggregation.
For example:

all
test1 (12)
test2 (14) (checked)
test3 (3) (checked)

What I would like to know is, if there is a way to reset all checked filters to checked=false by click on filter all?

And is there a way to reset all filters in all aggregations?

Thanks a lot. I hope you'll have answers for me.

My analytics app uses a lot of "Or" aggregations configured with "filter-self=false", which makes the list of filters quite long. Customers find it difficult to sift through the list of aggregations to disable previously selected filters. To address this I've created a simple widget that lists all selected filters and allows them to be disabled individually. When the customer disables a filter via this widget it's expected that the state of checkboxes be reflected in the corresponding aggregation list. This works perfectly for "And" aggregations, but doesn't correctly update filter.enabled state for "Or" aggregations. Why is the "filter.enabled" state synchronized between two identically named "And" aggregations, but not for two identically name "Or" aggregations?

Thanks!

First of all, great work with ElasticUI - very useful!

What would be the easiest way to add the capability for the user to click a button to show more aggregation values? For example, when the search initially loads, a user sees the top 10 hashtags listed as aggregations/filter options. What if the user wants to change the display so they can see the top 20 hashtags instead?

Great plugin btw! But I have an issue trying to refresh once I have done a soft delete on an item in my list.

Currently trying in my controller without luck:
$scope.deleteRun = function (doc) {
if(confirm("Are you sure you want to delete this run?")){
es.client.update({
index: 'jmeter-event',
type: 'jmeter-event',
id: doc._id,
body: {
doc: {
deleted: true
}
}
}, function (error, response) {
$scope.indexVM.refresh();
console.log(response);
});
}
};

Inside the refresh I do see that the item gets re-queried and the deleted value is set to true but the fields on my screen that are binded to the delete value do not change unless i reload the entire page.
delete {{doc._source.deleted}}

Any suggestions?

This is an issue on my part but I'm really struggling trying to get this working. I am using your demo as a template and want a multiselect filter that can be checked to filter down the results based on an indexed field. The field in the index is _index. Essentially I have several indexes, one for each site indexed in ES and want to be able to filter the results by index.

This is the code that pulls a list of indexes and the number of results per index:

<ul class="nav nav-list" eui-aggregation="ejs.TermsAggregation('sitefilter').field('_index').size(5)">
            <li ng-repeat="bucket in aggResult.buckets">
                <label class="checkbox" eui-filter="ejs.TermsFilter('_index', bucket.key)">
            <input type="checkbox" id="sitefilter{{bucket.key}}" >
            <label for="sitefilter{{bucket.key}}">{{bucket.key}} ({{bucket.doc_count}})</label>
        </label>
        </li>
    </ul>

When selected, they do nothing to the results. What am I missing?

I apologize if this is a trivial thing. I'm a newb to ES and ElasticUI. Thank you in advance.

This is my search input

  <input placeholder="Search" type="text" eui-query="ejs.MatchQuery('line', querystring)" ng-model="querystring" eui-enabled="querystring.length" />

This work during startup since eui-enabled will be false.
However, after doing a search and then subsequently clearing the search input, the result is another search using an empty query.

My workaround is to surround the result display with this

    <div ng-if="indexVM.query">
      <ul>
          <li ng-repeat="doc in indexVM.results.hits.hits">
...
          </li>
      </ul>
    </div>

Ideally I want to avoid the search completely.

Many times in loading a search page, multiple calls to elasticsearch are made while things are still being configured (e.g., add a sort, aggs, filters, etc.). This makes multiple $watch statements in the IndexController fire.one after the other. Instead, I found it useful to leverage underscorejs/lo-dash's _.debounce method as such to minimize the amount of times the search() method is called while things are still being configured:

var lazySearch = _.debounce(function(){
                    _this.search();
                }, 300);

                $scope.$watchCollection('indexVM.filters.ejsObjects', function() {
                    _this.indexVM.page = 1;
                    lazySearch();
                });
                $scope.$watchCollection('indexVM.aggregationProviders.objects', function() {
                    return lazySearch();
                });

                $scope.$watch('indexVM.host', function() {
                    if (_this.indexVM.host != null && es.setHost(_this.indexVM.host)) {
                    lazySearch();
                    }
                });
                $scope.$watch('indexVM.sort', function() {
                    _this.indexVM.page = 1;
                    lazySearch();
                });
                $scope.$watch('indexVM.page', function() {
                    return lazySearch();
                });
                $scope.$watch('indexVM.index', function() {
                    return lazySearch();
                });
                $scope.$watch('indexVM.query', function() {
                    return lazySearch();
                });
                $scope.$watch('indexVM.highlight', function() {
                    return lazySearch();
                });

For the first page it seems it is possible to click prev button even if it is correctly disabled. Is it required to disable the ng-click attribute as well?

How do I add a filter in code which is enabled by default...

I added by the checkbox method and that works but I just want to do it in my controller. Is this possible?

this is what worked:
Hide deleted

but i want to enable in code in controller

Is there a way to have the facets not sorted by number of documents but alphabeticaly?

Regards

Hagen

Hi Yousef, You have written an inspired set of directives, very easy to use. I was up and running within an hour after finally making a decision to go with ElasticSearch and your library. Thank you. I'm getting to know ES better, but still a noob.

Is there a way to do document based dynamic facets using aggreations. Starting with a product catalog. Perhaps I know the product category.

music:
format
artist
genre

movie:
genre
actor
rating

books:
title
author

I think what I am asking is along the lines of

https://www.found.no/play/gist/8053943#search as referenced https://www.found.no/foundation/elasticsearch-aggregations/

I know this question blurs the line between asking a dynamic aggregations issue vs a feature request / how to leverage ElastcicUI to do.

Regardless, thanks for a great library!

So right now i have an app that is sending a search request on load and then once filters are set it sends another request. I was wondering if there is any way to only send the request for the filtered data on load?

Hi,

I'm using the searchbox directive and i want to watch the querystring variable in my controller. The problem is that inside my controller when i make $scope.querystring is not recognized.
but when access to it through this it works !!!
so when i make my watch like that it does not work:

              $scope.$watch('querystring', function(newValues, oldValues) {
              });

Thank you.

I am not too familiar with Angular, but I am looking for a way to periodically refresh the indexVM variable so the search results will refresh every few seconds.

I have hooked a custom controller to the view with this code and I can see in the console that the $scope.getData() function gets called every 5 seconds. I would like to somehow call the refresh method on the IndexController here which I can see in the source is inside the IndexDirective. I've tried using $scope.indexVM and injecting the $controller service, but no success to get what I was looking for.

Controller

angular.module('demo.search', ['ngRoute', 'elasticui'])

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/search', {
            templateUrl: 'search/search.html',
            controller: 'SearchCtrl'
        });
    }])

    .controller('SearchCtrl', ['$scope', '$timeout', function($scope, $timeout) {

        // Function to get the data
        $scope.getData = function(){
          console.log("Fetched data!");
        };

        // Function to replicate setInterval using $timeout service.
        $scope.intervalFunction = function(){
          $timeout(function() {
            $scope.getData();
            $scope.intervalFunction();
          }, 5000);
        };

        // Kick off the interval
        $scope.intervalFunction();
    }])

HTML

I am using the SearchBoxDirective and the search results populate appropriately when I type in the input field. From what I can tell, the eui-index is the IndexDirective and somehow the indexVM variable down in the ng-repeat is being pulled from it. I just can't figure out the scoping of the Controllers and Directives (or if there is any link between them).

<div class="container-fluid" eui-index="'demo'" eui-sort="ejs.Sort('datetime').order('desc').type('couchbaseDocument')" eui-enabled="true">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-primary">
        <div class="panel-heading">Search</div>
        <div class="panel-body">
            <eui-searchbox field="'text'" doctype="'couchbaseDocument'"></eui-searchbox> 
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-primary">
        <div class="panel-heading">Results</div>
          <div class="panel-body">
            <ul>
              <li ng-repeat="doc in indexVM.results.hits.hits">
                <p>{{doc._source.doc.text}}</p>
              </li>
            </ul>
            <eui-simple-paging></eui-simple-paging>
          </div>
      </div>
    </div>
  </div>
</div>

Yousef and team, thanks for the great work with elasticui.

I am trying to set up a complex query in ElasticUI: an ejs.DisMaxQuery of terms and span queries on different fields with different boosts. I don't think the "eui-searchbox"/"eui-query" constructs could support that use case. What would be the best way to extend ElasticUI to support more complex queries? I could write the javascript code that construct the ejs.DisMaxQuery as described above, but where would be the best place to plug it in?

Thanks,
tc

From what I understand, the SortDirective only works on document attributes in the Elastic documents and the current implementation for the Checklist and SingleSelect Directives simply to ascending alphabetic ordering on bucket.key.

Is it possible to add an Angular orderBy to the ngRepeat for custom ordering? For example, I would like to sort the bucket.doc_count in a descending order for both those Directives.

Hey @YousefED,

We have a use case where our users would like their filters pinned. Is that on the horizon? If not could you please give me some direction on how you would go about persisting filters to local storage. Would love to send you a PR.Thanks.

I'm using browserify rather than bower and I have to provide the full path to the JS file, like this:

require('elasticsearch/src/elasticsearch.angular');
window.ejs = require('elastic.js');
require('elasticui/dist/elasticui');

If @main was set correctly then we'd only need to do this:

require('elasticui');

Hi everyone,

I want only to share the sequel of the issue 9 with a widget like euiChecklist with the difference that it lets intact the checkbox when filtering. May be it should be added to the doc as an example of how to create custom directive upon elastic ui.
So, for the directive (it may be added like this in the project) :

angular.module('elasticui')
    .directive('euiMultiSelectFilter', ['$parse', function($parse) {
        return {
            templateUrl: 'PathToThisFile/multiselect.html',
            restrict: 'E',
            scope: true,
            link : {
                'pre': function(scope, element, attrs) {
                    elasticui.util.AngularTool.setupBinding($parse, scope, attrs, ['field', 'size']);
                    scope.agg_name = scope.field.replace(/[^a-z_0-9]/gmi, '_') + '_' + (elasticui.widgets.directives.default_agg_count++);
                }
            }
        };
    }]);

The template file may reside in your project :

<div class="form-group" eui-aggregation="ejs.TermsAggregation(field).field(field).size(size)" eui-filter-self="false" eui-or-filter>
  <div ng-repeat="bucket in aggResult.buckets">
    <label class="checkbox" eui-filter="ejs.TermsFilter(field, bucket.key)">
      <input type="checkbox" ng-model="filter.enabled">
      <div class="text-u-c">
    <small>{{bucket.key}}</small>

                                                <span class="badge">{{bucket.doc_count}}</span>
                                            </div>
      </input>
    </label>

  </div>
        <div class="text-u-l text-center">
                                    <a href=""  ng-click="size = size +10" ng-show="(size <= aggResult.buckets.length) && size !=0">Plus
                                        <span class="fa fa-chevron-circle-down"></span>
  </a>
  </div>

</div>

PS: There is two selector used inside the template the bootstrap badge and the font awesome chevron.

If you could upload a sample app, showing the use of each and every widget and component would be truly helpful.

In my case i am having trouble with the eui-highlight, the directive seems to be working but no highlight in displaying.

I want to display as:
...
< li ng-repeat="doc in indexVM.results.hits.hits" >
{{doc.highlight.field}}
...

I have added an alias to the eui-index as well as the _index field to the singleselect field.

However, filtering on the index name does not return any results. Is there a way to filter on the index name?

I believe the query would need to look something like this:

"query": {
"indices": {
"indices" : ["tweets"],
"query": {
"match_all": {}
},
"no_match_query" : "none"
}
}

I'm using browserify to create a single JS file, rather than using script tags. Unless I've missed some piece of trickery, I have to place the elastic.js object onto the window object in order to make it available to elasticui, like this:

require('elasticsearch/src/elasticsearch.angular');
window.ejs = require('elastic.js');
require('elasticui/dist/elasticui');

It feels kind of clunky, especially in Angular-land.

hi,

the searchbox directive triggers search query on page loading is there anyway to disable triggering the search?