init

thirdeye/dashboard/app/knowledge-base/FloatingControls.tsx

@@ -0,0 +1,76 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import "./knowledge.css";
+import { fetchAllSignals, Signal, formatRelativeTime } from "../lib/api";
+
+export default function FloatingControls() {
+  const [activeView, setActiveView] = useState("Graph View");
+  const [recentSignals, setRecentSignals] = useState<Signal[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const all = await fetchAllSignals();
+        const flat = all
+          .flatMap((g) => g.signals)
+          .sort(
+            (a, b) =>
+              new Date(b.metadata.timestamp).getTime() -
+              new Date(a.metadata.timestamp).getTime()
+          )
+          .slice(0, 6); // enough for seamless looping
+        setRecentSignals(flat);
+      } catch {
+        // ignore
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  const handleAction = (action: string) => {
+    // visual feedback only
+    console.log(`Graph action: ${action}`);
+  };
+
+  // Format a signal into a short log line
+  function signalToLogLine(sig: Signal): string {
+    const type = sig.metadata.type.toUpperCase().replace(/_/g, "_");
+    const groupShort = sig.metadata.group_id.split("-").slice(-1)[0]?.toUpperCase() || "?";
+    const time = formatRelativeTime(sig.metadata.timestamp);
+    return `[${time}] ${type} · ${groupShort}`;
+  }
+
+  // Fallback static lines when no data
+  const fallbackLines = [
+    "[waiting] NODE_ATTACH",
+    "[waiting] EDGE_UPDATE",
+    "[waiting] SIGNAL_LOCKED",
+  ];
+
+  const logLines =
+    recentSignals.length > 0
+      ? recentSignals.map(signalToLogLine)
+      : fallbackLines;
+
+  // Duplicate for seamless scroll
+  const displayLines = [...logLines, ...logLines];
+
+  return (
+    <div className="absolute bottom-4 left-4 flex items-end gap-4 z-40 animate-fade-in-up delay-100">
+      {/* View Toggle & Graph Controls */}
+      
+
+      <style dangerouslySetInnerHTML={{
+        __html: `
+          @keyframes scroll-up {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(-50%); }
+          }
+        `,
+      }} />
+    </div>
+  );
+}