Skip to content

Commit feeb78d

Browse files
Peiying Huameta-codesync[bot]
Peiying Hua
authored and
meta-codesync[bot]
committed
Fold each procedure in the Tritonparse new feature
Summary: Based on D90809663. Folded each procedure in the Tritonparse new feature to avoid the module being too long when large number of procedures are detected. Reviewed By: FindHao Differential Revision: D92777695 fbshipit-source-id: d26915984c9b2daf5ca3f2e431fa6b1353ea1cad
1 parent d6f8c8b commit feeb78d

File tree

1 file changed

+125
-111
lines changed

1 file changed

+125
-111
lines changed

‎website/src/pages/IRAnalysis.tsx‎

Lines changed: 125 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const IRAnalysis: React.FC<IRAnalysisProps> = ({ kernels, selectedKernel }) => {
1919
const [expandedPatterns, setExpandedPatterns] = useState<Record<string, boolean>>({});
2020
const [expandedMessages, setExpandedMessages] = useState<Record<string, boolean>>({});
2121
const [expandedModuleAttrs, setExpandedModuleAttrs] = useState<Record<string, boolean>>({});
22+
const [expandedProcedures, setExpandedProcedures] = useState<Record<string, boolean>>({});
2223

2324
if (kernels.length === 0) {
2425
return (
@@ -378,134 +379,147 @@ Check the specific conditions required for this procedure.`;
378379
const isPatternExpanded = expandedPatterns[name] || false;
379380
const isMessageExpanded = expandedMessages[name] || false;
380381
const isModuleAttrsExpanded = expandedModuleAttrs[name] || false;
382+
const isProcedureExpanded = expandedProcedures[name] || false;
381383
return (
382-
<div key={name} className="bg-white p-3 rounded border border-gray-200">
383-
<div className="flex items-center justify-between mb-2">
384-
<span className="font-medium text-gray-800">{name}</span>
384+
<div key={name} className="bg-white rounded border border-gray-200">
385+
{/* Foldable Header */}
386+
<button
387+
onClick={() => setExpandedProcedures(prev => ({ ...prev, [name]: !isProcedureExpanded }))}
388+
className="w-full p-3 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors"
389+
>
390+
<div className="flex items-center">
391+
<span className="mr-2 text-gray-500">{isProcedureExpanded ? "▼" : "▶"}</span>
392+
<span className="font-medium text-gray-800">{name}</span>
393+
</div>
385394
<span className={`inline-flex items-center px-2 py-1 rounded text-sm font-medium border ${display.color}`}>
386395
{display.icon} {checkResult.detected ? "Detected" : "Not Detected"}
387396
</span>
388-
</div>
389-
390-
{/* Key Parameters Grid (only shown when detected) */}
391-
{checkResult.detected && (
392-
<div className="grid grid-cols-[repeat(auto-fit,_minmax(120px,_1fr))] gap-3 mb-3 bg-gray-50 p-3 rounded border border-gray-100">
393-
{checkResult.num_warps !== null && checkResult.num_warps !== undefined && (
394-
<div className="flex flex-col">
395-
<span className="text-xs font-medium text-gray-500">Warps</span>
396-
<span className="font-mono text-sm">{checkResult.num_warps}</span>
397-
</div>
398-
)}
399-
{checkResult.num_stages !== null && checkResult.num_stages !== undefined && (
400-
<div className="flex flex-col">
401-
<span className="text-xs font-medium text-gray-500">Stages</span>
402-
<span className="font-mono text-sm">{checkResult.num_stages}</span>
403-
</div>
404-
)}
405-
{checkResult.num_pp_clusters !== null && checkResult.num_pp_clusters !== undefined && (
406-
<div className="flex flex-col">
407-
<span className="text-xs font-medium text-gray-500">PP Clusters</span>
408-
<span className="font-mono text-sm">{checkResult.num_pp_clusters}</span>
409-
</div>
410-
)}
411-
{checkResult.cond_barrier_count !== null && checkResult.cond_barrier_count !== undefined && (
412-
<div className="flex flex-col">
413-
<span className="text-xs font-medium text-gray-500">Cond Barriers</span>
414-
<span className="font-mono text-sm">{checkResult.cond_barrier_count}</span>
415-
</div>
416-
)}
417-
{checkResult.setprio_count !== null && checkResult.setprio_count !== undefined && (
418-
<div className="flex flex-col">
419-
<span className="text-xs font-medium text-gray-500">SetPrio Ops</span>
420-
<span className="font-mono text-sm">{checkResult.setprio_count}</span>
421-
</div>
422-
)}
423-
{checkResult.dot_count !== null && checkResult.dot_count !== undefined && (
424-
<div className="flex flex-col">
425-
<span className="text-xs font-medium text-gray-500">Dot Operations</span>
426-
<span className="font-mono text-sm">{checkResult.dot_count}</span>
397+
</button>
398+
399+
{/* Foldable Content */}
400+
{isProcedureExpanded && (
401+
<div className="p-3 pt-0 border-t border-gray-100">
402+
{/* Key Parameters Grid (only shown when detected) */}
403+
{checkResult.detected && (
404+
<div className="grid grid-cols-[repeat(auto-fit,_minmax(120px,_1fr))] gap-3 mb-3 bg-gray-50 p-3 rounded border border-gray-100">
405+
{checkResult.num_warps !== null && checkResult.num_warps !== undefined && (
406+
<div className="flex flex-col">
407+
<span className="text-xs font-medium text-gray-500">Warps</span>
408+
<span className="font-mono text-sm">{checkResult.num_warps}</span>
409+
</div>
410+
)}
411+
{checkResult.num_stages !== null && checkResult.num_stages !== undefined && (
412+
<div className="flex flex-col">
413+
<span className="text-xs font-medium text-gray-500">Stages</span>
414+
<span className="font-mono text-sm">{checkResult.num_stages}</span>
415+
</div>
416+
)}
417+
{checkResult.num_pp_clusters !== null && checkResult.num_pp_clusters !== undefined && (
418+
<div className="flex flex-col">
419+
<span className="text-xs font-medium text-gray-500">PP Clusters</span>
420+
<span className="font-mono text-sm">{checkResult.num_pp_clusters}</span>
421+
</div>
422+
)}
423+
{checkResult.cond_barrier_count !== null && checkResult.cond_barrier_count !== undefined && (
424+
<div className="flex flex-col">
425+
<span className="text-xs font-medium text-gray-500">Cond Barriers</span>
426+
<span className="font-mono text-sm">{checkResult.cond_barrier_count}</span>
427+
</div>
428+
)}
429+
{checkResult.setprio_count !== null && checkResult.setprio_count !== undefined && (
430+
<div className="flex flex-col">
431+
<span className="text-xs font-medium text-gray-500">SetPrio Ops</span>
432+
<span className="font-mono text-sm">{checkResult.setprio_count}</span>
433+
</div>
434+
)}
435+
{checkResult.dot_count !== null && checkResult.dot_count !== undefined && (
436+
<div className="flex flex-col">
437+
<span className="text-xs font-medium text-gray-500">Dot Operations</span>
438+
<span className="font-mono text-sm">{checkResult.dot_count}</span>
439+
</div>
440+
)}
427441
</div>
428442
)}
429-
</div>
430-
)}
431443

432-
{/* Collapsible Module Attributes */}
433-
{checkResult.module_attributes && (
434-
<div className="mt-2">
435-
<button
436-
onClick={() => setExpandedModuleAttrs(prev => ({ ...prev, [name]: !isModuleAttrsExpanded }))}
437-
className="flex items-center text-xs font-medium text-gray-500 hover:text-gray-700 cursor-pointer"
438-
>
439-
<span className="mr-1">{isModuleAttrsExpanded ? "▼" : "▶"}</span>
440-
Module Attributes (TTGIR)
441-
</button>
442-
{isModuleAttrsExpanded && (
443-
<div className="mt-1 bg-gray-50 p-2 rounded border border-gray-100 font-mono text-xs overflow-x-auto">
444-
<pre className="text-gray-600 whitespace-pre-wrap break-all">
445-
{checkResult.module_attributes}
446-
</pre>
444+
{/* Collapsible Module Attributes */}
445+
{checkResult.module_attributes && (
446+
<div className="mt-2">
447+
<button
448+
onClick={(e) => { e.stopPropagation(); setExpandedModuleAttrs(prev => ({ ...prev, [name]: !isModuleAttrsExpanded })); }}
449+
className="flex items-center text-xs font-medium text-gray-500 hover:text-gray-700 cursor-pointer"
450+
>
451+
<span className="mr-1">{isModuleAttrsExpanded ? "▼" : "▶"}</span>
452+
Module Attributes (TTGIR)
453+
</button>
454+
{isModuleAttrsExpanded && (
455+
<div className="mt-1 bg-gray-50 p-2 rounded border border-gray-100 font-mono text-xs overflow-x-auto">
456+
<pre className="text-gray-600 whitespace-pre-wrap break-all">
457+
{checkResult.module_attributes}
458+
</pre>
459+
</div>
460+
)}
447461
</div>
448462
)}
449-
</div>
450-
)}
451463

452-
{/* Collapsible Check Patterns */}
453-
{checkResult.match_details && checkResult.match_details.length > 0 && (
454-
<div className="mt-2">
455-
<button
456-
onClick={() => setExpandedPatterns(prev => ({ ...prev, [name]: !isPatternExpanded }))}
457-
className="flex items-center text-xs font-medium text-gray-500 hover:text-gray-700 cursor-pointer"
458-
>
459-
<span className="mr-1">{isPatternExpanded ? "▼" : "▶"}</span>
460-
Check Patterns ({checkResult.match_details.length})
461-
</button>
462-
{isPatternExpanded && (
463-
<div className="mt-1 bg-gray-50 p-2 rounded border border-gray-100 font-mono text-xs">
464-
{checkResult.match_details.map((detail: string, idx: number) => (
465-
<div key={idx} className="text-gray-600">
466-
{detail}
464+
{/* Collapsible Check Patterns */}
465+
{checkResult.match_details && checkResult.match_details.length > 0 && (
466+
<div className="mt-2">
467+
<button
468+
onClick={(e) => { e.stopPropagation(); setExpandedPatterns(prev => ({ ...prev, [name]: !isPatternExpanded })); }}
469+
className="flex items-center text-xs font-medium text-gray-500 hover:text-gray-700 cursor-pointer"
470+
>
471+
<span className="mr-1">{isPatternExpanded ? "▼" : "▶"}</span>
472+
Check Patterns ({checkResult.match_details.length})
473+
</button>
474+
{isPatternExpanded && (
475+
<div className="mt-1 bg-gray-50 p-2 rounded border border-gray-100 font-mono text-xs">
476+
{checkResult.match_details.map((detail: string, idx: number) => (
477+
<div key={idx} className="text-gray-600">
478+
{detail}
479+
</div>
480+
))}
467481
</div>
468-
))}
482+
)}
469483
</div>
470484
)}
471-
</div>
472-
)}
473485

474-
{/* Collapsible Detailed Message (Criteria & Performance Implications) - when DETECTED */}
475-
{checkResult.detected && checkResult.message && (
476-
<div className="mt-3">
477-
<button
478-
onClick={() => setExpandedMessages(prev => ({ ...prev, [name]: !isMessageExpanded }))}
479-
className="flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 cursor-pointer"
480-
>
481-
<span className="mr-1">{isMessageExpanded ? "▼" : "▶"}</span>
482-
Show Details (Criteria & Performance Implications)
483-
</button>
484-
{isMessageExpanded && (
485-
<div className="mt-2 bg-blue-50 p-4 rounded-md border border-blue-200">
486-
<pre className="text-xs text-gray-700 whitespace-pre-wrap font-sans leading-relaxed">
487-
{checkResult.message.trim()}
488-
</pre>
486+
{/* Collapsible Detailed Message (Criteria & Performance Implications) - when DETECTED */}
487+
{checkResult.detected && checkResult.message && (
488+
<div className="mt-3">
489+
<button
490+
onClick={(e) => { e.stopPropagation(); setExpandedMessages(prev => ({ ...prev, [name]: !isMessageExpanded })); }}
491+
className="flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 cursor-pointer"
492+
>
493+
<span className="mr-1">{isMessageExpanded ? "▼" : "▶"}</span>
494+
Show Details (Criteria & Performance Implications)
495+
</button>
496+
{isMessageExpanded && (
497+
<div className="mt-2 bg-blue-50 p-4 rounded-md border border-blue-200">
498+
<pre className="text-xs text-gray-700 whitespace-pre-wrap font-sans leading-relaxed">
499+
{checkResult.message.trim()}
500+
</pre>
501+
</div>
502+
)}
489503
</div>
490504
)}
491-
</div>
492-
)}
493505

494-
{/* Collapsible Conditions for Activation - when NOT DETECTED */}
495-
{!checkResult.detected && (
496-
<div className="mt-3">
497-
<button
498-
onClick={() => setExpandedMessages(prev => ({ ...prev, [name]: !isMessageExpanded }))}
499-
className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 cursor-pointer"
500-
>
501-
<span className="mr-1">{isMessageExpanded ? "▼" : "▶"}</span>
502-
Show Details (Conditions for Activation)
503-
</button>
504-
{isMessageExpanded && (
505-
<div className="mt-2 bg-gray-50 p-4 rounded-md border border-gray-200">
506-
<pre className="text-xs text-gray-600 whitespace-pre-wrap font-sans leading-relaxed">
507-
{getNotDetectedMessage(name)}
508-
</pre>
506+
{/* Collapsible Conditions for Activation - when NOT DETECTED */}
507+
{!checkResult.detected && (
508+
<div className="mt-3">
509+
<button
510+
onClick={(e) => { e.stopPropagation(); setExpandedMessages(prev => ({ ...prev, [name]: !isMessageExpanded })); }}
511+
className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 cursor-pointer"
512+
>
513+
<span className="mr-1">{isMessageExpanded ? "▼" : "▶"}</span>
514+
Show Details (Conditions for Activation)
515+
</button>
516+
{isMessageExpanded && (
517+
<div className="mt-2 bg-gray-50 p-4 rounded-md border border-gray-200">
518+
<pre className="text-xs text-gray-600 whitespace-pre-wrap font-sans leading-relaxed">
519+
{getNotDetectedMessage(name)}
520+
</pre>
521+
</div>
522+
)}
509523
</div>
510524
)}
511525
</div>

0 commit comments

Comments
 (0)