Skip to content

Commit 40bd730

Browse files
ibrahimcesaribrahimcesar
authored
Merge pull request #121 from ibrahimcesar/claude/fix-missing-chapter5-images-015rRWWYfzBcTSHQmY9Hhqqz
🐛 fix: substituir imagens SVG faltantes do Capítulo 5 por componente React
2 parents f3e99e3 + 6417d9f commit 40bd730

5 files changed

Lines changed: 470 additions & 2 deletions

File tree

‎docs/chapter-5/5.3.1.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Por exemplo, se `v` é um vetor, então `vector_ref(v, 5)` obtém a quinta entra
1919

2020
Podemos usar vetores para implementar as estruturas de par básicas necessárias para uma memória estruturada em lista. Vamos imaginar que a memória do computador está dividida em dois vetores: `the_heads` e `the_tails`. Representaremos a estrutura de lista da seguinte forma: um ponteiro para um par é um índice nos dois vetores. O `head` do par é a entrada em `the_heads` com o índice designado, e o `tail` do par é a entrada em `the_tails` com o índice designado. Também precisamos de uma representação para objetos que não sejam pares (como números e strings) e uma maneira de distinguir um tipo de dado do outro. Existem muitos métodos para realizar isso, mas todos se reduzem a usar *ponteiros tipados*, ou seja, estender a noção de "ponteiro" para incluir informação sobre o tipo de dado.[^4] O tipo de dado permite que o sistema distinga um ponteiro para um par (que consiste do tipo de dado "par" e um índice nos vetores de memória) de ponteiros para outros tipos de dados (que consistem de algum outro tipo de dado e qualquer coisa que esteja sendo usada para representar dados daquele tipo). Dois objetos de dados são considerados os mesmos (`===`) se seus ponteiros forem idênticos. A Figura 5.14 ilustra o uso deste método para representar `list(list(1, 2), 3, 4)`, cujo diagrama de caixas e ponteiros também é mostrado. Usamos prefixos de letra para denotar a informação de tipo de dado. Assim, um ponteiro para o par com índice 5 é denotado `p5`, a lista vazia é denotada pelo ponteiro `e0`, e um ponteiro para o número 4 é denotado `n4`. No diagrama de caixas e ponteiros, indicamos no canto inferior esquerdo de cada par o índice do vetor que especifica onde o `head` e o `tail` do par são armazenados. As localizações em branco em `the_heads` e `the_tails` podem conter partes de outras estruturas de lista (não de interesse aqui).
2121

22-
![Figura 5.14](img_javascript/Fig5.14b.std.svg)
22+
<MemoryDiagram type="memory-vectors" />
2323

2424
**Figura 5.14:** Representações de caixas e ponteiros e vetores de memória da lista `list(list(1, 2), 3, 4)`.
2525

‎docs/chapter-5/5.3.2.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Agora usamos nossa linguagem de máquina de registradores para descrever o algor
3636

3737
A coleta de lixo é disparada quando esgotamos as células livres na memória de trabalho atual, ou seja, quando uma operação `pair` tenta incrementar o ponteiro `free` além do fim do vetor de memória. Quando o processo de coleta de lixo estiver completo, o ponteiro `root` apontará para a nova memória, todos os objetos acessíveis a partir da `root` terão sido movidos para a nova memória, e o ponteiro `free` indicará o próximo lugar na nova memória onde um novo par pode ser alocado. Além disso, os papéis da memória de trabalho e da nova memória terão sido intercambiados — novos pares serão construídos na nova memória, começando no lugar indicado por `free`, e a memória de trabalho (anterior) estará disponível como a nova memória para a próxima coleta de lixo. A Figura 5.15 mostra a disposição da memória logo antes e logo depois da coleta de lixo.
3838

39-
![Figura 5.15](img_javascript/Fig5.15c.std.svg)
39+
<MemoryDiagram type="garbage-collection" />
4040

4141
**Figura 5.15:** Reconfiguração da memória pelo processo de coleta de lixo.
4242

‎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)