# SortVisualizer

> SortVisualizer draws a sort's trace as bars, width by height pixels, each as tall as its value.

Page: https://fframes-kit.pages.dev/docs/computer-science/sort-visualizer/
Cargo feature: `cs` (`fframes-kit = { version = "..", features = ["cs"] }`)

`SortVisualizer` draws a sort's trace as bars, `width` by `height` pixels, each as tall as its
value. The compared bars light up, moved bars slide to their place and bars in their final
place turn green. `name` is written above with the comparisons and moves so far, `values`
writes each value under its bar and `notes` the step under the figure. Gallery scene:
`SortVisualizer` (the four sorts racing on the same twelve values, one step every 0.07 s), and
`RadialSort`, an `ArrayTrace::quick` of 120 values drawn as wedges round a circle.

Gallery clip of `SortVisualizer`: https://fframes-kit.pages.dev/media/scenes/SortVisualizer-2acf90ab.mp4

Gallery clip of `RadialSort`: https://fframes-kit.pages.dev/media/scenes/RadialSort-bc5303b1.mp4

```rust
use fframes_kit::prelude::*;

fn race<'a>(ui: &mut Ui<'a, '_, '_>, quick: &'a ArrayTrace) -> Svgr<'a> {
    // quick = ArrayTrace::quick(&values), built once
    ui.show(SortVisualizer {
        trace: Some(quick),
        name: "quicksort".into(),
        step_time: 0.2,
        width: 800.0,
        height: 300.0,
        ..ui.defaults()
    })
}
```

## API

Components are plain structs. Set the fields you need and fill the rest with `..ui.defaults()`: the defaults below come from the current theme (`theme.` values are fields of `Theme`).

### SortVisualizer

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `trace` | [`Option<&ArrayTrace>`](https://fframes-kit.pages.dev/docs/computer-science/array-trace.md) | `None` | The recorded steps to play (an `ArrayTrace` of a sort); `None` draws nothing. |
| `name` | `Cow<str>` | `Cow::Borrowed("")` | Name of the algorithm written above the bars; empty for none. |
| `delay` | `f32` | `0.0` | Seconds after the container's start before the first step. |
| `step_time` | `f32` | `0.25` | Seconds each step of the trace takes. |
| `center` | `(f64, f64)` | `(0.0, 0.0)` | The middle of the figure, in units of `ui.space`. |
| `width` | `f32` | `900.0` | Width of the bars area in pixels. |
| `height` | `f32` | `420.0` | Height in pixels of the tallest bar. |
| `values` | `bool` | `true` | Whether each value is written under its bar. |
| `counts` | `bool` | `true` | Whether the comparisons and moves so far are counted next to the name. |
| `notes` | `bool` | `true` | Whether the step's note is written under the bars. |
| `colors` | `CellColors` | — | Colours of the bars in each state (compared, moved, sorted). |
| `muted` | `Color` | `theme.colors.muted` | Colour of the counts, the values and the notes. |
| `name_style` | `TextStyle` | `theme.typography.body` | The font of the algorithm name. |
| `small_style` | `TextStyle` | `theme.typography.caption` | The font of the values, counts and notes. |
| `enter` | `Option<FadeIn>` | `None` | Fade in at the start; `None` for none. |
| `exit` | `Option<FadeOut>` | `None` | Fade out before the end; `None` for none. |

Feature `cs` · [Source](https://github.com/khanhthanhdev/fframes-kit/blob/main/fframes-kit/src/kits/cs/sort.rs#L30)