From d11f4564d70bd8d9f85b4fa0a9e9508e1dbef0d3 Mon Sep 17 00:00:00 2001 From: Christos Karampelas Date: Tue, 10 Mar 2026 11:24:12 +0200 Subject: [PATCH 1/2] fix: Change tab order in ui and backend is slow in many tables (#284566) --- .../_components/TabsDesigner/TabsDesigner.jsx | 13 ++++++------- .../src/views/_components/TabView/TabView.jsx | 2 ++ .../TabView/_components/Tab/Tab.jsx | 18 +++++++++++++++++- .../TabView/_components/Tab/Tab.module.scss | 9 +++++++++ 4 files changed, 34 insertions(+), 8 deletions(-) diff --git a/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx b/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx index ee4144a1d9..2e60c79ecf 100644 --- a/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx +++ b/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx @@ -84,6 +84,7 @@ export const TabsDesigner = ({ const [tabHasErrors, setTabHasErrors] = useState(false); const [warningMessage, setWarningMessage] = useState(); const [warningMessageTitle, setWarningMessageTitle] = useState(); + const [isReordering, setIsReordering] = useState(false); useEffect(() => { if (!isNil(datasetSchema) && !isEmpty(datasetSchema)) { @@ -267,11 +268,6 @@ export const TabsDesigner = ({ const onTableDragAndDrop = (draggedTabHeader, droppedTabHeader) => reorderTable(draggedTabHeader, droppedTabHeader); const onTableDragAndDropStart = (draggedTabIdx, draggedTabId) => { - if (!isUndefined(draggedTabId)) { - setActiveTableSchemaId(draggedTabId); - } else { - setActiveTableSchemaId(tabs[0].tableSchemaId); - } setInitialTabIndexDrag(draggedTabIdx); }; @@ -479,6 +475,7 @@ export const TabsDesigner = ({ isIcebergCreated={isIcebergCreated} isWarningDialogVisible={isWarningDialogVisible} maxLength={maxLength} + isReordering={isReordering} name="TabsDesigner" onTabAdd={onTabAdd} onTabAddCancel={onTabAddCancel} @@ -570,6 +567,8 @@ export const TabsDesigner = ({ }; const reorderTable = async (draggedTabHeader, droppedTabHeader) => { + if (draggedTabHeader === droppedTabHeader) return; + setIsReordering(true); try { const inmTabs = [...tabs]; const draggedTabIdx = TabsUtils.getIndexByHeader(draggedTabHeader, inmTabs); @@ -580,13 +579,13 @@ export const TabsDesigner = ({ await DatasetService.updateTableOrder(datasetId, index, tabs[draggedTabIdx].tableSchemaId); const shiftedTabs = arrayShift(inmTabs, draggedTabIdx, droppedTabIdx); - shiftedTabs.forEach((tab, i) => (tab.index = !tab.addTab ? i : -1)); - setActiveTableSchemaId(shiftedTabs[index].tableSchemaId); filterManualEdit([...shiftedTabs]); } } catch (error) { console.error('TabsDesigner - reorderTable.', error); + } finally { + setIsReordering(false); } }; diff --git a/frontend-service/src/views/_components/TabView/TabView.jsx b/frontend-service/src/views/_components/TabView/TabView.jsx index 53623713d7..ab03c49b72 100644 --- a/frontend-service/src/views/_components/TabView/TabView.jsx +++ b/frontend-service/src/views/_components/TabView/TabView.jsx @@ -41,6 +41,7 @@ export const TabView = ({ onTabBlur, onTabChange = null, onTabClick, + isReordering, onTabConfirmDelete, onTabDragAndDrop, onTabDragAndDropStart, @@ -221,6 +222,7 @@ export const TabView = ({ { if (!isEditingEnabled) { @@ -283,6 +285,10 @@ export const Tab = ({ if (editingHeader) { event.preventDefault(); } else { + isMoving.current = true; + const img = new Image(); + img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; + event.dataTransfer.setDragImage(img, 0, 0); const draggedTabHeader = event.target.getElementsByClassName('p-tabview-title')[0].textContent; event.dataTransfer.setData('text/plain', draggedTabHeader); if (!isUndefined(onTabDragAndDropStart)) { @@ -298,6 +304,9 @@ export const Tab = ({ onTabDragAndDropStart(index, tableSchemaId); } } + setTimeout(() => { + isMoving.current = false; + }, 50); }; const onTabDragOver = event => { @@ -571,7 +580,9 @@ export const Tab = ({
  • { if (designMode && !isDataflowOpen && !isDesignDatasetEditorRead && !addTab) { const contextMenus = document.getElementsByClassName('p-contextmenu p-component'); @@ -594,6 +605,11 @@ export const Tab = ({ id={id} onAuxClick={e => e.preventDefault()} onClick={e => { + if (isMoving.current) { + e.preventDefault(); + e.stopPropagation(); + return; + } if (!disabled) { onTabHeaderClick(e); !preventScrollLeft && scrollTo(tabRef.current.offsetLeft - 80, 0); diff --git a/frontend-service/src/views/_components/TabView/_components/Tab/Tab.module.scss b/frontend-service/src/views/_components/TabView/_components/Tab/Tab.module.scss index f4cbc83543..64eaf6614c 100644 --- a/frontend-service/src/views/_components/TabView/_components/Tab/Tab.module.scss +++ b/frontend-service/src/views/_components/TabView/_components/Tab/Tab.module.scss @@ -114,3 +114,12 @@ input.p_tabview_input_design { z-index: 3003 !important; } +.tabReordering { + opacity: 0.6; + filter: blur(1px); + transition: all 0.2s ease-in-out; + user-select: none; + a { + cursor: wait !important; + } +} \ No newline at end of file From 4000b40dfdbb7c67dd6ea2492b4bb7c44c9199ae Mon Sep 17 00:00:00 2001 From: Christos Karampelas Date: Tue, 10 Mar 2026 11:51:36 +0200 Subject: [PATCH 2/2] fix: Change tab order in ui and backend is slow in many tables (#284566) --- .../DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx | 4 ++-- frontend-service/src/views/_components/TabView/TabView.jsx | 4 ++-- .../src/views/_components/TabView/_components/Tab/Tab.jsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx b/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx index 2e60c79ecf..e2330afd8b 100644 --- a/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx +++ b/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx @@ -79,12 +79,12 @@ export const TabsDesigner = ({ const [isEditing, setIsEditing] = useState(false); const [isErrorDialogVisible, setIsErrorDialogVisible] = useState(false); const [isWarningDialogVisible, setIsWarningDialogVisible] = useState(false); + const [isReordering, setIsReordering] = useState(false); const [scrollFn, setScrollFn] = useState(); const [tabs, setTabs] = useState([]); const [tabHasErrors, setTabHasErrors] = useState(false); const [warningMessage, setWarningMessage] = useState(); const [warningMessageTitle, setWarningMessageTitle] = useState(); - const [isReordering, setIsReordering] = useState(false); useEffect(() => { if (!isNil(datasetSchema) && !isEmpty(datasetSchema)) { @@ -473,9 +473,9 @@ export const TabsDesigner = ({ isEditingEnabled={isEditingEnabled} isErrorDialogVisible={isErrorDialogVisible} isIcebergCreated={isIcebergCreated} + isReordering={isReordering} isWarningDialogVisible={isWarningDialogVisible} maxLength={maxLength} - isReordering={isReordering} name="TabsDesigner" onTabAdd={onTabAdd} onTabAddCancel={onTabAddCancel} diff --git a/frontend-service/src/views/_components/TabView/TabView.jsx b/frontend-service/src/views/_components/TabView/TabView.jsx index ab03c49b72..fab4bfb598 100644 --- a/frontend-service/src/views/_components/TabView/TabView.jsx +++ b/frontend-service/src/views/_components/TabView/TabView.jsx @@ -36,12 +36,12 @@ export const TabView = ({ isErrorDialogVisible, isDataflowOpen, isDesignDatasetEditorRead, + isReordering, onTabAdd, onTabAddCancel, onTabBlur, onTabChange = null, onTabClick, - isReordering, onTabConfirmDelete, onTabDragAndDrop, onTabDragAndDropStart, @@ -222,7 +222,6 @@ export const TabView = ({