Clearer table boundaries on generate UI (#2977)

* Change cohort generation * Adjust hover over and carry changes into IR generation display
OHDSI · Nov 14, 2024 · eb9f18d · eb9f18d
1 parent 1d021bf
commit eb9f18d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;