From c087833fee4d15addb13ddd0369e9882205916fb Mon Sep 17 00:00:00 2001
From: Brian Carlsen <bcarlsen@westcoastinformatics.com>
Date: Thu, 16 Jan 2025 08:52:03 -0800
Subject: [PATCH] RDFBROWSER-525: fix issues with popout hierarchy (#325)

---
 web/build.gradle                              |  11 +-
 .../concept-display.component.ts              |   7 +-
 .../evs-header/evs-header.component.html      | 109 ++++++----
 .../hierarchy-display.component.html          |  40 ++--
 .../hierarchy-display.component.ts            | 141 +++++--------
 .../hierarchy-popup.component.css             |   6 +
 .../hierarchy-popup.component.html            |  75 ++++---
 .../hierarchy-popup.component.ts              | 196 ++++++++----------
 8 files changed, 292 insertions(+), 293 deletions(-)

diff --git a/web/build.gradle b/web/build.gradle
index 656fefe2..ebc98fa6 100644
--- a/web/build.gradle
+++ b/web/build.gradle
@@ -67,15 +67,16 @@ dependencies {
 
     implementation 'org.springframework.boot:spring-boot-starter-web'
     implementation 'org.springframework.cloud:spring-cloud-starter-gateway-mvc'
+		
     implementation 'ch.qos.logback:logback-classic:1.4.14' // Updated version
     implementation 'ch.qos.logback:logback-core:1.4.14' // Updated version
     implementation 'org.springframework.boot:spring-boot-starter-tomcat:3.2.10' // Updated version
     implementation 'org.apache.tomcat:tomcat-annotations-api:10.1.30' // Updated version
-    implementation 'org.apache.tomcat.embed:tomcat-embed-core:10.1.30' // Updated version
-    implementation 'org.apache.tomcat.embed:tomcat-embed-el:10.1.30' // Updated version
-    implementation 'org.apache.tomcat.embed:tomcat-embed-websocket:10.1.30' // Updated version
-    implementation 'org.springframework:spring-web:6.1.13' // Updated version
-    implementation 'org.springframework:spring-webmvc:6.1.13' // Updated version
+    implementation 'org.apache.tomcat.embed:tomcat-embed-core:10.1.34' // Updated version
+    implementation 'org.apache.tomcat.embed:tomcat-embed-el:10.1.34' // Updated version
+    implementation 'org.apache.tomcat.embed:tomcat-embed-websocket:10.1.34' // Updated version
+    implementation 'org.springframework:spring-web:6.1.14' // Updated version
+    implementation 'org.springframework:spring-webmvc:6.1.14' // Updated version
     // fixes netty resolver error for macos
     implementation 'io.netty:netty-common:4.1.115.Final'
     implementation 'io.netty:netty-resolver-dns-native-macos'
diff --git a/web/frontend/src/app/component/concept-display/concept-display.component.ts b/web/frontend/src/app/component/concept-display/concept-display.component.ts
index 4eb7a922..444af2b3 100644
--- a/web/frontend/src/app/component/concept-display/concept-display.component.ts
+++ b/web/frontend/src/app/component/concept-display/concept-display.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {NavigationEnd, Router} from '@angular/router';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import { Location } from '@angular/common';
 import { ConceptDetailService } from './../../service/concept-detail.service';
 import { Concept } from './../../model/concept';
@@ -60,7 +60,6 @@ export class ConceptDisplayComponent implements OnInit, OnDestroy {
   conceptIsSubset: boolean;
   hierarchyPopupUrl = '/hierarchy-popup/';
 
-
   subscription = null;
 
   constructor(
@@ -119,7 +118,7 @@ export class ConceptDisplayComponent implements OnInit, OnDestroy {
     if (this.configService.getTriggerHierarchyPopup()) {
       const baseHref = this.location.prepareExternalUrl('');
       const url = this.router.createUrlTree([baseHref + this.hierarchyPopupUrl + this.terminology + '/' + this.conceptCode]).toString();
-      window.open(url, '_blank', 'width=600,height=1000');
+      window.open(url, '_blank', 'width=600,height=850,scrolbars=no');
       this.configService.setTriggerHierarchyPopup(false);
     }
   }
diff --git a/web/frontend/src/app/component/evs-header/evs-header.component.html b/web/frontend/src/app/component/evs-header/evs-header.component.html
index bdd0b9de..d572dba8 100644
--- a/web/frontend/src/app/component/evs-header/evs-header.component.html
+++ b/web/frontend/src/app/component/evs-header/evs-header.component.html
@@ -1,78 +1,101 @@
-<header *ngIf="!this.configService.getHierarchyPopupStatus()" class="push" role="banner">
+<header id="header-top" *ngIf="!this.configService.getHierarchyPopupStatus()" class="push" role="banner">
   <div id="nvcgSlSiteBanner" class="row header-row">
     <div class="slot-item only-SI nci-logo-pages large-12 columns">
-      <a href="/"><img src="assets/images/EVSLogo.png" alt="National Cancer Institute" class="header-img"></a>
+      <a href="/"><img src="assets/images/EVSLogo.png" alt="National Cancer Institute" class="header-img" /></a>
     </div>
   </div>
 </header>
 <nav *ngIf="!this.configService.getHierarchyPopupStatus()" class="navbar navbar-expand-md navbar-dark nciHeader">
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nciCollapse"
-    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+  <button
+    class="navbar-toggler"
+    type="button"
+    data-toggle="collapse"
+    data-target="#nciCollapse"
+    aria-controls="navbarCollapse"
+    aria-expanded="false"
+    aria-label="Toggle navigation"
+  >
     <span class="navbar-toggler-icon"></span>
   </button>
   <div *ngIf="terminology" id="nciCollapse">
     <ul class="menu nav-menu nav-item-title">
       <li class="nav-item">
-        <a *ngIf="!this.configService.getMultiSearch()" class="nav-link nav-link-list" [routerLink]="['/welcome']"
-          [queryParams]="{terminology: this.configService.getTerminologyName()}" title="Home"><i class="fa fa-home"></i>
+        <a
+          *ngIf="!this.configService.getMultiSearch()"
+          class="nav-link nav-link-list"
+          [routerLink]="['/welcome']"
+          [queryParams]="{ terminology: this.configService.getTerminologyName() }"
+          title="Home"
+          ><i class="fa fa-home"></i>
           Home
         </a>
-        <a *ngIf="this.configService.getMultiSearch() && !displayMultiSearchTerms()" class="nav-link nav-link-list"
-          [routerLink]="['/welcome']" [queryParams]="{terminology: 'multi'}" title="Home"><i class="fa fa-home"></i>
+        <a
+          *ngIf="this.configService.getMultiSearch() && !displayMultiSearchTerms()"
+          class="nav-link nav-link-list"
+          [routerLink]="['/welcome']"
+          [queryParams]="{ terminology: 'multi' }"
+          title="Home"
+          ><i class="fa fa-home"></i>
           Home
         </a>
-        <a *ngIf="this.configService.getMultiSearch() && displayMultiSearchTerms()" class="nav-link nav-link-list"
-          [routerLink]="['/welcome']" [queryParams]="{terminology: this.getMultiSearchTermsUrl()}" title="Home"><i
-            class="fa fa-home"></i>
+        <a
+          *ngIf="this.configService.getMultiSearch() && displayMultiSearchTerms()"
+          class="nav-link nav-link-list"
+          [routerLink]="['/welcome']"
+          [queryParams]="{ terminology: this.getMultiSearchTermsUrl() }"
+          title="Home"
+          ><i class="fa fa-home"></i>
           Home
         </a>
       </li>
       <li *ngIf="showTerminologyInfo && notMultiSearch()" class="nav-item version-info">
-        <span class="nav-link-list">{{versionInfo}}</span>
+        <span class="nav-link-list">{{ versionInfo }}</span>
       </li>
-      <li *ngIf="displayMultiSearchTerms()" class="nav-item version-info" style="max-width:30em">
-        <span class="nav-link-list" id="truncateTermList">
-          Terminologies: {{ getMultiSearchTerms() }}</span>
+      <li *ngIf="displayMultiSearchTerms()" class="nav-item version-info" style="max-width: 30em">
+        <span class="nav-link-list" id="truncateTermList"> Terminologies: {{ getMultiSearchTerms() }}</span>
       </li>
 
       <li class="nav-item" *ngIf="getTerminologySubset() && notMultiSearch()">
-        <a class="nav-link nav-link-list" [routerLink]="['/subsets', terminology?.terminology]"
-          title="Display Subsets">Subsets</a>
+        <a class="nav-link nav-link-list" [routerLink]="['/subsets', terminology?.terminology]" title="Display Subsets">Subsets</a>
       </li>
       <li class="nav-item">
         <a class="nav-link nav-link-list" [routerLink]="['/mappings']" title="Display Mappings">Mappings</a>
       </li>
       <li class="nav-item" *ngIf="getTerminologyHierarchy() && firstRoot != null && notMultiSearch()">
-        <a class=" nav-link nav-link-list" [routerLink]="['/hierarchy', terminology?.terminology, firstRoot]"
-          title="Display Concept Hierarchy">Hierarchy</a>
+        <a class="nav-link nav-link-list" [routerLink]="['/hierarchy', terminology?.terminology, firstRoot]" title="Display Concept Hierarchy"
+          >Hierarchy</a
+        >
       </li>
       <li class="nav-item dropdown" *ngIf="notMultiSearch()">
-        <a class="nav-link nav-link-list dropdown-toggle" href="#" id="documentationMenu" data-toggle="dropdown"
-          aria-haspopup="true" aria-expanded="false" title="Display Documentation">Documentation</a>
+        <a
+          class="nav-link nav-link-list dropdown-toggle"
+          href="#"
+          id="documentationMenu"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          title="Display Documentation"
+          >Documentation</a
+        >
         <div class="dropdown-menu dropdown-menu-right dropdown-links" aria-labelledby="helpMenu">
-          <a class="dropdown-item dropdown-links" [routerLink]="['/associations', terminology?.terminology]"
-            title="List of Associations">Associations</a>
-          <a class="dropdown-item dropdown-links" [routerLink]="['/properties', terminology?.terminology]"
-            title="List of Properties">Properties</a>
-          <a class="dropdown-item dropdown-links" [routerLink]="['/qualifiers', terminology?.terminology]"
-            title="List of Qualifiers">Qualifiers</a>
-          <a class="dropdown-item dropdown-links" [routerLink]="['/roles', terminology?.terminology]"
-            title="List of Roles">Roles</a>
-          <a class="dropdown-item dropdown-links" [routerLink]="['/termtypes', terminology?.terminology]"
-            title="List of Term Types">Term
-            Types</a>
-          <a class="dropdown-item dropdown-links" [routerLink]="['/sources', terminology?.terminology]"
-            title="List of Sources">Sources</a>
-          <a class="dropdown-item dropdown-links" [routerLink]="['/definitiontypes', terminology?.terminology]"
-            title="List of Definition Types">Definition
-            Types</a>
-          <a class="dropdown-item dropdown-links" [routerLink]="['/synonymtypes', terminology?.terminology]"
-            title="List of Synonym Types">Synonym
-            Types</a>
+          <a class="dropdown-item dropdown-links" [routerLink]="['/associations', terminology?.terminology]" title="List of Associations"
+            >Associations</a
+          >
+          <a class="dropdown-item dropdown-links" [routerLink]="['/properties', terminology?.terminology]" title="List of Properties">Properties</a>
+          <a class="dropdown-item dropdown-links" [routerLink]="['/qualifiers', terminology?.terminology]" title="List of Qualifiers">Qualifiers</a>
+          <a class="dropdown-item dropdown-links" [routerLink]="['/roles', terminology?.terminology]" title="List of Roles">Roles</a>
+          <a class="dropdown-item dropdown-links" [routerLink]="['/termtypes', terminology?.terminology]" title="List of Term Types">Term Types</a>
+          <a class="dropdown-item dropdown-links" [routerLink]="['/sources', terminology?.terminology]" title="List of Sources">Sources</a>
+          <a class="dropdown-item dropdown-links" [routerLink]="['/definitiontypes', terminology?.terminology]" title="List of Definition Types"
+            >Definition Types</a
+          >
+          <a class="dropdown-item dropdown-links" [routerLink]="['/synonymtypes', terminology?.terminology]" title="List of Synonym Types"
+            >Synonym Types</a
+          >
           <div class="dropdown-divider"></div>
-          <a class="dropdown-item dropdown-links" [routerLink]="['/alldocs', terminology?.terminology]"
-            title="List of All Metadata Tables">All
-            Metadata</a>
+          <a class="dropdown-item dropdown-links" [routerLink]="['/alldocs', terminology?.terminology]" title="List of All Metadata Tables"
+            >All Metadata</a
+          >
         </div>
       </li>
       <li class="nav-item">
diff --git a/web/frontend/src/app/component/hierarchy-display/hierarchy-display.component.html b/web/frontend/src/app/component/hierarchy-display/hierarchy-display.component.html
index a2818161..4ec11a14 100644
--- a/web/frontend/src/app/component/hierarchy-display/hierarchy-display.component.html
+++ b/web/frontend/src/app/component/hierarchy-display/hierarchy-display.component.html
@@ -1,30 +1,42 @@
-<div id="hierarchyTableDisplay" style="height: 800px; width: 100%;">
+<div id="hierarchyTableDisplay">
   <as-split [direction]="direction">
     <as-split-area [size]="hierarchyPanelSize">
       <div class="hierarchy-div">
         <div class="page-header p-coloring">
           Concept Hierarchy
-          <span style="float:right" class="fa fa-close pointer" title="Close hierarchy view"
-            (click)="closeHierarchy()"></span>
-          <span style="float:right; margin-right: 10px" class="fa fa-expand pointer" title="Popup hierarchy view"
-                (click)="openHierarchyPopup()"></span>
+          <span style="float: right" class="fa fa-close pointer" title="Close hierarchy view" (click)="closeHierarchy()"></span>
+          <span
+            style="float: right; margin-right: 10px"
+            class="fa fa-expand pointer"
+            title="Popup hierarchy view"
+            (click)="openHierarchyPopup()"
+          ></span>
         </div>
         <!-- Only show this section if tree positions (node['ct']) is present -->
-        <div *ngIf="totalPositions != 0" class="table-info text-body">
-          <span style="margin-left:5px">{{displayedPositions}} / {{totalPositions}} tree positions
+        <div *ngIf="totalPositions > 0" class="table-info text-body">
+          <span style="margin-left: 5px"
+            >{{ displayedPositions }} / {{ totalPositions }} tree positions
             <a href="#" (click)="loadAllPositions($event)">Load All</a>
           </span>
         </div>
-        <p-treeTable #hierarchyTable [value]="hierarchyData" selectionMode="single" dataKey="code"
-          [(selection)]="selectedNode" [scrollable]="true" scrollHeight="800px"
-          (onNodeExpand)="treeTableNodeExpand($event)" (onNodeCollapse)="treeTableNodeCollapse($event)"
-          (onNodeSelect)="treeTableNodeSelected(selectedNode)">
+        <p-treeTable
+          #hierarchyTable
+          [value]="hierarchyData"
+          selectionMode="single"
+          dataKey="code"
+          [(selection)]="selectedNode"
+          [scrollable]="true"
+          scrollHeight="800px"
+          (onNodeExpand)="treeTableNodeExpand($event)"
+          (onNodeCollapse)="treeTableNodeCollapse($event)"
+          (onNodeSelect)="treeTableNodeSelected(selectedNode)"
+        >
           <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
-            <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode" [ngClass]="{'treenode-highlight': rowData.highlight}">
+            <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode" [ngClass]="{ 'treenode-highlight': rowData.highlight }">
               <td>
-                <div style="cursor: pointer; display:flex;">
+                <div style="cursor: pointer; display: flex">
                   <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
-                  {{rowData.label}}
+                  {{ rowData.label }}
                 </div>
               </td>
             </tr>
diff --git a/web/frontend/src/app/component/hierarchy-display/hierarchy-display.component.ts b/web/frontend/src/app/component/hierarchy-display/hierarchy-display.component.ts
index 2ab0658e..c82c27c2 100644
--- a/web/frontend/src/app/component/hierarchy-display/hierarchy-display.component.ts
+++ b/web/frontend/src/app/component/hierarchy-display/hierarchy-display.component.ts
@@ -46,7 +46,7 @@ export class HierarchyDisplayComponent implements OnInit {
     private conceptDetailService: ConceptDetailService,
     private router: Router,
     private loaderService: LoaderService,
-    public configService: ConfigurationService
+    public configService: ConfigurationService,
   ) {
     // Do this in the constructor so it's ready to go when this component is injected
     this.configSetup();
@@ -55,7 +55,7 @@ export class HierarchyDisplayComponent implements OnInit {
   ngOnInit() {
     console.log('ngOnInit');
     this.getPathInHierarchy();
-    // this.updateDisplaySize();
+    this.updateDisplaySize();
   }
 
   configSetup() {
@@ -66,21 +66,18 @@ export class HierarchyDisplayComponent implements OnInit {
     this.terminology = this.configService.getTerminologyName();
   }
 
-  openHierarchyPopup(){
+  openHierarchyPopup() {
     this.closeHierarchy();
     this.configService.setTriggerHierarchyPopup(true);
   }
 
   closeHierarchy() {
-    this.router.navigate([
-      '/concept/' + this.terminology + '/' + this.conceptCode,
-    ]);
+    this.router.navigate(['/concept/' + this.terminology + '/' + this.conceptCode]);
   }
 
   updateDisplaySize = () => {
     const bodyHeight = document.documentElement.scrollHeight;
-    document.getElementById('hierarchyTableDisplay').style.height =
-      bodyHeight + 'px';
+    document.getElementById('hierarchyTableDisplay').style.height = bodyHeight + 'px';
     /*
      * Adjust the size of the hierarchy display
      */
@@ -91,38 +88,25 @@ export class HierarchyDisplayComponent implements OnInit {
       tableHeight = bodyHeight;
     }
     this.hierarchyTable.scrollHeight = tableHeight - 200 + 'px';
-  }
+  };
 
   // Handler for selecting a tree node
   treeTableNodeSelected(event) {
     // Handle selecting for more data for top level
     if (event.ct && event.data.parentCode === 'root') {
-      if (
-        confirm(
-          'Loading all tree positions may take a while, are you sure you want to proceed?'
-        )
-      ) {
+      if (confirm('Loading all tree positions may take a while, are you sure you want to proceed?')) {
         this.getAllPathsInHierarchy();
       }
       setTimeout(() => (this.selectedNode = null), 100);
     } else if (event.ct) {
-    // Handle selecting for more data for sibling level
-      if (
-        confirm(
-          'Loading more data may take a while, are you sure you want to proceed?'
-        )
-      ) {
-        this.getAllTreeTableChildrenNodes(
-          event.data.parentCode,
-          event.data.parentNode
-        );
+      // Handle selecting for more data for sibling level
+      if (confirm('Loading more data may take a while, are you sure you want to proceed?')) {
+        this.getAllTreeTableChildrenNodes(event.data.parentCode, event.data.parentNode);
       }
       setTimeout(() => (this.selectedNode = null), 100);
     } else {
-    // Handle selecting a code to navigate away
-      this.router.navigate([
-        this.hierarchyUrl + this.terminology + '/' + event.code,
-      ]);
+      // Handle selecting a code to navigate away
+      this.router.navigate([this.hierarchyUrl + this.terminology + '/' + event.code]);
     }
   }
 
@@ -130,24 +114,19 @@ export class HierarchyDisplayComponent implements OnInit {
   getPathInHierarchy(limit: number = this.hierarchyLimit) {
     console.log('getPathInHierarchy called');
     this.loaderService.showLoader();
-    this.conceptDetailService
-      .getHierarchyData(this.conceptCode, limit)
-      .then((nodes) => {
-        this.hierarchyData = (nodes as TreeNode[]);
-        for (const node of this.hierarchyData) {
-          this.setTreeTableProperties(node, null);
-        }
-        this.updateDisplaySize();
-        if (this.selectedNodes.length > 0) {
-          setTimeout(() => {
-            this.scrollToSelectionTableTree(
-              this.selectedNodes[0],
-              this.hierarchyTable
-            );
-          }, 100);
-        }
-        this.loaderService.hideLoader();
-      });
+    this.conceptDetailService.getHierarchyData(this.conceptCode, limit).then((nodes) => {
+      this.hierarchyData = nodes as TreeNode[];
+      for (const node of this.hierarchyData) {
+        this.setTreeTableProperties(node, null);
+      }
+      this.updateDisplaySize();
+      if (this.selectedNodes.length > 0) {
+        setTimeout(() => {
+          this.scrollToSelectionTableTree(this.selectedNodes[0], this.hierarchyTable);
+        }, 100);
+      }
+      this.loaderService.hideLoader();
+    });
   }
 
   getAllPathsInHierarchy() {
@@ -163,29 +142,24 @@ export class HierarchyDisplayComponent implements OnInit {
   // Get child tree nodes (for an expanded node)
   getTreeTableChildrenNodes(code: string, node: any, limit: number = 100) {
     this.loaderService.showLoader();
-    this.conceptDetailService
-      .getHierarchyChildData(code, limit)
-      .then((nodes) => {
-        if (limit == null) {
-          const codes = new Set(node.children.map((n) => n.code));
-          // Remove the 'ct' node and combine the list with the remaining elements
-          // NOTE: this may require resorting
-          node.children = [
-            ...node.children.filter((n) => !n.ct),
-            ...nodes.filter((n) => !codes.has(n['code'])),
-          ];
-        } else {
-          node.children = nodes;
-        }
-        for (const child of node.children) {
-          this.setTreeTableProperties(child, node);
-        }
-        this.deepCopyHierarchyData();
-        setTimeout(() => {
-          this.scrollToSelectionTableTree(node, this.hierarchyTable);
-        }, 100);
-        this.loaderService.hideLoader();
-      });
+    this.conceptDetailService.getHierarchyChildData(code, limit).then((nodes) => {
+      if (limit == null) {
+        const codes = new Set(node.children.map((n) => n.code));
+        // Remove the 'ct' node and combine the list with the remaining elements
+        // NOTE: this may require resorting
+        node.children = [...node.children.filter((n) => !n.ct), ...nodes.filter((n) => !codes.has(n['code']))];
+      } else {
+        node.children = nodes;
+      }
+      for (const child of node.children) {
+        this.setTreeTableProperties(child, node);
+      }
+      this.deepCopyHierarchyData();
+      setTimeout(() => {
+        this.scrollToSelectionTableTree(node, this.hierarchyTable);
+      }, 100);
+      this.loaderService.hideLoader();
+    });
   }
 
   getAllTreeTableChildrenNodes(code: string, node: any) {
@@ -259,9 +233,7 @@ export class HierarchyDisplayComponent implements OnInit {
   scrollToSelectionTableTree(selectedNode, hierarchyTable) {
     // console.log('scroll to selection', selectedNode);
     let index = 0;
-    const hierarchyRows = this.hierarchyTable.el.nativeElement.querySelectorAll(
-      '.p-treetable-tbody>tr'
-    );
+    const hierarchyRows = this.hierarchyTable.el.nativeElement.querySelectorAll('.p-treetable-tbody>tr');
     for (let i = 0; i < hierarchyRows.length; i++) {
       const testLabel = hierarchyRows[i]['innerText'].trim();
       if (testLabel === selectedNode.label) {
@@ -269,18 +241,18 @@ export class HierarchyDisplayComponent implements OnInit {
         break;
       }
     }
-    if (
-      this.hierarchyTable.el.nativeElement.querySelectorAll(
-        '.p-treetable-tbody>tr'
-      )[index] !== undefined
-    ) {
-      this.hierarchyTable.el.nativeElement
-        .querySelectorAll('.p-treetable-tbody>tr')
-      [index].scrollIntoView({
+    if (this.hierarchyTable.el.nativeElement.querySelectorAll('.p-treetable-tbody>tr')[index] !== undefined) {
+      this.hierarchyTable.el.nativeElement.querySelectorAll('.p-treetable-tbody>tr')[index].scrollIntoView({
         behavior: 'smooth',
         block: 'center',
         inline: 'start',
       });
+      setTimeout(() => {
+        document.getElementById('header-top').scrollIntoView({
+          behavior: 'smooth',
+          inline: 'start',
+        });
+      }, 100);
     }
   }
 
@@ -314,9 +286,7 @@ export class HierarchyDisplayComponent implements OnInit {
     }
 
     // If there is no overlap between sourceList and selectedSources, clear selectedSources
-    const intersection = [...sourceList].filter((x) =>
-      this.selectedSources.has(x)
-    );
+    const intersection = [...sourceList].filter((x) => this.selectedSources.has(x));
     if (intersection.length === 0) {
       this.toggleSelectedSource('All');
     }
@@ -327,10 +297,7 @@ export class HierarchyDisplayComponent implements OnInit {
 
   toggleSelectedSource(source) {
     // clear if All is selected or was last selected
-    if (
-      source === 'All' ||
-      (this.selectedSources.size === 1 && this.selectedSources.has('All'))
-    ) {
+    if (source === 'All' || (this.selectedSources.size === 1 && this.selectedSources.has('All'))) {
       this.selectedSources.clear();
     }
     if (this.selectedSources.has(source)) {
diff --git a/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.css b/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.css
index 5e6a7242..3eedc67f 100644
--- a/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.css
+++ b/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.css
@@ -1,3 +1,9 @@
+
+/* No vertical scrollbar for popup */
+#hierarchyTableDisplay {
+  overflow-y: hidden !important; 
+}
+
 .treenode-highlight {
   color: #FFFFFF !important;
   background-color: #1c5e86 !important;
diff --git a/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.html b/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.html
index df5de546..aea484fa 100644
--- a/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.html
+++ b/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.html
@@ -1,34 +1,43 @@
-<div id="hierarchyTableDisplay" style="height: 800px; width: 100%;">
-  <as-split [direction]="direction">
-    <as-split-area [size]="hierarchyPanelSize">
-      <div class="hierarchy-div">
-        <div class="page-header p-coloring">
-          Concept Hierarchy
-          <span style="float:right; margin-right: 10px" class="fa fa-compress pointer" title="Pop-in hierarchy view"
-                (click)="closeHierarchyPopup()"></span>
-        </div>
-          <!-- Only show this section if tree positions (node['ct']) is present -->
-          <div *ngIf="totalPositions != 0" class="table-info text-body">
-            <span style="margin-left:5px">{{displayedPositions}} / {{totalPositions}} tree positions
-              <a href="#" (click)="loadAllPositions($event)">Load All</a>
-            </span>
-          </div>
-        <p-treeTable #hierarchyTable [value]="hierarchyData" selectionMode="single" dataKey="code"
-          [(selection)]="selectedNode" [scrollable]="true" scrollHeight="800px"
-          (onNodeExpand)="treeTableNodeExpand($event)" (onNodeCollapse)="treeTableNodeCollapse($event)"
-          (onNodeSelect)="treeTableNodeSelected(selectedNode)">
-          <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
-            <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode" [ngClass]="{'treenode-highlight': rowData.highlight}">
-              <td>
-                <div style="cursor: pointer; display:flex;">
-                  <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
-                  {{rowData.label}}
-                </div>
-              </td>
-            </tr>
-          </ng-template>
-        </p-treeTable>
-      </div>
-    </as-split-area>
-  </as-split>
+<div id="hierarchyTableDisplay">
+  <div class="hierarchy-div">
+    <div class="page-header p-coloring">
+      Concept Hierarchy
+      <span
+        style="float: right; margin-right: 10px"
+        class="fa fa-compress pointer"
+        title="Pop-in hierarchy view"
+        (click)="closeHierarchyPopup()"
+      ></span>
+    </div>
+    <!-- Only show this section if tree positions (node['ct']) is present -->
+    <div *ngIf="totalPositions != 0" class="table-info text-body">
+      <span style="margin-left: 5px"
+        >{{ displayedPositions }} / {{ totalPositions }} tree positions
+        <a href="#" (click)="loadAllPositions($event)">Load All</a>
+      </span>
+    </div>
+    <p-treeTable
+      #hierarchyTable
+      [value]="hierarchyData"
+      selectionMode="single"
+      dataKey="code"
+      [(selection)]="selectedNode"
+      [scrollable]="true"
+      scrollHeight="800px"
+      (onNodeExpand)="treeTableNodeExpand($event)"
+      (onNodeCollapse)="treeTableNodeCollapse($event)"
+      (onNodeSelect)="treeTableNodeSelected(selectedNode)"
+    >
+      <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+        <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode" [ngClass]="{ 'treenode-highlight': rowData.highlight }">
+          <td>
+            <div style="cursor: pointer; display: flex">
+              <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
+              {{ rowData.label }}
+            </div>
+          </td>
+        </tr>
+      </ng-template>
+    </p-treeTable>
+  </div>
 </div>
diff --git a/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.ts b/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.ts
index 95f05b2a..7b980dcd 100644
--- a/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.ts
+++ b/web/frontend/src/app/component/hierarchy-popup/hierarchy-popup.component.ts
@@ -9,7 +9,7 @@ import { TreeTable } from 'primeng/treetable';
 
 // Hierarchy display component - loaded via the /hierarchy route
 @Component({
-  selector: 'app-hierarchy-display',
+  selector: 'app-hierarchy-popup',
   templateUrl: './hierarchy-popup.component.html',
   styleUrls: ['./hierarchy-popup.component.css'],
 })
@@ -24,9 +24,10 @@ export class HierarchyPopupComponent implements OnInit {
   terminology: any;
   title: string;
 
-  hierarchPopupUrl = '/hierarchy-popup/';
-  hierarchyUrl = '/hierarchy/';
-  conceptUrl = '/concept/';
+  route = 'hierarchy-popup';
+  parentUrl = window.location.origin;
+  hierarchyPart = 'hierarchy';
+  conceptPart = 'concept';
   urlTarget = '_top';
 
   conceptPanelSize = '70.0';
@@ -45,10 +46,18 @@ export class HierarchyPopupComponent implements OnInit {
     private conceptDetailService: ConceptDetailService,
     private router: Router,
     private loaderService: LoaderService,
-    public configService: ConfigurationService
+    public configService: ConfigurationService,
   ) {
     // Do this in the constructor so it's ready to go when this component is injected
     this.configSetup();
+
+    const parts = window.location.href.split('/');
+    if (parts.length > 3) {
+      // Assuming at least one path segment after domain
+      if (parts[3] !== this.route) {
+        this.parentUrl = window.location.origin + '/' + parts[3];
+      }
+    }
   }
 
   ngOnInit() {
@@ -63,89 +72,72 @@ export class HierarchyPopupComponent implements OnInit {
     this.selectedSources = this.configService.getSelectedSources();
     this.conceptCode = this.configService.getCode();
     this.terminology = this.configService.getTerminologyName();
-
   }
 
   closeHierarchyPopup() {
-    window.opener.location.href = this.hierarchyUrl + this.terminology + '/' + this.conceptCode;
-    window.close();
+    window.opener.location.href = [this.parentUrl, this.hierarchyPart, this.terminology, this.conceptCode].join('/');
+    setTimeout(() => {
+      window.close();
+    }, 100);
   }
 
-  updateDisplaySize = () => {
-    const bodyHeight = document.documentElement.scrollHeight;
-    document.getElementById('hierarchyTableDisplay').style.height =
-      bodyHeight + 'px';
-    /*
-     * Adjust the size of the hierarchy display
-     */
-    let tableHeight = 0;
-    if (bodyHeight > 1200) {
-      tableHeight = 1200;
-    } else {
-      tableHeight = bodyHeight;
-    }
-    this.hierarchyTable.scrollHeight = tableHeight - 200 + 'px';
-  }
+  // updateDisplaySize = () => {
+  //   const bodyHeight = document.documentElement.scrollHeight;
+  //   document.getElementById('hierarchyTableDisplay').style.height = bodyHeight + 'px';
+  //   /*
+  //    * Adjust the size of the hierarchy display
+  //    */
+  //   let tableHeight = 0;
+  //   if (bodyHeight > 1200) {
+  //     tableHeight = 1200;
+  //   } else {
+  //     tableHeight = bodyHeight;
+  //   }
+  //   this.hierarchyTable.scrollHeight = tableHeight - 200 + 'px';
+  // };
 
   // Handler for selecting a tree node
   treeTableNodeSelected(event) {
     // Handle selecting for more data for top level
     if (event.ct && event.data.parentCode === 'root') {
-      if (
-        confirm(
-          'Loading all tree positions may take a while, are you sure you want to proceed?'
-        )
-      ) {
+      if (confirm('Loading all tree positions may take a while, are you sure you want to proceed?')) {
         this.getAllPathsInHierarchy();
       }
       setTimeout(() => (this.selectedNode = null), 100);
     } else if (event.ct) {
-    // Handle selecting for more data for sibling level
-      if (
-        confirm(
-          'Loading more data may take a while, are you sure you want to proceed?'
-        )
-      ) {
-        this.getAllTreeTableChildrenNodes(
-          event.data.parentCode,
-          event.data.parentNode
-        );
+      // Handle selecting for more data for sibling level
+      if (confirm('Loading more data may take a while, are you sure you want to proceed?')) {
+        this.getAllTreeTableChildrenNodes(event.data.parentCode, event.data.parentNode);
       }
       setTimeout(() => (this.selectedNode = null), 100);
-    }  else {
-    // Handle selecting a code to navigate away
+    } else {
+      // Handle selecting a code to navigate away
       // control the redirect based on the parent window (concept-display)
-      window.opener.location.href = this.conceptUrl + this.terminology + '/' + event.code;
+      window.opener.location.href = [this.parentUrl, this.conceptPart, this.terminology, event.code].join('/');
+
       // Handle selecting a code to navigate away
       this.conceptCode = event.code;
       this.getPathInHierarchy();
-      this.router.navigate([
-        this.hierarchPopupUrl + this.terminology + '/' + event.code,
-      ]);
+      this.router.navigate([this.route, this.terminology, event.code]);
     }
   }
 
   // Gets path in the hierarchy and scrolls to the active node
   getPathInHierarchy(limit: number = this.hierarchyLimit) {
     this.loaderService.showLoader();
-    this.conceptDetailService
-      .getHierarchyData(this.conceptCode, limit)
-      .then((nodes) => {
-        this.hierarchyData = (nodes as TreeNode[]);
-        for (const node of this.hierarchyData) {
-          this.setTreeTableProperties(node, null);
-        }
-        this.updateDisplaySize();
-        if (this.selectedNodes.length > 0) {
-          setTimeout(() => {
-            this.scrollToSelectionTableTree(
-              this.selectedNodes[0],
-              this.hierarchyTable
-            );
-          }, 100);
-        }
-        this.loaderService.hideLoader();
-      });
+    this.conceptDetailService.getHierarchyData(this.conceptCode, limit).then((nodes) => {
+      this.hierarchyData = nodes as TreeNode[];
+      for (const node of this.hierarchyData) {
+        this.setTreeTableProperties(node, null);
+      }
+      //this.updateDisplaySize();
+      if (this.selectedNodes.length > 0) {
+        setTimeout(() => {
+          this.scrollToSelectionTableTree(this.selectedNodes[0], this.hierarchyTable);
+        }, 100);
+      }
+      this.loaderService.hideLoader();
+    });
   }
 
   getAllPathsInHierarchy() {
@@ -161,29 +153,24 @@ export class HierarchyPopupComponent implements OnInit {
   // Get child tree nodes (for an expanded node)
   getTreeTableChildrenNodes(code: string, node: any, limit: number = 100) {
     this.loaderService.showLoader();
-    this.conceptDetailService
-      .getHierarchyChildData(code, limit)
-      .then((nodes) => {
-        if (limit == null) {
-          const codes = new Set(node.children.map((n) => n.code));
-          // Remove the 'ct' node and combine the list with the remaining elements
-          // NOTE: this may require resorting
-          node.children = [
-            ...node.children.filter((n) => !n.ct),
-            ...nodes.filter((n) => !codes.has(n['code'])),
-          ];
-        } else {
-          node.children = nodes;
-        }
-        for (const child of node.children) {
-          this.setTreeTableProperties(child, node);
-        }
-        this.deepCopyHierarchyData();
-        setTimeout(() => {
-          this.scrollToSelectionTableTree(node, this.hierarchyTable);
-        }, 100);
-        this.loaderService.hideLoader();
-      });
+    this.conceptDetailService.getHierarchyChildData(code, limit).then((nodes) => {
+      if (limit == null) {
+        const codes = new Set(node.children.map((n) => n.code));
+        // Remove the 'ct' node and combine the list with the remaining elements
+        // NOTE: this may require resorting
+        node.children = [...node.children.filter((n) => !n.ct), ...nodes.filter((n) => !codes.has(n['code']))];
+      } else {
+        node.children = nodes;
+      }
+      for (const child of node.children) {
+        this.setTreeTableProperties(child, node);
+      }
+      this.deepCopyHierarchyData();
+      setTimeout(() => {
+        this.scrollToSelectionTableTree(node, this.hierarchyTable);
+      }, 100);
+      this.loaderService.hideLoader();
+    });
   }
 
   getAllTreeTableChildrenNodes(code: string, node: any) {
@@ -257,9 +244,7 @@ export class HierarchyPopupComponent implements OnInit {
   scrollToSelectionTableTree(selectedNode, hierarchyTable) {
     // console.log('scroll to selection', selectedNode);
     let index = 0;
-    const hierarchyRows = this.hierarchyTable.el.nativeElement.querySelectorAll(
-      '.p-treetable-tbody>tr'
-    );
+    const hierarchyRows = this.hierarchyTable.el.nativeElement.querySelectorAll('.p-treetable-tbody>tr');
     for (let i = 0; i < hierarchyRows.length; i++) {
       const testLabel = hierarchyRows[i]['innerText'].trim();
       if (testLabel === selectedNode.label) {
@@ -267,18 +252,20 @@ export class HierarchyPopupComponent implements OnInit {
         break;
       }
     }
-    if (
-      this.hierarchyTable.el.nativeElement.querySelectorAll(
-        '.p-treetable-tbody>tr'
-      )[index] !== undefined
-    ) {
-      this.hierarchyTable.el.nativeElement
-        .querySelectorAll('.p-treetable-tbody>tr')
-      [index].scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'start',
-      });
+    if (this.hierarchyTable.el.nativeElement.querySelectorAll('.p-treetable-tbody>tr')[index] !== undefined) {
+      if (this.hierarchyTable.el.nativeElement.querySelectorAll('.p-treetable-tbody>tr')[index] !== undefined) {
+        this.hierarchyTable.el.nativeElement.querySelectorAll('.p-treetable-tbody>tr')[index].scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'start',
+        });
+        setTimeout(() => {
+          document.getElementById('hierarchyTableDisplay').scrollIntoView({
+            behavior: 'smooth',
+            inline: 'start',
+          });
+        }, 100);
+      }
     }
   }
 
@@ -312,9 +299,7 @@ export class HierarchyPopupComponent implements OnInit {
     }
 
     // If there is no overlap between sourceList and selectedSources, clear selectedSources
-    const intersection = [...sourceList].filter((x) =>
-      this.selectedSources.has(x)
-    );
+    const intersection = [...sourceList].filter((x) => this.selectedSources.has(x));
     if (intersection.length === 0) {
       this.toggleSelectedSource('All');
     }
@@ -325,10 +310,7 @@ export class HierarchyPopupComponent implements OnInit {
 
   toggleSelectedSource(source) {
     // clear if All is selected or was last selected
-    if (
-      source === 'All' ||
-      (this.selectedSources.size === 1 && this.selectedSources.has('All'))
-    ) {
+    if (source === 'All' || (this.selectedSources.size === 1 && this.selectedSources.has('All'))) {
       this.selectedSources.clear();
     }
     if (this.selectedSources.has(source)) {