v0.1.2

Author: mikulatomas

questions/app.py

@@ -1,3 +1,4 @@
+from pydoc import classname
 import dash.html as html
 import dash_bootstrap_components as dbc
 
@@ -15,7 +16,9 @@
 navbar = dbc.NavbarSimple(
     children=[
         dbc.NavItem(dbc.NavLink("Info", id="open-offcanvas", n_clicks=0)),
-        dbc.NavItem(dbc.NavLink("Github", href="https://github.com/mikulatomas/questions")),
+        dbc.NavItem(
+            dbc.NavLink("Github", href="https://github.com/mikulatomas/questions")
+        ),
     ],
     brand="Kaggle Questions Dataset",
     brand_href="/",
@@ -55,10 +58,9 @@
             ),
             dbc.Row(
                 html.Ul(
-                        id="concepts",
-                    ),
+                    id="concepts",
+                ),
                 className="flex-grow-1 overflow-auto full-height-fix pt-2",
-                
             ),
         ],
         className="h-100 d-flex flex-column",
@@ -100,63 +102,87 @@
 
 navigation = dbc.Col(
     html.Div(
-            [   
-                dbc.Row(
-                    [
-                        html.Div(
-                            [
-                                html.H2("Navigation"),
-                            ]
-                        ),
-                    ], className="pt-3 pb-2"
-                ),
-                dbc.Row(
-                    [
-                        html.Div(
-                            [
-                                dbc.Label("More general"),
-                                html.Div(id="upper-concepts"),
-                                dbc.Label("More specific"),
-                                html.Div(id="lower-concepts"),
-                            ]
-                        ),
-                    ],
-                    className="flex-grow-1 overflow-auto full-height-fix",
-                ),
-            ],
-            className="h-100 d-flex flex-column",
-        ),
-    id="navigation", width=2, className="border-right background-gray")
-
+        [
+            dbc.Row(
+                [
+                    html.Div(
+                        [
+                            html.H2("Navigation"),
+                        ]
+                    ),
+                ],
+                className="pt-3 pb-2",
+            ),
+            dbc.Row(
+                [
+                    html.Div(
+                        [
+                            dbc.Label("More general"),
+                            html.Div(id="upper-concepts"),
+                            dbc.Label("More specific"),
+                            html.Div(id="lower-concepts"),
+                        ]
+                    ),
+                ],
+                className="flex-grow-1 overflow-auto full-height-fix",
+            ),
+        ],
+        className="h-100 d-flex flex-column",
+    ),
+    id="navigation",
+    width=2,
+    className="border-right background-gray",
+)
 
-questions = dbc.Col(html.Div(
+tabs = dbc.Tabs(
+    [
+        dbc.Tab(
             [
-                dbc.Row(
-                    id="mca",
-                    className="pt-3 pb-2",
-                ),
                 dbc.Row(
                     [
-                        html.Ul(
-                            id="question-list"
-                        ),
+                        html.Ul(id="question-list"),
                     ],
-                    className="flex-grow-1 overflow-auto full-height-fix",
+                    className="pt-3",
                 ),
             ],
-            className="h-100 d-flex flex-column",
+            label="Questions",
         ),
-    id="questions", className="border-right")
+        dbc.Tab(
+            dbc.Row(
+                id="mca",
+                className="pt-3 pb-2",
+            ),
+            label="MCA Plot",
+        ),
+    ],
+    className="mt-2 mb-2",
+)
+
+questions = dbc.Col(
+    html.Div(
+        tabs,
+        className="h-100 d-flex flex-column",
+    ),
+    id="questions",
+    className="border-right",
+)
 
 
 info = dbc.Offcanvas(
-            html.P(
-                ["Original dataset is avaliable ", html.A("here", href="https://www.kaggle.com/umairnasir14/all-kaggle-questions-on-qoura-dataset"), "."]
+    html.P(
+        [
+            "Original dataset is avaliable ",
+            html.A(
+                "here",
+                href="https://www.kaggle.com/umairnasir14/all-kaggle-questions-on-qoura-dataset",
             ),
-            id="info",
-            title="Kaggle Question Dataset",
-            is_open=False,
-        )
+            ".",
+        ]
+    ),
+    id="info",
+    title="Kaggle Question Dataset",
+    is_open=False,
+)
 
 app.layout = html.Div(
     [

questions/assets/style.css

@@ -95,4 +95,13 @@ h2 {
     font-size: 0.9em;
     line-height: 1.3em;
     border-radius: 3px;
+}
+
+#question-list {
+    height: 80vh;
+    overflow: auto;
+}
+
+#mca {
+    height: 80vh;
 }

questions/callbacks.py

@@ -147,7 +147,7 @@ def update_detail(pathname):
         ]
 
         return metadata, centrality
-    
+
     return ["N/A"], ["N/A"]
 
 
@@ -169,7 +169,7 @@ def update_navigation(pathname):
         lower = navigation_links(concept.lower_neighbors, "up", concept.intent)
 
         return upper, lower
-    
+
     return ["N/A"], ["N/A"]
 
 
@@ -211,15 +211,9 @@ def update_questions(pathname):
 
             fig = mca.to_plotly()
             fig.update_traces(marker={"size": 7})
-            graph = dcc.Graph(id="mca_3d", figure=fig)
-            mca_plot = [
-                html.H2("MCA plot"),
-                dbc.Label("Multiple correspondence analysis (MCA) plot"),
-                graph,
-                html.H2("Questions"),
-            ]
+            mca_plot = [dcc.Graph(id="mca_3d", figure=fig)]
         else:
-            mca_plot = [html.H2("Questions")]
+            mca_plot = []
 
         questions = [
             li_question(
@@ -233,7 +227,7 @@ def update_questions(pathname):
         ]
 
         return mca_plot, questions
-    
+
     return None, []