+>(({ className, ...props }, ref) => (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/src/frontend-viz/src/context/ChartContext.tsx b/src/frontend-viz/src/context/ChartContext.tsx
new file mode 100644
index 0000000..5c6558b
--- /dev/null
+++ b/src/frontend-viz/src/context/ChartContext.tsx
@@ -0,0 +1,72 @@
+import React, { createContext, useContext, useState } from 'react';
+
+interface ChartContextProps {
+ batchesPerSecond: number;
+ setBatchesPerSecond: (value: number) => void;
+ chartSize: number;
+ setChartSize: (value: number) => void;
+ signalsOn: boolean[];
+ toggleSignal: (index: number) => void;
+ selectedChart: string;
+ setSelectedChart: (value: string) => void;
+ isStreaming: boolean;
+ setIsStreaming: (value: boolean) => void;
+ trackFps: boolean;
+ setTrackFps: (value: boolean) => void;
+}
+
+// Create the context
+const ChartContext = createContext(undefined);
+
+// Create a provider component
+export const ChartProvider: React.FC<{ children: React.ReactNode }> = ({
+ children,
+}) => {
+ const [batchesPerSecond, setBatchesPerSecond] = useState(30); // Default value
+ const [chartSize, setChartSize] = useState(30); // Default value
+ const [signalsOn, setSignalsOn] = useState([
+ true,
+ true,
+ true,
+ true,
+ true,
+ ]);
+ const [selectedChart, setSelectedChart] = useState('sync');
+ const [isStreaming, setIsStreaming] = useState(false);
+ const [trackFps, setTrackFps] = useState(false);
+
+ const toggleSignal = (index: number) => {
+ setSignalsOn((prevSignals) =>
+ prevSignals.map((signal, i) => (i === index ? !signal : signal))
+ );
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useChartContext = () => {
+ const context = useContext(ChartContext);
+ if (!context) {
+ throw new Error('useChartContext must be used within a ChartProvider');
+ }
+ return context;
+};
diff --git a/src/frontend-viz/src/hooks/useRenderTracker.ts b/src/frontend-viz/src/hooks/useRenderTracker.ts
new file mode 100644
index 0000000..5579b9d
--- /dev/null
+++ b/src/frontend-viz/src/hooks/useRenderTracker.ts
@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from 'react';
+
+export default function useRenderTracker(dependencies: any[]) {
+ const [fps, setFps] = useState(0);
+ const lastRenderTime = useRef(performance.now());
+
+ useEffect(() => {
+ const now = performance.now();
+ const delta = now - lastRenderTime.current;
+
+ // update fps using (last render time - current render time)
+ if (delta > 0) {
+ setFps(1000 / delta); // delta in ms
+ }
+
+ lastRenderTime.current = now;
+ }, dependencies);
+
+ return Math.round(fps);
+}
diff --git a/src/frontend-viz/src/hooks/useWebsocket.ts b/src/frontend-viz/src/hooks/useWebsocket.ts
new file mode 100644
index 0000000..e8c424b
--- /dev/null
+++ b/src/frontend-viz/src/hooks/useWebsocket.ts
@@ -0,0 +1,44 @@
+import { useEffect, useState, useRef } from 'react';
+import { SignalData } from '@/types/schema';
+
+export default function useWebsocket(
+ chartSize: number,
+ batchesPerSecond: number,
+ isStreaming: boolean
+) {
+ const [renderData, setRenderData] = useState([]); // batch data here
+ const bufferRef = useRef([]); // all data here
+ const intervalTime = 1000 / batchesPerSecond;
+
+ useEffect(() => {
+ if (!isStreaming) return;
+
+ const ws = new WebSocket('ws://localhost:8080');
+
+ ws.onmessage = (event) => {
+ const parsedData: SignalData = JSON.parse(event.data);
+ bufferRef.current.push(parsedData);
+ };
+
+ const updateRenderData = () => {
+ if (bufferRef.current.length > 0) {
+ const nextBatch = bufferRef.current.splice(
+ 0,
+ Math.min(bufferRef.current.length, chartSize)
+ );
+ setRenderData((prevData) =>
+ [...prevData, ...nextBatch].slice(-chartSize)
+ );
+ }
+ };
+
+ const intervalId = setInterval(updateRenderData, intervalTime);
+
+ return () => {
+ ws.close();
+ clearInterval(intervalId);
+ };
+ }, [chartSize, batchesPerSecond, isStreaming]); // re-run when either parameter changes
+
+ return { renderData };
+}
diff --git a/src/frontend-viz/src/lib/chart-utils.ts b/src/frontend-viz/src/lib/chart-utils.ts
new file mode 100644
index 0000000..0152cce
--- /dev/null
+++ b/src/frontend-viz/src/lib/chart-utils.ts
@@ -0,0 +1,14 @@
+import { SignalData, Props } from '@/types/schema';
+
+export function rechartsProcessing(renderData: SignalData[]): Props[] {
+ if (!renderData) return [];
+
+ return renderData.map((entry: SignalData) => ({
+ time: new Date(entry.time).toLocaleTimeString(),
+ signal1: entry.signals[0] || 0,
+ signal2: entry.signals[1] || 0,
+ signal3: entry.signals[2] || 0,
+ signal4: entry.signals[3] || 0,
+ signal5: entry.signals[4] || 0,
+ }));
+}
diff --git a/src/frontend-viz/src/lib/utils.ts b/src/frontend-viz/src/lib/utils.ts
new file mode 100644
index 0000000..3877c89
--- /dev/null
+++ b/src/frontend-viz/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/frontend-viz/src/types/schema.ts b/src/frontend-viz/src/types/schema.ts
new file mode 100644
index 0000000..2bc659f
--- /dev/null
+++ b/src/frontend-viz/src/types/schema.ts
@@ -0,0 +1,19 @@
+export interface SignalData {
+ time: string;
+ signal1: number;
+ signal2: number;
+ signal3: number;
+ signal4: number;
+ signal5: number;
+}
+
+export interface ChartProps {
+ renderData: SignalData[];
+}
+
+export interface SlidersProps {
+ batchesPerSecond: number;
+ setBatchesPerSecond: (value: number) => void;
+ chartSize: number;
+ setChartSize: (value: number) => void;
+}
diff --git a/src/frontend-viz/tailwind.config.ts b/src/frontend-viz/tailwind.config.ts
new file mode 100644
index 0000000..baee7d2
--- /dev/null
+++ b/src/frontend-viz/tailwind.config.ts
@@ -0,0 +1,66 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+ darkMode: ['class'],
+ content: [
+ './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: ['var(--font-inter)', 'sans-serif'],
+ },
+ colors: {
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))',
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))',
+ },
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))',
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))',
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))',
+ },
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ chart: {
+ '1': 'hsl(var(--chart-1))',
+ '2': 'hsl(var(--chart-2))',
+ '3': 'hsl(var(--chart-3))',
+ '4': 'hsl(var(--chart-4))',
+ '5': 'hsl(var(--chart-5))',
+ },
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ },
+ },
+ },
+ plugins: [require('tailwindcss-animate')],
+};
+export default config;
diff --git a/src/frontend-viz/tsconfig.json b/src/frontend-viz/tsconfig.json
new file mode 100644
index 0000000..7b28589
--- /dev/null
+++ b/src/frontend-viz/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
|