Consistent string format of the binary data

core/gui/src/app/common/util/json.ts

@@ -20,26 +20,35 @@ export function isBinary(str: string): boolean {
   return binaryRegex.test(str);
 }
 
-export function trimDisplayJsonData(rowData: IndexableObject, maxLen: number): Record<string, unknown> {
-  return deepMap<Record<string, unknown>>(rowData, value => {
-    if (typeof value === "string") {
-      if (isBase64(value) || isBinary(value)) {
-        const length = value.length;
-        // If length is less than 13, show the entire string.
-        if (length < 13) {
-          return `bytes'${value}' (length: ${length})`;
-        }
-        // Otherwise, show the leading and trailing bytes with ellipsis in between.
-        const leadingBytes = value.slice(0, 10);
-        // If the length of the value is less than 10, leadingBytes will take the entire string.
-        const trailingBytes = value.slice(-3);
-        // If the length of the value is less than 3, trailingBytes will take the entire string.
-        return `bytes'${leadingBytes}...${trailingBytes}' (length: ${length})`;
-      }
-      if (value.length > maxLen) {
-        return value.substring(0, maxLen) + "...";
-      }
+export function formatBinaryData(value: string): string {
+  const length = value.length;
+  // If length is less than 13, show the entire string.
+  if (length < 13) {
+    return `bytes'${value}' (length: ${length})`;
+  }
+  // Otherwise, show the leading and trailing bytes with ellipsis in between.
+  const leadingBytes = value.slice(0, 10);
+  // If the length of the value is less than 10, leadingBytes will take the entire string.
+  const trailingBytes = value.slice(-3);
+  // If the length of the value is less than 3, trailingBytes will take the entire string.
+  return `bytes'${leadingBytes}...${trailingBytes}' (length: ${length})`;
+}
+
+export function trimAndFormatData(value: any, maxLen: number): string {
+  if (value === null) {
+    return "NULL";
+  }
+  if (typeof value === "string") {
+    if (isBase64(value) || isBinary(value)) {
+      return formatBinaryData(value);
+    }
+    if (value.length > maxLen) {
+      return value.substring(0, maxLen) + "...";
     }
-    return value;
-  });
+  }
+  return value?.toString() ?? "";
+}
+
+export function trimDisplayJsonData(rowData: IndexableObject, maxLen: number): Record<string, unknown> {
+  return deepMap<Record<string, unknown>>(rowData, value => trimAndFormatData(value, maxLen));
 }

core/gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts

@@ -11,7 +11,7 @@ import { RowModalComponent } from "../result-panel-modal.component";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 import { style } from "@angular/animations";
-import { isBase64, isBinary } from "src/app/common/util/json";
+import { isBase64, isBinary, trimAndFormatData } from "src/app/common/util/json";
 import { ResultExportationComponent } from "../../result-exportation/result-exportation.component";
 
 export const TABLE_COLUMN_TEXT_LIMIT = 100;
@@ -343,21 +343,19 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
       columnDef: col.columnKey,
       header: col.columnText,
       getCell: (row: IndexableObject) => {
-        if (row[col.columnKey] !== null && row[col.columnKey] !== undefined) {
+        if (row[col.columnKey] === null) {
+          return "NULL"; // Explicitly show NULL for null values
+        } else if (row[col.columnKey] !== undefined) {
           return this.trimTableCell(row[col.columnKey].toString());
         } else {
-          // allowing null value from backend
-          return "";
+          return ""; // Keep empty string for undefined values
         }
       },
     }));
   }
 
-  trimTableCell(cellContent: string): string {
-    if (cellContent.length > TABLE_COLUMN_TEXT_LIMIT) {
-      return cellContent.substring(0, TABLE_COLUMN_TEXT_LIMIT) + "...";
-    }
-    return cellContent;
+  trimTableCell(cellContent: any): string {
+    return trimAndFormatData(cellContent, TABLE_COLUMN_TEXT_LIMIT);
   }
 
   isBinaryData(cellContent: any): boolean {