Row highlighting lag issue

[spkriyaz]

Hi,

I have the JS and CSS created to highlight the row based on my search result. Instead of highlighting the row, I have done encircling the row with blue color to show that is the data for the chosen filter.

Issue:

Initially when the dashboard is loaded and when I chose the filter the row encircling doesn't work but after flipping(choosing different option) the filter option it works fine.

Could you please let me know do I need to add anything to the below JS to fix the issue to get the row encircling when the dashboard loads initially.

JS:

/* TODO: jink to replace theme_utils with that from core */
require.config({
  paths: {
    theme_utils: '../app/simple_xml_examples/theme_utils'
  }
});

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'theme_utils',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView, themeUtils) {

    var isDarkTheme = themeUtils.getCurrentTheme && themeUtils.getCurrentTheme() === 'dark';

     // Row Coloring Example with custom, client-side range interpretation

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for both the ACK_DATE_TIME and the ACK_BY field
            return _(['posting_date', 'Chosen_Row', 'chosen_row']).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 number of historical searches
            if (cell.field === 'Chosen_Row') {
                if (value === 'Yes') {
                    $td.addClass('range-cell').addClass('range-severe');
                }
            }

            // Apply interpretation for number of realtime searches
            if (cell.field === 'chosen_row' | cell.field === 'Chosen_Row') {
                if (value === 'Yes') {
                    $td.addClass('range-cell').addClass('range-severe');
                }
            }

            // Update the cell content
            $td.text(value);
        }
    });

    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);
            });

            if(isDarkTheme){
              tableView.$el.find('td.timestamp').each(function() {
                 $(this).parents('tr').addClass('dark');
              });
            }
        });
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });
	
	    mvc.Components.get('highlight1').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);
            });

            if(isDarkTheme){
              tableView.$el.find('td.timestamp').each(function() {
                 $(this).parents('tr').addClass('dark');
              });
            }
        });
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

});

CSS:

/* Custom Icons */

td.icon {
    text-align: center;
}

td.icon i {
    font-size: 25px;
    text-shadow: 1px 1px #aaa;
}

td.icon .severe {
    color: red;
}

td.icon .elevated {
    color: orangered;
}

td.icon .low {
    color: #006400;
}

/* Row Coloring for selected posting_date */

#highlight tr.range-severe td {
    border: solid rgba(0,164,253,.6)  !important; 
    border-width: 4px 0px 4px 1px  !important;
	font-weight: bold;
}

#highlight1 tr.range-severe td {
    border: solid rgba(0,164,253,.6)  !important; 
    border-width: 4px 0px 4px 1px  !important;
	font-weight: bold;
}

/* Row Coloring */

.icon-inline i {
    font-size: 18px;
    margin-left: 5px;
}
.icon-inline i.icon-alert-circle {
    color: #ef392c;
}
.icon-inline i.icon-alert {
    color: #ff9c1a;
}
.icon-inline i.icon-check {
    color: #5fff5e;
}

/* Dark Theme */

td.icon i.dark {
    text-shadow: none;
}

/* Row Coloring */

#highlight tr.dark td {
    background-color: #5BA383 !important;
}

#highlight tr.range-elevated.dark td {
    background-color: #EC9960 !important;
}

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

#highlight .table .dark td {
    border-top: 1px solid #000000;
    color: #F2F4F5;
}

#highlight1 tr.dark td {
    background-color: #5BA383 !important;
}

#highlight1 tr.range-elevated.dark td {
    background-color: #EC9960 !important;
}

#highlight1 tr.range-severe.dark td {
    background-color: #AF575A !important;
}


#highlight1 .table .dark td {
    border-top: 1px solid #000000;
    color: #F2F4F5;
}

[niketn]

@spkriyaz refer to one of the issues mentioned for Splunk 6.6+ which required in lag for table rendered function call:  https://community.splunk.com/t5/All-Apps-and-Add-ons/Splunk-Dashboard-Examples-Table-Row-highlightin...

You would need to add a small setTimeout() for the tableView.on('rendered', function() { , function call. Please try out and confirm!

[spkriyaz]

Hi @niketn ,

I tried applying the setTimeout() function to my JS but it doesn't work. Could you please check is there anything I missed in the below JS and CSS.

JS:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'theme_utils',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView, themeUtils) {

     // Row Coloring Example with custom, client-side range interpretation

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for both the ACK_DATE_TIME and the ACK_BY field
            return _(['posting_date', 'Chosen_Row', 'chosen_row']).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 number of historical searches
            if (cell.field === 'Chosen_Row') {
                if (value === 'Yes') {
                    $td.addClass('range-cell').addClass('range-severe');
                }
            }

            // Apply interpretation for number of realtime searches
            if (cell.field === 'chosen_row' | cell.field === 'Chosen_Row') {
                if (value === 'Yes') {
                    $td.addClass('range-cell').addClass('range-severe');
                }
            }

            // Update the cell content
            $td.text(value);
        }
    });

    mvc.Components.get('highlight').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
			setTimeout(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);
				 });
		    },100);
        });
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });
	
	    mvc.Components.get('highlight1').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
			setTimeout(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);
				});
			},100);
        });
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

});

CSS:

/* Custom Icons */

td.icon {
    text-align: center;
}

td.icon i {
    font-size: 25px;
    text-shadow: 1px 1px #aaa;
}

td.icon .severe {
    color: red;
}

td.icon .elevated {
    color: orangered;
}

td.icon .low {
    color: #006400;
}

/* Row Coloring for selected posting_date */

#highlight tr.range-severe td {
    border: solid rgba(0,164,253,.6)  !important; 
    border-width: 4px 0px 4px 1px  !important;
	font-weight: bold;
}

#highlight1 tr.range-severe td {
    border: solid rgba(0,164,253,.6)  !important; 
    border-width: 4px 0px 4px 1px  !important;
	font-weight: bold;
}

/* Row Coloring */

.icon-inline i {
    font-size: 18px;
    margin-left: 5px;
}
.icon-inline i.icon-alert-circle {
    color: #ef392c;
}
.icon-inline i.icon-alert {
    color: #ff9c1a;
}
.icon-inline i.icon-check {
    color: #5fff5e;
}

/* Dark Theme */

td.icon i.dark {
    text-shadow: none;
}

/* Row Coloring */

#highlight tr.dark td {
    background-color: #5BA383 !important;
}

#highlight tr.range-elevated.dark td {
    background-color: #EC9960 !important;
}

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

#highlight .table .dark td {
    border-top: 1px solid #000000;
    color: #F2F4F5;
}

#highlight1 tr.dark td {
    background-color: #5BA383 !important;
}

#highlight1 tr.range-elevated.dark td {
    background-color: #EC9960 !important;
}

#highlight1 tr.range-severe.dark td {
    background-color: #AF575A !important;
}


#highlight1 .table .dark td {
    border-top: 1px solid #000000;
    color: #F2F4F5;
}