refactor: update component definitions to function syntax

- Changed React component definitions from arrow functions to function declarations for ActionInsightsPanel, FilteringPanel, EpisodeLengthHistogram, Card, and StatsPanel for consistency and improved readability.
- Replaced hardcoded delimiter in shortName function with CHART_CONFIG.SERIES_NAME_DELIMITER for better maintainability.

src/components/action-insights-panel.tsx

@@ -10,6 +10,8 @@ import {
   ResponsiveContainer,
   Tooltip,
 } from "recharts";
+import { useFlaggedEpisodes } from "@/context/flagged-episodes-context";
+import { CHART_CONFIG } from "@/utils/constants";
 import type {
   CrossEpisodeVarianceData,
   AggVelocityStat,
@@ -18,9 +20,6 @@ import type {
   JerkyEpisode,
   AggAlignment,
 } from "@/app/[org]/[dataset]/[episode]/fetch-data";
-import { useFlaggedEpisodes } from "@/context/flagged-episodes-context";
-
-const DELIMITER = " | ";
 
 const FullscreenCtx = React.createContext(false);
 const useIsFullscreen = () => React.useContext(FullscreenCtx);
@@ -207,7 +206,7 @@ const COLORS = [
 ];
 
 function shortName(key: string): string {
-  const parts = key.split(DELIMITER);
+  const parts = key.split(CHART_CONFIG.SERIES_NAME_DELIMITER);
   return parts.length > 1 ? parts[parts.length - 1] : key;
 }
 
@@ -1452,12 +1451,12 @@ interface ActionInsightsPanelProps {
   crossEpisodeLoading: boolean;
 }
 
-const ActionInsightsPanel: React.FC<ActionInsightsPanelProps> = ({
+function ActionInsightsPanel({
   flatChartData,
   fps,
   crossEpisodeData,
   crossEpisodeLoading,
-}) => {
+}: ActionInsightsPanelProps) {
   const [mode, setMode] = useState<"episode" | "dataset">("dataset");
   const showAgg = mode === "dataset" && !!crossEpisodeData;
 
@@ -1531,7 +1530,7 @@ const ActionInsightsPanel: React.FC<ActionInsightsPanelProps> = ({
       </FullscreenWrapper>
     </div>
   );
-};
+}
 
 export default ActionInsightsPanel;
 export { ActionVelocitySection, FullscreenWrapper };

src/components/filtering-panel.tsx

@@ -349,14 +349,14 @@ function FlaggedIdsCopyBar({
   );
 }
 
-const FilteringPanel: React.FC<FilteringPanelProps> = ({
+function FilteringPanel({
   repoId,
   crossEpisodeData,
   crossEpisodeLoading,
   episodeLengthStats,
   flatChartData,
   onViewFlaggedEpisodes,
-}) => {
+}: FilteringPanelProps) {
   return (
     <div className="max-w-5xl mx-auto py-6 space-y-8">
       <div>
@@ -417,6 +417,6 @@ const FilteringPanel: React.FC<FilteringPanelProps> = ({
       </FullscreenWrapper>
     </div>
   );
-};
+}
 
 export default FilteringPanel;

src/components/stats-panel.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React from "react";
 import type {
   DatasetDisplayInfo,
   EpisodeLengthStats,
@@ -22,9 +21,11 @@ function formatTotalTime(totalFrames: number, fps: number): string {
 }
 
 /** SVG bar chart for the episode-length histogram */
-const EpisodeLengthHistogram: React.FC<{
+function EpisodeLengthHistogram({
+  data,
+}: {
   data: { binLabel: string; count: number }[];
-}> = ({ data }) => {
+}) {
   if (data.length === 0) return null;
   const maxCount = Math.max(...data.map((d) => d.count));
   if (maxCount === 0) return null;
@@ -99,23 +100,22 @@ const EpisodeLengthHistogram: React.FC<{
       </svg>
     </div>
   );
-};
-
-const Card: React.FC<{ label: string; value: string | number }> = ({
-  label,
-  value,
-}) => (
-  <div className="bg-slate-800/60 rounded-lg p-4 border border-slate-700">
-    <p className="text-xs text-slate-400 uppercase tracking-wide">{label}</p>
-    <p className="text-xl font-bold tabular-nums mt-1">{value}</p>
-  </div>
-);
-
-const StatsPanel: React.FC<StatsPanelProps> = ({
+}
+
+function Card({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="bg-slate-800/60 rounded-lg p-4 border border-slate-700">
+      <p className="text-xs text-slate-400 uppercase tracking-wide">{label}</p>
+      <p className="text-xl font-bold tabular-nums mt-1">{value}</p>
+    </div>
+  );
+}
+
+function StatsPanel({
   datasetInfo,
   episodeLengthStats,
   loading,
-}) => {
+}: StatsPanelProps) {
   const els = episodeLengthStats;
 
   return (
@@ -236,6 +236,6 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
       )}
     </div>
   );
-};
+}
 
 export default StatsPanel;