Skip to content

New frontend websocket config #86

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

Open
amaloney1 wants to merge 2 commits into
base: feature/pipeline-struct
Choose a base branch
from
Open

New frontend websocket config #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32f50af
Frontend websocket change to pipeline
amaloney1 Mar 28, 2026
c70de23
frontend websocket updates
amaloney1 Apr 2, 2026
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
31 changes: 18 additions & 13 deletions frontend/components/nodes/filter-node/filter-node.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
'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';
Expand All @@ -25,7 +21,7 @@ export default function FilterNode({ id }: FilterNodeProps) {

const { dataStreaming } = useGlobalContext();

const buildConfig = (): ProcessingConfig => {
const buildConfig = () => {
if (!isConnected) {
return {
apply_bandpass: false,
Expand Down Expand Up @@ -77,6 +73,19 @@ export default function FilterNode({ id }: FilterNodeProps) {
}
}

// write config to node data for later retrieval when dispatching pipeline payload
const pushConfigToNodeData = React.useCallback(() => {
if (!id) return;
if (!isConnected) return; // Don't push config if not connected
const config = buildConfig();
reactFlowInstance.setNodes((nds) =>
nds.map((n) =>
n.id === id ? { ...n, data: { ...n.data, config } } : n
)
);
}, [id, reactFlowInstance, selectedFilter, lowCutoff, highCutoff, isConnected]);


// Check connection status and update state
const checkConnectionStatus = React.useCallback(() => {
try {
Expand Down Expand Up @@ -137,14 +146,10 @@ export default function FilterNode({ id }: FilterNodeProps) {
};
}, [checkConnectionStatus]);

// Push config to node data and dispatch processing config when relevant state changes
React.useEffect(() => {
if (!dataStreaming) return
dispatchProcessingConfig(buildConfig())
}, [selectedFilter, lowCutoff, highCutoff, isConnected, dataStreaming])

React.useEffect(() => {
dispatchProcessingConfig(buildConfig());
}, []);
pushConfigToNodeData();
}, [pushConfigToNodeData]);

return (
<div className="relative">
Expand Down Expand Up @@ -202,4 +207,4 @@ export default function FilterNode({ id }: FilterNodeProps) {

</div>
);
}
}
46 changes: 26 additions & 20 deletions frontend/components/nodes/window-node/window-node.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useGlobalContext } from '@/context/GlobalContext';
import { Handle, Position, useReactFlow } from '@xyflow/react';
import React from 'react';
import WindowComboBox, { type WindowOption } from './window-combo-box';
import { WindowingConfig } from '@/lib/processing';

interface WindowNodeProps {
id?: string;
Expand All @@ -25,15 +24,32 @@ export default function WindowNode({ id }: WindowNodeProps) {

const { dataStreaming } = useGlobalContext();

const dispatchWindowingConfig = (config: WindowingConfig) => {
window.dispatchEvent(new CustomEvent('windowing-config-update', { detail: config }));
};

const buildConfig = (): WindowingConfig => ({
const buildConfig = () => ({
chunk_size: windowSize,
overlap_size: overlapSize,
});

// Validate config values
const isValidConfig =
Number.isInteger(windowSize) &&
windowSize > 0 &&
Number.isInteger(overlapSize) &&
overlapSize >= 0 &&
overlapSize < windowSize;

// Push config to node data and dispatch processing config when relevant state changes
const pushConfigToNodeData = React.useCallback(() => {
if (!id) return;
if (!isValidConfig) return;
const config = buildConfig();
reactFlowInstance.setNodes((nds) =>
nds.map((n) =>
n.id === id ? { ...n, data: { ...n.data, config } } : n
)
);
}, [id, reactFlowInstance, windowSize, overlapSize, isValidConfig]);


// Check connection status and update state
const checkConnectionStatus = React.useCallback(() => {
try {
Expand Down Expand Up @@ -73,17 +89,6 @@ export default function WindowNode({ id }: WindowNodeProps) {
setIsConnected(false);
}
}, [id, reactFlowInstance]);

const isValidConfig =
Number.isInteger(windowSize) &&
windowSize > 0 &&
Number.isInteger(overlapSize) &&
overlapSize >= 0 &&
overlapSize < windowSize;

React.useEffect(() => {
dispatchWindowingConfig(buildConfig());
}, []);

// Check connection status on mount and when edges might change
React.useEffect(() => {
Expand All @@ -105,10 +110,11 @@ export default function WindowNode({ id }: WindowNodeProps) {
};
}, [checkConnectionStatus]);

// Push config to node data and dispatch processing config when relevant state changes
React.useEffect(() => {
if(!isValidConfig) return;
dispatchWindowingConfig(buildConfig());
}, [windowSize, overlapSize, selectedOption, isConnected, dataStreaming]);
pushConfigToNodeData();
}, [pushConfigToNodeData, isValidConfig]);

return (
<div className="relative">
Expand Down Expand Up @@ -165,4 +171,4 @@ export default function WindowNode({ id }: WindowNodeProps) {
/>
</div>
);
}
}
Loading
Loading