How to render D3 tree on textbox value change,using this new value as input for search manager

[jsharma123]

HI,

I need help in rendering D3 tree on text box input change.
I have a textbox input variable and a D3 tree to display parent child relationship.
transaction_id

The search manager has query with transaction_id token.

//
        // Search manager
        //
var sankeysearch = new SearchManager({
            "id": "sankeysearch",
            "earliest_time": "0",
            "latest_time": "$latest$",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "search": "index=oil itid=$transaction_id$ |table sid,psid,rsid,env,meth,status,evtType",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

Now i want to render my tree with new data ,whenever the value in textbox change.

//
        // VIEWS: FORM INPUTS
        //

        var input1 = new TextInput({
            "id": "input1",
            "searchWhenChanged": true,
            "value": "$form.transaction_id$",
            "el": $('#input1')
        }, {tokens: true}).render();

        input1.on("change", function(newValue) {
            FormUtils.handleValueChange(input1);
        });

      //Tree Code

      function renderTree(tid){
     xxxxxx
     }

How to call this function with new value from textbox and this value should be picked up by search manager

Thanks.

[jsharma123 · Accepted solution]

The issue in the question was resolved by initial call to render function , after that each time the value changed search manager re-rendered the Tree.

Second issue was the tree was not getting cleared when input box was empty.

This has been achieved by modifying the DOM using javascript

input1.on("change", function(newValue) {
                 if(newValue.length==0){
                 d3.select("#chart").select("svg").remove();
                     }
                     FormUtils.handleValueChange(input1);
                 });

Another way as suggested above is to use

<div id="panel1" class="dashboard-cell" style="width: 100%;" data-depends="$selFilter$">

It didn't solve my use case though.

[jsharma123]

@niketnilay , I tried what you have suggested. It hide the panel only during initial load.
Once I enter some value in text box the panel show up and then even after clearing the input box the panel stays on screen

I could achieve the behavior I wanted by checking on input value in box and clearing the d3 svg component.

input1.on("change", function(newValue) {
                if(newValue.length==0){
                d3.select("#chart").select("svg").remove();
                    }
                    FormUtils.handleValueChange(input1);
                });

[niketn]

@jssharma123, sure JavaScript gives your more flexibility in modifying the DOM. Depends should have worked as it is the expected behavior for depends to clear off the Panel/Row/HTML/viz etc based on token not being set. It is not meant only for the first time. Did you have Search When Changed turned on for text box so that it updates/unsets the token without Submit?

Nevertheless, Please convert your comment as answer and Accept to mark the same as answered!

[jsharma123]

@niketnilay ,I am using HTML Dashboard. I tried what you have suggested , it hide the panel only on initial page load.
Once we have some value in text box panel comes up and then even if I clear the input text box the panel stays on screen.

I could make it work by removing d3 svg component after checking the value in input box.

input1.on("change", function(newValue) {
if(newValue.length==0){
d3.select("#chart").select("svg").remove();
}
FormUtils.handleValueChange(input1);
});

[niketn]

@jsharma123 above two settings seem correct. Search Manager for sankeysearch should pick up $transaction_id$ from Text Box, through input1 on change event handler.

Are you using Sankey Diagram? This is available as Custom Visualization on Splunkbase (https://splunkbase.splunk.com/app/3112/). This should work with Simple XML.

Also, if you have created your own visualization using D3, can you check with Splunk's inbuilt visualization preferably table? Check whether text box value is being passed on to the table or not.

[jsharma123]

@niketnilay , Thanks for your response.
I was trying to draw a d3 tree . I could make it work.
But the problem now is when I clear the input field on dash board, I want my d3 svg tree to be removed as well.
Any thoughts on how can I achieve this?
I am think of setting the value of input field to an external variable and check for that variable to clear the svg element.

[niketn]

@jsharma123, you can associate the panel with token using depends attribute:

In Simple XML:

<panel id="panel1" depends="$selFilter$">

If you are using HTML Dashboard and not Simple XML you can add date-depends instead as shown below:

<div id="panel1" class="dashboard-cell" style="width: 100%;" data-depends="$selFilter$">

The panel will be displayed only when the token $selFilter$ is set, otherwise it will be hidden.
https://docs.splunk.com/Documentation/Splunk/latest/Viz/tokens#Access_tokens_to_show_or_hide_user_in....

Let us know if it works.