@datarecce/ui 0.1.27 → 0.1.28

package/dist/api.d.mts

@@ -1,3 +1,3 @@
 
-import { $n as CreateCheckBody, $r as RowCount, A as connectToCloud, Ai as CatalogMetadata, B as submitQueryBase, Bi as ServerInfoResult, Br as ValueDiffDetailParams, C as SchemaDiffViewParams, Ci as submitRunFromCheck, D as markOnboardingCompleted, Di as ColumnLineageData, E as getServerFlag, Ei as CllNodeData, F as QueryPreviewChangeParams, Fi as ManifestMetadata, Gi as getServerInfo, Gr as submitValueDiff, Hi as getLineageDiff, Hr as ValueDiffDetailViewOptions, I as QueryResult, Ii as ModelInfoResult, Ji as stateMetadata, Jr as RowCountDiffResult, Ki as gitInfo, Kr as submitValueDiffDetail, L as QueryRunParams, Li as NodeColumnData, M as QueryDiffResult, Mi as LineageDataFromMetadata, N as QueryDiffViewOptions, Ni as LineageDiffData, O as markRelaunchHintCompleted, Oi as ImpactRadiusParams, P as QueryParams, Pi as LineageDiffResult, Qn as Check, Qr as QueryRowCountResult, R as QueryViewOptions, Ri as NodeData, S as select, Si as submitRun, T as RecceServerFlags, Ti as CllInput, Ui as getLineageWithError, Ur as ValueDiffParams, V as submitQueryDiff, Vi as getLineage, Vr as ValueDiffDetailResult, Wi as getModelInfo, Wr as ValueDiffResult, Xn as LineageDiffViewOptions, Xr as RowCountResult, Yr as RowCountParams, Zn as createLineageDiffCheck, Zr as submitRowCountDiff, _ as saveAs, _i as aggregateRuns, a as User, aa as reactQueryClient, ai as HistogramDiffResult, ar as markAsPresetCheck, b as SelectInput, bi as listRuns, c as ImportedState, ci as ProfileDiffResult, cr as useChecks, d as SyncStateInput, di as TopKDiffResult, ei as RowCountDiff, er as createCheckByRun, f as SyncStateResponse, fi as TopKResult, g as rename, gi as SubmitRunTrackProps, h as isStateSyncing, hi as SubmitOptions, i as useVersionNumber, ia as axiosClient, ii as HistogramDiffParams, ir as listChecks, j as QueryDiffParams, ji as LineageData, k as ConnectToCloud, ki as getCll, l as SaveAsInput, li as ProfileDiffViewOptions, m as importState, mi as RunsAggregated, n as localStorageKeys, ni as queryModelRowCount, nr as deleteCheck, o as fetchGitHubAvatar, oi as HistogramResult, or as reorderChecks, p as exportState, pi as submitProfileDiff, qi as pullRequestInfo, qr as RowCountDiffParams, r as getVersion, ri as queryRowCount, rr as getCheck, s as fetchUser, si as ProfileDiffParams, sr as updateCheck, t as sessionStorageKeys, ti as fetchModelRowCount, tr as createSimpleCheck, u as ShareStateResponse, ui as TopKDiffParams, v as shareState, vi as cancelRun, w as createSchemaDiffCheck, wi as waitRun, x as SelectOutput, xi as searchRuns, y as syncState, yi as getRun, z as submitQuery, zi as SQLMeshInfo } from "./index-BbISJwin.mjs";
+import { $n as CreateCheckBody, $r as RowCount, A as connectToCloud, Ai as CatalogMetadata, B as submitQueryBase, Bi as ServerInfoResult, Br as ValueDiffDetailParams, C as SchemaDiffViewParams, Ci as submitRunFromCheck, D as markOnboardingCompleted, Di as ColumnLineageData, E as getServerFlag, Ei as CllNodeData, F as QueryPreviewChangeParams, Fi as ManifestMetadata, Gi as getServerInfo, Gr as submitValueDiff, Hi as getLineageDiff, Hr as ValueDiffDetailViewOptions, I as QueryResult, Ii as ModelInfoResult, Ji as stateMetadata, Jr as RowCountDiffResult, Ki as gitInfo, Kr as submitValueDiffDetail, L as QueryRunParams, Li as NodeColumnData, M as QueryDiffResult, Mi as LineageDataFromMetadata, N as QueryDiffViewOptions, Ni as LineageDiffData, O as markRelaunchHintCompleted, Oi as ImpactRadiusParams, P as QueryParams, Pi as LineageDiffResult, Qn as Check, Qr as QueryRowCountResult, R as QueryViewOptions, Ri as NodeData, S as select, Si as submitRun, T as RecceServerFlags, Ti as CllInput, Ui as getLineageWithError, Ur as ValueDiffParams, V as submitQueryDiff, Vi as getLineage, Vr as ValueDiffDetailResult, Wi as getModelInfo, Wr as ValueDiffResult, Xn as LineageDiffViewOptions, Xr as RowCountResult, Yr as RowCountParams, Zn as createLineageDiffCheck, Zr as submitRowCountDiff, _ as saveAs, _i as aggregateRuns, a as User, aa as reactQueryClient, ai as HistogramDiffResult, ar as markAsPresetCheck, b as SelectInput, bi as listRuns, c as ImportedState, ci as ProfileDiffResult, cr as useChecks, d as SyncStateInput, di as TopKDiffResult, ei as RowCountDiff, er as createCheckByRun, f as SyncStateResponse, fi as TopKResult, g as rename, gi as SubmitRunTrackProps, h as isStateSyncing, hi as SubmitOptions, i as useVersionNumber, ia as axiosClient, ii as HistogramDiffParams, ir as listChecks, j as QueryDiffParams, ji as LineageData, k as ConnectToCloud, ki as getCll, l as SaveAsInput, li as ProfileDiffViewOptions, m as importState, mi as RunsAggregated, n as localStorageKeys, ni as queryModelRowCount, nr as deleteCheck, o as fetchGitHubAvatar, oi as HistogramResult, or as reorderChecks, p as exportState, pi as submitProfileDiff, qi as pullRequestInfo, qr as RowCountDiffParams, r as getVersion, ri as queryRowCount, rr as getCheck, s as fetchUser, si as ProfileDiffParams, sr as updateCheck, t as sessionStorageKeys, ti as fetchModelRowCount, tr as createSimpleCheck, u as ShareStateResponse, ui as TopKDiffParams, v as shareState, vi as cancelRun, w as createSchemaDiffCheck, wi as waitRun, x as SelectOutput, xi as searchRuns, y as syncState, yi as getRun, z as submitQuery, zi as SQLMeshInfo } from "./index-OJCzYajo.mjs";
 export { CatalogMetadata, Check, CllInput, CllNodeData, ColumnLineageData, ConnectToCloud, CreateCheckBody, HistogramDiffParams, HistogramDiffResult, HistogramResult, ImpactRadiusParams, ImportedState, LineageData, LineageDataFromMetadata, LineageDiffData, LineageDiffResult, LineageDiffViewOptions, ManifestMetadata, ModelInfoResult, NodeColumnData, NodeData, ProfileDiffParams, ProfileDiffResult, ProfileDiffViewOptions, QueryDiffParams, QueryDiffResult, QueryDiffViewOptions, QueryParams, QueryPreviewChangeParams, QueryResult, QueryRowCountResult, QueryRunParams, QueryViewOptions, RecceServerFlags, RowCount, RowCountDiff, RowCountDiffParams, RowCountDiffResult, RowCountParams, RowCountResult, RunsAggregated, SQLMeshInfo, SaveAsInput, SchemaDiffViewParams, SelectInput, SelectOutput, ServerInfoResult, ShareStateResponse, SubmitOptions, SubmitRunTrackProps, SyncStateInput, SyncStateResponse, TopKDiffParams, TopKDiffResult, TopKResult, User, ValueDiffDetailParams, ValueDiffDetailResult, ValueDiffDetailViewOptions, ValueDiffParams, ValueDiffResult, aggregateRuns, axiosClient, cancelRun, connectToCloud, createCheckByRun, createLineageDiffCheck, createSchemaDiffCheck, createSimpleCheck, deleteCheck, exportState, fetchGitHubAvatar, fetchModelRowCount, fetchUser, getCheck, getCll, getLineage, getLineageDiff, getLineageWithError, getModelInfo, getRun, getServerFlag, getServerInfo, getVersion, gitInfo, importState, isStateSyncing, listChecks, listRuns, localStorageKeys, markAsPresetCheck, markOnboardingCompleted, markRelaunchHintCompleted, pullRequestInfo, queryModelRowCount, queryRowCount, reactQueryClient, rename, reorderChecks, saveAs, searchRuns, select, sessionStorageKeys, shareState, stateMetadata, submitProfileDiff, submitQuery, submitQueryBase, submitQueryDiff, submitRowCountDiff, submitRun, submitRunFromCheck, submitValueDiff, submitValueDiffDetail, syncState, updateCheck, useChecks, useVersionNumber, waitRun };

