From b652caf61401e9f3f17545965375d8e54a5c1a72 Mon Sep 17 00:00:00 2001
From: "AGRINOMIXLLC\\jkubicki" <jkubicki@adeptag.com>
Date: Thu, 16 Apr 2026 12:22:30 -0400
Subject: [PATCH] UI: Added maxLength parameter to tbJson pipe for truncating
 large attribute values

Added optional maxLength parameter to the tbJson pipe. When provided,
truncates the stringified result and appends an ellipsis character.
Updated attribute table to use tbJson:300 for key and value display
while preserving full untruncated data for copy-to-clipboard.
---
 .../attribute/attribute-table.component.html       |  4 ++--
 ui-ngx/src/app/shared/pipe/tbJson.pipe.ts          | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 9ac6ac1846..0ed2207b7f 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -170,7 +170,7 @@
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute" class="attribute">
             <div class="flex flex-row" style="align-items: center">
-              <span class="ellipsis">{{ attribute.key }}</span>
+              <span class="ellipsis">{{ attribute.key | tbJson:300 }}</span>
               <tb-copy-button
                 class="attribute-copy"
                 [disabled]="isLoading$ | async"
@@ -191,7 +191,7 @@
                     (click)="editAttribute($event, attribute)">
             <div class="flex flex-1 flex-row" style="align-items: center">
               <div class="flex flex-1 flex-row" style="overflow: hidden; align-items: center;">
-                <span class="ellipsis">{{attribute.value | tbJson}}</span>
+                <span class="ellipsis">{{attribute.value | tbJson:300}}</span>
                 @if (attribute.value !== '') {
                   <tb-copy-button
                     class="attribute-copy"
diff --git a/ui-ngx/src/app/shared/pipe/tbJson.pipe.ts b/ui-ngx/src/app/shared/pipe/tbJson.pipe.ts
index 52805f52b2..915f05f93e 100644
--- a/ui-ngx/src/app/shared/pipe/tbJson.pipe.ts
+++ b/ui-ngx/src/app/shared/pipe/tbJson.pipe.ts
@@ -22,12 +22,18 @@ import { isNumber, isObject } from '@core/utils';
     standalone: false
 })
 export class TbJsonPipe implements PipeTransform {
-  transform(value: any): string {
+  transform(value: any, maxLength?: number): string {
+    let result: string;
     if (isObject(value)) {
-      return JSON.stringify(value);
+      result = JSON.stringify(value);
     } else if (isNumber(value)) {
-      return value.toString();
+      result = value.toString();
+    } else {
+      result = value;
     }
-    return value;
+    if (maxLength != null && maxLength > 0 && result && result.length > maxLength) {
+      return result.slice(0, maxLength) + '\u2026';
+    }
+    return result;
   }
 }