From 0b26b6641a22ac1870cb8bf0802c16a448f035eb Mon Sep 17 00:00:00 2001 From: Maddie Date: Tue, 10 Mar 2026 19:49:08 -0700 Subject: [PATCH] fix websocket connection --- .../nodes/filter-node/combo-box.tsx | 85 +++++++------------ .../nodes/filter-node/filter-node.tsx | 30 ++----- frontend/hooks/useWebsocket.tsx | 26 ++++-- 3 files changed, 59 insertions(+), 82 deletions(-) diff --git a/frontend/components/nodes/filter-node/combo-box.tsx b/frontend/components/nodes/filter-node/combo-box.tsx index 513540e..4505a0f 100644 --- a/frontend/components/nodes/filter-node/combo-box.tsx +++ b/frontend/components/nodes/filter-node/combo-box.tsx @@ -32,16 +32,15 @@ interface ComboBoxProps { export default function ComboBox({ value = 'lowpass', onValueChange, + lowCutoff, + highCutoff, + setLowCutoff, + setHighCutoff, isConnected = false, isDataStreamOn = false, }: ComboBoxProps) { const [isExpanded, setIsExpanded] = React.useState(false); const titleRef = React.useRef(null); - const [sliderValue, setSliderValue] = React.useState([75]); - const [cutoff, setCutoff] = React.useState([75]); - - const [lowCutoff, setLowCutoff] = React.useState([25]); - const [highCutoff, setHighCutoff] = React.useState([75]); const toggleExpanded = () => { setIsExpanded(!isExpanded); @@ -140,21 +139,17 @@ export default function ComboBox({ paddingRight: '60px', }} > - {value != 'bandpass' && ( + {value !== 'bandpass' && (
{ - setSliderValue(val); - if (value === 'lowpass') { - setHighCutoff(val); - } - - if (value === 'highpass') { - setLowCutoff(val); + setHighCutoff(val[0]); + } else { + setLowCutoff(val[0]); } - }} + }} max={100} min={0} step={1} @@ -167,29 +162,19 @@ export default function ComboBox({
)} - {/* Single slider for lowpass and highpass */} - {value == 'bandpass' && ( + {value === 'bandpass' && (
{/* Low cutoff */} -
- - { - // prevent low from going above high - const next = - val[0] >= highCutoff[0] - ? highCutoff[0] - 1 - : val[0]; - setLowCutoff([next]); - }} - min={0} - max={100} - step={1} - className="w-full mb-1" - /> -
- + { + setLowCutoff(Math.min(val[0], highCutoff - 1)); + }} + min={0} + max={100} + step={1} + className="w-full mb-1" + />
0 Low Cutoff @@ -197,24 +182,16 @@ export default function ComboBox({
{/* High cutoff */} -
- { - // prevent high from going below low - const next = - val[0] <= lowCutoff[0] - ? lowCutoff[0] + 1 - : val[0]; - setHighCutoff([next]); - }} - min={0} - max={100} - step={1} - className="w-full mb-1" - /> -
- + { + setHighCutoff(Math.max(val[0], lowCutoff + 1)); + }} + min={0} + max={100} + step={1} + className="w-full mb-1" + />
0 High Cutoff diff --git a/frontend/components/nodes/filter-node/filter-node.tsx b/frontend/components/nodes/filter-node/filter-node.tsx index 2032775..b1e21d1 100644 --- a/frontend/components/nodes/filter-node/filter-node.tsx +++ b/frontend/components/nodes/filter-node/filter-node.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { Handle, Position, useReactFlow } from '@xyflow/react'; import { useGlobalContext } from '@/context/GlobalContext'; import ComboBox from './combo-box'; -import useWebsocket from '@/hooks/useWebsocket'; import { ProcessingConfig } from '@/lib/processing'; interface FilterNodeProps { @@ -23,8 +22,6 @@ export default function FilterNode({ id }: FilterNodeProps) { // Get data stream status from global context const { dataStreaming } = useGlobalContext(); - const { sendProcessingConfig } = useWebsocket(0, 0) - const buildConfig = (): ProcessingConfig => { if (!isConnected) { return { @@ -138,9 +135,13 @@ export default function FilterNode({ id }: FilterNodeProps) { }, [checkConnectionStatus]); React.useEffect(() => { - if (!dataStreaming) return - sendProcessingConfig(buildConfig()) - }, [selectedFilter, lowCutoff, highCutoff, isConnected, dataStreaming]) + if (!dataStreaming) return; + window.dispatchEvent( + new CustomEvent('processing-config-update', { + detail: buildConfig(), + }) + ); + }, [selectedFilter, lowCutoff, highCutoff, isConnected, dataStreaming]); return (
@@ -196,23 +197,6 @@ export default function FilterNode({ id }: FilterNodeProps) { isDataStreamOn={dataStreaming} /> - {isConnected && ( - <> - setCutoff(Number(e.target.value))} - /> - -

- {selectedFilter === 'lowpass' - ? 'Frequencies below cutoff will pass through' - : 'Frequencies above cutoff will pass through'} -

- - )}
); } \ No newline at end of file diff --git a/frontend/hooks/useWebsocket.tsx b/frontend/hooks/useWebsocket.tsx index edae134..6223e59 100644 --- a/frontend/hooks/useWebsocket.tsx +++ b/frontend/hooks/useWebsocket.tsx @@ -2,6 +2,16 @@ import { useEffect, useState, useRef } from 'react'; import { useGlobalContext } from '@/context/GlobalContext'; import { ProcessingConfig } from '@/lib/processing'; +const DEFAULT_PROCESSING_CONFIG: ProcessingConfig = { + apply_bandpass: false, + use_iir: false, + l_freq: null, + h_freq: null, + downsample_factor: null, + sfreq: 256, + n_channels: 4, +}; + export default function useWebsocket( chartSize: number, batchesPerSecond: number @@ -23,7 +33,16 @@ export default function useWebsocket( wsRef.current.send(JSON.stringify(config)) console.log('Sent processing config:', config) } - } + } + + useEffect(() => { + const handleConfigUpdate = (event: Event) => { + sendProcessingConfig((event as CustomEvent).detail); + }; + window.addEventListener('processing-config-update', handleConfigUpdate); + return () => window.removeEventListener('processing-config-update', handleConfigUpdate); + }, []); + const normalizeBatch = (batch: any) => { return batch.timestamps.map((time: number, i: number) => ({ time, @@ -65,10 +84,7 @@ export default function useWebsocket( ws.onopen = () => { console.log('WebSocket connection opened.'); - - if (processingConfigRef.current) { - ws.send(JSON.stringify(processingConfigRef.current)) - } + ws.send(JSON.stringify(processingConfigRef.current ?? DEFAULT_PROCESSING_CONFIG)); }; ws.onmessage = (event) => {