Skip to content

Commit

Permalink
Tweaking decoder manual data entry logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacob6838
jacob6838 committed Aug 14, 2024
1 parent 9e3392f commit c7f59fb
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 72 deletions.
58 changes: 45 additions & 13 deletions gui/src/components/decoder/decoder-entry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
TextField,
Typography,
} from "@mui/material";
import React from "react";
import React, { useEffect } from "react";
import MapRoundedIcon from "@mui/icons-material/MapRounded";
import DeleteIcon from "@mui/icons-material/Delete";
import DownloadIcon from "@mui/icons-material/Download";
Expand Down Expand Up @@ -53,6 +53,14 @@ export const DecoderEntry = (props: DecoderDataEntry & DecoderEntryProps) => {
onDeleted,
} = props;

const [localText, setLocalText] = React.useState(text);
const [previouslySubmittedText, setPreviouslySubmittedText] = React.useState(text);

useEffect(() => {
setLocalText(text);
setPreviouslySubmittedText("");
}, [id]);

const getIntersectionId = (decodedResponse: DecoderApiResponseGeneric | undefined) => {
if (!decodedResponse) {
return undefined;
Expand All @@ -75,8 +83,18 @@ export const DecoderEntry = (props: DecoderDataEntry & DecoderEntryProps) => {
onSelected(id);
};

const handleTextChange = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
onTextChanged(id, event.target.value);
const handleKeyDown = (event) => {
if (event.key === "Enter" && previouslySubmittedText !== localText) {
onTextChanged(id, localText);
setPreviouslySubmittedText(localText);
}
};

const handleBlur = () => {
if (previouslySubmittedText !== localText) {
onTextChanged(id, localText);
setPreviouslySubmittedText(localText);
}
};

const handleDeleteClick = () => {
Expand Down Expand Up @@ -175,7 +193,14 @@ export const DecoderEntry = (props: DecoderDataEntry & DecoderEntryProps) => {
)}
</div>
<br></br>
<TextField value={text} placeholder="Paste data here" onChange={handleTextChange} sx={{ width: 160 }} />
<TextField
value={localText}
placeholder="Paste data here"
onChange={(e) => setLocalText(e.target.value)}
onBlur={handleBlur}
onKeyDown={handleKeyDown}
sx={{ width: 160 }}
/>
<IconButton aria-label="delete" onClick={handleDeleteClick} style={{ color: getIconColor() }}>
<DeleteIcon />
</IconButton>
Expand All @@ -188,15 +213,22 @@ export const DecoderEntry = (props: DecoderDataEntry & DecoderEntryProps) => {
</IconButton>
)}
{status === "IN_PROGRESS" && <CircularProgress />}
<Box>
<TextField
value={
"Errors: " + (decodedResponse?.decodeErrors == "" ? "None" : decodedResponse?.decodeErrors) ?? "None"
}
InputProps={{ readOnly: true }}
fullWidth
/>
</Box>
{decodedResponse?.decodeErrors !== "" && decodedResponse?.decodeErrors !== undefined && (
<Box>
<Typography
variant="subtitle1"
color="black"
sx={{
display: "flex",
whiteSpace: "normal",
overflowWrap: "break-word",
wordBreak: "break-all",
}}
>
{"Errors: " + (decodedResponse?.decodeErrors == "" ? "None" : decodedResponse?.decodeErrors) ?? "None"}
</Typography>
</Box>
)}
</TableCell>
</TableRow>
);
Expand Down
5 changes: 2 additions & 3 deletions gui/src/components/decoder/decoder-tables.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,8 @@ export const DecoderTables = (props: DecoderTableProps) => {
case "SPAT":
const spatPayload = decodedResponse.processedSpat;
return spatPayload?.intersectionId;
case "BSM":
const bsmPayload = decodedResponse.bsm;
return bsmPayload?.metadata.originIp;
default:
return undefined;
}
};

Expand Down
61 changes: 20 additions & 41 deletions gui/src/components/map/map-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@ type MapProps = {
intersectionId: number | undefined;
roadRegulatorId: number | undefined;
loadOnNull?: boolean;
timeFilterBsms?: boolean;
};

