@datarecce/ui 0.1.27 → 0.1.28

package/dist/{components-Chaffojm.js → components-Cvfq_6t4.js}

@@ -7544,11 +7544,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__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
 		sx: {
 			height: "100%",
 			display: "grid",
-			gridTemplateRows: "auto auto 1fr"
+			gridTemplateRows: "auto auto auto 1fr"
 		},
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
@@ -7568,18 +7569,8 @@ function NodeView({ node, onCloseNode }) {
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, { sx: { flexGrow: 1 } }),
-					isSingleEnvOnboarding ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleEnvironmentMenuButton, {
+					!isSingleEnvOnboarding && isModelSeedOrSnapshot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExploreHeaderButtons, {
 						node,
-						baseColumns,
-						currentColumns,
-						refetchRowCount,
-						disableReason
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExploreChangeMenuButton, {
-						node,
-						baseColumns,
-						currentColumns,
-						disableReason,
-						refetchRowCountDiff,
 						onSandboxOpen: () => setIsSandboxOpen(true)
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
@@ -7600,7 +7591,7 @@ function NodeView({ node, onCloseNode }) {
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
 					direction: "row",
 					spacing: 1,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResourceTypeTag, { node }), (node.data.resourceType === "model" || node.data.resourceType === "snapshot" || node.data.resourceType === "seed") && (isSingleEnvOnboarding ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCountTag, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResourceTypeTag, { node }), isModelSeedOrSnapshot && (isSingleEnvOnboarding ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCountTag, {
 						node,
 						onRefresh: refetchRowCount
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCountDiffTag, {
@@ -7609,6 +7600,25 @@ function NodeView({ node, onCloseNode }) {
 					}))]
 				})
 			}),
+			isModelSeedOrSnapshot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
+				sx: {
+					pl: 2,
+					py: 1
+				},
+				children: isSingleEnvOnboarding ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleEnvActionButtons, {
+					node,
+					baseColumns,
+					currentColumns,
+					refetchRowCount,
+					disableReason
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiffActionButtons, {
+					node,
+					baseColumns,
+					currentColumns,
+					disableReason,
+					refetchRowCountDiff
+				})
+			}),
 			withColumns && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
 				sx: {
 					overflow: "auto",
@@ -7677,9 +7687,7 @@ function NodeView({ node, onCloseNode }) {
 		]
 	});
 }
-function SingleEnvironmentMenuButton({ node, baseColumns, currentColumns, refetchRowCount, disableReason }) {
-	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
-	const open = Boolean(anchorEl);
+function SingleEnvActionButtons({ node, baseColumns, currentColumns, refetchRowCount, disableReason }) {
 	const [, setLocation] = require_state.useAppLocation();
 	const { setSqlQuery } = require_RecceCheckContext.useRecceQueryContext();
 	const { runAction } = require_state.useRecceActionContext();
@@ -7688,81 +7696,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 = require_state.findByRunType("query").icon;
+	const RowCountIcon = require_state.findByRunType("row_count").icon;
+	const ProfileIcon = require_state.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 = () => {
+		require_state.trackExploreAction({
+			action: require_state.EXPLORE_ACTION.PROFILE,
+			source: require_state.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 = require_state.findByRunType("query").icon;
-		const RowCountIcon = require_state.findByRunType("row_count").icon;
-		const ProfileIcon = require_state.findByRunType("profile").icon;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
-			size: "small",
-			variant: "outlined",
-			onClick: handleClick,
-			endIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiCaretDown, {}),
-			sx: { textTransform: "none" },
-			children: "Explore"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Menu.default, {
-			anchorEl,
-			open,
-			onClose: handleClose,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
-					onClick: () => {
-						if (envInfo?.adapterType === "dbt") setSqlQuery(query);
-						else if (envInfo?.adapterType === "sqlmesh") setSqlQuery(`select * from ${node.data.name}`);
-						setLocation("/query");
-						handleClose();
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Query" })]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
-					onClick: () => {
-						refetchRowCount();
-						handleClose();
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCountIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Row Count" })]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
-					title: disableReason(isAddedOrRemoved, "profile"),
-					placement: "left",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
-						disabled: isAddedOrRemoved,
-						onClick: () => {
-							require_state.trackExploreAction({
-								action: require_state.EXPLORE_ACTION.PROFILE,
-								source: require_state.EXPLORE_SOURCE.NODE_SIDEBAR_SINGLE_ENV,
-								node_count: 1
-							});
-							runAction("profile", { model: node.data.name }, {
-								showForm: true,
-								showLast: false
-							});
-							handleClose();
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Profile" })]
-					}) })
-				})
-			]
-		})] });
-	}
-	return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+		direction: "row",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: 1,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+				size: "xsmall",
+				variant: "outlined",
+				color: "neutral",
+				startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryIcon, { fontSize: "small" }),
+				onClick: handleQueryClick,
+				sx: { textTransform: "none" },
+				children: "Query"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+				size: "xsmall",
+				variant: "outlined",
+				color: "neutral",
+				startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCountIcon, { fontSize: "small" }),
+				onClick: handleRowCountClick,
+				sx: { textTransform: "none" },
+				children: "Row Count"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+				title: disableReason(isAddedOrRemoved, "profile"),
+				placement: "top",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileIcon, { fontSize: "small" }),
+					onClick: handleProfileClick,
+					disabled: isAddedOrRemoved,
+					sx: { textTransform: "none" },
+					children: "Profile"
+				}) })
+			})
+		]
+	});
 }
