A2agc improvements

.github/workflows/build-previews.yml

@@ -26,7 +26,8 @@ jobs:
             ${{ runner.os }}-node-
       - name: npm ci for a2agc
         run: npm ci
-      - run: npm run build -- --output-hashing=none --base-href=/
+      - run: npm run compile-build-data
+      - run: npm run build a2agc -- --output-hashing=none --base-href=/
       - uses: netlify/actions/cli@master
         with:
           args: deploy --dir=dist/a2agc --filter=a2agc

.github/workflows/production-build.yml

@@ -30,7 +30,8 @@ jobs:
             ${{ runner.os }}-node-
       - name: npm ci for a2agc
         run: npm ci
-      - run: npm run build -- --output-hashing=none --base-href=/
+      - run: npm run compile-build-data
+      - run: npm run build a2agc -- --output-hashing=none --base-href=/
       - uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/staging-build.yml

@@ -30,7 +30,8 @@ jobs:
             ${{ runner.os }}-node-
       - name: npm ci for a2agc
         run: npm ci
-      - run: npm run build -- --output-hashing=none --base-href=/
+      - run: npm run compile-build-data
+      - run: npm run build a2agc -- --output-hashing=none --base-href=/
 
       - uses: peaceiris/actions-gh-pages@v3
         with:

.github/workflows/tests.yml

@@ -30,8 +30,7 @@ jobs:
             ${{ runner.os }}-node-
       - name: npm ci for website
         run: npm ci
-      - run: npm run lint
-      - run: npm run test
+      - run: npm run lint a2agc
       - name: SonarCloud Scan
         uses: sonarsource/sonarcloud-github-action@master
         env:

.gitignore

@@ -36,6 +36,7 @@ speed-measure-plugin*.json
 /.sass-cache
 /connect.lock
 /coverage
+/documentation
 /libpeerconnection.log
 npm-debug.log
 yarn-error.log

project.json → apps/a2agc/project.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "node_modules/nx/schemas/project-schema.json",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "name": "a2agc",
   "projectType": "application",
   "generators": {
@@ -10,27 +10,27 @@
       "strict": true
     }
   },
-  "sourceRoot": "src",
+  "sourceRoot": "apps/a2agc/src",
   "prefix": "agc",
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
       "options": {
         "outputPath": "dist/a2agc",
-        "index": "src/index.html",
-        "main": "src/main.ts",
-        "polyfills": "src/polyfills.ts",
-        "tsConfig": "tsconfig.app.json",
+        "index": "apps/a2agc/src/index.html",
+        "main": "apps/a2agc/src/main.ts",
+        "polyfills": "apps/a2agc/src/polyfills.ts",
+        "tsConfig": "apps/a2agc/tsconfig.app.json",
         "allowedCommonJsDependencies": [
           "css-element-queries"
         ],
         "assets": [
-          "src/favicon.ico",
-          "src/assets"
+          "apps/a2agc/src/favicon.ico",
+          "apps/a2agc/src/assets"
         ],
         "styles": [
-          "src/styles.scss",
-          "src/themes.scss",
+          "apps/a2agc/src/styles.scss",
+          "apps/a2agc/src/themes.scss",
           "node_modules/prismjs/themes/prism-okaidia.css",
           "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
         ],
@@ -51,8 +51,8 @@
         "production": {
           "fileReplacements": [
             {
-              "replace": "src/environments/environment.ts",
-              "with": "src/environments/environment.prod.ts"
+              "replace": "apps/a2agc/src/environments/environment.ts",
+              "with": "apps/a2agc/src/environments/environment.prod.ts"
             }
           ],
           "optimization": true,
@@ -104,17 +104,17 @@
     "test": {
       "executor": "@angular-devkit/build-angular:karma",
       "options": {
-        "main": "src/test.ts",
-        "polyfills": "src/polyfills.ts",
-        "tsConfig": "tsconfig.spec.json",
+        "main": "apps/a2agc/src/test.ts",
+        "polyfills": "apps/a2agc/src/polyfills.ts",
+        "tsConfig": "apps/a2agc/tsconfig.spec.json",
         "karmaConfig": "karma.conf.js",
         "codeCoverage": true,
         "assets": [
-          "src/favicon.ico",
-          "src/assets"
+          "apps/a2agc/src/favicon.ico",
+          "apps/a2agc/src/assets"
         ],
         "styles": [
-          "src/styles.scss"
+          "apps/a2agc/src/styles.scss"
         ],
         "scripts": []
       }
@@ -123,8 +123,8 @@
       "executor": "@angular-eslint/builder:lint",
       "options": {
         "lintFilePatterns": [
-          "src/**/*.ts",
-          "src/**/*.html"
+          "apps/a2agc/src/**/*.ts",
+          "apps/a2agc/src/**/*.html"
         ]
       },
       "outputs": [
@@ -145,6 +145,9 @@
         }
       },
       "defaultConfiguration": "development"
+    },
+    "test-doc-coverage": {
+      "command": "npx compodoc -p apps/a2agc/tsconfig.doc.json -e json --coverageTest --coverageMinimumPerFile 100 --coverageTestShowOnlyFailed -t"
     }
   }
 }

