All Apps and Add-ons

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

imrago
Contributor

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>
0 Karma
1 Solution

niketnilay
Legend

@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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketnilay
Legend

@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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post


Tune In & Win!

Don't miss out on your
chance to take home free
prizes by helping our players
save the Splunk Cloudom!

Dungeons & Data
Monsters: Splunk O11y
Day Editions Games
stream live:
5/4 at 6:30pm PST
5/5 at 7:00pm PST
on