chore: Fix the type errors

Author: lewisjared

frontend/src/components/execution/values/boxWhiskerShape.tsx

@@ -1,6 +1,6 @@
 import { scaleLinear } from "d3-scale";
 import { Cross } from "recharts";
-import type { ProcessedGroupedDataEntry } from "@/components/execution/values/types.ts";
+import type { ProcessedGroupedDataEntry } from "./types";
 
 interface BoxWhiskerShapeProps {
   prefix: string;
@@ -38,8 +38,14 @@ export function BoxWhiskerShape({
     return null; // Don't render if data or scale is missing
   }
 
-  const { min, lowerQuartile, median, upperQuartile, max, values } =
-    payload.groups[prefix];
+  const {
+    min,
+    lowerQuartile,
+    median,
+    upperQuartile,
+    max,
+    values,
+  } = payload.groups[prefix];
 
   // Calculate pixel coordinates for each value
   const scale = scaleLinear(yDomain, [props.background?.height, 0]);
@@ -54,7 +60,7 @@ export function BoxWhiskerShape({
   const boxX = x; // Box starts at the calculated x
 
   function scatterValues(color: string, strokeWidth = 1) {
-    return values.map((v) => (
+    return values.map((v: number) => (
       <Cross
         key={v}
         strokeWidth={strokeWidth}

frontend/src/components/execution/values/filterAddPopover.tsx

@@ -1,6 +1,6 @@
 import { PlusCircle } from "lucide-react";
 import { type ComponentProps, useEffect, useState } from "react";
-import type { Facet } from "@/client/types.gen";
+import { Facet } from "@/components/execution/values/types";
 import { Button } from "@/components/ui/button.tsx";
 import { Label } from "@/components/ui/label.tsx";
 import {

frontend/src/components/execution/values/filterControls.tsx

@@ -1,7 +1,7 @@
 import type { RowSelectionState } from "@tanstack/react-table";
 import { PlusCircle, X } from "lucide-react";
 import type { Dispatch, SetStateAction } from "react";
-import type { Facet } from "@/client";
+import { Facet } from "@/components/execution/values/types";
 import { FilterAddPopover } from "@/components/execution/values/filterAddPopover.tsx";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";

frontend/src/components/execution/values/groupedBoxWhiskerChart.tsx

@@ -13,7 +13,7 @@ import type {
   BoxPlot,
   GroupedRawDataEntry,
   ProcessedGroupedDataEntry,
-} from "./types.ts"; // Import new types
+} from "./types"; // Import new types
 
 // Helper to generate distinct colors (replace with a proper palette if needed)
 const defaultColors = [
@@ -55,7 +55,6 @@ export const calculateBoxPlotData = (values: number[]): BoxPlot => {
 
   const min = sortedData[0];
   const max = sortedData[n - 1];
-  const average = sortedData.reduce((a, b) => a + b, 0) / n;
 
   const median = calculateMedian(sortedData);
 
@@ -82,8 +81,7 @@ export const calculateBoxPlotData = (values: number[]): BoxPlot => {
     median,
     upperQuartile,
     max,
-    average,
-    values,
+    values: sortedData, // Add values back to BoxPlot
   };
 };
 
@@ -115,7 +113,7 @@ export const GroupedBoxWhiskerChart = ({
   const processedData = useMemo((): ProcessedGroupedDataEntry[] => {
     return data.map((entry) => {
       const processedEntry: ProcessedGroupedDataEntry = {
-        category: entry.category,
+        name: entry.name,
         groups: {},
       };
       for (const group of entry.groups) {
@@ -174,7 +172,7 @@ export const GroupedBoxWhiskerChart = ({
           // barGap={4} // Gap between bars within the same category
         >
           <CartesianGrid strokeDasharray="3 3" vertical={false} />
-          <XAxis dataKey="category" />
+          <XAxis dataKey="name" />
           <YAxis domain={yDomain} allowDataOverflow={true} />
           {/*<Tooltip*/}
           {/*  content={<CustomGroupedTooltip groupMeta={groupMeta} />}*/}
@@ -186,7 +184,7 @@ export const GroupedBoxWhiskerChart = ({
             <Bar
               key={groupName}
               dataKey={(d: ProcessedGroupedDataEntry) => {
-                return d.groups[groupName]?.average;
+                return d.groups[groupName]?.median;
               }}
               name={groupName}
               fill={groupMeta.colors[groupName]}

frontend/src/components/execution/values/types.ts

@@ -16,3 +16,22 @@ export type MetricValueCollection = {
   count: number;
   facets: Facet[];
 };
+
+export type BoxPlot = {
+  min: number;
+  lowerQuartile: number;
+  median: number;
+  upperQuartile: number;
+  max: number;
+  values: number[];
+};
+
+export type GroupedRawDataEntry = {
+  name: string;
+  groups: { label: string; values: number[] }[];
+};
+
+export type ProcessedGroupedDataEntry = {
+  name: string;
+  groups: { [key: string]: BoxPlot };
+};

frontend/src/components/execution/values/valuesDataTable.tsx

@@ -11,7 +11,7 @@ import {
 } from "@tanstack/react-table";
 import { Eye, MoreHorizontal } from "lucide-react";
 import { useMemo, useState } from "react";
-import type { Facet, MetricValue } from "@/client";
+import { Facet, MetricValue } from "@/components/execution/values/types";
 import { DataTableColumnHeader } from "@/components/dataTable/columnHeader.tsx";
 import { InnerDataTable } from "@/components/dataTable/innerDataTable.tsx";
 import { Button } from "@/components/ui/button.tsx";

frontend/src/components/execution/values/valuesFigure.tsx

@@ -1,7 +1,6 @@
 import { Axis3D, Download, Group } from "lucide-react";
 import { useMemo, useState } from "react";
-import type { Facet, MetricValue } from "@/client";
-import type { GroupedRawDataEntry } from "@/components/execution/values/types.ts";
+import type { Facet, MetricValue, GroupedRawDataEntry } from "@/components/execution/values/types";
 import { Button } from "@/components/ui/button.tsx";
 import { FacetSelect } from "./facetSelect";
 import { GroupedBoxWhiskerChart } from "./groupedBoxWhiskerChart";
@@ -33,7 +32,6 @@ export function ValuesFigure({
     }
 
     const chartData: GroupedRawDataEntry[] = xFacet.values.map((x) => {
-      /// Find the values for a given x-axis group
       const matches = values
         .filter(
           (value) =>
@@ -53,7 +51,7 @@ export function ValuesFigure({
       }));
 
       return {
-        category: x,
+        name: x,
         groups,
       };
     });

frontend/src/hooks/useValuesProcessor.ts

@@ -1,6 +1,6 @@
 import type { RowSelectionState } from "@tanstack/react-table";
 import { type SetStateAction, useMemo, useState } from "react";
-import type { MetricValue } from "@/client";
+import type { MetricValue } from "@/components/execution/values/types";
 
 // Define types used by the hook
 export type ProcessedMetricValue = MetricValue & { rowId: string };