ux: fix chips link on homepage, redesigned about page

usnistgov · Aug 28, 2024 · e1c8cb0 · e1c8cb0
1 parent 05bf0ce
commit e1c8cb0
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 128 deletions.
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -1,13 +1,14 @@
 {
-  "version": "0.1.0",
+  "version": "2.0.0",
   "command": "npm",
-  "isShellCommand": true,
-  "showOutput": "always",
-  "suppressTaskName": true,
   "tasks": [
     {
-      "taskName": "tslint",
-      "args": [ "run", "lint" ],
+      "label": "tslint",
+      "type": "shell",
+      "args": [
+        "run",
+        "lint"
+      ],
       "problemMatcher": {
         "owner": "tslint",
         "fileLocation": [

diff --git a/angular/src/app/about/about.component.css b/angular/src/app/about/about.component.css
@@ -1,50 +1,50 @@
-:host {
-  display: block;
+/* Ensure grid columns stretch to fill available space */
+.container {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-left: 3em;
+  margin-right: 2em;
 }
 
-h2 {
-  font-size: 20px;
-  font-weight: 500;
-  letter-spacing: 0.005em;
-  margin-bottom: 0;
-  margin-top: 0.83em;
+::ng-deep .p-panel-header {
+  background-color: black;
+  border-color: black;
+  color: #ffffff;
+  display: flex;
+  justify-content: space-between;
 }
 
-hr {
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-  border: 1px solid #666;
-  padding-bottom: -1px;
-  margin: 1.25rem 0;
+::ng-deep .p-panel-header a {
+  color: #ffffff;
 }
 
-.labelAbout {
-  font-size: xx-large;
-  float: left;
-  display: block;
+::ng-deep .p-panel-content {
+  border-color: black;
+  background-color: #ffffff;
+  color: black;
 }
 
-.breadCrumb {
-  color: #4b4b4b;
+.anchor-button {
+  border: 1px solid white; /* Set border color to black */
+  color: white; /* Set text color to black */
+  text-decoration: none; /* Remove underline */
+  margin-right: 10px;
+  text-align: left;
+  background-color: black; /* Set background color */
 }
-
-.breadCrumbFirstElement {
-  color: #fff;
-}
-
-:host ::ng-deep .breadcrumb {
-  background-color: #153971;
+.anchor-button:hover {
+  background-color: #93c5fd;
+  border-color: black; /* Optional: Set border color on hover */
+  color: black;
 }
 
-.breadCrumb-item {
-  color: #fff;
-  font-weight: 300;
+::ng-deep .p-breadcrumb {
+  background-color: black;
+  border-color: white;
+  color: white;
 }
 
-.main-image{
-    width:50%; 
-    margin: 1em 0em 0em 0em;
-    min-width: 200px;
+::host ::ng-deep .p-image-action {
+  flex: 0 0 20%;
 }
diff --git a/angular/src/app/about/about.component.html b/angular/src/app/about/about.component.html
@@ -1,61 +1,129 @@
-<!-- Top banner -->
-<div class="top-banner" [ngStyle]="{ 'background-image': 'url(' + imageURL + ')'}">
-    <div class="container inner-top-banner">
-        <span style="font-size: xx-large;">
-            <i class="faa faa-info-circle faa-lg" style="padding-right: .5em;"></i><label id='title'>About NIST
-                Data</label>
-        </span>
-        <ol class="breadcrumb" style="float: right;">
-            <li class="active breadcrumb-item"><span style="color: #fff; font-weight:normal; cursor: pointer;"
-                    (click)="commonService.goHome()">Home</span></li>
-            <li class="breadcrumb-item">About</li>
-            <li class="breadcrumb-item">NIST Data</li>
-        </ol>
-    </div>
-</div>
+<div
+  style="
+    background-color: white;
+    margin-left: -0.5em;
+    margin-right: -0.5em;
+    padding: 2em;
+  "
+>
+  <p-panel>
+    <ng-template pTemplate="header" class="header-container">
+      <i
+        class="faa faa-info-circle faa-lg icon-padding"
+        style="margin-right: 10px"
+      ></i>
+      <a target="_blank" pButton size="small" class="anchor-button">
+        <label id="title">About NIST Data</label>
+      </a>
+    </ng-template>
+    <ng-template pTemplate="icons">
+      <p-breadcrumb
+        aria-colcount="anchor-button"
+        [model]="breadcrumbItems"
+      ></p-breadcrumb>
+    </ng-template>
+
+    <div class="result-details" style="display: flex; align-items: flex-start">
+      <div>
+        <p-image
+          src="./assets/images/AboutNIST-wordcloud_D.jpg"
+          alt="AboutNIST"
+          [preview]="true"
+          style="margin-right: 1em"
+          width="250"
+        ></p-image>
+      </div>
 
-<!-- Text body -->
-<div class="text-body" style="padding: 0px;">
-    <div class="container">
-        <div style="clear: both; border: 1px solid white;">
-            <img HSPACE=”50” VSPACE=”0” align=right class="main-image"
-            src="./assets/images/AboutNIST-wordcloud_D.jpg" alt="AboutNIST">
-            <div class="adv-step">
-                This National Institute of Standards and Technology (NIST) <b>Science Data Portal</b> provides a
-                user-friendly discovery and exploration tool for publicly available datasets at NIST. These data
-                products are generated as part of the NIST mission, spanning multiple
-                disciplines of scientific, engineering and technology research. NIST's publicly available data
-                sets showcase its commitment to providing accurate, well-curated measurements of physical
-                properties, exemplified by the <a href="https://www.nist.gov/srd" target="_blank" rel="noopener"
-                    (click)="gaService.gaTrackEvent('outbound', $event, 'Standard Reference Data program')">
-                    Standard Reference Data program</a>, as well as its commitment to advancing basic research.
-            </div>
-            <div class="adv-step">
-                For <a
-                    href="https://www.nist.gov/topics/data/public-access-nist-research/copyright-fair-use-and-licensing-statements-srd-data-and"
-                    target="_blank" rel="noopener" (click)="gaService.gaTrackEvent('outbound', $event, 'Fair Use')"><b>Fair
-                        Use</b></a> of these data, please include citation in your works including the Digital
-                Object
-                Identifier (DOI). NIST DOIs are registered with the <a href="https://www.datacite.org"
-                    target="_blank" rel="noopener" (click)="gaService.gaTrackEvent('outbound', $event, 'DataCite')">DataCite
-                    organization</a> and provide globally unique persistent identifiers. The DOI also serves as
-                a direct link to data <i>homepages</i> giving access to the full research publication
-                description and underlying datasets.
-            </div>
-            <hr>
-            <div class="adv-step">
-                This portal is designed with <a href="https://www.go-fair.org/fair-principles/" target="_blank"
-                    rel="noopener"
-                    (click)="gaService.gaTrackEvent('outbound', $event, 'FAIR Data')"> FAIR principles</a> and
-                best practice for <a href="https://strategy.data.gov/" target="_blank" rel="noopener"
-                    (click)="gaService.gaTrackEvent('outbound', $event, 'FDS')">Federal Data Strategy</a> (See
-                <a href="#/policy" target="_blank"
-                    (click)="gaService.gaTrackEvent('outbound', $event, 'Policy')">Policy page</a> for more
-                details). This portal and related software is hosted in the USNISTGOV organization <a
-                    href="https://github.com/usnistgov/oar-developer" target="_blank" rel="noopener"
-                    (click)="gaService.gaTrackEvent('outbound', $event, 'OAR Github')">github repository</a> as
-                an open source solution.
-            </div>
+      <div style="flex: 1">
+        <div class="has-text-black">
+          This National Institute of Standards and Technology (NIST)
+          <b>Science Data Portal</b> provides a user-friendly discovery and
+          exploration tool for publicly available datasets at NIST. These data
+          products are generated as part of the NIST mission, spanning multiple
+          disciplines of scientific, engineering and technology research. NIST's
+          publicly available data sets showcase its commitment to providing
+          accurate, well-curated measurements of physical properties,
+          exemplified by the
+          <a
+            href="https://www.nist.gov/srd"
+            target="_blank"
+            rel="noopener"
+            (click)="
+              gaService.gaTrackEvent(
+                'outbound',
+                $event,
+                'Standard Reference Data program'
+              )
+            "
+          >
+            Standard Reference Data program </a
+          >, as well as its commitment to advancing basic research.
+        </div>
+        <div class="adv-step">
+          For
+          <a
+            href="https://www.nist.gov/topics/data/public-access-nist-research/copyright-fair-use-and-licensing-statements-srd-data-and"
+            target="_blank"
+            rel="noopener"
+            (click)="gaService.gaTrackEvent('outbound', $event, 'Fair Use')"
+          >
+            <b>Fair Use</b>
+          </a>
+          of these data, please include citation in your works including the
+          Digital Object Identifier (DOI). NIST DOIs are registered with the
+          <a
+            href="https://www.datacite.org"
+            target="_blank"
+            rel="noopener"
+            (click)="gaService.gaTrackEvent('outbound', $event, 'DataCite')"
+          >
+            DataCite organization
+          </a>
+          and provide globally unique persistent identifiers. The DOI also
+          serves as a direct link to data <i>homepages</i> giving access to the
+          full research publication description and underlying datasets.
+        </div>
+        <hr />
+        <div class="adv-step">
+          This portal is designed with
+          <a
+            href="https://www.go-fair.org/fair-principles/"
+            target="_blank"
+            rel="noopener"
+            (click)="gaService.gaTrackEvent('outbound', $event, 'FAIR Data')"
+          >
+            FAIR principles
+          </a>
+          and best practice for
+          <a
+            href="https://strategy.data.gov/"
+            target="_blank"
+            rel="noopener"
+            (click)="gaService.gaTrackEvent('outbound', $event, 'FDS')"
+          >
+            Federal Data Strategy
+          </a>
+          (See
+          <a
+            href="#/policy"
+            target="_blank"
+            (click)="gaService.gaTrackEvent('outbound', $event, 'Policy')"
+          >
+            Policy page
+          </a>
+          for more details). This portal and related software is hosted in the
+          USNISTGOV organization
+          <a
+            href="https://github.com/usnistgov/oar-developer"
+            target="_blank"
+            rel="noopener"
+            (click)="gaService.gaTrackEvent('outbound', $event, 'OAR Github')"
+          >
+            github repository
+          </a>
+          as an open source solution.
         </div>
+      </div>
     </div>
+  </p-panel>
 </div>
diff --git a/angular/src/app/about/about.component.ts b/angular/src/app/about/about.component.ts
@@ -1,27 +1,31 @@
-import { Component, OnInit } from '@angular/core';
-import { GoogleAnalyticsService } from '../shared/ga-service/google-analytics.service';
-import { CommonService } from '../shared/common/common.service';
-import { AppConfig, Config } from '../shared/config-service/config.service';
+import { Component, OnInit } from "@angular/core";
+import { GoogleAnalyticsService } from "../shared/ga-service/google-analytics.service";
+import { CommonService } from "../shared/common/common.service";
+import { AppConfig, Config } from "../shared/config-service/config.service";
+import { MenuItem } from "primeng/api";
 
 @Component({
-  selector: 'sdp-about',
-  templateUrl: './about.component.html',
-  styleUrls: ['./about.component.css']
+  selector: "sdp-about",
+  templateUrl: "./about.component.html",
+  styleUrls: ["./about.component.css"],
 })
 export class AboutComponent implements OnInit {
   imageURL: string;
-
-  constructor(public gaService: GoogleAnalyticsService, 
-              private appConfig: AppConfig,
-              public commonService: CommonService) 
-  {   }
+  breadcrumbItems: MenuItem[];
+  constructor(
+    public gaService: GoogleAnalyticsService,
+    private appConfig: AppConfig,
+    public commonService: CommonService
+  ) {}
 
   ngOnInit() {
-      this.appConfig.getConfig().subscribe(
-          (conf) => {
-              this.imageURL = conf.SDPAPI + 'assets/images/sdp-background.jpg';
-          }
-      );
+    this.appConfig.getConfig().subscribe((conf) => {
+      this.imageURL = conf.SDPAPI + "assets/images/sdp-background.jpg";
+    });
+    this.breadcrumbItems = [
+      { label: "Home", command: () => this.commonService.goHome() },
+      { label: "About" },
+      { label: "NIST Data" },
+    ];
   }
-
 }
diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts
@@ -43,6 +43,8 @@ import { TopicModule } from "./topic/topic.module";
 import { MenubarModule } from "primeng/menubar";
 import { MegaMenuModule } from "primeng/megamenu";
 import { TagModule } from "primeng/tag";
+import { BreadcrumbModule } from "primeng/breadcrumb";
+import { ImageModule } from "primeng/image"
 /**
  * Initialize the configs for backend services
  */
@@ -101,6 +103,8 @@ enableProdMode();
     MenubarModule,
     MegaMenuModule,
     TagModule,
+    BreadcrumbModule,
+    ImageModule,
   ],
   exports: [AutoCompleteModule],
   providers: [

diff --git a/angular/src/app/home/home.component.html b/angular/src/app/home/home.component.html
@@ -23,6 +23,7 @@
             (cardClick)="search('CHIPS')"
             [icon]="getIconFullPath(themes.forensics.icon)"
             [showIcon]="true"
+            [link]="chipsURL"
           ></app-topic>
         </div>
       </div>

diff --git a/angular/src/app/home/home.component.ts b/angular/src/app/home/home.component.ts
@@ -16,6 +16,7 @@ export class HomeComponent implements OnInit {
     PDRAPIURL: string;
     SDPAPIURL: string;
     forensicsURL: string;
+    chipsURL: string;
 
 
     themes: any = {
@@ -74,6 +75,7 @@ export class HomeComponent implements OnInit {
                 this.PDRAPIURL = conf.SDPAPI;
                 this.SDPAPIURL = conf.SDPAPI;
                 this.forensicsURL = conf.SERVERBASE + "/forensics";
+                this.chipsURL = conf.SERVERBASE + "/chips";
             }
         );
     }

diff --git a/angular/src/app/topic/topic.component.css b/angular/src/app/topic/topic.component.css
@@ -65,4 +65,8 @@ button {
 
 .curated-collection-button:hover .curated-collection-label {
   text-decoration: underline;
-}
+}
+.anchor-button {
+  text-decoration: none; /* Remove underline */
+  margin-right: 10px;
+}