src/app/app.component.html → apps/a2agc/src/app/app.component.html

@@ -3,7 +3,7 @@
 
 <mat-sidenav-container>
   <mat-sidenav mode="over" [(opened)]="menuOpen" (closedStart)="menuOpen = false">
-    <agc-page-menu [header]="menuHeader" [pages]="pages">
+    <agc-page-menu [header]="menuHeader" [pages]="pages" [showData]="showData">
     </agc-page-menu>
   </mat-sidenav>
 

src/app/app.component.ts → apps/a2agc/src/app/app.component.ts

@@ -4,43 +4,71 @@ import { MatSidenavContainer } from '@angular/material/sidenav';
 
 import { buildInfo } from './build-info';
 import { PageLink } from './core/models/pages.model';
+import { DatasetsState } from './core/state/data/datasets.state';
 import { RouterState } from './core/state/router/router.state';
 import { visualizations } from './core/state/visualizations/visualizations';
 import { MarkdownModalComponent, MarkdownModalData } from './shared/components/markdown-modal/markdown-modal.component';
 
-
+/**
+ * A2AGC app component
+*/
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: 'agc-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements AfterViewInit {
+  /** HTML class name */
   @HostBinding('class') readonly clsName = 'agc-root';
 
+  /** Sidenav container component element */
   @ViewChild(MatSidenavContainer)
   readonly sidenavContainer!: MatSidenavContainer;
 
+  /** Whether or not sidenav should include data distributions */
+  showData = true;
+
   // TODO move these values to state
+  /** Sidenav menu header */
   readonly menuHeader = 'Marion County Opioid Addiction Report';
+  /** Page options to include in the sidenav menu */
   readonly pages: PageLink[] = visualizations.map(v => ({
     path: v.id, title: v.title, description: v.description
   }));
 
+  /** Whether or not to show the subbar under the page header */
   subBarVisible = true;
+  /** True if menu is open */
   menuOpen = false;
+  /** Build date of app component */
   buildDate = buildInfo.buildDate;
 
+  /**
+   * Creates an instance of app component.
+   * @param router Router state
+   * @param datasetsState Datasets state
+   * @param dialog Mat dialog service
+   * @param zone NgZone
+   */
   constructor(
     router: RouterState,
+    datasetsState: DatasetsState,
     private readonly dialog: MatDialog,
     private readonly zone: NgZone
   ) {
     router.navigationStart$.subscribe(() => {
       this.menuOpen = false;
     });
+
+    datasetsState.entitiesArray$.subscribe((datasets) => {
+      this.showData = datasets.length > 0;
+    });
   }
 
