fix: Misc Bugs (#692)

Author: Cahllagerfeld

src/app/page.tsx

@@ -2,7 +2,6 @@ import CloudSquares from "@/assets/illustrations/cloud-squares.svg";
 import { Badge, Box, Button } from "@zenml-io/react-component-library";
 import { Codesnippet } from "../components/CodeSnippet";
 import External from "@/assets/icons/link-external.svg?react";
-import Codespaces from "@/assets/images/codespaces.gif";
 import { OverviewHeader } from "./Header";
 import { Link } from "react-router-dom";
 import { routes } from "@/router/routes";
@@ -59,30 +58,25 @@ function OverviewContent() {
 
 function VsCodeBox() {
 	return (
-		<Box className="flex flex-col-reverse items-center overflow-hidden md:max-h-[200px] md:flex-row">
-			<div className="w-full space-y-3 px-7 py-5 xl:w-4/5">
+		<Box className="flex flex-col items-center justify-between gap-3 overflow-hidden px-7 py-5 md:flex-row md:flex-wrap">
+			<div className="space-y-1">
 				<div className="flex items-center space-x-1">
 					<Badge className="text-text-xs font-semibold" color="green">
 						NEW
 					</Badge>
 					<h2 className="text-text-xl font-semibold">VS Code Quickstart with ZenML</h2>
 				</div>
 				<p className="text-theme-text-secondary">
-					Get started quickly with ZenML using GitHub Codespaces!
-					<br />
-					You can run our quickstart guide in a pre-configured environment.
+					Get started quickly with ZenML using GitHub Codespaces! You can run our quickstart guide
+					in a pre-configured environment.
 				</p>
-				<Button size="sm" className="w-fit" emphasis="subtle" asChild>
-					<a target="_blank" rel="noopener noreferrer" href="https://github.com/zenml-io/zenml">
-						Visit our GitHub repo <External className="h-5 w-5" />
-					</a>
-				</Button>
 			</div>
-			<img
-				className="object-contain"
-				src={Codespaces}
-				alt="Gif explaining how to setup codespaces"
-			/>
+
+			<Button size="sm" className="w-fit" emphasis="subtle" asChild>
+				<a target="_blank" rel="noopener noreferrer" href="https://github.com/zenml-io/zenml">
+					Visit our GitHub repo <External className="h-5 w-5 shrink-0" />
+				</a>
+			</Button>
 		</Box>
 	);
 }

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

@@ -45,5 +45,7 @@ function StackTabContent({ stackId, run }: StackTabContentProps) {
 		return <p>Failed to fetch Stack</p>;
 	}
 
-	return <StackInfo stack={data} run={run} />;
+	const config = (run.metadata?.config.settings as { [key: string]: any } | undefined) || {};
+
+	return <StackInfo stack={data} objectConfig={config} />;
 }

src/assets/images/codespaces.gif

@@ -254,8 +254,8 @@ export function CodeCard({ artifactVersionId }: Props) {
 	function returnConfigSchema(id: string) {
 		return `from zenml.client import Client
 
-artifact = Client().get_artifact_version('${id}')
-loaded_artifact = artifact.load()`;
+step = Client().get_run_step(${id})
+config = step.config`;
 	}
 
 	return (

src/components/artifacts/artifact-node-sheet/DetailCards.tsx

@@ -1,7 +1,6 @@
 import { snakeCaseToTitleCase } from "@/lib/strings";
 import { sanitizeUrl } from "@/lib/url";
 import { routes } from "@/router/routes";
-import { PipelineRun } from "@/types//pipeline-runs";
 import { StackComponent } from "@/types/components";
 import { Box, Button } from "@zenml-io/react-component-library/components/server";
 import { Link } from "react-router-dom";
@@ -10,12 +9,11 @@ import { ComponentBadge } from "../../stack-components/ComponentBadge";
 
 type Props = {
 	component: StackComponent;
-	run: PipelineRun;
+	objectConfig: Record<string, any>;
 };
-export function ComponentCollapsible({ component, run }: Props) {
+export function ComponentCollapsible({ component, objectConfig }: Props) {
 	const keyName = `${component.body?.type}.${component.body?.flavor}`;
-	const settings =
-		(run.metadata?.config.settings as { [key: string]: any } | undefined)?.[keyName] ?? undefined;
+	const settings = objectConfig?.[keyName] ?? undefined;
 
 	if (!settings || Object.keys(settings).length === 0) {
 		return (

src/components/stacks/info/ComponentCollapsible.tsx

@@ -1,14 +1,13 @@
 import { Stack, StackComponentsList } from "@/types/stack";
-import { StackHeader } from "./StackHeader";
-import { ComponentCollapsible } from "./ComponentCollapsible";
-import { PipelineRun } from "@/types/pipeline-runs";
 import { InfoBox } from "../../Infobox";
+import { ComponentCollapsible } from "./ComponentCollapsible";
+import { StackHeader } from "./StackHeader";
 
 type Props = {
 	stack: Stack;
-	run: PipelineRun;
+	objectConfig: Record<string, any>;
 };
-export function StackInfo({ stack, run }: Props) {
+export function StackInfo({ stack, objectConfig }: Props) {
 	return (
 		<div className="space-y-5">
 			<StackInfobox />
@@ -17,7 +16,7 @@ export function StackInfo({ stack, run }: Props) {
 				{Object.values((stack.metadata?.components as StackComponentsList) || {}).map(
 					(component) => (
 						<li key={component[0].id} className="w-full">
-							<ComponentCollapsible component={component[0]} run={run} />
+							<ComponentCollapsible component={component[0]} objectConfig={objectConfig} />
 						</li>
 					)
 				)}

src/components/stacks/info/index.tsx

@@ -6,7 +6,7 @@ import { usePipelineBuild } from "@/data/pipeline-builds/all-pipeline-builds-que
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useStepDetail } from "@/data/steps/step-detail-query";
 import { renderAnyToString } from "@/lib/strings";
-import { AnyDict, MetadataMap } from "@/types/common";
+import { AnyDict } from "@/types/common";
 import { BuildItemMap } from "@/types/pipeline-builds";
 import { Skeleton } from "@zenml-io/react-component-library";
 import {
@@ -17,15 +17,14 @@ import {
 } from "@zenml-io/react-component-library/components/client";
 import { useParams } from "react-router-dom";
 import { ErrorFallback } from "../../Error";
-import { UncategorizedCard } from "../../MetadataCards";
+import { NestedCollapsible } from "../../NestedCollapsible";
 
 type Props = {
 	stepId: string;
 };
 
 export function StepConfigTab({ stepId }: Props) {
 	const { data, isPending, isError, error } = useStepDetail({ stepId });
-	const extraData = Object.values(data?.metadata?.config?.extra || {});
 
 	const { runId } = useParams() as { runId: string };
 
@@ -79,13 +78,15 @@ export function StepConfigTab({ stepId }: Props) {
 
 	return (
 		<div className="space-y-5">
-			{data.metadata?.run_metadata && (
-				<UncategorizedCard title="Metadata" metadata={data.metadata?.run_metadata as MetadataMap} />
-			)}
 			<KeyValueCard data={data.metadata?.config?.parameters as AnyDict} title="Parameters" />
 			{dataImage ? <DockerImageCollapsible data={dataImage} /> : null}
 			<CodeSnippetCard id={data.id} />
-			{extraData.length > 0 ? <KeyValueCard data={extraData as AnyDict} title="Extra" /> : null}
+			<NestedCollapsible
+				isInitialOpen
+				title="Resources"
+				data={(data.metadata?.config.settings as { [key: string]: any })?.resources || {}}
+			/>
+			<NestedCollapsible isInitialOpen title="Extra" data={data.metadata?.config.extra} />
 		</div>
 	);
 }

src/components/steps/step-sheet/ConfigurationTab.tsx

@@ -113,7 +113,7 @@ export function StepSheetContent({ stepId }: Props) {
 						<OrchestratorCard />
 					</TabsContent>
 					<TabsContent className="m-0 mt-5 border-0 bg-transparent p-0" value="stack">
-						<StackTab />
+						<StackTab stepId={stepId} />
 					</TabsContent>
 					<TabsContent className="m-0 mt-5 border-0 bg-transparent p-0" value="code">
 						<StepCodeTab stepId={stepId} />

src/components/steps/step-sheet/SheetContent.tsx

@@ -2,20 +2,25 @@ import AlertCircle from "@/assets/icons/alert-circle.svg?react";
 import { StackInfo } from "@/components/stacks/info";
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useStack } from "@/data/stacks/stack-detail-query";
-import { PipelineRun } from "@/types/pipeline-runs";
+import { useStepDetail } from "@/data/steps/step-detail-query";
 import { Skeleton } from "@zenml-io/react-component-library";
 import { useParams } from "react-router-dom";
 import { EmptyState } from "../../EmptyState";
 
-export function StackTab() {
+type Props = {
+	stepId: string;
+};
+export function StackTab({ stepId }: Props) {
 	const { runId } = useParams() as { runId: string };
 
-	const run = usePipelineRun({ runId: runId }, { throwOnError: true });
+	const run = usePipelineRun({ runId: runId });
+	const step = useStepDetail({ stepId: stepId });
 
-	if (run.isPending) return <Skeleton className="h-[250px] w-full" />;
-	if (run.isError) return <p>Something went wrong fetching the run</p>;
+	if (run.isPending || step.isPending) return <Skeleton className="h-[250px] w-full" />;
+	if (run.isError || step.isError) return <p>Something went wrong fetching the run</p>;
 
 	const stackId = run.data?.body?.stack?.id;
+	const config = (step.data.metadata?.config.settings as { [key: string]: any } | undefined) || {};
 
 	if (!stackId)
 		return (
@@ -29,14 +34,14 @@ export function StackTab() {
 			</EmptyState>
 		);
 
-	return <StackTabContent run={run.data} stackId={stackId} />;
+	return <StackTabContent objectConfig={config} stackId={stackId} />;
 }
 
 type StackTabContentProps = {
 	stackId: string;
-	run: PipelineRun;
+	objectConfig: Record<string, any>;
 };
-function StackTabContent({ stackId, run }: StackTabContentProps) {
+function StackTabContent({ stackId, objectConfig }: StackTabContentProps) {
 	const { data, isError, isPending } = useStack({ stackId: stackId });
 
 	if (isPending) return <Skeleton className="h-[250px] w-full" />;
@@ -45,5 +50,5 @@ function StackTabContent({ stackId, run }: StackTabContentProps) {
 		return <p>Failed to fetch Stack</p>;
 	}
 
-	return <StackInfo stack={data} run={run} />;
+	return <StackInfo stack={data} objectConfig={objectConfig} />;
 }