# KinoVizjs

A [Livebook](https://livebook.dev) smart cell and component for rendering GraphViz (DOT) graphs in the browser using [Viz.js](https://github.com/mdaines/viz-js).

`KinoVizjs` downloads the Viz.js WebAssembly bundle into the browser client and renders your graphs locally. 

Unlike [kino_yog](https://github.com/code-shoily/kino_yog) - the project I created earlier that's tied to [Yog](https://github.com/code-shoily/yog), this one is independent of any graph library and can be used with any library that can produce DOT strings.

## Installation

To bring `KinoVizjs` into your Livebook, simply add the package to your setup cell:

```elixir
Mix.install([
  {:kino_vizjs, github: "code-shoily/kino_vizjs"}
])
```

## Usage

You can use `KinoVizjs` in two ways:

### Smart Cell

Click **+ Smart** and select **"VizJS Render DOT"**.

It provides an interactive UI where you can:
- Type your raw DOT string in the editor.
- Instantly switch between GraphViz layout engines (`dot`, `circo`, `neato`, `fdp`, `sfdp`, `twopi`, `osage`, `patchwork`).

### Rendering from DOT String

If you are programmatically generating DOT strings (e.g. producing them from a library like `Yog`), you can pipe them directly into `Kino.VizJS.render/2`:

```elixir
dot_graph = """
digraph G {
  node [shape=box style=filled fillcolor=lightblue];
  A -> B -> C -> D -> A;
  B -> D;
}
"""

Kino.VizJS.render(dot_graph, engine: "dot")
```

### Rendering Yog

`Kino.VizJS` is created primarily to render `Yog` graphs and be used in Yog tutorials/livebooks.

Here is an example of Yog graph with shortest path being rendered using `Kino.VizJS`:

```elixir
graph =
  Yog.from_edges(
    :directed,
    [
      {1, 2, 10},
      {2, 3, 20},
      {3, 8, 3},
      {4, 7, 9},
      {5, 6, 2},
      {1, 3, 7},
      {2, 7, 9},
      {1, 5, 1},
      {6, 8, 2}
    ]
  )

{:ok, path} = Yog.Pathfinding.Dijkstra.shortest_path(graph, 1, 8)

graph
|> Yog.Render.DOT.to_dot(
  Yog.Render.DOT.path_to_options(path)
)
|> Kino.VizJS.render()
```

An example of petersen graph:

```elixir
Yog.Generator.Classic.petersen()
|> Yog.Render.DOT.to_dot()
|> Kino.VizJS.render()
```

More Yog examples involving flow, pathfinding, spanning trees, and livebooks examples will be added soon.

### Libgraph Example

```elixir
graph =
  Graph.new()
  |> Graph.add_vertices([3, 5, 7])
  |> Graph.add_edge(1, 3)
  |> Graph.add_edge(3, 4)
  |> Graph.add_edge(3, 5)
  |> Graph.add_edge(5, 6)
  |> Graph.add_edge(5, 7)

{:ok, dot} = Graph.to_dot(graph)

Kino.VizJS.render(dot)
```

## Theme Support

The component comes automatically configured to be **theme-aware** in Livebook.

It intercepts default black (`#000000` / `black`) fills and strokes generated by GraphViz and injects `currentColor`, letting the text color natively adapt whether you're viewing the notebook in Light Mode or Dark Mode. Explicit color definitions within your nodes and edges remain exactly as you configured them.