topic Row highlighting lag issue in Dashboards & Visualizations

Row highlighting lag issue

spkriyaz — Mon, 14 Sep 2020 15:05:15 GMT

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

Re: Row highlighting lag issue

niketn — Mon, 14 Sep 2020 16:36:59 GMT

@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-highlighting-bug/td-p/342612

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

Re: Row highlighting lag issue

spkriyaz — Tue, 15 Sep 2020 09:21:24 GMT

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: