From 121c5cc677ef170961a19252f543703bce322aa4 Mon Sep 17 00:00:00 2001 From: Kjell Tore Guttormsen Date: Wed, 6 May 2026 14:51:15 +0200 Subject: [PATCH] =?UTF-8?q?fix(ms-ai-architect):=20playground=20v1.13.0=20?= =?UTF-8?q?=E2=80=94=20visuelle=20DS-bugs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix-pakke som speiler llm-security v7.6.1 (commit f9b555a). Samme klasse visuelle bugs identifisert via parallell DS-analyse av playground-rendrere. - B1: renderFindingsBlock + renderRequirements bytter
outer (DS grid 360px+1fr klemte indre struktur til 360px-kolonne, lot 1fr-detail-panel-kolonnen stå tom) til
. BEM-strukturen findings__list > findings__group > findings__items uendret. - B2: lokal .report-table CSS for 6+ rapporter (Trusler, Kostnadsoversikt, TCO, Risiko-tabell, Key Metrics) som manglet styling — DS implementerer ikke klassen. Speilet lokal styling fra llm-security v7.6.1. - B3: ROS-matrise-bobler bytter til '; }).join('') + - (items.length > 3 ? '+' + (items.length - 3) + '' : '') + + (items.length > 3 ? '' : '') + '
' : ''; html += '
' + @@ -3332,8 +3361,13 @@ function renderRadarSvg(axes) { if (!axes || !axes.length) return ''; + // v1.13.0 fix (B4): bump SVG fra 300×300 til 380×380, R fra 100 til 125, + // label-offset fra R+25 til R+28, og dynamisk text-anchor basert på + // horisontal-posisjon. Forhindrer at bottom-labels overlapper ved 6+ + // akser (typisk for ROS med 7 risiko-dimensjoner). Speilet fra + // llm-security v7.6.1 commit f9b555a. const N = axes.length; - const cx = 150, cy = 150, R = 100; + const SIZE = 380, cx = SIZE / 2, cy = SIZE / 2, R = 125; const points = axes.map(function (a, i) { const angle = (i / N) * 2 * Math.PI - Math.PI / 2; const r = R * (Math.max(0, Math.min(5, a.score)) / 5); @@ -3341,9 +3375,11 @@ }).join(' '); const labels = axes.map(function (a, i) { const angle = (i / N) * 2 * Math.PI - Math.PI / 2; - const x = cx + (R + 25) * Math.cos(angle); - const y = cy + (R + 25) * Math.sin(angle); - return '' + escapeHtml(a.name) + ''; + const x = cx + (R + 28) * Math.cos(angle); + const y = cy + (R + 28) * Math.sin(angle); + const dx = Math.cos(angle); + const anchor = Math.abs(dx) < 0.2 ? 'middle' : (dx > 0 ? 'start' : 'end'); + return '' + escapeHtml(a.name) + ''; }).join(''); const spokes = axes.map(function (a, i) { const angle = (i / N) * 2 * Math.PI - Math.PI / 2; @@ -3352,7 +3388,7 @@ return ''; }).join(''); return '
' + - '' + + '' + '' + '' + spokes + labels + @@ -3467,7 +3503,9 @@ '
'; }).join('') : ''; - const body = cardsHtml + (expansionsHtml ? '
' + expansionsHtml + '
' : ''); + // v1.13.0 fix (B1): bytt .findings-outer til .report-meta-wrapper + // (DS' .findings er grid 360px+1fr, klemmer expansion-list til 360px). + const body = cardsHtml + (expansionsHtml ? '
' + expansionsHtml + '
' : ''); slot.innerHTML = renderPageShell({ eyebrow: 'KRAV', title: data.title || 'AI Act-krav per risiko og rolle', @@ -5243,6 +5281,32 @@ if (handler) handler(ev, actionEl); }); + // v1.13.0 fix (B3): matrix-bobler klikkbare. Klikk scroller til tilsvarende + // rad i Trusler-tabellen og fremhever den kort. Bruker data-threat-id som + // anker (matchet mot første kolonne i tabellen). Speilet fra llm-security + // v7.6.1 commit f9b555a. + document.addEventListener('click', function (ev) { + const bubble = ev.target.closest('.matrix__bubble[data-threat-id]'); + if (!bubble) return; + const threatId = bubble.getAttribute('data-threat-id'); + if (!threatId) return; + const tables = document.querySelectorAll('table.report-table'); + for (let t = 0; t < tables.length; t++) { + const rows = tables[t].querySelectorAll('tbody tr'); + for (let r = 0; r < rows.length; r++) { + const firstCell = rows[r].querySelector('td'); + if (firstCell && firstCell.textContent.trim() === threatId) { + rows[r].scrollIntoView({ behavior: 'smooth', block: 'center' }); + const orig = rows[r].style.background; + rows[r].style.background = 'var(--color-primary-100, var(--color-bg-soft))'; + rows[r].style.transition = 'background var(--duration-base) var(--ease-default)'; + setTimeout(function () { rows[r].style.background = orig; }, 1600); + return; + } + } + } + }); + ACTIONS['onboarding-toggle-group'] = function (ev, el) { const exp = el.closest('.expansion'); if (!exp) return; diff --git a/plugins/ms-ai-architect/tests/test-playground-v3.sh b/plugins/ms-ai-architect/tests/test-playground-v3.sh index 2b3e32a..71019d2 100755 --- a/plugins/ms-ai-architect/tests/test-playground-v3.sh +++ b/plugins/ms-ai-architect/tests/test-playground-v3.sh @@ -198,7 +198,11 @@ fi # ------------------------------------------------------- # 12. Design-system CSS-klasse-bruk (Tier 1+2+3) # ------------------------------------------------------- -DS_CLASSES=".pyramide .matrix .radar .findings .distribution .critique-card .capability-matrix .aiact-timeline .tracks .error-summary .guide-panel .expansion .form-progress" +# v1.13.0 fix (B1): .findings outer-wrapper bevisst fjernet — DS' .findings er +# grid 360px+1fr (list+detail-panel), men playground bruker bare list-kolonnen. +# Asserterer .findings__list (BEM-list) i stedet for å bekrefte at findings- +# strukturen fortsatt er i bruk uten at vi misbruker grid-containeren. +DS_CLASSES=".pyramide .matrix .radar .findings__list .distribution .critique-card .capability-matrix .aiact-timeline .tracks .error-summary .guide-panel .expansion .form-progress" for cls in $DS_CLASSES; do # Match som klassen i class="..." eller selektor — søk på klassenavnet uten leading dot bare="${cls#.}"