$\{\{$ Item.payload $\}\}$

$//$tesplate

computed: $\{$ const grouped $=$ this.diagnostics.items.reduce$(($acc$,$ item$)=>\{$ acc$[$item$.$device$\_$serial$]=\{$ weighbridge$\_$name: item.weighbridge$\_$name, device$\_$serial: item.device$\_$serial, $\}$; $//$ Update lastofagnosticupdate if current item timestamp is more recent acc$[$item$.$device$\_$serial$].$lastDiagnosticUpdate $=$ item.timestamp; if $($lacc$[$iten$.$device$\_$serial$].$sub$\_$types$[$item$.$sub$\_$type$])\{$ timestamp: item.timestamp, $\}$ object.assign$($acc$[$item$.$device$\_$serial$].$sub$\_$types$[$item$.$sub$\_$type$].$payload, item.payload$)$; return acc; return object.values$($grouped$)$;$\},$ options: $\{$ if $(!$this.isInitialLoad$)\{\}$ else $\{$ this.options.itemsPerPage $=20\},\}$

$\},$ diskUsageIconColor$($rootDiskUsage$)\{$ if $($rootDiskUsage $==255)$ return 'gray else if $($rootDiskUsage e$)$ return 'warning Jsync loadDiagnostics$()\{$ this.loading $=$ true; let sorting $=\text{'}`$; sorting $=$ null; for $($let $1=$ e; $1$ sortBy.length; $1++)\{$ sorting $+=$ sortBy$[$i$]+\text{'}?+($sortDesc$[$i$]?$ 'desc' : 'asc'$)$; try $\{$ return errorasyne loadolagnostics$()\{$this$.$loading $=$ true;let sorting $=\text{'}\text{'}$; sorting $=$ null;for $($let i $=0$; i $$ sortly.length; i$++)\{$ sorting $+=$ sortBy$[1]+\text{'}$: $+($sortDesc$[1]?$ 'desc' : 'asc'$)$;try $\{$ page, this.keyword$)$; const diagnosticsIteas $=$ response.data.data.items; const weighbridgeInfo $=$ fetchedAssets.find$($asset $=>$ asset.id $===$ iter.weighbridge$\_$id$)$; item.weighbridge$\_$name $=$ weighbridgeInfo.name; this.diagnostics.itens $=$ diagnosticsItems;$\}$ else $\{\}$ this.handleError$($error$)$ this.loading $=$ false;convertTolocalTime$($utcTimestamp$)\{$ if $(!$utctinestamp$)$ return ; $\backslash$ date $=$ new Date$($utcTinestamp$)$; const localoate $=$ new Date$($date$.$getTime$()+$ utcoffset $*6$ecog$)$;$\},$ const index $=$ this, expandedItems.indexof$($item$)$; this.expandedItems.push$($item$)$; this.expandedItems.splice$($index$,1)$;$\},$ return this.diagnostics.items.filter$($iten $=>$ item.device$\_$serial $===$ device$\_$serial$)$;handleError$($error$)\{$ if $($error$.$response$)\{\}$ else if $($error$.$request$)\{\}$ else $\{$this$.$expandedItems.splice$($index$,1)$;

$\},$

getFilteredSubItems$($device$\_$serial$)\{$

return this.diagnostics.items.filter$($item $=>$ item.device$\_$serial $===$ device$\_$serial$)$;

$\},$

handleError$($error$)\{$

console.error$($error$)$

if $($error$.$response$)\{$

this.snackbarMessage $=$ error.response.data.message $||$ 'Unknown error'

$\}$ else if $($error$,$ request$)\{$

this.snackbarMessage $=\text{'}$No response received

$\}$ else $\{$

this.snackbarMessage $=$ error.message

$\}$

this.snackbar $=$ true

$\}$

$\},$

sockets: $\{$

imb$\_$updated$\_$diagnostic: function$($data$)\{$

data.items.forEach$(($item$)=>\{$

console.log$(\text{'}$diagnostic update received: $\text{'},$data$)$

const indexofE$1=$ this.diagnostics.itens.findIndex$($

x $=>$ x$.$device$\_$serial $===$ item.device$\_$serial $8$& x$.$sub$\_$type $===$ item.sub$\_$type

;

If $($indexofEl $>=0)\{$

for $($const key in item$)\{$

if $($key $!==$ 'device$\_$serial' && key $!==$ 'sub$\_$type'$)\{$

this.diagnostics.items$[$indexofEl$][$key$]=$ iten$[$key$]$

$\}$

$\}$ else $\{$

this.diagnostics.items.push$($item$)$;

$\}$

$\})$;

$\},$

$\},$

async mounted$()$

$\},$

created$()\{$

this.nodeHeartbeatUpdateTimer $=$ setInterval$($

this.updateNodeHeartbeat,

$$

$,$

$\},$beforeDestroy$()\{$

clearInterval$($this$.$nodeHeartbeatUpdateTimer$)$

$\},$

$\}$

my interface code which mostly works however there is a slight bug, whenever new

updated data is received by my socket code, any expanded table records displaying the subtable content automatically close, which is not what i want, my expanded tables should remain expanded unless closed by the user, not when the websocket updates data, please fix this bug