From 2a9458ffddba0019e7e45a5fec90918f348c772a Mon Sep 17 00:00:00 2001
From: Gareth George <garethgeorge97@gmail.com>
Date: Sat, 12 Jul 2025 23:54:10 -0700
Subject: [PATCH] fix display bug

---
 webui/src/components/OperationTreeView.tsx | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/webui/src/components/OperationTreeView.tsx b/webui/src/components/OperationTreeView.tsx
index ccf9af73..482af9ae 100644
--- a/webui/src/components/OperationTreeView.tsx
+++ b/webui/src/components/OperationTreeView.tsx
@@ -81,7 +81,6 @@ export const OperationTreeView = ({
     const logState = new OplogState((op) => !shouldHideOperation(op));
 
     const backupInfoByFlowID = new Map<bigint, FlowDisplayInfo>();
-
     logState.subscribe((ids, flowIDs, event) => {
       if (
         event === OperationEventType.EVENT_CREATED ||
@@ -128,7 +127,7 @@ export const OperationTreeView = ({
   });
 
   let primaryTree: React.ReactNode | null = null;
-  const otherTrees: React.ReactNode[] = [];
+  const allTrees: React.ReactNode[] = [];
 
   for (const instance of Object.keys(backupsByInstance)) {
     const instanceBackups = backupsByInstance[instance];
@@ -145,7 +144,7 @@ export const OperationTreeView = ({
     if (instance === config!.instance) {
       primaryTree = instTree;
     } else {
-      otherTrees.push(
+      allTrees.push(
         <div key={instance} style={{ marginTop: "20px" }}>
           <Typography.Title level={4}>{instance}</Typography.Title>
           {instTree}
@@ -154,17 +153,15 @@ export const OperationTreeView = ({
     }
   }
 
-  let displayTree: React.ReactNode;
-  if (otherTrees.length > 0) {
-    displayTree = (
+  if (primaryTree) {
+    allTrees.unshift(
       <>
-        <Typography.Title level={4}>{config!.instance}</Typography.Title>
+        {allTrees.length > 0 ? (
+          <Typography.Title level={4}>{config!.instance}</Typography.Title>
+        ) : null}
         {primaryTree}
-        {otherTrees}
       </>
     );
-  } else {
-    displayTree = primaryTree;
   }
 
   if (useMobileLayout) {
@@ -181,7 +178,7 @@ export const OperationTreeView = ({
         >
           <BackupView backup={backup} />
         </Modal>
-        {displayTree}
+        {allTrees}
       </>
     );
   }
@@ -190,7 +187,7 @@ export const OperationTreeView = ({
     <Flex vertical gap="middle">
       <Splitter>
         <Splitter.Panel defaultSize="50%" min="20%" max="70%">
-          {displayTree}
+          {allTrees}
         </Splitter.Panel>
         <Splitter.Panel style={{ paddingLeft: "10px" }}>
           <BackupViewContainer>