# Section 1: Graphical representation of end product
```asciidoc ┌───────────────┐
────────────────▶│ Prop: visible │
│ └───────────────┘
│
┌─────┴─────┐
┌─────────────────────────────────┤ el-Dialog ├──────────────────────────────────┐
│ └───────────┘ │
│ │
│ │
┌────────┐ │ ┌───────┐┌───────┐┌───────┐┌───────┐ │
│arTabs[]│◀──────────── │ │ Tab 1 ││ Tab 2 ││ Tab 3 ││ Tab 4 │ │
└────────┘ │ └────┬──┘└───────┘└───────┘└───────┘ │
│ │ │
│ │ │
┌──────────┐ │ │ │
│vsTabName │◀────────────┼────── │
└──────────┘ │ │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
```
# Section 2: Feature to code relationship
| # | Feature | Client side state | Server side state | Component | Client side code | Server side code |
|---|---|---|---|---|---|---|
| 1 | Dialog containing tabs | vblIsdialogHoldingTabsInCLVisible | None | ctShowAddAndRemoveTabsInDialog.vue | Dialog containing tabs | None |
| 2 | Add a tab | arTabs | None | ctSearchToAddTabInCL.vue | Add a tab | None |
| 3 | Remove a tab | same as 2 | None | same as 1 | Remove a tab | None |
| 4 | KB interaction | vsSelectedTabId | None | same as 1 | KB interaction | None |
| 5 | Set of tabs | same as 2 | None | ctSetOfTabs.vue | Set of tabs | None |