Skip to content

Commit 3909a7d

Browse files
claudeclaude
committed
✨ feat: adicionar componente MemoryDiagram para visualização de memória
Cria componente React customizado para substituir imagens SVG faltantes: - Componente MemoryDiagram com dois modos de visualização - Modo 'memory-vectors': mostra the_heads/the_tails para estruturas de lista - Modo 'garbage-collection': ilustra processo stop-and-copy do GC - Visualização interativa e responsiva para Figuras 5.14 e 5.15 - Suporte a temas claro e escuro - Animações e transições suaves - Legenda explicativa para notação de ponteiros - Registrar componente em MDXComponents para uso em MDX Resolve problema de build causado por referências a imagens inexistentes.
1 parent f3e99e3 commit 3909a7d

3 files changed

Lines changed: 468 additions & 0 deletions

File tree

‎src/components/MemoryDiagram/index.jsx‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import React from 'react';
2+
import styles from './styles.module.css';
3+
4+
/**
5+
* Componente para visualizar diagramas de memória
6+
*
7+
* Usado nas seções 5.3.1 e 5.3.2 para ilustrar:
8+
* - Representação de pares em vetores (the_heads/the_tails)
9+
* - Estruturas de lista em memória
10+
* - Processo de garbage collection
11+
*/
12+
export default function MemoryDiagram({ type = 'memory-vectors', data }) {
13+
if (type === 'memory-vectors') {
14+
return <MemoryVectorsVisualization data={data} />;
15+
} else if (type === 'garbage-collection') {
16+
return <GarbageCollectionVisualization data={data} />;
17+
}
18+
return null;
19+
}
20+
21+
/**
22+
* Figura 5.14: Representação de list(list(1, 2), 3, 4) em memória
23+
*/
24+
function MemoryVectorsVisualization({ data }) {
25+
// Dados padrão para list(list(1, 2), 3, 4)
26+
const defaultData = {
27+
the_heads: ['n1', 'n2', 'p1', 'n3', 'n4'],
28+
the_tails: ['n2', 'e0', 'p2', 'p4', 'e0'],
29+
indices: [0, 1, 2, 3, 4],
30+
root: 'p2', // Aponta para o índice 2
31+
description: 'list(list(1, 2), 3, 4)'
32+
};
33+
34+
const memData = data || defaultData;
35+
36+
return (
37+
<div className={styles.memoryContainer}>
38+
<div className={styles.description}>
39+
<strong>Representação de {memData.description}</strong>
40+
</div>
41+
42+
<div className={styles.vectorsContainer}>
43+
<div className={styles.vectorLabel}>Índice:</div>
44+
<div className={styles.vector}>
45+
{memData.indices.map((idx) => (
46+
<div key={idx} className={styles.cell}>
47+
<div className={styles.cellLabel}>{idx}</div>
48+
</div>
49+
))}
50+
</div>
51+
</div>
52+
53+
<div className={styles.vectorsContainer}>
54+
<div className={styles.vectorLabel}>the_heads:</div>
55+
<div className={styles.vector}>
56+
{memData.the_heads.map((val, idx) => (
57+
<div key={idx} className={styles.cell}>
58+
<div className={styles.cellValue}>{val}</div>
59+
</div>
60+
))}
61+
</div>
62+
</div>
63+
64+
<div className={styles.vectorsContainer}>
65+
<div className={styles.vectorLabel}>the_tails:</div>
66+
<div className={styles.vector}>
67+
{memData.the_tails.map((val, idx) => (
68+
<div key={idx} className={styles.cell}>
69+
<div className={styles.cellValue}>{val}</div>
70+
</div>
71+
))}
72+
</div>
73+
</div>
74+
75+
<div className={styles.legend}>
76+
<div className={styles.legendItem}>
77+
<span className={styles.legendLabel}>p#</span> = ponteiro para par no índice #
78+
</div>
79+
<div className={styles.legendItem}>
80+
<span className={styles.legendLabel}>n#</span> = número #
81+
</div>
82+
<div className={styles.legendItem}>
83+
<span className={styles.legendLabel}>e0</span> = lista vazia (null)
84+
</div>
85+
</div>
86+
87+
<div className={styles.note}>
88+
<strong>Nota:</strong> Root aponta para <code>{memData.root}</code> (índice{' '}
89+
{memData.root.substring(1)})
90+
</div>
91+
</div>
92+
);
93+
}
94+
95+
/**
96+
* Figura 5.15: Garbage Collection - antes e depois
97+
*/
98+
function GarbageCollectionVisualization({ data }) {
99+
return (
100+
<div className={styles.gcContainer}>
101+
<div className={styles.description}>
102+
<strong>Reconfiguração da Memória pelo Garbage Collector</strong>
103+
</div>
104+
105+
<div className={styles.gcPhases}>
106+
<div className={styles.gcPhase}>
107+
<h4>Antes da Coleta</h4>
108+
<div className={styles.memorySpace}>
109+
<div className={styles.memoryLabel}>Memória de Trabalho</div>
110+
<div className={styles.memoryBar}>
111+
<div className={styles.usedMemory} style={{ width: '80%' }}>
112+
<span>Dados Úteis + Lixo</span>
113+
</div>
114+
<div className={styles.freeMemory} style={{ width: '20%' }}>
115+
<span>Livre</span>
116+
</div>
117+
</div>
118+
<div className={styles.pointers}>
119+
<span className={styles.pointer}>← scan</span>
120+
<span className={styles.pointer}>← free</span>
121+
</div>
122+
</div>
123+
124+
<div className={styles.memorySpace}>
125+
<div className={styles.memoryLabel}>Memória Livre</div>
126+
<div className={styles.memoryBar}>
127+
<div className={styles.emptyMemory} style={{ width: '100%' }}>
128+
<span>(Vazia)</span>
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
134+
<div className={styles.arrow}>→</div>
135+
136+
<div className={styles.gcPhase}>
137+
<h4>Depois da Coleta</h4>
138+
<div className={styles.memorySpace}>
139+
<div className={styles.memoryLabel}>Nova Memória Livre</div>
140+
<div className={styles.memoryBar}>
141+
<div className={styles.garbageMemory} style={{ width: '100%' }}>
142+
<span>(Disponível)</span>
143+
</div>
144+
</div>
145+
</div>
146+
147+
<div className={styles.memorySpace}>
148+
<div className={styles.memoryLabel}>Nova Memória de Trabalho</div>
149+
<div className={styles.memoryBar}>
150+
<div className={styles.compactedMemory} style={{ width: '50%' }}>
151+
<span>Dados Úteis (Compactados)</span>
152+
</div>
153+
<div className={styles.freeMemory} style={{ width: '50%' }}>
154+
<span>Livre</span>
155+
</div>
156+
</div>
157+
<div className={styles.pointers}>
158+
<span className={styles.pointer}>← free</span>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
164+
<div className={styles.gcSteps}>
165+
<h4>Algoritmo Stop-and-Copy:</h4>
166+
<ol>
167+
<li>Copiar objetos acessíveis da memória de trabalho para memória livre</li>
168+
<li>Marcar objetos movidos com "broken heart" (coração partido)</li>
169+
<li>Atualizar ponteiros para novos endereços</li>
170+
<li>Trocar papéis: memória livre vira memória de trabalho</li>
171+
<li>Lixo é automaticamente eliminado (não é copiado)</li>
172+
</ol>
173+
</div>
174+
</div>
175+
);
176+
}

0 commit comments

Comments
 (0)