From b901fa5cd27a80067ebbd4047c015b84fef53bfb Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Wed, 6 May 2026 11:21:46 +0200 Subject: [PATCH 1/6] dbeaver/pro#9046 adds vertical tabs for execution plan to add more space for new button or panel with buttons --- .../SqlExecutionPlanPanel.module.css | 8 ++++++ .../ExecutionPlan/SqlExecutionPlanPanel.tsx | 9 ++++-- .../SqlExecutionPlanViewBar.module.css | 27 ++++++++++++++++++ .../ExecutionPlan/SqlExecutionPlanViewBar.tsx | 28 +++++++++++++++++++ .../SqlExecutionPlanViewBootstrap.ts | 1 + 5 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.module.css create mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.tsx diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.module.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.module.css index 7b3d848fba9..cebbad62812 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.module.css +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.module.css @@ -6,6 +6,14 @@ * you may not use this file except in compliance with the License. */ +.tabsLayout { + display: flex; + flex-direction: row; + flex: 1; + overflow: hidden; + height: 100%; +} + .pane { &:first-child { display: flex; diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx index b177772a0dc..5d1a2c2a3ed 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx @@ -10,11 +10,12 @@ import { useState } from 'react'; import { Loader, Pane, ResizerControls, s, Split, useS, useSplitUserState } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; -import { TabList, TabPanelList, TabsState } from '@cloudbeaver/core-ui'; +import { TabPanelList, TabsState } from '@cloudbeaver/core-ui'; import type { IExecutionPlanTab } from '../../ISqlEditorTabState.js'; import { PropertiesPanel } from './PropertiesPanel/PropertiesPanel.js'; import { SqlExecutionPlanService } from './SqlExecutionPlanService.js'; +import { SqlExecutionPlanViewBar } from './SqlExecutionPlanViewBar.js'; import { SqlExecutionPlanViewService } from './SqlExecutionPlanViewService.js'; import style from './SqlExecutionPlanPanel.module.css'; @@ -45,8 +46,10 @@ export const SqlExecutionPlanPanel = observer(function SqlExecutionPlanPa lazy onNodeSelect={setSelectedNode} > - - +
+ + +
diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.module.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.module.css new file mode 100644 index 00000000000..56d00d07ac8 --- /dev/null +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.module.css @@ -0,0 +1,27 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2026 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +.tabBar { + composes: theme-background-secondary theme-text-on-secondary from global; + overflow: auto; + padding: 4px 0; +} + +.tab { + composes: theme-ripple theme-background-background theme-text-text-primary-on-light theme-typography--body2 from global; + text-transform: uppercase; + font-weight: normal; + + &:global([aria-selected='true']) { + font-weight: normal !important; + } +} + +.tabList { + background: transparent !important; +} diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.tsx new file mode 100644 index 00000000000..1565fa9bcf1 --- /dev/null +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.tsx @@ -0,0 +1,28 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2026 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +import { s, SContext, type StyleRegistry, useS } from '@cloudbeaver/core-blocks'; +import { TabList, TabListStyles, TabStyles } from '@cloudbeaver/core-ui'; + +import style from './SqlExecutionPlanViewBar.module.css'; + +const registry: StyleRegistry = [ + [TabListStyles, { mode: 'append', styles: [style] }], + [TabStyles, { mode: 'append', styles: [style] }], +]; + +export function SqlExecutionPlanViewBar() { + const styles = useS(style); + + return ( +
+ + + +
+ ); +} diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBootstrap.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBootstrap.ts index 2e4165bd9d3..95aa1c9579c 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBootstrap.ts +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBootstrap.ts @@ -23,6 +23,7 @@ export class SqlExecutionPlanViewBootstrap extends Bootstrap { this.sqlExecutionPlanViewService.tabs.add({ key: 'table', name: 'plugin_sql_execution_plan_view_table', + icon: 'table-icon', order: 0, panel: () => ExecutionPlanTreeView, }); From 2ff3c2cb8e4ad19ad73649a9dcf6bf5fa2709eb8 Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Wed, 6 May 2026 15:37:14 +0200 Subject: [PATCH 2/6] adds ask AI feature for execution plan --- .../DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB.ts | 12 +++++ .../SQL_EXECUTION_PLAN_ACTIONS_MENU.ts | 10 ++++ .../SqlExecutionPlanActionsMenu.module.css | 22 ++++++++ .../SqlExecutionPlanActionsMenu.tsx | 52 +++++++++++++++++++ .../SqlExecutionPlanPanel.module.css | 14 +++++ .../ExecutionPlan/SqlExecutionPlanPanel.tsx | 15 +++++- .../ExecutionPlan/SqlExecutionPlanService.ts | 3 ++ .../SqlExecutionPlanViewBar.module.css | 7 +-- .../packages/plugin-sql-editor/src/index.ts | 3 ++ 9 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB.ts create mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SQL_EXECUTION_PLAN_ACTIONS_MENU.ts create mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css create mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.tsx diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB.ts new file mode 100644 index 00000000000..8652679de22 --- /dev/null +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB.ts @@ -0,0 +1,12 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2026 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +import { createDataContext } from '@cloudbeaver/core-data-context'; + +import type { IExecutionPlanTab } from '../../ISqlEditorTabState.js'; + +export const DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB = createDataContext('sql-execution-plan-tab'); diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SQL_EXECUTION_PLAN_ACTIONS_MENU.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SQL_EXECUTION_PLAN_ACTIONS_MENU.ts new file mode 100644 index 00000000000..d8547cd4deb --- /dev/null +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SQL_EXECUTION_PLAN_ACTIONS_MENU.ts @@ -0,0 +1,10 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2026 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +import { createMenu } from '@cloudbeaver/core-view'; + +export const SQL_EXECUTION_PLAN_ACTIONS_MENU = createMenu('sql-execution-plan-actions', { label: '' }); diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css new file mode 100644 index 00000000000..b9b62f0e48b --- /dev/null +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css @@ -0,0 +1,22 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2026 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +.executionPlanActions { + display: flex; + flex-direction: column; +} + +.executionPlanActions.menuBar { + height: unset; +} + +.toolsMenu .menuBarItemGroup .menuBarItem { + & .menuBarItemLabel { + display: none; + } +} diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.tsx new file mode 100644 index 00000000000..8addbe57052 --- /dev/null +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.tsx @@ -0,0 +1,52 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2026 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +import { observer } from 'mobx-react-lite'; + +import { s, SContext, type StyleRegistry, useS } from '@cloudbeaver/core-blocks'; +import type { IDataContext } from '@cloudbeaver/core-data-context'; +import { MenuBar, MenuBarGroupStyles, MenuBarItemStyles, MenuBarStyles } from '@cloudbeaver/core-ui'; +import { useMenu } from '@cloudbeaver/core-view'; + +import { SQL_EXECUTION_PLAN_ACTIONS_MENU } from './SQL_EXECUTION_PLAN_ACTIONS_MENU.js'; +import style from './SqlExecutionPlanActionsMenu.module.css'; + +const registry: StyleRegistry = [ + [ + MenuBarStyles, + { + mode: 'append', + styles: [style], + }, + ], + [ + MenuBarItemStyles, + { + mode: 'append', + styles: [style], + }, + ], +]; + +interface Props { + context: IDataContext; +} + +export const SqlExecutionPlanActionsMenu = observer(function SqlExecutionPlanActionsMenu({ context }) { + const menuBarStyles = useS(style, MenuBarStyles, MenuBarItemStyles, MenuBarGroupStyles); + const menu = useMenu({ menu: SQL_EXECUTION_PLAN_ACTIONS_MENU, context }); + + if (!menu.items.length) { + return null; + } + + return ( + + + + ); +}); diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.module.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.module.css index cebbad62812..53131b5f811 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.module.css +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.module.css @@ -14,6 +14,20 @@ height: 100%; } +.actionsBar { + composes: theme-border-color-background from global; + display: flex; + flex-direction: column; + align-items: center; + overflow: auto; + border-right: solid 1px; +} + +.tabPanelList { + flex: 1; + overflow: hidden; +} + .pane { &:first-child { display: flex; diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx index 5d1a2c2a3ed..73d42766505 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx @@ -9,11 +9,16 @@ import { observer } from 'mobx-react-lite'; import { useState } from 'react'; import { Loader, Pane, ResizerControls, s, Split, useS, useSplitUserState } from '@cloudbeaver/core-blocks'; +import { useDataContextLink } from '@cloudbeaver/core-data-context'; import { useService } from '@cloudbeaver/core-di'; import { TabPanelList, TabsState } from '@cloudbeaver/core-ui'; +import { useMenu } from '@cloudbeaver/core-view'; import type { IExecutionPlanTab } from '../../ISqlEditorTabState.js'; import { PropertiesPanel } from './PropertiesPanel/PropertiesPanel.js'; +import { DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB } from './DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB.js'; +import { SQL_EXECUTION_PLAN_ACTIONS_MENU } from './SQL_EXECUTION_PLAN_ACTIONS_MENU.js'; +import { SqlExecutionPlanActionsMenu } from './SqlExecutionPlanActionsMenu.js'; import { SqlExecutionPlanService } from './SqlExecutionPlanService.js'; import { SqlExecutionPlanViewBar } from './SqlExecutionPlanViewBar.js'; import { SqlExecutionPlanViewService } from './SqlExecutionPlanViewService.js'; @@ -30,6 +35,11 @@ export const SqlExecutionPlanPanel = observer(function SqlExecutionPlanPa const data = sqlExecutionPlanService.data.get(executionPlanTab.tabId); const [selectedNode, setSelectedNode] = useState(null); const splitState = useSplitUserState('execution-plan'); + const menu = useMenu({ menu: SQL_EXECUTION_PLAN_ACTIONS_MENU }); + + useDataContextLink(menu.context, (context, id) => { + context.set(DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB, executionPlanTab, id); + }); if (data?.task.executing || !data?.executionPlan) { return data?.task.cancel()} />; @@ -47,8 +57,11 @@ export const SqlExecutionPlanPanel = observer(function SqlExecutionPlanPa onNodeSelect={setSelectedNode} >
+
+ +
+ -
diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.ts index d8362e40d13..fa48ca7a4c4 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.ts +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.ts @@ -21,6 +21,7 @@ import { SqlDataSourceService } from '../../SqlDataSource/SqlDataSourceService.j interface IExecutionPlanData { task: ITask; executionPlan: SqlExecutionPlan | null; + editorId: string; } @injectable(() => [GraphQLService, NotificationService, AsyncTaskInfoService, ConnectionExecutionContextService, SqlDataSourceService]) @@ -81,6 +82,7 @@ export class SqlExecutionPlanService { this.data.set(tabId, { task, executionPlan: null, + editorId: editorState.editorId, }); try { @@ -96,6 +98,7 @@ export class SqlExecutionPlanService { this.data.set(tabId, { task, executionPlan, + editorId: editorState.editorId, }); } catch (exception: any) { const cancelled = task.cancelled; diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.module.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.module.css index 56d00d07ac8..bf7c8c2bee5 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.module.css +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewBar.module.css @@ -8,8 +8,8 @@ .tabBar { composes: theme-background-secondary theme-text-on-secondary from global; - overflow: auto; - padding: 4px 0; + overflow-x: hidden; + padding-top: 4px; } .tab { @@ -23,5 +23,6 @@ } .tabList { - background: transparent !important; + margin-right: 8px; + margin-left: 4px; } diff --git a/webapp/packages/plugin-sql-editor/src/index.ts b/webapp/packages/plugin-sql-editor/src/index.ts index c114945951a..469c3f01d94 100644 --- a/webapp/packages/plugin-sql-editor/src/index.ts +++ b/webapp/packages/plugin-sql-editor/src/index.ts @@ -55,5 +55,8 @@ export * from './SqlEditorSettingsService.js'; export * from './SqlEditorView.js'; export * from './SqlResultTabs/SqlQueryService.js'; export * from './SqlResultTabs/ExecutionPlan/SqlExecutionPlanViewService.js'; +export * from './SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.js'; +export * from './SqlResultTabs/ExecutionPlan/SQL_EXECUTION_PLAN_ACTIONS_MENU.js'; +export * from './SqlResultTabs/ExecutionPlan/DATA_CONTEXT_SQL_EXECUTION_PLAN_TAB.js'; export * from './downloadSql.js'; export type { ISqlExecutionPlanViewProps } from './SqlResultTabs/ExecutionPlan/ISqlExecutionPlanViewProps.js'; From caef8e4f2212fe1e46555463db6829d438841976 Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Thu, 7 May 2026 14:21:19 +0200 Subject: [PATCH 3/6] removes editor id and uses context state --- .../SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.ts index fa48ca7a4c4..f050be45c9f 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.ts +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanService.ts @@ -1,6 +1,6 @@ /* * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2025 DBeaver Corp and others + * Copyright (C) 2020-2026 DBeaver Corp and others * * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. @@ -21,7 +21,6 @@ import { SqlDataSourceService } from '../../SqlDataSource/SqlDataSourceService.j interface IExecutionPlanData { task: ITask; executionPlan: SqlExecutionPlan | null; - editorId: string; } @injectable(() => [GraphQLService, NotificationService, AsyncTaskInfoService, ConnectionExecutionContextService, SqlDataSourceService]) @@ -82,7 +81,6 @@ export class SqlExecutionPlanService { this.data.set(tabId, { task, executionPlan: null, - editorId: editorState.editorId, }); try { @@ -98,7 +96,6 @@ export class SqlExecutionPlanService { this.data.set(tabId, { task, executionPlan, - editorId: editorState.editorId, }); } catch (exception: any) { const cancelled = task.cancelled; From 3b3650745c4991a09fd03dfeae64b8f5f6d8e9a9 Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Fri, 8 May 2026 15:24:34 +0200 Subject: [PATCH 4/6] makes ai feature spotlighted in the ui --- .../SqlExecutionPlanActionsMenu.module.css | 18 ++++++++++++++---- .../SqlExecutionPlanActionsMenu.tsx | 6 +++++- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css index b9b62f0e48b..ab948dff3f9 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css @@ -15,8 +15,18 @@ height: unset; } -.toolsMenu .menuBarItemGroup .menuBarItem { - & .menuBarItemLabel { - display: none; - } +.executionPlanActions .menuBarItem { + width: auto; + height: auto; +} + +.executionPlanActions .menuBarItemBox { + flex-direction: column-reverse; +} + +.executionPlanActions .menuBarItemLabel { + writing-mode: vertical-rl; + text-orientation: mixed; + transform: rotate(180deg); + white-space: nowrap; } diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.tsx index 8addbe57052..5da1ab0ffa2 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.tsx +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.tsx @@ -46,7 +46,11 @@ export const SqlExecutionPlanActionsMenu = observer(function SqlExecution return ( - + ); }); From 31f1f79fa0791ec217075a58df11126075328002 Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Fri, 8 May 2026 15:26:25 +0200 Subject: [PATCH 5/6] rotates the icon also --- .../ExecutionPlan/SqlExecutionPlanActionsMenu.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css index ab948dff3f9..7658c055177 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css @@ -24,6 +24,10 @@ flex-direction: column-reverse; } +.executionPlanActions .menuBarItemIcon { + transform: rotate(-90deg); +} + .executionPlanActions .menuBarItemLabel { writing-mode: vertical-rl; text-orientation: mixed; From 1baae71433cedbcb1adeeac83f7199cf016b1af5 Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Fri, 8 May 2026 15:30:35 +0200 Subject: [PATCH 6/6] removes bold label --- .../ExecutionPlan/SqlExecutionPlanActionsMenu.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css index 7658c055177..8f8ad09e35b 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanActionsMenu.module.css @@ -33,4 +33,5 @@ text-orientation: mixed; transform: rotate(180deg); white-space: nowrap; + font-weight: normal; }