# xenoimpact/tachyon-showcase architecture

> Architecture diagram of the GitHub repository xenoimpact/tachyon-showcase, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/xenoimpact/tachyon-showcase
- Repository: https://github.com/xenoimpact/tachyon-showcase

## Overview

Tachyon Showcase is a Vue application demonstrating the Tachyon data-grid component, with shared mock data and grid configuration. The main user workflow is opening the introduction or a demo from the routed navigation and viewing grid capabilities; dedicated demos cover editing, filtering, trees, telemetry, virtualization, cell visuals, and Excel I/O. The sampled sources show application setup, routing, theme state, shared-data generation, collection tracking, and export-to-worker flow. Other demo internals are not sampled, so their connections are limited to documented routes.

Main entry points: [`packages/vue/src/router/index.ts`](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/router/index.ts) (Demo router), [`packages/vue/src/config/tachyon/index.ts`](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/index.ts) (Grid setup), [`packages/vue/src/main.ts`](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/main.ts) (Vue bootstrap), [`packages/vue/src/App.vue`](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/App.vue) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Vue Showcase"]
  node_entry["Vue bootstrap<br/>[main.ts]"]
  node_shell["App shell<br/>[App.vue]"]
  node_routes["Demo router<br/>[index.ts]"]
  node_intro["Introduction"]
  node_basic["Basic grid<br/>[BasicGridDemo.vue]"]
  node_virtual["Virtual scroll"]
  node_editor["Cell editor<br/>[CellEditorDemo.vue]"]
  node_visual["Cell visuals<br/>[CellVisualDemo.vue]"]
  node_filter["Filter grid<br/>[FilterGridDemo.vue]"]
  node_tree["Tree grid<br/>[TreeGridDemo.vue]"]
  node_telemetry["Live telemetry"]
  node_excelview["Excel demo<br/>[ExcelIoDemo.vue]"]
  node_pixel["Pixel matrix"]
  node_theme["Theme state<br/>[themeStore.ts]"]
end

subgraph group_grid["Grid Configuration"]
  node_tachyon["Grid setup<br/>[index.ts]"]
  node_columns["Custom columns"]
  node_checkrender["Check renderers"]
  node_filters["Filter columns"]
  node_filterpopup["Filter popup<br/>[FilterSetPopup.vue]"]
  node_collection["Change tracking"]
end

subgraph group_shared["Shared Data"]
  node_mockorders["Order data<br/>[orderFactory.ts]"]
  node_orderdata["Order model<br/>[order.ts]"]
  node_series["Series data<br/>[seriesFactory.ts]"]
  node_seriesdata["Series dataset<br/>[seriesData.ts]"]
  node_treedata["Tree dataset<br/>[treeData.ts]"]
  node_treefactory["Tree factory<br/>[treeNodeFactory.ts]"]
  node_treemodel["Tree model<br/>[tree.ts]"]
end

subgraph group_excel["Excel I/O"]
  node_xlsxexport["XLSX export<br/>[export.ts]"]
  node_xlsximport["XLSX import<br/>[import.ts]"]
  node_worker["Workbook worker<br/>[XlsxWorker.ts]"]
end

node_user(("Showcase user"))

node_user -->|"opens app"| node_entry
node_entry -->|"mounts"| node_shell
node_entry -->|"installs router"| node_routes
node_entry -->|"installs grid setup"| node_tachyon
node_shell -->|"uses theme state"| node_theme
node_shell -->|"reads route state"| node_routes
node_routes -->|"routes to"| node_intro
node_routes -->|"routes to"| node_basic
node_routes -->|"routes to"| node_virtual
node_routes -->|"routes to"| node_editor
node_routes -->|"routes to"| node_visual
node_routes -->|"routes to"| node_filter
node_routes -->|"routes to"| node_tree
node_routes -->|"routes to"| node_telemetry
node_routes -->|"routes to"| node_excelview
node_routes -->|"routes to"| node_pixel
node_tachyon -->|"registers addon"| node_collection
node_tachyon -->|"registers addon"| node_xlsxexport
node_tachyon -->|"registers addon"| node_xlsximport
node_tachyon -->|"exports column"| node_columns
node_columns -->|"uses renderers"| node_checkrender
node_filters -->|"uses popup"| node_filterpopup
node_mockorders -->|"builds model"| node_orderdata
node_seriesdata -->|"generates items"| node_series
node_treedata -->|"builds nodes"| node_treefactory
node_treedata -->|"uses model"| node_treemodel
node_xlsxexport -->|"sends workbook data"| node_worker

