make logs active when block is selected

elpassion · Dec 13, 2024 · c96ffdb · c96ffdb
1 parent 87f6890
commit c96ffdb
Showing 1 changed file with 45 additions and 1 deletion.
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
@@ -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<typeof logsLoader>();
   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 (
       <EmptyMessage className="text-xs mx-auto block w-fit mt-4">
@@ -237,7 +271,13 @@ function SidebarLogs({
           <ItemList
             items={logs}
             renderItem={(log) => (
-              <Log log={log} className={cn('py-1')}>
+              <Log
+                log={log}
+                className={cn(
+                  'py-1 data-[logactive=true]:bg-primary/5 data-[logactive=true]:hover:bg-muted',
+                )}
+                data-log={buildLogRowKey(log.block_name)}
+              >
                 <LogDate className="mr-2">{log.created_at}</LogDate>
                 <LogTopic className="mr-2">{log.context}</LogTopic>
                 <LogBlockName className="mr-2">{log.block_name}</LogBlockName>
@@ -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`;
+}