fix(analytics): fix 8 frontend UX issues — routing, accessibility, error states, sort indicators
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
BarChart3, Clock, Star, CheckCircle2, ArrowUpRight,
|
||||
AlertTriangle, Lightbulb, Loader2, Ticket,
|
||||
AlertTriangle, Lightbulb, Loader2, Ticket, RotateCcw,
|
||||
} from 'lucide-react'
|
||||
import {
|
||||
AreaChart, Area, BarChart, Bar,
|
||||
@@ -55,6 +55,12 @@ export default function FlowPilotAnalyticsPage() {
|
||||
const [psaData, setPsaData] = useState<EnhancedPsaMetrics | null>(null)
|
||||
const [psaLoading, setPsaLoading] = useState(false)
|
||||
|
||||
// Error states per tab
|
||||
const [coverageError, setCoverageError] = useState(false)
|
||||
const [qualityError, setQualityError] = useState(false)
|
||||
const [psaError, setPsaError] = useState(false)
|
||||
const [retryKey, setRetryKey] = useState(0)
|
||||
|
||||
// Track which period each tab was loaded for
|
||||
const coveragePeriodRef = useRef<string | null>(null)
|
||||
const qualityPeriodRef = useRef<string | null>(null)
|
||||
@@ -81,41 +87,59 @@ export default function FlowPilotAnalyticsPage() {
|
||||
setCoverageData(null)
|
||||
setQualityData(null)
|
||||
setPsaData(null)
|
||||
setCoverageLoading(true)
|
||||
setQualityLoading(true)
|
||||
setPsaLoading(true)
|
||||
setCoverageError(false)
|
||||
setQualityError(false)
|
||||
setPsaError(false)
|
||||
}, [period])
|
||||
|
||||
// Lazy-load tab data on tab switch or period change
|
||||
useEffect(() => {
|
||||
if (activeTab === 'coverage' && coveragePeriodRef.current !== period) {
|
||||
setCoverageLoading(true)
|
||||
setCoverageError(false)
|
||||
flowpilotAnalyticsApi.getCoverage(period)
|
||||
.then((data) => {
|
||||
setCoverageData(data)
|
||||
coveragePeriodRef.current = period
|
||||
})
|
||||
.catch(() => toast.error('Failed to load coverage data'))
|
||||
.catch(() => {
|
||||
toast.error('Failed to load coverage data')
|
||||
setCoverageError(true)
|
||||
})
|
||||
.finally(() => setCoverageLoading(false))
|
||||
}
|
||||
if (activeTab === 'quality' && qualityPeriodRef.current !== period) {
|
||||
setQualityLoading(true)
|
||||
setQualityError(false)
|
||||
flowpilotAnalyticsApi.getFlowQuality(period)
|
||||
.then((data) => {
|
||||
setQualityData(data)
|
||||
qualityPeriodRef.current = period
|
||||
})
|
||||
.catch(() => toast.error('Failed to load flow quality data'))
|
||||
.catch(() => {
|
||||
toast.error('Failed to load flow quality data')
|
||||
setQualityError(true)
|
||||
})
|
||||
.finally(() => setQualityLoading(false))
|
||||
}
|
||||
if (activeTab === 'psa' && psaPeriodRef.current !== period) {
|
||||
setPsaLoading(true)
|
||||
setPsaError(false)
|
||||
flowpilotAnalyticsApi.getPsaMetrics(period)
|
||||
.then((data) => {
|
||||
setPsaData(data)
|
||||
psaPeriodRef.current = period
|
||||
})
|
||||
.catch(() => toast.error('Failed to load PSA metrics'))
|
||||
.catch(() => {
|
||||
toast.error('Failed to load PSA metrics')
|
||||
setPsaError(true)
|
||||
})
|
||||
.finally(() => setPsaLoading(false))
|
||||
}
|
||||
}, [activeTab, period])
|
||||
}, [activeTab, period, retryKey])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -165,7 +189,7 @@ export default function FlowPilotAnalyticsPage() {
|
||||
</div>
|
||||
|
||||
{/* Tab bar */}
|
||||
<div className="flex gap-1 border-b border-border mb-6">
|
||||
<div className="flex gap-1 border-b border-border">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
@@ -386,49 +410,43 @@ export default function FlowPilotAnalyticsPage() {
|
||||
|
||||
{activeTab === 'coverage' && (
|
||||
<div>
|
||||
{coverageLoading ? (
|
||||
{coverageError ? (
|
||||
<ErrorRetry label="coverage data" onRetry={() => { setCoverageError(false); coveragePeriodRef.current = null; setRetryKey((k) => k + 1) }} />
|
||||
) : coverageLoading ? (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : coverageData ? (
|
||||
<CoverageHeatmap data={coverageData} />
|
||||
) : (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<p className="text-sm text-muted-foreground">No coverage data available</p>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'quality' && (
|
||||
<div>
|
||||
{qualityLoading ? (
|
||||
{qualityError ? (
|
||||
<ErrorRetry label="flow quality data" onRetry={() => { setQualityError(false); qualityPeriodRef.current = null; setRetryKey((k) => k + 1) }} />
|
||||
) : qualityLoading ? (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : qualityData ? (
|
||||
<FlowQualityTable data={qualityData} />
|
||||
) : (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<p className="text-sm text-muted-foreground">No flow quality data available</p>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'psa' && (
|
||||
<div>
|
||||
{psaLoading ? (
|
||||
{psaError ? (
|
||||
<ErrorRetry label="PSA metrics" onRetry={() => { setPsaError(false); psaPeriodRef.current = null; setRetryKey((k) => k + 1) }} />
|
||||
) : psaLoading ? (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : psaData ? (
|
||||
<PsaMetricsPanel data={psaData} />
|
||||
) : (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<p className="text-sm text-muted-foreground">No PSA data available</p>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -498,6 +516,22 @@ function ConfidenceTierRow({
|
||||
)
|
||||
}
|
||||
|
||||
function ErrorRetry({ label, onRetry }: { label: string; onRetry: () => void }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<AlertTriangle size={24} className="mb-2 text-amber-400" />
|
||||
<p className="text-sm mb-3">Failed to load {label}</p>
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
|
||||
>
|
||||
<RotateCcw size={12} />
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function GapCard({ gap }: { gap: KnowledgeGap }) {
|
||||
const severityStyle = SEVERITY_STYLES[gap.severity as keyof typeof SEVERITY_STYLES] ?? SEVERITY_STYLES.low
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user