Added metrics info to floating menu

angular/src/app/landing/landingbody.component.html

@@ -12,7 +12,7 @@
 
                 <!-- description: abstract, keywords, research areas, etc. -->
                 <a name="description" #description></a>
-                <pdr-resource-desc [record]="md" [inBrowser]="inBrowser"></pdr-resource-desc>
+                <pdr-resource-desc [record]="md" [inBrowser]="inBrowser" [collection]="collection"></pdr-resource-desc>
             </div>
 
             <!-- data access, include available files -->

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;

angular/src/app/landing/sections/resourcedescription.component.html

@@ -6,7 +6,7 @@ <h3 style="display: inline-block;" name="description"><b>{{desctitle}}</b></h3>
         <div>
             <app-description [record]="record" [inBrowser]="inBrowser"></app-description>
         </div>
-        <app-topic [record]="record" [inBrowser]="inBrowser"></app-topic>
+        <app-topic [record]="record" [inBrowser]="inBrowser" [collection]="collection"></app-topic>
         <app-keyword [record]="record" [inBrowser]="inBrowser" *ngIf="recordType!='Science Theme'"></app-keyword>
     </div>
 </div>

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

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;
+}

angular/src/app/landing/tools/menu.component.html

@@ -0,0 +1,44 @@
+
+<!-- Go To menu-->
+<table style="width: 100%;">
+    <tr *ngFor="let menuitem of gotoMenu">
+        <td [ngClass]="menuitem.isHeader? 'menu-header menu-body' : 'menu-item menu-body'" scope="row"
+            [style.--background-default]="menuitem.isHeader? defaultColor: lighterColor" [style.--background-lighter]="lighterColor"
+            [style.--background-hover]="hoverColor" 
+            (click)="goToSection(menuitem.sectionName, menuitem.url)">
+            <i [class]="menuitem.icon"></i>
+            {{menuitem.title}}
+        </td>
+    </tr>
+</table>
+
+<!-- Use menu-->
+<table style="width: 100%;">
+    <tr *ngFor="let menuitem of useMenu">
+        <td [ngClass]="menuitem.isHeader? 'menu-header menu-body' : 'menu-item menu-body'" scope="row"
+            [style.--background-default]="menuitem.isHeader? defaultColor: lighterColor" [style.--background-lighter]="lighterColor"
+            [style.--background-hover]="hoverColor" 
+            (click)="goToSection(menuitem.sectionName, menuitem.url)">
+            <i [class]="menuitem.icon"></i>
+            {{menuitem.title}}
+        </td>
+    </tr>
+</table>
+
+<!-- Find menu-->
+<table style="width: 100%;">
+    <tr *ngFor="let menuitem of findMenu">
+        <td [ngClass]="menuitem.isHeader? 'menu-header menu-body' : 'menu-item menu-body'" scope="row"
+            [style.--background-default]="menuitem.isHeader? defaultColor: lighterColor" [style.--background-lighter]="lighterColor"
+            [style.--background-hover]="hoverColor" 
+            (click)="goToSection(menuitem.sectionName, menuitem.url)">
+            <i [class]="menuitem.icon"></i>
+            {{menuitem.title}}
+        </td>
+    </tr>
+</table>
+
+<!-- Metrics info-->
+<app-metricsinfo *ngIf="theme != scienceTheme" [inBrowser]="inBrowser" [record]="record"
+[metricsData]="metricsData" [showMetrics]="showMetrics">
+</app-metricsinfo>

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<MenuComponent>;
+
+  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();
+  });
+});

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<string>();
+
+    // signal for triggering display of the citation information
+    @Output() toggle_citation = new EventEmitter<boolean>();
+
+    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; 
+            } 
+         } 
+
+    }    
+}

angular/src/app/landing/topic/topic.component.html

@@ -51,7 +51,7 @@
             </div>
 
             <div *ngIf="scienceThemeTopics.length > 0">
-                <strong>Forensics Research Topics: </strong>
+                <strong>{{ collection }} Research Topics: </strong>
                 <span class="topics" *ngFor="let topic of scienceThemeTopics; let i =index">
                     <i>{{ topic }}</i>
                     <span *ngIf="i < scienceThemeTopics.length-1 ">, </span>

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,