@railtownai/railtracks-visualizer 0.0.55 → 0.0.56

package/dist/cjs/index.js

@@ -114702,27 +114702,19 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
     })))));
 };
 
-const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefresh, onRowClick, onCompare, compareIdsFromUrl, onCompareUrlChange, showFilters = true, showCompare = true, emptyMessage, title })=>{
+const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefresh, onRowClick, onCompare, compareIdsFromUrl, onCompareUrlChange, showFilters = true, showCompare = true, emptyMessage, title, pagination: serverPagination, onFiltersChange, onFetchEvaluationsByIds })=>{
     const { theme } = useTheme$1();
     const [selectedAgents, setSelectedAgents] = React.useState([]);
     const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
     const [compareDrawerOpen, setCompareDrawerOpen] = React.useState(false);
     const [evaluationId1, setEvaluationId1] = React.useState(null);
     const [evaluationId2, setEvaluationId2] = React.useState(null);
-    // Sync drawer when compare param comes from URL
-    React.useEffect(()=>{
-        if (compareIdsFromUrl) {
-            setEvaluationId1(compareIdsFromUrl[0]);
-            setEvaluationId2(compareIdsFromUrl[1]);
-            setCompareDrawerOpen(true);
-        }
-    }, [
-        compareIdsFromUrl
-    ]);
     const [selectedEvaluation, setSelectedEvaluation] = React.useState(null);
     const [detailsDrawerOpen, setDetailsDrawerOpen] = React.useState(false);
     const [pageSize, setPageSize] = React.useState(50);
     const [selectedMetricFilter, setSelectedMetricFilter] = React.useState(null);
+    const [drawerEvaluations, setDrawerEvaluations] = React.useState([]);
+    const isServerPagination = !!serverPagination;
     const normalized = React.useMemo(()=>evaluations.map((e)=>isEvaluationDto(e) ? transformEvaluation(e) : e), [
         evaluations
     ]);
@@ -114771,6 +114763,63 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         selectedAgents,
         selectedMetricFilter
     ]);
