From 81191d357a460ad873cd3b5ecfe3f4d0f5df7a3a Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.collaris@me.com>
Date: Fri, 14 Mar 2025 16:29:59 +0100
Subject: [PATCH] fix: ensure sortable order remains correct after rerunning
query
---
src/lib/querybuilder/panel/QueryBuilderNav.tsx | 15 ++++++++++++---
1 file changed, 12 insertions(+), 3 deletions(-)
diff --git a/src/lib/querybuilder/panel/QueryBuilderNav.tsx b/src/lib/querybuilder/panel/QueryBuilderNav.tsx
index 56d842430..f5b6804eb 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));
--
GitLab