const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
Expand All @@ -313,7 +314,7 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
heading?: number;
animationDurationMs?: number;
}) => {
console.log("Centering map on point", latitude, longitude);
console.debug("Centering map on point", latitude, longitude);
if (mapRef.current) {
mapRef.current.flyTo({
center: [longitude, latitude],
Expand All @@ -323,28 +324,6 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
});
}
},
setRenderedMapData: (mapMessage: ProcessedMap) => {
const mapCoordinates: OdePosition3D = mapMessage?.properties.refPoint;

setConnectingLanes(mapMessage.connectingLanesFeatureCollection);
const mapSignalGroupsLocal = parseMapSignalGroups(mapMessage);
setMapData(mapMessage);
setMapSpatTimes((prevValue) => ({
...prevValue,
mapTime: getTimestamp(mapMessage.properties.odeReceivedAt) / 1000,
}));
setMapSignalGroups(mapSignalGroupsLocal);
},
setRenderedSpatData: (spatData: ProcessedSpat[]) => {
console.log("Rendering SPAT data", spatData?.length);
const spatSignalGroups = parseSpatSignalGroups(spatData);
setSpatSignalGroups(spatSignalGroups);
},
setRenderedBsmData: (bsmData: OdeBsmData[]) => {
console.log("Rendering BSM data", bsmData?.length);
const bsmGeojson = parseBsmToGeojson(bsmData);
setBsmData(bsmGeojson);
},
}));

const [queryParams, setQueryParams] = useState<{
Expand Down Expand Up @@ -874,12 +853,17 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
queryParams.roadRegulatorId
);
return;
} else if (queryParams.intersectionId === -1 && props.sourceDataType !== "exact") {
console.error("Intersection ID is -1. Not attempting to pull initial map data.");
} else if (
queryParams.intersectionId === -1 &&
(props.sourceDataType !== "exact" || (props.sourceData as { map: ProcessedMap[] })?.map?.length === 0)
) {
resetMapView();
return;
if (props.sourceDataType !== "exact") {
console.log("Intersection ID is -1. Not attempting to pull initial map data.");
return;
}
}
console.debug("Pulling Initial Data");
console.log("Pulling Initial Data");
pullInitialDataAbortControllers.forEach((abortController) => abortController.abort());
let rawMap: ProcessedMap[] = [];
let rawSpat: ProcessedSpat[] = [];
Expand Down Expand Up @@ -979,7 +963,7 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
}));
setMapSignalGroups(mapSignalGroupsLocal);

if (importedMessageData == undefined) {
if (importedMessageData == undefined && props.sourceDataType != "exact") {
// ######################### Retrieve SPAT Data #########################
let abortController = new AbortController();
setPullInitialDataAbortControllers((prevValue) => [...prevValue, abortController]);
Expand Down Expand Up @@ -1060,9 +1044,9 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
setSpatSignalGroups(spatSignalGroupsLocal);

// ######################### BSMs #########################
abortController = new AbortController();
setPullInitialDataAbortControllers((prevValue) => [...prevValue, abortController]);
if (!importedMessageData && props.sourceDataType != "exact") {
abortController = new AbortController();
setPullInitialDataAbortControllers((prevValue) => [...prevValue, abortController]);
const rawBsmPromise = MessageMonitorApi.getBsmMessages({
token: session?.accessToken,
vehicleId: queryParams.vehicleId,
Expand Down Expand Up @@ -1197,7 +1181,6 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
setFilteredSurroundingNotifications([]);
setBsmData({ type: "FeatureCollection", features: [] });
setCurrentBsms({ type: "FeatureCollection", features: [] });
console.log("1191 setCurrentBsms", { type: "FeatureCollection", features: [] });
setMapSpatTimes({ mapTime: 0, spatTime: 0 });
setRawData({});
setSliderValue(0);
Expand Down Expand Up @@ -1343,7 +1326,6 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
};
setBsmData(currentBsmGeojson);
setRawData((prevValue) => ({ ...prevValue, bsm: currentBsmGeojson }));
console.debug("BSM RENDER TIME:", Date.now() - start, "ms");
return currentBsmGeojson;
};

Expand Down Expand Up @@ -1391,13 +1373,11 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
clearTimeout(loadInitialDataTimeoutId);
}
setLoadInitialdataTimeoutId(setTimeout(pullInitialData, 500));
}, [queryParams]);
}, [queryParams, props.sourceData]);

