Skip to content

Commit

Permalink
RDFBROWSER-525: fix issues with popout hierarchy (#325)
Browse files Browse the repository at this point in the history
  • Loading branch information
bcarlsenca authored Jan 16, 2025
1 parent c5d5d85 commit c087833
Show file tree
Hide file tree
Showing 8 changed files with 292 additions and 293 deletions.
11 changes: 6 additions & 5 deletions web/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -60,7 +60,6 @@ export class ConceptDisplayComponent implements OnInit, OnDestroy {
conceptIsSubset: boolean;
hierarchyPopupUrl = '/hierarchy-popup/';


subscription = null;

constructor(
Expand Down Expand Up @@ -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);
}
}
Expand Down
109 changes: 66 additions & 43 deletions web/frontend/src/app/component/evs-header/evs-header.component.html
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Loading

0 comments on commit c087833

Please sign in to comment.