+  /**
+   * Sets sidenav after view init
+   */
   ngAfterViewInit(): void {
     // NOTE: Scrollable is not available in ngOnInit even if @ViewChild has `static: true`
     this.sidenavContainer.scrollable.elementScrolled().subscribe(() => {
@@ -56,6 +84,9 @@ export class AppComponent implements AfterViewInit {
     });
   }
 
+  /**
+   * Opens contact form
+   */
   openContactUs(): void {
     this.dialog.open<MarkdownModalComponent, MarkdownModalData>(MarkdownModalComponent, {
       width: '800px',
@@ -67,6 +98,9 @@ export class AppComponent implements AfterViewInit {
     });
   }
 
+  /**
+   * Opens privacy policy dialog
+   */
   openPrivacyPolicy(): void {
     this.dialog.open<MarkdownModalComponent, MarkdownModalData>(MarkdownModalComponent, {
       width: '800px',

src/app/build-info.ts → apps/a2agc/src/app/build-info.ts

@@ -1,3 +1,4 @@
+/** Build info */
 export const buildInfo = {
   version: '1.0.0',
   lastCommitDate: new Date(1603996553000),

src/app/core/components/banner/banner.component.ts → apps/a2agc/src/app/core/components/banner/banner.component.ts

@@ -1,12 +1,16 @@
 import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
 
 
+/**
+ * Page banner component
+ */
 @Component({
   selector: 'agc-banner',
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BannerComponent {
+  /** HTML class name */
   @HostBinding('class') readonly clsName = 'agc-banner';
 }

src/app/core/components/page-footer/page-footer.component.ts → apps/a2agc/src/app/core/components/page-footer/page-footer.component.ts

@@ -1,17 +1,24 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 
 
+/**
+ * Page footer component
+ */
 @Component({
   selector: 'agc-page-footer',
   templateUrl: './page-footer.component.html',
   styleUrls: ['./page-footer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageFooterComponent {
+  /** HTML class name */
   @HostBinding('class') readonly clsName = 'agc-page-footer';
 
+  /** Build date */
   @Input() buildDate = new Date();
 
+  /** Emits when contact button clicked */
   @Output() readonly contactClick = new EventEmitter<void>();
+  /** Emits when privacy policy button clicked */
   @Output() readonly privacyClick = new EventEmitter<void>();
 }

src/app/core/components/page-header/page-header.component.ts → apps/a2agc/src/app/core/components/page-header/page-header.component.ts

@@ -1,19 +1,27 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 
 
+/**
+ * Page header component
+ */
 @Component({
   selector: 'agc-page-header',
   templateUrl: './page-header.component.html',
   styleUrls: ['./page-header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageHeaderComponent {
+  /** HTML class name */
   @HostBinding('class') readonly clsName = 'agc-page-header';
-  @HostBinding('class.mat-elevation-z3') readonly elevation = true;
 
+  /** True if the menu is open */
   @Input() menuOpen = false;
+  /** Emits menuOpen value */
   @Output() readonly menuOpenChange = new EventEmitter<boolean>();
 
+  /**
+   * Opens/closes the menu and emits the menu state
+   */
   toggleMenuOpen(): void {
     this.menuOpen = !this.menuOpen;
     this.menuOpenChange.emit(this.menuOpen);

src/app/core/components/page-menu/page-menu.component.html → apps/a2agc/src/app/core/components/page-menu/page-menu.component.html

@@ -12,7 +12,7 @@
 </nav>
 
 <div class="info">
-  <a class="link distributions" routerLink="/data-distributions" routerLinkActive="active">
+  <a *ngIf="showData" class="link distributions" routerLink="/data-distributions" routerLinkActive="active">
     <mat-icon svgIcon="menu:data-distributions"></mat-icon>
     <span class="title">Data Distributions</span>
   </a>

src/app/core/components/page-menu/page-menu.component.ts → apps/a2agc/src/app/core/components/page-menu/page-menu.component.ts

@@ -3,18 +3,32 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular
 import { PageLink } from '../../models/pages.model';
 
 
+/**
+ * Page menu component
+ */
 @Component({
   selector: 'agc-page-menu',
   templateUrl: './page-menu.component.html',
   styleUrls: ['./page-menu.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageMenuComponent {
+  /** HTML class name */
   @HostBinding('class') readonly clsName = 'agc-page-menu';
 
+  /** Header text */
   @Input() header = '';
+  /** Page menu link info */
   @Input() pages: PageLink[] = [];
+  /** Whether to show the data distributions option */
+  @Input() showData = true;
 
+  /**
+   * Gets path from PageLink item
+   * @param _index page index
+   * @param link page link item
+   * @returns path name
+   */
   linkId(_index: number, link: PageLink): string {
     return link.path;
   }

src/app/core/components/sub-bar/sub-bar.component.ts → apps/a2agc/src/app/core/components/sub-bar/sub-bar.component.ts

@@ -1,14 +1,19 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 
 
+/**
+ * Header sub bar component
+ */
 @Component({
   selector: 'agc-sub-bar',
   template: '',
   styleUrls: ['./sub-bar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SubBarComponent {
+  /** HTML class name */
   @HostBinding('class') readonly clsName = 'agc-sub-bar';
 
+  /** If sub bar is visible */
   @Input() @HostBinding('class.visible') visible = true;
 }