Modularize risk console UI components

Author: adit24dhaya

web/components/risk-console.tsx

@@ -0,0 +1,114 @@
+import { AlertTriangle, BarChart3, Brain, CheckCircle2 } from "lucide-react";
+import { useMemo } from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { featureLabel, formatFeatureValue } from "@/lib/labels";
+import type { PredictionResult } from "@/types/healthcare";
+
+import { DataTable, NarrativePanel, PanelHeading } from "./shared-ui";
+import type { ChartFeature } from "./types";
+
+export function Assessment({ result }: { result: PredictionResult }) {
+  const topFeatures = useMemo(() => {
+    return result.feature_explanation.features
+      .slice()
+      .sort((a, b) => b.magnitude - a.magnitude)
+      .slice(0, 8)
+      .map((feature) => ({
+        ...feature,
+        label: featureLabel(feature.feature),
+        valueLabel: formatFeatureValue(feature.feature, feature.value),
+        directionLabel: feature.impact > 0 ? "Raises risk" : "Lowers risk",
+      }));
+  }, [result.feature_explanation.features]);
+
+  return (
+    <section className="grid gap-5 xl:grid-cols-[0.95fr_1.05fr]">
+      <div className="space-y-5">
+        <NarrativePanel title="Explanation" icon={<Brain className="h-4 w-4" />} text={result.explanation} />
+        <NarrativePanel
+          title="Recommendation"
+          icon={<CheckCircle2 className="h-4 w-4" />}
+          text={result.recommendation}
+        />
+        {result.safety.alerts.length > 0 ? (
+          <div className="rounded-lg border border-danger/40 bg-danger/10 p-4 text-sm text-[#ffc1bc]">
+            <div className="mb-2 flex items-center gap-2 font-semibold text-ink">
+              <AlertTriangle className="h-4 w-4 text-danger" />
+              Safety Alerts
+            </div>
+            <ul className="space-y-1">
+              {result.safety.alerts.map((alert) => (
+                <li key={alert}>{alert}</li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+      </div>
+      <FeatureImpactPanel features={topFeatures} method={result.feature_explanation.method} />
+    </section>
+  );
+}
+
+function FeatureImpactPanel({ features, method }: { features: ChartFeature[]; method: string }) {
+  return (
+    <div className="console-panel rounded-lg p-5">
+      <PanelHeading icon={<BarChart3 className="h-4 w-4" />} title="Feature Impact" />
+      <div className="mt-4 h-80">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={features} layout="vertical" margin={{ top: 8, right: 18, bottom: 8, left: 28 }}>
+            <CartesianGrid stroke="rgba(255,255,255,0.08)" horizontal={false} />
+            <XAxis type="number" stroke="#9aa4b2" tickLine={false} axisLine={false} />
+            <YAxis
+              type="category"
+              dataKey="label"
+              width={135}
+              stroke="#9aa4b2"
+              tickLine={false}
+              axisLine={false}
+              tick={{ fontSize: 12 }}
+            />
+            <Tooltip
+              cursor={{ fill: "rgba(255,255,255,0.04)" }}
+              formatter={(value) => [Number(value).toFixed(4), "Impact"]}
+              contentStyle={{
+                background: "#101318",
+                border: "1px solid rgba(255,255,255,0.1)",
+                borderRadius: 8,
+              }}
+            />
+            <ReferenceLine x={0} stroke="rgba(244,246,248,0.45)" strokeDasharray="3 3" />
+            <Bar dataKey="impact" radius={[0, 4, 4, 0]}>
+              {features.map((feature) => (
+                <Cell key={feature.feature} fill={feature.impact >= 0 ? "#d05245" : "#2f9b6a"} />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+      <div className="mt-4 flex items-center justify-between gap-3 text-xs text-muted">
+        <span>Method: {method}</span>
+        <span>Top {features.length} by absolute impact</span>
+      </div>
+      <DataTable
+        rows={features.map((feature) => ({
+          Feature: feature.label,
+          Value: feature.valueLabel,
+          Direction: feature.directionLabel,
+          Impact: feature.impact.toFixed(4),
+        }))}
+        compact
+      />
+    </div>
+  );
+}

web/components/risk-console/assessment.tsx

@@ -0,0 +1,27 @@
+import type { PatientInput } from "@/types/healthcare";
+
+export const DEFAULT_INPUT: PatientInput = {
+  age: 45,
+  height_cm: 170,
+  weight_kg: 82.4,
+  bp: 130,
+  glucose: 180,
+  high_chol: false,
+  chol_check: true,
+  smoker: false,
+  stroke: false,
+  heart_disease_or_attack: false,
+  phys_activity: true,
+  fruits: true,
+  veggies: true,
+  heavy_alcohol_consump: false,
+  any_healthcare: true,
+  no_doc_bc_cost: false,
+  general_health: 3,
+  mental_health_days: 2,
+  physical_health_days: 2,
+  diff_walk: false,
+  sex: "female",
+  education: 5,
+  income: 5,
+};

web/components/risk-console/constants.ts

@@ -0,0 +1,20 @@
+import { Sparkles } from "lucide-react";
+
+export function EmptyState() {
+  return (
+    <div className="console-panel rounded-lg p-8">
+      <div className="flex max-w-2xl items-start gap-4">
+        <div className="rounded-md border border-borderSoft bg-info/10 p-3 text-info">
+          <Sparkles className="h-5 w-5" />
+        </div>
+        <div>
+          <h3 className="text-xl font-semibold">Ready for assessment</h3>
+          <p className="mt-2 text-sm leading-6 text-muted">
+            Fill in the patient profile and run the trained Kaggle artifact through the FastAPI
+            inference service.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

web/components/risk-console/empty-state.tsx

@@ -0,0 +1,45 @@
+import { Activity, Database } from "lucide-react";
+
+import type { PredictionResult } from "@/types/healthcare";
+
+import { DataTable, PanelHeading } from "./shared-ui";
+
+export function Evidence({ result }: { result: PredictionResult }) {
+  const contexts = result.retrieved_context ?? [];
+
+  return (
+    <section className="grid gap-5 xl:grid-cols-[1fr_0.9fr]">
+      <div className="console-panel rounded-lg p-5">
+        <PanelHeading icon={<Database className="h-4 w-4" />} title="Retrieved Medical Context" />
+        <div className="mt-4 space-y-3">
+          {contexts.length > 0 ? (
+            contexts.map((context) => (
+              <div key={context.title} className="rounded-md border border-borderSoft bg-canvas/40 p-4">
+                <div className="font-semibold text-ink">{context.title}</div>
+                <p className="mt-2 text-sm leading-6 text-muted">{context.text}</p>
+              </div>
+            ))
+          ) : (
+            <p className="text-sm text-muted">No medical context retrieved for this case.</p>
+          )}
+        </div>
+      </div>
+      <div className="console-panel rounded-lg p-5">
+        <PanelHeading icon={<Activity className="h-4 w-4" />} title="Similar Prior Cases" />
+        <DataTable
+          rows={result.similar_cases.map((item) => ({
+            Risk: item.metadata.risk ?? "—",
+            Probability:
+              typeof item.metadata.probability === "number"
+                ? `${(item.metadata.probability * 100).toFixed(1)}%`
+                : "—",
+            Age: item.metadata.age ?? "—",
+            BMI: item.metadata.bmi ?? "—",
+            BP: item.metadata.bp ?? "—",
+            Distance: item.distance.toFixed(3),
+          }))}
+        />
+      </div>
+    </section>
+  );
+}