+
+
+
+
+
+
+
{
let component: ResultTableFrameComponent;
@@ -39,6 +40,14 @@ describe("ResultTableFrameComponent", () => {
provide: OperatorMetadataService,
useClass: StubOperatorMetadataService,
},
+ {
+ provide: GuiConfigService,
+ useValue: {
+ env: {
+ limitColumns: 15,
+ },
+ },
+ },
...commonTestProviders,
],
}).compileComponents();
@@ -60,4 +69,8 @@ describe("ResultTableFrameComponent", () => {
expect(component.currentResult).toEqual([{ test: "property" }]);
});
+
+ it("should set columnLimit from config", () => {
+ expect(component.columnLimit).toEqual(15);
+ });
});
diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts
index 591c41e53ac..abb6daa8825 100644
--- a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts
+++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts
@@ -31,6 +31,7 @@ import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { ResultExportationComponent } from "../../result-exportation/result-exportation.component";
import { SchemaAttribute } from "../../../types/workflow-compiling.interface";
import { WorkflowStatusService } from "../../../service/workflow-status/workflow-status.service";
+import { GuiConfigService } from "../../../../common/service/gui-config.service";
/**
* The Component will display the result in an excel table format,
@@ -66,6 +67,9 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
currentPageIndex: number = 1;
totalNumTuples: number = 0;
pageSize = 5;
+ currentColumnOffset = 0;
+ columnLimit = 25;
+ columnSearch = "";
panelHeight = 0;
tableStats: Record> = {};
prevTableStats: Record> = {};
@@ -81,7 +85,8 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
private resizeService: PanelResizeService,
private changeDetectorRef: ChangeDetectorRef,
private sanitizer: DomSanitizer,
- private workflowStatusService: WorkflowStatusService
+ private workflowStatusService: WorkflowStatusService,
+ private guiConfigService: GuiConfigService
) {}
ngOnChanges(changes: SimpleChanges): void {
@@ -114,6 +119,8 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
}
});
+ this.columnLimit = this.guiConfigService.env.limitColumns;
+
this.workflowResultService
.getResultUpdateStream()
.pipe(untilDestroyed(this))
@@ -233,8 +240,37 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
return this.sanitizer.bypassSecurityTrustHtml(styledValue);
}
+ /**
+ * Adjusts the number of result rows displayed per page based on the
+ * available vertical space of the Texera results panel.
+ *
+ * The method accounts for fixed UI elements within the panel—such as
+ * headers, column navigation controls, pagination, and the search bar—
+ * to determine the remaining space available for rendering result rows.
+ * The page size is then recalculated using the height of a single table row.
+ *
+ * To maintain a stable user experience during panel resizes, the current
+ * page index is recomputed so that the previously visible results remain
+ * in view and the user does not experience an abrupt jump in the dataset.
+ *
+ * @param panelHeight - The total height (in pixels) of the results panel.
+ */
private adjustPageSizeBasedOnPanelSize(panelHeight: number) {
- const newPageSize = Math.max(1, Math.floor((panelHeight - 38.62 - 64.27 - 56.6 - 32.63) / 38.62));
+ const TABLE_HEADER_HEIGHT = 38.62;
+ const PANEL_HEADER_HEIGHT = 64.27; // Includes panel title and tab bar
+ const COLUMN_NAVIGATION_HEIGHT = 56.6; // Previous/Next columns controls
+ const PAGINATION_HEIGHT = 32.63;
+ const SEARCH_BAR_HEIGHT_WITH_MARGIN = 77; // Approximate height for search bar and margins
+ const ROW_HEIGHT = 38.62;
+
+ const usedHeight =
+ TABLE_HEADER_HEIGHT +
+ PANEL_HEADER_HEIGHT +
+ COLUMN_NAVIGATION_HEIGHT +
+ PAGINATION_HEIGHT +
+ SEARCH_BAR_HEIGHT_WITH_MARGIN;
+
+ const newPageSize = Math.max(1, Math.floor((panelHeight - usedHeight) / ROW_HEIGHT));
const oldOffset = (this.currentPageIndex - 1) * this.pageSize;
@@ -329,7 +365,7 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
}
this.isLoadingResult = true;
paginatedResultService
- .selectPage(this.currentPageIndex, this.pageSize)
+ .selectPage(this.currentPageIndex, this.pageSize, this.currentColumnOffset, this.columnLimit, this.columnSearch)
.pipe(untilDestroyed(this))
.subscribe(pageData => {
if (this.currentPageIndex === pageData.pageIndex) {
@@ -405,4 +441,25 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
nzFooter: null,
});
}
+
+ onColumnShiftLeft(): void {
+ if (this.currentColumnOffset > 0) {
+ this.currentColumnOffset = Math.max(0, this.currentColumnOffset - this.columnLimit);
+ this.changePaginatedResultData();
+ }
+ }
+
+ onColumnShiftRight(): void {
+ if (this.currentColumns && this.currentColumns.length === this.columnLimit) {
+ this.currentColumnOffset += this.columnLimit;
+ this.changePaginatedResultData();
+ }
+ }
+
+ onColumnSearch(event: Event): void {
+ const input = event.target as HTMLInputElement;
+ this.columnSearch = input.value;
+ this.currentColumnOffset = 0;
+ this.changePaginatedResultData();
+ }
}
diff --git a/frontend/src/app/workspace/service/workflow-result/workflow-result.service.ts b/frontend/src/app/workspace/service/workflow-result/workflow-result.service.ts
index 330b9b5bad5..96937ccbece 100644
--- a/frontend/src/app/workspace/service/workflow-result/workflow-result.service.ts
+++ b/frontend/src/app/workspace/service/workflow-result/workflow-result.service.ts
@@ -312,11 +312,18 @@ export class OperatorPaginationResultService {
);
}
- public selectPage(pageIndex: number, pageSize: number): Observable {
+ public selectPage(
+ pageIndex: number,
+ pageSize: number,
+ columnOffset: number = 0,
+ columnLimit: number = Number.MAX_SAFE_INTEGER,
+ columnSearch: string = ""
+ ): Observable {
// update currently selected page
this.currentPageIndex = pageIndex;
// first fetch from frontend result cache
- const pageCache = this.resultCache.get(pageIndex);
+ const useCache = columnOffset === 0 && columnLimit === Number.MAX_SAFE_INTEGER && columnSearch === "";
+ const pageCache = useCache ? this.resultCache.get(pageIndex) : undefined;
if (pageCache) {
return of({
requestID: "",
@@ -334,6 +341,9 @@ export class OperatorPaginationResultService {
operatorID,
pageIndex,
pageSize,
+ columnOffset,
+ columnLimit,
+ columnSearch,
});
const pendingRequestSubject = new Subject();
this.pendingRequests.set(requestID, pendingRequestSubject);
diff --git a/frontend/src/app/workspace/types/workflow-websocket.interface.ts b/frontend/src/app/workspace/types/workflow-websocket.interface.ts
index 15e2a2809d5..afd5ea6f04a 100644
--- a/frontend/src/app/workspace/types/workflow-websocket.interface.ts
+++ b/frontend/src/app/workspace/types/workflow-websocket.interface.ts
@@ -94,6 +94,9 @@ export type PaginationRequest = Readonly<{
operatorID: string;
pageIndex: number;
pageSize: number;
+ columnOffset?: number;
+ columnLimit?: number;
+ columnSearch?: string;
}>;
export type PaginatedResultEvent = Readonly<{