diff --git a/core/gui/src/app/common/util/json.ts b/core/gui/src/app/common/util/json.ts index c0bddba07ac..8da276d2970 100644 --- a/core/gui/src/app/common/util/json.ts +++ b/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 { - return deepMap>(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 { + return deepMap>(rowData, value => trimAndFormatData(value, maxLen)); } diff --git a/core/gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts b/core/gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts index bb7559cf0b4..dfad0234bba 100644 --- a/core/gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts +++ b/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 {