diff --git a/gui_dev/src/components/PSDGraph.jsx b/gui_dev/src/components/PSDGraph.jsx
index f6e60161..b6248a2b 100644
--- a/gui_dev/src/components/PSDGraph.jsx
+++ b/gui_dev/src/components/PSDGraph.jsx
@@ -7,6 +7,7 @@ import {
Typography,
FormControlLabel,
Checkbox,
+ Slider,
} from "@mui/material";
import { CollapsibleBox } from "./CollapsibleBox";
import { getChannelAndFeature } from "./utils";
@@ -37,6 +38,7 @@ export const PSDGraph = () => {
);
const [selectedChannels, setSelectedChannels] = useState([]);
+ const [maxXaxisFrequency, setMaxXaxisFrequency] = useState(500);
const hasInitialized = useRef(false);
const socketPsdData = useSocketStore((state) => state.graphData);
@@ -108,6 +110,10 @@ export const PSDGraph = () => {
});
};
+ const handleMaxXaxisFrequency = (event, newValue) => {
+ setMaxXaxisFrequency(newValue);
+ }
+
useEffect(() => {
if (usedChannels.length > 0 && !hasInitialized.current) {
const availableChannelNames = usedChannels.map((channel) => channel.name);
@@ -146,10 +152,10 @@ export const PSDGraph = () => {
const colors = generateColors(selectedChannels.length);
const traces = psdData.map((data, idx) => ({
- x: data.features,
+ x: data.features.slice(0, maxXaxisFrequency),
y: data.values,
type: "scatter",
- mode: "lines+markers",
+ mode: "lines",
name: data.channelName,
line: { simplify: false, color: colors[idx] },
}));
@@ -197,6 +203,23 @@ export const PSDGraph = () => {
+