frontend window fix: websocket refactor, consistent styling

Author: Maddie

frontend/components/nodes/filter-node/filter-node.tsx

@@ -1,6 +1,10 @@
 'use client';
 import { useGlobalContext } from '@/context/GlobalContext';
 import { ProcessingConfig } from '@/lib/processing';
+
+const dispatchProcessingConfig = (config: ProcessingConfig) => {
+    window.dispatchEvent(new CustomEvent('processing-config-update', { detail: config }));
+};
 import { Handle, Position, useReactFlow } from '@xyflow/react';
 import React from 'react';
 import ComboBox from './combo-box';
@@ -19,8 +23,7 @@ export default function FilterNode({ id }: FilterNodeProps) {
     // Get React Flow instance
     const reactFlowInstance = useReactFlow();
 
-    // Get data stream status from global context
-    const { dataStreaming, sendProcessingConfig } = useGlobalContext()
+    const { dataStreaming } = useGlobalContext();
 
     const buildConfig = (): ProcessingConfig => {
         if (!isConnected) {
@@ -136,11 +139,11 @@ export default function FilterNode({ id }: FilterNodeProps) {
 
     React.useEffect(() => {
         if (!dataStreaming) return
-        sendProcessingConfig(buildConfig())
+        dispatchProcessingConfig(buildConfig())
     }, [selectedFilter, lowCutoff, highCutoff, isConnected, dataStreaming])  
 
     React.useEffect(() => {
-        sendProcessingConfig(buildConfig());
+        dispatchProcessingConfig(buildConfig());
     }, []);
 
     return (

frontend/components/nodes/signal-graph-node/signal-graph-node.tsx

@@ -1,7 +1,7 @@
 import { Card } from '@/components/ui/card';
 import { Handle, Position, useReactFlow } from '@xyflow/react';
-// import useWebsocket from '@/hooks/useWebsocket';
 import { useGlobalContext } from '@/context/GlobalContext';
+import useNodeData from '@/hooks/useNodeData';
 import { ArrowUpRight } from 'lucide-react';
 import React from 'react';
 
@@ -16,9 +16,8 @@ import {
 import SignalGraphView from './signal-graph-full';
 
 export default function SignalGraphNode({ id }: { id?: string }) {
-    // const { renderData } = useWebsocket(20, 10);
-
-    const { renderData, dataStreaming } = useGlobalContext();
+    const { dataStreaming } = useGlobalContext();
+    const { renderData } = useNodeData(20, 10);
 
     const processedData = renderData;
     const reactFlowInstance = useReactFlow();