# Vista de diferencias

> Un cambio como líneas de colores: lo añadido en verde, lo quitado en rojo. Componente de Pyzed para GUIs de escritorio en Python, con ejemplos y API.

Source: https://albakore.github.io/pyzed/es/library/diff-view/

:::tip[En pocas palabras]
Muestra qué cambió en un archivo: las líneas nuevas en verde y las borradas en rojo.
:::

`ui.diff_view(diff)` muestra un cambio: el nombre del archivo y luego las líneas que cambiaron (las añadidas en verde, las quitadas en rojo) con dos líneas de contexto alrededor de cada cambio; los cambios alejados se separan con `⋯`. `diff` es un diccionario con `path`, `old` y `new`, los textos completos de antes y de después, y `max_lines` limita cuántas líneas se ven antes de `… N líneas más`. Es lo que muestra una [Llamada a herramienta](https://albakore.github.io/pyzed/es/library/tool-call/) para los cambios que hizo.

`ui.diff_view` · Categoría: [Agentes de IA](https://albakore.github.io/pyzed/es/library/#agentes-de-ia) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#diff_view)

**Código:**

```python
old = "def save(path):\n    data = load()\n    write(path, data)\n    return True\n"
new = "def save(path, data):\n    write(path, data)\n    log(path)\n    return True\n"
pz.container(ui.diff_view({"path": "app/storage.py", "old": old, "new": new}), width=420)
```

:::note[Nuevo]
Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el [gestor de incidencias](https://github.com/albakore/pyzed/issues).
:::

## Cuándo usarlo

- Para mostrar lo que un agente o una herramienta cambió en un archivo.
- Para revisar un cambio antes de guardarlo, junto a botones de Conservar y Rechazar.
- Para las cifras solas (`+12 −3`), usa el [Resumen de cambios](https://albakore.github.io/pyzed/es/library/diff-stat/).

## Uso

```python
import pyzed as pz
from pyzed import ui

old = "def save(path):\n    data = load()\n    write(path, data)\n    return True\n"
new = "def save(path, data):\n    write(path, data)\n    log(path)\n    return True\n"
pz.container(ui.diff_view({"path": "app/storage.py", "old": old, "new": new}), width=420)
```

## Variantes

:::note[Sobre estas capturas]
Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre **Código** bajo una captura para ver el fragmento que la dibuja; los nombres libres como `on_save` son tus propios callbacks.
:::

### Contenido

Dos líneas de contexto rodean cada cambio; los cambios más alejados se separan con `⋯`.

```python
pz.container(ui.diff_view({"path": "app.py", "old": "x = 1\ny = 2\n", "new": "x = 10\ny = 2\n"}),
             width=300)
```

```python
pz.container(ui.diff_view({"path": "main.py", "old": "", "new": "import pyzed as pz\n\npz.run(App)\n"}),
             width=300)
```

```python
pz.container(ui.diff_view({"path": "todo.txt", "old": "milk\neggs\nbread\n", "new": "milk\n"}),
             width=300)
```

```python
old = "".join(f"line {i}\n" for i in range(1, 13))
new = old.replace("line 2\n", "line two\n").replace("line 11\n", "")
pz.container(ui.diff_view({"path": "notes.txt", "old": old, "new": new}), width=300)
```

```python
new = "".join(f"item {i}\n" for i in range(1, 11))
pz.container(ui.diff_view({"path": "list.txt", "old": "", "new": new}, max_lines=4), width=300)
```

## Eventos

Vista de diferencias no tiene eventos propios: muestra lo que le das. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

## Propiedades y API

### `ui.diff_view`

```python
diff_view(diff, *, theme=None, max_lines=120)
```

Un cambio tal como lo muestra Zed en un hilo: el nombre del archivo y las líneas cambiadas (en verde las añadidas, en rojo las quitadas) con unas pocas líneas alrededor.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `diff` | *obligatorio* | Un dict con `path`, `old` y `new` (los textos antes y después). |
| `theme` | `None` | Tema. |
| `max_lines` | `120` | Líneas que se muestran antes de `… N líneas más`. |

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#diff_view)

## Relacionados

- [Llamada a herramienta](https://albakore.github.io/pyzed/es/library/tool-call/): Un paso de un agente de IA: qué hizo, su resultado y Permitir o Rechazar.
- [Resumen de cambios](https://albakore.github.io/pyzed/es/library/diff-stat/): `+12 −3` con bloques al estilo de GitHub.
- [Barra de cambios](https://albakore.github.io/pyzed/es/library/edits-bar/): Los archivos que cambió un agente, con Conservar todo y Rechazar todo.