From b2f32d1ac5977c849654bdbb95a160c24c56da62 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Sun, 22 Oct 2023 17:36:53 +0200
Subject: [PATCH] Clean up

---
 vizro-core/src/scratch.md                     | 26 +++++++++++++++----
 .../src/vizro/models/_components/_tab.py      |  4 +--
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/vizro-core/src/scratch.md b/vizro-core/src/scratch.md
index ba5cac4e6..7a27cc504 100644
--- a/vizro-core/src/scratch.md
+++ b/vizro-core/src/scratch.md
@@ -16,18 +16,34 @@ class Page(VizroBaseModel):
     title: str = Field(..., description="Title to be displayed.")
     layout: Optional[Layout]
     controls: List[ControlType] = []
-    actions: List[ActionsChain] = []
-    path
+    path: Optional[str] = Field(None, description="Path to navigate to page.")
 
 
-class Tab/SubPage(VizroBaseModel):
+class Tab(VizroBaseModel):
     components: List[ComponentType]
-    label: str = Field(..., description="Tab Lable to be displayed.")
     title: Optional[str]  # do we need this one?
-    layout: Optional[Layout]
+    # layout: Optional[Layout]
+
+    @_log_call
+    def build(self):
+        components = [component.build() for component in self.components]
+        return dcc.Tab(
+            html.Div(children=[html.H3(self.title, className="tab-title"), *components]),
+            id=self.id,
+            label=self.title,
+        )
 
 
 class Tabs(VizroBaseModel):
     type: Literal["tabs"] = "tabs"
     tabs: List[Tab] = []
+
+    @_log_call
+    def build(self):
+        return html.Div(
+            [
+                dcc.Tabs(id=self.id, children=[tab.build() for tab in self.tabs], className="tabs_container"),
+            ],
+            className="tabs_container_outer",
+        )
 ```
diff --git a/vizro-core/src/vizro/models/_components/_tab.py b/vizro-core/src/vizro/models/_components/_tab.py
index 762d8c621..3b5292834 100644
--- a/vizro-core/src/vizro/models/_components/_tab.py
+++ b/vizro-core/src/vizro/models/_components/_tab.py
@@ -3,7 +3,6 @@
 from typing import List, Optional
 
 from dash import dcc, html
-from pydantic import Field
 
 from vizro.models import VizroBaseModel
 from vizro.models._models_utils import _log_call
@@ -12,7 +11,6 @@
 
 class Tab(VizroBaseModel):
     components: List[ComponentType]
-    label: str = Field(..., description="Tab label to be displayed.")
     title: Optional[str]  # do we need this one?
     # layout: Optional[Layout]
 
@@ -22,5 +20,5 @@ def build(self):
         return dcc.Tab(
             html.Div(children=[html.H3(self.title, className="tab-title"), *components]),
             id=self.id,
-            label=self.label,
+            label=self.title,
         )