Skip to content

Commit 3b9f1f4

Browse files
ofriwofriw
committed
Nicer presentation mode for KnowledgeExpansionDiamond
1 parent 8b02c8c commit 3b9f1f4

File tree

2 files changed

+154
-100
lines changed

2 files changed

+154
-100
lines changed

‎website/src/components/VisualElements/KnowledgeExpansionDiamond.module.css‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,24 @@
1111
/* Compact mode for presentations */
1212
.container.compact {
1313
margin: 0 auto;
14-
padding: 0.5rem;
15-
max-width: 95%;
14+
padding: 0;
15+
max-width: 100%;
16+
background: none;
17+
border: none;
18+
border-radius: 0;
19+
}
20+
21+
/* Compact mode - increase text sizes for presentation readability */
22+
.container.compact .layerLabel {
23+
font-size: 14px;
24+
}
25+
26+
.container.compact .sizeLabel {
27+
font-size: 14px;
28+
}
29+
30+
.container.compact .codeLabel {
31+
font-size: 18px;
1632
}
1733

1834
@keyframes fadeIn {
@@ -222,6 +238,21 @@
222238
fill: var(--ifm-background-color);
223239
}
224240

241+
/* Reveal.js presentation dark mode */
242+
:global(.reveal) .layerBox,
243+
:global(.reveal) .layerBoxCode {
244+
fill: rgba(30, 30, 50, 0.9);
245+
}
246+
247+
:global(.reveal) .layerLabel,
248+
:global(.reveal) .codeLabel {
249+
fill: #e5e7eb;
250+
}
251+
252+
:global(.reveal) .sizeLabel {
253+
fill: #9ca3af;
254+
}
255+
225256
/* ===== RESPONSIVE ===== */
226257

