add formatting and fix bug

app.py

@@ -119,32 +119,80 @@ slider2.update_layout(font_family="Inter")
 # App layout
 app.layout = html.Div(
     [
-        html.Div(children='Visualizing the Open Model Ecosystem', style={'fontSize': 28, 'fontWeight': 'bold', 'marginBottom': 10}),
-        html.Div(children='An interactive dashboard to explore trends in open models on Hugging Face', style={'fontSize': 16, 'marginBottom': 20}),
-        html.Hr(),
-        dcc.Tabs([
-            dcc.Tab(label='Model Market Share', children=[
-                html.Div([
-                    dcc.Graph(id='stacked-area-chart'),
-                    dcc.Graph(figure=slider, id='time-slider-stacked'),
-                ]),
-                html.Div([
-                    dcc.Graph(id='world-map-with-slider'),
-                    dcc.Graph(id='leaderboard'),
-                    dcc.Graph(figure=slider2, id='time-slider'),
+        html.Div(
+            [
+                html.Div(children='Visualizing the Open Model Ecosystem', style={'fontSize': 28, 'fontWeight': 'bold', 'marginBottom': 6}),
+                html.Div(children='An interactive dashboard to explore trends in open models on Hugging Face', style={'fontSize': 16, 'marginBottom': 12}),
+                html.Hr(style={'marginTop': 8, 'marginBottom': 8}),
+            ],
+            style={'textAlign': 'center'}
+        ),
+        html.Div(
+            [
+                dcc.Tabs([
+                    dcc.Tab(label='Model Market Share', children=[
+                        html.Div([
+                            html.Div(children='Select time range to update all graphs below:', style={'fontSize': 16, 'marginBottom': 6, 'marginTop': 10}),
+                            dcc.Graph(figure=slider2, id='time-slider', style={'height': '100px'}),
+                            html.Div(
+                                id='output-container-range-slider',
+                                style={
+                                    'textAlign': 'center',
+                                    'fontSize': 20,
+                                    'marginBottom': 15,
+                                    'marginTop': 30,
+                                    'backgroundColor': 'white',
+                                    'borderRadius': '12px',
+                                    'boxShadow': '0 2px 12px rgba(0,0,0,0.10)',
+                                    'padding': '18px',
+                                    'display': 'inline-block',
+                                }
+                            ),
+                        ], style={'marginBottom': 12, 'justifyContent': 'center', 'textAlign': 'center'}),
+                        html.Div([
+                            dcc.Graph(id='stacked-area-chart'),
+                        ], style={'marginBottom': 12}),
+                        html.Div([
+                            html.Div(
+                                dcc.Graph(id='world-map-with-slider'),
+                                style={'display': 'flex', 'justifyContent': 'center'}
+                            ),
+                            dcc.Graph(id='leaderboard'),
+                        ], style={'marginBottom': 12})
+                    ]),
+                    dcc.Tab(label='Model Characteristics', children=[
+                        dcc.Graph(id='language-concentration-chart'),
+                        html.Div([
+                            dcc.Dropdown(['Language Concentration', 'Architecture', 'License', 'Method'], 'Language Concentration', id='dropdown'),
+                        ], style={'marginTop': 6}),
+                    ]),
                 ])
-            ]),
-            dcc.Tab(label='Model Characteristics', children=[
-                dcc.Graph(id='language-concentration-chart'),
-                html.Div([
-                    dcc.Dropdown(['Language Concentration', 'Architecture', 'License', 'Method'], 'Language Concentration', id='dropdown'),
-                ]),
-            ]),
-        ])
+            ],
+            style={
+                'backgroundColor': 'white',
+                'borderRadius': '18px',
+                'boxShadow': '0 4px 24px rgba(0,0,0,0.10)',
+                'padding': '32px',
+                'margin': '32px auto',
+                'maxWidth': '1250px',
+            }
+        )
     ],
-    style={'fontFamily': 'Inter'}
+    style={'fontFamily': 'Inter', 'backgroundColor': '#f7f7fa', 'minHeight': '100vh'}
 )
 
+@app.callback(
+    Output('output-container-range-slider', 'children'),
+    [Input('time-slider', 'relayoutData')]
+)
+def update_output(relayout_data):
+    if relayout_data and 'xaxis.range[0]' in relayout_data and 'xaxis.range[1]' in relayout_data:
+        start_time = pd.to_datetime(relayout_data['xaxis.range[0]']).strftime('%Y-%m-%d')
+        end_time = pd.to_datetime(relayout_data['xaxis.range[1]']).strftime('%Y-%m-%d')
+        return f'Selected time range: {start_time} to {end_time}'
+    else:
+        return 'Selected time range: All data'
+    
 # On dropdown change, update graph
 @app.callback(
     Output('language-concentration-chart', 'figure'),
@@ -175,7 +223,7 @@ def update_map(relayout_data):
         return updated_fig
     else:
         return fig6
-    
+
 @app.callback(
     Output('leaderboard', 'figure'),
     [Input('time-slider', 'relayoutData')]
@@ -194,7 +242,7 @@ def update_leaderboard(relayout_data):
     
 @app.callback(
     Output('stacked-area-chart', 'figure'),
-    [Input('time-slider-stacked', 'relayoutData')]
+    [Input('time-slider', 'relayoutData')]
 )
 def update_stacked_area(relayout_data):
     if relayout_data and 'xaxis.range[0]' in relayout_data and 'xaxis.range[1]' in relayout_data:

graphs/model_market_share.py

@@ -364,7 +364,7 @@ def create_plotly_world_map(
     # Update layout
     fig.update_layout(
         title=dict(
-            text=f"Model Downloads by Country - Time Range Analysis<br><sub>Select time range below to update map</sub>",
+            text="Model Downloads by Country",
             x=0.5,
             font=dict(size=20, family="Inter, system-ui, sans-serif", color="#212529"),
         ),
@@ -388,6 +388,11 @@ def create_plotly_world_map(
         bgcolor="#ffffff",
     )
 
+    # Remove excessive whitespace below the map by adjusting subplot row heights and margins
+    fig.update_layout(
+        margin=dict(l=0, r=120, t=100, b=20),  # Reduce bottom margin
+        height=600,  # Reduce overall figure height
+    )
     return fig
 
 def create_plotly_range_slider(df):
@@ -557,7 +562,7 @@ def create_leaderboard(country_df, developer_df, model_df, start_time=None, end_
     fig.update_layout(
         height=400,
         showlegend=False,
-        title_text=f"Leaderboards ({start_time} → {end_time})"
+        title_text="Leaderboards"
     )
 
     return fig