Finish typing (#1069)

### Summary
Finish typing

### Changelist 
<!-- Give a list of the changes covered in this PR. This will help both
you and the reviewer keep this PR within scope. -->

### Testing Done
<!-- Outline the testing that was done to demonstrate the changes are
solid. This could be unit tests, integration tests, testing on the car,
etc. Include relevant code snippets, screenshots, etc as needed. -->

### Resolved Issues
<!-- Link any issues that this PR resolved like so: `Resolves #1, #2,
and #5` (Note: Using this format, Github will automatically close the
issue(s) when this PR is merged in). -->

### Checklist
*Please change `[ ]` to `[x]` when you are ready.*
- [ ] I have read and followed the code conventions detailed in
[README.md](../README.md) (*This will save time for both you and the
reviewer!*).
- [ ] If this pull request is longer then **500** lines, I have provided
*explicit* justification in the summary above explaining why I *cannot*
break this up into multiple pull requests (*Small PR's are faster and
less painful for everyone involved!*).

software/tracksight/frontend/src/app/components/graph.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { useState, useEffect, Dispatch, MouseEventHandler, SetStateAction } from 'react';
-import Plotly, { PlotRelayoutEvent } from 'plotly.js';
-import createPlotlyComponent from "react-plotly.js/factory";
-const Plot = createPlotlyComponent(Plotly);
+import dynamic from "next/dynamic";
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false, })
+import { PlotRelayoutEvent } from 'plotly.js';
+
 import { Card, Button } from 'antd';
 
 import QueryData from './query_data';

software/tracksight/frontend/src/app/components/query_data.tsx

@@ -49,15 +49,11 @@ const QueryData = (props: QueryDataProps) => {
             props.messageApi.open({type: "error", content: "Please fill out all fields properly"});
             return;
         }
-
-        let urlWithSearchParams = new URLSearchParams(props.url + "/query");
-        urlWithSearchParams.append('measurement', measurement[0]);
+        const newParams = new URLSearchParams({measurement: measurement[0],  start_epoch: startEpoch, end_epoch: endEpoch });
         for (const field in fields) {
-            urlWithSearchParams.append('fields', field);
+            newParams.append('fields', fields[field]);
         }
-        urlWithSearchParams.append('start_epoch', startEpoch);
-        urlWithSearchParams.append('end_epoch', endEpoch);
-        fetch(urlWithSearchParams.toString())
+        fetch(props.url + "/query?" + newParams)
         .then((response) => {
             if (!response.ok) {
                 return response.json().then(json => {throw new Error(json["error"])});

software/tracksight/frontend/src/app/components/timestamp_picker.tsx

@@ -1,17 +1,26 @@
-import { useState, useEffect } from 'react'; 
+import { useState, useEffect, SetStateAction, Dispatch } from 'react'; 
 import type { Dayjs } from 'dayjs';
 import { DatePicker, Space, TimePicker } from 'antd';
-
 const { RangePicker } = DatePicker;
 
-const TimeStampPicker = (props) => {
+export interface TimeStampPickerProps {
+    setStart: Dispatch<SetStateAction<string>>,
+    setEnd: Dispatch<SetStateAction<string>>,
+}
+
+declare type EventValue<DateType> = DateType | null;
+declare type RangeValue<DateType> = [EventValue<DateType>, EventValue<DateType>] | null;
+
+const TimeStampPicker = (props: TimeStampPickerProps) => {
     const [dayValue, setDayValue] = useState<Dayjs | null>(null);
 
-    const changeDate = (date_pair, _) => {
-        const startEpoch = date_pair[0].valueOf() + "ms";
-        const endEpoch = date_pair[1].valueOf() + "ms";
-        props.setStart(startEpoch);
-        props.setEnd(endEpoch);
+    const changeDate = (date_pair: RangeValue<Dayjs>, formatted_dates: [string, string]) => {
+        if (date_pair) {
+            const startEpoch = date_pair[0]!.valueOf() + "ms";
+            const endEpoch = date_pair[1]!.valueOf() + "ms";
+            props.setStart(startEpoch);
+            props.setEnd(endEpoch);
+        }
     };
 
     return (

software/tracksight/frontend/src/app/page.tsx

@@ -11,6 +11,7 @@ import Dashboard from './components/dashboard';
 import { PlotRelayoutEvent } from 'plotly.js';
 
 const FLASK_URL = "http://evanyl.pythonanywhere.com";
+//const FLASK_URL = "http://localhost:3000";
 
 const Home = () => {
     const [componentToDisplay, setComponentToDisplay] = useState("visualize");
@@ -54,7 +55,7 @@ const Home = () => {
             <div className="flex-container">
             {graphs.map(graphId => (
                  <Graph 
-                    key={graphId} id={graphId} url={FLASK_URL} sync={sync} setZoomData={setZoomData} zoomData={zoomData}
+                    graphid={graphId} id={graphId} url={FLASK_URL} sync={sync} setZoomData={setZoomData} zoomData={zoomData}
                     onDelete={() => deleteGraph(graphId)} messageApi={messageApi}
                  />
             ))}