@datarecce/ui 0.1.27 → 0.1.29

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

@@ -1,8 +1,8 @@
 "use client"
-import { $t as trackLineageViewRender, At as createLineageDiffCheck, B as IconExport, Bn as darkTheme, Bt as submitRunFromCheck, Cn as selectUpstream, En as getCll, Et as ScreenshotDataGrid, Ft as cancelRun, G as deltaPercentageString, Gt as LINEAGE_SELECTION_ACTION, H as IconInfo, Hn as token, Ht as EXPLORE_ACTION, I as useRecceActionContext, J as mergeKeys, Jt as trackEnvironmentConfig, Kt as trackColumnLevelLineage, L as useAppLocation, Ln as toaster, Lt as listRuns, M as useLineageViewContext, Mn as axiosClient, Mt as submitQueryBase, N as useLineageViewContextSafe, Nt as submitQueryDiff, Qt as trackLineageSelection, Sn as selectDownstream, St as useApiConfig, Tn as union, Tt as EmptyRowsRenderer, U as IconSave, Vn as lightTheme, Vt as waitRun, W as IconSync, Wt as EXPLORE_SOURCE, Y as mergeKeysWithStatus, Yt as trackExploreAction, Zt as trackHistoryAction, _ as findByRunType, _n as isValueDiffRun, a as saveAs$1, an as trackSingleEnvironment, at as supportsHistogramDiff, bn as isLineageGraphNode, c as createCheckByRun, cn as isHistogramDiffRun, ct as useLineageGraphContext, d as getCheck, dn as isQueryDiffRun, en as trackMultiNodesAction, f as listChecks, fn as isQueryRun, ft as useIdleTimeout, g as useChecks, gn as isValueDiffDetailRun, gt as formatDuration, h as updateCheck, hn as isTopKDiffRun, i as rename, in as trackShareState, j as LineageViewContext, jt as submitQuery, k as createDataGridFromData, ln as isProfileDiffRun, lt as useRunsAggregated, mn as isRowCountRun, nn as trackPreviewChange, on as trackStateAction, ot as useModelColumns_default, p as markAsPresetCheck, pn as isRowCountDiffRun, q as useClipBoardToast, qt as trackCopyToClipboard, r as isStateSyncing, rn as trackPreviewChangeFeedback, s as syncState, t as exportState, tn as trackNavigation, u as deleteCheck, un as isQueryBaseRun, ut as useRecceServerFlag, v as runTypeHasRef, vn as COLUMN_HEIGHT, vt as useRecceInstanceContext, wn as toReactFlow, wt as cacheKeys, xn as layout, yn as isLineageGraphColumnNode, yt as useRecceInstanceInfo, z as IconEdit, zn as colors, zt as submitRun } from "./state-DyHCt6IJ.mjs";
+import { $t as trackColumnLevelLineage, An as selectUpstream, Bt as submitQueryDiff, Cn as isValueDiffDetailRun, Ct as formatDuration, Dn as isLineageGraphNode, En as isLineageGraphColumnNode, Et as useRecceInstanceInfo, Ht as cancelRun, I as useRecceActionContext, Jn as lightTheme, Jt as waitRun, K as IconEdit, Kn as colors, Kt as submitRun, Lt as createLineageDiffCheck, M as useLineageViewContext, Mn as union, Mt as EmptyRowsRenderer, N as useLineageViewContextSafe, Nn as getCll, Nt as ScreenshotDataGrid, On as layout, Q as deltaPercentageString, Qt as LINEAGE_SELECTION_ACTION, R as useAppLocation, Rt as submitQuery, Sn as isTopKDiffRun, Tn as COLUMN_HEIGHT, Tt as useRecceInstanceContext, Wn as toaster, Wt as listRuns, X as IconSave, Y as IconInfo, Yn as token, Yt as EXPLORE_ACTION, Z as IconSync, Zt as EXPLORE_SOURCE, _ as findByRunType, _n as isQueryBaseRun, _t as useRecceServerFlag, a as saveAs$1, an as trackLineageSelection, bn as isRowCountDiffRun, c as createCheckByRun, cn as trackNavigation, d as getCheck, dn as trackShareState, en as trackCopyToClipboard, et as useClipBoardToast, f as listChecks, fn as trackSingleEnvironment, ft as supportsHistogramDiff, g as useChecks, gn as isProfileDiffRun, gt as useRunsAggregated, h as updateCheck, hn as isHistogramDiffRun, ht as useLineageGraphContext, i as rename, in as trackHistoryAction, j as LineageViewContext, jn as toReactFlow, jt as cacheKeys, k as createDataGridFromData, kn as selectDownstream, kt as useApiConfig, ln as trackPreviewChange, nn as trackExploreAction, nt as mergeKeysWithStatus, on as trackLineageViewRender, p as markAsPresetCheck, pn as trackStateAction, pt as useModelColumns_default, q as IconExport, qn as darkTheme, qt as submitRunFromCheck, r as isStateSyncing, s as syncState, sn as trackMultiNodesAction, t as exportState, tn as trackEnvironmentConfig, tt as mergeKeys, u as deleteCheck, un as trackPreviewChangeFeedback, v as runTypeHasRef, vn as isQueryDiffRun, wn as isValueDiffRun, xn as isRowCountRun, yn as isQueryRun, yt as useIdleTimeout, zn as axiosClient, zt as submitQueryBase } from "./state-CELzQ0tM.mjs";
 import { t as RECCE_SUPPORT_CALENDAR_URL } from "./urls-D7PrPolY.mjs";
-import { a as connectToCloud, c as select, i as fetchUser, l as createSchemaDiffCheck, n as useVersionNumber, o as localStorageKeys, r as fetchGitHubAvatar, s as sessionStorageKeys } from "./version-Dav28qEz.mjs";
-import { i as useValueDiffAlertDialog_default, l as defaultSqlQuery, n as useRecceCheckContext, o as useRecceShareStateContext, r as useCheckToast, u as useRecceQueryContext } from "./RecceCheckContext-CiG9fGRW.mjs";
+import { a as connectToCloud, c as select, i as fetchUser, l as createSchemaDiffCheck, n as useVersionNumber, o as localStorageKeys, r as fetchGitHubAvatar, s as sessionStorageKeys } from "./version-paZ9esBk.mjs";
+import { i as useValueDiffAlertDialog_default, l as defaultSqlQuery, n as useRecceCheckContext, o as useRecceShareStateContext, r as useCheckToast, u as useRecceQueryContext } from "./RecceCheckContext-PT4-g1bW.mjs";
 import { t as DisableTooltipMessages } from "./tooltipMessage-CrXjOmVM.mjs";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider, alpha, useTheme } from "@mui/material/styles";
@@ -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-gDC1ucjo.mjs.map