This section covers concepts needed to add interactive features to your Custom View.
Selection is a way of viewing a subset of data in a view so that you can:
Preview the effect, in terms of numbers of records included by your selection, in the Barometer at the top-right of the application.
Execute “Move” or “Keep” commands to remove or isolate the selected data.
Trigger Brushing in other views.
Selection should be made by either dragging over or clicking on visual elements in a view, and should ideally be shown in a standard blue colour (css #2161D9) with a 1px blue & white dashed border, either opaque, or a alpha blended overlay.
Selection in custom view is done by setting omniscope.view.context().viewSelection
to a ViewSelection object
containing a Filter rule (identifying the subset of data selected within the view),
and then calling omniscope.view.updated() to notify the framework that the context has been updated.
For convenience, you can assign a Filter directly to context.viewSelection, but it will be wrapped into a ViewSelection by the framework on a subsequent context update. ViewSelection allows you to add an arbitrary custom ‘meta’ object that will be persisted, allowing you to restore a persisted selection should the Filter not be sufficient.
Clearing a selection can be done by setting omniscope.view.context().viewSelection to null.
Most third-party libraries support selection and would need you to implement selection according to their specification.
For example, if you have a Pie view and you are splitting by a field where the internal option is called “split” in order to set the selection you would do something like:
...
// Retrieve the current split field name from the options
var fieldName = omniscope.view.context().options.items.split.inputField;
// Here the text "Category1" is simulated to think that this is the visual element you have clicked on.
var selectedValue = "Category1";
var filter = {
"type": "AND",
"filters": []
};
// Add the specific selection state here, if you have multiple selections
// you would need to add to the filter.filters array each selection state.
filter.filters.push({
"type": "FIELD_VALUE",
"inputField": fieldName,
"operator": "=",
"value": selectedValue
});
// Set the viewSelection property of the context which stores the current selection state.
omniscope.view.context().viewSelection = { filter: filter };
// Or (shorthand):
omniscope.view.context().viewSelection = filter;
// Notify the application of the selection by calling.
omniscope.view.updated();
...
NOTE: If you have auto-paning turned on you don’t have to worry about including the pane configuration as part of the filter. Say you had auto-paning turned on and in Data Explorer the Views paning was activated, then you don’t add a filter describing the pane you are in. All this is done automatically for you by the framework itself, you only have to create a filter object describing what you have clicked on.
Whitespace click is way of clearing the selection and close menus if they are open.
If you do not support selection in your view then simply add the click listener to the body and call the omniscope.view.whitespaceClick(). This would mean that the selection and menus would be closed
if they were to click inside your view.
For example the code below causes whitespace click when you click anywhere on the body.
document.body.addEventListener("click", function() {
omniscope.view.whitespaceClick();
});
If you have your own click listeners to handle selection etc and you also registered a click listener
on the body then you can consume the event by calling event.stopPropagation(). This would
result in the event not being sent to other listeners.
Brushing is a concept of how to show the results of selection made in another view.
There are two ways of showing brushing effect in your view which are described below.
This is the most basic way of showing brushing effect. This is also the default behaviour. In this case your view’s data is automatically filtered to show only selected data, hence when a selection is made in another view, your view only shows the selected data. This is achieved by populating the “filter” in the DataConfig by the framework.
This is more for advanced users. In this case you have to implement your own brushing i.e. showing unselected data in a different colour (grey normally). You can achieve this by showing the data and selected data.
You can retrieve the data before selection from shadowFilter.
You can retrieve the selected data from filter.
Auto-paning is a concept of automatically replicating your view into a pane grid with different filters per pane, as per the pane-x and pane-y settings. This will result in an IFRAME per-pane within which the View will be shown plotting the relevant bucket of data.
By default when you create a new custom view the manifest is already updated with the auto-paning turned on and with default paning options. This means that you do not have to actually do anything to support paning in your view.
All the logic of which pane you are in when you make a selection is taken care for you by the framework when Auto-Query is on. When a manual query is used you have to create the filter that Brushing responds to.