misc cleanup/fixes; re-enable rangeslider setting viewinterval

Author: bvngee

frontend/app/components/Navbar.tsx

@@ -121,7 +121,6 @@ export default function Navbar() {
 
     function DataSourcePicker() {
         function onPickerChanged(value: string) {
-            console.log(value);
             if (value === "recording") {
                 //TODO Make an actual function to stop the live view
                 switchToRecording("");

frontend/app/components/TimelineBar.tsx

@@ -50,7 +50,7 @@ function SyncButton() {
         return () => {
             unsub1();
             unsub2();
-        }
+        };
     }, []);
     const setTimelineSynced = () => {
         setEnabled(true);
@@ -73,7 +73,10 @@ function MainSlider() {
     const [disabled, setDisabled] = useState<boolean>(false);
     const [minMax, setMinMax] = useState<RangeSliderValue>([0, 10]);
     const [value, setValue] = useState<RangeSliderValue>([0, 10]);
-    const debouncedSetValue = useDebounceCallbackGreedy((value) => setValue(value), 10);
+    const debouncedSetValue = useDebounceCallbackGreedy((value) => {
+        setValue(value);
+        // console.log(performance.now(), value);
+    }, 10);
     const ref = useRef<HTMLDivElement>(null);
     // id is only used to differentiate between who set viewInterval (avoid infinite recursion)
     const id = "timelineBar";
@@ -94,7 +97,7 @@ function MainSlider() {
             setMinMax([left, right]);
         });
         const unsub2 = subscribeDataSource((dataSource: DataSourceType) => {
-            // setDisabled(dataSource == DataSourceType.NONE);
+            setDisabled(dataSource == DataSourceType.NONE);
         });
         const unsub3 = subscribeViewInterval((range, setterID) => {
             // console.log(range, setterID, minMax);
@@ -126,13 +129,13 @@ function MainSlider() {
             //     viewIntervalRef.current[1],
             // );
         }
+
         setValue(range);
-        // setViewInterval(range, id);
+        setViewInterval(range, id);
 
-        const val = dataArraysRef.current[timeColumnName]![range[0]];
-        console.log("idx:", range[0], val, dataArraysRef.current[":Time"]);
-        console.log("timeline setting range:", range);
-        
+        // const val = dataArraysRef.current[timeColumnName]![range[0]];
+        // console.log("idx:", range[0], val, dataArraysRef.current[":Time"]);
+        // console.log("timeline setting range:", range);
     };
 
     const sliderStyles = useMemo(
@@ -149,7 +152,6 @@ function MainSlider() {
 
         // console.log("idx:", idx, val, dataArraysRef.current[":Time"]);
         return val !== undefined ? val.toFixed(2) : "???";
-        
     };
 
     return (

frontend/app/components/visualizations/CarWireframe.tsx

@@ -33,7 +33,7 @@ function Car({ rotation }: { rotation: rotation }) {
 
     useEffect(() => {
         group.current?.setRotationFromEuler(
-            new THREE.Euler(rotation.x, rotation.y + Math.PI, rotation.z, "XYZ"),
+            new THREE.Euler(rotation.x, rotation.y, rotation.z, "XYZ"),
         );
     }, [rotation]);
 
@@ -69,9 +69,12 @@ export default function CarWireframe() {
     useEffect(() => {
         return subscribeCursorRow((cursorRow) => {
             setValues({
-                x: cursorRow?.VDM_X_AXIS_ACCELERATION ?? 0,
-                y: cursorRow?.VDM_Y_AXIS_ACCELERATION ?? 0,
-                z: cursorRow?.VDM_Z_AXIS_ACCELERATION ?? 0,
+                // x: cursorRow?.VDM_X_AXIS_ACCELERATION ?? 0,
+                // y: cursorRow?.VDM_Y_AXIS_ACCELERATION ?? 0,
+                // z: cursorRow?.VDM_Z_AXIS_ACCELERATION ?? 0,
+                x: 0,
+                y: (cursorRow?.VDM_GPS_TRUE_COURSE ?? 0) / -180 * Math.PI + Math.PI,
+                z: 0,
             });
         });
     }, []);

frontend/app/components/visualizations/lightning-charts/StackedLineChart.tsx

@@ -3,6 +3,7 @@ import StackedLineChartInternal from "./StackedLineChartInternal";
 import { Gear, Plus } from "@phosphor-icons/react";
 import { VisualizationProps } from "../../FlexLayoutComponent";
 import { ColumnName, columnNames, timeColumnName } from "@/app/data-processing/datatypes";
+import { useState } from "react";
 
 type YAxisInfo = {
     columnNames: ColumnName[];
@@ -62,9 +63,12 @@ export function StackedLineChart({
         },
     ]);
 
+    const [search, setSearch] = useState("");
+
     // this is just a basic, not-thought-through example of how to modify the
     // state to add new columns
     const tryAddColumn = (key: string) => {
+        setSearch(key);
         if ((columnNames as string[]).includes(key)) {
             setYAxesInfo([
                 {
@@ -109,7 +113,7 @@ export function StackedLineChart({
                         label="Add Columns"
                         placeholder="Seg0_VOLT_0"
                         data={columnNames}
-                        value=""
+                        value={search}
                         onChange={tryAddColumn}
                     />
                 </Menu.Dropdown>

frontend/app/components/visualizations/lightning-charts/StackedLineChartInternal.tsx

@@ -175,6 +175,7 @@ export default function StackedLineChartInternal({
         //     restoreDefault: { doubleClick: true },
         // };
         // chart.setUserInteractions(defaultUserInteractions);
+        // chart.setAnimationsEnabled(false); // do we like animations?
 
         chart.getDefaultAxisX().addEventListener("intervalchange", ({ start, end }) => {
             // start/end are "axis coordinates" but chart.solveNearest() expects
@@ -203,9 +204,11 @@ export default function StackedLineChartInternal({
                 // TODO: maybe only set the main viewInterval if we have pointer
                 // focus and the viewWidth itself changed?
                 // also, maybe chart.seriesBackground.addEventListener("") ?
-                const [oldStart, oldEnd] = viewIntervalRef.current;
-                if (!isTimelineSyncedRef.current || start - end == oldStart - oldEnd) {
-                }
+                // const [oldStart, oldEnd] = viewIntervalRef.current;
+                // if (!isTimelineSyncedRef.current || start - end == oldStart - oldEnd) {
+                // }
+
+                // console.log("LCJS setting:", dataIndexes);
                 setViewInterval(dataIndexes, `lcjs-${id}`);
             }
         });
@@ -327,7 +330,7 @@ export default function StackedLineChartInternal({
 
     useEffect(() => {
         legendRef.current?.setVisible(showLegend ?? false);
-    }, [showLegend])
+    }, [showLegend]);
 
     return <div id={id} ref={containerRef} className="w-[100%] h-[100%]"></div>;
 }

frontend/app/utils/useGreedyDebounce.tsx

@@ -5,16 +5,25 @@ export default function useDebounceCallbackGreedy<T extends (...args: any[]) =>
     delay: number,
 ) {
     const timeoutRef = useRef<number>(null);
-    const isCooldownRef = useRef(false);
+    const isOnCooldownRef = useRef(false);
+    const lastArgsRef = useRef<Parameters<T>>(null);
 
     const debouncedFunc = useCallback(
         (...args: Parameters<T>) => {
-            if (!isCooldownRef.current) {
+            if (!isOnCooldownRef.current) {
                 func(...args);
-                isCooldownRef.current = true;
+                isOnCooldownRef.current = true;
                 timeoutRef.current = window.setTimeout(() => {
-                    isCooldownRef.current = false;
+                    isOnCooldownRef.current = false;
+
+                    if (lastArgsRef.current) {
+                        const args = lastArgsRef.current;
+                        lastArgsRef.current = null;
+                        func(...args);
+                    }
                 }, delay);
+            } else {
+                lastArgsRef.current = args;
             }
         },
         [func, delay],