Update app.py

app.py

@@ -268,11 +268,11 @@ def plot_properties_dashboard(df: pd.DataFrame):
         ("Category", "@Category")
     ])
     
-    # Common plot configuration
+    # Common plot configuration - square plots with no background fill
     plot_config = {
-        'height': 400, 'tools': [hover, 'pan,wheel_zoom,box_zoom,reset,save'],
-        'sizing_mode': 'stretch_width', 'background_fill_color': '#0F0F0F',
-        'border_fill_color': '#0F0F0F', 'outline_line_color': '#333333'
+        'width': 400, 'height': 400, 'tools': [hover, 'pan,wheel_zoom,box_zoom,reset,save'],
+        'sizing_mode': 'fixed', 'background_fill_color': None,
+        'border_fill_color': None, 'outline_line_color': '#333333'
     }
     
     def style_plot(p, x_label, y_label, title):
@@ -340,7 +340,7 @@ def plot_properties_dashboard(df: pd.DataFrame):
 
     # Plot 4: Enhanced Donut Chart
     p4_config = plot_config.copy()
-    p4_config.update({'tools': "hover", 'x_range': (-1.2, 1.2), 'y_range': (-1.2, 1.2)})
+    p4_config.update({'tools': "hover", 'x_range': (-1.0, 1.0), 'y_range': (-1.0, 1.0)})
     p4 = figure(title="Drug-Likeness Distribution", **p4_config)
     
     # Calculate percentages and create donut chart
@@ -365,16 +365,29 @@ def plot_properties_dashboard(df: pd.DataFrame):
     
     donut_source = ColumnDataSource(data)
     
-    # Create donut using annular wedges (outer ring)
-    p4.annular_wedge(x=0, y=0, inner_radius=0.35, outer_radius=0.6,
+    # Create donut using annular wedges (outer ring) - sized to fit within boundaries
+    p4.annular_wedge(x=0, y=0, inner_radius=0.25, outer_radius=0.45,
                      start_angle='start_angle', end_angle='end_angle',
                      line_color="white", line_width=3, fill_color='color', 
                      legend_field='category', source=donut_source)
     
+    # Add percentage text to each slice
+    for i, row in data.iterrows():
+        # Calculate middle angle for text positioning
+        mid_angle = (row['start_angle'] + row['end_angle']) / 2
+        # Position text at middle radius of the annular wedge
+        text_radius = 0.35
+        x_pos = text_radius * cos(mid_angle)
+        y_pos = text_radius * sin(mid_angle)
+        
+        p4.text([x_pos], [y_pos], text=[f"{row['percentage']:.1f}%"], 
+                text_align="center", text_baseline="middle", 
+                text_color="white", text_font_size="11pt", text_font_style="bold")
+    
     # Add center text
     p4.text([0], [0], text=[f"{len(df)}\nCompounds"], 
             text_align="center", text_baseline="middle", 
-            text_color="white", text_font_size="16pt", text_font_style="bold")
+            text_color="white", text_font_size="14pt", text_font_style="bold")
     
     # Custom hover for donut
     p4.add_tools(HoverTool(tooltips=[("Category", "@category"), 
@@ -384,9 +397,9 @@ def plot_properties_dashboard(df: pd.DataFrame):
     style_plot(p4, "", "", "Compound Classification")
     p4.axis.visible = False
     p4.grid.visible = False
-    
+
     # Create responsive grid layout
-    grid = gridplot([[p1, p2], [p3, p4]], sizing_mode='stretch_width', 
+    grid = gridplot([[p1, p2], [p3, p4]], sizing_mode='fixed', 
                    toolbar_location='right', merge_tools=True)
 
     return grid, "✅ Generated enhanced molecular properties dashboard."