diff --git a/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderBottomSidebar.tsx b/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderBottomSidebar.tsx index 9b811e19..dd0e8d21 100644 --- a/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderBottomSidebar.tsx +++ b/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderBottomSidebar.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useFetcher } from '@remix-run/react'; +import { useStore } from '@xyflow/react'; import { ClientOnly } from 'remix-utils/client-only'; import { useLocalStorage } from 'usehooks-ts'; @@ -187,6 +188,10 @@ function SidebarLogs({ const fetcher = useFetcher(); const [key, setKey] = useState(Date.now()); + const selectedNode = useStore((state) => + state.nodes.find((node) => node.selected), + ); + useEffect(() => { if (runId) { fetcher.load( @@ -203,6 +208,35 @@ function SidebarLogs({ } }, [fetcher.state, blockName]); + const clearActiveLogs = () => { + const rows = [ + ...document.querySelectorAll(`[data-logactive="true"]`), + ] as HTMLDivElement[]; + + rows.forEach((row) => { + row.removeAttribute('data-logactive'); + }); + }; + + const setActiveLogs = (id: string) => { + const rows = [ + ...document.querySelectorAll(`[data-log="${buildLogRowKey(id)}"]`), + ] as HTMLDivElement[]; + + rows.forEach((row) => { + row.setAttribute('data-logactive', 'true'); + }); + }; + + useEffect(() => { + if (selectedNode) { + clearActiveLogs(); + setActiveLogs(selectedNode.id); + } else { + clearActiveLogs(); + } + }, [selectedNode?.id]); + if (isStarting) { return ( @@ -237,7 +271,13 @@ function SidebarLogs({ ( - + {log.created_at} {log.context} {log.block_name} @@ -267,3 +307,7 @@ function SidebarLogs({ function buildLSKey(organizationId: string) { return hashString('builder-bottom-sidebar-' + organizationId).toString(); } + +function buildLogRowKey(blockName: string) { + return `${blockName}-log-row`; +}