package/dist/{components-DoLZeY_e.mjs → components-Bt0G4cpr.mjs}

@@ -5478,11 +5478,12 @@ function NodeView({ node, onCloseNode }) {
 	};
 	const baseColumns = Object.keys(node.data.data.base?.columns ?? {});
 	const currentColumns = Object.keys(node.data.data.current?.columns ?? {});
+	const isModelSeedOrSnapshot = node.data.resourceType === "model" || node.data.resourceType === "seed" || node.data.resourceType === "snapshot";
 	return /* @__PURE__ */ jsxs(Box, {
 		sx: {
 			height: "100%",
 			display: "grid",
-			gridTemplateRows: "auto auto 1fr"
+			gridTemplateRows: "auto auto auto 1fr"
 		},
 		children: [
 			/* @__PURE__ */ jsxs(Stack, {
@@ -5502,18 +5503,8 @@ function NodeView({ node, onCloseNode }) {
 						})
 					}),
 					/* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
-					isSingleEnvOnboarding ? /* @__PURE__ */ jsx(SingleEnvironmentMenuButton, {
+					!isSingleEnvOnboarding && isModelSeedOrSnapshot && /* @__PURE__ */ jsx(ExploreHeaderButtons, {
 						node,
-						baseColumns,
-						currentColumns,
-						refetchRowCount,
-						disableReason
-					}) : /* @__PURE__ */ jsx(ExploreChangeMenuButton, {
-						node,
-						baseColumns,
-						currentColumns,
-						disableReason,
-						refetchRowCountDiff,
 						onSandboxOpen: () => setIsSandboxOpen(true)
 					}),
 					/* @__PURE__ */ jsx(Box, {
@@ -5534,7 +5525,7 @@ function NodeView({ node, onCloseNode }) {
 				children: /* @__PURE__ */ jsxs(Stack, {
 					direction: "row",
 					spacing: 1,
-					children: [/* @__PURE__ */ jsx(ResourceTypeTag, { node }), (node.data.resourceType === "model" || node.data.resourceType === "snapshot" || node.data.resourceType === "seed") && (isSingleEnvOnboarding ? /* @__PURE__ */ jsx(RowCountTag, {
+					children: [/* @__PURE__ */ jsx(ResourceTypeTag, { node }), isModelSeedOrSnapshot && (isSingleEnvOnboarding ? /* @__PURE__ */ jsx(RowCountTag, {
 						node,
 						onRefresh: refetchRowCount
 					}) : /* @__PURE__ */ jsx(RowCountDiffTag, {
@@ -5543,6 +5534,25 @@ function NodeView({ node, onCloseNode }) {
 					}))]
 				})
 			}),
+			isModelSeedOrSnapshot && /* @__PURE__ */ jsx(Box, {
+				sx: {
+					pl: 2,
+					py: 1
+				},
+				children: isSingleEnvOnboarding ? /* @__PURE__ */ jsx(SingleEnvActionButtons, {
+					node,
+					baseColumns,
+					currentColumns,
+					refetchRowCount,
+					disableReason
+				}) : /* @__PURE__ */ jsx(DiffActionButtons, {
+					node,
+					baseColumns,
+					currentColumns,
+					disableReason,
+					refetchRowCountDiff
+				})
+			}),
 			withColumns && /* @__PURE__ */ jsxs(Box, {
 				sx: {
 					overflow: "auto",
@@ -5611,9 +5621,7 @@ function NodeView({ node, onCloseNode }) {
 		]
 	});
 }
-function SingleEnvironmentMenuButton({ node, baseColumns, currentColumns, refetchRowCount, disableReason }) {
-	const [anchorEl, setAnchorEl] = useState(null);
-	const open = Boolean(anchorEl);
+function SingleEnvActionButtons({ node, baseColumns, currentColumns, refetchRowCount, disableReason }) {
 	const [, setLocation] = useAppLocation();
 	const { setSqlQuery } = useRecceQueryContext();
 	const { runAction } = useRecceActionContext();
@@ -5622,81 +5630,77 @@ function SingleEnvironmentMenuButton({ node, baseColumns, currentColumns, refetc
 	const formattedColumns = formatSelectColumns(baseColumns, currentColumns);
 	let query = `select * from {{ ref("${node.data.name}") }}`;
 	if (formattedColumns.length) query = `select \n  ${formattedColumns.join("\n  ")}\nfrom {{ ref("${node.data.name}") }}`;
-	const handleClick = (event) => {
-		setAnchorEl(event.currentTarget);
-	};
-	const handleClose = () => {
-		setAnchorEl(null);
+	const QueryIcon = findByRunType("query").icon;
+	const RowCountIcon = findByRunType("row_count").icon;
+	const ProfileIcon = findByRunType("profile").icon;
+	const handleQueryClick = () => {
+		if (envInfo?.adapterType === "dbt") setSqlQuery(query);
+		else if (envInfo?.adapterType === "sqlmesh") setSqlQuery(`select * from ${node.data.name}`);
+		setLocation("/query");
+	};
+	const handleRowCountClick = () => {
+		refetchRowCount();
+	};
+	const handleProfileClick = () => {
+		trackExploreAction({
+			action: EXPLORE_ACTION.PROFILE,
+			source: EXPLORE_SOURCE.NODE_SIDEBAR_SINGLE_ENV,
+			node_count: 1
+		});
+		runAction("profile", { model: node.data.name }, {
+			showForm: true,
+			showLast: false
+		});
 	};
-	if (node.data.resourceType === "model" || node.data.resourceType === "seed" || node.data.resourceType === "snapshot") {
-		const QueryIcon = findByRunType("query").icon;
-		const RowCountIcon = findByRunType("row_count").icon;
-		const ProfileIcon = findByRunType("profile").icon;
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-			size: "small",
-			variant: "outlined",
-			onClick: handleClick,
-			endIcon: /* @__PURE__ */ jsx(PiCaretDown, {}),
-			sx: { textTransform: "none" },
-			children: "Explore"
-		}), /* @__PURE__ */ jsxs(Menu, {
-			anchorEl,
-			open,
-			onClose: handleClose,
-			children: [
-				/* @__PURE__ */ jsxs(MenuItem, {
-					onClick: () => {
-						if (envInfo?.adapterType === "dbt") setSqlQuery(query);
-						else if (envInfo?.adapterType === "sqlmesh") setSqlQuery(`select * from ${node.data.name}`);
-						setLocation("/query");
-						handleClose();
-					},
-					children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(QueryIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Query" })]
-				}),
-				/* @__PURE__ */ jsxs(MenuItem, {
-					onClick: () => {
-						refetchRowCount();
-						handleClose();
-					},
-					children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(RowCountIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Row Count" })]
-				}),
-				/* @__PURE__ */ jsx(MuiTooltip, {
-					title: disableReason(isAddedOrRemoved, "profile"),
-					placement: "left",
-					children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(MenuItem, {
-						disabled: isAddedOrRemoved,
-						onClick: () => {
-							trackExploreAction({
-								action: EXPLORE_ACTION.PROFILE,
-								source: EXPLORE_SOURCE.NODE_SIDEBAR_SINGLE_ENV,
-								node_count: 1
-							});
-							runAction("profile", { model: node.data.name }, {
-								showForm: true,
-								showLast: false
-							});
-							handleClose();
-						},
-						children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(ProfileIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Profile" })]
-					}) })
-				})
-			]
-		})] });
-	}
-	return null;
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: 1,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				size: "xsmall",
+				variant: "outlined",
+				color: "neutral",
+				startIcon: /* @__PURE__ */ jsx(QueryIcon, { fontSize: "small" }),
+				onClick: handleQueryClick,
+				sx: { textTransform: "none" },
+				children: "Query"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "xsmall",
+				variant: "outlined",
+				color: "neutral",
+				startIcon: /* @__PURE__ */ jsx(RowCountIcon, { fontSize: "small" }),
+				onClick: handleRowCountClick,
+				sx: { textTransform: "none" },
+				children: "Row Count"
+			}),
+			/* @__PURE__ */ jsx(MuiTooltip, {
+				title: disableReason(isAddedOrRemoved, "profile"),
+				placement: "top",
+				children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Button, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ jsx(ProfileIcon, { fontSize: "small" }),
+					onClick: handleProfileClick,
+					disabled: isAddedOrRemoved,
+					sx: { textTransform: "none" },
+					children: "Profile"
+				}) })
+			})
+		]
+	});
 }
-function ExploreChangeMenuButton({ node, baseColumns, currentColumns, disableReason, onSandboxOpen, refetchRowCountDiff }) {
-	const [anchorEl, setAnchorEl] = useState(null);
-	const open = Boolean(anchorEl);
+function ExploreHeaderButtons({ node, onSandboxOpen }) {
 	const [, setLocation] = useAppLocation();
-	const { runAction } = useRecceActionContext();
-	const { setSqlQuery, setPrimaryKeys } = useRecceQueryContext();
-	const { envInfo, isActionAvailable } = useLineageGraphContext();
 	const { featureToggles } = useRecceInstanceContext();
+	const { isActionAvailable } = useLineageGraphContext();
+	const { setPrimaryKeys } = useRecceQueryContext();
 	const { primaryKey } = useModelColumns_default(node.data.name);
 	const { apiClient } = useApiConfig();
 	const metadataOnly = featureToggles.mode === "metadata only";
-	const isAddedOrRemoved = node.data.changeStatus === "added" || node.data.changeStatus === "removed";
 	const addSchemaCheck = useCallback(async () => {
 		const nodeId = node.id;
 		setLocation(`/checks/?id=${(await createSchemaDiffCheck({ node_id: nodeId }, apiClient)).check_id}`);
@@ -5705,186 +5709,217 @@ function ExploreChangeMenuButton({ node, baseColumns, currentColumns, disableRea
 		setLocation,
 		apiClient
 	]);
+	const SchemaDiffIcon = findByRunType("schema_diff").icon;
+	const SandboxIcon = findByRunType("sandbox").icon;
+	const handleAddSchemaCheck = () => {
+		addSchemaCheck();
+	};
+	const handleSandboxOpen = () => {
+		if (isActionAvailable("query_diff_with_primary_key")) setPrimaryKeys(primaryKey !== void 0 ? [primaryKey] : void 0);
+		onSandboxOpen();
+		trackPreviewChange({
+			action: "explore",
+			node: node.data.name
+		});
+	};
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		alignItems: "center",
+		sx: { mr: 1 },
+		flexWrap: "wrap",
+		gap: 1,
+		children: [/* @__PURE__ */ jsx(Button, {
+			size: "xsmall",
+			variant: "outlined",
+			color: "neutral",
+			startIcon: /* @__PURE__ */ jsx(SchemaDiffIcon, { fontSize: "small" }),
+			onClick: handleAddSchemaCheck,
+			sx: { textTransform: "none" },
+			children: "Add schema diff to checklist"
+		}), /* @__PURE__ */ jsx(SetupConnectionPopover, {
+			display: metadataOnly,
+			children: /* @__PURE__ */ jsx(Button, {
+				size: "xsmall",
+				variant: "outlined",
+				color: "neutral",
+				startIcon: /* @__PURE__ */ jsx(SandboxIcon, { fontSize: "small" }),
+				onClick: handleSandboxOpen,
+				disabled: featureToggles.disableDatabaseQuery,
+				sx: { textTransform: "none" },
+				children: "Sandbox"
+			})
+		})]
+	});
+}
+function DiffActionButtons({ node, baseColumns, currentColumns, disableReason, refetchRowCountDiff }) {
+	const [, setLocation] = useAppLocation();
+	const { runAction } = useRecceActionContext();
+	const { setSqlQuery, setPrimaryKeys } = useRecceQueryContext();
+	const { envInfo, isActionAvailable } = useLineageGraphContext();
+	const { featureToggles } = useRecceInstanceContext();
+	const { primaryKey } = useModelColumns_default(node.data.name);
+	const metadataOnly = featureToggles.mode === "metadata only";
+	const isAddedOrRemoved = node.data.changeStatus === "added" || node.data.changeStatus === "removed";
 	const formattedColumns = formatSelectColumns(baseColumns, currentColumns);
 	let query = `select * from {{ ref("${node.data.name}") }}`;
 	if (formattedColumns.length) query = `select \n  ${formattedColumns.join("\n  ")}\nfrom {{ ref("${node.data.name}") }}`;
-	const handleClick = (event) => {
-		setAnchorEl(event.currentTarget);
-	};
-	const handleClose = () => {
-		setAnchorEl(null);
-	};
-	const wrapMenuItem = (menuItem, runType) => {
+	const QueryDiffIcon = findByRunType("query_diff").icon;
+	const RowCountDiffIcon = findByRunType("row_count_diff").icon;
+	const ProfileDiffIcon = findByRunType("profile_diff").icon;
+	const ValueDiffIcon = findByRunType("value_diff").icon;
+	const TopKDiffIcon = findByRunType("top_k_diff").icon;
+	const HistogramDiffIcon = findByRunType("histogram_diff").icon;
+	const wrapButton = (button, runType) => {
 		if (metadataOnly) return /* @__PURE__ */ jsx(SetupConnectionPopover, {
 			display: true,
-			children: menuItem
+			children: button
 		});
 		return /* @__PURE__ */ jsx(MuiTooltip, {
 			title: disableReason(isAddedOrRemoved, runType),
-			placement: "left",
-			children: /* @__PURE__ */ jsx("span", { children: menuItem })
+			placement: "top",
+			children: /* @__PURE__ */ jsx("span", { children: button })
 		});
 	};
-	if (node.data.resourceType === "model" || node.data.resourceType === "seed" || node.data.resourceType === "snapshot") {
-		const QueryDiffIcon = findByRunType("query_diff").icon;
-		const SandboxIcon = findByRunType("sandbox").icon;
-		const RowCountDiffIcon = findByRunType("row_count_diff").icon;
-		const ProfileDiffIcon = findByRunType("profile_diff").icon;
-		const ValueDiffIcon = findByRunType("value_diff").icon;
-		const TopKDiffIcon = findByRunType("top_k_diff").icon;
-		const HistogramDiffIcon = findByRunType("histogram_diff").icon;
-		const SchemaDiffIcon = findByRunType("schema_diff").icon;
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-			size: "xsmall",
-			variant: "outlined",
-			color: "neutral",
-			onClick: handleClick,
-			disabled: featureToggles.disableNodeActionDropdown,
-			endIcon: /* @__PURE__ */ jsx(PiCaretDown, {}),
-			sx: {
-				textTransform: "none",
-				fontSize: "0.75rem"
-			},
-			children: "Explore"
-		}), /* @__PURE__ */ jsxs(Menu, {
-			anchorEl,
-			open,
-			onClose: handleClose,
+	const handleRowCountClick = () => {
+		refetchRowCountDiff();
+	};
+	const handleProfileClick = () => {
+		trackExploreAction({
+			action: EXPLORE_ACTION.PROFILE_DIFF,
+			source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+			node_count: 1
+		});
+		runAction("profile_diff", { model: node.data.name }, {
+			showForm: true,
+			showLast: false
+		});
+	};
+	const handleValueClick = () => {
+		trackExploreAction({
+			action: EXPLORE_ACTION.VALUE_DIFF,
+			source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+			node_count: 1
+		});
+		runAction("value_diff", { model: node.data.name }, {
+			showForm: true,
+			showLast: false
+		});
+	};
+	const handleTopKClick = () => {
+		trackExploreAction({
+			action: EXPLORE_ACTION.TOP_K_DIFF,
+			source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+			node_count: 1
+		});
+		runAction("top_k_diff", {
+			model: node.data.name,
+			column_name: "",
+			k: 50
+		}, { showForm: true });
+	};
+	const handleHistogramClick = () => {
+		trackExploreAction({
+			action: EXPLORE_ACTION.HISTOGRAM_DIFF,
+			source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+			node_count: 1
+		});
+		runAction("histogram_diff", {
+			model: node.data.name,
+			column_name: "",
+			column_type: ""
+		}, { showForm: true });
+	};
+	const handleQueryClick = () => {
+		if (envInfo?.adapterType === "dbt") setSqlQuery(query);
+		else if (envInfo?.adapterType === "sqlmesh") setSqlQuery(`select * from ${node.data.name}`);
+		if (isActionAvailable("query_diff_with_primary_key")) setPrimaryKeys(primaryKey !== void 0 ? [primaryKey] : void 0);
+		setLocation("/query");
+	};
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: 2,
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "caption",
+			fontWeight: "bold",
+			children: "Diff"
+		}), /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			alignItems: "center",
+			flexWrap: "wrap",
+			gap: 1,
+			width: "93%",
 			children: [
 				/* @__PURE__ */ jsx(SetupConnectionPopover, {
 					display: metadataOnly,
-					children: /* @__PURE__ */ jsxs(MenuItem, {
-						disabled: featureToggles.disableDatabaseQuery,
-						onClick: () => {
-							if (envInfo?.adapterType === "dbt") setSqlQuery(query);
-							else if (envInfo?.adapterType === "sqlmesh") setSqlQuery(`select * from ${node.data.name}`);
-							if (isActionAvailable("query_diff_with_primary_key")) setPrimaryKeys(primaryKey !== void 0 ? [primaryKey] : void 0);
-							setLocation("/query");
-							handleClose();
-						},
-						children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(QueryDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Query" })]
-					})
-				}),
-				/* @__PURE__ */ jsx(SetupConnectionPopover, {
-					display: metadataOnly,
-					children: /* @__PURE__ */ jsxs(MenuItem, {
-						disabled: featureToggles.disableDatabaseQuery,
-						onClick: () => {
-							if (isActionAvailable("query_diff_with_primary_key")) setPrimaryKeys(primaryKey !== void 0 ? [primaryKey] : void 0);
-							onSandboxOpen();
-							trackPreviewChange({
-								action: "explore",
-								node: node.data.name
-							});
-							handleClose();
-						},
-						children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(SandboxIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Sandbox (Experiment)" })]
-					})
-				}),
-				/* @__PURE__ */ jsx(Divider, {}),
-				/* @__PURE__ */ jsx(ListSubheader, {
-					sx: {
-						lineHeight: "32px",
-						bgcolor: "transparent"
-					},
-					children: "Diff"
-				}),
-				/* @__PURE__ */ jsx(SetupConnectionPopover, {
-					display: metadataOnly,
-					children: /* @__PURE__ */ jsxs(MenuItem, {
+					children: /* @__PURE__ */ jsx(Button, {
+						size: "xsmall",
+						variant: "outlined",
+						color: "neutral",
+						startIcon: /* @__PURE__ */ jsx(RowCountDiffIcon, { fontSize: "small" }),
+						onClick: handleRowCountClick,
 						disabled: featureToggles.disableDatabaseQuery,
-						onClick: () => {
-							refetchRowCountDiff();
-							handleClose();
-						},
-						children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(RowCountDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Row Count Diff" })]
+						sx: { textTransform: "none" },
+						children: "Row Count"
 					})
 				}),
-				wrapMenuItem(/* @__PURE__ */ jsxs(MenuItem, {
+				wrapButton(/* @__PURE__ */ jsx(Button, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ jsx(ProfileDiffIcon, { fontSize: "small" }),
+					onClick: handleProfileClick,
 					disabled: isAddedOrRemoved || featureToggles.disableDatabaseQuery,
-					onClick: () => {
-						trackExploreAction({
-							action: EXPLORE_ACTION.PROFILE_DIFF,
-							source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
-							node_count: 1
-						});
-						runAction("profile_diff", { model: node.data.name }, {
-							showForm: true,
-							showLast: false
-						});
-						handleClose();
-					},
-					children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(ProfileDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Profile Diff" })]
+					sx: { textTransform: "none" },
+					children: "Profile"
 				}), "profile_diff"),
-				wrapMenuItem(/* @__PURE__ */ jsxs(MenuItem, {
+				wrapButton(/* @__PURE__ */ jsx(Button, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ jsx(ValueDiffIcon, { fontSize: "small" }),
+					onClick: handleValueClick,
 					disabled: isAddedOrRemoved || featureToggles.disableDatabaseQuery,
-					onClick: () => {
-						trackExploreAction({
-							action: EXPLORE_ACTION.VALUE_DIFF,
-							source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
-							node_count: 1
-						});
-						runAction("value_diff", { model: node.data.name }, {
-							showForm: true,
-							showLast: false
-						});
-						handleClose();
-					},
-					children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(ValueDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Value Diff" })]
+					sx: { textTransform: "none" },
+					children: "Value"
 				}), "value_diff"),
-				wrapMenuItem(/* @__PURE__ */ jsxs(MenuItem, {
+				wrapButton(/* @__PURE__ */ jsx(Button, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ jsx(TopKDiffIcon, { fontSize: "small" }),
+					onClick: handleTopKClick,
 					disabled: isAddedOrRemoved || featureToggles.disableDatabaseQuery,
-					onClick: () => {
-						trackExploreAction({
-							action: EXPLORE_ACTION.TOP_K_DIFF,
-							source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
-							node_count: 1
-						});
-						runAction("top_k_diff", {
-							model: node.data.name,
-							column_name: "",
-							k: 50
-						}, { showForm: true });
-						handleClose();
-					},
-					children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(TopKDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Top-K Diff" })]
+					sx: { textTransform: "none" },
+					children: "Top-K"
 				}), "top_k_diff"),
-				wrapMenuItem(/* @__PURE__ */ jsxs(MenuItem, {
+				wrapButton(/* @__PURE__ */ jsx(Button, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ jsx(HistogramDiffIcon, { fontSize: "small" }),
+					onClick: handleHistogramClick,
 					disabled: isAddedOrRemoved || featureToggles.disableDatabaseQuery,
-					onClick: () => {
-						trackExploreAction({
-							action: EXPLORE_ACTION.HISTOGRAM_DIFF,
-							source: EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
-							node_count: 1
-						});
-						runAction("histogram_diff", {
-							model: node.data.name,
-							column_name: "",
-							column_type: ""
-						}, { showForm: true });
-						handleClose();
-					},
-					children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(HistogramDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Histogram Diff" })]
+					sx: { textTransform: "none" },
+					children: "Histogram"
 				}), "histogram_diff"),
-				/* @__PURE__ */ jsx(Divider, {}),
-				/* @__PURE__ */ jsx(ListSubheader, {
-					sx: {
-						lineHeight: "32px",
-						bgcolor: "transparent"
-					},
-					children: "Add to Checklist"
-				}),
-				/* @__PURE__ */ jsxs(MenuItem, {
-					onClick: () => {
-						addSchemaCheck();
-						handleClose();
-					},
-					children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(SchemaDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ jsx(ListItemText, { children: "Schema Diff" })]
+				/* @__PURE__ */ jsx(SetupConnectionPopover, {
+					display: metadataOnly,
+					children: /* @__PURE__ */ jsx(Button, {
+						size: "xsmall",
+						variant: "outlined",
+						color: "neutral",
+						startIcon: /* @__PURE__ */ jsx(QueryDiffIcon, { fontSize: "small" }),
+						onClick: handleQueryClick,
+						disabled: featureToggles.disableDatabaseQuery,
+						sx: { textTransform: "none" },
+						children: "Query"
+					})
 				})
 			]
-		})] });
-	}
-	return null;
+		})]
+	});
 }
 
 //#endregion
@@ -11732,4 +11767,4 @@ function NavBar() {
 
 //#endregion
 export { NodeSqlView as A, GraphEdge as B, NodeView as C, SqlEditor_default as D, RunStatusAndDate as E, HistoryToggle as F, MuiProvider as G, HSplit as H, GraphNode as I, mui_provider_default as K, ModelRowCount as L, CodeEditor_default as M, SchemaView as N, QueryForm as O, LineageViewTopBar as P, ResourceTypeTag as R, SetupConnectionBanner as S, RunView as T, VSplit as U, GraphColumnNode as V, ErrorBoundary$1 as W, CheckList as _, IdleTimeoutBadge as a, LineagePage as b, ChangeSummary as c, CheckEmptyState as d, CheckDetail as f, CheckBreadcrumb as g, CheckDescription as h, DisplayModeToggle as i, DiffEditor_default as j, EnvInfo as k, RunList as l, LineageDiffView as m, TopBar as n, SummaryView as o, SchemaDiffView as p, RecceVersionBadge as r, SchemaSummary as s, NavBar as t, RunPage as u, QueryPage as v, RunResultPane as w, LineageView as x, SetupConnectionGuide as y, RowCountDiffTag as z };
-//# sourceMappingURL=components-DoLZeY_e.mjs.map
+//# sourceMappingURL=components-Bt0G4cpr.mjs.map