useEffect(() => {
if (props.sourceDataType == "exact") {
// In "exact" mode, always show all BSMs. Timestamps are meaningless.
if (props.timeFilterBsms == false) {
setCurrentBsms(bsmData);
console.log("1391 setCurrentBsms", bsmData);
}
if (!mapSignalGroups || !spatSignalGroups) {
console.debug("BSM Loading: No map or SPAT data", mapSignalGroups, spatSignalGroups);
Expand Down Expand Up @@ -1427,7 +1407,7 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
setSignalStateData(undefined);
}

if (props.sourceDataType !== "exact") {
if (props.timeFilterBsms == false) {
// retrieve filtered BSMs
const filteredBsms: BsmFeature[] = bsmData?.features?.filter(
(feature) =>
Expand Down Expand Up @@ -1461,7 +1441,6 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
}
}
setCurrentBsms({ ...bsmData, features: lastBsms });
console.log("1455 setCurrentBsms", { ...bsmData, features: lastBsms });
}

const filteredEvents: MessageMonitor.Event[] = surroundingEvents.filter(
Expand Down Expand Up @@ -1562,7 +1541,7 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
let protocols = ["v10.stomp", "v11.stomp"];
protocols.push(token);
const url = `${publicRuntimeConfig.API_WS_URL}/stomp`;
console.debug("Connecting to STOMP endpoint: " + url + " with token: " + token);
console.debug("Connecting to STOMP endpoint: " + url);

// Stomp Client Documentation: https://stomp-js.github.io/stomp-websocket/codo/extra/docs-src/Usage.md.html
let client = Stomp.client(url, protocols);
Expand Down Expand Up @@ -1861,7 +1840,7 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
mapStyle={mbStyle as mapboxgl.Style}
onLoad={(e: mapboxgl.MapboxEvent<undefined>) => {
const map = e.target;
console.log("MAP LOADED", mapRef.current, map, e.target);
console.debug("MAP LOADED", mapRef.current, map, e.target);
if (!map) return;
const images = [
"traffic-light-icon-unknown",
Expand All @@ -1878,7 +1857,7 @@ const MapTab = forwardRef<MAP_REFERENCE_TYPE | undefined, MapProps>(
console.error("Error loading image:", image_name, error, image, map.hasImage(image_name));
return;
}
console.log("MAP IMAGE", image_name, map.hasImage(image_name));
console.debug("MAP IMAGE", image_name, map.hasImage(image_name));
if (!map.hasImage(image_name)) map.addImage(image_name, image);
});
}
Expand Down
45 changes: 30 additions & 15 deletions gui/src/pages/decoder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const DecoderPage = () => {
const [selectedBsms, setSelectedBsms] = useState([] as string[]);
const mapRef = useRef<MAP_REFERENCE_TYPE | null>(null);

const [currentBsms, setCurrentBsms] = useState([] as OdeBsmData[]);

console.log("Data", data);

useEffect(() => {
Expand Down Expand Up @@ -62,20 +64,36 @@ const DecoderPage = () => {
if (type == "BSM") {
setSelectedBsms((prevBsms) => [...prevBsms, id]);
}
console.log("Response", response);
setData((prevData) => {
return {
...prevData,
[id]: {
...prevData[id],
decodedResponse: response,
timestamp: getTimestampFromType(type, response),
status: text == "" ? "NOT_STARTED" : response == undefined ? "ERROR" : "COMPLETED",
status: text == "" ? "NOT_STARTED" : response?.decodeErrors !== "" ? "ERROR" : "COMPLETED",
},
};
});
});
prevData = {
...prevData,
[id]: {
id: id,
type: type,
status: "IN_PROGRESS",
selected: false,
isGreyedOut: false,
text: text,
decodedResponse: undefined,
},
};
let newEntry = {};
if (prevData[id].text != undefined) {
if (
prevData[id].text != undefined &&
Object.values(prevData).find((v) => v.type == type && v.text == "") == undefined
) {
let newId = uuidv4();
newEntry[newId] = {
id: newId,
Expand All @@ -88,17 +106,8 @@ const DecoderPage = () => {
};
}
return {
...prevData,
...newEntry,
[id]: {
id: id,
type: type,
status: "IN_PROGRESS",
selected: false,
isGreyedOut: false,
text: text,
decodedResponse: undefined,
},
...prevData,
};
});
};
Expand Down Expand Up @@ -213,6 +222,14 @@ const DecoderPage = () => {
return (selectedMapMessage?.rsuIp === undefined || rsuIp !== selectedMapMessage?.rsuIp) && rsuIp != "";
};

useEffect(() => {
const newBsmData = Object.values(data)
.filter((v) => v.type === "BSM" && v.status === "COMPLETED" && selectedBsms.includes(v.id))
.map((v) => v.decodedResponse?.bsm);
setCurrentBsms(newBsmData.filter((v) => v !== undefined) as OdeBsmData[]);
console.log("Current BSMs", newBsmData.length);
}, [data, selectedBsms]);

return (
<>
<Head>
Expand Down Expand Up @@ -264,9 +281,7 @@ const DecoderPage = () => {
v.type === "SPAT" && v.status == "COMPLETED" && !isGreyedOut(getIntersectionId(v.decodedResponse))
)
.map((v) => v.decodedResponse?.processedSpat!),
bsm: Object.values(data)
.filter((v) => v.type === "BSM" && v.status == "COMPLETED" && selectedBsms.includes(v.id))
.map((v) => v.decodedResponse?.bsm!),
bsm: currentBsms,
}}
sourceDataType={"exact"}
intersectionId={-1}
Expand Down

0 comments on commit c7f59fb

Please sign in to comment.