From eb9f18d280d4b70a2f720173569e51653cd727b0 Mon Sep 17 00:00:00 2001
From: Anthony Sena <anthonysena@users.noreply.github.com>
Date: Thu, 14 Nov 2024 12:26:14 -0500
Subject: [PATCH] Clearer table boundaries on generate UI (#2977)

* Change cohort generation
* Adjust hover over and carry changes into IR generation display
---
 .../cohort-definitions/cohort-definition-manager.css | 12 +++++++++++-
 .../cohort-definitions/cohort-definition-manager.js  |  8 ++++----
 .../components/iranalysis/components/results.js      |  8 ++++----
 .../components/iranalysis/components/results.less    | 12 +++++++++++-
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/js/pages/cohort-definitions/cohort-definition-manager.css b/js/pages/cohort-definitions/cohort-definition-manager.css
index 838705a78..d1fa8dfdb 100644
--- a/js/pages/cohort-definitions/cohort-definition-manager.css
+++ b/js/pages/cohort-definitions/cohort-definition-manager.css
@@ -100,11 +100,21 @@
 .only-results-checkbox {
 }
 table.sources-table td.generation-buttons-column {
-    text-align: right;
+    text-align: left;
 }
 table.sources-table thead th, table.sources-table tbody tr:first-child td {
     padding: 4px 10px;
 }
+table.sources-table tr {
+    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+table.sources-table tr:hover {
+    background-color: #f2f2f2; 
+}
+table.sources-table tr:hover td {
+    border-top: solid 1px #ccc;      
+    border-bottom: solid 1px #ccc;      
+}
 table.sources-table tbody td {
     padding: 0 10px 4px;
 }
diff --git a/js/pages/cohort-definitions/cohort-definition-manager.js b/js/pages/cohort-definitions/cohort-definition-manager.js
index 99f13fdc5..64241936d 100644
--- a/js/pages/cohort-definitions/cohort-definition-manager.js
+++ b/js/pages/cohort-definitions/cohort-definition-manager.js
@@ -583,6 +583,10 @@ define(['jquery', 'knockout', 'text!./cohort-definition-manager.html',
 
 			this.sourcesTableOptions = commonUtils.getTableOptions('S');
 			this.sourcesColumns = [{
+				sortable: false,
+				className: 'generation-buttons-column',
+				render: () => `<span data-bind="template: { name: 'generation-buttons', data: $data }"></span>`
+			}, {
 				title: `<span>${ko.i18n('cohortDefinitions.cohortDefinitionManager.panels.sourceName', 'Source Name')()}</span>`,
 				data: 'name'
 			}, {
@@ -600,10 +604,6 @@ define(['jquery', 'knockout', 'text!./cohort-definition-manager.html',
 			}, {
 				title: ko.i18n('cohortDefinitions.cohortDefinitionManager.panels.generationDuration', 'Generation Duration'),
 				data: 'executionDuration'
-			}, {
-				sortable: false,
-				className: 'generation-buttons-column',
-				render: () => `<span data-bind="template: { name: 'generation-buttons', data: $data }"></span>`
 			}];
 
 			this.stopping = ko.pureComputed(() => this.cohortDefinitionSourceInfo().reduce((acc, target) => ({...acc, [target.sourceKey]: ko.observable(false)}), {}));
diff --git a/js/pages/incidence-rates/components/iranalysis/components/results.js b/js/pages/incidence-rates/components/iranalysis/components/results.js
index e77519f9f..4c19aacd8 100644
--- a/js/pages/incidence-rates/components/iranalysis/components/results.js
+++ b/js/pages/incidence-rates/components/iranalysis/components/results.js
@@ -116,6 +116,10 @@ define([
 			this.showOnlySourcesWithResults = ko.observable(false);
 			this.sourcesTableOptions = commonUtils.getTableOptions('S');
 			this.sourcesColumns = [{
+				sortable: false,
+				className: 'generation-buttons-column',
+				render: () => `<span data-bind="template: { name: 'generation-buttons', data: $data }"></span>`
+			}, {
 				title: ko.i18n('cohortDefinitions.cohortDefinitionManager.panels.sourceName', 'Source Name'),
 				render: (s,p,d) => `${d.source.sourceName}`
 			}, {
@@ -144,10 +148,6 @@ define([
 			}, {
 				title: ko.i18n('ir.results.duration', 'Duration'),
 				render: (s,p,d) => d.info() ? `${this.msToTime(d.info().executionInfo.executionDuration)}` : `n/a`
-			}, {
-				sortable: false,
-				className: 'generation-buttons-column',
-				render: () => `<span data-bind="template: { name: 'generation-buttons', data: $data }"></span>`
 			}];
 		}
 
diff --git a/js/pages/incidence-rates/components/iranalysis/components/results.less b/js/pages/incidence-rates/components/iranalysis/components/results.less
index fb054e202..e899ed5f7 100644
--- a/js/pages/incidence-rates/components/iranalysis/components/results.less
+++ b/js/pages/incidence-rates/components/iranalysis/components/results.less
@@ -25,8 +25,18 @@
     tbody tr td {
       padding: 0 10px 4px;
     }
+    tr {
+      transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+    }
+    tr:hover {
+      background-color: #f2f2f2; 
+    }
+    tr:hover td {
+      border-top: solid 1px #ccc;      
+      border-bottom: solid 1px #ccc;      
+    }
     .generation-buttons-column {
-      text-align: right;
+      text-align: left;
     }
     .generation-buttons {
       white-space: nowrap;