Add learderboard in the documentation

Author: Sofiene Boutaj

docs/javascripts/rank-table.js

@@ -0,0 +1,83 @@
+document$.subscribe(() => {
+  const $table = $('#rankTable');
+  if (!$table.length || $table.hasClass('dataTable')) {
+    return; // Table not present or already initialized
+  }
+
+  const dt = $table.DataTable({
+    paging:    false,
+    info:      true,
+    ordering:  true,
+    searching: true,
+
+    searchPanes: {
+      columns: [1, 2, 3], 
+      viewTotal: true
+    },
+
+    dom: 'Pfrt',
+    columnDefs: [
+      { targets: [1, 2], visible: false, searchable: true },
+      {
+        targets: [3, 4, 5, 6, 7, 8, 9],
+        render: function (data, type) {
+            if (type === 'sort' || type === 'type') {
+                const match = data.match(/\((\d+)\)/); 
+                return match ? parseInt(match[1], 10) : Infinity;
+            }
+            return data;
+        }
+    },
+    {
+      targets: 9,
+      className: 'fw-semibold',
+    }    
+    ],
+    order: [[9, 'asc']],
+    language: {
+      search: '_INPUT_',
+      searchPlaceholder: 'Search models…'
+    },
+  });
+
+  // ─── Highlight top-3 rows with podium colours ───────────────────────
+  function paintWinners() {
+    // clear any previous podium colours
+    dt.rows().nodes().to$().removeClass('winner-gold winner-silver winner-bronze');
+
+    // Get the current sort direction (ascending or descending)
+    const sortOrder = dt.order();
+    const isDescending = sortOrder[0][1] === 'desc';  // Check if it's descending
+
+    var rows = dt.rows({ order: 'applied', search: 'applied' }).indexes().toArray();
+
+    rows = rows.sort((a, b) => {
+      const extractRank = (str) => {
+          const match = str.match(/\((\d+)\)/); // Match number inside parentheses
+          return match ? parseInt(match[1], 10) : Infinity; // Use Infinity if not found
+      };
+  
+      const valueA = extractRank(dt.cell(a, 9).data());
+      const valueB = extractRank(dt.cell(b, 9).data());
+  
+      return !isDescending ? valueB - valueA : valueA - valueB;
+  });
+    if (isDescending)
+      var top3 = rows.slice(0, 3);
+      
+    else {
+      var top3 = rows.slice(rows.length - 3, rows.length);
+      top3.reverse();
+    }
+    // Apply podium classes based on the sorted top 3 rows
+    if (top3[0] !== undefined) $(dt.row(top3[0]).node()).addClass('winner-gold');
+    if (top3[1] !== undefined) $(dt.row(top3[1]).node()).addClass('winner-silver');
+    if (top3[2] !== undefined) $(dt.row(top3[2]).node()).addClass('winner-bronze');
+  }
+
+  paintWinners();
+
+  dt.on('draw', paintWinners);
+
+  $('.dtsp-titleRow').hide();
+});

docs/leaderboard.md