-function ExploreChangeMenuButton({ node, baseColumns, currentColumns, disableReason, onSandboxOpen, refetchRowCountDiff }) {
-	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
-	const open = Boolean(anchorEl);
+function ExploreHeaderButtons({ node, onSandboxOpen }) {
 	const [, setLocation] = require_state.useAppLocation();
-	const { runAction } = require_state.useRecceActionContext();
-	const { setSqlQuery, setPrimaryKeys } = require_RecceCheckContext.useRecceQueryContext();
-	const { envInfo, isActionAvailable } = require_state.useLineageGraphContext();
 	const { featureToggles } = require_state.useRecceInstanceContext();
+	const { isActionAvailable } = require_state.useLineageGraphContext();
+	const { setPrimaryKeys } = require_RecceCheckContext.useRecceQueryContext();
 	const { primaryKey } = require_state.useModelColumns_default(node.data.name);
 	const { apiClient } = require_state.useApiConfig();
 	const metadataOnly = featureToggles.mode === "metadata only";
-	const isAddedOrRemoved = node.data.changeStatus === "added" || node.data.changeStatus === "removed";
 	const addSchemaCheck = (0, react.useCallback)(async () => {
 		const nodeId = node.id;
 		setLocation(`/checks/?id=${(await require_version.createSchemaDiffCheck({ node_id: nodeId }, apiClient)).check_id}`);
@@ -7771,186 +7775,217 @@ function ExploreChangeMenuButton({ node, baseColumns, currentColumns, disableRea
 		setLocation,
 		apiClient
 	]);
+	const SchemaDiffIcon = require_state.findByRunType("schema_diff").icon;
+	const SandboxIcon = require_state.findByRunType("sandbox").icon;
+	const handleAddSchemaCheck = () => {
+		addSchemaCheck();
+	};
+	const handleSandboxOpen = () => {
+		if (isActionAvailable("query_diff_with_primary_key")) setPrimaryKeys(primaryKey !== void 0 ? [primaryKey] : void 0);
+		onSandboxOpen();
+		require_state.trackPreviewChange({
+			action: "explore",
+			node: node.data.name
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+		direction: "row",
+		alignItems: "center",
+		sx: { mr: 1 },
+		flexWrap: "wrap",
+		gap: 1,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+			size: "xsmall",
+			variant: "outlined",
+			color: "neutral",
+			startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaDiffIcon, { fontSize: "small" }),
+			onClick: handleAddSchemaCheck,
+			sx: { textTransform: "none" },
+			children: "Add schema diff to checklist"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SetupConnectionPopover, {
+			display: metadataOnly,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+				size: "xsmall",
+				variant: "outlined",
+				color: "neutral",
+				startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SandboxIcon, { fontSize: "small" }),
+				onClick: handleSandboxOpen,
+				disabled: featureToggles.disableDatabaseQuery,
+				sx: { textTransform: "none" },
+				children: "Sandbox"
+			})
+		})]
+	});
+}
+function DiffActionButtons({ node, baseColumns, currentColumns, disableReason, refetchRowCountDiff }) {
+	const [, setLocation] = require_state.useAppLocation();
+	const { runAction } = require_state.useRecceActionContext();
+	const { setSqlQuery, setPrimaryKeys } = require_RecceCheckContext.useRecceQueryContext();
+	const { envInfo, isActionAvailable } = require_state.useLineageGraphContext();
+	const { featureToggles } = require_state.useRecceInstanceContext();
+	const { primaryKey } = require_state.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 = require_state.findByRunType("query_diff").icon;
+	const RowCountDiffIcon = require_state.findByRunType("row_count_diff").icon;
+	const ProfileDiffIcon = require_state.findByRunType("profile_diff").icon;
+	const ValueDiffIcon = require_state.findByRunType("value_diff").icon;
+	const TopKDiffIcon = require_state.findByRunType("top_k_diff").icon;
+	const HistogramDiffIcon = require_state.findByRunType("histogram_diff").icon;
+	const wrapButton = (button, runType) => {
 		if (metadataOnly) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SetupConnectionPopover, {
 			display: true,
-			children: menuItem
+			children: button
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
 			title: disableReason(isAddedOrRemoved, runType),
-			placement: "left",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: menuItem })
+			placement: "top",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: button })
 		});
 	};
