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.

Rendering the Text Search

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

You 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 your visuals you have a Raw Data Table, the terms searched in the expression will be highlighted:

TS2

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

Some notes about the RDT highlighting

The highlight is internally implemented by placing a custom tag in the specific terms. The tags are <cf-highlighted-field></cf-highlighted-field>. In order to have the RDT highlighted as shown in the picture above, add the style below 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;
}

Styling the Text Search component

To modify the look & feel of the Text Search component, you can use the #text-search-input and #text-search-button selectors in your css file. Notice that the CSS selector is by the ID of the HTML component. You can also modify the button inside the component by using these selectors: .text-search-container #text-search-button. Take a look at these examples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// Change the border-radius property
#text-search-input {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

// Change the font color of the placeholder text
#text-search-input::placeholder {
    color: #DCDCDC;
}

// Change the background color of the button
.text-search-container #text-search-button {
    background-color: #1073af;
}

If you created class style for this component, you can set that class directly to the component as shown below: 

1
document.querySelector('#text-search-input').classList.add('myCustomClass');