227258
@media (max-width: 768px) {

‎website/src/components/VisualElements/KnowledgeExpansionDiamond.tsx‎

Lines changed: 121 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ export default function KnowledgeExpansionDiamond({
1414
const viewBoxHeight = 400;
1515
const centerX = viewBoxWidth / 2;
1616

17+
// Compact mode crops tighter since legend/annotations are hidden
18+
const viewBox = compact ? '40 10 380 350' : `0 0 ${viewBoxWidth} ${viewBoxHeight}`;
19+
1720
// Box dimensions - consistent 1.25x progression for pleasing funnel effect
1821
const specBoxWidth = 140;
1922
const designBoxWidth = 175;
@@ -93,7 +96,7 @@ export default function KnowledgeExpansionDiamond({
9396
aria-label="Knowledge Flow Diagram: Traditional software development expands knowledge downward from spec to code. AI coding agents enable extraction upward from code to spec—each layer appears once, with bidirectional flow."
9497
>
9598
<svg
96-
viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
99+
viewBox={viewBox}
97100
className={styles.svg}
98101
xmlns="http://www.w3.org/2000/svg"
99102
>
@@ -187,7 +190,7 @@ export default function KnowledgeExpansionDiamond({
187190
className={styles.layerLabel}
188191
textAnchor="middle"
189192
>
190-
HIGH-LEVEL SPEC
193+
SPEC
191194
</text>
192195
<text
193196
x={centerX}
@@ -257,14 +260,16 @@ export default function KnowledgeExpansionDiamond({
257260
</g>
258261

259262
{/* Source of Truth label - below CODE box */}
260-
<text
261-
x={centerX}
262-
y={codeY + codeBoxHeight + 14}
263-
className={styles.codeSubtitle}
264-
textAnchor="middle"
265-
>
266-
Source of Truth
267-
</text>
263+
{!compact && (
264+
<text
265+
x={centerX}
266+
y={codeY + codeBoxHeight + 14}
267+
className={styles.codeSubtitle}
268+
textAnchor="middle"
269+
>
270+
Source of Truth
271+
</text>
272+
)}
268273

269274
{/* ===== LEFT ARROWS (Traditional - Purple, Downward) ===== */}
270275
<g className={styles.traditionalGroup}>
@@ -282,39 +287,43 @@ export default function KnowledgeExpansionDiamond({
282287
/>
283288

284289
{/* Left annotations - aligned to consistent x position */}
285-
<text
286-
x={leftAnnotationX}
287-
y={annotation1Y - 5}
288-
className={styles.annotation}
289-
textAnchor="end"
290-
>
291-
adds: edge cases,
292-
</text>
293-
<text
294-
x={leftAnnotationX}
295-
y={annotation1Y + 9}
296-
className={styles.annotation}
297-
textAnchor="end"
298-
>
299-
constraints
300-
</text>
301-
302-
<text
303-
x={leftAnnotationX}
304-
y={annotation2Y - 5}
305-
className={styles.annotation}
306-
textAnchor="end"
307-
>
308-
adds: implementation
309-
</text>
310-
<text
311-
x={leftAnnotationX}
312-
y={annotation2Y + 9}
313-
className={styles.annotation}
314-
textAnchor="end"
315-
>
316-
approach
317-
</text>
290+
{!compact && (
291+
<>
292+
<text
293+
x={leftAnnotationX}
294+
y={annotation1Y - 5}
295+
className={styles.annotation}
296+
textAnchor="end"
297+
>
298+
adds: edge cases,
299+
</text>
300+
<text
301+
x={leftAnnotationX}
302+
y={annotation1Y + 9}
303+
className={styles.annotation}
304+
textAnchor="end"
305+
>
306+
constraints
307+
</text>
308+
309+
<text
310+
x={leftAnnotationX}
311+
y={annotation2Y - 5}
312+
className={styles.annotation}
313+
textAnchor="end"
314+
>
315+
adds: implementation
316+
</text>
317+
<text
318+
x={leftAnnotationX}
319+
y={annotation2Y + 9}
320+
className={styles.annotation}
321+
textAnchor="end"
322+
>
323+
approach
324+
</text>
325+
</>
326+
)}
318327
</g>
319328

320329
{/* ===== RIGHT ARROWS (AI - Cyan, Upward) ===== */}
@@ -335,64 +344,78 @@ export default function KnowledgeExpansionDiamond({
335344
/>
336345

337346
{/* Right annotations - symmetric with left */}
338-
<text
339-
x={rightAnnotationX}
340-
y={annotation2Y - 5}
341-
className={styles.annotationAI}
342-
textAnchor="start"
343-
>
344-
extracts: patterns,
345-
</text>
346-
<text
347-
x={rightAnnotationX}
348-
y={annotation2Y + 9}
349-
className={styles.annotationAI}
350-
textAnchor="start"
351-
>
352-
rules
353-
</text>
354-
355-
<text
356-
x={rightAnnotationX}
357-
y={annotation1Y - 5}
358-
className={styles.annotationAI}
359-
textAnchor="start"
360-
>
361-
extracts: intent,
362-
</text>
363-
<text
364-
x={rightAnnotationX}
365-
y={annotation1Y + 9}
366-
className={styles.annotationAI}
367-
textAnchor="start"
368-
>
369-
boundaries
370-
</text>
347+
{!compact && (
348+
<>
349+
<text
350+
x={rightAnnotationX}
351+
y={annotation2Y - 5}
352+
className={styles.annotationAI}
353+
textAnchor="start"
354+
>
355+
extracts: patterns,
356+
</text>
357+
<text
358+
x={rightAnnotationX}
359+
y={annotation2Y + 9}
360+
className={styles.annotationAI}
361+
textAnchor="start"
362+
>
363+
rules
364+
</text>
365+
366+
<text
367+
x={rightAnnotationX}
368+
y={annotation1Y - 5}
369+
className={styles.annotationAI}
370+
textAnchor="start"
371+
>
372+
extracts: intent,
373+
</text>
374+
<text
375+
x={rightAnnotationX}
376+
y={annotation1Y + 9}
377+
className={styles.annotationAI}
378+
textAnchor="start"
379+
>
380+
boundaries
381+
</text>
382+
</>
383+
)}
371384
</g>
372385

373386
{/* ===== LEGEND ===== */}
374-
<g className={styles.legend}>
375-
{/* Centered legend with equal spacing */}
376-
<circle
377-
cx={centerX - 95}
378-
cy={legendY}
379-
r={5}
380-
className={styles.legendDotTraditional}
381-
/>
382-
<text x={centerX - 85} y={legendY + 4} className={styles.legendText}>
383-
Traditional (expansion)
384-
</text>
385-
386-
<circle
387-
cx={centerX + 65}
388-
cy={legendY}
389-
r={5}
390-
className={styles.legendDotAI}
391-
/>
392-
<text x={centerX + 75} y={legendY + 4} className={styles.legendText}>
393-
AI-Enabled (extraction)
394-
</text>
395-
</g>
387+
{!compact && (
388+
<g className={styles.legend}>
389+
{/* Centered legend with equal spacing */}
390+
<circle
391+
cx={centerX - 95}
392+
cy={legendY}
393+
r={5}
394+
className={styles.legendDotTraditional}
395+
/>
396+
<text
397+
x={centerX - 85}
398+
y={legendY + 4}
399+
className={styles.legendText}
400+
>
401+
Traditional (expansion)
402+
</text>
403+
404+
<circle
405+
cx={centerX + 65}
406+
cy={legendY}
407+
r={5}
408+
className={styles.legendDotAI}
409+
/>
410+
<text
411+
x={centerX + 75}
412+
y={legendY + 4}
413+
className={styles.legendText}
414+
>
415+
AI-Enabled (extraction)
416+
</text>
417+
</g>
418+
)}
396419
</svg>
397420

398421
{/* Description text */}

0 commit comments

Comments
 (0)