Force Directed visualisation does not load when it is not on the first tab of the Link Switcher

[imrago]

Im having an issue with the Force Directed App. Nothing is loaded in the component when it is not in the first tab of the Link Switcher component. Changing the time range and clicking Submit loads it again. Is there a solution that it would load initially when I switch over to that.

Sample code to reproduce the issue, it is present both in Splunk v7.0 and v8.0 :

<form>
  <fieldset submitButton="true" autoRun="true">
    <input type="time">
      <label>Time Range</label>
      <default>Last 60 minutes</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <input type="link">
        <label>Choose a view</label>
        <choice value="chart">Chart</choice>
        <choice value="topology">Topology</choice>
        <default>Chart</default>
        <change>
          <condition value="chart">
            <set token="showChart">true</set>
            <unset token="showTopology"></unset>
          </condition>
          <condition value="topology">
            <set token="showTopology">true</set>
            <unset token="showChart"></unset>
          </condition>
        </change>
      </input>
    </panel>
  </row>
  <row depends="$showChart$">
    <panel>
      <chart>
        <title>Chart</title>
        <search>
          <query>
                    index=_internal  | timechart count by host
           </query>
        </search>
        <option name="charting.drilldown">none</option>
        <option name="charting.legend.placement">right</option>
        <option name="height">216</option>
      </chart>
    </panel>
  </row>
  <row depends="$showTopology$">
    <panel>
      <viz type="force_directed_viz.force_directed">
        <title>Topology</title>
        <search>
          <query>

                        index=_internal | stats count by host
                    </query>
        </search>
        <option name="drilldown">none</option>
        <option name="force_directed_viz.force_directed.AttractDistanceMax">200</option>
        <option name="force_directed_viz.force_directed.AttractDistanceMin">60</option>
        <option name="force_directed_viz.force_directed.AttractForceStrength">-300</option>
        <option name="force_directed_viz.force_directed.CollisionIterations">1</option>
        <option name="force_directed_viz.force_directed.CollisionRadius">40</option>
        <option name="force_directed_viz.force_directed.CollisionStrength">0.7</option>
        <option name="force_directed_viz.force_directed.ColorRange1">100</option>
        <option name="force_directed_viz.force_directed.ColorRange1Code">#65a637</option>
        <option name="force_directed_viz.force_directed.ColorRange2">500</option>
        <option name="force_directed_viz.force_directed.ColorRange2Code">#6db7c6</option>
        <option name="force_directed_viz.force_directed.ColorRange3">1000</option>
        <option name="force_directed_viz.force_directed.ColorRange3Code">#f7bc38</option>
        <option name="force_directed_viz.force_directed.ColorRange4">10000</option>
        <option name="force_directed_viz.force_directed.ColorRange4Code">#f58f39</option>
        <option name="force_directed_viz.force_directed.ColorRange5">1000000</option>
        <option name="force_directed_viz.force_directed.ColorRange5Code">#d93f3c</option>
        <option name="force_directed_viz.force_directed.ForceCollision">20</option>
        <option name="force_directed_viz.force_directed.LineColor">disabled</option>
        <option name="force_directed_viz.force_directed.LinkLength">1</option>
        <option name="force_directed_viz.force_directed.RepelDistanceMax">50</option>
        <option name="force_directed_viz.force_directed.RepelDistanceMin">10</option>
        <option name="force_directed_viz.force_directed.RepelForceStrength">-140</option>
        <option name="force_directed_viz.force_directed.StrokeWidth">1</option>
        <option name="force_directed_viz.force_directed.arrows">enabled</option>
        <option name="force_directed_viz.force_directed.theme">dark</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
</form>

[niketn · Accepted solution]

@imrago add a dummy dependency of the link switcher tokens to your panel visualizations. This way the search query will run only after a link is clicked. You can add dummy dependency using comment macro or commands like fields -, so that even when the dummy dependency for the token is set the query performs as expected. Refer to one of my older answers for the dummy dependency: https://answers.splunk.com/answers/683826/how-do-you-set-the-order-of-queries-to-be-run-in-a.html

Try the following based on the sample dashboard code provided:

<form>
  <label>Force Directed Graph</label>
  <fieldset submitButton="true" autoRun="true">
    <input token="time" type="time" searchWhenChanged="false">
      <label>Time Range</label>
      <default>
        <earliest>-60m@m</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <input type="link">
        <label>Choose a view</label>
        <choice value="chart">Chart</choice>
        <choice value="topology">Topology</choice>
        <default>Chart</default>
        <change>
          <condition value="chart">
            <set token="showChart">true</set>
            <unset token="showTopology"></unset>
          </condition>
          <condition value="topology">
            <set token="showTopology">true</set>
            <unset token="showChart"></unset>
          </condition>
        </change>
      </input>
    </panel>
  </row>
  <row depends="$showChart$">
    <panel>
      <chart>
        <title>Chart</title>
        <search>
          <query>
            index=_internal  | timechart count by host| fields - $showChart$
          </query>
          <earliest>$time.earliest$</earliest>
          <latest>$time.latest$</latest>
        </search>
        <option name="charting.drilldown">none</option>
        <option name="charting.legend.placement">right</option>
        <option name="height">216</option>
      </chart>
    </panel>
  </row>
  <row depends="$showTopology$">
    <panel>
      <viz type="force_directed_viz.force_directed">
        <title>Topology</title>
        <search>
          <query>
            index=_internal | stats count by host| fields - $showTopology$
          </query>
          <earliest>$time.earliest$</earliest>
          <latest>$time.latest$</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="force_directed_viz.force_directed.AttractDistanceMax">200</option>
        <option name="force_directed_viz.force_directed.AttractDistanceMin">60</option>
        <option name="force_directed_viz.force_directed.AttractForceStrength">-300</option>
        <option name="force_directed_viz.force_directed.CollisionIterations">1</option>
        <option name="force_directed_viz.force_directed.CollisionRadius">40</option>
        <option name="force_directed_viz.force_directed.CollisionStrength">0.7</option>
        <option name="force_directed_viz.force_directed.ColorRange1">100</option>
        <option name="force_directed_viz.force_directed.ColorRange1Code">#65a637</option>
        <option name="force_directed_viz.force_directed.ColorRange2">500</option>
        <option name="force_directed_viz.force_directed.ColorRange2Code">#6db7c6</option>
        <option name="force_directed_viz.force_directed.ColorRange3">1000</option>
        <option name="force_directed_viz.force_directed.ColorRange3Code">#f7bc38</option>
        <option name="force_directed_viz.force_directed.ColorRange4">10000</option>
        <option name="force_directed_viz.force_directed.ColorRange4Code">#f58f39</option>
        <option name="force_directed_viz.force_directed.ColorRange5">1000000</option>
        <option name="force_directed_viz.force_directed.ColorRange5Code">#d93f3c</option>
        <option name="force_directed_viz.force_directed.ForceCollision">20</option>
        <option name="force_directed_viz.force_directed.LineColor">disabled</option>
        <option name="force_directed_viz.force_directed.LinkLength">1</option>
        <option name="force_directed_viz.force_directed.RepelDistanceMax">50</option>
        <option name="force_directed_viz.force_directed.RepelDistanceMin">10</option>
        <option name="force_directed_viz.force_directed.RepelForceStrength">-140</option>
        <option name="force_directed_viz.force_directed.StrokeWidth">1</option>
        <option name="force_directed_viz.force_directed.arrows">enabled</option>
        <option name="force_directed_viz.force_directed.theme">dark</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
</form>