cedar-embeddable-editor 0.9.0

package/src/app/modules/shared/components/preferences-menu/preferences-menu.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreferencesMenu } from './preferences-menu.component';
+
+describe('PreferencesMenuComponent', () => {
+  let component: PreferencesMenu;
+  let fixture: ComponentFixture<PreferencesMenu>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PreferencesMenu ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PreferencesMenu);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/shared/components/preferences-menu/preferences-menu.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'preferences-menu',
+  templateUrl: './preferences-menu.component.html',
+  styleUrls: ['./preferences-menu.component.scss']
+})
+export class PreferencesMenu {
+
+}

package/src/app/modules/shared/components/sample-templates/sample-template-select/sample-template-select.component.html

@@ -0,0 +1,16 @@
+<mat-form-field class="full-width">
+  <mat-select [formControl]="templateCtrl"
+              placeholder="{{'Extra.SampleTemplate.Select' | translate}}"
+              (selectionChange)="inputChanged($event)">
+    <mat-option>
+      <ngx-mat-select-search
+        [formControl]="templateFilterCtrl"
+        placeholderLabel="{{'Extra.SampleTemplate.Find' | translate}}"
+        noEntriesFoundLabel="{{'Extra.SampleTemplate.FindNoMatch' | translate}}"
+      ></ngx-mat-select-search>
+    </mat-option>
+    <mat-option *ngFor="let template of filteredTemplates | async"
+                [value]="template[sampleTemplateService.TEMPLATE_NUMBER]"
+    >{{template[sampleTemplateService.TEMPLATE_LABEL]}}</mat-option>
+  </mat-select>
+</mat-form-field>