click node_entry "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/main.ts"
click node_shell "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/App.vue"
click node_routes "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/router/index.ts"
click node_intro "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/IntroductionView.vue"
click node_basic "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/BasicGridDemo.vue"
click node_virtual "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/VirtualScrollDemo.vue"
click node_editor "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/CellEditorDemo.vue"
click node_visual "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/CellVisualDemo.vue"
click node_filter "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/FilterGridDemo.vue"
click node_tree "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/TreeGridDemo.vue"
click node_telemetry "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/RealtimeTelemetryDemo.vue"
click node_excelview "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/ExcelIoDemo.vue"
click node_pixel "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/PixelMatrixDemo.vue"
click node_theme "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/stores/themeStore.ts"
click node_tachyon "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/index.ts"
click node_columns "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/columns/TachyonCheckColumn.ts"
click node_checkrender "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/renderers/TachyonCheckItemRenderer.vue"
click node_filters "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/columns/TachyonSetFilterColumn.ts"
click node_filterpopup "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/renderers/FilterSetPopup.vue"
click node_collection "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/addons/collection/CollectionManager.ts"
click node_mockorders "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/factories/orderFactory.ts"
click node_orderdata "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/types/order.ts"
click node_series "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/factories/seriesFactory.ts"
click node_seriesdata "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/seriesData.ts"
click node_treedata "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/treeData.ts"
click node_treefactory "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/factories/treeNodeFactory.ts"
click node_treemodel "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/types/tree.ts"
click node_xlsxexport "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/addons/xlsx/export.ts"
click node_xlsximport "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/addons/xlsx/import.ts"
click node_worker "https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/workers/XlsxWorker.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_shell,node_routes,node_intro,node_basic,node_virtual,node_editor,node_visual,node_filter,node_tree,node_telemetry,node_excelview,node_pixel,node_theme,node_user toneBlue
class node_tachyon,node_columns,node_checkrender,node_filters,node_filterpopup,node_collection toneAmber
class node_mockorders,node_orderdata,node_series,node_seriesdata,node_treedata,node_treefactory,node_treemodel toneMint
class node_xlsxexport,node_xlsximport,node_worker toneRose
```

## Components

### Vue Showcase

- [Vue bootstrap](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/main.ts): `packages/vue/src/main.ts`
- [App shell](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/App.vue): `packages/vue/src/App.vue`
- [Demo router](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/router/index.ts): `packages/vue/src/router/index.ts`
- [Introduction](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/IntroductionView.vue): `packages/vue/src/views/IntroductionView.vue`
- [Basic grid](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/BasicGridDemo.vue): `packages/vue/src/views/BasicGridDemo.vue`
- [Virtual scroll](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/VirtualScrollDemo.vue): `packages/vue/src/views/VirtualScrollDemo.vue`
- [Cell editor](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/CellEditorDemo.vue): `packages/vue/src/views/CellEditorDemo.vue`
- [Cell visuals](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/CellVisualDemo.vue): `packages/vue/src/views/CellVisualDemo.vue`
- [Filter grid](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/FilterGridDemo.vue): `packages/vue/src/views/FilterGridDemo.vue`
- [Tree grid](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/TreeGridDemo.vue): `packages/vue/src/views/TreeGridDemo.vue`
- [Live telemetry](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/RealtimeTelemetryDemo.vue): `packages/vue/src/views/RealtimeTelemetryDemo.vue`
- [Excel demo](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/ExcelIoDemo.vue): `packages/vue/src/views/ExcelIoDemo.vue`
- [Pixel matrix](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/views/PixelMatrixDemo.vue): `packages/vue/src/views/PixelMatrixDemo.vue`
- [Theme state](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/stores/themeStore.ts): `packages/vue/src/stores/themeStore.ts`

### Grid Configuration

- [Grid setup](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/index.ts): `packages/vue/src/config/tachyon/index.ts`
- [Custom columns](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/columns/TachyonCheckColumn.ts): `packages/vue/src/config/tachyon/columns/TachyonCheckColumn.ts`
- [Check renderers](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/renderers/TachyonCheckItemRenderer.vue): `packages/vue/src/config/tachyon/renderers/TachyonCheckItemRenderer.vue`
- [Filter columns](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/columns/TachyonSetFilterColumn.ts): `packages/vue/src/config/tachyon/columns/TachyonSetFilterColumn.ts`
- [Filter popup](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/renderers/FilterSetPopup.vue): `packages/vue/src/config/tachyon/renderers/FilterSetPopup.vue`
- [Change tracking](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/addons/collection/CollectionManager.ts): `packages/vue/src/config/tachyon/addons/collection/CollectionManager.ts`

### Shared Data

- [Order data](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/factories/orderFactory.ts): `packages/shared/src/factories/orderFactory.ts`
- [Order model](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/types/order.ts): `packages/shared/src/types/order.ts`
- [Series data](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/factories/seriesFactory.ts): `packages/shared/src/factories/seriesFactory.ts`
- [Series dataset](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/seriesData.ts): `packages/shared/src/seriesData.ts`
- [Tree dataset](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/treeData.ts): `packages/shared/src/treeData.ts`
- [Tree factory](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/factories/treeNodeFactory.ts): `packages/shared/src/factories/treeNodeFactory.ts`
- [Tree model](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/shared/src/types/tree.ts): `packages/shared/src/types/tree.ts`

### Excel I/O

- [XLSX export](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/addons/xlsx/export.ts): `packages/vue/src/config/tachyon/addons/xlsx/export.ts`
- [XLSX import](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/config/tachyon/addons/xlsx/import.ts): `packages/vue/src/config/tachyon/addons/xlsx/import.ts`
- [Workbook worker](https://github.com/xenoimpact/tachyon-showcase/blob/main/packages/vue/src/workers/XlsxWorker.ts): `packages/vue/src/workers/XlsxWorker.ts`

### Other components

- **Showcase user**

## Connections

- Showcase user → Vue bootstrap: opens app (evidence: `packages/vue/src/main.ts`)
- Vue bootstrap → App shell: mounts (evidence: `packages/vue/src/main.ts`)
- Vue bootstrap → Demo router: installs router (evidence: `packages/vue/src/main.ts`)
- Vue bootstrap → Grid setup: installs grid setup (evidence: `packages/vue/src/main.ts`)
- App shell → Theme state: uses theme state (evidence: `packages/vue/src/App.vue`)
- App shell → Demo router: reads route state (evidence: `packages/vue/src/App.vue`)
- Demo router → Introduction: routes to (evidence: `packages/vue/src/router/index.ts`)
- Demo router → Basic grid: routes to (evidence: `packages/vue/src/router/index.ts`)
- Demo router → Virtual scroll: routes to (evidence: `packages/vue/src/router/index.ts`)
- Demo router → Cell editor: routes to (evidence: `packages/vue/src/router/index.ts`)
- Demo router → Cell visuals: routes to (evidence: `packages/vue/src/router/index.ts`)
- Demo router → Filter grid: routes to (evidence: `packages/vue/src/router/index.ts`)
- Demo router → Tree grid: routes to (evidence: `packages/vue/src/router/index.ts`)
- Demo router → Live telemetry: routes to (evidence: `packages/vue/src/router/index.ts`)
- Demo router → Excel demo: routes to (evidence: `packages/vue/src/router/index.ts`)
- Demo router → Pixel matrix: routes to (evidence: `packages/vue/src/router/index.ts`)
- Grid setup → Change tracking: registers addon (evidence: `packages/vue/src/config/tachyon/index.ts`)
- Grid setup → XLSX export: registers addon (evidence: `packages/vue/src/config/tachyon/index.ts`)
- Grid setup → XLSX import: registers addon (evidence: `packages/vue/src/config/tachyon/index.ts`)
- Grid setup → Custom columns: exports column (evidence: `packages/vue/src/config/tachyon/index.ts`)
- Custom columns → Check renderers: uses renderers (evidence: `packages/vue/src/config/tachyon/columns/TachyonCheckColumn.ts`)
- Filter columns → Filter popup: uses popup (evidence: `packages/vue/src/config/tachyon/renderers/FilterSetPopup.vue`)
- Order data → Order model: builds model (evidence: `packages/shared/src/factories/orderFactory.ts`)
- Series dataset → Series data: generates items (evidence: `packages/shared/src/seriesData.ts`)
- Tree dataset → Tree factory: builds nodes (evidence: `packages/shared/src/treeData.ts`)
- Tree dataset → Tree model: uses model (evidence: `packages/shared/src/treeData.ts`)
- XLSX export → Workbook worker: sends workbook data (evidence: `packages/vue/src/config/tachyon/addons/xlsx/export.ts`)