feat: add display name (#957)

Author: Cahllagerfeld

src/app/components/columns.tsx

@@ -90,9 +90,9 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 		{
 			id: "flavor",
 			header: "Flavor",
-			accessorFn: (row) => row.body?.flavor_name,
+			accessorFn: (row) => row.resources?.flavor?.body?.display_name,
 			cell: ({ row }) => {
-				const flavor = row.original.body?.flavor_name;
+				const flavor = row.original.resources?.flavor?.body?.display_name;
 				return (
 					<Tag
 						rounded={false}

src/app/components/create/config-step.tsx

@@ -23,6 +23,8 @@ export function ConfiguratinStep({ flavor, type, handleBack }: Props) {
 		navigate(routes.components.detail(id));
 	}
 
+	const flavorName = flavor.body?.display_name ?? snakeCaseToTitleCase(flavor.name);
+
 	return (
 		<>
 			<Wizard.Header className="flex items-center gap-2">
@@ -36,7 +38,7 @@ export function ConfiguratinStep({ flavor, type, handleBack }: Props) {
 					<span className="sr-only">Go step back</span>
 				</Button>
 				<span>
-					Configure your {snakeCaseToTitleCase(flavor.name)} {snakeCaseToTitleCase(type)}
+					Configure your {flavorName} {snakeCaseToTitleCase(type)}
 				</span>
 			</Wizard.Header>
 			<Wizard.Body className="p-0">

src/app/runs/[id]/pipeline-viz/dag/index.tsx

@@ -1,3 +1,4 @@
+import RunIcon from "@/assets/icons/terminal.svg?react";
 import { ArtifactNode } from "@/components/dag-visualizer/ArtifactNode";
 import { DagControls } from "@/components/dag-visualizer/Controls";
 import { ElkEdge } from "@/components/dag-visualizer/elk-edge";
@@ -7,6 +8,7 @@ import { PreviewStepNode } from "@/components/dag-visualizer/PreviewStep";
 import { SheetProvider } from "@/components/dag-visualizer/sheet-context";
 import { StepNode } from "@/components/dag-visualizer/StepNode";
 import { TriggeredRunNode } from "@/components/dag-visualizer/TriggeredRunNode";
+import { EmptyState } from "@/components/EmptyState";
 import { Dag } from "@/types/dag-visualizer";
 import { Spinner } from "@zenml-io/react-component-library/components/server";
 import ReactFlow, { NodeTypes } from "reactflow";
@@ -36,6 +38,17 @@ export function DAG({ dagData, refetchHandler, setActiveView }: Props) {
 	const { nodes, edges, onNodesChange, onEdgesChange, initialRender, topMostNode, shouldFitView } =
 		useDag(dagData);
 
+	if (dagData.nodes.length === 0) {
+		return (
+			<EmptyState icon={<RunIcon className="h-[120px] w-[120px] fill-neutral-300" />}>
+				<div className="space-y-2 text-center">
+					<p className="text-display-xs font-semibold">No steps to display</p>
+					<p className="text-base text-neutral-500">There are no steps to display for this run.</p>
+				</div>
+			</EmptyState>
+		);
+	}
+
 	if (initialRender)
 		return (
 			<div className="flex h-full flex-col items-center justify-center">

src/app/stacks/create/existing-infrastructure/steps/final/index.tsx

@@ -87,7 +87,7 @@ function StackComponentItem({ component }: { component: StackComponent }) {
 				<FlavorIcon
 					width={24}
 					height={24}
-					flavor={component.body?.flavor_name || ""}
+					flavor={component.resources?.flavor.name || ""}
 					type={component.body?.type || "orchestrator"}
 				/>
 				<div>

src/components/stack-components/component-detail/ConfigTab.tsx

@@ -83,7 +83,7 @@ function BasicParams({ componentId }: Props) {
 									src={sanitizeUrl(component.body?.logo_url || "")}
 									alt="Flavor Icon of Component"
 								/>
-								<p className="truncate">{component.body?.flavor_name}</p>
+								<p className="truncate">{component.resources?.flavor?.body?.display_name}</p>
 							</Tag>
 						}
 					/>

src/components/stack-components/component-detail/Header.tsx

@@ -91,7 +91,9 @@ function ComponentIcon({ componentId }: Props) {
 	if (component.isPending) return <Skeleton className="h-5 w-5" />;
 	return (
 		<img
-			className="h-5 w-5"
+			width={24}
+			height={24}
+			className="shrink-0"
 			src={sanitizeUrl(component.data.body?.logo_url || "")}
 			alt={`Icon of component ${component.data.name}`}
 		/>

src/components/stack-components/create-component/flavor-select.tsx

@@ -29,6 +29,7 @@ export function SelectFlavorList({ type, setSelectedFlavor }: Props) {
 							onClick={() => setSelectedFlavor(flavor)}
 							id={flavor.id}
 							name={flavor.name}
+							displayName={flavor.body?.display_name ?? undefined}
 							logoUrl={flavor.body?.logo_url ?? undefined}
 						/>
 					</li>
@@ -41,12 +42,14 @@ export function SelectFlavorList({ type, setSelectedFlavor }: Props) {
 type FlavorListItemItemProps = {
 	id: string;
 	name: string;
+	displayName?: string;
 	logoUrl?: string;
 	type: StackComponentType;
 	onClick?: () => void;
 };
 
-function FlavorListItem({ name, logoUrl, onClick, type }: FlavorListItemItemProps) {
+function FlavorListItem({ name, logoUrl, onClick, type, displayName }: FlavorListItemItemProps) {
+	const flavorName = displayName ?? snakeCaseToTitleCase(name);
 	return (
 		<Button
 			onClick={onClick}
@@ -68,7 +71,7 @@ function FlavorListItem({ name, logoUrl, onClick, type }: FlavorListItemItemProp
 					type={type}
 				/>
 			)}
-			<span className="min-w-0 truncate">{snakeCaseToTitleCase(name)}</span>
+			<span className="min-w-0 truncate">{flavorName}</span>
 		</Button>
 	);
 }

src/components/stacks/Sheet/index.tsx

@@ -143,7 +143,7 @@ function ComponentListItem({ component }: ComponentListItemProps) {
 				<img
 					width={32}
 					height={32}
-					alt={`${component.body?.flavor_name} logo`}
+					alt={`${component.resources?.flavor?.body?.display_name} logo`}
 					src={sanitizeUrl(component.body?.logo_url || "")}
 				/>
 				<div>

src/types/core.ts

@@ -4031,6 +4031,8 @@ export type components = {
 			metadata?: {
 				[key: string]: unknown;
 			} | null;
+			/** The number of items in the artifact version if it is sequence-like. This should only be set for artifacts that can be split into parts, like lists or arrays. */
+			item_count?: number | null;
 		};
 		/**
 		 * ArtifactVersionResponse
@@ -4094,6 +4096,8 @@ export type components = {
 			artifact_store_id?: string | null;
 			/** The content hash of the artifact version. */
 			content_hash?: string | null;
+			/** The number of items in the artifact version if it is sequence-like. This should only be set for artifacts that can be split into parts, like lists or arrays. */
+			item_count?: number | null;
 		};
 		/**
 		 * ArtifactVersionResponseMetadata
@@ -5458,6 +5462,8 @@ export type components = {
 			user?: string | null;
 			/** The name of the Flavor. */
 			name: string;
+			/** The display name of the Flavor. */
+			display_name?: string | null;
 			/** The type of the Flavor. */
 			type: components["schemas"]["StackComponentType"];
 			/** The JSON schema of this flavor's corresponding configuration. */
@@ -5529,6 +5535,8 @@ export type components = {
 			user_id?: string | null;
 			/** The type of the Flavor. */
 			type: components["schemas"]["StackComponentType"];
+			/** The display name of the Flavor. */
+			display_name: string;
 			/** The name of the integration that the Flavor belongs to. */
 			integration: string | null;
 			/** The path to the module which contains this Flavor. */
@@ -5577,6 +5585,8 @@ export type components = {
 		FlavorUpdate: {
 			/** The name of the Flavor. */
 			name?: string | null;
+			/** The display name of the Flavor. */
+			display_name?: string | null;
 			/** The type of the Flavor. */
 			type?: components["schemas"]["StackComponentType"] | null;
 			/** The JSON schema of this flavor's corresponding configuration. */
@@ -5616,6 +5626,10 @@ export type components = {
 			step_name: string;
 			/** Output Name */
 			output_name: string;
+			/** Chunk Index */
+			chunk_index?: number | null;
+			/** Chunk Size */
+			chunk_size?: number | null;
 		};
 		/**
 		 * LoadedVisualization
@@ -10047,6 +10061,12 @@ export type components = {
 			 */
 			permission_denied?: boolean;
 			input_type: components["schemas"]["StepRunInputArtifactType"];
+			/** The index of the input artifact in the step run. */
+			index?: number | null;
+			/** The index of the chunk in the input artifact. */
+			chunk_index?: number | null;
+			/** The size of the chunk in the input artifact. */
+			chunk_size?: number | null;
 		};
 		/**
 		 * StepRunRequest
@@ -10290,6 +10310,11 @@ export type components = {
 			};
 			/** Invocation Id */
 			invocation_id: string;
+			/**
+			 * Enable Heartbeat
+			 * @default false
+			 */
+			enable_heartbeat?: boolean;
 		};
 		/**
 		 * StepSpec
@@ -10308,6 +10333,11 @@ export type components = {
 			};
 			/** Invocation Id */
 			invocation_id: string;
+			/**
+			 * Enable Heartbeat
+			 * @default false
+			 */
+			enable_heartbeat?: boolean;
 		};
 		/**
 		 * Tag
@@ -13715,6 +13745,7 @@ export type operations = {
 				scope_user?: string | null;
 				user?: string | null;
 				name?: string | null;
+				display_name?: string | null;
 				type?: string | null;
 				integration?: string | null;
 			};