From 284fdcdc08a213643cc9b815c43899aa6a39cb89 Mon Sep 17 00:00:00 2001
From: Gurdeep Singh <43615259+gurdeep330@users.noreply.github.com>
Date: Tue, 26 Mar 2024 14:21:21 +0100
Subject: [PATCH] Revert "Feat: add dropdown menu and adjust column width (#25)
 (#26)"

This reverts commit c3d92b3635e77310dc632357084e939d86f08693.
---
 docs/custom.css        |  4 +--
 overrides/main.html    | 74 +++++++++++++++++++++++++++++++++++++++---
 templates/overview.txt | 24 +++++++++++---
 3 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/docs/custom.css b/docs/custom.css
index c9dc6e6c..f29180fb 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -21,10 +21,10 @@ table{
 }
 
 /* change the with of first column */
-thead tr th:first-child,
+/* thead tr th:first-child,
 tbody tr td:first-child {
   width: 400px;
   min-width: 300px;
   max-width: 400px;
   word-break: break-all;
-}
+} */
diff --git a/overrides/main.html b/overrides/main.html
index a6dcc9b4..d5f35c9d 100644
--- a/overrides/main.html
+++ b/overrides/main.html
@@ -39,7 +39,8 @@
   new DataTable('#table1', {
     order: [[5, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"}
+        {"className": "dt-center", "targets": "_all"},
+        { width: '30%', targets: 0 }
       ],
     pageLength: 5,
     layout: {
@@ -51,7 +52,8 @@
   new DataTable('#table2', {
     order: [[3, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"}
+        {"className": "dt-center", "targets": "_all"},
+        { width: '30%', targets: 0 }
       ],
     pageLength: 5,
     layout: {
@@ -61,9 +63,41 @@
     }
   });
   new DataTable('#table3', {
+    initComplete: function () {
+        this.api()
+            .columns()
+            .every(function () {
+                let column = this;
+ 
+                // Create select element
+                let select = document.createElement('select');
+                select.add(new Option(''));
+                column.footer().replaceChildren(select);
+ 
+                // Apply listener for user change in value
+                select.addEventListener('change', function () {
+                    column
+                        .search(select.value, {exact: true})
+                        .draw();
+                });
+
+                // keep the width of the select element same as the column
+                select.style.width = '100%';
+ 
+                // Add list of options
+                column
+                    .data()
+                    .unique()
+                    .sort()
+                    .each(function (d, j) {
+                        select.add(new Option(d));
+                    });
+            });
+    },
     // order: [[3, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"}
+        {"className": "dt-center", "targets": "_all"},
+        { width: '25%', targets: 1 }
       ],
     pageLength: 5,
     layout: {
@@ -73,9 +107,41 @@
     }
   });
   new DataTable('#table4', {
+    initComplete: function () {
+        this.api()
+            .columns()
+            .every(function () {
+                let column = this;
+ 
+                // Create select element
+                let select = document.createElement('select');
+                select.add(new Option(''));
+                column.footer().replaceChildren(select);
+ 
+                // Apply listener for user change in value
+                select.addEventListener('change', function () {
+                    column
+                        .search(select.value, {exact: true})
+                        .draw();
+                });
+
+                // keep the width of the select element same as the column
+                select.style.width = '100%';
+ 
+                // Add list of options
+                column
+                    .data()
+                    .unique()
+                    .sort()
+                    .each(function (d, j) {
+                        select.add(new Option(d));
+                    });
+            });
+    },
     // order: [[3, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"}
+        {"className": "dt-center", "targets": "_all"},
+        { width: '30%', targets: 0 }
       ],
     pageLength: 5,
     layout: {
diff --git a/templates/overview.txt b/templates/overview.txt
index fcf1659e..f2a3e431 100644
--- a/templates/overview.txt
+++ b/templates/overview.txt
@@ -71,7 +71,7 @@
   <tbody>
     {% for article in most_cited_articles %}
       <tr>
-        <td><a href="{{article.url}}">{{article.title}}</a><br></td>
+        <td><a href="{{article.url}}">{{article.title}}</a></td>
         <td>{{ article.authors}}</td>
         <td>{{ article.publicationDate}}</td>
         <td>{{ article.journal}}</td>
@@ -97,7 +97,7 @@
   <tbody>
     {% for article in most_recent_articles %}
       <tr>
-        <td><a href="{{article.url}}">{{article.title}}</a><br></td>
+        <td><a href="{{article.url}}">{{article.title}}</a></td>
         <td>{{ article.authors}}</td>
         <td>{{ article.publicationDate}}</td>
         <td>{{ article.journal}}</td>
@@ -125,7 +125,7 @@
     {% for article in manually_curated_articles %}
       <tr>
         <td>{{ article.topic}}</td>
-        <td><a href="{{article.url}}">{{article.title}}</a><br></td>
+        <td><a href="{{article.url}}">{{article.title}}</a></td>
         <td>{{ article.authors}}</td>
         <td>{{ article.publicationDate}}</td>
         <td>{{ article.journal}}</td>
@@ -133,6 +133,16 @@
       </tr>
     {% endfor %}
   </tbody>
+  <tfoot>
+    <tr>
+        <th>Topic</th>
+        <th>Title</th>
+        <th>Authors</th>
+        <th>Publication Date</th>
+        <th>Journal/Conference</th>
+        <th>Citation count</th>
+    </tr>
+  </tfoot>
   </table>
   </p>
 
@@ -149,10 +159,16 @@
     {% for article in additional_reading %}
       <tr>
         <td>{{ article.topic}}</td>
-        <td><a href="{{article.link}}">{{article.name}}</a><br></td>
+        <td><a href="{{article.link}}">{{article.name}}</a></td>
       </tr>
     {% endfor %}
   </tbody>
+  <tfoot>
+    <tr>
+        <th>Topic</th>
+        <th>Title</th>
+    </tr>
+  </tfoot>
   </table>
   </p>