Add notification of generated visuals within “Data Sources” upon drilldown #2725

js/components/heading.less

@@ -1,7 +1,7 @@
 .heading-title {
   font-size: 14px;
   color: #000;
-  padding: 1rem 0rem 1rem 0rem;
+  padding: 1rem 0 1rem 0;
   font-weight: 500;
 
 	& i {

js/pages/data-sources/classes/Treemap.js

@@ -29,7 +29,7 @@ define([
 			this.tableData = ko.observable();
 			this.currentConcept = ko.observable();
 			this.currentConceptSubscription = this.currentConcept.subscribe(c => {
-				c && this.context.loadingReportDrilldown(true);
+				c && this.context.showLoadingDrilldownModal(true) && this.context.loadingDrilldownDone(false);
 			});
 
 			this.byFrequency = false;

js/pages/data-sources/components/reports/treemap.html

@@ -42,7 +42,7 @@
 	</div>
 </div>
 <atlas-modal params="{
-		showModal: context.loadingReportDrilldown,
+		showModal: context.showLoadingDrilldownModal,
 		iconClass: 'fa fa-chart-area',
 		title: ko.i18n('dataSources.loadingDrilldownReport', 'Loading Drilldown Report'),
 		backdropClosable: false,
@@ -52,7 +52,7 @@
 </atlas-modal>
 <!-- ko if: currentConcept() -->
 <report-treemap-drilldown params="
-	context: context, 
+	context: context,
 	currentReport: currentReport, 
 	currentConcept: currentConcept, 
 	byFrequency: byFrequency, 

js/pages/data-sources/components/reports/treemapDrilldown.html

@@ -1,11 +1,12 @@
-<!-- ko ifnot: context.loadingReportDrilldown() -->
+<!-- ko if: context.loadingDrilldownDone() -->
 <!-- ko if: isError -->
 <empty-state params="message: ko.i18n('dataSources.drilldown.noData', 'No data')"></empty-state>
 <!-- /ko -->
 
-<div data-bind="visible: !isError()">
+<div data-bind="visible: !isError()" id="drilldownReport">
 	<!-- ko if: currentConcept() -->
-	<heading-title params="name: ` ${currentConcept().name} ${ko.i18n('dataSources.drilldown.drilldownReport', 'Drilldown Report')()}`"></heading-title>
+	<span class="report-heading-title" data-bind="text: `${currentConcept().name} ${ko.i18n('dataSources.drilldown.drilldownReport', 'Drilldown Report')()}`"></span>
+	<a class="scroll-to-top-link" data-bind="click: () => document.getElementById('dataSourcesTop').scrollIntoView()">scroll to the top</a>
 	<!-- /ko -->
 
 	<div class="col-xs-12">

js/pages/data-sources/components/reports/treemapDrilldown.js

@@ -145,13 +145,6 @@ define([
 				},
 			};
 
-			this.scrollTo = function (s) {
-				var e = $(s);
-				if (e.length > 0) {
-					e[0].scrollIntoView();
-				}
-			}
-
 			this.currentReport = params.currentReport;
 			this.byFrequency = params.byFrequency;
 			this.byUnit = params.byUnit;
@@ -345,14 +338,14 @@ define([
 			this.getData()
 				.then((data) => {
 					this.parseData(data);
+					this.context.loadingDrilldownDone(true);
+					this.context.showLoadingDrilldownModal(false);
+					setTimeout(() => document.getElementById('drilldownReport').scrollIntoView(), 0);
 				})
 				.catch((er) => {
 					this.isError(true);
 					console.error(er);
-				})
-				.finally(() => {
-					this.context.loadingReportDrilldown(false);
-					this.scrollTo("#datasourceReportDrilldownTitle");
+					this.context.showLoadingDrilldownModal(false);
 				});
 		}
 	}

js/pages/data-sources/data-sources.html

@@ -1,3 +1,4 @@
+<div id="dataSourcesTop"></div>
 <heading-title params="name: ko.i18n('dataSources.headingTitle', 'Data Sources'), icon: 'chart-area', theme: 'dark'"></heading-title>
 
 <access-denied params="isAuthenticated: $component.isAuthenticated, isPermitted: canViewCdmResults"></access-denied>

js/pages/data-sources/data-sources.js

@@ -111,9 +111,10 @@ define([
 			this.loadingReport = ko.observable(false);
 			this.hasError = ko.observable(false);
 			this.errorMessage = ko.observable();
-			this.loadingReportDrilldown = ko.observable(false);
+			this.showLoadingDrilldownModal = ko.observable(false);
+			this.loadingDrilldownDone = ko.observable(false);
 			this.isReportLoading = ko.pureComputed(function () {
-				return this.loadingReport() && !this.hasError() && !this.loadingReportDrilldown();
+				return this.loadingReport() && !this.hasError() && !this.showLoadingDrilldownModal();
 			}, this);
 
 			this.isAuthenticated = authApi.isAuthenticated;

js/pages/data-sources/data-sources.less

@@ -112,4 +112,19 @@
       }
     }
   }
+
+  .report-heading-title {
+    display: inline-block;
+    font-size: 14px;
+    color: #000;
+    padding: 1rem 0 1rem 0;
+    font-weight: 500;
+  }
+
+  .scroll-to-top-link {
+    display: inline-block;
+    font-size: 12px;
+    margin-left: 20px;
+    cursor: pointer;
+  }
 }