fix: make dataframe output format identify and show truncation (#7312)

* Added pagination info on table options

* Added pagination info on table component

* Added truncated rows and truncate message when row count is > 1000

src/frontend/src/components/core/dataOutputComponent/index.tsx

@@ -2,6 +2,7 @@ import TableComponent from "@/components/core/parameterRenderComponent/component
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
+import { useEffect, useState } from "react";
 import { extractColumnsFromRows } from "../../../utils/utils";
 
 function DataOutputComponent({
@@ -13,12 +14,18 @@ function DataOutputComponent({
   rows: any[];
   columnMode?: "intersection" | "union";
 }) {
-  // If the rows are not an array of objects, convert them to an array of objects
+  const [rowsInternal, setRowsInternal] = useState(rows.slice(0, 1000));
-  if (rows.some((row) => typeof row !== "object")) {
-    rows = rows.map((row) => ({ data: row }));
-  }
 
-  const columns = extractColumnsFromRows(rows, columnMode);
+  useEffect(() => {
+    const rowsSliced = rows.slice(0, 1000);
+    if (rowsSliced.some((row) => typeof row !== "object")) {
+      setRowsInternal(rowsSliced.map((row) => ({ data: row })));
+    } else {
+      setRowsInternal(rowsSliced);
+    }
+  }, [rows]);
+
+  const columns = extractColumnsFromRows(rowsInternal, columnMode);
 
   const columnDefs = columns.map((col, idx) => ({
     ...col,
@@ -30,10 +37,11 @@ function DataOutputComponent({
       autoSizeStrategy={{ type: "fitGridWidth", defaultMinWidth: 100 }}
       key={"dataOutputComponent"}
       overlayNoRowsTemplate="No data available"
+      paginationInfo={rows.length > 1000 ? rows[1000] : undefined}
       suppressRowClickSelection={true}
       pagination={pagination}
       columnDefs={columnDefs}
-      rowData={rows}
+      rowData={rowsInternal}
     />
   );
 }

src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/TableOptions/index.tsx

@@ -10,6 +10,7 @@ export default function TableOptions({
   deleteRow,
   hasSelection,
   stateChange,
+  paginationInfo,
   addRow,
   tableOptions,
 }: {
@@ -20,6 +21,7 @@ export default function TableOptions({
   hasSelection: boolean;
   stateChange: boolean;
   tableOptions?: TableOptionsTypeAPI;
+  paginationInfo?: string;
 }): JSX.Element {
   return (
     <div className={cn("absolute bottom-3 left-6")}>
@@ -119,6 +121,13 @@ export default function TableOptions({
             </Button>
           </ShadTooltip>
         </div>
+        {paginationInfo && (
+          <div className="ml-2 text-xs text-muted-foreground">
+            <ShadTooltip content="Pagination Info">
+              <span>{paginationInfo}</span>
+            </ShadTooltip>
+          </div>
+        )}
       </div>
     </div>
   );

src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx

@@ -38,6 +38,7 @@ export interface TableComponentProps extends AgGridReactProps {
   onDuplicate?: () => void;
   addRow?: () => void;
   tableOptions?: TableOptionsTypeAPI;
+  paginationInfo?: string;
 }
 
 const TableComponent = forwardRef<
@@ -268,6 +269,7 @@ const TableComponent = forwardRef<
           <TableOptions
             tableOptions={props.tableOptions}
             stateChange={columnStateChange}
+            paginationInfo={props.paginationInfo}
             hasSelection={realRef.current?.api?.getSelectedRows()?.length > 0}
             duplicateRow={props.onDuplicate ? props.onDuplicate : undefined}
             deleteRow={props.onDelete ? props.onDelete : undefined}