Can I use SplunkJS extension to highlight a table row based on cell value (works, but not always)?

[kaneru]

To start off, I know that there are threads that already answer this, but those threads existed a long time ago. I have a question with the code that I will provide in the post. For some reason, when I try to apply this JS extension to the dashboard I have, it will not always work. If I refresh the page or go into edit mode... the rows don't stay highlighted.

I'm wondering what would cause this since I thought the table would pre-render each time the page is refreshed or goes into and out of edit mode.

Here's the code for the JS extension...

require([
  "underscore",
  "jquery",
  "splunkjs/mvc",
  "splunkjs/mvc/tableview",
  "splunkjs/mvc/simplexml/ready!",
], function (_, $, mvc, TableView) {
  // row Coloring by String Comparision of check field and True
  let CustomRangeRenderer = TableView.BaseCellRenderer.extend({
    canRender: function (cell) {
      // enable this custom cell renderer for check field
      return _(["check"]).contains(cell.field);
    },
    render: function ($td, cell) {
      // add a class to the cell based on the returned value
      var value = cell.value;

      // apply interpretation for check field
      if (cell.field === "check") {
        if (value === "True") {
          $td.addClass("range-cell").addClass("range-severe");
        }
      }
      // update the cell content with string value
      $td.text(value).addClass("string");
    },
  });

  mvc.Components.get("highlight").getVisualization(function (tableView) {
    tableView.on("rendered", function () {
      // apply class of the cells to the parent row in order to color the whole row
      tableView.$el.find("td.range-cell").each(function () {
        $(this).parents("tr").addClass(this.className);
      });
    });
    // add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());
  });
});

The CSS is here...

/* Row Coloring */

#highlight tr.range-severe td {
    background-color: #D93F3C !important;
}

#highlight .table td {
    border-top: 1px solid #fff;
}

#highlight td.range-severe {
    font-weight: bold;
}

And finally the XML code to create the dashboard to replicate the issue. I should note that I am on Safari.

<dashboard stylesheet="js_functions:table_row_highlight.css" script="js_functions:table_row_highlight.js">
  <label>JS Row Highlight test</label>
  <row>
    <panel>
      <table id="highlight">
        <search>
          <query>| makeresults
| eval id=1
|  eval check="True,False,True,False,False,True,False,True,False,True,False,False,True"
| eval check=split(check,",")
| mvexpand check
| accum id
| eval alert_name="Alert ".id</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>