@@ -0,0 +1,50 @@
+---
+title: Rank-sum Leaderboard
+---
+
+# 🏆 Rank-sum Leaderboard
+
+<div class="table-responsive-sm">
+  <table id="rankTable" class="table table-hover table-bordered table-sm nowrap w-100">
+    <caption>Lower Rank-sum = better overall performance</caption>
+    <thead class="align-middle text-center">
+      <tr>
+        <th>Model</th>
+        <th>Domain</th>
+        <th>Type</th>
+        <th>KNN &uarr;</th>
+        <th>Lin. prob. &uarr;</th>
+        <th>Few-shot &uarr;</th>
+        <th>Calib. &darr;</th>
+        <th>Adv. attack &darr;</th>
+        <th>Seg.&uarr;</th>
+        <th>Rank sum &darr;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td>HIBOU-B</td><td>Histopathology</td><td>VM</td><td>75.8 (10)</td><td>78.0 (14)</td><td>74.2 (6)</td><td>3.7 (2)</td><td>52.8 (14)</td><td>61.5 (10)</td><td>56 (8)</td></tr>
+      <tr><td>HIBOU-L</td><td>Histopathology</td><td>VM</td><td>75.2 (12)</td><td>81.2 (7)</td><td>70.4 (12)</td><td>5.5 (21)</td><td>40.0 (5)</td><td>62.2 (7)</td><td>64 (10)</td></tr>
+      <tr><td>H-OPTIMUS-0</td><td>Histopathology</td><td>VM</td><td>79.2 (5)</td><td>81.4 (5)</td><td>73.4 (7)</td><td>4.7 (12)</td><td>44.2 (9)</td><td>59.0 (13)</td><td>51 (7)</td></tr>
+      <tr><td>H-OPTIMUS-1</td><td>Histopathology</td><td>VM</td><td>80.5 (3)</td><td>83.3 (2)</td><td>74.8 (4)</td><td>4.1 (4)</td><td>58.0 (17)</td><td>58.4 (14)</td><td>44 (5)</td></tr>
+      <tr><td>MIDNIGHT</td><td>Histopathology</td><td>VM</td><td>78.2 (8)</td><td>82.9 (3)</td><td>70.6 (11)</td><td>3.2 (1)</td><td>36.3 (4)</td><td>62.9 (2)</td><td>29 (3)</td></tr>
+      <tr><td>PHIKON</td><td>Histopathology</td><td>VM</td><td>72.8 (14)</td><td>78.5 (13)</td><td>72.2 (10)</td><td>6.4 (22)</td><td>34.4 (3)</td><td>61.7 (9)</td><td>71 (13)</td></tr>
+      <tr><td>PHIKON2</td><td>Histopathology</td><td>VM</td><td>70.1 (15)</td><td>76.5 (15)</td><td>70.1 (13)</td><td>4.6 (10)</td><td>45.6 (11)</td><td>62.0 (8)</td><td>72 (14)</td></tr>
+      <tr><td>UNI</td><td>Histopathology</td><td>VM</td><td>78.8 (6)</td><td>81.3 (6)</td><td>76.4 (2)</td><td>4.3 (7)</td><td>42.8 (7)</td><td>62.2 (6)</td><td>34 (4)</td></tr>
+      <tr><td>UNI2-H</td><td>Histopathology</td><td>VM</td><td>81.7 (1)</td><td>83.9 (1)</td><td>78.4 (1)</td><td>4.5 (8)</td><td>34.3 (2)</td><td>62.8 (4)</td><td>17 (1)</td></tr>
+      <tr><td>VIRCHOW</td><td>Histopathology</td><td>VM</td><td>74.2 (13)</td><td>80.2 (11)</td><td>68.5 (15)</td><td>5.5 (19)</td><td>41.0 (6)</td><td>62.7 (5)</td><td>69 (11)</td></tr>
+      <tr><td>VIRCHOW2</td><td>Histopathology</td><td>VM</td><td>81.2 (2)</td><td>82.7 (4)</td><td>72.5 (9)</td><td>4.6 (11)</td><td>33.6 (1)</td><td>63.4 (1)</td><td>28 (2)</td></tr>
+      <tr><td>CONCH</td><td>Histopathology</td><td>VLM</td><td>77.3 (9)</td><td>80.2 (10)</td><td>73.1 (8)</td><td>4.3 (6)</td><td>55.0 (15)</td><td>42.0 (23)</td><td>71 (12)</td></tr>
+      <tr><td>CONCH&nbsp;1.5</td><td>Histopathology</td><td>VLM</td><td>78.6 (7)</td><td>80.8 (9)</td><td>74.6 (5)</td><td>4.9 (15)</td><td>75.3 (23)</td><td>62.8 (3)</td><td>62 (9)</td></tr>
+      <tr><td>KEEP</td><td>Histopathology</td><td>VLM</td><td>79.7 (4)</td><td>81.1 (8)</td><td>75.8 (3)</td><td>4.7 (13)</td><td>44.7 (10)</td><td>61.3 (11)</td><td>49 (6)</td></tr>
+      <tr><td>MUSK</td><td>Histopathology</td><td>VLM</td><td>75.6 (11)</td><td>79.0 (12)</td><td>70.0 (14)</td><td>4.5 (9)</td><td>69.3 (22)</td><td>59.7 (12)</td><td>80 (15)</td></tr>
+      <tr><td>PLIP</td><td>Histopathology</td><td>VLM</td><td>67.8 (19)</td><td>71.0 (21)</td><td>63.4 (17)</td><td>4.9 (14)</td><td>56.9 (16)</td><td>54.0 (21)</td><td>108 (20)</td></tr>
+      <tr><td>QUILTNET</td><td>Histopathology</td><td>VLM</td><td>68.3 (17)</td><td>71.0 (22)</td><td>65.7 (16)</td><td>7.0 (23)</td><td>52.7 (13)</td><td>54.3 (20)</td><td>111 (21)</td></tr>
+      <tr><td>DINOv2-B</td><td>Natural-image</td><td>VM</td><td>67.9 (18)</td><td>74.8 (17)</td><td>61.0 (18)</td><td>5.5 (20)</td><td>65.8 (20)</td><td>54.7 (18)</td><td>111 (22)</td></tr>
+      <tr><td>DINOv2-L</td><td>Natural-image</td><td>VM</td><td>69.5 (16)</td><td>75.3 (16)</td><td>59.2 (19)</td><td>5.3 (17)</td><td>64.5 (19)</td><td>54.4 (19)</td><td>106 (19)</td></tr>
+      <tr><td>ViT-B/16</td><td>Natural-image</td><td>VM</td><td>64.4 (21)</td><td>71.9 (19)</td><td>57.8 (21)</td><td>3.9 (3)</td><td>46.8 (12)</td><td>57.9 (15)</td><td>93 (16)</td></tr>
+      <tr><td>ViT-L/16</td><td>Natural-image</td><td>VM</td><td>67.5 (20)</td><td>72.8 (18)</td><td>56.5 (22)</td><td>5.0 (16)</td><td>44.1 (8)</td><td>51.9 (22)</td><td>99 (17)</td></tr>
+      <tr><td>CLIP-B/32</td><td>Natural-image</td><td>VLM</td><td>61.9 (23)</td><td>65.8 (23)</td><td>53.3 (23)</td><td>5.5 (18)</td><td>60.4 (18)</td><td>55.9 (16)</td><td>127 (23)</td></tr>
+      <tr><td>CLIP-L/14</td><td>Natural-image</td><td>VLM</td><td>64.2 (22)</td><td>71.3 (20)</td><td>58.2 (20)</td><td>4.2 (5)</td><td>67.8 (21)</td><td>55.5 (17)</td><td>104 (18)</td></tr>
+    </tbody>
+  </table>
+</div>

