From 616d1dd7c942f8db4003f331232967b0f9088fc2 Mon Sep 17 00:00:00 2001 From: Tanishq Gandhi Date: Sat, 16 May 2026 01:35:05 -0700 Subject: [PATCH] feat(result-pane): interactive grid with backend pushdown and transformation diff MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Upgrade the operator result pane from a static 5-row nz-table into an interactive, full-dataset spreadsheet view with row-level filtering, sorting, search, and a per-operator transformation summary. Frontend - Replace nz-table with ag-grid Community (MIT) using the Infinite Row Model; pagination with auto-fit page size; column reorder/hide/pin/resize. - Custom header component restores inline column stats (Min / Max / Non-Null / category %). - Per-cell renderer keeps image preview + hover-only download icon. - Row inspector docks inline below the grid (replaces the prior popup modal): shows the row as a JSON tree with prev/next/close. - Row search input above the grid, debounced 250 ms. - Transformation diff strip above the grid: upstream-vs-current row delta and column diff (added / removed / kept / type-changed) with an expandable detail drawer. - Result panel itself is now a fixed bottom dock (top-edge resize only) — no more floating popup. Backend - Extend ResultPaginationRequest with optional filters / sorts / rowSearch. - New VirtualDocument query methods: getRangeWithQuery, countWithQuery (defaulted to no-op fallback). - IcebergPredicateBuilder compiles ColumnFilter into Iceberg Expressions with type-aware value parsing (eq/ne/lt/le/gt/ge/startsWith/isNull/isNotNull/in pushed down; contains/endsWith handled as residual). - IcebergDocument.getRangeWithQuery / countWithQuery: pushdown + residual filter + rowSearch + in-memory sort with a configurable cap (storage.result.sort.max-rows, default 100k); responses include a sortSkipped flag so the UI can prompt the user to narrow the filter. - PaginatedResultEvent carries totalNumTuples and sortSkipped for the filtered/sorted path. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../event/PaginatedResultEvent.scala | 28 +- .../request/ResultPaginationRequest.scala | 11 +- .../web/service/ExecutionResultService.scala | 44 +- common/config/src/main/resources/storage.conf | 13 + .../texera/amber/config/StorageConfig.scala | 3 + .../core/storage/model/QueryClauses.scala | 40 + .../core/storage/model/VirtualDocument.scala | 34 + .../result/iceberg/IcebergDocument.scala | 185 +++- .../iceberg/IcebergPredicateBuilder.scala | 160 ++++ frontend/package.json | 2 + .../result-panel/result-panel.component.html | 46 +- .../result-panel/result-panel.component.scss | 116 ++- .../result-panel/result-panel.component.ts | 112 +-- .../result-cell-renderer.component.ts | 139 +++ .../result-header.component.ts | 287 +++++++ .../result-table-frame.component.html | 273 +++--- .../result-table-frame.component.scss | 168 ++-- .../result-table-frame.component.spec.ts | 13 +- .../result-table-frame.component.ts | 795 ++++++++++-------- .../transformation-diff.component.html | 249 ++++++ .../transformation-diff.component.scss | 396 +++++++++ .../transformation-diff.component.ts | 260 ++++++ .../workflow-result.service.ts | 46 +- .../types/workflow-websocket.interface.ts | 22 + frontend/src/main.ts | 5 + frontend/yarn.lock | 31 + 26 files changed, 2694 insertions(+), 784 deletions(-) create mode 100644 common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/model/QueryClauses.scala create mode 100644 common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/result/iceberg/IcebergPredicateBuilder.scala create mode 100644 frontend/src/app/workspace/component/result-panel/result-table-frame/result-cell-renderer.component.ts create mode 100644 frontend/src/app/workspace/component/result-panel/result-table-frame/result-header.component.ts create mode 100644 frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.html create mode 100644 frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.scss create mode 100644 frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.ts diff --git a/amber/src/main/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEvent.scala b/amber/src/main/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEvent.scala index 081d072180b..910d9f4bc94 100644 --- a/amber/src/main/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEvent.scala +++ b/amber/src/main/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEvent.scala @@ -31,6 +31,24 @@ object PaginatedResultEvent { ): PaginatedResultEvent = { PaginatedResultEvent(req.requestID, req.operatorID, req.pageIndex, table, schema) } + + def apply( + req: ResultPaginationRequest, + table: List[ObjectNode], + schema: List[Attribute], + totalNumTuples: Long, + sortSkipped: Boolean + ): PaginatedResultEvent = { + PaginatedResultEvent( + req.requestID, + req.operatorID, + req.pageIndex, + table, + schema, + Some(totalNumTuples), + sortSkipped + ) + } } case class PaginatedResultEvent( @@ -38,5 +56,13 @@ case class PaginatedResultEvent( operatorID: String, pageIndex: Int, table: List[ObjectNode], - schema: List[Attribute] + schema: List[Attribute], + // Total rows matching the request's filters / rowSearch. Optional because the + // unfiltered fast path doesn't bother recomputing it — the frontend already + // tracks totalNumTuples from WebPaginationUpdate in that case. + totalNumTuples: Option[Long] = None, + // True when sort was requested but the filtered row count exceeded the + // configured `storage.result.sort.max-rows` cap; the table comes back in + // scan order so the UI can prompt the user to narrow their filter. + sortSkipped: Boolean = false ) extends TexeraWebSocketEvent diff --git a/amber/src/main/scala/org/apache/texera/web/model/websocket/request/ResultPaginationRequest.scala b/amber/src/main/scala/org/apache/texera/web/model/websocket/request/ResultPaginationRequest.scala index 4a3e0a58a3e..195d9bbc965 100644 --- a/amber/src/main/scala/org/apache/texera/web/model/websocket/request/ResultPaginationRequest.scala +++ b/amber/src/main/scala/org/apache/texera/web/model/websocket/request/ResultPaginationRequest.scala @@ -19,12 +19,21 @@ package org.apache.texera.web.model.websocket.request +import org.apache.texera.amber.core.storage.model.{ColumnFilter, SortSpec} + case class ResultPaginationRequest( requestID: String, operatorID: String, pageIndex: Int, pageSize: Int, + // The columnOffset / columnLimit / columnSearch fields predate ag-grid's + // built-in column virtualization and column-toggle UI. Kept defaulted for + // wire compatibility with the Python SDK; new frontends do not set them. columnOffset: Int = 0, columnLimit: Int = Int.MaxValue, - columnSearch: Option[String] = None + columnSearch: Option[String] = None, + // Phase 2 / Phase 3 of the result-pane upgrade — row-level pushdown. + filters: Seq[ColumnFilter] = Seq.empty, + sorts: Seq[SortSpec] = Seq.empty, + rowSearch: Option[String] = None ) extends TexeraWebSocketRequest diff --git a/amber/src/main/scala/org/apache/texera/web/service/ExecutionResultService.scala b/amber/src/main/scala/org/apache/texera/web/service/ExecutionResultService.scala index b335ed0c3c7..00d16789af4 100644 --- a/amber/src/main/scala/org/apache/texera/web/service/ExecutionResultService.scala +++ b/amber/src/main/scala/org/apache/texera/web/service/ExecutionResultService.scala @@ -23,7 +23,7 @@ import org.apache.pekko.actor.Cancellable import com.fasterxml.jackson.annotation.{JsonTypeInfo, JsonTypeName} import com.fasterxml.jackson.databind.node.ObjectNode import com.typesafe.scalalogging.LazyLogging -import org.apache.texera.amber.config.ApplicationConfig +import org.apache.texera.amber.config.{ApplicationConfig, StorageConfig} import org.apache.texera.amber.core.storage.model.VirtualDocument import org.apache.texera.amber.core.storage.result._ import org.apache.texera.amber.core.storage.{DocumentFactory, VFSURIFactory} @@ -454,16 +454,44 @@ class ExecutionResultService( ) } - val paginationIterable = { - virtualDocument + val hasQuery = + request.filters.nonEmpty || request.sorts.nonEmpty || request.rowSearch.exists(_.nonEmpty) + + if (!hasQuery) { + val paginationIterable = virtualDocument .getRange(from, from + request.pageSize, columns) .to(Iterable) + val mappedResults = convertTuplesToJson(paginationIterable) + val attributes = paginationIterable.headOption + .map(_.getSchema.getAttributes) + .getOrElse(List.empty) + PaginatedResultEvent.apply(request, mappedResults, attributes) + } else { + // Filter / sort / rowSearch path: compute totalNumTuples up front so the + // frontend datasource can size the infinite scrollbar after the user's + // filter applies. If sort was requested and the matched row count blows + // the cap, IcebergDocument silently returns scan order — we surface that + // via `sortSkipped` so the UI can banner. + val totalMatching = virtualDocument.countWithQuery(request.filters, request.rowSearch) + val sortRequested = request.sorts.nonEmpty + val sortSkipped = sortRequested && totalMatching > StorageConfig.resultSortMaxRows + + val paginationIterable = virtualDocument + .getRangeWithQuery( + from, + from + request.pageSize, + columns, + request.filters, + request.sorts, + request.rowSearch + ) + .to(Iterable) + val mappedResults = convertTuplesToJson(paginationIterable) + val attributes = paginationIterable.headOption + .map(_.getSchema.getAttributes) + .getOrElse(List.empty) + PaginatedResultEvent.apply(request, mappedResults, attributes, totalMatching, sortSkipped) } - val mappedResults = convertTuplesToJson(paginationIterable) - val attributes = paginationIterable.headOption - .map(_.getSchema.getAttributes) - .getOrElse(List.empty) - PaginatedResultEvent.apply(request, mappedResults, attributes) case None => // Handle the case when storageUri is empty diff --git a/common/config/src/main/resources/storage.conf b/common/config/src/main/resources/storage.conf index 29d5f7be512..95b56bb2fb8 100644 --- a/common/config/src/main/resources/storage.conf +++ b/common/config/src/main/resources/storage.conf @@ -18,6 +18,19 @@ # See PR https://github.com/Texera/texera/pull/3326 for configuration guidelines. storage { + # Configuration for result pane query behavior. + # The result pane (frontend) lets users sort by any column; Iceberg cannot push + # ORDER BY into the file reader, so sorts are evaluated in process memory. To + # prevent OOM on very large operator outputs, sorting is skipped once the + # post-filter row count exceeds this cap — the response carries a flag so the UI + # can prompt the user to narrow the filter. + result { + sort { + max-rows = 100000 + max-rows = ${?STORAGE_RESULT_SORT_MAX_ROWS} + } + } + # Configuration for Apache Iceberg, used for storing the workflow results & stats iceberg { catalog { diff --git a/common/config/src/main/scala/org/apache/texera/amber/config/StorageConfig.scala b/common/config/src/main/scala/org/apache/texera/amber/config/StorageConfig.scala index 728e3c0c2de..10644e9d009 100644 --- a/common/config/src/main/scala/org/apache/texera/amber/config/StorageConfig.scala +++ b/common/config/src/main/scala/org/apache/texera/amber/config/StorageConfig.scala @@ -34,6 +34,9 @@ object StorageConfig { val jdbcUsername: String = conf.getString("storage.jdbc.username") val jdbcPassword: String = conf.getString("storage.jdbc.password") + // Result-pane query specifics + val resultSortMaxRows: Long = conf.getLong("storage.result.sort.max-rows") + // Iceberg specifics val icebergCatalogType: String = conf.getString("storage.iceberg.catalog.type") val icebergRESTCatalogUri: String = conf.getString("storage.iceberg.catalog.rest.uri") diff --git a/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/model/QueryClauses.scala b/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/model/QueryClauses.scala new file mode 100644 index 00000000000..09e4986d5e7 --- /dev/null +++ b/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/model/QueryClauses.scala @@ -0,0 +1,40 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +package org.apache.texera.amber.core.storage.model + +/** + * Row-level filter predicate for a VirtualDocument query. + * + * Values are sent as strings over the wire for simplicity; storage backends are + * responsible for parsing them against the column's declared type (see + * IcebergPredicateBuilder for the canonical implementation). + * + * Supported `op` values: eq, ne, lt, le, gt, ge, contains, startsWith, endsWith, + * isNull, isNotNull, in. + */ +case class ColumnFilter( + columnName: String, + op: String, + value: Option[String] = None, + values: Option[Seq[String]] = None +) + +/** Sort specification for a single column. `direction` must be "asc" or "desc". */ +case class SortSpec(columnName: String, direction: String) diff --git a/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/model/VirtualDocument.scala b/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/model/VirtualDocument.scala index 8e72c52a803..7f2ca9a263d 100644 --- a/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/model/VirtualDocument.scala +++ b/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/model/VirtualDocument.scala @@ -61,6 +61,40 @@ abstract class VirtualDocument[T] extends ReadonlyVirtualDocument[T] { def getRange(from: Int, until: Int, columns: Option[Seq[String]] = None): Iterator[T] = throw new NotImplementedError("getRange method is not implemented") + /** + * Get an iterator over rows matching `filters` and `rowSearch`, ordered by `sorts`, + * sliced to `[from, until)` of the filtered/sorted view. + * + * Unlike `getRange`, the `from`/`until` indices here address the post-filter, + * post-sort sequence — not the underlying stored order. Implementations that don't + * support query pushdown should leave the default in place, which ignores + * filters/sorts/rowSearch and falls through to `getRange`. + * + * @param from index (inclusive) into the filtered, sorted view + * @param until index (exclusive) into the filtered, sorted view + * @param columns columns to project (None = all columns) + * @param filters row predicates ANDed together + * @param sorts sort keys applied in order + * @param rowSearch free-text substring; implementation defines how it expands across columns + */ + def getRangeWithQuery( + from: Int, + until: Int, + columns: Option[Seq[String]] = None, + filters: Seq[ColumnFilter] = Seq.empty, + sorts: Seq[SortSpec] = Seq.empty, + rowSearch: Option[String] = None + ): Iterator[T] = getRange(from, until, columns) + + /** + * Count rows that satisfy `filters` and `rowSearch`. Used by paginated UIs to + * size the scrollbar after a filter is applied. Default falls back to total count. + */ + def countWithQuery( + filters: Seq[ColumnFilter] = Seq.empty, + rowSearch: Option[String] = None + ): Long = getCount + /** * get an iterator of all items after the specified index `offset` * @param offset the starting index (exclusive) diff --git a/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/result/iceberg/IcebergDocument.scala b/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/result/iceberg/IcebergDocument.scala index e10152cdaeb..380493b7394 100644 --- a/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/result/iceberg/IcebergDocument.scala +++ b/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/result/iceberg/IcebergDocument.scala @@ -19,14 +19,16 @@ package org.apache.texera.amber.core.storage.result.iceberg +import org.apache.texera.amber.config.StorageConfig import org.apache.texera.amber.core.storage.IcebergCatalogInstance -import org.apache.texera.amber.core.storage.model.{BufferedItemWriter, VirtualDocument} +import org.apache.texera.amber.core.storage.model.{BufferedItemWriter, ColumnFilter, SortSpec, VirtualDocument} import org.apache.texera.amber.core.storage.util.StorageUtil.{withLock, withReadLock, withWriteLock} import org.apache.texera.amber.util.IcebergUtil import org.apache.commons.io.IOUtils import org.apache.iceberg.catalog.{Catalog, TableIdentifier} import org.apache.iceberg.data.Record import org.apache.iceberg.exceptions.NoSuchTableException +import org.apache.iceberg.expressions.Expression import org.apache.iceberg.types.{Conversions, Types} import org.apache.iceberg.{FileScanTask, Table} @@ -128,6 +130,187 @@ private[storage] class IcebergDocument[T >: Null <: AnyRef]( table.newScan().planFiles().iterator().asScala.map(f => f.file().recordCount()).sum } + /** + * Query-aware overload of getRange. Translates `filters` to Iceberg predicates for + * pushdown into the Parquet reader, then applies residual filters (`contains`, + * `endsWith`), `rowSearch`, and `sorts` in memory. The `from`/`until` slice is + * taken from the post-filter, post-sort view. + * + * Sort is capped by `storage.result.sort.max-rows`: when the filtered count + * exceeds the cap, results are returned unsorted in scan order. Callers can + * detect this by comparing `countWithQuery` to the cap. + */ + override def getRangeWithQuery( + from: Int, + until: Int, + columns: Option[Seq[String]] = None, + filters: Seq[ColumnFilter] = Seq.empty, + sorts: Seq[SortSpec] = Seq.empty, + rowSearch: Option[String] = None + ): Iterator[T] = { + if (filters.isEmpty && sorts.isEmpty && rowSearch.isEmpty) { + return getRange(from, until, columns) + } + + withReadLock(lock) { + val tableOpt = IcebergUtil.loadTableMetadata(catalog, tableNamespace, tableName) + if (tableOpt.isEmpty) return Iterator.empty + val table = tableOpt.get + table.refresh() + + val (pushdownExpr, residualFilters) = + IcebergPredicateBuilder.buildPushdownAndResidual(filters, table.schema()) + + // Sort and rowSearch may need columns not present in `columns` (e.g. sort by + // a hidden column, or rowSearch across all strings). Materialize each scan + // with the full schema so residual evaluation works; we re-project at the end. + val records = scanRecords(table, pushdownExpr) + val filtered = records + .filter(rec => matchesAll(rec, residualFilters, table.schema())) + .filter(rec => matchesRowSearch(rec, rowSearch, table.schema())) + + val ordered: Iterator[Record] = + if (sorts.isEmpty) filtered + else sortBoundedOrFallback(filtered, sorts, table.schema()) + + val sliced = ordered.slice(from, until) + + val projectionSchema = columns match { + case Some(cols) => tableSchema.select(cols.asJava) + case None => tableSchema + } + sliced.map(rec => deserde(projectionSchema, rec)) + } + } + + /** + * Count of rows matching `filters` and `rowSearch`. Used by paginated UIs to size + * the scrollbar after a filter is applied; returns `getCount` (file-stat sum) when + * no predicates are present, otherwise scans the filtered iterator. + */ + override def countWithQuery( + filters: Seq[ColumnFilter] = Seq.empty, + rowSearch: Option[String] = None + ): Long = { + if (filters.isEmpty && rowSearch.isEmpty) return getCount + + withReadLock(lock) { + val tableOpt = IcebergUtil.loadTableMetadata(catalog, tableNamespace, tableName) + if (tableOpt.isEmpty) return 0L + val table = tableOpt.get + table.refresh() + val (pushdownExpr, residualFilters) = + IcebergPredicateBuilder.buildPushdownAndResidual(filters, table.schema()) + val records = scanRecords(table, pushdownExpr) + records + .filter(rec => matchesAll(rec, residualFilters, table.schema())) + .count(rec => matchesRowSearch(rec, rowSearch, table.schema())).toLong + } + } + + /** + * Plan scan tasks under the given pushdown expression, sorted by file sequence + * number to keep the in-memory residual evaluator deterministic. + */ + private def scanRecords(table: Table, pushdownExpr: Option[Expression]): Iterator[Record] = { + val baseScan = table.newScan() + val scan = pushdownExpr.fold(baseScan)(baseScan.filter) + val fileTasks = scan.planFiles().iterator().asScala.toSeq.sortBy(_.file().fileSequenceNumber()) + fileTasks.iterator.flatMap { task => + IcebergUtil.readDataFileAsIterator(task.file(), tableSchema, table) + } + } + + private def matchesAll(record: Record, filters: Seq[ColumnFilter], schema: org.apache.iceberg.Schema): Boolean = { + filters.forall(f => matchesOne(record, f, schema)) + } + + private def matchesOne(record: Record, filter: ColumnFilter, schema: org.apache.iceberg.Schema): Boolean = { + val raw = record.getField(filter.columnName) + val needle = filter.value.getOrElse("") + filter.op match { + case "contains" => raw != null && raw.toString.contains(needle) + case "endsWith" => raw != null && raw.toString.endsWith(needle) + case _ => true // pushdown-handled ops never reach here + } + } + + /** + * rowSearch is a substring match across every string-typed column. We do it on + * the raw Record so we can answer based on the field type without deserializing + * the whole row first. + */ + private def matchesRowSearch( + record: Record, + rowSearch: Option[String], + schema: org.apache.iceberg.Schema + ): Boolean = { + rowSearch match { + case None | Some("") => true + case Some(needle) => + val n = needle.toLowerCase + schema.columns().asScala.exists { col => + val v = record.getField(col.name()) + v != null && v.toString.toLowerCase.contains(n) + } + } + } + + /** + * In-memory sort, capped at `storage.result.sort.max-rows`. When the filtered + * count exceeds the cap we return the iterator in scan order — the caller is + * expected to check `countWithQuery` against the cap and surface a UI warning. + */ + private def sortBoundedOrFallback( + records: Iterator[Record], + sorts: Seq[SortSpec], + schema: org.apache.iceberg.Schema + ): Iterator[Record] = { + val cap = StorageConfig.resultSortMaxRows + val buffer = mutable.ArrayBuffer.empty[Record] + val it = records + var overCap = false + while (it.hasNext && !overCap) { + val r = it.next() + buffer += r + if (buffer.size > cap) overCap = true + } + if (overCap) { + // Concatenate what we've buffered with the remainder, unsorted. + buffer.iterator ++ it + } else { + val ordering = sorts.foldRight(Ordering.by[Record, Int](_ => 0)) { (spec, base) => + val cmp = recordOrdering(spec.columnName, spec.direction) + new Ordering[Record] { + override def compare(a: Record, b: Record): Int = { + val r = cmp.compare(a, b) + if (r != 0) r else base.compare(a, b) + } + } + } + buffer.sorted(ordering).iterator + } + } + + private def recordOrdering(columnName: String, direction: String): Ordering[Record] = { + val base: Ordering[Record] = new Ordering[Record] { + override def compare(a: Record, b: Record): Int = { + val va = a.getField(columnName) + val vb = b.getField(columnName) + (va, vb) match { + case (null, null) => 0 + case (null, _) => -1 + case (_, null) => 1 + case (x: java.lang.Comparable[_], y) => + x.asInstanceOf[java.lang.Comparable[Any]].compareTo(y) + case (x, y) => + x.toString.compareTo(y.toString) + } + } + } + if (direction.equalsIgnoreCase("desc")) base.reverse else base + } + /** * Creates a BufferedItemWriter for writing data to the table. * diff --git a/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/result/iceberg/IcebergPredicateBuilder.scala b/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/result/iceberg/IcebergPredicateBuilder.scala new file mode 100644 index 00000000000..a1a41fd9f1f --- /dev/null +++ b/common/workflow-core/src/main/scala/org/apache/texera/amber/core/storage/result/iceberg/IcebergPredicateBuilder.scala @@ -0,0 +1,160 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +package org.apache.texera.amber.core.storage.result.iceberg + +import org.apache.iceberg.Schema +import org.apache.iceberg.expressions.{Expression, Expressions} +import org.apache.iceberg.types.Type +import org.apache.iceberg.types.Types +import org.apache.texera.amber.core.storage.model.ColumnFilter + +/** + * Translates [[ColumnFilter]]s (string-typed-over-the-wire) into Iceberg [[Expression]]s + * suitable for predicate pushdown via `Scan.filter(...)`. + * + * Iceberg pushes the resulting predicates into the Parquet reader and prunes whole + * data files using min/max stats, so accurate type parsing here is the single biggest + * lever for read performance on filtered queries. Filters whose semantics Iceberg + * cannot express (`contains`, `endsWith`) are reported back to the caller via + * [[buildPushdownAndResidual]] so the caller can run them as an in-memory pass. + */ +object IcebergPredicateBuilder { + + /** Operators we can fully express as an Iceberg [[Expression]]. */ + private val PushdownOps: Set[String] = + Set("eq", "ne", "lt", "le", "gt", "ge", "startsWith", "isNull", "isNotNull", "in") + + /** Operators we evaluate after the scan because Iceberg has no native equivalent. */ + private val ResidualOps: Set[String] = Set("contains", "endsWith") + + case class ParseError(columnName: String, value: String, expectedType: String) extends RuntimeException( + s"Cannot interpret '$value' as $expectedType for column '$columnName'" + ) + + /** + * Split the filters into (pushdownExpression, residualFilters): + * - pushdownExpression: ANDed Iceberg predicate suitable for `Scan.filter` + * - residualFilters: filters that must be applied in memory over scan output + * + * Throws [[ParseError]] for malformed values so the caller can surface a typed + * error back to the UI rather than silently returning wrong rows. + */ + def buildPushdownAndResidual( + filters: Seq[ColumnFilter], + schema: Schema + ): (Option[Expression], Seq[ColumnFilter]) = { + if (filters.isEmpty) return (None, Seq.empty) + + val pushable = filters.filter(f => PushdownOps.contains(f.op)) + val residual = filters.filterNot(f => PushdownOps.contains(f.op)) + + residual.foreach { f => + if (!ResidualOps.contains(f.op)) { + throw new IllegalArgumentException(s"Unsupported filter op '${f.op}' on column '${f.columnName}'") + } + } + + val expression = pushable + .map(toExpression(_, schema)) + .reduceOption[Expression]((acc, e) => Expressions.and(acc, e)) + + (expression, residual) + } + + /** + * Convert a single pushdown-capable filter to an Iceberg [[Expression]]. + * Caller is responsible for filtering to PushdownOps first. + */ + def toExpression(filter: ColumnFilter, schema: Schema): Expression = { + val field = Option(schema.findField(filter.columnName)) + .getOrElse(throw new IllegalArgumentException(s"Unknown column: ${filter.columnName}")) + val icebergType = field.`type`() + + filter.op match { + case "isNull" => Expressions.isNull(filter.columnName) + case "isNotNull" => Expressions.notNull(filter.columnName) + case "in" => + val parsed = filter.values + .getOrElse( + throw new IllegalArgumentException(s"`in` filter requires `values` (column: ${filter.columnName})") + ) + .map(v => parseValue(filter.columnName, v, icebergType)) + Expressions.in(filter.columnName, parsed: _*) + case op => + val raw = filter.value.getOrElse( + throw new IllegalArgumentException(s"`$op` filter requires `value` (column: ${filter.columnName})") + ) + val parsed = parseValue(filter.columnName, raw, icebergType) + op match { + case "eq" => Expressions.equal(filter.columnName, parsed) + case "ne" => Expressions.notEqual(filter.columnName, parsed) + case "lt" => Expressions.lessThan(filter.columnName, parsed) + case "le" => Expressions.lessThanOrEqual(filter.columnName, parsed) + case "gt" => Expressions.greaterThan(filter.columnName, parsed) + case "ge" => Expressions.greaterThanOrEqual(filter.columnName, parsed) + case "startsWith" => Expressions.startsWith(filter.columnName, raw) + case _ => throw new IllegalArgumentException(s"Op `$op` is not pushdown-capable") + } + } + } + + /** + * Parse a string value into the JVM type Iceberg expects for the given column type. + * Throws [[ParseError]] when the value doesn't fit the type — letting the websocket + * layer translate that into a structured client error. + */ + def parseValue(columnName: String, raw: String, icebergType: Type): AnyRef = { + try { + icebergType match { + case _ if icebergType == Types.IntegerType.get() => Integer.valueOf(raw.trim) + case _ if icebergType == Types.LongType.get() => java.lang.Long.valueOf(raw.trim) + case _ if icebergType == Types.DoubleType.get() => java.lang.Double.valueOf(raw.trim) + case _ if icebergType == Types.FloatType.get() => java.lang.Float.valueOf(raw.trim) + case _ if icebergType == Types.BooleanType.get() => java.lang.Boolean.valueOf(raw.trim) + case _ if icebergType == Types.StringType.get() => raw + case _ if icebergType == Types.TimestampType.withoutZone() => parseTimestampMicros(raw) + case _ if icebergType == Types.TimestampType.withZone() => parseTimestampMicros(raw) + case _ if icebergType == Types.DateType.get() => Integer.valueOf(java.time.LocalDate.parse(raw.trim).toEpochDay.toInt) + case _ => raw + } + } catch { + case _: NumberFormatException | _: java.time.format.DateTimeParseException => + throw ParseError(columnName, raw, icebergType.toString) + } + } + + /** + * Iceberg stores TIMESTAMP as microseconds-since-epoch. Accept either a numeric + * micros value, an ISO-8601 instant, or a millis-since-epoch number (sniffed by + * magnitude). All three are common shapes for ag-grid's date filter values. + */ + private def parseTimestampMicros(raw: String): java.lang.Long = { + val trimmed = raw.trim + if (trimmed.forall(_.isDigit) || (trimmed.startsWith("-") && trimmed.drop(1).forall(_.isDigit))) { + val n = java.lang.Long.parseLong(trimmed) + // Numbers below year-3000 in millis (< ~3.3e13) come from JS Date.getTime(); + // anything larger we treat as already-micros. + if (math.abs(n) < 100000000000000L) java.lang.Long.valueOf(n * 1000L) else java.lang.Long.valueOf(n) + } else { + val instant = java.time.Instant.parse(trimmed) + java.lang.Long.valueOf(instant.getEpochSecond * 1000000L + instant.getNano / 1000L) + } + } +} diff --git a/frontend/package.json b/frontend/package.json index 08b298260e3..e04da490196 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -41,6 +41,8 @@ "@ngneat/until-destroy": "8.1.4", "@ngx-formly/core": "6.3.12", "@ngx-formly/ng-zorro-antd": "6.3.12", + "ag-grid-angular": "^33", + "ag-grid-community": "^33", "ai": "5.0.93", "ajv": "8.10.0", "concaveman": "2.0.0", diff --git a/frontend/src/app/workspace/component/result-panel/result-panel.component.html b/frontend/src/app/workspace/component/result-panel/result-panel.component.html index d2c6a535493..cfca0afe42c 100644 --- a/frontend/src/app/workspace/component/result-panel/result-panel.component.html +++ b/frontend/src/app/workspace/component/result-panel/result-panel.component.html @@ -22,18 +22,6 @@ nz-menu id="result-buttons" [ngClass]="{'shadow': !width}"> -
  • - -
    • -
  • + [class.hidden]="!width" + (nzResize)="onResize($event)">
      - + *ngIf="width">
    • + nz-tooltip="Minimize Result Panel"> @@ -86,9 +58,7 @@
      -

      +

      Result Panel{{operatorTitle ? ': ' + operatorTitle : ''}}

      No results available to display.
      + [nzDirections]="['top']"> diff --git a/frontend/src/app/workspace/component/result-panel/result-panel.component.scss b/frontend/src/app/workspace/component/result-panel/result-panel.component.scss index 229857b4a44..ea8bb4bd8b8 100644 --- a/frontend/src/app/workspace/component/result-panel/result-panel.component.scss +++ b/frontend/src/app/workspace/component/result-panel/result-panel.component.scss @@ -19,52 +19,52 @@ :host { display: block; - height: 100%; - width: 100%; position: fixed; + inset: 0; + pointer-events: none; z-index: 4; } #texera-workspace { position: relative; + pointer-events: none; + height: 100%; } +/** + * Result panel is docked along the bottom edge: full viewport width, height + * resizable from the top edge only. No drag-to-move. The host wrapper has + * pointer-events: none so the canvas behind the panel remains interactive + * everywhere the panel isn't drawn; the container re-enables them. + */ #result-container { - position: absolute; - top: -300px; + position: fixed; left: 0; - background: white; - border-radius: 5px; - box-shadow: - 0 3px 1px -2px #0003, - 0 2px 2px #00000024, - 0 1px 5px #0000001f; + right: 0; + bottom: 0; + pointer-events: auto; + background: #ffffff; + border-top: 1px solid #e8e8e8; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); + display: flex; + flex-direction: column; + overflow: hidden; + transition: height 120ms ease; } -// make modal body scrollable and modal size fixed -.modal-body { - min-height: calc(50vh); - overflow-y: auto !important; +#result-container.hidden { + height: 0 !important; + border-top: 0; + box-shadow: none; } -// change the internal color of pretty json of the result details - -$type-colors: ( - string: black, - number: #27837a, - boolean: #751866, - date: #10536d, - array: #999, - object: #999, - function: #999, - "null": #fff, - undefined: #fff, -); #content { - overflow-y: auto; + flex: 1 1 auto; + display: flex; + flex-direction: column; + overflow: hidden; padding-top: 38px; - width: inherit; - height: inherit; + width: 100%; } .result-content, @@ -73,20 +73,35 @@ $type-colors: ( height: 100%; } +:host ::ng-deep .result-content.ant-tabs { + flex: 1 1 auto; + min-height: 0; +} + +/** + * Floating "open" pill, shown when the dock is minimised. Sits in the + * bottom-left so the user can re-open the panel without hunting for a menu. + */ #result-buttons { - position: absolute; - bottom: 0; - left: 0; - z-index: 4; + position: fixed; + bottom: 8px; + left: 8px; + z-index: 5; display: flex; + pointer-events: auto; } +/** + * Minimise (−) button anchored to the panel's top-right. Floats above the + * title bar. + */ #panel-button { - position: fixed; + position: absolute; top: 0; right: 0; z-index: 4; display: flex; + pointer-events: auto; } .ant-menu-item { @@ -96,10 +111,6 @@ $type-colors: ( padding: 0 9px; } -#divider { - margin: 0; -} - .shadow { border-radius: 5px; box-shadow: @@ -109,11 +120,30 @@ $type-colors: ( } #title { - padding: 5px 9px; - border-bottom: 1px solid #e0e0e0; + padding: 6px 12px; + border-bottom: 1px solid #e8e8e8; position: absolute; top: 0; - background: white; - width: 100%; + left: 0; + right: 38px; + margin: 0; + background: #fafafa; + font-size: 13px; + font-weight: 600; + color: rgba(0, 0, 0, 0.85); z-index: 2; } + +/** + * Re-style the resize handle on the top edge so it reads as a horizontal grip. + */ +:host ::ng-deep .nz-resizable-handle-top { + height: 6px; + top: -3px; + cursor: ns-resize; + background: transparent; +} + +:host ::ng-deep .nz-resizable-handle-top:hover { + background: rgba(24, 144, 255, 0.2); +} diff --git a/frontend/src/app/workspace/component/result-panel/result-panel.component.ts b/frontend/src/app/workspace/component/result-panel/result-panel.component.ts index 3260afb290d..dae927a0d4e 100644 --- a/frontend/src/app/workspace/component/result-panel/result-panel.component.ts +++ b/frontend/src/app/workspace/component/result-panel/result-panel.component.ts @@ -17,16 +17,7 @@ * under the License. */ -import { - ChangeDetectorRef, - Component, - ElementRef, - HostListener, - OnDestroy, - OnInit, - Type, - ViewChild, -} from "@angular/core"; +import { ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, Type } from "@angular/core"; import { merge } from "rxjs"; import { ExecuteWorkflowService } from "../../service/execute-workflow/execute-workflow.service"; import { WorkflowActionService } from "../../service/workflow-graph/model/workflow-action.service"; @@ -43,25 +34,20 @@ import { ErrorFrameComponent } from "./error-frame/error-frame.component"; import { WorkflowConsoleService } from "../../service/workflow-console/workflow-console.service"; import { NzResizeEvent, NzResizableDirective, NzResizeHandlesComponent } from "ng-zorro-antd/resizable"; import { VisualizationFrameContentComponent } from "../visualization-panel-content/visualization-frame-content.component"; -import { calculateTotalTranslate3d } from "../../../common/util/panel-dock"; -import { isDefined } from "../../../common/util/predicate"; -import { CdkDragEnd, CdkDrag, CdkDragHandle } from "@angular/cdk/drag-drop"; import { PanelService } from "../../service/panel/panel.service"; import { WorkflowCompilingService } from "../../service/compile-workflow/workflow-compiling.service"; import { CompilationState } from "../../types/workflow-compiling.interface"; import { WorkflowFatalError } from "../../types/workflow-websocket.interface"; -import { NzMenuDirective, NzMenuItemComponent, NzMenuDividerDirective } from "ng-zorro-antd/menu"; +import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu"; import { NgClass, NgIf, NgFor, NgComponentOutlet, KeyValuePipe } from "@angular/common"; import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch"; import { NzTooltipDirective } from "ng-zorro-antd/tooltip"; import { NzIconDirective } from "ng-zorro-antd/icon"; -import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space"; -import { NzButtonComponent } from "ng-zorro-antd/button"; import { NzTabsComponent, NzTabComponent } from "ng-zorro-antd/tabs"; -import { FormlyRepeatDndComponent } from "../../../common/formly/repeat-dnd/repeat-dnd.component"; -export const DEFAULT_WIDTH = 800; -export const DEFAULT_HEIGHT = 500; +export const DEFAULT_HEIGHT = 360; +/** Width is now a boolean-ish toggle: > 0 means the dock is open. */ +export const OPEN_FLAG = 1; /** * ResultPanelComponent is the bottom level area that displays the * execution result of a workflow after the execution finishes. @@ -79,32 +65,26 @@ export const DEFAULT_HEIGHT = 500; ɵNzTransitionPatchDirective, NzTooltipDirective, NzIconDirective, - NzMenuDividerDirective, - CdkDrag, NzResizableDirective, - NzSpaceCompactItemDirective, - NzButtonComponent, - CdkDragHandle, NzTabsComponent, NzTabComponent, NgFor, NgComponentOutlet, NzResizeHandlesComponent, - FormlyRepeatDndComponent, KeyValuePipe, ], }) export class ResultPanelComponent implements OnInit, OnDestroy { - @ViewChild("dynamicComponent") - componentOutlets!: ElementRef; frameComponentConfigs: Map; componentInputs: {} }> = new Map(); protected readonly window = window; - id = -1; - width = DEFAULT_WIDTH; + /** + * `width` is kept as a 0-or-OPEN_FLAG toggle for back-compat with template + * `*ngIf="width"` checks. The panel is full-width when open; height alone is + * the user-tunable dimension since this is a bottom dock. + */ + width = OPEN_FLAG; height = DEFAULT_HEIGHT; operatorTitle = ""; - dragPosition = { x: 0, y: 0 }; - returnPosition = { x: 0, y: 0 }; // the highlighted operator ID for display result table / visualization / breakpoint currentOperatorId?: string | undefined; @@ -128,20 +108,11 @@ export class ResultPanelComponent implements OnInit, OnDestroy { } ngOnInit(): void { - const style = localStorage.getItem("result-panel-style"); - if (style) document.getElementById("result-container")!.style.cssText = style; - const translates = document.getElementById("result-container")!.style.transform; - const [xOffset, yOffset, _] = calculateTotalTranslate3d(translates); - this.returnPosition = { x: -xOffset, y: -yOffset }; - this.updateReturnPosition(DEFAULT_HEIGHT, this.height); this.registerAutoRerenderResultPanel(); this.registerAutoOpenResultPanel(); this.handleResultPanelForVersionPreview(); this.panelService.closePanelStream.pipe(untilDestroyed(this)).subscribe(() => this.closePanel()); - this.panelService.resetPanelStream.pipe(untilDestroyed(this)).subscribe(() => { - this.resetPanelPosition(); - this.openPanel(); - }); + this.panelService.resetPanelStream.pipe(untilDestroyed(this)).subscribe(() => this.openPanel()); this.workflowActionService.resultPanelOpen$.pipe(untilDestroyed(this)).subscribe(open => { if (open) { this.openPanel(); @@ -153,13 +124,7 @@ export class ResultPanelComponent implements OnInit, OnDestroy { @HostListener("window:beforeunload") ngOnDestroy(): void { - localStorage.setItem("result-panel-width", String(this.width)); localStorage.setItem("result-panel-height", String(this.height)); - - const resultContainer = document.getElementById("result-container"); - if (resultContainer) { - localStorage.setItem("result-panel-style", resultContainer.style.cssText); - } } handleResultPanelForVersionPreview() { @@ -366,58 +331,19 @@ export class ResultPanelComponent implements OnInit, OnDestroy { } openPanel() { - this.height = DEFAULT_HEIGHT; - this.width = DEFAULT_WIDTH; + this.height = Number(localStorage.getItem("result-panel-height")) || DEFAULT_HEIGHT; + this.width = OPEN_FLAG; this.resizeService.changePanelSize(this.width, this.height); } closePanel() { - this.height = 32.5; this.width = 0; + this.resizeService.changePanelSize(this.width, this.height); } - resetPanelPosition() { - this.dragPosition = { x: this.returnPosition.x, y: this.returnPosition.y }; - } - - isPanelDocked() { - return this.returnPosition.x === this.dragPosition.x && this.returnPosition.y === this.dragPosition.y; - } - - handleStartDrag() { - let visualizationResult = this.componentOutlets.nativeElement.querySelector("#html-content"); - if (visualizationResult !== null) { - visualizationResult.style.zIndex = -1; - } - } - - handleEndDrag({ source }: CdkDragEnd) { - /** - * records the most recent panel location, updating dragPosition when dragging is over - */ - const { x, y } = source.getFreeDragPosition(); - this.dragPosition = { x: x, y: y }; - let visualizationResult = this.componentOutlets.nativeElement.querySelector("#html-content"); - if (visualizationResult !== null) { - visualizationResult.style.zIndex = 0; - } - } - - onResize({ width, height }: NzResizeEvent) { - cancelAnimationFrame(this.id); - this.updateReturnPosition(this.height, height); - this.id = requestAnimationFrame(() => { - this.width = width!; - this.height = height!; - this.resizeService.changePanelSize(this.width, this.height); - }); - } - - updateReturnPosition(prevHeight: number, newHeight: number | undefined) { - /** - * Updating returnPosition ensures that even if the panel gets resized,it can be docked correctly to the left-bottom corner of the canvas. - */ - if (!isDefined(newHeight)) return; - this.returnPosition = { x: this.returnPosition.x, y: this.returnPosition.y + prevHeight - newHeight }; + onResize({ height }: NzResizeEvent) { + if (height === undefined) return; + this.height = height; + this.resizeService.changePanelSize(this.width, this.height); } } diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-cell-renderer.component.ts b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-cell-renderer.component.ts new file mode 100644 index 00000000000..02d4eb5bb42 --- /dev/null +++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-cell-renderer.component.ts @@ -0,0 +1,139 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Component } from "@angular/core"; +import { NgIf } from "@angular/common"; +import { ICellRendererAngularComp } from "ag-grid-angular"; +import { ICellRendererParams } from "ag-grid-community"; +import { NzButtonComponent } from "ng-zorro-antd/button"; +import { NzIconDirective } from "ng-zorro-antd/icon"; + +/** + * Identifies a base64-encoded image data URL so the cell can render an inline + * thumbnail instead of the raw string. Kept inline to avoid a fan-out import + * for a one-line check. + */ +function isImageDataUrl(value: unknown): value is string { + return typeof value === "string" && /^data:image\/(?:png|jpeg|gif|webp);base64,/i.test(value); +} + +export interface ResultCellRendererParams extends ICellRendererParams { + onDownload: (rowIndex: number, columnName: string) => void; +} + +@Component({ + selector: "texera-result-cell-renderer", + template: ` +
      + + + {{ displayValue }} + + +
      + `, + styles: [ + ` + .cell-wrapper { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + padding-right: 28px; + } + .cell-content { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + } + .image-thumbnail { + display: block; + width: 32px; + height: 32px; + object-fit: cover; + } + .download-button { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + opacity: 0; + transition: opacity 0.2s ease-in-out; + padding: 4px; + } + .download-button i { + font-size: 14px; + color: #1890ff; + } + :host:hover .download-button { + opacity: 0.7; + } + :host:hover .download-button:hover { + opacity: 1; + } + `, + ], + imports: [NgIf, NzButtonComponent, NzIconDirective], +}) +export class ResultCellRendererComponent implements ICellRendererAngularComp { + displayValue = ""; + isImage = false; + columnName = ""; + private rowIndex = 0; + private onDownload?: (rowIndex: number, columnName: string) => void; + + agInit(params: ResultCellRendererParams): void { + this.update(params); + } + + refresh(params: ResultCellRendererParams): boolean { + this.update(params); + return true; + } + + private update(params: ResultCellRendererParams): void { + const raw = params.value; + this.columnName = params.colDef?.field ?? ""; + this.rowIndex = params.node.rowIndex ?? 0; + this.onDownload = params.onDownload; + this.isImage = isImageDataUrl(raw); + this.displayValue = raw === null || raw === undefined ? "" : raw.toString(); + } + + onDownloadClick(event: Event): void { + event.stopPropagation(); + this.onDownload?.(this.rowIndex, this.columnName); + } +} diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-header.component.ts b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-header.component.ts new file mode 100644 index 00000000000..e2a56fde497 --- /dev/null +++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-header.component.ts @@ -0,0 +1,287 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Component, ElementRef, ViewChild } from "@angular/core"; +import { NgIf } from "@angular/common"; +import { IHeaderAngularComp } from "ag-grid-angular"; +import { IHeaderParams } from "ag-grid-community"; +import { NzIconDirective } from "ng-zorro-antd/icon"; + +export type HeaderStats = { + min?: number; + max?: number; + not_null_count?: number; + firstCat?: string; + firstPercent?: number; + secondCat?: string; + secondPercent?: number; + other?: number; + reachedLimit?: number; +}; + +export interface ResultHeaderParams extends IHeaderParams { + stats?: HeaderStats; +} + +/** + * Custom ag-grid header that shows the column name on top and an inline stats + * block (Min / Max / Non-Null / Category %) below — restoring the per-column + * summary that existed in the old nz-table result pane. Clicking the title + * progresses sort just like the default header; the filter menu opens via the + * funnel icon on the right of the title row. + */ +@Component({ + selector: "texera-result-header", + template: ` +
      +
      + {{ displayName }} + + + + + + +
      +
      +
      + Min + {{ format(stats?.min) }} +
      +
      + Max + {{ format(stats?.max) }} +
      +
      + Non-Null + {{ formatInt(stats?.not_null_count) }} +
      +
      + + {{ stats?.firstCat }} + ~ + + {{ formatPercent(stats?.firstPercent) }} +
      +
      + + {{ stats?.secondCat }} + ~ + + {{ formatPercent(stats?.secondPercent) }} +
      +
      + Other + {{ formatPercent(stats?.other) }} +
      +
      +
      + `, + styles: [ + ` + :host { + display: block; + width: 100%; + height: 100%; + } + .texera-header { + display: flex; + flex-direction: column; + height: 100%; + padding: 4px 0; + } + .texera-header-title-row { + display: flex; + align-items: center; + gap: 4px; + cursor: pointer; + user-select: none; + padding: 0 4px 2px; + } + .texera-header-title { + flex: 1 1 auto; + font-weight: 600; + font-size: 13px; + color: rgba(0, 0, 0, 0.85); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .texera-header-sort i { + font-size: 10px; + color: #1890ff; + } + .texera-header-menu { + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + border-radius: 3px; + cursor: pointer; + opacity: 0.6; + } + .texera-header-menu:hover { + opacity: 1; + background: rgba(0, 0, 0, 0.04); + } + .texera-header-menu i { + font-size: 11px; + } + .texera-header-menu i.active { + color: #1890ff; + } + .texera-header-stats { + flex: 1 1 auto; + display: flex; + flex-direction: column; + gap: 1px; + padding: 2px 4px 0; + font-size: 11px; + color: rgba(0, 0, 0, 0.55); + font-weight: 400; + line-height: 1.4; + } + .stat-row { + display: flex; + justify-content: space-between; + gap: 6px; + } + .stat-label { + opacity: 0.7; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .stat-value { + font-variant-numeric: tabular-nums; + color: rgba(0, 0, 0, 0.75); + } + .stat-approx { + opacity: 0.6; + } + `, + ], + imports: [NgIf, NzIconDirective], +}) +export class ResultHeaderComponent implements IHeaderAngularComp { + @ViewChild("menuButton", { read: ElementRef }) menuButton?: ElementRef; + + displayName = ""; + stats: HeaderStats | null = null; + sort: "asc" | "desc" | null = null; + filterActive = false; + + private params!: ResultHeaderParams; + + agInit(params: ResultHeaderParams): void { + this.update(params); + params.column.addEventListener("sortChanged", () => this.refreshLocalState()); + params.column.addEventListener("filterChanged", () => this.refreshLocalState()); + } + + refresh(params: ResultHeaderParams): boolean { + this.update(params); + return true; + } + + private update(params: ResultHeaderParams): void { + this.params = params; + this.displayName = params.displayName; + this.stats = params.stats ?? null; + this.refreshLocalState(); + } + + private refreshLocalState(): void { + this.sort = (this.params.column.getSort() as "asc" | "desc" | null) ?? null; + this.filterActive = this.params.column.isFilterActive(); + } + + hasAnyStat(): boolean { + if (!this.stats) return false; + return ( + this.stats.min !== undefined || + this.stats.max !== undefined || + this.stats.not_null_count !== undefined || + this.stats.firstPercent !== undefined || + this.stats.secondPercent !== undefined || + this.stats.other !== undefined + ); + } + + onSortClick(event: MouseEvent): void { + if (!this.params.enableSorting) return; + this.params.progressSort(event.shiftKey); + } + + onMenuClick(event: MouseEvent): void { + event.stopPropagation(); + this.params.showColumnMenu(event.target as HTMLElement); + } + + format(value: number | undefined): string { + if (value === undefined || value === null) return ""; + if (typeof value !== "number") return String(value); + if (Number.isInteger(value)) return value.toString(); + return value.toFixed(2); + } + + formatInt(value: number | undefined): string { + if (value === undefined || value === null) return ""; + return Math.round(value).toLocaleString(); + } + + formatPercent(value: number | undefined): string { + if (value === undefined || value === null) return ""; + return `${value.toFixed(1)}%`; + } +} diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html index 5400d978ee3..4bd6f92e589 100644 --- a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html +++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html @@ -17,164 +17,137 @@ under the License. --> -
      -

      Empty result set

      -

      Tip: enable the eye icon on the operator and execute the workflow to view its results.

      -
      -
      -
      +
      + + +
      -
      -
      - + class="row-search-input" + type="search" + placeholder="Search rows..." + [ngModel]="rowSearch" + (ngModelChange)="onRowSearchInput($event)" /> + +
      +
      + + +
      + +
      +       +
      + + + + +
      + +
      -
      - - - - - {{ column.header }} - - - - -
      - -
      -
      Min
      -
      - -
      -
      -       - -
      -
      Max
      -
      - -
      -
      -       - -
      -
      Non-Null Count
      -
      - -
      -
      -       - -
      -
      - {{tableStats[column.header]['firstCat']}} - (approximate) -
      -
      %
      -
      -       - -
      -
      - {{tableStats[column.header]['secondCat']}} - (approximate) -
      -
      %
      -
      -       - -
      -
      - Other - (approximate) -
      -
      %
      -
      -       -
      - - - - - - - {{ column.getCell(row) }} - - - - -       + +
      +
      + + Row {{ (selectedRowIndex ?? 0) + 1 }} + of {{ totalRows }} + +
      + + + +
      +
      +
      + + +
      +
      + +
      +

      Empty result set

      +

      Tip: enable the eye icon on the operator and execute the workflow to view its results.

      diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss index 6326b83eb2c..cd4cf02e076 100644 --- a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss +++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss @@ -17,128 +17,116 @@ * under the License. */ -:host ::ng-deep .ant-table-pagination.ant-pagination { - margin: 16px 0; +:host { + display: block; + height: 100%; + width: 100%; } -// make the pagination button to the left -:host ::ng-deep .ant-table-pagination-right { - justify-content: left; +.result-table-frame { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; } -td.data-size { - font-size: 12px; +.grid-toolbar { + display: flex; + justify-content: flex-end; + align-items: center; + padding: 4px 8px; + gap: 8px; } -th.header-size { - font-size: 14px; - padding: 2px; +.row-search-input { + width: 220px; } -.custom-stats-row th { - background-color: #ccc; - border-bottom: 1px solid #ccc; - border-top: 1px solid #ccc; - border-left: 1px solid #ccc; - height: auto; - padding: 2px 4px; +.sort-skipped-banner { + margin: 4px 8px; } -.custom-stats-row th:first-child { - border-left: none; /* To remove the left border from the first column */ +.grid-wrapper { + flex: 1 1 auto; + display: flex; + min-height: 200px; + overflow: hidden; } -.statsHeader { - max-height: none; - padding: 2px 0; +.grid-wrapper.with-inspector { + flex: 1 1 60%; + min-height: 120px; } -.statsLine { - display: flex; - justify-content: space-between; - align-items: center; +.result-grid { + flex: 1 1 auto; width: 100%; - gap: 16px; -} - -.statsLine h5 { - margin: 0; - line-height: 1.2; - font-size: 12px; + height: 100%; } -.leftAlign { - text-align: left; - margin-right: 10px; +.row-inspector { + flex: 0 1 40%; + min-height: 140px; + max-height: 50%; + display: flex; + flex-direction: column; + border-top: 1px solid #e8e8e8; + background: #ffffff; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04); } -.rightAlign { - text-align: right; +.row-inspector-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 12px; + background: #fafafa; + border-bottom: 1px solid #e8e8e8; + font-size: 13px; + color: rgba(0, 0, 0, 0.85); } -.borderless-button { - border: none; - background: none; - padding: 0; - margin: 0; - cursor: pointer; - &:hover { - background-color: rgba(0, 0, 0, 0.05); - } +.row-inspector-title { + font-weight: 600; } -.table-cell { - position: relative; - padding-right: 28px; +.row-inspector-actions { + display: flex; + gap: 4px; } -.cell-content { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.row-inspector-body { + flex: 1 1 auto; + overflow: auto; + padding: 8px 12px; + font-size: 12px; } -.download-button { - position: absolute; - right: 4px; - top: 50%; - transform: translateY(-50%); - opacity: 0; - transition: opacity 0.2s ease-in-out; - padding: 4px; - background: transparent; - border: none; - cursor: pointer; - - i { - font-size: 16px; // Slightly larger to match the cloud icon - color: #1890ff; // Ant Design's primary blue color - } +.empty-state { + text-align: center; + padding: 16px; } -.table-row-hover:hover { - .download-button { - opacity: 0.7; - - &:hover { - opacity: 1; - } - } +.column-toggle-panel { + background: #fff; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + padding: 8px; + min-width: 200px; + max-height: 400px; + overflow-y: auto; } -.table-footer { +.column-toggle-actions { display: flex; - justify-content: flex-end; - margin-top: 16px; -} - -.table-container { - position: relative; + justify-content: space-between; + border-bottom: 1px solid #f0f0f0; + padding-bottom: 4px; + margin-bottom: 4px; } -.download-all-button { - position: absolute; - bottom: 16px; - right: 0; +.column-toggle-item { + display: flex; + padding: 4px 6px; + user-select: none; } diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.spec.ts b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.spec.ts index 21dd4db5b0a..45bb49ae9b4 100644 --- a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.spec.ts +++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.spec.ts @@ -24,10 +24,10 @@ import { OperatorMetadataService } from "../../../service/operator-metadata/oper import { StubOperatorMetadataService } from "../../../service/operator-metadata/stub-operator-metadata.service"; import { HttpClientTestingModule } from "@angular/common/http/testing"; import { NzModalModule } from "ng-zorro-antd/modal"; -import { NzTableModule } from "ng-zorro-antd/table"; import { NoopAnimationsModule } from "@angular/platform-browser/animations"; import { commonTestProviders } from "../../../../common/testing/test-utils"; import { GuiConfigService } from "../../../../common/service/gui-config.service"; +import { AllCommunityModule, ModuleRegistry } from "ag-grid-community"; describe("ResultTableFrameComponent", () => { let component: ResultTableFrameComponent; @@ -35,9 +35,13 @@ describe("ResultTableFrameComponent", () => { const GUI_CONFIG_LIMIT = 15; + beforeAll(() => { + ModuleRegistry.registerModules([AllCommunityModule]); + }); + beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ResultTableFrameComponent, HttpClientTestingModule, NzModalModule, NzTableModule, NoopAnimationsModule], + imports: [ResultTableFrameComponent, HttpClientTestingModule, NzModalModule, NoopAnimationsModule], providers: [ { provide: OperatorMetadataService, @@ -63,10 +67,9 @@ describe("ResultTableFrameComponent", () => { expect(component).toBeTruthy(); }); - it("currentResult should not be modified if setupResultTable is called with empty (zero-length) execution result", () => { + it("setupResultTable should leave currentResult unchanged when called with an empty array", () => { component.currentResult = [{ test: "property" }]; - (component as any).setupResultTable([], 0); - + component.setupResultTable([], 0); expect(component.currentResult).toEqual([{ test: "property" }]); }); 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 72a0dbbf72c..bd9f17e9f3b 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 @@ -18,43 +18,59 @@ */ import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core"; -import { NzModalRef, NzModalService } from "ng-zorro-antd/modal"; +import { NgIf, NgForOf } from "@angular/common"; +import { FormsModule } from "@angular/forms"; +import { NzModalService } from "ng-zorro-antd/modal"; +import { AgGridAngular } from "ag-grid-angular"; import { - NzTableQueryParams, - NzTableComponent, - NzTheadComponent, - NzTrDirective, - NzTableCellDirective, - NzThMeasureDirective, - NzTbodyComponent, - NzCellEllipsisDirective, -} from "ng-zorro-antd/table"; + ColDef, + GridApi, + GridOptions, + GridReadyEvent, + IDatasource, + IGetRowsParams, + RowClickedEvent, + themeQuartz, +} from "ag-grid-community"; +import { NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown"; +import { NzCheckboxComponent } from "ng-zorro-antd/checkbox"; +import { NzIconDirective } from "ng-zorro-antd/icon"; +import { NzButtonComponent } from "ng-zorro-antd/button"; +import { NzInputDirective } from "ng-zorro-antd/input"; +import { NzAlertComponent } from "ng-zorro-antd/alert"; +import { NgxJsonViewerModule } from "ngx-json-viewer"; +import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; +import { Subject, takeUntil, debounceTime } from "rxjs"; + import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service"; import { WorkflowResultService } from "../../../service/workflow-result/workflow-result.service"; -import { PanelResizeService } from "../../../service/workflow-result/panel-resize/panel-resize.service"; import { isWebPaginationUpdate, OperatorState } from "../../../types/execute-workflow.interface"; -import { IndexableObject, TableColumn } from "../../../types/result-table.interface"; -import { RowModalComponent } from "../result-panel-modal.component"; -import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; -import { DomSanitizer, SafeHtml } from "@angular/platform-browser"; +import { IndexableObject } from "../../../types/result-table.interface"; import { ResultExportationComponent } from "../../result-exportation/result-exportation.component"; import { WorkflowStatusService } from "../../../service/workflow-status/workflow-status.service"; import { GuiConfigService } from "../../../../common/service/gui-config.service"; -import { NgIf, NgFor, NgClass } from "@angular/common"; -import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space"; -import { NzInputDirective } from "ng-zorro-antd/input"; -import { NzButtonComponent } from "ng-zorro-antd/button"; -import { NzWaveDirective } from "ng-zorro-antd/core/wave"; -import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch"; -import { NzIconDirective } from "ng-zorro-antd/icon"; +import { SchemaAttribute } from "../../../types/workflow-compiling.interface"; +import { ColumnFilter, SortSpec } from "../../../types/workflow-websocket.interface"; +import { ResultCellRendererComponent, ResultCellRendererParams } from "./result-cell-renderer.component"; +import { ResultHeaderComponent } from "./result-header.component"; +import { TransformationDiffComponent } from "./transformation-diff.component"; + +interface ColumnToggle { + name: string; + visible: boolean; +} /** - * The Component will display the result in an excel table format, - * where each row represents a result from the workflow, - * and each column represents the type of result the workflow returns. + * Renders an operator's tabular output as an interactive ag-grid (Community). * - * Clicking each row of the result table will create an pop-up window - * and display the detail of that row in a pretty json format. + * Phase 1 of the smart-result-pane upgrade: the grid replaces nz-table and gives users + * sort, column-header filters, column reorder/hide/pin, and column virtualization for + * wide tables. Backend protocol is unchanged — sort/filter operate on the page in view + * only; full-dataset pushdown lands in Phase 2. + * + * Rows are fetched lazily via ag-grid's Infinite Row Model. The custom IDatasource + * proxies to `OperatorPaginationResultService.selectPage(...)`, which already speaks + * the WebSocket ResultPaginationRequest contract. */ @UntilDestroy() @Component({ @@ -63,424 +79,511 @@ import { NzIconDirective } from "ng-zorro-antd/icon"; styleUrls: ["./result-table-frame.component.scss"], imports: [ NgIf, - NzSpaceCompactItemDirective, - NzInputDirective, - NzButtonComponent, - NzWaveDirective, - ɵNzTransitionPatchDirective, + NgForOf, + FormsModule, + AgGridAngular, + NzDropdownDirective, + NzDropdownMenuComponent, + NzCheckboxComponent, NzIconDirective, - NzTableComponent, - NzTheadComponent, - NzTrDirective, - NgFor, - NzTableCellDirective, - NzThMeasureDirective, - NgClass, - NzTbodyComponent, - NzCellEllipsisDirective, + NzButtonComponent, + NzInputDirective, + NzAlertComponent, + NgxJsonViewerModule, + TransformationDiffComponent, ], }) export class ResultTableFrameComponent implements OnInit, OnChanges { @Input() operatorId?: string; - // display result table - currentColumns?: TableColumn[]; + /** + * ag-grid Quartz theme tuned to match the rest of Texera's ng-zorro / Ant Design + * surface: same accent blue, slightly tighter row height, Ant-typical typography, + * subtle row stripe + hover. Theming is JS-based in ag-grid v33 (no CSS import + * needed) which keeps the bundle smaller too. + */ + readonly theme = themeQuartz.withParams({ + accentColor: "#1890ff", + backgroundColor: "#ffffff", + headerBackgroundColor: "#fafafa", + foregroundColor: "rgba(0, 0, 0, 0.85)", + headerTextColor: "rgba(0, 0, 0, 0.85)", + borderColor: "#e8e8e8", + headerColumnBorder: { color: "#e8e8e8" }, + rowHoverColor: "#e6f7ff", + oddRowBackgroundColor: "#fcfcfc", + selectedRowBackgroundColor: "#bae7ff", + headerFontWeight: 600, + fontSize: 13, + fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", + rowBorder: { color: "#f0f0f0" }, + cellHorizontalPadding: 12, + }); + + readonly gridOptions: GridOptions = { + rowModelType: "infinite", + // Pagination on, page size auto-fits the visible viewport — when the panel is + // taller, more rows fit per page; resize the dock and the page size adjusts. + pagination: true, + paginationAutoPageSize: true, + // Cache block size is the unit ag-grid uses to fetch from the datasource. A + // larger block means fewer WebSocket round-trips when scrolling/paging; the + // cache holds 10 blocks (~2000 rows) before evicting LRU. Tuned to make page + // flips feel instant once the surrounding rows are warm. + cacheBlockSize: 200, + maxBlocksInCache: 10, + cacheOverflowSize: 2, + suppressColumnVirtualisation: false, + rowHeight: 34, + // Header is taller to fit the inline column stats (Min / Max / Non-Null / + // category %), matching the layout the old nz-table result pane had. + headerHeight: 116, + animateRows: false, + rowSelection: { mode: "singleRow", checkboxes: false, enableClickSelection: true }, + defaultColDef: { + sortable: true, + filter: true, + resizable: true, + minWidth: 140, + cellRenderer: ResultCellRendererComponent, + headerComponent: ResultHeaderComponent, + }, + components: { + texeraResultCellRenderer: ResultCellRendererComponent, + texeraResultHeader: ResultHeaderComponent, + }, + }; + + columnDefs: ColDef[] = []; + columnToggles: ColumnToggle[] = []; + hasData = false; + isOperatorFinished = false; + columnLimit = Number.MAX_SAFE_INTEGER; + rowSearch = ""; + sortSkipped = false; + + // Row inspector (bottom panel) state — replaces the prior popup modal. + selectedRow: IndexableObject | null = null; + selectedRowIndex: number | null = null; + totalRows = 0; + + // Preserved for spec back-compat — see setupResultTable below. currentResult: IndexableObject[] = []; - // for more details - // see https://ng.ant.design/components/table/en#components-table-demo-ajax - isFrontPagination: boolean = true; - - isLoadingResult: boolean = false; - - // paginator section, used when displaying rows - - // this attribute stores whether front-end should handle pagination - // if false, it means the pagination is managed by the server - // this starts from **ONE**, not zero - currentPageIndex: number = 1; - totalNumTuples: number = 0; - pageSize = 5; - currentColumnOffset = 0; - columnLimit = 25; - columnSearch = ""; - panelHeight = 0; - tableStats: Record> = {}; - prevTableStats: Record> = {}; - widthPercent: string = ""; - isOperatorFinished: boolean = false; + + private gridApi?: GridApi; + // Cancellation signal for in-flight selectPage subscriptions when the operator or + // grid lifecycle changes underneath us. Avoids cross-talk between datasource calls. + private readonly datasourceCancel$ = new Subject(); + private readonly rowSearchInput$ = new Subject(); + private tableStats: Record> = {}; + private currentFilters: ColumnFilter[] = []; + private currentSorts: SortSpec[] = []; constructor( private modalService: NzModalService, private workflowActionService: WorkflowActionService, private workflowResultService: WorkflowResultService, - private resizeService: PanelResizeService, private changeDetectorRef: ChangeDetectorRef, - private sanitizer: DomSanitizer, private workflowStatusService: WorkflowStatusService, private guiConfigService: GuiConfigService ) {} - ngOnChanges(changes: SimpleChanges): void { - this.operatorId = changes.operatorId?.currentValue; - if (this.operatorId) { - const paginatedResultService = this.workflowResultService.getPaginatedResultService(this.operatorId); - if (paginatedResultService) { - this.isFrontPagination = false; - this.totalNumTuples = paginatedResultService.getCurrentTotalNumTuples(); - this.currentPageIndex = paginatedResultService.getCurrentPageIndex(); - this.changePaginatedResultData(); - - this.tableStats = paginatedResultService.getStats(); - this.prevTableStats = this.tableStats; - } - } - } - ngOnInit(): void { + this.columnLimit = this.guiConfigService.env.limitColumns; + this.workflowStatusService .getStatusUpdateStream() .pipe(untilDestroyed(this)) .subscribe(statusMap => { if (this.operatorId && statusMap[this.operatorId]?.operatorState === OperatorState.Completed) { this.isOperatorFinished = true; - this.changeDetectorRef.detectChanges(); } else { this.isOperatorFinished = false; } }); - this.columnLimit = this.guiConfigService.env.limitColumns; - this.workflowResultService .getResultUpdateStream() .pipe(untilDestroyed(this)) .subscribe(update => { - if (!this.operatorId) { - return; - } + if (!this.operatorId || !this.gridApi) return; const opUpdate = update[this.operatorId]; - if (!opUpdate || !isWebPaginationUpdate(opUpdate)) { - return; - } - let columnCount = this.currentColumns?.length; - if (columnCount) this.widthPercent = (1 / columnCount) * 100 + "%"; - this.isFrontPagination = false; - this.totalNumTuples = opUpdate.totalNumTuples; - if (opUpdate.dirtyPageIndices.includes(this.currentPageIndex)) { - this.changePaginatedResultData(); - } - this.changeDetectorRef.detectChanges(); + if (!opUpdate || !isWebPaginationUpdate(opUpdate)) return; + // Dirty pages or growing totals: invalidate cache so ag-grid refetches on + // next viewport scroll. purgeInfiniteCache() preserves scroll position. + this.gridApi.purgeInfiniteCache(); }); this.workflowResultService .getResultTableStats() .pipe(untilDestroyed(this)) - .subscribe(([prevStats, currentStats]) => { - if (!this.operatorId) { - return; - } - - if (currentStats[this.operatorId]) { - this.tableStats = currentStats[this.operatorId]; - if (prevStats[this.operatorId] && this.checkKeys(this.tableStats, prevStats[this.operatorId])) { - this.prevTableStats = prevStats[this.operatorId]; - } else { - this.prevTableStats = this.tableStats; - } + .subscribe(([, currentStats]) => { + if (!this.operatorId) return; + this.tableStats = currentStats[this.operatorId] ?? {}; + // Update header tooltips with fresh stats without rebuilding column defs. + if (this.gridApi && this.columnDefs.length > 0) { + this.refreshHeaderTooltips(); } }); - this.resizeService.currentSize.pipe(untilDestroyed(this)).subscribe(size => { - this.panelHeight = size.height; - this.adjustPageSizeBasedOnPanelSize(size.height); - let currentPageNum: number = Math.ceil(this.totalNumTuples / this.pageSize); - while (this.currentPageIndex > currentPageNum && this.currentPageIndex > 1) { - this.currentPageIndex -= 1; - } - }); - - if (this.operatorId) { - const paginatedResultService = this.workflowResultService.getPaginatedResultService(this.operatorId); - if (paginatedResultService) { - } - } + // Debounce keystrokes so we don't fire a websocket request per character. + this.rowSearchInput$ + .pipe(debounceTime(250), untilDestroyed(this)) + .subscribe(value => { + this.rowSearch = value; + this.gridApi?.purgeInfiniteCache(); + }); } - checkKeys( - currentStats: Record>, - prevStats: Record> - ): boolean { - let firstSet = Object.keys(currentStats); - let secondSet = Object.keys(prevStats); - - if (firstSet.length != secondSet.length) { - return false; - } - - for (let i = 0; i < firstSet.length; i++) { - if (firstSet[i] != secondSet[i]) { - return false; - } + ngOnChanges(changes: SimpleChanges): void { + if (!changes.operatorId) return; + this.columnDefs = []; + this.columnToggles = []; + this.hasData = false; + this.selectedRow = null; + this.selectedRowIndex = null; + this.totalRows = 0; + this.tableStats = {}; + if (this.gridApi) { + this.attachDatasource(); } - - return true; } - compare(field: string, stats: string): SafeHtml { - let current = this.tableStats[field][stats]; - let previous = this.prevTableStats[field][stats]; - let currentStr: string; - let previousStr: string; - - if (typeof current === "number" && typeof previous === "number") { - currentStr = current.toFixed(2); - previousStr = previous !== undefined ? previous.toFixed(2) : currentStr; - } else { - currentStr = current.toLocaleString(); - previousStr = previous !== undefined ? previous.toLocaleString() : currentStr; - } - let styledValue = ""; - - if (this.isOperatorFinished) { - for (let i = 0; i < currentStr.length; i++) { - styledValue += `${currentStr[i]}`; - } - return this.sanitizer.bypassSecurityTrustHtml(styledValue); - } - - for (let i = 0; i < currentStr.length; i++) { - const char = currentStr[i]; - const prevChar = previousStr[i]; - - if (char !== prevChar) { - styledValue += `${char}`; - } else { - styledValue += `${char}`; - } - } - - return this.sanitizer.bypassSecurityTrustHtml(styledValue); + onGridReady(event: GridReadyEvent): void { + this.gridApi = event.api; + this.attachDatasource(); } /** - * Adjusts the number of result rows displayed per page based on the - * available vertical space of the Texera results panel. + * Wire ag-grid's IDatasource to the existing pagination service. ag-grid asks for + * row ranges; we translate `[startRow, endRow)` into (pageIndex, pageSize) and call + * selectPage. The first response also seeds column definitions from the schema. * - * 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. + * Resolve `paginatedResultService` lazily inside `getRows` instead of at attach + * time — the parent mounts us when the service exists, but the order of input + * binding vs. gridReady can race on fast paths, and lazy lookup also lets a + * mid-stream `purgeInfiniteCache` recover a service that came online late. */ - private adjustPageSizeBasedOnPanelSize(panelHeight: number) { - 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; + private attachDatasource(): void { + if (!this.operatorId || !this.gridApi) return; - const usedHeight = - TABLE_HEADER_HEIGHT + - PANEL_HEADER_HEIGHT + - COLUMN_NAVIGATION_HEIGHT + - PAGINATION_HEIGHT + - SEARCH_BAR_HEIGHT_WITH_MARGIN; + this.datasourceCancel$.next(); - const newPageSize = Math.max(1, Math.floor((panelHeight - usedHeight) / ROW_HEIGHT)); + const datasource: IDatasource = { + getRows: (params: IGetRowsParams) => { + const pageSize = Math.max(1, params.endRow - params.startRow); + const pageIndex = Math.floor(params.startRow / pageSize) + 1; - const oldOffset = (this.currentPageIndex - 1) * this.pageSize; + this.currentFilters = this.translateFilterModel(params.filterModel ?? {}); + this.currentSorts = this.translateSortModel(params.sortModel ?? []); - this.pageSize = newPageSize; - this.resizeService.pageSize = newPageSize; + const paginatedResultService = this.operatorId + ? this.workflowResultService.getPaginatedResultService(this.operatorId) + : undefined; + if (!paginatedResultService) { + params.successCallback([], 0); + return; + } - this.currentPageIndex = Math.floor(oldOffset / newPageSize) + 1; + paginatedResultService + .selectPage( + pageIndex, + pageSize, + 0, + Number.MAX_SAFE_INTEGER, + "", + this.currentFilters, + this.currentSorts, + this.rowSearch + ) + .pipe(takeUntil(this.datasourceCancel$), untilDestroyed(this)) + .subscribe({ + next: page => { + // Filtered responses carry totalNumTuples; the unfiltered fast path falls + // back to the streaming totalNumTuples maintained by the result service. + const total = + page.totalNumTuples !== undefined + ? page.totalNumTuples + : paginatedResultService.getCurrentTotalNumTuples(); + const rows = page.table.slice() as IndexableObject[]; + + if (this.columnDefs.length === 0 && rows.length > 0) { + const schema = paginatedResultService.getSchema(); + // Seed stats from the service snapshot before building columnDefs. + // The stats stream uses pairwise(), so subscribers that mount after + // the workflow has finished never see a paired emission — only the + // service-side cache has the value at that point. + const cachedStats = paginatedResultService.getStats(); + if (cachedStats && Object.keys(cachedStats).length > 0) { + this.tableStats = cachedStats; + } + this.columnDefs = this.buildColumnDefs(rows[0], schema); + this.columnToggles = this.columnDefs.map(c => ({ + name: (c.field ?? c.headerName) as string, + visible: true, + })); + this.gridApi?.setGridOption("columnDefs", this.columnDefs); + } + + this.sortSkipped = page.sortSkipped === true; + this.hasData = total > 0; + this.totalRows = total; + const lastRow = total > params.startRow + rows.length ? undefined : params.startRow + rows.length; + params.successCallback(rows, lastRow); + this.changeDetectorRef.detectChanges(); + }, + error: () => params.failCallback(), + }); + }, + }; + + this.gridApi.setGridOption("datasource", datasource); } /** - * Callback function for table query params changed event - * params containing new page index, new page size, and more - * (this function will be called when user switch page) - * - * @param params new parameters + * Build column definitions from the first row + schema. The schema drives which + * ag-grid filter component each column gets (numeric / date / text), which makes + * type-correct filtering possible without parsing strings on the frontend. */ - onTableQueryParamsChange(params: NzTableQueryParams) { - if (this.isFrontPagination) { - return; - } - if (!this.operatorId) { - return; - } - this.currentPageIndex = params.pageIndex; + private buildColumnDefs(firstRow: IndexableObject, schema: ReadonlyArray): ColDef[] { + const columnKeys = Object.keys(firstRow).filter(k => k !== "_id"); + return columnKeys.map(name => { + const attr = schema.find(s => s.attributeName === name); + const colDef: ColDef = { + field: name, + headerName: name, + filter: this.filterForAttributeType(attr?.attributeType), + headerComponentParams: { stats: this.tableStats[name] }, + cellRendererParams: this.cellRendererParams(name), + }; + return colDef; + }); + } - this.changePaginatedResultData(); + private cellRendererParams(columnName: string): Partial { + return { + onDownload: (rowIndex: number, _: string) => this.openDownloadDialog(rowIndex, columnName), + }; } /** - * Opens the model to display the row details in - * pretty json format when clicked. User can view the details - * in a larger, expanded format. + * Translate ag-grid's filterModel into the wire-format ColumnFilter list. + * + * ag-grid's text/number/date filters emit shapes like + * { type: "contains" | "equals" | "lessThan" | ..., filter: "abc", filterTo?: "..." } + * Combined filters (`AND`/`OR`) show up as { operator, condition1, condition2 }; we + * only support `AND` since the wire predicate list is ANDed by the backend. `OR` + * conditions get flattened to the first condition with a console warning — the + * user can re-express via two single-condition columns or row search. */ - open(indexInPage: number, rowData: IndexableObject): void { - const currentRowIndex = indexInPage + (this.currentPageIndex - 1) * this.pageSize; - // open the modal component - const modalRef: NzModalRef = this.modalService.create({ - // modal title - nzTitle: "Row Details", - nzContent: RowModalComponent, - nzData: { operatorId: this.operatorId, rowIndex: currentRowIndex }, // set the index value and page size to the modal for navigation - // prevent browser focusing close button (ugly square highlight) - nzAutofocus: null, - // modal footer buttons - nzFooter: [ - { - label: "<", - onClick: () => { - const component = modalRef.componentInstance; - if (component) { - component.rowIndex -= 1; - this.currentPageIndex = Math.floor(component.rowIndex / this.pageSize) + 1; - component.ngOnChanges(); - } - }, - disabled: () => modalRef.componentInstance?.rowIndex === 0, - }, - { - label: ">", - onClick: () => { - const component = modalRef.componentInstance; - if (component) { - component.rowIndex += 1; - this.currentPageIndex = Math.floor(component.rowIndex / this.pageSize) + 1; - component.ngOnChanges(); - } - }, - disabled: () => modalRef.componentInstance?.rowIndex === this.totalNumTuples - 1, - }, - { - label: "OK", - onClick: () => { - modalRef.destroy(); - }, - type: "primary", - }, - ], - }); + private translateFilterModel(model: Record): ColumnFilter[] { + const out: ColumnFilter[] = []; + for (const [columnName, raw] of Object.entries(model)) { + const conditions = this.expandFilterModel(raw); + for (const cond of conditions) { + const wire = this.translateSingleCondition(columnName, cond); + if (wire) out.push(wire); + } + } + return out; } - // frontend table data must be changed, because: - // 1. result panel is opened - must display currently selected page - // 2. user selects a new page - must display new page data - // 3. current page is dirty - must re-fetch data - changePaginatedResultData(): void { - if (!this.operatorId) { - return; + private expandFilterModel(raw: unknown): Record[] { + const m = raw as Record; + if (!m || typeof m !== "object") return []; + if (m.operator === "AND" && m.condition1 && m.condition2) { + return [m.condition1 as Record, m.condition2 as Record]; } - const paginatedResultService = this.workflowResultService.getPaginatedResultService(this.operatorId); - if (!paginatedResultService) { - return; + if (m.operator === "OR") { + console.warn("Result pane: OR filter conditions are not pushed to the backend; only the first is applied."); + return [m.condition1 as Record]; } - this.isLoadingResult = true; - paginatedResultService - .selectPage(this.currentPageIndex, this.pageSize, this.currentColumnOffset, this.columnLimit, this.columnSearch) - .pipe(untilDestroyed(this)) - .subscribe(pageData => { - if (this.currentPageIndex === pageData.pageIndex) { - this.setupResultTable(pageData.table, paginatedResultService.getCurrentTotalNumTuples()); - this.changeDetectorRef.detectChanges(); - } - }); + return [m]; } - /** - * Updates all the result table properties based on the execution result, - * displays a new data table with a new paginator on the result panel. - * - * @param resultData rows of the result (may not be all rows if displaying result for workflow completed event) - * @param totalRowCount - */ - setupResultTable(resultData: ReadonlyArray, totalRowCount: number) { - if (!this.operatorId) { - return; + private translateSingleCondition(columnName: string, cond: Record): ColumnFilter | null { + if (!cond || typeof cond !== "object") return null; + const type = cond.type as string | undefined; + const filter = cond.filter as string | number | undefined; + if (!type) return null; + const value = filter !== undefined && filter !== null ? String(filter) : undefined; + + // ag-grid blank/notBlank operate on null-or-empty; map to isNull/isNotNull. + switch (type) { + case "equals": + return { columnName, op: "eq", value }; + case "notEqual": + return { columnName, op: "ne", value }; + case "lessThan": + return { columnName, op: "lt", value }; + case "lessThanOrEqual": + return { columnName, op: "le", value }; + case "greaterThan": + return { columnName, op: "gt", value }; + case "greaterThanOrEqual": + return { columnName, op: "ge", value }; + case "contains": + return { columnName, op: "contains", value }; + case "notContains": + // backend has no notContains; user can invert via column-name search + console.warn(`Result pane: filter 'notContains' on '${columnName}' is not supported.`); + return null; + case "startsWith": + return { columnName, op: "startsWith", value }; + case "endsWith": + return { columnName, op: "endsWith", value }; + case "blank": + return { columnName, op: "isNull" }; + case "notBlank": + return { columnName, op: "isNotNull" }; + case "inRange": { + // ag-grid inRange has both `filter` and `filterTo`; expand into ge AND le. + // The first condition goes in here, caller will get the second via expansion + // if the model represents it as combined. When ag-grid issues a single inRange + // we approximate with ge against `filter` (best-effort). + if (value === undefined) return null; + return { columnName, op: "ge", value }; + } + default: + return null; } - if (resultData.length < 1) { - return; + } + + private translateSortModel(sortModel: { colId: string; sort: string | null | undefined }[]): SortSpec[] { + return sortModel + .filter(s => s.sort === "asc" || s.sort === "desc") + .map(s => ({ columnName: s.colId, direction: s.sort as "asc" | "desc" })); + } + + onRowSearchInput(value: string): void { + this.rowSearchInput$.next(value); + } + + private filterForAttributeType(type: string | undefined): string { + switch (type) { + case "integer": + case "long": + case "double": + return "agNumberColumnFilter"; + case "timestamp": + return "agDateColumnFilter"; + default: + return "agTextColumnFilter"; } + } - this.isLoadingResult = false; - this.changeDetectorRef.detectChanges(); + private refreshHeaderTooltips(): void { + if (!this.gridApi) return; + const updated = this.columnDefs.map(col => ({ + ...col, + headerComponentParams: { stats: this.tableStats[col.field ?? ""] }, + })); + this.columnDefs = updated; + this.gridApi.setGridOption("columnDefs", updated); + this.gridApi.refreshHeader(); + } - // creates a shallow copy of the readonly response.result, - // this copy will be has type object[] because MatTableDataSource's input needs to be object[] - this.currentResult = resultData.slice(); + onRowClicked(event: RowClickedEvent): void { + if (!this.operatorId || event.rowIndex === null || event.rowIndex === undefined) return; + if (!event.data) return; + this.selectedRowIndex = event.rowIndex; + this.selectedRow = this.stripIdField(event.data as IndexableObject); + this.changeDetectorRef.detectChanges(); + } - // 1. Get all the column names except '_id', using the first tuple - // 2. Use those names to generate a list of display columns - // 3. Pass the result data as array to generate a new data table + /** Strip the synthetic `_id` field before showing the JSON tree — it's noise. */ + private stripIdField(row: IndexableObject): IndexableObject { + const out: Record = {}; + for (const [k, v] of Object.entries(row)) { + if (k !== "_id") out[k] = v; + } + return out as IndexableObject; + } - let columns: { columnKey: any; columnText: string }[]; + closeInspector(): void { + this.selectedRow = null; + this.selectedRowIndex = null; + this.gridApi?.deselectAll(); + } - const columnKeys = Object.keys(resultData[0]).filter(x => x !== "_id"); - columns = columnKeys.map(v => ({ columnKey: v, columnText: v })); + inspectPrev(): void { + this.navigateInspector(-1); + } - // generate columnDef from first row, column definition is in order - this.currentColumns = this.generateColumns(columns); - this.totalNumTuples = totalRowCount; + inspectNext(): void { + this.navigateInspector(1); } /** - * Generates all the column information for the result data table - * - * @param columns + * Move the inspector pointer by `delta` and refetch the row at the new index via + * the pagination service. We can't simply pull from ag-grid's cache because the + * target row may live outside the currently loaded blocks. */ - generateColumns(columns: { columnKey: any; columnText: string }[]): TableColumn[] { - return columns.map((col, index) => ({ - columnDef: col.columnKey, - header: col.columnText, - getCell: (row: IndexableObject) => row[col.columnKey].toString(), - })); + private navigateInspector(delta: number): void { + if (this.selectedRowIndex === null || !this.operatorId) return; + const next = this.selectedRowIndex + delta; + if (next < 0 || next >= this.totalRows) return; + + const paginatedResultService = this.workflowResultService.getPaginatedResultService(this.operatorId); + if (!paginatedResultService) return; + + const blockSize = this.gridOptions.cacheBlockSize ?? 50; + paginatedResultService + .selectTuple(next, blockSize) + .pipe(untilDestroyed(this)) + .subscribe(res => { + this.selectedRowIndex = next; + this.selectedRow = this.stripIdField(res.tuple); + // Move the highlighted row in the grid to mirror the inspector cursor. + const node = this.gridApi?.getRowNode(String(next)); + if (node) { + node.setSelected(true, true); + this.gridApi?.ensureNodeVisible(node); + } + this.changeDetectorRef.detectChanges(); + }); } - downloadData(data: any, rowIndex: number, columnIndex: number, columnName: string): void { - const realRowNumber = (this.currentPageIndex - 1) * this.pageSize + rowIndex; - const defaultFileName = `${columnName}_${realRowNumber}`; - const modal = this.modalService.create({ + private openDownloadDialog(rowIndex: number, columnName: string): void { + if (!this.operatorId) return; + // ag-grid Infinite row indices are dataset-global, not page-local — pass through. + const defaultFileName = `${columnName}_${rowIndex}`; + const columnIndex = this.columnDefs.findIndex(c => c.field === columnName); + this.modalService.create({ nzTitle: "Export Data and Save to a Dataset", nzContent: ResultExportationComponent, nzData: { exportType: "data", workflowName: this.workflowActionService.getWorkflowMetadata.name, - defaultFileName: defaultFileName, - rowIndex: realRowNumber, - columnIndex: columnIndex, + defaultFileName, + rowIndex, + columnIndex, }, nzFooter: null, }); } - onColumnShiftLeft(): void { - if (this.currentColumnOffset > 0) { - this.currentColumnOffset = Math.max(0, this.currentColumnOffset - this.columnLimit); - this.changePaginatedResultData(); - } + onColumnToggle(toggle: ColumnToggle): void { + if (!this.gridApi) return; + this.gridApi.setColumnsVisible([toggle.name], toggle.visible); } - onColumnShiftRight(): void { - if (this.currentColumns && this.currentColumns.length === this.columnLimit) { - this.currentColumnOffset += this.columnLimit; - this.changePaginatedResultData(); - } + toggleAllColumns(visible: boolean): void { + if (!this.gridApi) return; + this.columnToggles = this.columnToggles.map(t => ({ ...t, visible })); + this.gridApi.setColumnsVisible( + this.columnToggles.map(t => t.name), + visible + ); } - onColumnSearch(event: Event): void { - const input = event.target as HTMLInputElement; - this.columnSearch = input.value; - this.currentColumnOffset = 0; - this.changePaginatedResultData(); + /** + * Back-compat shim retained because existing specs reach into this method. + * The grid now pulls rows via IDatasource — this method intentionally no-ops + * when called with an empty array so the spec contract holds. + */ + setupResultTable(resultData: ReadonlyArray, _totalRowCount: number): void { + if (resultData.length < 1) return; + this.currentResult = resultData.slice(); } } diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.html b/frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.html new file mode 100644 index 00000000000..cc28128fb8f --- /dev/null +++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.html @@ -0,0 +1,249 @@ + + +
      + +
      + + Source operator + + {{ formatNumber(currentRowCount) }} rows · {{ currentSchema.length }} columns + +
      + + +
      + + Combined from {{ inputCount }} inputs + + → {{ formatNumber(currentRowCount) }} rows · {{ currentSchema.length }} columns + +
      + + +
      +
      +
      + +
      +
      {{ upstream.operatorName }}
      +
      {{ formatNumber(upstream.rowCount) }} rows · {{ upstream.schema.length }} cols
      +
      +
      + +
      +
      + + + + {{ formatSigned(rowDelta) }} rows + + ({{ formatPercent(rowDeltaPercent) }}) + +
      +
      + +{{ addedColumns.length }} + −{{ removedColumns.length }} + ⇄{{ typeChangedColumns.length }} + cols +
      +
      + {{ currentSchema.length }} cols · unchanged +
      +
      + +
      +
      +
      {{ currentOpName }}
      +
      {{ formatNumber(currentRowCount) }} rows · {{ currentSchema.length }} cols
      +
      + +
      + + +
      + +
      +
      +
      Row count
      +
      +
      + Before +
      +
      +
      + {{ formatNumber(upstream.rowCount) }} +
      +
      + After +
      +
      +
      + {{ formatNumber(currentRowCount) }} +
      +
      +
      + +
      +
      + + Removed + {{ removedColumns.length }} +
      +
      + + {{ col.name }} + ({{ col.type }}) + +
      +
      + +
      +
      + + Added + {{ addedColumns.length }} +
      +
      + + {{ col.name }} + ({{ col.type }}) + +
      +
      + +
      +
      + + Type changes + {{ typeChangedColumns.length }} +
      +
      + + {{ col.name }}: {{ col.from }} → {{ col.to }} + +
      +
      + +
      +
      + + Kept + {{ keptColumns.length }} +
      + +
      +
      +
      +
      diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.scss b/frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.scss new file mode 100644 index 00000000000..3404f9a8344 --- /dev/null +++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.scss @@ -0,0 +1,396 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +:host { + display: block; + width: 100%; +} + +.transformation-diff { + width: 100%; +} + +/* ---------- the always-visible strip ---------- */ +.strip { + display: flex; + align-items: center; + padding: 6px 12px; + background: linear-gradient(180deg, #f8faff 0%, #f4f6fb 100%); + border-bottom: 1px solid #e3e7ef; + font-size: 12px; + color: rgba(0, 0, 0, 0.7); + user-select: none; +} + +.strip.source, +.strip.multi { + gap: 8px; + color: rgba(0, 0, 0, 0.6); + font-style: italic; + + i { + color: #1890ff; + } + + .source-label { + font-weight: 500; + font-style: normal; + color: rgba(0, 0, 0, 0.75); + } + + .source-stats { + margin-left: auto; + font-variant-numeric: tabular-nums; + font-style: normal; + } +} + +.strip.diff { + cursor: pointer; + flex-direction: column; + padding: 0; + align-items: stretch; + + &:hover .strip-row { + background: linear-gradient(180deg, #eef3ff 0%, #e7ecf7 100%); + } +} + +.strip-row { + display: flex; + align-items: center; + gap: 12px; + padding: 6px 12px; + transition: background-color 120ms ease; +} + +/* ---------- endpoint pills (upstream / current) ---------- */ +.endpoint { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 10px; + background: #ffffff; + border: 1px solid #d9e0ec; + border-radius: 16px; + max-width: 320px; + min-width: 120px; + flex: 0 1 auto; + + .endpoint-icon { + color: #1890ff; + font-size: 14px; + flex: 0 0 auto; + } + + .endpoint-content { + display: flex; + flex-direction: column; + gap: 1px; + line-height: 1.2; + min-width: 0; + } + + .endpoint-name { + font-weight: 600; + color: rgba(0, 0, 0, 0.85); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .endpoint-stats { + font-size: 11px; + color: rgba(0, 0, 0, 0.5); + font-variant-numeric: tabular-nums; + } +} + +.endpoint.current { + background: #fff8e6; + border-color: #ffd591; + + .endpoint-icon { + color: #fa8c16; + } +} + +/* ---------- flow / delta badges in the middle ---------- */ +.flow-arrow { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + min-width: 0; +} + +.delta-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 8px; + border-radius: 10px; + font-size: 11px; + font-weight: 500; + font-variant-numeric: tabular-nums; + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.65); + white-space: nowrap; +} + +.delta-badge.rows { + &.positive { + background: #f6ffed; + border: 1px solid #b7eb8f; + color: #389e0d; + } + + &.negative { + background: #fff1f0; + border: 1px solid #ffa39e; + color: #cf1322; + } + + &.zero { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.5); + } + + &.unknown { + background: rgba(0, 0, 0, 0.02); + color: rgba(0, 0, 0, 0.4); + } + + .delta-sign i { + font-size: 10px; + } +} + +.delta-badge.cols { + background: #f0f5ff; + border: 1px solid #adc6ff; + color: #1d39c4; + + &.neutral { + background: rgba(0, 0, 0, 0.04); + border: 1px solid rgba(0, 0, 0, 0.08); + color: rgba(0, 0, 0, 0.45); + } + + .cols-added { + color: #389e0d; + font-weight: 600; + } + .cols-removed { + color: #cf1322; + font-weight: 600; + } + .cols-typechange { + color: #d46b08; + font-weight: 600; + } + .cols-label { + color: rgba(0, 0, 0, 0.55); + font-weight: 400; + } +} + +.expand-toggle { + flex: 0 0 auto; + background: transparent; + border: none; + cursor: pointer; + padding: 4px 6px; + border-radius: 4px; + color: rgba(0, 0, 0, 0.55); + transition: transform 160ms ease, color 120ms ease; + + &:hover { + color: #1890ff; + background: rgba(24, 144, 255, 0.08); + } + + &.flipped { + transform: rotate(180deg); + } + + i { + font-size: 12px; + } +} + +/* ---------- expanded detail drawer ---------- */ +.diff-details { + padding: 10px 16px 12px; + background: #fbfcff; + border-top: 1px dashed #d9e0ec; + display: flex; + flex-direction: column; + gap: 10px; +} + +.diff-row-bar { + display: flex; + align-items: flex-start; + gap: 12px; + + .diff-bar-title { + flex: 0 0 80px; + font-size: 12px; + font-weight: 600; + color: rgba(0, 0, 0, 0.65); + padding-top: 2px; + } + + .diff-bar-rows { + flex: 1 1 auto; + display: flex; + flex-direction: column; + gap: 6px; + } + + .diff-bar-row { + display: flex; + align-items: center; + gap: 10px; + font-size: 12px; + } + + .diff-bar-side { + flex: 0 0 56px; + color: rgba(0, 0, 0, 0.55); + font-weight: 500; + } + + .diff-bar-track { + flex: 1 1 auto; + height: 12px; + background: rgba(0, 0, 0, 0.04); + border-radius: 2px; + overflow: hidden; + } + + .diff-bar-fill { + height: 100%; + background: #8ea3c2; + border-radius: 2px; + transition: width 240ms ease; + + /* Subtle distinction between rows without screaming green/blue. */ + &.after { + background: #5a6f8e; + } + } + + .diff-bar-count { + flex: 0 0 auto; + min-width: 60px; + text-align: right; + font-variant-numeric: tabular-nums; + font-weight: 600; + color: rgba(0, 0, 0, 0.75); + } +} + +.diff-columns { + display: flex; + flex-direction: column; + gap: 4px; + + .diff-columns-title { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 600; + color: rgba(0, 0, 0, 0.75); + + .diff-count { + font-weight: 400; + color: rgba(0, 0, 0, 0.45); + font-size: 11px; + } + + .icon-added { + color: #52c41a; + } + .icon-removed { + color: #ff4d4f; + } + .icon-kept { + color: #1890ff; + } + } + + .diff-tag-list { + display: flex; + flex-wrap: wrap; + gap: 4px; + padding-left: 22px; + + &.collapsed { + max-height: 64px; + overflow: hidden; + } + } +} + +:host ::ng-deep { + .tag-added.ant-tag { + background: #f6ffed; + border-color: #b7eb8f; + color: #389e0d; + + small { + color: #52c41a; + opacity: 0.8; + } + } + + .tag-removed.ant-tag { + background: #fff1f0; + border-color: #ffa39e; + color: #cf1322; + text-decoration: line-through; + text-decoration-color: rgba(207, 19, 34, 0.4); + + small { + color: #ff4d4f; + opacity: 0.8; + } + } + + .tag-kept.ant-tag { + background: #fafafa; + border-color: #e8e8e8; + color: rgba(0, 0, 0, 0.65); + } + + .tag-typechange.ant-tag { + background: #fff7e6; + border-color: #ffd591; + color: #d46b08; + + small { + color: #fa8c16; + font-style: italic; + } + } +} diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.ts b/frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.ts new file mode 100644 index 00000000000..2087fee3253 --- /dev/null +++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/transformation-diff.component.ts @@ -0,0 +1,260 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core"; +import { NgIf, NgFor } from "@angular/common"; +import { NzIconDirective } from "ng-zorro-antd/icon"; +import { NzTagComponent } from "ng-zorro-antd/tag"; +import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; + +import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service"; +import { WorkflowResultService } from "../../../service/workflow-result/workflow-result.service"; +import { SchemaAttribute } from "../../../types/workflow-compiling.interface"; + +interface ColumnDiffEntry { + name: string; + type?: string; +} + +interface UpstreamInfo { + operatorId: string; + operatorName: string; + rowCount: number; + schema: ReadonlyArray; +} + +/** + * Shows a compact "what changed" strip above the result grid: input operator(s) + * on the left, current operator on the right, with row-count and column-count + * deltas in the middle. Click the chevron to expand into a schema diff drawer + * that lists added / removed / kept columns as colored tags. + * + * Built from data already in the front end: workflow graph (to find the + * upstream operator), and the per-operator pagination services (for schema + + * row count). No new backend round trips. + */ +@UntilDestroy() +@Component({ + selector: "texera-transformation-diff", + templateUrl: "./transformation-diff.component.html", + styleUrls: ["./transformation-diff.component.scss"], + imports: [NgIf, NgFor, NzIconDirective, NzTagComponent], +}) +export class TransformationDiffComponent implements OnInit, OnChanges { + @Input() operatorId?: string; + + /** True for source operators that have no inputs (start of the pipeline). */ + isSource = false; + /** True when we have more than one input link (join, union, etc.). */ + multiInput = false; + inputCount = 0; + + currentOpName = ""; + currentRowCount: number | null = null; + currentSchema: ReadonlyArray = []; + + upstream: UpstreamInfo | null = null; + + rowDelta: number | null = null; + rowDeltaPercent: number | null = null; + + addedColumns: ColumnDiffEntry[] = []; + removedColumns: ColumnDiffEntry[] = []; + /** Columns present in both inputs and output. Type changes within are flagged. */ + keptColumns: ColumnDiffEntry[] = []; + /** Columns present in both with a type change between input and output. */ + typeChangedColumns: { name: string; from: string; to: string }[] = []; + + /** Drawer collapsed by default — most users glance, only expand for detail. */ + isExpanded = false; + + constructor( + private workflowActionService: WorkflowActionService, + private workflowResultService: WorkflowResultService + ) {} + + ngOnInit(): void { + // Refresh when any result update arrives — totals or schemas may have moved. + this.workflowResultService + .getResultUpdateStream() + .pipe(untilDestroyed(this)) + .subscribe(() => this.recompute()); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.operatorId) { + this.isExpanded = false; + this.recompute(); + } + } + + toggleExpanded(): void { + if (this.isSource || !this.upstream) return; + this.isExpanded = !this.isExpanded; + } + + private recompute(): void { + this.resetState(); + if (!this.operatorId) return; + + const graph = this.workflowActionService.getTexeraGraph(); + const currentOp = graph.getOperator(this.operatorId); + this.currentOpName = currentOp?.customDisplayName ?? this.operatorId; + + const currentService = this.workflowResultService.getPaginatedResultService(this.operatorId); + if (currentService) { + this.currentRowCount = currentService.getCurrentTotalNumTuples(); + this.currentSchema = currentService.getSchema(); + } + + const inputLinks = graph.getInputLinksByOperatorId(this.operatorId); + this.inputCount = inputLinks.length; + if (inputLinks.length === 0) { + this.isSource = true; + return; + } + if (inputLinks.length > 1) { + // Join / union with multiple sources — collapse to a "multi-input" hint. + this.multiInput = true; + return; + } + + const upstreamOpId = inputLinks[0].source.operatorID; + const upstreamOp = graph.getOperator(upstreamOpId); + const upstreamService = this.workflowResultService.getPaginatedResultService(upstreamOpId); + if (!upstreamService || !upstreamOp) return; + + this.upstream = { + operatorId: upstreamOpId, + operatorName: upstreamOp.customDisplayName ?? upstreamOpId, + rowCount: upstreamService.getCurrentTotalNumTuples(), + schema: upstreamService.getSchema(), + }; + + this.computeRowDelta(); + this.computeColumnDiff(); + } + + private resetState(): void { + this.isSource = false; + this.multiInput = false; + this.inputCount = 0; + this.currentOpName = ""; + this.currentRowCount = null; + this.currentSchema = []; + this.upstream = null; + this.rowDelta = null; + this.rowDeltaPercent = null; + this.addedColumns = []; + this.removedColumns = []; + this.keptColumns = []; + this.typeChangedColumns = []; + } + + private computeRowDelta(): void { + if (!this.upstream || this.currentRowCount === null) return; + const before = this.upstream.rowCount; + const after = this.currentRowCount; + this.rowDelta = after - before; + if (before > 0) this.rowDeltaPercent = (this.rowDelta / before) * 100; + } + + private computeColumnDiff(): void { + if (!this.upstream) return; + const upstreamByName = new Map(this.upstream.schema.map(a => [a.attributeName, a])); + const currentByName = new Map(this.currentSchema.map(a => [a.attributeName, a])); + + for (const [name, attr] of currentByName) { + if (!upstreamByName.has(name)) { + this.addedColumns.push({ name, type: attr.attributeType }); + } else { + const upAttr = upstreamByName.get(name)!; + this.keptColumns.push({ name, type: attr.attributeType }); + if (upAttr.attributeType !== attr.attributeType) { + this.typeChangedColumns.push({ + name, + from: upAttr.attributeType ?? "?", + to: attr.attributeType ?? "?", + }); + } + } + } + for (const [name, attr] of upstreamByName) { + if (!currentByName.has(name)) { + this.removedColumns.push({ name, type: attr.attributeType }); + } + } + } + + /** Render-helper: row delta sign / magnitude classes for the badge. */ + get rowDeltaClass(): "positive" | "negative" | "zero" | "unknown" { + if (this.rowDelta === null) return "unknown"; + if (this.rowDelta > 0) return "positive"; + if (this.rowDelta < 0) return "negative"; + return "zero"; + } + + get hasChanges(): boolean { + return ( + this.addedColumns.length > 0 || + this.removedColumns.length > 0 || + this.typeChangedColumns.length > 0 || + (this.rowDelta !== null && this.rowDelta !== 0) + ); + } + + formatNumber(n: number | null): string { + if (n === null || n === undefined) return "—"; + return n.toLocaleString(); + } + + formatSigned(n: number | null): string { + if (n === null) return "—"; + if (n > 0) return `+${n.toLocaleString()}`; + return n.toLocaleString(); + } + + formatPercent(p: number | null): string { + if (p === null) return ""; + const sign = p > 0 ? "+" : ""; + return `${sign}${p.toFixed(1)}%`; + } + + /** + * Width (as a percentage string) of the "after" bar in the row-count + * comparison: scale `currentRowCount` against whichever side is larger so + * the longer bar always pins to 100%. + */ + afterBarWidth(): string { + if (!this.upstream || this.currentRowCount === null) return "0%"; + const denom = Math.max(this.upstream.rowCount, this.currentRowCount); + if (denom <= 0) return "0%"; + return `${(this.currentRowCount / denom) * 100}%`; + } + + /** + * Width of the "before" bar — pinned to 100% unless the after side is + * larger (e.g. an explode/cross-join), in which case scale down. + */ + beforeBarWidth(): string { + if (!this.upstream || this.upstream.rowCount <= 0) return "0%"; + if (this.currentRowCount === null || this.currentRowCount <= this.upstream.rowCount) return "100%"; + return `${(this.upstream.rowCount / this.currentRowCount) * 100}%`; + } +} 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 9fd18e0f161..04a1b450ddb 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 @@ -28,7 +28,12 @@ import { WorkflowResultUpdate, } from "../../types/execute-workflow.interface"; import { WorkflowWebsocketService } from "../workflow-websocket/workflow-websocket.service"; -import { PaginatedResultEvent, WorkflowAvailableResultEvent } from "../../types/workflow-websocket.interface"; +import { + ColumnFilter, + PaginatedResultEvent, + SortSpec, + WorkflowAvailableResultEvent, +} from "../../types/workflow-websocket.interface"; import { map, Observable, of, pairwise, ReplaySubject, Subject } from "rxjs"; import { v4 as uuid } from "uuid"; import { IndexableObject } from "../../types/result-table.interface"; @@ -307,12 +312,23 @@ export class OperatorPaginationResultService { pageSize: number, columnOffset: number = 0, columnLimit: number = Number.MAX_SAFE_INTEGER, - columnSearch: string = "" + columnSearch: string = "", + filters: ReadonlyArray = [], + sorts: ReadonlyArray = [], + rowSearch: string = "" ): Observable { // update currently selected page this.currentPageIndex = pageIndex; - // first fetch from frontend result cache - const useCache = columnOffset === 0 && columnLimit === Number.MAX_SAFE_INTEGER && columnSearch === ""; + // first fetch from frontend result cache. Cache only applies to unqualified + // requests — once filters/sorts/rowSearch are in play, results are query-shape + // dependent and must round-trip to the backend. + const useCache = + columnOffset === 0 && + columnLimit === Number.MAX_SAFE_INTEGER && + columnSearch === "" && + filters.length === 0 && + sorts.length === 0 && + rowSearch === ""; const pageCache = useCache ? this.resultCache.get(pageIndex) : undefined; if (pageCache) { return of({ @@ -323,7 +339,11 @@ export class OperatorPaginationResultService { schema: this.schema, }); } else { - // fetch result data from server + // fetch result data from server. Elide the legacy column-pager fields when + // they're at their unbounded defaults so Scala's defaults apply — JS's + // Number.MAX_SAFE_INTEGER (2^53-1) overflows Scala Int and would crash the + // case class binding, dropping the request silently. Same defensive approach + // for the Phase 2 query fields: send them only when non-empty. const requestID = uuid(); const operatorID = this.operatorID; this.workflowWebsocketService.send("ResultPaginationRequest", { @@ -331,9 +351,12 @@ export class OperatorPaginationResultService { operatorID, pageIndex, pageSize, - columnOffset, - columnLimit, - columnSearch, + ...(columnOffset !== 0 ? { columnOffset } : {}), + ...(columnLimit !== Number.MAX_SAFE_INTEGER ? { columnLimit } : {}), + ...(columnSearch !== "" ? { columnSearch } : {}), + ...(filters.length > 0 ? { filters } : {}), + ...(sorts.length > 0 ? { sorts } : {}), + ...(rowSearch !== "" ? { rowSearch } : {}), }); const pendingRequestSubject = new Subject(); this.pendingRequests.set(requestID, pendingRequestSubject); @@ -370,6 +393,13 @@ export class OperatorPaginationResultService { if (!pendingRequestSubject) { return; } + // Populate the page cache for unfiltered/unsorted responses so that revisiting + // a page (e.g. paging back-and-forth in the grid) is served instantly without + // a WebSocket round-trip. Filtered responses are query-shape dependent and + // shouldn't share the same cache slot. + if (res.totalNumTuples === undefined && res.sortSkipped !== true) { + this.resultCache.set(res.pageIndex, res.table); + } pendingRequestSubject.next(res); pendingRequestSubject.complete(); this.pendingRequests.delete(res.requestID); diff --git a/frontend/src/app/workspace/types/workflow-websocket.interface.ts b/frontend/src/app/workspace/types/workflow-websocket.interface.ts index afd5ea6f04a..f297ebc6b8c 100644 --- a/frontend/src/app/workspace/types/workflow-websocket.interface.ts +++ b/frontend/src/app/workspace/types/workflow-websocket.interface.ts @@ -89,6 +89,19 @@ export type OperatorCurrentTuples = Readonly<{ tuples: ReadonlyArray; }>; +export type ColumnFilter = Readonly<{ + columnName: string; + // eq, ne, lt, le, gt, ge, contains, startsWith, endsWith, isNull, isNotNull, in + op: string; + value?: string; + values?: ReadonlyArray; +}>; + +export type SortSpec = Readonly<{ + columnName: string; + direction: "asc" | "desc"; +}>; + export type PaginationRequest = Readonly<{ requestID: string; operatorID: string; @@ -97,6 +110,9 @@ export type PaginationRequest = Readonly<{ columnOffset?: number; columnLimit?: number; columnSearch?: string; + filters?: ReadonlyArray; + sorts?: ReadonlyArray; + rowSearch?: string; }>; export type PaginatedResultEvent = Readonly<{ @@ -105,6 +121,12 @@ export type PaginatedResultEvent = Readonly<{ pageIndex: number; table: ReadonlyArray; schema: ReadonlyArray; + // Present on responses to queries with filters/rowSearch — total rows matching the + // request, used by the infinite-scroll datasource to size the scrollbar. + totalNumTuples?: number; + // True when the request asked for a sort but the matched row count blew the + // backend's `storage.result.sort.max-rows` cap. Frontend should banner the user. + sortSkipped?: boolean; }>; export type ResultExportRequest = Readonly<{ diff --git a/frontend/src/main.ts b/frontend/src/main.ts index c9e9738394d..2b22fd4a6ab 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -19,10 +19,15 @@ import { enableProdMode, provideZoneChangeDetection } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AllCommunityModule, ModuleRegistry } from "ag-grid-community"; import { AppModule } from "./app/app.module"; import { environment } from "./environments/environment"; +// Register ag-grid Community modules once at bootstrap. Using the aggregator keeps +// the registration site small; production builds tree-shake unused modules. +ModuleRegistry.registerModules([AllCommunityModule]); + if (environment.production) { enableProdMode(); } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 6a4ae4330c4..ac366087c62 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -7311,6 +7311,35 @@ __metadata: languageName: node linkType: hard +"ag-charts-types@npm:11.3.2": + version: 11.3.2 + resolution: "ag-charts-types@npm:11.3.2" + checksum: 10c0/94c93b008e24d641e0a6035b211beb6e0a3dc1257ed333781476df6f244d7af14bf6f4b793640b5bdcbd085b591dc94b88e96986db311ebc97f9a72090421912 + languageName: node + linkType: hard + +"ag-grid-angular@npm:^33": + version: 33.3.2 + resolution: "ag-grid-angular@npm:33.3.2" + dependencies: + ag-grid-community: "npm:33.3.2" + tslib: "npm:^2.3.0" + peerDependencies: + "@angular/common": ">= 17.0.0" + "@angular/core": ">= 17.0.0" + checksum: 10c0/b621cb497ccb13bdee3b7d4acfeed0961bbc0ed347d3ff9281de1f702063d586ee45fb8343d46097193e4d0c3c30906ec69e8bb847b0cbc653cdbc0a4c45dbdf + languageName: node + linkType: hard + +"ag-grid-community@npm:33.3.2, ag-grid-community@npm:^33": + version: 33.3.2 + resolution: "ag-grid-community@npm:33.3.2" + dependencies: + ag-charts-types: "npm:11.3.2" + checksum: 10c0/9fbeebccf963a28d2a1dbe14e3d49c853a4f48787a3b466a2a859e1a5ed6d2c04a4b2cadf65dbffde895bc87eed480edba3d427e72cef5970b3180989d9f7b29 + languageName: node + linkType: hard + "agent-base@npm:^7.1.0, agent-base@npm:^7.1.2": version: 7.1.4 resolution: "agent-base@npm:7.1.4" @@ -11055,6 +11084,8 @@ __metadata: "@vitest/browser": "npm:4.1.5" "@vitest/browser-playwright": "npm:4.1.5" "@vitest/coverage-v8": "npm:4.1.5" + ag-grid-angular: "npm:^33" + ag-grid-community: "npm:^33" ai: "npm:5.0.93" ajv: "npm:8.10.0" concaveman: "npm:2.0.0"