interactive legend

app.py

@@ -80,8 +80,8 @@ def data_comparison(df):
     ).interactive()
 
     legend = alt.Chart(df).mark_point(size=100, filled=True).encode(
-        x=alt.X("label"),
-        y=alt.Y('cluster:N', axis=alt.Axis(orient='right'), title=""),
+        x=alt.X("label:N"),
+        y=alt.Y('cluster:N', axis=alt.Axis(orient='right'), sort='descending', title=''),
         shape=alt.Shape('label:N', scale=alt.Scale(
         range=['circle', 'diamond']), legend=None),
         color=color,
@@ -247,6 +247,22 @@ if __name__ == "__main__":
     data_df['slice'] = 'high-loss'
     data_df['slice'] = data_df['slice'].where(data_df['loss'] > high_loss, 'low-loss') 
 
+    with lcol:
+        st.markdown('<h3>Error Slices</h3>',unsafe_allow_html=True)
+        with st.expander("How to read the table:"):
+            st.markdown("* *Error slice* refers to the subset of evaluation dataset the model performs poorly on.")
+            st.markdown("* The table displays model error slices on the evaluation dataset, sorted by loss.")
+            st.markdown("* Each row is an input example that includes the label, model pred, loss, and error cluster.")
+        with st.spinner(text='loading error slice...'):
+            dataframe=read_file_to_df('./assets/data/'+dataset+ '_'+ model+'_error-slices.parquet')
+        #uncomment the next next line to run dynamically and not from file
+        # dataframe = merged[['content', 'label', 'pred', 'loss', 'cluster']].sort_values(
+        #     by=['loss'], ascending=False)
+        # table_html = dataframe.to_html(
+        #     columns=['content', 'label', 'pred', 'loss', 'cluster'], max_rows=50)
+        # table_html = table_html.replace("<th>", '<th align="left">')  # left-align the headers
+            st.write(dataframe,width=900, height=300)
+
     with rcol:
         with st.spinner(text='loading...'):
             st.markdown('<h3>Word Distribution in Error Slice</h3>', unsafe_allow_html=True)
@@ -264,20 +280,6 @@ if __name__ == "__main__":
     if run_kmeans == 'True':
         with st.spinner(text='running kmeans...'):
             merged = kmeans(data_df,num_clusters=num_clusters)
-    with lcol:
-        st.markdown('<h3>Error Slices</h3>',unsafe_allow_html=True)
-        with st.expander("How to read the table:"):
-            st.markdown("* *Error slice* refers to the subset of evaluation dataset the model performs poorly on.")
-            st.markdown("* The table displays model error slices on the evaluation dataset, sorted by loss.")
-            st.markdown("* Each row is an input example that includes the label, model pred, loss, and error cluster.")
-        with st.spinner(text='loading error slice...'):
-            dataframe=read_file_to_df('./assets/data/'+dataset+ '_'+ model+'_error-slices.parquet')
-        #uncomment the next next line to run dynamically and not from file
-        # dataframe = merged[['content', 'label', 'pred', 'loss', 'cluster']].sort_values(
-        #     by=['loss'], ascending=False)
-        # table_html = dataframe.to_html(
-        #     columns=['content', 'label', 'pred', 'loss', 'cluster'], max_rows=50)
-        # table_html = table_html.replace("<th>", '<th align="left">')  # left-align the headers
-            st.write(dataframe,width=900, height=300)
+
     with st.spinner(text='loading visualization...'):
         quant_panel(merged)