Fix TS strict mode: remove unused imports, fix Tooltip formatter types in CostAnalysis"

web/src/components/tabs/CostAnalysis.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useMemo } from "react";
 import {
-  LineChart, Line, XAxis, YAxis, CartesianGrid,
+  XAxis, YAxis, CartesianGrid,
   Tooltip, ResponsiveContainer, Legend,
   AreaChart, Area,
 } from "recharts";
@@ -25,7 +25,7 @@ export function CostAnalysis() {
   const graphragCostPerQ = (2200 / 1000) * model.inputPer1k + (200 / 1000) * model.outputPer1k;
 
   const cumulativeData = useMemo(() => {
-    const points = [];
+    const points: { queries: number; Baseline: number; GraphRAG: number }[] = [];
     const step = Math.max(Math.floor(numQueries / 50), 1);
     for (let q = 0; q <= numQueries; q += step) {
       points.push({
@@ -41,31 +41,22 @@ export function CostAnalysis() {
     <div>
       {/* Controls */}
       <div className="card mb-6">
-        <div className="display-sm mb-4">Cost & Token Projections</div>
+        <div className="display-sm mb-4">Cost &amp; Token Projections</div>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
           <div>
             <label className="caption">Number of Queries</label>
-            <input
-              type="range"
-              min={100}
-              max={100000}
-              step={100}
-              value={numQueries}
-              onChange={(e) => setNumQueries(+e.target.value)}
-              className="w-full mt-2 accent-[#FF6B00]"
-            />
+            <input type="range" min={100} max={100000} step={100}
+              value={numQueries} onChange={(e) => setNumQueries(+e.target.value)}
+              className="w-full mt-2 accent-[#FF6B00]" />
             <div className="body-sm font-mono mt-1">{numQueries.toLocaleString()}</div>
           </div>
           <div>
             <label className="caption">LLM Model</label>
             <div className="flex flex-wrap gap-2 mt-2">
               {MODELS.map((m, i) => (
-                <button
-                  key={m.id}
+                <button key={m.id}
                   className={i === modelIdx ? "badge-orange" : "badge-outline cursor-pointer"}
-                  onClick={() => setModelIdx(i)}
-                  style={{ fontSize: "0.75rem" }}
-                >
+                  onClick={() => setModelIdx(i)} style={{ fontSize: "0.75rem" }}>
                   {m.label}
                 </button>
               ))}
@@ -86,9 +77,9 @@ export function CostAnalysis() {
         {[
           { label: "Cost/Query (Baseline)", value: "$" + baselineCostPerQ.toFixed(6), color: "#0072CE" },
           { label: "Cost/Query (GraphRAG)", value: "$" + graphragCostPerQ.toFixed(6), color: "#FF6B00" },
-          { label: `Total (${(numQueries / 1000).toFixed(0)}K)`, value: "$" + (baselineCostPerQ * numQueries).toFixed(2), sub: "Baseline", color: "#0072CE" },
-          { label: `Total (${(numQueries / 1000).toFixed(0)}K)`, value: "$" + (graphragCostPerQ * numQueries).toFixed(2), sub: "GraphRAG", color: "#FF6B00" },
-          { label: "Annual (1K qpd)", value: "$" + (graphragCostPerQ * 1000 * 365).toFixed(0), sub: "GraphRAG", color: "#cc785c" },
+          { label: `Total (${(numQueries / 1000).toFixed(0)}K)`, value: "$" + (baselineCostPerQ * numQueries).toFixed(2), color: "#0072CE" },
+          { label: `Total (${(numQueries / 1000).toFixed(0)}K)`, value: "$" + (graphragCostPerQ * numQueries).toFixed(2), color: "#FF6B00" },
+          { label: "Annual (1K qpd)", value: "$" + (graphragCostPerQ * 1000 * 365).toFixed(0), color: "#cc785c" },
         ].map((m, i) => (
           <div key={i} className="card-cream" style={{ padding: "16px", textAlign: "center" }}>
             <div className="metric-value-sm" style={{ color: m.color, fontSize: "1.125rem" }}>{m.value}</div>
@@ -99,9 +90,7 @@ export function CostAnalysis() {
 
       {/* Cumulative Cost Chart */}
       <div className="card mb-6">
-        <div className="title-md mb-4">
-          Cumulative Cost — {model.label}
-        </div>
+        <div className="title-md mb-4">Cumulative Cost — {model.label}</div>
         <ResponsiveContainer width="100%" height={380}>
           <AreaChart data={cumulativeData} margin={{ top: 10, right: 30, left: 10, bottom: 0 }}>
             <defs>
@@ -115,16 +104,11 @@ export function CostAnalysis() {
               </linearGradient>
             </defs>
             <CartesianGrid strokeDasharray="3 3" stroke="#002B49" strokeOpacity={0.06} />
-            <XAxis
-              dataKey="queries"
-              tick={{ fill: "#6c6a64", fontSize: 11 }}
-              tickFormatter={(v: number) => (v >= 1000 ? `${v / 1000}K` : v.toString())}
-            />
-            <YAxis tick={{ fill: "#6c6a64", fontSize: 11 }} tickFormatter={(v: number) => `$${v}`} />
-            <Tooltip
-              contentStyle={{ background: "#faf9f5", border: "1px solid #e6dfd8", borderRadius: "8px" }}
-              formatter={(v: number) => [`$${v.toFixed(4)}`, undefined]}
-            />
+            <XAxis dataKey="queries" tick={{ fill: "#6c6a64", fontSize: 11 }}
+              tickFormatter={(v) => (Number(v) >= 1000 ? `${Number(v) / 1000}K` : String(v))} />
+            <YAxis tick={{ fill: "#6c6a64", fontSize: 11 }}
+              tickFormatter={(v) => `$${v}`} />
+            <Tooltip contentStyle={{ background: "#faf9f5", border: "1px solid #e6dfd8", borderRadius: "8px" }} />
             <Legend />
             <Area type="monotone" dataKey="Baseline" stroke="#0072CE" strokeWidth={2.5} fill="url(#baselineGrad)" />
             <Area type="monotone" dataKey="GraphRAG" stroke="#FF6B00" strokeWidth={2.5} fill="url(#graphragGrad)" />
@@ -141,7 +125,8 @@ export function CostAnalysis() {
           The Adaptive Router eliminates this overhead for simple queries by routing them to Baseline RAG —
           achieving the best of both worlds.
         </p>
-        <button className="btn btn-on-dark mt-4" onClick={() => document.getElementById("live")?.scrollIntoView({ behavior: "smooth" })}>
+        <button className="btn btn-on-dark mt-4"
+          onClick={() => document.getElementById("live")?.scrollIntoView({ behavior: "smooth" })}>
           Try Adaptive Routing →
         </button>
       </div>