docs/stylesheets/extra.css

@@ -2,10 +2,154 @@
     --md-primary-fg-color: #61449b;
     --md-primary-fg-color--light: #88bee7;
     --md-primary-fg-color--dark: #412a71;
+    --thunder-purple-700: #5433a6;
+    --thunder-purple-800: #412a71;
+    --thunder-purple-50 : #ede9f7;
 }
 
 .md-header__button.md-logo img,
 .md-header__button.md-logo svg {
     height: 2rem;
     width: 2rem;
-}
+}
+
+#rankTable {
+  border:1px solid #ede9f7 ;
+}
+#rankTable.table {
+  
+    width: 100%;
+    font-size: 0.60rem;   
+  }
+  
+  #rankTable.table thead th {
+    background: #5330a5;
+    color: white;
+    border:1px solid #ede9f7 ;
+
+    text-align: center;
+    vertical-align: middle;
+    padding: 0.60rem 0.75rem;
+    font-weight: 600;
+  }
+  
+  #rankTable.table tbody td,
+  #rankTable.table tbody th {
+    border:1px solid #ede9f7 ;
+
+    vertical-align: middle;
+    padding: 0.55rem 0.75rem;
+    text-align: center;
+    white-space: nowrap;
+  }
+  
+  
+#rankTable_filter label {
+    display: block;
+    width: 100%;
+    }
+  
+  #rankTable caption {
+    caption-side: bottom;
+    text-align: center;
+    font-size: 0.60rem;
+    padding-top: 0.5rem;
+    color: var(--bs-gray-600);
+  }
+
+
+#rankTable_filter{
+    width:100% ;      
+    float:none ;      
+    text-align:center ; 
+    padding:0;                  
+    margin-block:0.75rem;
+  }
+  
+  #rankTable_filter > label{
+    display:block;              
+    width:100%;
+    margin:0;                  
+  }
+  
+  #rankTable_filter > label{
+    position:relative;               
+  }
+  
+  #rankTable_filter input[type="search"]:hover, #rankTable_filter input[type="search"]:focus{
+    outline:none;
+    border-color:#5433a6;
+    background:#fff;
+    box-shadow:0 0 0 .18rem rgba(43,133,255,.25);
+  }
+  
+  #rankTable_filter input[type="search"]::placeholder{
+    color:#adb5bd;
+    opacity:1; 
+  }
+  
+#rankTable_filter input{
+    padding:.5rem 1rem .5rem 2.5rem;
+    border:2px solid #000000;
+    border-radius:9999px;           
+    background:#f9fafb;
+    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
+    font-size:.9rem;                
+    width:100% ;    
+    max-width:100%;           
+    box-sizing:border-box;   
+    margin: 0px;
+
+    }
+    
+  #rankTable_filter > label::before{
+    content:'';
+    position:absolute;
+    top:50%;
+    left:1rem;
+    translate:0 -50%;                
+    width:1rem; height:1rem;
+    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23adb5bd' viewBox='0 0 16 16'><path d='M11 6a5 5 0 1 1-2-4 5 5 0 0 1 2 4z'/><path d='M15.7 14.3 11.3 9.9a6 6 0 1 0-1.4 1.4l4.4 4.4a1 1 0 0 0 1.4-1.4z'/></svg>") no-repeat center/contain;
+    pointer-events:none;             
+    opacity:.7;
+
+  }
+  
+  #rankTable_filter input[type="search"]:focus + *::before,
+  #rankTable_filter input[type="search"]:hover  + *::before{
+    opacity:1;
+  }
+
+  .dataTables_scrollBody {
+  text-align: center;
+  max-height: 72px !important;
+}
+
+/* ─── Podium-row styling ───────────────────────────────────────────── */
+.winner-gold   { background-color:#fff9db!important;}  
+.winner-silver { background-color:#edeff1!important;}   
+.winner-bronze { background-color:#fff1e6!important;}  
+
+.winner-gold   td:first-child::before { content:"🥇 "; }
+.winner-silver td:first-child::before { content:"🥈 "; }
+.winner-bronze td:first-child::before { content:"🥉 "; }
+
+.fw-semibold {
+  font-weight: 600; 
+}
+
+#rankTable_wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+}
+
+#rankTable_filter {
+  width: 100%; 
+  margin-bottom: 10px; 
+}
+
+
+div.dtsp-panesContainer {
+  margin: 0px !important;
+}

mkdocs.yml

@@ -3,19 +3,31 @@ repo_name: MICS-Lab/thunder
 site_url: https://mics-lab.github.io/thunder
 repo_url: https://github.com/MICS-Lab/thunder
 
-plugins:
-  - mkdocstrings
+extra_css:
+  - stylesheets/extra.css
+  - https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.7/css/dataTables.bootstrap5.min.css
+  - https://cdn.datatables.net/searchpanes/2.3.3/css/searchPanes.dataTables.min.css
+
+extra_javascript:
+  - https://code.jquery.com/jquery-3.7.1.min.js
+  - https://cdn.jsdelivr.net/npm/datatables.net@1.13.7/js/jquery.dataTables.min.js
+  - https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.7/js/dataTables.bootstrap5.min.js
+
+  - https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js
+  - https://cdn.datatables.net/searchpanes/2.3.3/js/dataTables.searchPanes.min.js
+
+  - javascripts/rank-table.js
 
 nav:
   - Home: index.md
+  - Leaderboard: leaderboard.md 
   - Tutorials:
     - Getting Started: getting_started.md
-    - Benchmarking a Custom Model: custom_model.md
+    - Benchmark a Custom Model: custom_model.md
     - Overriding Configurations: custom_config.md
-    - Using foundation models on your data: get_model.md
   - API: api.md
 
-theme:
+theme: 
   name: material
   logo: logo.svg
   favicon: logo.svg
@@ -32,9 +44,9 @@ plugins:
             heading_level: 3
 
 markdown_extensions:
+  - md_in_html               
+  - attr_list              
   - admonition
   - pymdownx.details
   - pymdownx.superfences
-  
-extra_css:
-  - stylesheets/extra.css
+