+    const tableDataSource = filteredEvaluations;
+    const compareDrawerEvaluations = React.useMemo(()=>{
+        if (drawerEvaluations.length === 0) return normalized;
+        const byId = new Map(normalized.map((e)=>[
+                e.evaluation_id,
+                e
+            ]));
+        for (const e of drawerEvaluations){
+            const id = e.evaluation_id ?? e.evaluation_id;
+            if (id && !byId.has(id)) byId.set(id, e);
+        }
+        return Array.from(byId.values());
+    }, [
+        normalized,
+        drawerEvaluations
+    ]);
+    // Sync drawer when compare param comes from URL
+    React.useEffect(()=>{
+        if (compareIdsFromUrl) {
+            setEvaluationId1(compareIdsFromUrl[0]);
+            setEvaluationId2(compareIdsFromUrl[1]);
+            setCompareDrawerOpen(true);
+        }
+    }, [
+        compareIdsFromUrl
+    ]);
+    // Fetch evaluations by ID for compare drawer when opened from URL (server pagination)
+    React.useEffect(()=>{
+        if (!compareDrawerOpen || !onFetchEvaluationsByIds || !evaluationId1 || !evaluationId2) {
+            setDrawerEvaluations([]);
+            return;
+        }
+        const ids = [
+            evaluationId1,
+            evaluationId2
+        ];
+        const inNormalized = ids.every((id)=>normalized.some((e)=>e.evaluation_id === id));
+        if (inNormalized) {
+            setDrawerEvaluations([]);
+            return;
+        }
+        let cancelled = false;
+        onFetchEvaluationsByIds(ids).then((fetched)=>{
+            if (!cancelled) {
+                setDrawerEvaluations(fetched);
+            }
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        compareDrawerOpen,
+        evaluationId1,
+        evaluationId2,
+        normalized,
+        onFetchEvaluationsByIds
+    ]);
     // Handle row selection - limit to 2 rows
     const handleRowSelectionChange = (selectedKeys)=>{
         if (selectedKeys.length <= 2) {
@@ -114922,7 +114971,12 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         placeholder: "Filter by Agent",
         allowClear: true,
         value: selectedAgents,
-        onChange: setSelectedAgents,
+        onChange: (v)=>{
+            setSelectedAgents(v);
+            if (isServerPagination && onFiltersChange) {
+                onFiltersChange(v, selectedMetricFilter);
+            }
+        },
         style: {
             width: 200
         },
@@ -114934,7 +114988,13 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         placeholder: "Filter by Evaluator / Metric",
         allowClear: true,
         value: selectedMetricFilter ?? undefined,
-        onChange: (v)=>setSelectedMetricFilter(v ?? null),
+        onChange: (v)=>{
+            const next = v ?? null;
+            setSelectedMetricFilter(next);
+            if (isServerPagination && onFiltersChange) {
+                onFiltersChange(selectedAgents, next);
+            }
+        },
         style: {
             width: 240
         },
@@ -114957,7 +115017,7 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         }
     }, emptyMessage ?? defaultEmptyMessage) : /*#__PURE__*/ React.createElement(ForwardTable, {
         columns: columns,
-        dataSource: filteredEvaluations,
+        dataSource: tableDataSource,
         loading: loading,
         rowKey: "evaluation_id",
         rowSelection: showCompare ? {
@@ -114968,7 +115028,20 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
                     disabled: selectedRowKeys.length >= 2 && !selectedRowKeys.includes(record.evaluation_id)
                 })
         } : undefined,
-        pagination: filteredEvaluations.length <= pageSize ? false : {
+        pagination: isServerPagination && serverPagination ? {
+            total: serverPagination.total,
+            current: serverPagination.current,
+            pageSize: serverPagination.pageSize,
+            showSizeChanger: true,
+            showTotal: (total)=>`Total ${total} evaluations`,
+            pageSizeOptions: [
+                "10",
+                "20",
+                "50",
+                "100"
+            ],
+            onChange: (page, size)=>serverPagination.onPageChange(page, size ?? serverPagination.pageSize)
+        } : tableDataSource.length <= pageSize ? false : {
             pageSize,
             showSizeChanger: true,
             showTotal: (total)=>`Total ${total} evaluations`,
@@ -115004,7 +115077,7 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         onClose: handleDrawerClose,
         evaluationId1: evaluationId1,
         evaluationId2: evaluationId2,
-        evaluations: normalized,
+        evaluations: compareDrawerEvaluations,
         onEvaluationId1Change: onCompareUrlChange ? handleEvaluationId1Change : setEvaluationId1,
         onEvaluationId2Change: onCompareUrlChange ? handleEvaluationId2Change : setEvaluationId2
     }), !onRowClick && /*#__PURE__*/ React.createElement(EvaluationDetailsDrawer, {

package/dist/esm/index.js

@@ -114682,27 +114682,19 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
     })))));
 };
 
-const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefresh, onRowClick, onCompare, compareIdsFromUrl, onCompareUrlChange, showFilters = true, showCompare = true, emptyMessage, title })=>{
+const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefresh, onRowClick, onCompare, compareIdsFromUrl, onCompareUrlChange, showFilters = true, showCompare = true, emptyMessage, title, pagination: serverPagination, onFiltersChange, onFetchEvaluationsByIds })=>{
     const { theme } = useTheme$1();
     const [selectedAgents, setSelectedAgents] = useState([]);
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [compareDrawerOpen, setCompareDrawerOpen] = useState(false);
     const [evaluationId1, setEvaluationId1] = useState(null);
     const [evaluationId2, setEvaluationId2] = useState(null);
-    // Sync drawer when compare param comes from URL
-    useEffect(()=>{
-        if (compareIdsFromUrl) {
-            setEvaluationId1(compareIdsFromUrl[0]);
-            setEvaluationId2(compareIdsFromUrl[1]);
-            setCompareDrawerOpen(true);
-        }
-    }, [
-        compareIdsFromUrl
-    ]);
     const [selectedEvaluation, setSelectedEvaluation] = useState(null);
     const [detailsDrawerOpen, setDetailsDrawerOpen] = useState(false);
     const [pageSize, setPageSize] = useState(50);
     const [selectedMetricFilter, setSelectedMetricFilter] = useState(null);
+    const [drawerEvaluations, setDrawerEvaluations] = useState([]);
+    const isServerPagination = !!serverPagination;
     const normalized = useMemo(()=>evaluations.map((e)=>isEvaluationDto(e) ? transformEvaluation(e) : e), [
         evaluations
     ]);
@@ -114751,6 +114743,63 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         selectedAgents,
         selectedMetricFilter
     ]);
