From 2f60a5dd4ee458f8fb991d6a8a3c2a3aef6694bc Mon Sep 17 00:00:00 2001 From: Kunwoo Park Date: Mon, 23 Sep 2024 10:09:02 -0700 Subject: [PATCH 1/3] Consistent string format of the binary data --- core/gui/src/app/common/util/json.ts | 48 +++++++++++-------- .../result-table-frame.component.ts | 18 ++----- 2 files changed, 31 insertions(+), 35 deletions(-) diff --git a/core/gui/src/app/common/util/json.ts b/core/gui/src/app/common/util/json.ts index c0bddba07ac..b7e9103b132 100644 --- a/core/gui/src/app/common/util/json.ts +++ b/core/gui/src/app/common/util/json.ts @@ -20,26 +20,32 @@ 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 (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..9dc9ee73478 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; @@ -342,22 +342,12 @@ export class ResultTableFrameComponent implements OnInit, OnChanges { return columns.map(col => ({ columnDef: col.columnKey, header: col.columnText, - getCell: (row: IndexableObject) => { - if (row[col.columnKey] !== null && row[col.columnKey] !== undefined) { - return this.trimTableCell(row[col.columnKey].toString()); - } else { - // allowing null value from backend - return ""; - } - }, + getCell: (row: IndexableObject) => this.trimTableCell(row[col.columnKey]), })); } - 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 { From 5f3c98bc87bce2df4484f7855ae4894b469665b7 Mon Sep 17 00:00:00 2001 From: Kunwoo Park Date: Mon, 23 Sep 2024 10:15:28 -0700 Subject: [PATCH 2/3] Revert the getCell --- .../result-table-frame/result-table-frame.component.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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 9dc9ee73478..cfecf08a52d 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 @@ -342,7 +342,14 @@ export class ResultTableFrameComponent implements OnInit, OnChanges { return columns.map(col => ({ columnDef: col.columnKey, header: col.columnText, - getCell: (row: IndexableObject) => this.trimTableCell(row[col.columnKey]), + getCell: (row: IndexableObject) => { + if (row[col.columnKey] !== null && row[col.columnKey] !== undefined) { + return this.trimTableCell(row[col.columnKey].toString()); + } else { + // allowing null value from backend + return ""; + } + }, })); } From 619dc8e4ed8a217500537cd0904d1422bbfee53a Mon Sep 17 00:00:00 2001 From: Kunwoo Park Date: Mon, 23 Sep 2024 23:30:55 -0700 Subject: [PATCH 3/3] Treat Null value separately --- core/gui/src/app/common/util/json.ts | 3 +++ .../result-table-frame/result-table-frame.component.ts | 7 ++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/core/gui/src/app/common/util/json.ts b/core/gui/src/app/common/util/json.ts index b7e9103b132..8da276d2970 100644 --- a/core/gui/src/app/common/util/json.ts +++ b/core/gui/src/app/common/util/json.ts @@ -35,6 +35,9 @@ export function formatBinaryData(value: string): string { } 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); 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 cfecf08a52d..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 @@ -343,11 +343,12 @@ 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 } }, }));