asta-bench-leaderboard

Running

App Files Files Community

Amber Tanaka commited on Aug 22

Commit

268d785

unverified ·

1 Parent(s): c039999

Fix the table legend and tooltips (#84)

Browse files

Files changed (3) hide show

app.py +61 -1
content.py +5 -30
ui_components.py +3 -3

app.py CHANGED Viewed

@@ -40,7 +40,67 @@ redirect_script = """
     if (window.location.pathname === '/') { window.location.replace('/home'); }
 </script>
 """
 # --- Theme Definition ---
 theme = gr.themes.Base(
     primary_hue=gr.themes.Color(c100="#CFF5E8", c200="#B7EFDD", c300="#9FEAD1", c400="#87E5C5", c50="#E7FAF3", c500="#6FE0BA", c600="#57DBAF", c700="#3FD5A3", c800="#27D09C", c900="#0FCB8C", c950="#0fcb8c"),
@@ -133,7 +193,7 @@ final_css = css + f"""
 }}
 """
 # --- Gradio App Definition ---
-demo = gr.Blocks(theme=theme, css=final_css, head=scroll_script + redirect_script)
 with demo.route("Home", "/home"):
     build_main_page()

     if (window.location.pathname === '/') { window.location.replace('/home'); }
 </script>
 """
+tooltip_script = """
+<script>
+function initializeSmartTooltips() {
+    // Find all tooltip trigger icons
+    const tooltipIcons = document.querySelectorAll('.tooltip-icon-legend');
+    tooltipIcons.forEach(icon => {
+        // Find the tooltip card associated with this icon
+        const tooltipCard = icon.querySelector('.tooltip-card');
+        if (!tooltipCard) return;
+        // Move the card to the end of the <body>. This is the KEY to escaping
+        // any parent containers that might clip it.
+        document.body.appendChild(tooltipCard);
+        // --- MOUSE HOVER EVENT ---
+        icon.addEventListener('mouseenter', () => {
+            // Get the exact position of the icon on the screen
+            const iconRect = icon.getBoundingClientRect();
+            // Get the dimensions of the tooltip card
+            const cardRect = tooltipCard.getBoundingClientRect();
+            // Calculate the ideal top position (above the icon with a 10px gap)
+            const top = iconRect.top - cardRect.height - 10;
+            // --- Smart Centering Logic ---
+            // Start by calculating the perfect center
+            let left = iconRect.left + (iconRect.width / 2) - (cardRect.width / 2);
+            // Check if it's going off the left edge of the screen
+            if (left < 10) {
+                left = 10; // Pin it to the left with a 10px margin
+            }
+            // Check if it's going off the right edge of the screen
+            if (left + cardRect.width > window.innerWidth) {
+                left = window.innerWidth - cardRect.width - 10; // Pin it to the right
+            }
+            // Apply the calculated position and show the card
+            tooltipCard.style.top = `${top}px`;
+            tooltipCard.style.left = `${left}px`;
+            tooltipCard.classList.add('visible');
+        });
+        // --- MOUSE LEAVE EVENT ---
+        icon.addEventListener('mouseleave', () => {
+            // Hide the card
+            tooltipCard.classList.remove('visible');
+        });
+    });
+}
+// Poll the page until the tooltips exist, then run the initialization.
+const tooltipInterval = setInterval(() => {
+    if (document.querySelector('.tooltip-icon-legend')) {
+        clearInterval(tooltipInterval);
+        initializeSmartTooltips();
+    }
+}, 200);
+</script>
+"""
 # --- Theme Definition ---
 theme = gr.themes.Base(
     primary_hue=gr.themes.Color(c100="#CFF5E8", c200="#B7EFDD", c300="#9FEAD1", c400="#87E5C5", c50="#E7FAF3", c500="#6FE0BA", c600="#57DBAF", c700="#3FD5A3", c800="#27D09C", c900="#0FCB8C", c950="#0fcb8c"),
 }}
 """
 # --- Gradio App Definition ---
+demo = gr.Blocks(theme=theme, css=final_css, head=scroll_script + redirect_script + tooltip_script)
 with demo.route("Home", "/home"):
     build_main_page()

content.py CHANGED Viewed

@@ -615,19 +615,15 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
     display: inline-block;
 }
-/* The HTML pop-up card.*/
 .tooltip-card {
     /* Hiding mechanism */
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s;
     pointer-events: none;
     /* Card appearance */
-    position: absolute;
-    bottom: 125%;
-    left: 50%;
-    transform: translateX(-50%);
     z-index: 1000;
     background-color: #083c40;
     color: #e5e7eb;
@@ -637,12 +633,10 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
     max-width: 400px;
     text-align: left;
 }
-.tooltip-icon-legend:hover .tooltip-card {
     opacity: 1;
     visibility: visible;
-}
 .tooltip-card h3 {
     font-size: 18px;
     color: #fff;
@@ -689,26 +683,6 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
     display: flex;
     flex-direction: column;
 }
-@media (max-width: 800px) {
-    .tooltip-card {
-        transform: none;
-        left: 10px;
-        max-width: calc(100vw - 100px);
-    }
-    .tooltip-icon-legend:hover::before {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-}
-.tooltip-pin-left .tooltip-card {
-    left: 0;
-    transform: none;
-}
-.tooltip-pin-right .tooltip-card {
-    right: 0;
-    left: auto;
-    transform: none;
-}
 .table-legend-item {
     display: flex;
     align-items: center;
@@ -716,6 +690,7 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
     margin-top: 8px;
     flex-wrap: wrap;
 }
 /* About Page CSS */
 #about-page-content-wrapper {
     margin-left: auto;

     display: inline-block;
 }
+/* The HTML pop-up card tooltips.*/
 .tooltip-card {
     /* Hiding mechanism */
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s;
     pointer-events: none;
     /* Card appearance */
+    position: fixed;
     z-index: 1000;
     background-color: #083c40;
     color: #e5e7eb;
     max-width: 400px;
     text-align: left;
 }
+.tooltip-card.visible {
     opacity: 1;
     visibility: visible;
+}
 .tooltip-card h3 {
     font-size: 18px;
     color: #fff;
     display: flex;
     flex-direction: column;
 }
 .table-legend-item {
     display: flex;
     align-items: center;
     margin-top: 8px;
     flex-wrap: wrap;
 }
 /* About Page CSS */
 #about-page-content-wrapper {
     margin-left: auto;

ui_components.py CHANGED Viewed

@@ -324,11 +324,11 @@ def create_legend_markdown(which_table: str) -> str:
     descriptions_tooltip_content = build_descriptions_tooltip_content(which_table)
     trophy_uri = get_svg_as_data_uri("assets/trophy.svg")
     legend_markdown = f"""
-    <div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0px; font-size: 13px; padding-bottom: 8px;">
         <div> <!-- Container for the Pareto section -->
             <b>Pareto</b>
-            <span class="tooltip-icon-legend tooltip-pin-left">
                 ⓘ
                 <span class="tooltip-card">{pareto_tooltip_content}</span>
             </span>
@@ -366,7 +366,7 @@ def create_legend_markdown(which_table: str) -> str:
         <div><!-- Container for the Column Descriptions section -->
             <b>Column Descriptions</b>
-            <span class="tooltip-icon-legend tooltip-pin-right">
                 ⓘ
                 <span class="tooltip-card">
                     <h3>Column Descriptions</h3>

     descriptions_tooltip_content = build_descriptions_tooltip_content(which_table)
     trophy_uri = get_svg_as_data_uri("assets/trophy.svg")
     legend_markdown = f"""
+    <div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; font-size: 14px; padding-bottom: 8px;">
         <div> <!-- Container for the Pareto section -->
             <b>Pareto</b>
+            <span class="tooltip-icon-legend">
                 ⓘ
                 <span class="tooltip-card">{pareto_tooltip_content}</span>
             </span>
         <div><!-- Container for the Column Descriptions section -->
             <b>Column Descriptions</b>
+            <span class="tooltip-icon-legend">
                 ⓘ
                 <span class="tooltip-card">
                     <h3>Column Descriptions</h3>