interactive table

ai_models.html

@@ -43,7 +43,10 @@
             <section class="mt-4" id="segmentation-models">
                 <h2>Segmentation models</h2>
                 <table class="mt-4 ml-5">
-                    <tr>
+                    <tr class="header">
+                        <th colspan="2">Segmentation models</th>
+                    </tr>
+                    <tr class="header">
                         <th>Location</th>
                         <th>Architectures</th>
                     </tr>
@@ -75,18 +78,18 @@
                         <td>Esophagus OAR</td>
                         <td>nnUNetv2</td>
                     </tr>
-                    <tr>
-                        <td>Body segmentation</td>
+                    <tr class="clickable" data-href="#SwinBs">
+                        <td>Body</td>
                         <td>SwinUNETR</td>
                     </tr>
                 </table>
-                <div class="row" style="border: 5px solid rgb(189, 190, 191)">
+                <div id="SwinBs" class="row" style="border: 5px solid rgb(189, 190, 191)">
                     <div id="model" style="padding:50px"></div>
                 </div>
             </section>
 
-            <section class="mt-4" id="dose-prediction models">
-                <h2>Dose prediction</h2>
+            <section class="mt-4" id="dose-prediction">
+                <h2>Dose prediction models</h2>
                 <table class="mt-4 ml-5">
                     <tr>
                         <th>Location</th>
@@ -142,11 +145,12 @@
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
 <script>
+    $(".clickable").click(function(){
+           window.location = $(this).data("href");
+    });
+
     $(document).ready(function () {
         var apiUrl = 'https://huggingface.co/AI4MIRO/SwinUNETR_body_segmentation/raw/main/README.md'
-        //var apiUrl = 'https://gitlab.com/api/v4/projects/' + projectId + '/repository/tags'; -->
-
-        // Fetch the latest release information
         
         $.ajax({
             url: apiUrl,
@@ -154,17 +158,6 @@
             success: function (data) {
                 console.log("data",data);
                 $("#model").html(marked(data))
-                // if (data.length > 0) {
-                //     var latestRelease = data[0];
-                //     console.log("latestRelease",latestRelease);
-                //     var releaseAssets = latestRelease.assets;
-                //     console.log("releaseAssets",releaseAssets);
-                //     // Assuming the first asset is the desired download (e.g., a zip file)
-                //     var downloadUrl = releaseAssets.sources.length > 0 ? releaseAssets.sources[0].url : '';
-
-                //     // Update the download button href attribute
-                //     $('#downloadButton').attr('onclick', 'window.location.href="' + downloadUrl + '"');
-                // }
             },
             error: function (error) {
                 console.error('Error fetching release information:', error);

style.css

@@ -19,10 +19,18 @@ td, th {
 	border-bottom: 1px solid rgb(107, 114, 128);
 	border-right: 1px solid rgb(107, 114, 128);
 	font-size: large;
-	background-color: rgb(250, 250, 251);
 	padding: 10px 50px;
 }
 
+tr {
+	background-color: rgb(250, 250, 251);
+	transition: 0.2s;
+}
+
+tr:hover:not(.header) {
+	background-color: rgb(180, 180, 180);	
+}
+
 table {
 	border: 3px solid rgb(250, 250, 251);
 }