salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stage 4-1

Browse Source
This commit is contained in:
alorig
2025-11-20 03:30:39 +05:00
parent 6c05adc990
commit ec3ca2da5d
7 changed files with 1304 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/linker/LinkResults.tsx
View File

@@ -23,6 +23,24 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
linksAdded,
linkerVersion,
}) => {
if (!links || links.length === 0) {
return (
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Linking Results</h3>
<div className="flex items-center gap-2">
<PlugInIcon className="w-5 h-5 text-blue-500" />
<span className="text-sm text-gray-600 dark:text-gray-400">Version {linkerVersion}</span>
</div>
</div>
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
<PlugInIcon className="w-12 h-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">No links found to add</p>
</div>
</div>
);
}
return (
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div className="flex items-center justify-between mb-4">
@@ -51,14 +69,14 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
<ul className="space-y-2">
{links.filter(l => l.cluster_match).map((link, index) => (
<li key={`cluster-${index}`} className="flex items-center gap-2 text-sm pl-2 border-l-2 border-blue-500">
<span className="text-gray-600 dark:text-gray-400">"{link.anchor_text}"</span>
<span className="text-gray-600 dark:text-gray-400">"{link.anchor_text || 'Untitled'}"</span>
<span className="text-gray-400">→</span>
<span className="text-blue-600 dark:text-blue-400">
Content #{link.target_content_id}
Content #{link.target_content_id || 'N/A'}
</span>
{link.relevance_score && (
{link.relevance_score !== undefined && (
<span className="text-xs text-gray-500 dark:text-gray-400">
(Score: {link.relevance_score})
(Score: {link.relevance_score.toFixed(1)})
</span>
)}
</li>
@@ -76,14 +94,14 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
<ul className="space-y-2">
{links.filter(l => !l.cluster_match || l.cluster_match === false).map((link, index) => (
<li key={`other-${index}`} className="flex items-center gap-2 text-sm">
<span className="text-gray-600 dark:text-gray-400">"{link.anchor_text}"</span>
<span className="text-gray-600 dark:text-gray-400">"{link.anchor_text || 'Untitled'}"</span>
<span className="text-gray-400">→</span>
<span className="text-blue-600 dark:text-blue-400">
Content #{link.target_content_id}
Content #{link.target_content_id || 'N/A'}
</span>
{link.relevance_score && (
{link.relevance_score !== undefined && (
<span className="text-xs text-gray-500 dark:text-gray-400">
(Score: {link.relevance_score})
(Score: {link.relevance_score.toFixed(1)})
</span>
)}
</li>

89
frontend/src/components/sites/SiteProgressWidget.tsx
View File

@@ -18,6 +18,8 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
const navigate = useNavigate();
const [progress, setProgress] = useState<SiteProgress | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [retryCount, setRetryCount] = useState(0);
useEffect(() => {
loadProgress();
@@ -26,27 +28,63 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
const loadProgress = async () => {
try {
setLoading(true);
setError(null);
const data = await fetchSiteProgress(blueprintId);
setProgress(data);
setRetryCount(0); // Reset retry count on success
} catch (error: any) {
console.error('Failed to load site progress:', error);
setError(error.message || 'Failed to load site progress. Please try again.');
setProgress(null);
} finally {
setLoading(false);
}
};
const handleRetry = () => {
setRetryCount(prev => prev + 1);
loadProgress();
};
if (loading) {
return (
<Card className="p-4">
<div className="text-center py-4 text-gray-500 dark:text-gray-400">
Loading progress...
<div className="text-center py-4">
<div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mb-2"></div>
<div className="text-gray-500 dark:text-gray-400">Loading progress...</div>
</div>
</Card>
);
}
if (error && !progress) {
return (
<Card className="p-4">
<div className="text-center py-4">
<AlertCircleIcon className="w-8 h-8 text-red-500 mx-auto mb-2" />
<div className="text-sm text-red-600 dark:text-red-400 mb-3">{error}</div>
<button
onClick={handleRetry}
disabled={retryCount >= 3}
className="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white rounded-lg text-sm font-medium transition-colors"
aria-label="Retry loading site progress"
>
{retryCount >= 3 ? 'Max retries reached' : 'Retry'}
</button>
</div>
</Card>
);
}
if (!progress) {
return null;
return (
<Card className="p-4">
<div className="text-center py-4 text-gray-500 dark:text-gray-400">
<AlertCircleIcon className="w-6 h-6 mx-auto mb-2 opacity-50" />
<p>No progress data available</p>
</div>
</Card>
);
}
const getStatusColor = (status: string) => {
@@ -76,16 +114,16 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
return (
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white" id="site-progress-title">
Site Progress: {progress.blueprint_name}
</h3>
<Badge color={getStatusColor(progress.overall_status)} size="sm">
<Badge color={getStatusColor(progress.overall_status)} size="sm" aria-label={`Status: ${progress.overall_status || 'Unknown'}`}>
{progress.overall_status ? progress.overall_status.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()) : 'Unknown'}
</Badge>
</div>
{/* Overall Stats */}
<div className="grid grid-cols-3 gap-4 mb-6">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
<div className="text-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{progress.cluster_coverage.covered_clusters}/{progress.cluster_coverage.total_clusters}
@@ -107,11 +145,12 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
</div>
{/* Cluster Progress */}
<div className="space-y-4">
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
<div className="space-y-4" aria-labelledby="cluster-coverage-title">
<h4 id="cluster-coverage-title" className="text-sm font-semibold text-gray-700 dark:text-gray-300">
Cluster Coverage
</h4>
{progress.cluster_coverage.details.map((cluster) => {
{progress.cluster_coverage.details && progress.cluster_coverage.details.length > 0 ? (
progress.cluster_coverage.details.map((cluster) => {
const totalPages = cluster.hub_pages + cluster.supporting_pages + cluster.attribute_pages;
const completionPercent = totalPages > 0 ? Math.min(100, (cluster.content_count / totalPages) * 100) : 0;
@@ -145,7 +184,8 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
</div>
<button
onClick={() => navigate(`/planner/clusters/${cluster.cluster_id}`)}
className="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1"
className="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1 transition-colors"
aria-label={`View cluster ${cluster.cluster_name}`}
>
View <ArrowRightIcon className="w-3 h-3" />
</button>
@@ -203,15 +243,21 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
)}
</div>
);
})}
})
) : (
<div className="text-center py-6 text-gray-500 dark:text-gray-400">
<AlertCircleIcon className="w-6 h-6 mx-auto mb-2 opacity-50" />
<p className="text-sm">No clusters found. Attach clusters to get started.</p>
</div>
)}
</div>
{/* Validation Flags Summary */}
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700" aria-labelledby="validation-status-title">
<h4 id="validation-status-title" className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
Validation Status
</h4>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="flex items-center gap-2">
{progress.validation_flags.clusters_attached ? (
<CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
@@ -251,11 +297,24 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<button
onClick={() => navigate(`/sites/builder/workflow/${blueprintId}`)}
className="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm font-medium transition-colors"
className="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
aria-label="Continue site builder workflow"
>
Continue Site Builder Workflow →
</button>
</div>
{/* Error banner if data loaded but has errors */}
{error && progress && (
<div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
<div className="flex items-start gap-2">
<AlertCircleIcon className="w-4 h-4 text-yellow-600 dark:text-yellow-400 mt-0.5 flex-shrink-0" />
<div className="text-xs text-yellow-800 dark:text-yellow-300">
Some data may be outdated. <button onClick={handleRetry} className="underline font-medium">Refresh</button>
</div>
</div>
</div>
)}
</Card>
);
}