diff --git a/src/lib/querybuilder/panel/QueryBuilderNav.tsx b/src/lib/querybuilder/panel/QueryBuilderNav.tsx index 56d8424304a7a2daead7b16f854d25ff0aab0b33..f5b6804eba8aebbe24def8b61a5675393b2d17f6 100644 --- a/src/lib/querybuilder/panel/QueryBuilderNav.tsx +++ b/src/lib/querybuilder/panel/QueryBuilderNav.tsx @@ -25,6 +25,8 @@ import { wsAddQuery, wsDeleteQuery, wsManualQueryRequest, wsUpdateQuery } from ' import { Tabs, Tab } from '@/lib/components/tabs'; import { addError } from '@/lib/data-access/store/configSlice'; import Sortable from 'sortablejs'; +import { Query } from 'ts-common'; +import objectHash from 'object-hash'; export type QueryBuilderToggleSettings = 'settings' | 'ml' | 'logic' | 'relatedNodes' | undefined; @@ -67,8 +69,7 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => { const tabsRef = useRef<HTMLDivElement | null>(null); useEffect(() => { - if (!tabsRef.current) return; - + if (!activeSS || !tabsRef.current) return; const sortable = new Sortable(tabsRef.current, { animation: 150, draggable: '[data-type="tab"]', @@ -86,10 +87,17 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => { }, }); + const sortedQueries = activeSS.queryStates.openQueryArray + .filter(query => query.id != null) + .sort((a, b) => { + return a.order < b.order ? -1 : 1; + }); + sortable.sort(sortedQueries.map(x => String(x.id))); + return () => { sortable.destroy(); }; - }, [activeSS?.queryStates.openQueryArray]); + }, [activeSS ? objectHash(Object.fromEntries(activeSS?.queryStates.openQueryArray.map(x => [x.id, x.order]))) : null]); const mlEnabled = ml.linkPrediction.enabled || ml.centrality.enabled || ml.communityDetection.enabled || ml.shortestPath.enabled; @@ -169,6 +177,7 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => { text="" activeTab={query.id === activeQuery?.id} key={i} + data-id={query.id} onClick={() => { if (query.id == null) return; dispatch(setActiveQueryID(query.id));