1<!doctype html> 2<html> 3 <head> 4 <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 4-5
4 5 <script async src="https://www.googletagmanager.com/gtag/js?id=
5G-J696KH33YJ
vendor: 16 bytes, lines 5-6
5"></script> 6
6<script> 7
vendor: 146 bytes, lines 7-11
7window.dataLayer = window.dataLayer || []; 8 function gtag(){dataLayer.push(arguments);} 9 gtag('js', new Date()); 10 11 gtag('config', '
11G-J696KH33YJ
vendor: 8 bytes, lines 11-12
11'); 12
12</script>
12 13 14 <meta charset="utf-8" /> 15 <!-- Meta tags for social media banners, these should be filled in appropriatly as they are your "business card" --> 16 <!-- Replace the content tag with appropriate information --> 17 <!-- <meta name="description" content="Beaver: An Enterprise Benchmark for Text-to-SQL"> --> 18 <meta 19 property="og:title" 20 content="BEAVER: An Enterprise Benchmark for Text-to-SQL" 21 /> 22 <!-- <meta property="og:description" content="SOCIAL MEDIA DESCRIPTION TAG TAG"/> --> 23 <meta property="og:url" content="https://beaverbench.github.io/" /> 24 <!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X630--> 25 <meta property="og:image" content="static/images/beaver.png" /> 26 <!-- <meta property="og:image:width" content="1200"/> 27 <meta property="og:image:height" content="630"/> --> 28 29 <meta 30 name="twitter:title" 31 content="BEAVER: An Enterprise Benchmark for Text-to-SQL" 32 /> 33 <!-- <meta name="twitter:description" content="TWITTER BANNER DESCRIPTION META TAG"> --> 34 <!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X600--> 35 <meta name="twitter:image" content="static/images/beaver.png" /> 36 <!-- <meta name="twitter:card" content="summary_large_image"> --> 37 <!-- Keywords for your paper to be indexed by--> 38 <!-- <meta name="keywords" content="KEYWORDS SHOULD BE PLACED HERE"> --> 39 <meta name="viewport" content="width=device-width, initial-scale=1" /> 40 41 <title>BEAVER: An Enterprise Benchmark for Text-to-SQL</title> 42 <link rel="icon" type="image/x-icon" href="static/images/beaver.png" /> 43 <link 44 href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" 45 rel="stylesheet" 46 /> 47 48 <link rel="stylesheet" href="static/css/bulma.min.css" /> 49 <link rel="stylesheet" href="static/css/bulma-carousel.min.css" /> 50 <link rel="stylesheet" href="static/css/bulma-slider.min.css" /> 51 <link 52 rel="stylesheet" 53 href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css" 54 /> 55 <link rel="stylesheet" href="static/css/index.css" /> 56 57
57<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
57 58
58<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
58 59
59<script defer src="static/js/fontawesome.all.min.js"></script>
59 60
60<script src="static/js/bulma-carousel.min.js"></script>
60 61
61<script src="static/js/bulma-slider.min.js"></script>
61 62
62<script src="static/js/index.js"></script>
62 63
63<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
63 64
64<script defer src="static/js/benchmark.js?v=20260322"></script>
64 65 66 <!--imports for code highlighting and copy--> 67 <link 68 rel="stylesheet" 69 href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" 70 /> 71
71<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
71 72
72<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
72 73
73<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
73 74 75
75<script> 76 // for copy button 77 document.addEventListener("DOMContentLoaded", function () { 78 const clipboard = new ClipboardJS(".copy-btn"); 79 clipboard.on("success", function (e) { 80 e.trigger.innerText = "Copied!"; 81 setTimeout(() => (e.trigger.innerText = "Copy"), 1500); 82 }); 83 84 const overviewView = document.getElementById("overview-view"); 85 const leaderboardView = document.getElementById("leaderboard-view"); 86 const overviewLink = document.getElementById("overview-link"); 87 const leaderboardLink = document.getElementById("leaderboard-link"); 88 89 function setViewFromHash() { 90 const hash = window.location.hash === "#leaderboard" ? "#leaderboard" : "#overview"; 91 92 if (!window.location.hash) { 93 history.replaceState(null, "", "#overview"); 94 } 95 96 const showLeaderboard = hash === "#leaderboard"; 97 overviewView.classList.toggle("is-hidden", showLeaderboard); 98 leaderboardView.classList.toggle("is-hidden", !showLeaderboard); 99 100 overviewLink.classList.toggle("is-dark", !showLeaderboard); 101 overviewLink.classList.toggle("is-light", showLeaderboard); 102 leaderboardLink.classList.toggle("is-dark", showLeaderboard); 103 leaderboardLink.classList.toggle("is-light", !showLeaderboard); 104 105 window.requestAnimationFrame(function () { 106 window.dispatchEvent(new Event("resize")); 107 }); 108 } 109 110 window.addEventListener("hashchange", setViewFromHash); 111 setViewFromHash(); 112 }); 113 114 </script>
114 115 </head> 116 <body> 117 <section class="hero"> 118 <div class="hero-body" style="padding-bottom: 0.5rem;"> 119 <div class="container is-max-desktop"> 120 <div class="columns is-centered"> 121 <div class="column has-text-centered"> 122 <h1 class="title is-1 publication-title"> 123 𦫠BEAVER: An Enterprise Benchmark for Text-to-SQL 124 </h1> 125 <div class="is-size-5 publication-authors"> 126 <!-- Paper authors --> 127 <span class="author-block"> 128 <a href="https://peterbaile.github.io/" target="_blank">Peter Baile Chen</a><sup>1</sup>, 129 </span> 130 <span class="author-block"> 131 <a href="#" target="_blank">Devin Yang</a><sup>1</sup>, 132 </span> 133 <span class="author-block"> 134 <a href="https://weiyueli7.github.io/" target="_blank">Weiyue Li</a><sup>2</sup>, 135 </span> 136 <span class="author-block"> 137 <a href="https://fabian-wenz.github.io/" target="_blank">Fabian Wenz</a><sup>1,3</sup>, 138 </span> 139 <span class="author-block"> 140 <a href="#" target="_blank">Yi Zhang</a><sup>4</sup>, 141 </span> 142 <span class="author-block"> 143 <a href="https://people.csail.mit.edu/tatbul/" target="_blank">Nesime Tatbul</a><sup>1,5</sup>, 144 </span> 145 <span class="author-block"> 146 <a href="https://people.csail.mit.edu/michjc/" target="_blank">Michael Cafarella</a><sup>1</sup>, 147 </span> 148 <span class="author-block"> 149 <a href="https://cagataydemiralp.io/" target="_blank">ÃaÄatay Demiralp</a><sup>1,6</sup>, 150 </span> 151 <span class="author-block"> 152 <a href="#" target="_blank">Michael Stonebraker</a><sup>1</sup> 153 </span> 154 </div> 155 156 <div class="is-size-5 publication-authors"> 157 <span class="author-block"> 158 <sup>1</sup>MIT, <sup>2</sup>Harvard University, 159 <sup>3</sup>TU Munich</span>, 160 <sup>4</sup>Greenshoe, Inc.</span>, 161 <sup>5</sup>Intel</span>, 162 <sup>6</sup>AWS AI Labs 163 </div> 164 165 <div class="column has-text-centered"> 166 <div class="publication-links"> 167 <span class="link-block"> 168 <a 169 href="https://arxiv.org/abs/2409.02038" 170 target="_blank" 171 class="external-link button is-normal is-rounded is-dark" 172 > 173 <span class="icon"> 174 <i class="ai ai-arxiv"></i> 175 </span> 176 <span>arXiv</span> 177 </a> 178 </span> 179 180 <!-- Github link --> 181 <span class="link-block"> 182 <a 183 href="https://huggingface.co/collections/beaverbench/beaver-dataset" 184 target="_blank" 185 class="external-link button is-normal is-rounded is-dark" 186 > 187 <span class="icon"> 188 <i class="far fa-images"></i> 189 </span> 190 <span>Dataset</span> 191 </a> 192 </span> 193 194 <span class="link-block"> 195 <a 196 href="https://github.com/beaverbench/beaver" 197 target="_blank" 198 class="external-link button is-normal is-rounded is-dark" 199 > 200 <span class="icon"> 201 <i class="fab fa-github"></i> 202 </span> 203 <span>Code</span> 204 </a> 205 </span> 206 </div> 207 <div class="page-nav-links">
208 <span class="link-block"> 209 <a 210 id="overview-link" 211 href="#overview" 212 class="external-link button is-normal is-dark view-nav-button" 213 > 214 <span class="icon"> 215 <i class="fas fa-compass"></i> 216 </span> 217 <span>Overview</span> 218 </a> 219 </span> 220 <span class="link-block"> 221 <a 222 id="leaderboard-link" 223 href="#leaderboard" 224 class="external-link button is-normal is-light view-nav-button" 225 > 226 <span class="icon"> 227 <i class="fas fa-list-ol"></i> 228 </span> 229 <span>Leaderboard</span> 230 </a> 231 </span> 232 </div> 233 </div> 234 </div> 235 </div> 236 </div> 237 </div> 238 </section> 239 <section class="section" style="padding-top: 0rem;"> 240 <div class="container is-max-desktop"> 241 <div class="columns is-size-7"> 242 <div class="column is-full"> 243 <div id="leaderboard-view" class="page-view is-hidden"> 244 <div class="left-boxes"> 245 <div class="leaderboard-header"> 246 <h2 class="title is-3 has-text-centered">Leaderboard</h2> 247 248 <div class="has-text-centered" style="margin-top: -10px; margin-bottom: 15px;"> 249 <a id="toggle-instructions-btn" style="cursor: pointer; font-weight: 600; text-decoration: underline;"> 250 Submission Instructions 251 </a> 252 </div> 253 254 <div id="submission-instructions-box" class="is-hidden" style="margin-bottom: 20px; padding: 15px; background-color: #ffffff; border: 1px solid #dbdbdb; border-radius: 6px;"> 255 <h4 class="title is-6" style="margin-bottom: 10px;">How to Submit:</h4> 256 <p class="is-size-7"> 257 Please send an email to <span style="text-decoration: underline;">[email protected]</span>, along with your method name, a brief description of the method, and, optionally, a link to your paper or codebase. We will follow up with detailed instructions. 258 </p> 259 </div> 260 261 <div class="view-toggle"> 262 <button id="table-view-btn" class="button is-small is-dark" title="Table leaderboard"> 263 <span class="icon is-small"><i class="fas fa-table"></i></span> 264 </button> 265 <button id="scatter-view-btn" class="button is-small is-light" title="Scatter leaderboard"> 266 <span class="icon is-small"><i class="fas fa-chart-line"></i></span> 267 </button> 268 </div> 269 </div> 270 <div class="leaderboard-controls"> 271 <div class="field"> 272 <label class="label is-size-7">Method</label> 273 <div class="control"> 274 <div class="select is-small is-fullwidth"> 275 <select id="method-filter"></select> 276 </div> 277 </div> 278 </div> 279 <div class="field"> 280 <label class="label is-size-7">Model</label> 281 <div class="control"> 282 <div class="select is-small is-fullwidth"> 283 <select id="model-filter"></select> 284 </div> 285 </div> 286 </div> 287 <div class="field"> 288 <label class="label is-size-7">Search</label> 289 <div class="control"> 290 <input id="search-filter" class="input is-small" type="text" placeholder="Find method/model" /> 291 </div> 292 </div> 293 </div> 294 <div id="leaderboard-table-view"> 295 <div class="table-container"> 296 <table class="table is-hoverable is-fullwidth is-size-7"> 297 <thead> 298 <tr> 299 <th class="sortable" data-sort-key="rank">Rank</th> 300 <th>Submission Date</th> 301 <th class="sortable" data-sort-key="method">Method</th> 302 <th class="sortable" data-sort-key="model">Model</th> 303 <th class="sortable" data-sort-key="score">Execution Accuracy</th> 304 </tr> 305 </thead> 306 <tbody id="leaderboard-body"> 307 <!-- Leaderboard data will be inserted here --> 308 </tbody> 309 </table> 310 </div> 311 </div> 312 <div id="leaderboard-scatter-view" class="is-hidden"> 313 <div class="chart-box">
314 <canvas id="leaderboard-scatter-chart"></canvas> 315 </div> 316 </div> 317 </div> 318 <div class="left-boxes"> 319 <div class="subtask-header"> 320 <h2 class="title is-5">Subtask Metrics Across Settings</h2> 321 <div class="subtask-view-toggle"> 322 <button id="subtask-view-method-btn" class="button is-small is-dark" title="By method"> 323 <span class="icon is-small"><i class="fas fa-user"></i></span> 324 </button> 325 <button id="subtask-view-setting-btn" class="button is-small is-light" title="By setting"> 326 <span class="icon is-small"><i class="fas fa-layer-group"></i></span> 327 </button> 328 </div> 329 </div> 330 <div class="subtask-controls"> 331 <div id="subtask-setting-control" class="select is-small"> 332 <select id="subtask-setting"></select> 333 </div> 334 <div id="subtask-method-control" class="select is-small is-hidden"> 335 <select id="subtask-method"></select> 336 </div> 337 </div> 338 <div id="subtask-legend" class="subtask-legend"></div> 339 <div class="chart-box"> 340 <canvas id="subtask-chart"></canvas> 341 </div> 342 </div> 343 <div class="left-boxes"> 344 <h2 class="title is-4">Citation</h2> 345 <p> 346 If you find our data, code, or the paper helpful, please cite the 347 paper: 348 </p> 349 <div class="code-container"> 350 <pre><code id="codeBlockLeaderboard">@article{chen2024beaver, 351 title={BEAVER: an enterprise benchmark for text-to-sql}, 352 author={Chen, Peter Baile and Yang, Devin and Li, Weiyue and Wenz, Fabian and Zhang, Yi and Tatbul, Nesime and Cafarella, Michael and Demiralp, {\c{C}}a{\u{g}}atay and Stonebraker, Michael}, 353 journal={arXiv preprint arXiv:2409.02038}, 354 year={2024} 355}</code></pre> 356 <button class="copy-btn" data-clipboard-target="#codeBlockLeaderboard"> 357 Copy 358 </button> 359 </div> 360 </div> 361 </div> 362 <div id="overview-view" class="page-view"> 363 <div class="left-boxes"> 364 <!-- <h2 class="title is-4">Overview</h2> --> 365 <p> 366 BEAVER is a large-scale enterprise text-to-SQL dataset containing 9128 queries spanning 812 tables across 19 diverse domains. Of these, 7978 queries are publicly released, while the remaining portion is held out as a private test set. Queries and databases were collected from <i>private</i> organizations. 367 <br /> 368 To facilitate fine-grained evaluation and analysis, we provide 369 <ul style="list-style-type: disc; padding-left:20px"> 370 <li>annotations for five subtasks: multi-table retrieval, join key detection, column mapping, domain knowledge extraction, and query decomposition</li> 371 <li>three categories of queries: <span style="text-decoration: underline;">complex queries</span> without domain knowledge, <span style="text-decoration: underline;">domain-specific queries</span> with minimal complexity, and <span style="text-decoration: underline;">domain-specific complex queries</span></li> 372 </ul> 373 </p> 374 </div> 375 <div class="left-boxes"> 376 <div class="example-header"> 377 <div> 378 <h2 class="title is-4">Example data</h2> 379 <p class="example-subtitle">Representative BEAVER tasks with question, SQL, and subtask annotations.</p> 380 </div> 381 <div class="example-toolbar"> 382 <button id="example-prev" class="example-nav" type="button" aria-label="Previous example"> 383 <i class="fas fa-arrow-left"></i> 384 </button> 385 <div class="example-select-wrap"> 386 <label class="label is-size-7" for="example-select">Task id</label> 387 <div class="select is-small is-fullwidth"> 388 <select id="example-select"></select> 389 </div> 390 </div> 391 <button id="example-next" class="example-nav" type="button" aria-label="Next example"> 392 <i class="fas fa-arrow-right"></i> 393 </button> 394 </div> 395 </div> 396 <div class="example-stage"> 397 <div class="example-meta">
398 <span class="example-badge" id="example-db-id">db</span> 399 <span class="example-badge" id="example-source-file">source</span> 400 </div> 401 <div class="example-grid"> 402 <div class="example-panel example-panel--question"> 403 <h3 class="example-label">Question</h3> 404 <p id="example-question" class="example-question"></p> 405 </div> 406 <div class="example-panel example-panel--sql"> 407 <h3 class="example-label">SQL</h3> 408 <pre class="example-code"><code id="example-sql"></code></pre> 409 </div> 410 <div class="example-panel"> 411 <h3 class="example-label">Multi-Table retrieval</h3> 412 <h5 class="example-sublabel">Tables used in SQL</h5> 413 <div id="example-gold-tables" class="example-chip-list"></div> 414 </div> 415 <div class="example-panel"> 416 <h3 class="example-label">Join Keys</h3> 417 <h5 class="example-sublabel">Connections among used tables</h5> 418 <div id="example-join-keys" class="example-chip-list"></div> 419 </div> 420 <div class="example-panel"> 421 <h3 class="example-label">Column Mapping</h3> 422 <h5 class="example-sublabel">Mapping from question phrases to table columns(s)</h5> 423 <div id="example-mapping" class="example-mapping"></div> 424 </div> 425 <div class="example-panel"> 426 <h3 class="example-label">Domain knowledge</h3> 427 <h5 class="example-sublabel">Domain-specific predictates used in SQL</h5> 428 <ul id="example-evidence" class="example-list"></ul> 429 </div> 430 <div class="example-panel example-panel--evidence"> 431 <h3 class="example-label">Subquery Decomposition</h3> 432 <h5 class="example-sublabel">Decomposition of SQL into simpler sub-queries</h5> 433 <div id="example-subqueries" class="example-subqueries"></div> 434 </div> 435 </div> 436 </div> 437 </div> 438 <!-- <div class="left-boxes"> 439 <h2 class="title is-4">Usage</h2> 440 <p> 441 We have created a unified MySQL version for our dataset. A free 442 MySQL installation can be found 443 <a href="https://dev.mysql.com/downloads/mysql/">here</a>. After 444 the installation, import the MySQL dump files from the google 445 drive to your local MySQL databases using 446 </p> 447 <pre><code>mysql -u root -p < `xxx.sql`</code></pre> 448 <p> 449 To execute a SQL statement, you can either log in to the MySQL 450 interface or you can do it via 451 <a href="https://pypi.org/project/mysql-connector-python/" 452 >mysql-connector-python</a 453 >. 454 </p> 455 <br /> 456 <p> 457 If you want to use the Oracle version of 458 <code>DW</code> queries, you can download the free oracle 459 database and import the CSVs. 460 </p> 461 </div> --> 462 <!-- <div class="left-boxes"> 463 <h2 class="title is-4">Changelog</h2> 464 <div class="container" id="changelog-body"></div> 465 </div> --> 466 <div class="left-boxes"> 467 <h2 class="title is-4">Citation</h2> 468 <p> 469 If you find our data, code, or the paper helpful, please cite the 470 paper: 471 </p> 472 <div class="code-container"> 473 <pre><code id="codeBlockOverview">article{chen2024beaver, 474 title={BEAVER: an enterprise benchmark for text-to-sql}, 475 author={Chen, Peter Baile and Yang, Devin and Li, Weiyue and Wenz, Fabian and Zhang, Yi and Tatbul, Nesime and Cafarella, Michael and Demiralp, {\c{C}}a{\u{g}}atay and Stonebraker, Michael}, 476 journal={arXiv preprint arXiv:2409.02038}, 477 year={2024} 478}</code></pre> 479 <button class="copy-btn" data-clipboard-target="#codeBlockOverview"> 480 Copy 481 </button> 482 </div> 483 </div> 484 </div> 485 </div> 486 </div> 487 </div> 488 </section> 489 490
490<script> 491 document.getElementById('toggle-instructions-btn').addEventListener('click', function(e) { 492 e.preventDefault(); 493 const instructionsBox = document.getElementById('submission-instructions-box'); 494 495 // Toggle Bulma's 'is-hidden' class 496 if (instructionsBox.classList.contains('is-hidden')) { 497 instructionsBox.classList.remove('is-hidden'); 498 } else { 499 instructionsBox.classList.add('is-hidden'); 500 } 501 }); 502 </script>
502 503 504 </body> 505 <style> 506 .code-container { 507 position: relative; 508 display: block; 509 max-width: 100%; 510 } 511 512 pre { 513 padding: 15px; 514 border-radius: 5px; 515 overflow-x: auto; 516 max-width: 100%; 517 white-space: pre; 518 } 519 520 .copy-btn { 521 position: absolute; 522 top: 6px; 523 right: 6px; 524 padding: 5px 10px; 525 background: #effaf3; 526 color: black; 527 border: none; 528 cursor: pointer; 529 font-size: 11px; 530 border-radius: 5px; 531 opacity: 0.8; 532 border: 0.1px solid black; 533 } 534 535 .copy-btn:hover { 536 background: #48c774; 537 color: white; 538 } 539 540 .left-boxes { 541 font-size: 110%; 542 padding: 20px; 543 background-color: #f5f5f5; 544 border-radius: 10px; 545 margin: 10px 0; 546 } 547 548 .page-nav-links { 549 display: flex; 550 justify-content: center; 551 gap: 12px; 552 flex-wrap: wrap; 553 margin-top: 3rem; 554 } 555 556 .publication-links { 557 display: flex; 558 justify-content: center; 559 align-items: center; 560 gap: 12px; 561 flex-wrap: wrap; 562 } 563 564 .view-nav-button { 565 border-radius: 6px; 566 min-width: 150px; 567 } 568 569 .view-nav-button.is-dark { 570 background-color: #3273dc; 571 border-color: #3273dc; 572 color: #ffffff; 573 } 574 575 .view-nav-button.is-dark:hover { 576 background-color: #2366d1; 577 border-color: #2366d1; 578 color: #ffffff; 579 } 580 581 .view-nav-button.is-light { 582 background-color: #f5f7fb; 583 border-color: #cfd8e6; 584 color: #2f3a4a; 585 } 586 587 .leaderboard-controls { 588 display: flex; 589 gap: 10px; 590 flex-wrap: wrap; 591 margin-bottom: 10px; 592 } 593 594 .leaderboard-controls .field { 595 flex: 1; 596 min-width: 140px; 597 margin-bottom: 0; 598 } 599 600 .leaderboard-header { 601 position: relative; 602 margin-bottom: 8px; 603 } 604 605 .view-toggle { 606 position: absolute; 607 right: 0; 608 top: 0; 609 display: flex; 610 gap: 6px; 611 } 612 613 .subtask-header { 614 display: flex; 615 align-items: center; 616 justify-content: space-between; 617 gap: 10px; 618 margin-bottom: 8px; 619 } 620 621 .subtask-view-toggle { 622 display: flex; 623 gap: 6px; 624 } 625 626 .subtask-controls { 627 display: flex; 628 gap: 10px; 629 flex-wrap: wrap; 630 margin-bottom: 10px; 631 } 632 633 .subtask-legend { 634 display: flex; 635 flex-wrap: wrap; 636 justify-content: center; 637 gap: 10px; 638 margin-bottom: 12px; 639 } 640 641 .subtask-legend--stacked { 642 flex-direction: column; 643 align-items: center; 644 } 645 646 .subtask-legend-item { 647 display: flex; 648 align-items: flex-start; 649 gap: 10px; 650 min-width: 220px; 651 max-width: 100%; 652 padding: 10px 12px; 653 border: 1px solid #d9dde5; 654 border-radius: 12px; 655 background: rgba(255, 255, 255, 0.82); 656 cursor: pointer; 657 transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease; 658 } 659 660 .subtask-legend-item:hover { 661 border-color: #bcc6d4; 662 transform: translateY(-1px); 663 } 664 665 .subtask-legend-item.is-muted { 666 opacity: 0.5; 667 } 668 669 .subtask-legend--stacked .subtask-legend-item { 670 width: min(100%, 720px); 671 } 672 673 .subtask-legend-swatch { 674 width: 12px; 675 height: 12px; 676 border-radius: 999px; 677 flex: 0 0 12px; 678 margin-top: 4px; 679 } 680 681 .subtask-legend-text { 682 min-width: 0; 683 } 684 685 .subtask-legend-title { 686 font-weight: 600; 687 color: #363636; 688 line-height: 1.35; 689 overflow-wrap: anywhere; 690 } 691 692 .subtask-legend-inline-description { 693 font-weight: 400; 694 color: #5f6773; 695 } 696 697 .sortable { 698 cursor: pointer; 699 user-select: none; 700 } 701 702 #leaderboard-table-view .table { 703 width: 100%; 704 table-layout: auto; 705 } 706 707 #leaderboard-table-view .table th, 708 #leaderboard-table-view .table td { 709 vertical-align: middle; 710 } 711 712 .rank-cell { 713 text-align: center; 714 min-width: 92px; 715 } 716 717 .rank-number { 718 font-size: inherit; 719 line-height: inherit; 720 font-weight: 700; 721 color: #2c323b; 722 margin-bottom: 0; 723 } 724 725 .date-pill { 726 display: inline-block; 727 background: #6f7783; 728 color: #f1f4f8; 729 border-radius: 8px; 730 padding: 4px 10px; 731 font-size: inherit; 732 font-weight: 600; 733 } 734 735 .model-cell { 736 display: inline-flex; 737 align-items: center; 738 gap: 8px; 739 } 740 741 .model-logo { 742 width: 16px; 743 height: 16px; 744 object-fit: contain; 745 border-radius: 3px; 746 background: #fff; 747 } 748
749 .chart-box { 750 position: relative; 751 min-height: 280px; 752 width: 100%; 753 } 754 755 .example-header { 756 display: flex; 757 align-items: end; 758 justify-content: space-between; 759 gap: 16px; 760 margin-bottom: 14px; 761 } 762 763 .example-subtitle { 764 color: #5f6773; 765 margin-top: 6px; 766 } 767 768 .example-toolbar { 769 display: grid; 770 grid-template-columns: 44px minmax(180px, 1fr) 44px; 771 gap: 10px; 772 align-items: end; 773 min-width: min(100%, 420px); 774 flex-shrink: 0; 775 } 776 777 .example-select-wrap { 778 min-width: 0; 779 } 780 781 .example-select-wrap .label { 782 margin-bottom: 6px; 783 } 784 785 .example-nav { 786 width: 44px; 787 height: 44px; 788 border: 1px solid #ced5df; 789 background: #ffffff; 790 color: #394150; 791 border-radius: 12px; 792 cursor: pointer; 793 padding: 0; 794 transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; 795 } 796 797 .example-nav:hover { 798 background: #f5f7fa; 799 border-color: #b7c0cc; 800 transform: translateY(-1px); 801 } 802 803 .example-stage { 804 background: linear-gradient(180deg, #fafafa 0%, #f0f2f5 100%); 805 border: 1px solid #d9dde5; 806 border-radius: 16px; 807 padding: 18px; 808 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); 809 min-width: 0; 810 } 811 812 .example-meta { 813 display: flex; 814 gap: 8px; 815 flex-wrap: wrap; 816 margin-bottom: 14px; 817 min-width: 0; 818 } 819 820 .example-badge { 821 background: #485fc7; 822 border: 1px solid #485fc7; 823 border-radius: 999px; 824 padding: 4px 10px; 825 font-weight: 600; 826 color: #ffffff; 827 max-width: 100%; 828 overflow-wrap: anywhere; 829 } 830 831 .example-grid { 832 display: grid; 833 grid-template-columns: 1.05fr 0.95fr; 834 gap: 14px; 835 align-items: start; 836 min-width: 0; 837 } 838 839 .example-panel { 840 background: rgba(255, 255, 255, 0.78); 841 border: 1px solid #d9dde5; 842 border-radius: 14px; 843 padding: 14px; 844 min-height: 100%; 845 backdrop-filter: blur(6px); 846 min-width: 0; 847 overflow: hidden; 848 } 849 850 .example-panel--evidence { 851 grid-column: 1 / -1; 852 } 853 854 .example-label { 855 color: #363636; 856 font-size: 0.92rem; 857 text-transform: uppercase; 858 letter-spacing: 0.04em; 859 margin-bottom: 10px; 860 } 861 862 .example-sublabel { 863 color: #363636; 864 font-size: 0.82rem; 865 /* text-transform: uppercase; */ 866 font-style: italic; 867 letter-spacing: 0.04em; 868 margin-bottom: 10px; 869 } 870 871 .example-question { 872 font-size: inherit; 873 line-height: 1.6; 874 margin: 0; 875 color: #4a4a4a; 876 height: 220px; 877 overflow: auto; 878 padding-right: 6px; 879 max-width: 100%; 880 overflow-wrap: anywhere; 881 } 882 883 .example-code { 884 background: #ffffff; 885 color: #363636; 886 border: 1px solid #d9d9d9; 887 font-size: inherit; 888 white-space: pre-wrap; 889 word-break: break-word; 890 height: 220px; 891 overflow: auto; 892 margin: 0; 893 max-width: 100%; 894 } 895 896 .example-chip-list { 897 display: flex; 898 flex-wrap: wrap; 899 gap: 8px; 900 height: 140px; 901 overflow: auto; 902 align-content: flex-start; 903 padding-right: 4px; 904 max-width: 100%; 905 } 906 907 .example-chip { 908 background: #eef3ff; 909 border: 1px solid #d7def5; 910 color: #3b4a73; 911 border-radius: 999px; 912 padding: 5px 10px; 913 font-size: inherit; 914 line-height: 1.35; 915 } 916 917 .example-list { 918 margin: 0; 919 padding-left: 18px; 920 color: #4a4a4a; 921 font-size: inherit; 922 height: 90px; 923 overflow: auto; 924 padding-right: 6px; 925 max-width: 100%; 926 overflow-wrap: anywhere; 927 list-style-type: disc; 928 } 929 930 .example-list--ordered { 931 list-style-type: decimal; 932 } 933 934 .example-list li + li { 935 margin-top: 6px; 936 } 937 938 .example-mapping { 939 display: flex; 940 flex-direction: column; 941 gap: 10px; 942 height: 140px; 943 overflow: auto; 944 padding-right: 4px; 945 color: #4a4a4a; 946 max-width: 100%; 947 } 948 949 .example-mapping-item { 950 border-bottom: 1px solid #e5e8ef; 951 padding-bottom: 8px; 952 } 953 954 .example-mapping-item:last-child { 955 border-bottom: none; 956 padding-bottom: 0; 957 } 958 959 .example-mapping-key { 960 font-weight: 600; 961 margin-bottom: 4px;
962 overflow-wrap: anywhere; 963 } 964 965 .example-mapping-values { 966 display: flex; 967 flex-wrap: wrap; 968 gap: 6px; 969 } 970 971 .example-mapping-value { 972 background: #eef3ff; 973 border: 1px solid #d7def5; 974 border-radius: 8px; 975 color: #3b4a73; 976 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; 977 font-size: 0.92em; 978 line-height: 1.35; 979 padding: 4px 8px; 980 overflow-wrap: anywhere; 981 } 982 983 .example-subqueries { 984 display: flex; 985 flex-direction: column; 986 gap: 10px; 987 height: 300px; 988 overflow: auto; 989 padding-right: 4px; 990 color: #4a4a4a; 991 max-width: 100%; 992 } 993 994 .example-subquery-item { 995 border-bottom: 1px solid #e5e8ef; 996 padding-bottom: 10px; 997 } 998 999 .example-subquery-item:last-child { 1000 border-bottom: none; 1001 padding-bottom: 0; 1002 } 1003 1004 .example-subquery-key { 1005 font-weight: 600; 1006 margin-bottom: 4px; 1007 overflow-wrap: anywhere; 1008 } 1009 1010 .example-subquery-value { 1011 margin: 0 0 8px; 1012 overflow-wrap: anywhere; 1013 } 1014 1015 .example-subquery-sql { 1016 background: #ffffff; 1017 border: 1px solid #d9d9d9; 1018 border-radius: 8px; 1019 color: #363636; 1020 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; 1021 font-size: 0.92em; 1022 line-height: 1.45; 1023 margin: 0; 1024 padding: 10px; 1025 white-space: pre-wrap; 1026 word-break: break-word; 1027 } 1028 1029 @media screen and (max-width: 768px) { 1030 .example-header { 1031 flex-direction: column; 1032 align-items: stretch; 1033 gap: 12px; 1034 } 1035 1036 .example-toolbar { 1037 grid-template-columns: 38px 1fr 38px; 1038 grid-template-areas: 1039 "prev . next" 1040 "select select select"; 1041 gap: 10px; 1042 min-width: 0; 1043 } 1044 1045 .example-select-wrap { 1046 grid-area: select; 1047 min-width: 0; 1048 } 1049 1050 .leaderboard-header { 1051 display: flex; 1052 flex-direction: column; 1053 align-items: center; 1054 gap: 8px; 1055 } 1056 1057 .view-toggle { 1058 position: static; 1059 align-self: flex-end; 1060 } 1061 1062 #leaderboard-table-view .table { 1063 font-size: 0.68rem; 1064 } 1065 1066 #leaderboard-table-view .table th, 1067 #leaderboard-table-view .table td { 1068 padding: 0.45rem 0.3rem; 1069 } 1070 1071 .rank-cell { 1072 min-width: 56px; 1073 } 1074 1075 .date-pill { 1076 padding: 2px 6px; 1077 font-size: 0.68rem; 1078 } 1079 1080 .model-cell { 1081 gap: 4px; 1082 } 1083 1084 .model-logo { 1085 width: 12px; 1086 height: 12px; 1087 } 1088 1089 .example-nav { 1090 width: 38px; 1091 height: 38px; 1092 border-radius: 10px; 1093 } 1094 1095 .subtask-legend-item { 1096 min-width: 100%; 1097 } 1098 1099 #example-prev { 1100 grid-area: prev; 1101 } 1102 1103 #example-next { 1104 grid-area: next; 1105 } 1106 1107 .example-grid { 1108 grid-template-columns: 1fr; 1109 gap: 12px; 1110 } 1111 1112 .example-stage { 1113 padding: 14px; 1114 overflow: hidden; 1115 } 1116 1117 .example-panel { 1118 padding: 12px; 1119 width: 100%; 1120 } 1121 1122 .example-question { 1123 height: 150px; 1124 } 1125 1126 .example-code { 1127 height: 170px; 1128 } 1129 1130 .example-chip-list, 1131 .example-list, 1132 .example-mapping, 1133 .example-subqueries { 1134 height: 72px; 1135 } 1136 1137 .example-question, 1138 .example-code, 1139 .example-chip-list, 1140 .example-list, 1141 .example-mapping, 1142 .example-subqueries { 1143 font-size: inherit; 1144 } 1145 } 1146 </style> 1147</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.