-	if (node.data.resourceType === "model" || node.data.resourceType === "seed" || node.data.resourceType === "snapshot") {
-		const QueryDiffIcon = require_state.findByRunType("query_diff").icon;
-		const SandboxIcon = require_state.findByRunType("sandbox").icon;
-		const RowCountDiffIcon = require_state.findByRunType("row_count_diff").icon;
-		const ProfileDiffIcon = require_state.findByRunType("profile_diff").icon;
-		const ValueDiffIcon = require_state.findByRunType("value_diff").icon;
-		const TopKDiffIcon = require_state.findByRunType("top_k_diff").icon;
-		const HistogramDiffIcon = require_state.findByRunType("histogram_diff").icon;
-		const SchemaDiffIcon = require_state.findByRunType("schema_diff").icon;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
-			size: "xsmall",
-			variant: "outlined",
-			color: "neutral",
-			onClick: handleClick,
-			disabled: featureToggles.disableNodeActionDropdown,
-			endIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiCaretDown, {}),
-			sx: {
-				textTransform: "none",
-				fontSize: "0.75rem"
-			},
-			children: "Explore"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Menu.default, {
-			anchorEl,
-			open,
-			onClose: handleClose,
+	const handleRowCountClick = () => {
+		refetchRowCountDiff();
+	};
+	const handleProfileClick = () => {
+		require_state.trackExploreAction({
+			action: require_state.EXPLORE_ACTION.PROFILE_DIFF,
+			source: require_state.EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+			node_count: 1
+		});
+		runAction("profile_diff", { model: node.data.name }, {
+			showForm: true,
+			showLast: false
+		});
+	};
+	const handleValueClick = () => {
+		require_state.trackExploreAction({
+			action: require_state.EXPLORE_ACTION.VALUE_DIFF,
+			source: require_state.EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
+			node_count: 1
+		});
+		runAction("value_diff", { model: node.data.name }, {
+			showForm: true,
+			showLast: false
+		});
+	};
+	const handleTopKClick = () => {
+		require_state.trackExploreAction({
+			action: require_state.EXPLORE_ACTION.TOP_K_DIFF,
+			source: require_state.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 = () => {
+		require_state.trackExploreAction({
+			action: require_state.EXPLORE_ACTION.HISTOGRAM_DIFF,
+			source: require_state.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__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+		direction: "row",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: 2,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+			variant: "caption",
+			fontWeight: "bold",
+			children: "Diff"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Stack.default, {
+			direction: "row",
+			alignItems: "center",
+			flexWrap: "wrap",
+			gap: 1,
+			width: "93%",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SetupConnectionPopover, {
 					display: metadataOnly,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
-						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__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Query" })]
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SetupConnectionPopover, {
-					display: metadataOnly,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
-						disabled: featureToggles.disableDatabaseQuery,
-						onClick: () => {
-							if (isActionAvailable("query_diff_with_primary_key")) setPrimaryKeys(primaryKey !== void 0 ? [primaryKey] : void 0);
-							onSandboxOpen();
-							require_state.trackPreviewChange({
-								action: "explore",
-								node: node.data.name
-							});
-							handleClose();
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SandboxIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Sandbox (Experiment)" })]
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Divider.default, {}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListSubheader.default, {
-					sx: {
-						lineHeight: "32px",
-						bgcolor: "transparent"
-					},
-					children: "Diff"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SetupConnectionPopover, {
-					display: metadataOnly,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+						size: "xsmall",
+						variant: "outlined",
+						color: "neutral",
+						startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCountDiffIcon, { fontSize: "small" }),
+						onClick: handleRowCountClick,
 						disabled: featureToggles.disableDatabaseQuery,
-						onClick: () => {
-							refetchRowCountDiff();
-							handleClose();
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCountDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Row Count Diff" })]
+						sx: { textTransform: "none" },
+						children: "Row Count"
 					})
 				}),
-				wrapMenuItem(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
+				wrapButton(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileDiffIcon, { fontSize: "small" }),
+					onClick: handleProfileClick,
 					disabled: isAddedOrRemoved || featureToggles.disableDatabaseQuery,
-					onClick: () => {
-						require_state.trackExploreAction({
-							action: require_state.EXPLORE_ACTION.PROFILE_DIFF,
-							source: require_state.EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
-							node_count: 1
-						});
-						runAction("profile_diff", { model: node.data.name }, {
-							showForm: true,
-							showLast: false
-						});
-						handleClose();
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Profile Diff" })]
+					sx: { textTransform: "none" },
+					children: "Profile"
 				}), "profile_diff"),
-				wrapMenuItem(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
+				wrapButton(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueDiffIcon, { fontSize: "small" }),
+					onClick: handleValueClick,
 					disabled: isAddedOrRemoved || featureToggles.disableDatabaseQuery,
-					onClick: () => {
-						require_state.trackExploreAction({
-							action: require_state.EXPLORE_ACTION.VALUE_DIFF,
-							source: require_state.EXPLORE_SOURCE.NODE_SIDEBAR_MULTI_ENV,
-							node_count: 1
-						});
-						runAction("value_diff", { model: node.data.name }, {
-							showForm: true,
-							showLast: false
-						});
-						handleClose();
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Value Diff" })]
+					sx: { textTransform: "none" },
+					children: "Value"
 				}), "value_diff"),
-				wrapMenuItem(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
+				wrapButton(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopKDiffIcon, { fontSize: "small" }),
+					onClick: handleTopKClick,
 					disabled: isAddedOrRemoved || featureToggles.disableDatabaseQuery,
-					onClick: () => {
-						require_state.trackExploreAction({
-							action: require_state.EXPLORE_ACTION.TOP_K_DIFF,
-							source: require_state.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__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopKDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Top-K Diff" })]
+					sx: { textTransform: "none" },
+					children: "Top-K"
 				}), "top_k_diff"),
-				wrapMenuItem(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
+				wrapButton(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+					size: "xsmall",
+					variant: "outlined",
+					color: "neutral",
+					startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistogramDiffIcon, { fontSize: "small" }),
+					onClick: handleHistogramClick,
 					disabled: isAddedOrRemoved || featureToggles.disableDatabaseQuery,
-					onClick: () => {
-						require_state.trackExploreAction({
-							action: require_state.EXPLORE_ACTION.HISTOGRAM_DIFF,
-							source: require_state.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__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistogramDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Histogram Diff" })]
+					sx: { textTransform: "none" },
+					children: "Histogram"
 				}), "histogram_diff"),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Divider.default, {}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListSubheader.default, {
-					sx: {
-						lineHeight: "32px",
-						bgcolor: "transparent"
-					},
-					children: "Add to Checklist"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_MenuItem.default, {
-					onClick: () => {
-						addSchemaCheck();
-						handleClose();
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemIcon.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaDiffIcon, { fontSize: "small" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ListItemText.default, { children: "Schema Diff" })]
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SetupConnectionPopover, {
+					display: metadataOnly,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Button.default, {
+						size: "xsmall",
+						variant: "outlined",
+						color: "neutral",
+						startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryDiffIcon, { fontSize: "small" }),
+						onClick: handleQueryClick,
+						disabled: featureToggles.disableDatabaseQuery,
+						sx: { textTransform: "none" },
+						children: "Query"
+					})
 				})
 			]
-		})] });
-	}
-	return null;
+		})]
+	});
 }
 
 //#endregion
@@ -14082,4 +14117,4 @@ Object.defineProperty(exports, 'mui_provider_default', {
     return mui_provider_default;
   }
 });
-//# sourceMappingURL=components-Chaffojm.js.map
+//# sourceMappingURL=components-Cvfq_6t4.js.map