feat(rag): Applicability Notes UI + Branchen-Review
- Matrix-Zeilen aufklappbar: Klick zeigt Branchenrelevanz-Erklaerung, Beschreibung und Gueltigkeitsdatum - 27 Branchen-Zuordnungen korrigiert: - OWASP/NIST/CISA/SBOM-Standards → alle (Kunden entwickeln Software) - BSI-TR-03161 → leer (DiGA, nicht Zielmarkt) - BSI 200-4, ENISA Supply Chain → alle (CRA/NIS2-Pflicht) - EAA/BFSG → +automotive (digitale Interfaces) - 264 horizontal, 42 sektorspezifisch, 14 nicht zutreffend Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -724,6 +724,7 @@ export default function RAGPage() {
|
||||
const [autoRefresh, setAutoRefresh] = useState(true)
|
||||
const [elapsedTime, setElapsedTime] = useState<string>('')
|
||||
const [expandedDocTypes, setExpandedDocTypes] = useState<string[]>(['eu_regulation', 'eu_directive'])
|
||||
const [expandedMatrixDoc, setExpandedMatrixDoc] = useState<string | null>(null)
|
||||
|
||||
// Chunk browser state is now in ChunkBrowserQA component
|
||||
|
||||
@@ -1803,32 +1804,62 @@ export default function RAGPage() {
|
||||
|
||||
{/* Documents in this section */}
|
||||
{isExpanded && docsInType.map((doc: any) => (
|
||||
<tr key={doc.code} className="hover:bg-slate-50 border-b border-slate-100">
|
||||
<td className="px-2 py-1.5 font-medium sticky left-0 bg-white">
|
||||
<span className="flex items-center gap-1">
|
||||
{isInRag(doc.code) ? (
|
||||
<span className="text-green-500 text-[10px]">●</span>
|
||||
) : (
|
||||
<span className="text-red-300 text-[10px]">○</span>
|
||||
)}
|
||||
<span className="text-teal-600 truncate max-w-[180px]" title={doc.full_name || doc.name}>
|
||||
{doc.name}
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
{INDUSTRIES_LIST.filter((i: any) => i.id !== 'all').map((industry: any) => {
|
||||
const applies = doc.industries.includes(industry.id) || doc.industries.includes('all')
|
||||
return (
|
||||
<td key={industry.id} className="px-2 py-1.5 text-center">
|
||||
{applies ? (
|
||||
<span className="inline-flex items-center justify-center w-5 h-5 bg-teal-100 text-teal-600 rounded-full">✓</span>
|
||||
<React.Fragment key={doc.code}>
|
||||
<tr
|
||||
className={`hover:bg-slate-50 border-b border-slate-100 cursor-pointer ${expandedMatrixDoc === doc.code ? 'bg-teal-50' : ''}`}
|
||||
onClick={() => setExpandedMatrixDoc(expandedMatrixDoc === doc.code ? null : doc.code)}
|
||||
>
|
||||
<td className="px-2 py-1.5 font-medium sticky left-0 bg-white">
|
||||
<span className="flex items-center gap-1">
|
||||
{isInRag(doc.code) ? (
|
||||
<span className="text-green-500 text-[10px]">●</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center justify-center w-5 h-5 text-slate-300">–</span>
|
||||
<span className="text-red-300 text-[10px]">○</span>
|
||||
)}
|
||||
<span className="text-teal-600 truncate max-w-[180px]" title={doc.full_name || doc.name}>
|
||||
{doc.name}
|
||||
</span>
|
||||
{(doc.applicability_note || doc.description) && (
|
||||
<span className="text-slate-400 text-[10px] ml-1">{expandedMatrixDoc === doc.code ? '▼' : 'ⓘ'}</span>
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
{INDUSTRIES_LIST.filter((i: any) => i.id !== 'all').map((industry: any) => {
|
||||
const applies = doc.industries.includes(industry.id) || doc.industries.includes('all')
|
||||
return (
|
||||
<td key={industry.id} className="px-2 py-1.5 text-center">
|
||||
{applies ? (
|
||||
<span className="inline-flex items-center justify-center w-5 h-5 bg-teal-100 text-teal-600 rounded-full">✓</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center justify-center w-5 h-5 text-slate-300">–</span>
|
||||
)}
|
||||
</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
{expandedMatrixDoc === doc.code && (doc.applicability_note || doc.description) && (
|
||||
<tr className="bg-teal-50 border-b border-teal-200">
|
||||
<td colSpan={INDUSTRIES_LIST.length} className="px-4 py-3">
|
||||
<div className="text-xs space-y-1.5">
|
||||
{doc.full_name && (
|
||||
<p className="font-semibold text-slate-700">{doc.full_name}</p>
|
||||
)}
|
||||
{doc.applicability_note && (
|
||||
<p className="text-teal-700 bg-teal-100 px-2 py-1 rounded inline-block">
|
||||
<span className="font-medium">Branchenrelevanz:</span> {doc.applicability_note}
|
||||
</p>
|
||||
)}
|
||||
{doc.description && (
|
||||
<p className="text-slate-600">{doc.description}</p>
|
||||
)}
|
||||
{doc.effective_date && (
|
||||
<p className="text-slate-400">In Kraft: {doc.effective_date}</p>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user