5. Make it interactive

Now that we have the different relationships in our data displayed in various views, let's see some of the data behind the visuals, namely the search results.

For this next step of the tutorial, we'll add interactivity to the Sankey diagram. With just a few lines of code, we can wire up the Sankey diagram to a standard Splunk visualization—a Table view—so when you click on a link on the diagram connecting artists to mobile device, the search results behind that data will be displayed. We can easily achieve interactivity between components from two different libraries (built-in Splunk and D3).

We need a new search manager for the data that will drive the output for the result table. We don't know yet what the artist name or event type are, these values depend on the selected link in the diagram. To indicate a variable, we'll use tokens, and the JavaScript we add later will fill the values in.

  1. Add this search manager to the //SEARCH MANAGERS section:
  2.         // Interactive search
            var interactivesearch = new SearchManager({
                "id": "interactivesearch",
                "cancelOnUnload": true,
                "status_buckets": 0,
                "search": mvc.tokenSafe("| inputlookup musicdata.csv | search artist_name=$artist_name$ eventtype=$eventtype$"), 
                "app": utils.getCurrentApp(),
                "auto_cancel": 90,
                "preview": true,
            });
  3. Now let's add the Table view to display the results. In the layout section, we'll add another row below the one containing the Sankey diagram. Find this code:
  4.     <!-- End second row -->

    Add this code below it to display the table:

        <!-- Third row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 100%;">
                <div class="dashboard-panel scrollable">
                    <div class="panel-element-row">
                        <div class="dashboard-element table">
                            <div class="panel-head">
                                <h3>Results for Artists Downloaded to Devices</h3>
                            </div>
                            <div class="panel-body">
                                <div id="interactiveviewer"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End third row -->
  5. To define the table, we need to create a TableElement object. At the end of the //VIEWS: VISUALIZATION ELEMENTS section, add the following code:
  6.         // Table to display interactive data
            var interactiveviewer = new TableElement({
                "id": "interactiveviewer",
                "drilldown": "none",
                "managerid": "interactivesearch",
                "el": $("#interactiveviewer")
            }, {tokens: true}).render();
  7. Let's add a little bit of CSS to ensure the link that we select stays highlighted, and that the built-in Splunk result table is scrollable. Add the following code to the <style> section:
  8.         .link.my-selected {
                stroke: yellow;
            }
            .scrollable {
                overflow-y: auto;
            }
  9. Now all we need to do is wire these two UI visualizations together using some straightforward JavaScript. We'll use a click event to set tokens in the default token model.
  10. Find this line of code:

            data.on("data", formatResults);

    Add this JavaScript above that line of code:

                // Interactivity
                var tokens = mvc.Components.get("default");
    
                sankeyHelper.getLink().on("click", function(clickedLink) {
                    // Highlight the link that was clicked
                    sankeyHelper.getLink().classed("my-selected", false);
                    d3.select(this).classed("my-selected", true);
    
                    // Update the tokens on the search manager
                    tokens.set("artist_name", '\"' + clickedLink.source.name + '\"');
                    tokens.set("eventtype", clickedLink.target.name);
                });
  11. Save the page, and refresh and reload the dashboard if you need to, then try it out: click on a link in the "Artists Downloaded to Devices" diagram and see how it updates the result table below it. Interactivity!
  12. Interactive Sankey diagram

Continue to 6. Display images from a web service.