From c8135bc5cbf7852cbd62a50a7d9a90704e9d282a Mon Sep 17 00:00:00 2001 From: chuanlin2018 Date: Mon, 15 Apr 2024 15:43:08 -0400 Subject: [PATCH] Added metrics info to floating menu --- .../app/landing/landingbody.component.html | 2 +- .../src/app/landing/landingpage.component.ts | 2 +- .../resourcedescription.component.html | 2 +- .../sections/resourcedescription.component.ts | 1 + .../src/app/landing/tools/menu.component.css | 33 +++ .../src/app/landing/tools/menu.component.html | 44 ++++ .../app/landing/tools/menu.component.spec.ts | 38 ++++ .../src/app/landing/tools/menu.component.ts | 212 ++++++++++++++++++ .../app/landing/topic/topic.component.html | 2 +- .../src/app/landing/topic/topic.component.ts | 1 + 10 files changed, 333 insertions(+), 4 deletions(-) create mode 100644 angular/src/app/landing/tools/menu.component.css create mode 100644 angular/src/app/landing/tools/menu.component.html create mode 100644 angular/src/app/landing/tools/menu.component.spec.ts create mode 100644 angular/src/app/landing/tools/menu.component.ts diff --git a/angular/src/app/landing/landingbody.component.html b/angular/src/app/landing/landingbody.component.html index 66d5afb8e..fd5673c55 100644 --- a/angular/src/app/landing/landingbody.component.html +++ b/angular/src/app/landing/landingbody.component.html @@ -12,7 +12,7 @@ - + diff --git a/angular/src/app/landing/landingpage.component.ts b/angular/src/app/landing/landingpage.component.ts index 488dd4990..e5e422cd7 100644 --- a/angular/src/app/landing/landingpage.component.ts +++ b/angular/src/app/landing/landingpage.component.ts @@ -297,7 +297,7 @@ export class LandingPageComponent implements OnInit, AfterViewInit { getCollection() { if(this.pdrid.includes("pdr0-0001")) this.collection = Collections.FORENSICS; - else if(this.pdrid.includes("pdr1-0001")) + else if(this.pdrid.includes("pdr0-0002")) this.collection = Collections.SEMICONDUCTORS; else this.collection = Collections.DEFAULT; diff --git a/angular/src/app/landing/sections/resourcedescription.component.html b/angular/src/app/landing/sections/resourcedescription.component.html index efec98b97..5c23ae695 100644 --- a/angular/src/app/landing/sections/resourcedescription.component.html +++ b/angular/src/app/landing/sections/resourcedescription.component.html @@ -6,7 +6,7 @@

{{desctitle}}

- + diff --git a/angular/src/app/landing/sections/resourcedescription.component.ts b/angular/src/app/landing/sections/resourcedescription.component.ts index d4f3b1531..51a461a48 100644 --- a/angular/src/app/landing/sections/resourcedescription.component.ts +++ b/angular/src/app/landing/sections/resourcedescription.component.ts @@ -21,6 +21,7 @@ export class ResourceDescriptionComponent implements OnChanges { // passed in by the parent component: @Input() record: NerdmRes = null; @Input() inBrowser: boolean = false; + @Input() collection: string; /** * create an instance of the Identity section diff --git a/angular/src/app/landing/tools/menu.component.css b/angular/src/app/landing/tools/menu.component.css new file mode 100644 index 000000000..4e110f727 --- /dev/null +++ b/angular/src/app/landing/tools/menu.component.css @@ -0,0 +1,33 @@ +.menuicon { + margin-right: .5em; +} + +.menu-header { + background-color: var(--background-default); + color: white; + font-family: sans-serif; + font-size: 16px; + font-weight: bold; + line-height: 2em; + min-height: 2em; + border-radius: 3px; +} + +.menu-item { + background-color: var(--background-default); + word-wrap: break-word; + font-family: 'Sans-Serif'; + font-size: 14px; + cursor: pointer; + line-height: 2em; + min-height: 2em; +} + +.menu-item:hover { + background-color: var(--background-hover); +} + +.menu-body { + padding-left: 10px; + padding-right: 10px; +} \ No newline at end of file diff --git a/angular/src/app/landing/tools/menu.component.html b/angular/src/app/landing/tools/menu.component.html new file mode 100644 index 000000000..4b70a296c --- /dev/null +++ b/angular/src/app/landing/tools/menu.component.html @@ -0,0 +1,44 @@ + + + + + + +
+ + {{menuitem.title}} +
+ + + + + + +
+ + {{menuitem.title}} +
+ + + + + + +
+ + {{menuitem.title}} +
+ + + + \ No newline at end of file diff --git a/angular/src/app/landing/tools/menu.component.spec.ts b/angular/src/app/landing/tools/menu.component.spec.ts new file mode 100644 index 000000000..190659635 --- /dev/null +++ b/angular/src/app/landing/tools/menu.component.spec.ts @@ -0,0 +1,38 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AppConfig } from '../../config/config' +import { MenuComponent } from './menu.component'; +import { TransferState } from '@angular/platform-browser'; +import { AngularEnvironmentConfigService } from '../../config/config.service'; +import { testdata } from '../../../environments/environment'; + +describe('MenuComponent', () => { + let component: MenuComponent; + let fixture: ComponentFixture; + + let cfg : AppConfig; + let plid : Object = "browser"; + let ts : TransferState = new TransferState(); + let md = testdata['test1']; + + beforeEach(async () => { + cfg = (new AngularEnvironmentConfigService(plid, ts)).getConfig() as AppConfig; + await TestBed.configureTestingModule({ + declarations: [ MenuComponent ], + providers: [ + { provide: AppConfig, useValue: cfg } + ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MenuComponent); + component = fixture.componentInstance; + component.record = md; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular/src/app/landing/tools/menu.component.ts b/angular/src/app/landing/tools/menu.component.ts new file mode 100644 index 000000000..c4d0ac6ad --- /dev/null +++ b/angular/src/app/landing/tools/menu.component.ts @@ -0,0 +1,212 @@ +import { Component, EventEmitter, Input, OnInit, Output, HostListener, Inject, PLATFORM_ID } from '@angular/core'; +import { CollectionService } from '../../shared/collection-service/collection.service'; +import { Themes, ThemesPrefs, Collections, Collection, ColorScheme, CollectionThemes } from '../../shared/globals/globals'; +import { NerdmRes, NERDResource } from '../../nerdm/nerdm'; +import { CartConstants } from '../../datacart/cartconstants'; +import { AppConfig } from '../../config/config'; +import * as _ from 'lodash-es'; +import { isPlatformBrowser } from '@angular/common'; +import { MetricsData } from "../metrics-data"; + +export class menuItem { + title: string; + backgroundColor: string; + isHeader: boolean; + sectionName: string; + icon: string; + url: string; + + constructor( + title: string, + sectionName: string = "", + url: string, + backgroundColor: string = "white", + isHeader: boolean = false, + icon: string = ""){ + this.title = title; + this.sectionName = sectionName; + this.url = url; + this.backgroundColor = backgroundColor; + this.isHeader = isHeader; + this.icon = icon; + } +} + +@Component({ + selector: 'app-menu', + templateUrl: './menu.component.html', + styleUrls: ['./menu.component.css'] +}) +export class MenuComponent implements OnInit { + defaultColor: string; + lighterColor: string; + hoverColor: string; + allCollections: any = {}; + resourceType: string; + gotoMenu: menuItem[] = [] as menuItem[]; + useMenu: menuItem[] = [] as menuItem[]; + findMenu: menuItem[] = [] as menuItem[]; + public CART_CONSTANTS: any = CartConstants.cartConst; + globalCartUrl: string = "/datacart/" + this.CART_CONSTANTS.GLOBAL_CART_NAME; + recordType: string = ""; + scienceTheme = Themes.SCIENCE_THEME; + inBrowser: boolean = false; + + // the resource record metadata that the tool menu data is drawn from + @Input() record : NerdmRes|null = null; + @Input() collection: string = Collections.DEFAULT; + @Input() theme: string = "nist"; + + // Record level metrics data + @Input() metricsData : MetricsData; + + // flag if metrics is ready to display + @Input() showMetrics : boolean = false; + + @Output() scroll = new EventEmitter(); + + // signal for triggering display of the citation information + @Output() toggle_citation = new EventEmitter(); + + constructor( + public collectionService: CollectionService, + @Inject(PLATFORM_ID) private platformId: Object, + private cfg : AppConfig) { + this.inBrowser = isPlatformBrowser(platformId); + } + + ngOnInit(): void { + this.allCollections = this.collectionService.loadCollections(this.collection.toLowerCase()); + + this.setColor(); + + this.resourceType = ThemesPrefs.getResourceLabel(this.theme); + + this.buildMenu(); + } + + buildMenu() { + this.gotoMenu.push(new menuItem("Go To...", "", "", this.defaultColor, true)); + this.gotoMenu.push(new menuItem("Top", "top", "", this.lighterColor, false, "faa faa-arrow-circle-right menuicon")); + this.gotoMenu.push(new menuItem("Description", "description", "", this.lighterColor, false, "faa faa-arrow-circle-right menuicon")); + this.gotoMenu.push(new menuItem("Data Access", "dataAccess", "", this.lighterColor, false, "faa faa-arrow-circle-right menuicon")); + this.gotoMenu.push(new menuItem("About This "+this.resourceType, "about","", this.lighterColor, false, "faa faa-arrow-circle-right menuicon")); + + this.useMenu.push(new menuItem("Use", "", "", this.defaultColor, true)); + this.useMenu.push(new menuItem("Citation", "citation", "", this.lighterColor, false, "faa faa-angle-double-right")); + this.useMenu.push(new menuItem("Repository Metadata", "Metadata", "", this.lighterColor, false, "faa faa-angle-double-right")); + this.useMenu.push(new menuItem("Fair Use Statement","", this.record['license'], this.lighterColor, false, "faa faa-external-link")); + this.useMenu.push(new menuItem("Data Cart", "", this.globalCartUrl, this.lighterColor, false, "faa faa-cart-plus")); + + let searchbase = this.cfg.get("locations.pdrSearch","/sdp/") + if (searchbase.slice(-1) != '/') searchbase += "/" + let authlist = ""; + if (this.record['authors']) { + for (let i = 0; i < this.record['authors'].length; i++) { + if(i > 0) authlist += ','; + let fn = this.record['authors'][i]['fn']; + + if (fn != null && fn != undefined && fn.trim().indexOf(" ") > 0) + authlist += '"'+ fn.trim() + '"'; + else + authlist += fn.trim(); + } + } + + let contactPoint = ""; + if (this.record['contactPoint'] && this.record['contactPoint'].fn) { + contactPoint = this.record['contactPoint'].fn.trim(); + if(contactPoint.indexOf(" ") > 0){ + contactPoint = '"' + contactPoint + '"'; + } + } + + // If authlist is empty, use contact point instead + let authorSearchString: string = ""; + if(_.isEmpty(authlist)){ + authorSearchString = "/#/search?q=contactPoint.fn%3D" + contactPoint; + }else{ + authorSearchString = "/#/search?q=authors.fn%3D" + authlist + "%20OR%20contactPoint.fn%3D" + contactPoint; + } + + if (!authlist) { + if (this.record['contactPoint'] && this.record['contactPoint'].fn) { + let splittedName = this.record['contactPoint'].fn.split(' '); + authlist = splittedName[splittedName.length - 1]; + } + } + + let keywords: string[] = this.record['keyword']; + let keywordString: string = ""; + for(let i = 0; i < keywords.length; i++){ + if(i > 0) keywordString += ','; + + if(keywords[i].trim().indexOf(" ") > 0) + keywordString += '"' + keywords[i].trim() + '"'; + else + keywordString += keywords[i].trim(); + } + + let resourceLabel: string = "Similar Resources"; + if(this.recordType == Themes.SCIENCE_THEME){ + resourceLabel = "Resources in this Collection"; + } + + this.findMenu.push(new menuItem("Find", "", "", this.defaultColor, true)); + + this.findMenu.push(new menuItem(resourceLabel, "", searchbase + "#/search?q=keyword%3D" + keywordString, this.lighterColor, false, "faa faa-external-link" )) + this.findMenu.push(new menuItem('Resources by Authors', "", this.cfg.get("locations.pdrSearch", "/sdp/") + authorSearchString, this.lighterColor, false, "faa faa-external-link" )) + + + } + + /** + * switch the display of the Citation information: if it is currently showing, + * it should be hidden; if it is not visible, it should be shown. This method + * is trigger by clicking on the "Citation" link in the menu; clicking + * alternatively both shows and hides the display. + * + * The LandingPageComponent handles the actual display of the information + * (currently implemented as a pop-up). + */ + toggleCitation() { + this.toggle_citation.emit(true); + } + + /** + * Set color variables + */ + setColor() { + this.defaultColor = this.allCollections[this.collection.toLowerCase()].color.default; + this.lighterColor = this.allCollections[this.collection.toLowerCase()].color.lighter; + this.hoverColor = this.allCollections[this.collection.toLowerCase()].color.hover; + } + + /** + * scroll to the specified section of the landing page + */ + goToSection(sectname : string, url: string = "") { + if (sectname) { + console.info("scrolling to #"+sectname+"..."); + }else{ + console.info("scrolling to top of document"); + } + + switch(sectname) { + case "citation": { + this.toggleCitation(); + break; + } + case "": { + if(url) + window.open(url,'_blank'); + break; + } + default: { + this.scroll.emit(sectname); + break; + } + } + + } +} diff --git a/angular/src/app/landing/topic/topic.component.html b/angular/src/app/landing/topic/topic.component.html index 22234b39f..30f8f7757 100644 --- a/angular/src/app/landing/topic/topic.component.html +++ b/angular/src/app/landing/topic/topic.component.html @@ -51,7 +51,7 @@
- Forensics Research Topics: + {{ collection }} Research Topics: {{ topic }} , diff --git a/angular/src/app/landing/topic/topic.component.ts b/angular/src/app/landing/topic/topic.component.ts index 4d521a5b2..4eb3f064a 100644 --- a/angular/src/app/landing/topic/topic.component.ts +++ b/angular/src/app/landing/topic/topic.component.ts @@ -22,6 +22,7 @@ export class TopicComponent implements OnInit { @Input() inBrowser: boolean; // false if running server-side //05-12-2020 Ray asked to read topic data from 'theme' instead of 'topic' fieldName = 'theme'; + @Input() collection: string; constructor(public mdupdsvc: MetadataUpdateService, private ngbModal: NgbModal,