Skip to content

Text Search

The Text Search visualization is a simple component used to pass filters to an Elasticsearch provider. It accepts expressions in the format of query strings which are powered by Apache Lucene. The following documentation shows how this component is used. You can also watch the video below. https://youtu.be/hXlbH41MrTI

Since the Text Search doesn't display any data it won't query the provider so it doesn't need any groups or metrics. It will only trigger a filter with an expression and will affect the visuals specified by the user.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
var ts= cf.provider('Elasticsearch')
    .source('logstash-2015.05.18')
    .graph('Text Search')
    .element('ts-div')

// Add the listener
ts.on('textfilter', function(event){
    var expression = event.data;
    // Get all the visuals
    var charts = cf.getAllVisualizations();
    // Apply the expression to them. 
    // Here we can add any validation we want like sources, chart names...
    charts.forEach(function(c){
        c.textfilter(expression).execute();
    })
})

ts.execute()

This will display the following: TS

Using the Text Search component

We can type any supported expression and hit "Enter" or press the "Search" button. Like this:

TS1

This will filter all the visuals from the callback function. If within our visuals we have a Raw Data Table, the terms searched in the expression will be highlighted:

TS2

To clear the results (remove the applied filter expression) we just need to perform an 'empty' search by removing the expression from the Text Search.

Some notes about the RDT highlighting

The highlight is done by placing a custom tag in the specific terms. The tags are _. _In order to have something like the RDT picture above, we'll need to manually add some styles to the tag in any css file in our project:  

1
2
3
4
5
cf-highlighted-field {
    background-color: #b8e6bb;
    padding: 2px 3px;
    border-radius: 5px;
}