# KinoElixirDataViewer

[![Hex.pm](https://img.shields.io/hexpm/v/kino_elixir_data_viewer.svg)](https://hex.pm/packages/kino_elixir_data_viewer)

[Elixir Data Viewer](https://www.npmjs.com/package/elixir-data-viewer) integration with [Livebook](https://livebook.dev/).

Provides a Kino component for rendering Elixir data structures with:

- **Syntax Highlighting** — Accurate Elixir syntax coloring via `lezer-elixir`, Tokyo Night theme
- **Code Folding** — Collapse/expand maps, lists, tuples, keyword lists, bitstrings
- **Line Numbers** — Gutter with line numbers and fold indicators
- **Floating Toolbar** — Fold All, Unfold All, Word Wrap, Copy, Search, Filter
- **Key Filtering** — Hide specific key-value pairs by key name

## Installation

Add to your Livebook notebook:

```elixir
Mix.install([
  {:kino_elixir_data_viewer, "~> 0.1.0"}
])
```

Or add to your Mix project:

```elixir
def deps do
  [
    {:kino_elixir_data_viewer, "~> 0.1.0"}
  ]
end
```

## Usage

### Basic

```elixir
data = %{name: "Alice", age: 30, roles: [:admin, :user]}
Kino.ElixirDataViewer.new(data)
```

### With Options

```elixir
data = %{
  name: "Alice",
  config: %{
    database: %{host: "localhost", port: 5432},
    secret_key_base: "super_secret"
  }
}

Kino.ElixirDataViewer.new(data,
  fold_level: 2,
  word_wrap: true,
  filter_keys: ["secret_key_base"]
)
```

### Raw String

```elixir
raw = """
%{
  name: "Alice",
  age: 30,
  roles: [:admin, :user]
}
"""

Kino.ElixirDataViewer.new(raw, raw: true)
```

### Toolbar Customization

```elixir
# Hide specific toolbar buttons
Kino.ElixirDataViewer.new(data, toolbar: [copy: false, filter: false])
```

## Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `:raw` | boolean | `false` | Treat input as pre-formatted string |
| `:inspect_opts` | keyword | see below | Options for `Kernel.inspect/2` |
| `:fold_level` | integer \| nil | `nil` | Auto-fold regions deeper than this level |
| `:word_wrap` | boolean | `false` | Enable word wrap by default |
| `:filter_keys` | list(string) | `[]` | Keys to filter out from view |
| `:toolbar` | keyword | all `true` | Show/hide toolbar buttons |

Default inspect options: `[pretty: true, limit: :infinity, printable_limit: :infinity, width: 80]`

### Toolbar Options

| Key | Default | Description |
|-----|---------|-------------|
| `:fold_all` | `true` | Show "Fold All" button |
| `:unfold_all` | `true` | Show "Unfold All" button |
| `:word_wrap` | `true` | Show "Word Wrap" toggle |
| `:copy` | `true` | Show "Copy" button |
| `:search` | `true` | Show "Search" button |
| `:filter` | `true` | Show "Filter" button |

## Development

```bash
# Get dependencies
mix deps.get

# Run tests
mix test

# Build JS assets (requires esbuild in assets/elixir_data_viewer/)
cd assets/elixir_data_viewer && npm install && npm run build
```

## License

MIT