fix: ensure sortable order remains correct after rerunning query

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));