use last CAN signal as timestamp for pagination

src/components/Cars/CANSignals/index.jsx

@@ -5,6 +5,11 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  Box,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
 } from "@material-ui/core";
 
 import {
@@ -13,7 +18,7 @@ import {
 } from "../../Contexts/CANSignalsContext";
 
 const Main = ({ vin }) => {
-  const { signals, setVIN, duration } = useCANSignalContext();
+  const { signals, setVIN, queryDate, delays, delayIndex, setDelayIndex } = useCANSignalContext();
 
   useEffect(() => {
     setVIN(vin);
@@ -27,7 +32,11 @@ const Main = ({ vin }) => {
 
   return (
     <>
-      (Received within the last {duration} seconds)
+      <Box sx={{ display: "flex", alignItems: "baseline", gap: "8px" }}>
+        <span>Searching every</span>
+        <DelayController delays={delays} delayIndex={delayIndex} setDelayIndex={setDelayIndex} />
+        <span>seconds for signals sent after {queryDate}.</span>
+      </Box>
       <Table>
         <TableHead>
           <TableRow>
@@ -56,4 +65,33 @@ const CANSignals = (props) => (
   </CANSignalProvider>
 );
 
+const DelayController = ({
+  delays,
+  delayIndex,
+  setDelayIndex
+}) => {
+  const label = "Delay";
+  const handleChange = (event) => {
+    setDelayIndex(event.target.value);
+  }
+
+  return (
+    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
+      <InputLabel id="can-signal-delay">{label}</InputLabel>
+      <Select
+        labelId="can-signal-delay"
+        onChange={handleChange}
+        value={delayIndex}
+        label={label}
+      >
+        {delays.map((delay, i) => {
+          return (
+            <MenuItem value={i} selected={i === delayIndex} key={delay}>{delay / 1000}</MenuItem>
+          );
+        })}
+      </Select>
+    </FormControl>
+  )
+}
+
 export default CANSignals;