package/src/app/modules/shared/components/sample-templates/sample-template-select/sample-template-select.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SampleTemplateSelectComponent } from './sample-template-select.component';
+
+describe('SampleTemplateSelectComponent', () => {
+  let component: SampleTemplateSelectComponent;
+  let fixture: ComponentFixture<SampleTemplateSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SampleTemplateSelectComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SampleTemplateSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/shared/components/sample-templates/sample-template-select/sample-template-select.component.ts

@@ -0,0 +1,89 @@
+import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+import {SampleTemplatesService} from '../sample-templates.service';
+import {
+  CedarEmbeddableMetadataEditorWrapperComponent
+} from '../../cedar-embeddable-metadata-editor-wrapper/cedar-embeddable-metadata-editor-wrapper.component';
+import {FormControl} from '@angular/forms';
+import {ReplaySubject, Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-sample-template-select',
+  templateUrl: './sample-template-select.component.html',
+  styleUrls: ['./sample-template-select.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SampleTemplateSelectComponent implements OnInit, OnDestroy {
+  @Input() callbackOwnerObject: any = null;
+  sampleTemplates: object[];
+  templateLocationPrefix: string;
+  templateCtrl: FormControl = new FormControl();
+  templateFilterCtrl: FormControl = new FormControl();
+  filteredTemplates: ReplaySubject<object[]> = new ReplaySubject<object[]>(1);
+  protected _onDestroy = new Subject<void>();
+
+
+  constructor(public sampleTemplateService: SampleTemplatesService) {
+  }
+
+  ngOnInit(): void {
+    this.templateLocationPrefix = this.callbackOwnerObject.
+      innerConfig[CedarEmbeddableMetadataEditorWrapperComponent.TEMPLATE_LOCATION_PREFIX];
+    this.sampleTemplateService.getSampleTemplatesFromRegistry(this.templateLocationPrefix)
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(
+      (templates: object[]) => {
+        this.sampleTemplates = templates;
+        this.filteredTemplates.next(this.sampleTemplates);
+      }
+    );
+
+    this.sampleTemplateService.templateJson$
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe( templateJson => {
+        this.templateCtrl.setValue(Object.keys(templateJson)[0]);
+      });
+
+    // listen for search field value changes
+    this.templateFilterCtrl.valueChanges
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(() => {
+        this.filterTemplates();
+      });
+  }
+
+  ngOnDestroy(): void {
+    this._onDestroy.next();
+    this._onDestroy.complete();
+  }
+
+  filterTemplates(): void {
+    if (!this.sampleTemplates) {
+      return;
+    }
+    // get the search keyword
+    let search = this.templateFilterCtrl.value;
+    if (!search) {
+      this.filteredTemplates.next(this.sampleTemplates.slice());
+      return;
+    } else {
+      search = search.toLowerCase();
+    }
+    this.filteredTemplates.next(
+      this.sampleTemplates.filter(
+        template => template[this.sampleTemplateService.TEMPLATE_LABEL].toLowerCase().indexOf(search) > -1)
+    );
+  }
+
+  loadBuiltinTemplate(templateNum: string): void {
+    this.sampleTemplateService.loadTemplate(this.templateLocationPrefix, templateNum);
+    window.scroll(0, 0);
+  }
+
+  inputChanged(event): void {
+    if (event) {
+      this.loadBuiltinTemplate(event.value);
+    }
+  }
+
+}

package/src/app/modules/shared/components/sample-templates/sample-templates.component.html

@@ -0,0 +1,19 @@
+<mat-expansion-panel expanded="{{expandedSampleTemplateLinks}}">
+  <mat-expansion-panel-header>
+    <mat-panel-title>
+      <mat-icon>subject</mat-icon>
+      {{'Extra.SampleTemplate.Title' | translate}}
+    </mat-panel-title>
+  </mat-expansion-panel-header>
+
+  <ng-template matExpansionPanelContent *ngIf="sampleTemplates">
+      <mat-selection-list #templates
+                          [formControl]="templateCtrl"
+                          [multiple]="false"
+                          (click)="selectionClicked({option : templates.selectedOptions.selected[0]})">
+        <mat-list-option *ngFor="let template of sampleTemplates"
+                         [value]="template[sampleTemplateService.TEMPLATE_NUMBER]"
+        >{{template[sampleTemplateService.TEMPLATE_LABEL]}}</mat-list-option>
+      </mat-selection-list>
+  </ng-template>
+</mat-expansion-panel>

package/src/app/modules/shared/components/sample-templates/sample-templates.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SampleTemplatesComponent } from './sample-templates.component';
+
+describe('SampleTemplatesComponent', () => {
+  let component: SampleTemplatesComponent;
+  let fixture: ComponentFixture<SampleTemplatesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SampleTemplatesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SampleTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/shared/components/sample-templates/sample-templates.component.ts

@@ -0,0 +1,66 @@
+import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+import {MatListOption} from '@angular/material/list';
+import {
+  CedarEmbeddableMetadataEditorWrapperComponent
+} from '../cedar-embeddable-metadata-editor-wrapper/cedar-embeddable-metadata-editor-wrapper.component';
+import {HttpClient} from '@angular/common/http';
+import {SampleTemplatesService} from './sample-templates.service';
+import {Subject} from 'rxjs';
+import {FormControl} from '@angular/forms';
+import {takeUntil} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-sample-templates',
+  templateUrl: './sample-templates.component.html',
+  styleUrls: ['./sample-templates.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SampleTemplatesComponent implements OnInit, OnDestroy {
+
+  @Input() callbackOwnerObject: any = null;
+  @Input() expandedSampleTemplateLinks: boolean;
+  templateLocationPrefix: string;
+  templateCtrl: FormControl = new FormControl();
+  sampleTemplates: object[] = [];
+  protected _onDestroy = new Subject<void>();
+
+
+  constructor(
+    private http: HttpClient,
+    public sampleTemplateService: SampleTemplatesService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.templateLocationPrefix = this.callbackOwnerObject.
+      innerConfig[CedarEmbeddableMetadataEditorWrapperComponent.TEMPLATE_LOCATION_PREFIX];
+    this.sampleTemplateService.getSampleTemplatesFromRegistry(this.templateLocationPrefix)
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(
+      (templates: object[]) => {
+        this.sampleTemplates.push(...templates);
+      }
+    );
+
+    this.sampleTemplateService.templateJson$
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe( templateJson => {
+        this.templateCtrl.setValue([Object.keys(templateJson)[0]]);
+      });
+  }
+
+  loadBuiltinTemplate(templateNum: string): void {
+    this.sampleTemplateService.loadTemplate(this.templateLocationPrefix, templateNum);
+    window.scroll(0, 0);
+  }
+
+  selectionClicked({option}: { option: MatListOption }): void {
+    this.loadBuiltinTemplate(option.value);
+  }
+
+  ngOnDestroy(): void {
+    this._onDestroy.next();
+    this._onDestroy.complete();
+  }
+
+}

package/src/app/modules/shared/components/sample-templates/sample-templates.service.ts

@@ -0,0 +1,175 @@
+import {Injectable} from '@angular/core';
+import {JsonSchema} from '../../models/json-schema.model';
+import {HttpClient} from '@angular/common/http';
+import {of, Observable, from, Subject, EMPTY, BehaviorSubject} from 'rxjs';
+import {catchError, concatMap, map, takeUntil} from 'rxjs/operators';
+import {MessageHandlerService} from '../../service/message-handler.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SampleTemplatesService {
+
+  private readonly MAX_CHECK = 500;
+  readonly TEMPLATE_FILENAME = 'template.json';
+  readonly TEMPLATE_REGISTRY_FILENAME = 'registry.json';
+  readonly TEMPLATE_NUMBER = 'num';
+  readonly TEMPLATE_LABEL = 'label';
+  private allTemplates: Observable<object[]>;
+  private templateJsonSubject = new BehaviorSubject<object>(null);
+  templateJson$ = this.templateJsonSubject.asObservable();
+
+
+  constructor(
+    private http: HttpClient,
+    private messageHandlerService: MessageHandlerService
+  ) {
+  }
+
+  loadTemplate(templateLocationPrefix: string, templateNum: string): void {
+    templateLocationPrefix = this.fixedLocationPrefix(templateLocationPrefix);
+    const templateUrl = templateLocationPrefix + templateNum + '/' + this.TEMPLATE_FILENAME;
+    this.loadTemplateFromURL(templateUrl, templateNum);
+  }
+
+  loadTemplateFromURL(templateUrl: string, templateNum: string = null): void {
+    if (!templateNum) {
+      templateNum = this.templateNumberFromUrl(templateUrl);
+    }
+    this.http.get(templateUrl).subscribe(
+      value => {
+        const valObj = {};
+        valObj[templateNum] = value;
+        this.templateJsonSubject.next(valObj);
+        this.messageHandlerService.trace('Loaded template: ' + templateUrl + ' (' + JSON.stringify(value).length + ' characters)');
+      },
+      error => {
+        this.messageHandlerService.error('Error while loading sample template from: ' + templateUrl);
+      }
+    );
+  }
+
+  getSampleTemplatesFromRegistry(templateLocationPrefix: string): Observable<object[]> {
+    if (this.allTemplates) {
+      return this.allTemplates;
+    }
+    templateLocationPrefix = this.fixedLocationPrefix(templateLocationPrefix);
+    const registryUrl = templateLocationPrefix + this.TEMPLATE_REGISTRY_FILENAME;
+    this.allTemplates = this.http.get(registryUrl)
+      .pipe(
+        map(
+          (resp: object) => {
+            return Object.keys(resp).sort().map( (key, index) => {
+              const entry = {};
+              entry[this.TEMPLATE_NUMBER] = key;
+              entry[this.TEMPLATE_LABEL] = resp[key];
+              return entry;
+            });
+          }
+        ),
+        catchError(
+          error => {
+          this.messageHandlerService.errorObject(error['message'], error);
+          return EMPTY;
+        })
+      );
+    return this.allTemplates;
+  }
+
+  getSampleTemplatesDynamically(templateLocationPrefix: string): Observable<object> {
+    if (!this.allTemplates) {
+      templateLocationPrefix = this.fixedLocationPrefix(templateLocationPrefix);
+      this.buildAllTemplatesDynamically(templateLocationPrefix);
+    }
+    return this.allTemplates;
+  }
+
+  private buildAllTemplatesDynamically(templateLocationPrefix: string): void {
+    const allTemplates = [];
+    this.getAllTemplatesSubscription(templateLocationPrefix).subscribe(
+      resp => {
+      const entry = {};
+      entry[this.TEMPLATE_NUMBER] = Object.keys(resp)[0];
+      entry[this.TEMPLATE_LABEL] = Object.values(resp)[0];
+      allTemplates.push(entry);
+    });
+    this.allTemplates = of(allTemplates);
+  }
+
+  private getAllTemplatesSubscription(templateLocationPrefix: string): Observable<object> {
+    const singleUrls: string[] = [];
+    const closeRequest$ = new Subject<void>();
+    let errorIndex = 0;
+
+    for (let i = 1; i <= this.MAX_CHECK; i++) {
+      const templateName = (i < 10) ? '0' + i.toString() : i.toString();
+      const templateUrl = templateLocationPrefix + templateName + '/' + this.TEMPLATE_FILENAME;
+      singleUrls.push(templateUrl);
+    }
+    return from(singleUrls)
+      .pipe(
+        concatMap(singleUrl => {
+          const templateNum = this.templateNumberFromUrl(singleUrl);
+          return this.getSingleTemplateLabel(singleUrl)
+            .pipe(
+              map ( templateLabel => {
+                errorIndex = 0;
+                const templateEntry = {};
+                templateEntry[templateNum] = 'Template ' + templateNum + ' - ' + templateLabel;
+                return templateEntry;
+              }),
+              // if encounter two consecutive error requests, finish polling
+              catchError(error => {
+                if (error.status === 0) {
+                  errorIndex++;
+                } else {
+                  this.messageHandlerService.errorObject(error['message'], error);
+                }
+
+                if (errorIndex > 1) {
+                  closeRequest$.next();
+                  closeRequest$.complete();
+                }
+                return EMPTY;
+              })
+            );
+        }),
+        takeUntil(closeRequest$)
+      );
+  }
+
+  private getSingleTemplateLabel(templateUrl: string): Observable<string> {
+    return this.http.get(templateUrl)
+      .pipe(
+        map(response => {
+          if (response == null || !response[JsonSchema.schemaName]) {
+            return null;
+          }
+          return response[JsonSchema.schemaName];
+        })
+      );
+  }
+
+  private templateNumberFromUrl(url): string {
+    const templateNumPatternStr = '\\/(\\d+)\\/' + this.TEMPLATE_FILENAME;
+    const templateNumPattern = new RegExp(templateNumPatternStr);
+    const templateNumMatch = url.match(templateNumPattern);
+
+    if (templateNumMatch && templateNumMatch.length > 1) {
+      return templateNumMatch[1];
+    }
+    return '-1';
+  }
+
+  private fixedLocationPrefix(locationPrefix: string): string {
+    const locationPrefixPatternStr = '\\/$';
+    const locationPrefixPattern = new RegExp(locationPrefixPatternStr);
+    const locationPrefixMatch = locationPrefix.match(locationPrefixPattern);
+
+    if (!locationPrefixMatch) {
+      locationPrefix += '/';
+    }
+    return locationPrefix;
+  }
+
+}

package/src/app/modules/shared/components/source-panels/source-panels.component.html

@@ -0,0 +1,98 @@
+<mat-accordion class="source-accordion" multi>
+
+  <mat-expansion-panel *ngIf="showInstanceDataCore" expanded="{{expandedInstanceDataCore}}">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <mat-icon>device_hub</mat-icon>
+        {{'Extra.JsonLD.InstanceCore' | translate}}
+      </mat-panel-title>
+      <mat-panel-description>
+        &nbsp;
+        <mat-icon matRipple [cdkCopyToClipboard]="dataContext.instanceExtractData | json" (click)="stopPropagation($event)" matTooltip="{{'Generic.Copy' | translate}}">content_copy</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <ng-template matExpansionPanelContent>
+      <mat-card>
+        <pre>{{dataContext.instanceExtractData | json}}</pre>
+      </mat-card>
+    </ng-template>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel *ngIf="showInstanceDataFull" expanded="{{expandedInstanceDataFull}}">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <mat-icon>device_hub</mat-icon>
+        {{'Extra.JsonLD.Instance' | translate}}
+      </mat-panel-title>
+      <mat-panel-description>
+        &nbsp;
+        <mat-icon matRipple [cdkCopyToClipboard]="dataContext.instanceFullData | json" (click)="stopPropagation($event)" matTooltip="{{'Generic.Copy' | translate}}">content_copy</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <ng-template matExpansionPanelContent>
+      <mat-card>
+        <pre>{{dataContext.instanceFullData | json}}</pre>
+      </mat-card>
+    </ng-template>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel *ngIf="showTemplateSourceData" expanded="{{expandedTemplateSourceData}}">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <mat-icon>view_module</mat-icon>
+        {{'Extra.JsonSchemaTemplate' | translate}}
+      </mat-panel-title>
+      <mat-panel-description>
+        &nbsp;
+        <mat-icon matRipple [cdkCopyToClipboard]="dataContext.templateInput | json" (click)="stopPropagation($event)" matTooltip="{{'Generic.Copy' | translate}}">content_copy</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <ng-template matExpansionPanelContent>
+      <mat-card>
+        <pre>{{dataContext.templateInput | json}}</pre>
+      </mat-card>
+    </ng-template>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel *ngIf="showTemplateRenderingRepresentation" expanded="{{expandedTemplateRenderingRepresentation}}">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <mat-icon>list_alt</mat-icon>
+        {{'Extra.TemplateRendering' | translate}}
+      </mat-panel-title>
+      <mat-panel-description>
+        &nbsp;
+        <mat-icon matRipple [cdkCopyToClipboard]="dataContext.templateRepresentation | json" (click)="stopPropagation($event)" matTooltip="{{'Generic.Copy' | translate}}">content_copy</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <ng-template matExpansionPanelContent>
+      <mat-card>
+        <pre>{{dataContext.templateRepresentation | json}}</pre>
+      </mat-card>
+    </ng-template>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel *ngIf="showMultiInstanceInfo" expanded="{{expandedMultiInstanceInfo}}">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <mat-icon>list_alt</mat-icon>
+        {{'Extra.MultiInstance' | translate}}
+      </mat-panel-title>
+      <mat-panel-description>
+        &nbsp;
+        <mat-icon matRipple [cdkCopyToClipboard]="dataContext.multiInstanceData | json" (click)="stopPropagation($event)" matTooltip="{{'Generic.Copy' | translate}}">content_copy</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <ng-template matExpansionPanelContent>
+      <mat-card>
+        <pre>{{dataContext.multiInstanceData | json}}</pre>
+      </mat-card>
+    </ng-template>
+  </mat-expansion-panel>
+
+</mat-accordion>

package/src/app/modules/shared/components/source-panels/source-panels.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SourcePanelsComponent } from './source-panels.component';
+
+describe('SourcePanelsComponent', () => {
+  let component: SourcePanelsComponent;
+  let fixture: ComponentFixture<SourcePanelsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SourcePanelsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SourcePanelsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/shared/components/source-panels/source-panels.component.ts

@@ -0,0 +1,36 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {DataContext} from '../../util/data-context';
+
+@Component({
+  selector: 'app-source-panels',
+  templateUrl: './source-panels.component.html',
+  styleUrls: ['./source-panels.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SourcePanelsComponent implements OnInit {
+
+  @Input() dataContext: DataContext = null;
+
+  @Input() showTemplateRenderingRepresentation: boolean;
+  @Input() showMultiInstanceInfo: boolean;
+  @Input() showTemplateSourceData: boolean;
+  @Input() showInstanceDataCore: boolean;
+  @Input() showInstanceDataFull: boolean;
+
+  @Input() expandedInstanceDataCore = false;
+  @Input() expandedInstanceDataFull = false;
+  @Input() expandedTemplateSourceData = false;
+  @Input() expandedTemplateRenderingRepresentation = false;
+  @Input() expandedMultiInstanceInfo = false;
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+  stopPropagation(event): void {
+    event.stopPropagation();
+  }
+
+}

package/src/app/modules/shared/components/static-footer/static-footer.component.html

@@ -0,0 +1,17 @@
+<div class="wide-container">
+
+  <footer class="main__footer">
+    <div class="flex">
+      <a href="https://bmir.stanford.edu" target="_blank"><img src="assets/images/bmir-logo.png" class="bmir-logo" matTooltip="{{'Generic.BMIR' | translate}}"></a>
+      <div class="paragraph__section">
+        <p>
+          {{'App.Maintained' | translate}}
+        </p>
+        <p>
+          <a href="https://more.metadatacenter.org/tools-training/support/#contact" target="_blank">{{'App.Contact' | translate}}</a>
+        </p>
+      </div>
+    </div>
+  </footer>
+
+</div>