Release (#760)

Author: Cahllagerfeld

.gitignore

@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

.prettierignore

@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -23,17 +23,16 @@
 ]
 },
 "dependencies": {
-"@dagrejs/dagre": "^1.1.4",
 "@fontsource/inter": "^5.2.5",
 "@hookform/resolvers": "^3.10.0",
 "@radix-ui/react-tabs": "^1.1.3",
 "@tanstack/react-query": "^5.72.0",
 "@tanstack/react-table": "^8.21.2",
-"@tisoap/react-flow-smart-edge": "^3.0.0",
 "@zenml-io/react-component-library": "^0.23.1",
 "awesome-debounce-promise": "^2.1.0",
 "class-variance-authority": "^0.7.1",
 "clsx": "^2.1.1",
+"elkjs": "^0.10.0",
 "featureos-widget": "^0.0.32",
 "immer": "^10.1.1",
 "jwt-decode": "^4.0.0",

pnpm-lock.yaml

@@ -1,18 +1,17 @@
 import AlertCircle from "@/assets/icons/alert-circle.svg?react";
-
 import { ArtifactNode } from "@/components/dag-visualizer/ArtifactNode";
 import { DagControls } from "@/components/dag-visualizer/Controls";
+import { ElkEdge } from "@/components/dag-visualizer/elk-edge";
 import { PreviewArtifactNode } from "@/components/dag-visualizer/PreviewArtifact";
 import { PreviewStepNode } from "@/components/dag-visualizer/PreviewStep";
-import { SmoothStepSmart } from "@/components/dag-visualizer/SmartEdge";
 import { StepNode } from "@/components/dag-visualizer/StepNode";
 import { EmptyState } from "@/components/EmptyState";
 import { Spinner } from "@zenml-io/react-component-library/components/server";
 import ReactFlow, { NodeTypes } from "reactflow";
 import { useDag } from "./useDag";
 
 const customEdge = {
-smart: SmoothStepSmart
+elk: ElkEdge
 };
 
 const customNodes: NodeTypes = {

src/app/runs/[id]/Dag.tsx

@@ -0,0 +1,7 @@
+import { EmptyStateLogs } from "@/components/logs/empty-state-logs";
+import { FallbackProps } from "react-error-boundary";
+
+export function LogsTabBoundary({ error }: FallbackProps) {
+if (!(error instanceof Error)) throw error;
+return <EmptyStateLogs title="Error displaying logs" subtitle={error.message} />;
+}

src/app/runs/[id]/_Tabs/LogTab/boundary.tsx

@@ -0,0 +1,45 @@
+import { ErrorFallback } from "@/components/Error";
+import { EmptyStateLogs } from "@/components/logs/empty-state-logs";
+import { EnhancedLogsViewer } from "@/components/logs/enhanced-log-viewer";
+import { LoadingLogs } from "@/components/logs/loading-logs";
+import { useRunLogs } from "@/data/pipeline-runs/run-logs";
+import { parseLogString } from "@/lib/logs";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+
+export function LogTab() {
+const { runId } = useParams() as {
+runId: string;
+};
+
+const runLogs = useRunLogs({ runId });
+
+// Parse the log string into LogEntry objects for our enhanced viewer
+const parsedLogs = useMemo(() => {
+if (!runLogs.data) return [];
+return parseLogString(runLogs.data);
+}, [runLogs.data]);
+
+if (runLogs.isPending) return <LoadingLogs />;
+
+if (runLogs.isError) {
+return <ErrorFallback err={runLogs.error} />;
+}
+
+const logs = runLogs.data;
+
+if (!logs) {
+return (
+<EmptyStateLogs
+title="This pipeline run has no logs"
+subtitle="It looks like there are no logs associated with this pipeline run"
+/>
+);
+}
+
+return (
+<div className="h-full w-full">
+<EnhancedLogsViewer logs={parsedLogs} />
+</div>
+);
+}

src/app/runs/[id]/_Tabs/LogTab/logs.tsx

@@ -1,6 +1,7 @@
 import MetadataIcon from "@/assets/icons/code-square.svg?react";
 import Collapse from "@/assets/icons/collapse.svg?react";
 import Info from "@/assets/icons/info.svg?react";
+import Logs from "@/assets/icons/logs.svg?react";
 import Stack from "@/assets/icons/stack.svg?react";
 import Tools from "@/assets/icons/tool.svg?react";
 import {
@@ -17,6 +18,9 @@ import { MetadataTab } from "./Metadata";
 import { OverviewTab } from "./Overview";
 import { useSelectedTab } from "./service";
 import { StackTab } from "./Stack";
+import { LogTab } from "./LogTab/logs";
+import { ErrorBoundary } from "react-error-boundary";
+import { LogsTabBoundary } from "./LogTab/boundary";
 
 type TabsHeaderProps = {
 setIsPanelOpen: Dispatch<SetStateAction<boolean>>;
@@ -58,6 +62,10 @@ export function RunsDetailTabs() {
 <Stack className="h-5 w-5 shrink-0 fill-theme-text-tertiary group-data-[state=active]/trigger:fill-theme-surface-strong" />
 <span>Stack</span>
 </TabsTrigger>
+<TabsTrigger className="flex items-center gap-2 truncate text-text-md" value="logs">
+<Logs className="h-5 w-5 shrink-0 fill-theme-text-tertiary group-data-[state=active]/trigger:fill-theme-surface-strong" />
+<span>Logs</span>
+</TabsTrigger>
 <TabsTrigger
 className="flex items-center gap-2 truncate text-text-md"
 value="configuration"
@@ -77,6 +85,11 @@ export function RunsDetailTabs() {
 <TabsContent className="m-0 mt-5 border-0 bg-transparent p-0" value="stack">
 <StackTab />
 </TabsContent>
+<TabsContent className="m-0 mt-5 border-0 bg-transparent p-0" value="logs">
+<ErrorBoundary fallbackRender={LogsTabBoundary}>
+<LogTab />
+</ErrorBoundary>
+</TabsContent>
 <TabsContent className="m-0 mt-5 border-0 bg-transparent p-0" value="configuration">
 <ConfigurationTab />
 </TabsContent>

src/app/runs/[id]/_Tabs/index.tsx

@@ -3,7 +3,7 @@ import { z } from "zod";
 
 const tabParamSchema = z.object({
 tab: z
-.enum(["overview", "configuration", "metadata", "stack"])
+.enum(["overview", "configuration", "metadata", "stack", "logs"])
 .optional()
 .default("overview")
 .catch("overview")

src/app/runs/[id]/_Tabs/service.ts

@@ -15,7 +15,8 @@ export function useDag() {
 const dagQuery = usePipelineRunDag(
 { runId },
 {
-refetchInterval: (e) => (e.state.data?.status === "running" ? 3000 : false)
+refetchInterval: (e) =>
+e.state.data?.status === "running" || e.state.data?.status === "initializing" ? 3000 : false
 }
 );
 
@@ -43,12 +44,12 @@ export function useDag() {
 const calcDagLayout = useCallback(() => {
 if (!dagQuery.data) return;
 const nodes = computeNodes(dagQuery.data.nodes, dagQuery.data.status);
-const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedItems(
-nodes,
-dagQuery.data.edges
+getLayoutedItems(nodes, dagQuery.data.edges).then(
+({ nodes: layoutedNodes, edges: layoutedEdges }) => {
+setNodes(layoutedNodes);
+setEdges(layoutedEdges);
+}
 );
-setNodes(layoutedNodes);
-setEdges(layoutedEdges);
 }, [dagQuery.data, setNodes, setEdges]);
 
 useEffect(() => {