Flash added rows

frontend/src/assets/main.css

@@ -9,3 +9,7 @@ div#app {
   display: flex;
   flex-direction: column;
 }
+
+.ag-theme-material {
+  --ag-value-change-value-highlight-background-color: #f9ff99;
+}

frontend/src/components/LogViewer.vue

@@ -83,7 +83,8 @@ export default {
       defaultColDef: {
         width: 50,
         initialPinned: true,
-        resizable: true
+        resizable: true,
+        enableCellChangeFlash: true
       },
       currentRowCount: 0,
       viewRowCount: 20,
@@ -140,18 +141,12 @@ export default {
     },
     handleReceiveMessage (event) {
       const eventData = this.parseEventData(event.data);
-      this.gridApi.updateRowData({add: [eventData]});
+      const res = this.gridApi.applyTransaction({
-      this.gridApi.sizeColumnsToFit()
+        add: [eventData]
-    },
-    refreshRowData () {
-      const itemsToUpdate = [];
-      this.rowData.slice(0 - this.viewRowCount).forEach((row, index) => {
-        row.index = index
-        itemsToUpdate.push(row)
       });
-      this.gridApi.applyTransactionAsync({ update: itemsToUpdate });
+      const rowNode = res.add[0]
+      this.gridApi.flashCells({ rowNodes: [rowNode]});
       this.gridApi.sizeColumnsToFit()
-      this.getComboBoxOptions()
     },
     parseEventData (eventData) {
       try {