Collection for Release

src/components/MetadataCards.tsx

@@ -10,6 +10,7 @@ import { Codesnippet } from "./CodeSnippet";
 import { CollapsibleCard } from "./CollapsibleCard";
 import { KeyValue } from "./KeyValue";
 import { NestedCollapsible } from "./NestedCollapsible";
+import { isUrl } from "../lib/url";
 
 type Props = { metadata: MetadataMap };
 
@@ -18,7 +19,11 @@ export function MetadataCards({ metadata }: Props) {
 	return (
 		<>
 			{dictMetadata.map((metadataObj, idx) => (
-				<NestedCollapsible key={idx} data={metadataObj} title={Object.keys({ metadataObj })[0]} />
+				<NestedCollapsible
+					key={idx}
+					data={metadataObj as Record<string, unknown>}
+					title={Object.keys({ metadataObj })[0]}
+				/>
 			))}
 		</>
 	);
@@ -55,9 +60,21 @@ export function UncategorizedCard({ metadata, title }: Props & { title?: string
 										{(() => {
 											if (isString(value) && regex.test(value)) {
 												return <Codesnippet className="py-1" highlightCode code={value} />;
+											}
+											if (isString(value) && isUrl(value)) {
+												return (
+													<a
+														className="underline transition-all duration-200 hover:decoration-transparent"
+														href={value}
+														target="_blank"
+														rel="noopener noreferrer"
+													>
+														{value}
+													</a>
+												);
 											} else {
 												return (
-													<div className="py-1">
+													<div className="whitespace-normal">
 														{isString(value) ? value : JSON.stringify(value)}
 													</div>
 												);

src/components/NestedCollapsible.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { renderAnyToString } from "@/lib/strings";
+import { isArray, isObject, isString } from "@/lib/type-guards";
+import { isUrl } from "@/lib/url";
 import { CollapsibleHeaderProps } from "@zenml-io/react-component-library";
 import {
 	Tooltip,
@@ -14,7 +14,7 @@ import { KeyValue } from "./KeyValue";
 
 type Props = {
 	intent?: CollapsibleHeaderProps["intent"];
-	data?: { [key: string]: any };
+	data?: { [key: string]: unknown };
 	title: ReactNode;
 	contentClassName?: string;
 	className?: string;
@@ -30,15 +30,15 @@ export function NestedCollapsible({
 	children,
 	className
 }: PropsWithChildren<Props>) {
-	const objects: { [key: string]: any } = {};
-	const nonObjects: { [key: string]: any } = {};
-	const arrays: { [key: string]: any } = {};
+	const objects: { [key: string]: Record<string, unknown> } = {};
+	const nonObjects: { [key: string]: unknown } = {};
+	const arrays: { [key: string]: unknown[] } = {};
 	const regex = /^<class\s+'.*'>$/;
 
 	for (const [key, value] of Object.entries(data || {})) {
-		if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-			objects[key] = value;
-		} else if (Array.isArray(value)) {
+		if (isObject(value)) {
+			objects[key] = value as Record<string, unknown>;
+		} else if (isArray(value)) {
 			arrays[key] = value;
 		} else {
 			nonObjects[key] = value;
@@ -74,14 +74,23 @@ export function NestedCollapsible({
 								}
 								value={
 									<>
-										{typeof value === "boolean" ? (
-											<div className="py-1">{JSON.stringify(value)}</div>
-										) : regex.test(value) ? (
+										{isString(value) && regex.test(value) ? (
 											<Codesnippet className="py-1" highlightCode code={value} />
 										) : value === null ? (
-											<div className="overflow-x-auto">null</div>
+											<div>null</div>
+										) : isString(value) && isUrl(value) ? (
+											<a
+												className="underline transition-all duration-200 hover:decoration-transparent"
+												href={value}
+												target="_blank"
+												rel="noopener noreferrer"
+											>
+												{value}
+											</a>
 										) : (
-											<div className="overflow-x-auto py-1">{value}</div>
+											<div className="whitespace-normal">
+												{isString(value) ? value : JSON.stringify(value)}
+											</div>
 										)}
 									</>
 								}
@@ -101,13 +110,11 @@ export function NestedCollapsible({
 	);
 }
 
-function RenderArray({ title, value }: { title: string; value: any }) {
-	const simpleValues: any[] = value.filter(
-		(val: any) => (!Array.isArray(val) && typeof val !== "object") || val === null
-	);
-	const nestedValues: any[] = value.filter(
-		(val: any) => Array.isArray(val) || typeof val === "object"
+function RenderArray({ title, value }: { title: string; value: unknown[] }) {
+	const simpleValues: unknown[] = value.filter(
+		(val) => (!isArray(val) && !isObject(val)) || val === null
 	);
+	const nestedValues: unknown[] = value.filter((val) => isArray(val) || isObject);
 
 	return (
 		<>
@@ -125,16 +132,40 @@ function RenderArray({ title, value }: { title: string; value: any }) {
 										</Tooltip>
 									</TooltipProvider>
 								}
-								value={<div className="py-1">{renderAnyToString(value)}</div>}
+								value={
+									<div className="py-1">
+										{value === null ? (
+											<div>null</div>
+										) : isString(value) && isUrl(value) ? (
+											<a
+												className="underline transition-all duration-200 hover:decoration-transparent"
+												href={value}
+												target="_blank"
+												rel="noopener noreferrer"
+											>
+												{value}
+											</a>
+										) : (
+											<div className="whitespace-normal">
+												{isString(value) ? value : JSON.stringify(value)}
+											</div>
+										)}
+									</div>
+								}
 							/>
 						))}
 					</dl>
 				)}
 				{nestedValues.length > 0 && (
 					<ul className="space-y-4">
-						{nestedValues.map((val: any, index: number) => (
+						{nestedValues.map((val, index: number) => (
 							<li key={index}>
-								<NestedCollapsible intent="secondary" key={index} title={index} data={val} />
+								<NestedCollapsible
+									intent="secondary"
+									key={index}
+									title={index}
+									data={val as Record<string, Record<string, unknown> | unknown[]>}
+								/>
 							</li>
 						))}
 					</ul>

src/components/dag-visualizer/layout/real-data.ts

@@ -32,7 +32,7 @@ function extractNodes(stepConfig: StepDict) {
 					id: version.id,
 					placeholderId,
 					type: "artifact",
-					data: { ...version, name: version.body?.artifact.name || outputName }
+					data: { ...version, name: outputName }
 				});
 			});
 		});

src/lib/url.ts

@@ -32,3 +32,7 @@ export function sanitizeUrl(url = "about:blank"): string {
 }
 
 export const urlSchema = z.string().url();
+
+export function isUrl(probe: string) {
+	return urlSchema.safeParse(probe).success;
+}

src/types/pipeline-runs.ts

@@ -15,15 +15,13 @@ type ArtifactNodeDetails = ArtifactVersion & { name: string };
 export type ArtifactNode = {
 	id: string;
 	placeholderId: string;
-	helperId?: string;
 	type: "artifact";
 	data: ArtifactNodeDetails;
 };
 
 export type StepNode = {
 	id: string;
 	placeholderId: string;
-	helperId?: string;
 	type: "step";
 	data: Step;
 };