Update

app_lib/viz.py

@@ -17,35 +17,48 @@ def _viz_rank(results):
 
     sorted_width = 1 - sorted_tau
     sorted_width /= sorted_width.max()
-    sorted_width *= 100
+    sorted_width *= 80
 
     m = min(len(concepts), 7)
     nrows = np.ceil(len(sorted_concepts) / m).astype(int)
-    with st.container():
-        for i in range(nrows):
-            cols = st.columns(m)
-            for j in range(m):
-                concept_idx = i * m + j
-                if concept_idx >= len(sorted_concepts):
-                    break
-                concept = sorted_concepts[concept_idx]
-                col = cols[j]
-                with col:
-                    circle_style = f"""
-                        background: #418FDE;
-                        border-radius: 50%;
-                        width: {sorted_width[concept_idx]}%;
-                        padding-bottom: {sorted_width[concept_idx]}%;
-                    """
-                    st.markdown(
-                        f"""
-                            <p id='concept'>
-                                <strong>{concept}</strong>
-                            </p>
-                            <div style='{circle_style}'></div>
-                        """,
-                        unsafe_allow_html=True,
-                    )
+    rank_el = ""
+    for concept_idx, concept in enumerate(sorted_concepts):
+        circle_style = (
+            "background: #418FDE;border-radius: 50%;width:"
+            f" {sorted_width[concept_idx]}px;padding-bottom:"
+            f" {sorted_width[concept_idx]}px;"
+        )
+        rank_el += (
+            "<div id='conceptContainer'><p"
+            f" id='concept'><strong>{concept}<strong></p><div id='circleContainer'><div"
+            f" style='{circle_style}'></div></div></div>"
+        )
+    print(rank_el)
+    st.markdown(rank_el, unsafe_allow_html=True)
+    # for i in range(nrows):
+    #     cols = st.columns(m)
+    #     for j in range(m):
+    #         concept_idx = i * m + j
+    #         if concept_idx >= len(sorted_concepts):
+    #             break
+    #         concept = sorted_concepts[concept_idx]
+    #         col = cols[j]
+    #         with col:
+    #             circle_style = f"""
+    #                 background: #418FDE;
+    #                 border-radius: 50%;
+    #                 width: {sorted_width[concept_idx]}%;
+    #                 padding-bottom: {sorted_width[concept_idx]}%;
+    #             """
+    #             st.markdown(
+    #                 f"""
+    #                     <p id='concept'>
+    #                         <strong>{concept}</strong>
+    #                     </p>
+    #                     <div style='{circle_style}'></div>
+    #                 """,
+    #                 unsafe_allow_html=True,
+    #             )
 
 
 def _viz_test(results):

style.css

@@ -39,12 +39,28 @@ h1 {
     }
 }
 
-[data-testid="stMarkdownContainer"]:has(> #concept) {
+[data-testid="stMarkdownContainer"]:has(> #conceptContainer) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+#conceptContainer {
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
+}
 
-    
+#concept {
+    text-align: center;
+}
+
+#circleContainer {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .stSpinner>div {