Adding multiple models plotting and sidebar

src/display.py

@@ -12,14 +12,14 @@ def display_app():
     st.markdown("# Open LLM Leaderboard Viz")
     st.markdown("This is a visualization of the results in [open-llm-leaderboard/results](https://huggingface.co/datasets/open-llm-leaderboard/results)")
     st.markdown("To select a model, click on the checkbox beside its name.")
-    st.markdown("This displays the top 100 models by default, but you can change that using the number input below.") 
-    st.markdown("By defalut as well, the maximum number of row you can display is 500, it is due to the problem with st__aggrid component loading.")
+    st.markdown("This displays the top 100 models by default, but you can change that using the number input in the sidebar.") 
+    st.markdown("By default as well, the maximum number of row you can display is 500, it is due to the problem with st_aggrid component loading.")
     st.markdown("If your model doesn't show up, please search it by its name.")
 
     dataframe = load_dataframe()
 
     sort_selection = st.selectbox(label = "Sort by:", options = list(dataframe.columns), index = 7)
-    number_of_row = st.number_input("Number of top rows to display", min_value=100, max_value=500, value="min", step=100)
+    number_of_row = st.sidebar.number_input("Number of top rows to display", min_value=100, max_value=500, value="min", step=100)
     ascending = True
     
     if sort_selection is None:
@@ -32,6 +32,8 @@ def display_app():
 
 
     name = st.text_input(label = ":mag: Search by name")
+    selection_mode = st.sidebar.radio(label= "Selection mode for the rows", options = ["single", "multiple"], index=0)
+    st.sidebar.write("In multiple mode, you can select up to three models. If you select more than three models, only the first three will be displayed and plotted.")
     len_name_input = len(name) 
     if len_name_input > 0:
         dataframe_by_search = search_by_name(name)
@@ -55,7 +57,7 @@ def display_app():
 
     #Infer basic colDefs from dataframe types
     gb = GridOptionsBuilder.from_dataframe(dataframe_display)
-    gb.configure_selection(selection_mode = "single", use_checkbox=True)
+    gb.configure_selection(selection_mode = selection_mode, use_checkbox=True)
     gb.configure_grid_options(domLayout='normal')
     gridOptions = gb.build()
 
@@ -77,9 +79,9 @@ def display_app():
 
     with column2:
         if grid_response['selected_rows'] is not None and len(grid_response['selected_rows']) > 0:
-            figure = plot_radar_chart_rows(rows=grid_response['selected_rows'])
+            figure = plot_radar_chart_rows(rows=grid_response['selected_rows'][:3])
             #figure = plot_radar_chart_name(dataframe= dataframe, model_name=grid_response['selected_rows'][0]["model_name"])
-            st.plotly_chart(figure, use_container_width=True)
+            st.plotly_chart(figure, use_container_width=False)
         else:
             if len(subdata)>0:
                 figure = plot_radar_chart_name(dataframe=subdata, model_name=model_name)

src/plot.py

@@ -7,6 +7,8 @@ import pandas as pd
 fillcolor = "#FFD21E"
 line_color = "#FF9D00"
 
+fill_color_list = [fillcolor, "#F05998", "#40BAF0"]
+line_color_list = [line_color, "#5E233C", "#194A5E"]
 # opacity of the plot
 opacity = 0.75
 
@@ -109,7 +111,7 @@ def plot_radar_chart_name(dataframe: pd.DataFrame, model_name: str, categories:
 
 
 #@st.cache_data
-def plot_radar_chart_rows(rows: object, columns:list = columns, categories: list = categories, fillcolor: str = fillcolor, line_color:str = line_color):
+def plot_radar_chart_rows(rows: object, columns:list = columns, categories: list = categories, fillcolor_list: str = fill_color_list, line_color_list:str = line_color_list):
     """
     plot the results of the model selected by the checkbox
     
@@ -124,22 +126,27 @@ def plot_radar_chart_rows(rows: object, columns:list = columns, categories: list
     dataset = pd.DataFrame(rows, columns=columns)
     data = dataset[categories].to_numpy()
     data  = data.astype(float)
+    showLegend = False
+    if len(rows) > 1:
+        showLegend = True
+
     
     # add data to close the area of the radar chart
     data = np.append(data, data[:,0].reshape((-1,1)), axis=1)
     categories_theta = categories.copy()
     categories_theta.append(categories[0])
      
-    #print("Printing data ", data, " for ", model_name)
+    opacity = 0.75
     for i in range(len(dataset)):
-
+      colors = fillcolor_list[i]
+      
       fig.add_trace(go.Scatterpolar(
             r=data[i,:],
             theta=categories_theta,
             fill='toself',
-            fillcolor = fillcolor,
+            fillcolor = colors,
             opacity = opacity,
-            line=dict(color = line_color),
+            line=dict(color = line_color_list[i]),
             name= dataset.loc[i,"model_name"]
       ))
       fig.update_layout(
@@ -148,7 +155,8 @@ def plot_radar_chart_rows(rows: object, columns:list = columns, categories: list
             visible=True,
             range=[0, 100.]
           )),
-        showlegend=False
+        showlegend=showLegend
       )
+      opacity -= .2
 
     return fig