# Move spectrum controls into primary filters \(\#24\) · flambo/atlantis

[View on GitCafe](https://git.cafe/flambo/atlantis/commit/1adc85abff6816b4278b631c22b15a5577de9b0a)

Repository: [flambo/atlantis](https://git.cafe/flambo/atlantis)

Visibility: public

Requested revision: 1adc85abff6816b4278b631c22b15a5577de9b0a

Requested commit: 1adc85abff6816b4278b631c22b15a5577de9b0a

Commit: 1adc85abff6816b4278b631c22b15a5577de9b0a

Tree: 02874b05d4ec212a50f390b15e2d38dce08e8226

Author: oliver

Committer: GitHub

## Message

````
Move spectrum controls into primary filters (#24)

<!-- greptile_comment -->

<h3>Greptile Summary</h3>

Refactored spectrum chart controls by moving address type and router selection from `SpectrumStatsChart` into `PrimaryFilters`, centralizing all filter controls. The chart now accepts a single router string and address type prop instead of managing these internally.

- Removed Source/Destination toggle buttons from chart component header
- Added new "Spectrum Metrics" section in primary filters with radio buttons for router selection and address type
- Spectrum router automatically syncs with enabled routers (selects first enabled router when current selection is disabled)
- Added loading skeleton states for better UX when routers are loading
- Simplified `SpectrumStatsChart` prop interface: `router` (string) and `addressType` replace `routers` (RouterConfig)

<h3>Confidence Score: 5/5</h3>

- This PR is safe to merge with minimal risk
- Clean refactoring that improves UI organization by consolidating controls; no logical errors, proper state management, and consistent patterns throughout
- No files require special attention

<h3>Important Files Changed</h3>




| Filename | Overview |
|----------|----------|
| netflow-webapp/src/lib/components/charts/SpectrumStatsChart.svelte | Simplified props to accept single router string and addressType prop instead of RouterConfig; removed internal address type toggle buttons |
| netflow-webapp/src/lib/components/filters/PrimaryFilters.svelte | Added Spectrum Metrics section with router radio selection and address type controls; includes loading skeleton for routers |
| netflow-webapp/src/lib/components/filters/RouterFilter.svelte | Added loading skeleton state with pulse animation when no routers are available |
| netflow-webapp/src/routes/+page.svelte | Added spectrum router and address type state management with auto-selection logic when routers change; wired up new event handlers |

</details>



<h3>Flowchart</h3>

```mermaid
flowchart TD
    A[+page.svelte] -->|passes spectrumRouter & spectrumAddressType| B[PrimaryFilters]
    A -->|passes router & addressType| C[SpectrumStatsChart]
    B -->|user changes spectrum controls| D{Event Dispatched}
    D -->|spectrumRouterChange| E[Update selectedSpectrumRouter]
    D -->|spectrumAddressTypeChange| F[Update selectedSpectrumAddressType]
    E --> G[Check if router in enabled list]
    G -->|not enabled| H[Auto-select first enabled router]
    G -->|enabled| I[Keep selection]
    A -->|routersChange event| J{Router Config Changed}
    J -->|spectrum router disabled| H
    J -->|spectrum router still enabled| I
    B -->|radio buttons for router selection| K[Spectrum Metrics Section]
    B -->|radio buttons for address type| K
    K -->|derived from routers prop| L[Filter enabled routers]
    C -->|receives single router string| M[Fetch spectrum data]
    C -->|receives addressType prop| N[Display correct spectrum]
```

<sub>Last reviewed commit: 8d78459</sub>

<!-- greptile_other_comments_section -->

<!-- /greptile_comment -->
````

## Parents

- [9616eae37d8b2f3fef54a030477f6df7e507dcfb](https://git.cafe/flambo/atlantis/commit/9616eae37d8b2f3fef54a030477f6df7e507dcfb?format=markdown)

- [8d78459a717642570faf071306588753014cebcc](https://git.cafe/flambo/atlantis/commit/8d78459a717642570faf071306588753014cebcc?format=markdown)

[Source at this commit](https://git.cafe/flambo/atlantis/tree/1adc85abff6816b4278b631c22b15a5577de9b0a?format=markdown)