fix: ui render issue when changing pipelines

server.go

@@ -7,6 +7,8 @@ import (
 	"io/fs"
 	"log/slog"
 	"net/http"
+	"slices"
+	"strings"
 
 	"github.com/get-glu/glu/pkg/core"
 	"github.com/go-chi/chi/v5"
@@ -88,8 +90,6 @@ func (s *Server) getRoot(w http.ResponseWriter, r *http.Request) {
 }
 
 type listPipelinesResponse struct {
-	// TODO: does a system have metadata?
-	//	Metadata  Metadata           `json:"metadata"`
 	Pipelines []pipelineResponse `json:"pipelines"`
 }
 
@@ -158,6 +158,11 @@ func (s *Server) createPipelineResponse(ctx context.Context, pipeline *core.Pipe
 		phases = append(phases, response)
 	}
 
+	// Sort phases by name for stability
+	slices.SortFunc(phases, func(a, b phaseResponse) int {
+		return strings.Compare(strings.ToLower(a.Descriptor.Metadata.Name), strings.ToLower(b.Descriptor.Metadata.Name))
+	})
+
 	edges := make([]edgeResponse, 0)
 	for _, outgoing := range pipeline.EdgesFrom() {
 		for _, edge := range outgoing {
@@ -175,6 +180,11 @@ func (s *Server) createPipelineResponse(ctx context.Context, pipeline *core.Pipe
 		}
 	}
 
+	// Sort edges by from for stability
+	slices.SortFunc(edges, func(a, b edgeResponse) int {
+		return strings.Compare(strings.ToLower(a.From.Metadata.Name), strings.ToLower(b.From.Metadata.Name))
+	})
+
 	return pipelineResponse{
 		Name:   pipeline.Metadata().Name,
 		Labels: labels,
@@ -202,6 +212,11 @@ func (s *Server) listPipelines(w http.ResponseWriter, r *http.Request) {
 		pipelineResponses = append(pipelineResponses, response)
 	}
 
+	// Sort pipelines by name for stability
+	slices.SortFunc(pipelineResponses, func(a, b pipelineResponse) int {
+		return strings.Compare(strings.ToLower(a.Name), strings.ToLower(b.Name))
+	})
+
 	// TODO: handle pagination
 	if err := json.NewEncoder(w).Encode(listPipelinesResponse{
 		Pipelines: pipelineResponses,

ui/src/app/layout.tsx

@@ -1,7 +1,6 @@
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { Sidebar } from '@/components/sidebar';
 import { Outlet } from 'react-router-dom';
-import { Header } from '@/components/header';
 import { Toaster } from '@/components/ui/sonner';
 
 export default function Layout() {
@@ -10,10 +9,7 @@ export default function Layout() {
       <Sidebar />
       <SidebarInset>
         <main className="relative w-full flex-1">
-          <Header className="absolute left-0 right-0 top-0 z-10" />
-          <div className="flex h-screen w-full">
-            <Outlet />
-          </div>
+          <Outlet />
         </main>
         <Toaster />
       </SidebarInset>

ui/src/app/pipeline.tsx

@@ -2,40 +2,23 @@ import '@xyflow/react/dist/style.css';
 import { Pipeline as PipelineComponent } from '@/components/pipeline';
 import { ReactFlowProvider } from '@xyflow/react';
 import { useParams } from 'react-router-dom';
-import { setSelectedPipeline } from '@/store/pipelinesSlice';
-import { useEffect } from 'react';
-import { useAppDispatch } from '@/store/hooks';
-import { useGetPipelineQuery } from '@/services/api';
+import { Header } from '@/components/header';
 
 export default function Pipeline() {
   const { pipelineId } = useParams();
-  const dispatch = useAppDispatch();
 
-  const { data: pipeline, isLoading } = useGetPipelineQuery(pipelineId ?? '', {
-    pollingInterval: 5000,
-    skipPollingIfUnfocused: true
-  });
-
-  useEffect(() => {
-    if (pipeline) {
-      dispatch(setSelectedPipeline(pipeline));
-    }
-    return () => {
-      dispatch(setSelectedPipeline(null));
-    };
-  }, [pipeline, dispatch]);
-
-  if (isLoading || !pipeline) {
-    return <div>Loading pipeline...</div>;
-  }
-
-  if (!pipeline) {
+  if (!pipelineId) {
     return <div>Pipeline not found: {pipelineId}</div>;
   }
 
   return (
-    <ReactFlowProvider key={`provider-${pipelineId}`}>
-      <PipelineComponent key={pipelineId} pipeline={pipeline} />
-    </ReactFlowProvider>
+    <>
+      <Header className="absolute left-0 right-0 top-0 z-10" pipelineId={pipelineId} />
+      <div className="flex h-screen w-full">
+        <ReactFlowProvider key={`provider-${pipelineId}`}>
+          <PipelineComponent pipelineId={pipelineId} />
+        </ReactFlowProvider>
+      </div>
+    </>
   );
 }

ui/src/components/header.tsx

@@ -1,14 +1,11 @@
-import { useAppSelector } from '@/store/hooks';
-import { RootState } from '@/store';
 import { ThemeToggle } from './theme-toggle';
 import { ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { SidebarTrigger } from './ui/sidebar';
 import { useGetSystemQuery } from '@/services/api';
 
-export function Header({ className }: { className?: string }) {
+export function Header({ className, pipelineId }: { className?: string; pipelineId: string }) {
   const { data: system, isLoading } = useGetSystemQuery();
-  const selectedPipeline = useAppSelector((state: RootState) => state.pipelines.selectedPipeline);
 
   return (
     <div className={cn('h-18 border-b bg-background p-4', className)}>
@@ -17,10 +14,10 @@ export function Header({ className }: { className?: string }) {
         <div className="flex w-full justify-between">
           <div className="flex items-center gap-2">
             <span className="text-lg font-bold">{isLoading ? 'Loading...' : system?.name}</span>
-            {selectedPipeline && (
+            {pipelineId && (
               <>
                 <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                <span className="text-lg text-muted-foreground">{selectedPipeline.name}</span>
+                <span className="text-lg text-muted-foreground">{pipelineId}</span>
               </>
             )}
           </div>

ui/src/components/pipeline.tsx

@@ -18,6 +18,7 @@ import { Pipeline as PipelineType } from '@/types/pipeline';
 import { FlowPipeline, PipelineEdge, PhaseNode } from '@/types/flow';
 import Dagre from '@dagrejs/dagre';
 import { ButtonEdge } from './button-edge';
+import { useGetPipelineQuery } from '@/services/api';
 
 const nodeTypes = {
   phase: PhaseNodeComponent
@@ -27,23 +28,32 @@ const edgeTypes = {
   button: ButtonEdge
 };
 
-export function Pipeline(props: { pipeline: PipelineType }) {
+export function Pipeline({ pipelineId }: { pipelineId: string }) {
   const { theme } = useTheme();
-  const { fitView, getNodes, getEdges } = useReactFlow<PhaseNode, PipelineEdge>();
+  const { fitView } = useReactFlow<PhaseNode, PipelineEdge>();
   const [selectedNode, setSelectedNode] = useState<PhaseNode | null>(null);
   const [isPanelExpanded, setIsPanelExpanded] = useState(true);
 
-  const { pipeline } = props;
-  const { nodes: initNodes, edges: initEdges } = getElements(pipeline);
+  const { data: pipeline } = useGetPipelineQuery(pipelineId);
 
-  const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
+  const [nodes, setNodes, onNodesChange] = useNodesState([] as Node[]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([] as PipelineEdge[]);
 
   const nodesInitialized = useNodesInitialized();
 
+  useEffect(() => {
+    if (pipeline) {
+      const { nodes: newNodes, edges: newEdges } = getElements(pipeline);
+      const flow = getLayoutedElements({ nodes: newNodes, edges: newEdges });
+
+      setNodes(flow.nodes);
+      setEdges(flow.edges);
+    }
+  }, [pipeline]);
+
   useEffect(() => {
     if (nodesInitialized) {
-      const flow = getLayoutedElements({ nodes: getNodes(), edges: getEdges() });
+      const flow = getLayoutedElements({ nodes, edges });
       setNodes(flow.nodes);
       setEdges(flow.edges);
     }

ui/src/components/sidebar.tsx

@@ -31,6 +31,11 @@ export function Sidebar() {
   const [open, setOpen] = useState(false);
   const { data: pipelinesData, isLoading } = useListPipelinesQuery();
 
+  const onPipelineSelect = (pipelineName: string) => {
+    setOpen(false);
+    navigate(`/pipelines/${pipelineName}`);
+  };
+
   return (
     <SidebarComponent>
       <SidebarContent className="flex h-full flex-col justify-between">
@@ -77,10 +82,7 @@ export function Sidebar() {
                             <CommandItem
                               key={pipeline.name}
                               value={pipeline.name}
-                              onSelect={(currentValue: string) => {
-                                setOpen(false);
-                                navigate(`/pipelines/${currentValue}`);
-                              }}
+                              onSelect={() => onPipelineSelect(pipeline.name)}
                               className="truncate"
                             >
                               <Check

ui/src/store/index.ts

@@ -1,18 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { api } from '@/services/api';
-import { pipelinesSlice, PipelinesState } from './pipelinesSlice';
-
-export interface StoreState {
-  pipelines: PipelinesState;
-}
 
 export const store = configureStore({
   reducer: {
-    pipelines: pipelinesSlice.reducer,
     [api.reducerPath]: api.reducer
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware)
 });
 
-export type RootState = StoreState;
+export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;