+    const tableDataSource = filteredEvaluations;
+    const compareDrawerEvaluations = useMemo(()=>{
+        if (drawerEvaluations.length === 0) return normalized;
+        const byId = new Map(normalized.map((e)=>[
+                e.evaluation_id,
+                e
+            ]));
+        for (const e of drawerEvaluations){
+            const id = e.evaluation_id ?? e.evaluation_id;
+            if (id && !byId.has(id)) byId.set(id, e);
+        }
+        return Array.from(byId.values());
+    }, [
+        normalized,
+        drawerEvaluations
+    ]);
+    // Sync drawer when compare param comes from URL
+    useEffect(()=>{
+        if (compareIdsFromUrl) {
+            setEvaluationId1(compareIdsFromUrl[0]);
+            setEvaluationId2(compareIdsFromUrl[1]);
+            setCompareDrawerOpen(true);
+        }
+    }, [
+        compareIdsFromUrl
+    ]);
+    // Fetch evaluations by ID for compare drawer when opened from URL (server pagination)
+    useEffect(()=>{
+        if (!compareDrawerOpen || !onFetchEvaluationsByIds || !evaluationId1 || !evaluationId2) {
+            setDrawerEvaluations([]);
+            return;
+        }
+        const ids = [
+            evaluationId1,
+            evaluationId2
+        ];
+        const inNormalized = ids.every((id)=>normalized.some((e)=>e.evaluation_id === id));
+        if (inNormalized) {
+            setDrawerEvaluations([]);
+            return;
+        }
+        let cancelled = false;
+        onFetchEvaluationsByIds(ids).then((fetched)=>{
+            if (!cancelled) {
+                setDrawerEvaluations(fetched);
+            }
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        compareDrawerOpen,
+        evaluationId1,
+        evaluationId2,
+        normalized,
+        onFetchEvaluationsByIds
+    ]);
     // Handle row selection - limit to 2 rows
     const handleRowSelectionChange = (selectedKeys)=>{
         if (selectedKeys.length <= 2) {
@@ -114902,7 +114951,12 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         placeholder: "Filter by Agent",
         allowClear: true,
         value: selectedAgents,
-        onChange: setSelectedAgents,
+        onChange: (v)=>{
+            setSelectedAgents(v);
+            if (isServerPagination && onFiltersChange) {
+                onFiltersChange(v, selectedMetricFilter);
+            }
+        },
         style: {
             width: 200
         },
@@ -114914,7 +114968,13 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         placeholder: "Filter by Evaluator / Metric",
         allowClear: true,
         value: selectedMetricFilter ?? undefined,
-        onChange: (v)=>setSelectedMetricFilter(v ?? null),
+        onChange: (v)=>{
+            const next = v ?? null;
+            setSelectedMetricFilter(next);
+            if (isServerPagination && onFiltersChange) {
+                onFiltersChange(selectedAgents, next);
+            }
+        },
         style: {
             width: 240
         },
@@ -114937,7 +114997,7 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         }
     }, emptyMessage ?? defaultEmptyMessage) : /*#__PURE__*/ React__default.createElement(ForwardTable, {
         columns: columns,
-        dataSource: filteredEvaluations,
+        dataSource: tableDataSource,
         loading: loading,
         rowKey: "evaluation_id",
         rowSelection: showCompare ? {
@@ -114948,7 +115008,20 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
                     disabled: selectedRowKeys.length >= 2 && !selectedRowKeys.includes(record.evaluation_id)
                 })
         } : undefined,
-        pagination: filteredEvaluations.length <= pageSize ? false : {
+        pagination: isServerPagination && serverPagination ? {
+            total: serverPagination.total,
+            current: serverPagination.current,
+            pageSize: serverPagination.pageSize,
+            showSizeChanger: true,
+            showTotal: (total)=>`Total ${total} evaluations`,
+            pageSizeOptions: [
+                "10",
+                "20",
+                "50",
+                "100"
+            ],
+            onChange: (page, size)=>serverPagination.onPageChange(page, size ?? serverPagination.pageSize)
+        } : tableDataSource.length <= pageSize ? false : {
             pageSize,
             showSizeChanger: true,
             showTotal: (total)=>`Total ${total} evaluations`,
@@ -114984,7 +115057,7 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         onClose: handleDrawerClose,
         evaluationId1: evaluationId1,
         evaluationId2: evaluationId2,
-        evaluations: normalized,
+        evaluations: compareDrawerEvaluations,
         onEvaluationId1Change: onCompareUrlChange ? handleEvaluationId1Change : setEvaluationId1,
         onEvaluationId2Change: onCompareUrlChange ? handleEvaluationId2Change : setEvaluationId2
     }), !onRowClick && /*#__PURE__*/ React__default.createElement(EvaluationDetailsDrawer, {

package/dist/types/agenthub/components/EvaluationsTable.d.ts

@@ -14,6 +14,13 @@
 import React from "react";
 import type { Evaluation } from "../pages/evaluations.types";
 import type { Evaluation as EvaluationDto } from "../../dto/Evaluation";
+/** Server-side pagination config. When provided, table uses server pagination instead of client. */
+export interface EvaluationsTablePagination {
+    total: number;
+    current: number;
+    pageSize: number;
+    onPageChange: (page: number, pageSize: number) => void;
+}
 export interface EvaluationsTableProps {
     /** Evaluation DTOs from your API. Pre-transformed data is also accepted. */
     evaluations: (Evaluation | EvaluationDto)[];
@@ -31,5 +38,11 @@ export interface EvaluationsTableProps {
     emptyMessage?: React.ReactNode;
     /** Optional title rendered to the left of the toolbar (e.g. "Evaluations") */
     title?: React.ReactNode;
+    /** Server-side pagination. When provided, table uses server pagination instead of client. */
+    pagination?: EvaluationsTablePagination;
+    /** When server pagination, filter changes are passed up for platform to refetch. */
+    onFiltersChange?: (agents: string[], metricFilter: string | null) => void;
+    /** When server pagination, fetch evaluations by ID for compare drawer (e.g. from URL). */
+    onFetchEvaluationsByIds?: (ids: string[]) => Promise<(Evaluation | EvaluationDto)[]>;
 }
 export declare const EvaluationsTable: React.FC<EvaluationsTableProps>;

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ export { default as AgenticFlowVisualizer } from "./components/AgenticFlowVisual
 export { default as Visualizer } from "./components/Visualizer";
 export { SessionDetails } from "./agenthub/pages/session-details";
 export { EvaluationsTable } from "./agenthub/components/EvaluationsTable";
+export type { EvaluationsTableProps, EvaluationsTablePagination } from "./agenthub/components/EvaluationsTable";
 export { EvaluationsCompareView } from "./agenthub/components/EvaluationsCompareView";
 export type { EvaluationsCompareViewProps } from "./agenthub/components/EvaluationsCompareView";
 export { EvaluationsCompareDrawer } from "./agenthub/pages/evaluations-compare-drawer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for Railtracks agentic flows",