Skip to content

Fix websocket connection #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MaddieWright merged 1 commit into from
Mar 11, 2026
Merged

Fix websocket connection #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 31 additions & 54 deletions frontend/components/nodes/filter-node/combo-box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLSpanElement>(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);
Expand Down Expand Up @@ -140,21 +139,17 @@ export default function ComboBox({
paddingRight: '60px',
}}
>
{value != 'bandpass' && (
{value !== 'bandpass' && (
<div>
<Slider
value={sliderValue}
value={value === 'lowpass' ? [highCutoff] : [lowCutoff]}
onValueChange={(val) => {
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}
Expand All @@ -167,54 +162,36 @@ export default function ComboBox({
</div>
)}

{/* Single slider for lowpass and highpass */}
{value == 'bandpass' && (
{value === 'bandpass' && (
<div>
{/* Low cutoff */}
<div>

<Slider
value={lowCutoff}
onValueChange={(val) => {
// 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"
/>
</div>

<Slider
value={[lowCutoff]}
onValueChange={(val) => {
setLowCutoff(Math.min(val[0], highCutoff - 1));
}}
min={0}
max={100}
step={1}
className="w-full mb-1"
/>
<div className="flex justify-between items-center mb-5">
<span className="text-xs text-gray-500">0</span>
<span className="text-xs text-gray-500">Low Cutoff</span>
<span className="text-xs text-gray-500">100</span>
</div>

{/* High cutoff */}
<div>
<Slider
value={highCutoff}
onValueChange={(val) => {
// 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"
/>
</div>

<Slider
value={[highCutoff]}
onValueChange={(val) => {
setHighCutoff(Math.max(val[0], lowCutoff + 1));
}}
min={0}
max={100}
step={1}
className="w-full mb-1"
/>
<div className="flex justify-between items-center mb-1">
<span className="text-xs text-gray-500">0</span>
<span className="text-xs text-gray-500">High Cutoff</span>
Expand Down
30 changes: 7 additions & 23 deletions frontend/components/nodes/filter-node/filter-node.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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<ProcessingConfig>('processing-config-update', {
detail: buildConfig(),
})
);
}, [selectedFilter, lowCutoff, highCutoff, isConnected, dataStreaming]);

return (
<div className="relative">
Expand Down Expand Up @@ -196,23 +197,6 @@ export default function FilterNode({ id }: FilterNodeProps) {
isDataStreamOn={dataStreaming}
/>

{isConnected && (
<>
<input
type="range"
min={1}
max={100}
value={cutoff}
onChange={(e) => setCutoff(Number(e.target.value))}
/>

<p className="text-xs text-muted-foreground">
{selectedFilter === 'lowpass'
? 'Frequencies below cutoff will pass through'
: 'Frequencies above cutoff will pass through'}
</p>
</>
)}
</div>
);
}
26 changes: 21 additions & 5 deletions frontend/hooks/useWebsocket.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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<ProcessingConfig>).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,
Expand Down Expand Up @@ -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) => {
Expand Down
Loading