Feat/met 2468 add clio display

src/app/_mocked/index.ts

@@ -1,5 +1,6 @@
 export * from './mockedactivatedroute';
 export * from './mockedauthentication.service';
+export * from './mockedclio.service';
 export * from './mockedcountries.service';
 export * from './mockeddatasets.service';
 export * from './mockeddepublication.service';

src/app/_mocked/mockedclio.service.ts

@@ -0,0 +1,15 @@
+import { Observable, of } from 'rxjs';
+import { ClioData } from '../_models';
+
+export const clioData = [0, 1, 2, 3, 4].map((n) => {
+  return {
+    score: n,
+    date: new Date().toISOString().split('T')[0]
+  };
+});
+
+export class MockClioService {
+  loadClioData(_: string): Observable<ClioData[]> {
+    return of(clioData);
+  }
+}

src/app/_models/clio.ts

@@ -0,0 +1,4 @@
+export interface ClioData {
+  score: number;
+  date: string;
+}

src/app/_models/index.ts

@@ -1,3 +1,4 @@
+export * from './clio';
 export * from './country';
 export * from './dataset-shared';
 export * from './dataset';

src/app/_services/clio.service.spec.ts

@@ -0,0 +1,35 @@
+import { async, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { apiSettings } from '../../environments/apisettings';
+import { MockHttp } from '../_helpers/test-helpers';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { ClioData } from '../_models';
+import { ClioService } from '.';
+
+describe('ClioService', () => {
+  let service: ClioService;
+  let mockHttp: MockHttp;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      providers: [ClioService],
+      imports: [HttpClientTestingModule]
+    });
+    service = TestBed.inject(ClioService);
+    mockHttp = new MockHttp(TestBed.inject(HttpTestingController), apiSettings.apiHostCore);
+  }));
+
+  afterEach(() => {
+    mockHttp.verify();
+  });
+
+  it('should load clio data', fakeAsync(() => {
+    const datasetId = '0';
+    const mockClioData = [{ score: 1, date: '2' }];
+    const sub1 = service.loadClioData(datasetId).subscribe((data: Array<ClioData>) => {
+      expect(data).toEqual(mockClioData);
+    });
+    mockHttp.expect('GET', `/orchestrator/clio/${datasetId}`).send(mockClioData);
+    tick(1);
+    sub1.unsubscribe();
+  }));
+});

src/app/_services/clio.service.ts

@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { apiSettings } from '../../environments/apisettings';
+import { ClioData } from '../_models';
+
+@Injectable({ providedIn: 'root' })
+export class ClioService {
+  constructor(private readonly http: HttpClient) {}
+
+  loadClioData(datasetId: string): Observable<ClioData[]> {
+    const url = `${apiSettings.apiHostCore}/orchestrator/clio/${datasetId}`;
+    return this.http.get<ClioData[]>(url);
+  }
+}

src/app/_services/index.ts

@@ -1,4 +1,5 @@
 export * from './authentication.service';
+export * from './clio.service';
 export * from './countries.service';
 export * from './datasets.service';
 export * from './depublication.service';

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { FilterOpsComponent, FilterOptionComponent } from './dashboard/filter-op
 import { DataPollingComponent } from './data-polling';
 import {
   ActionbarComponent,
+  ClioComponent,
   DatasetComponent,
   DatasetformComponent,
   DatasetlogComponent,
@@ -69,6 +70,7 @@ import { ThemeSelectorComponent } from './theme-selector';
 @NgModule({
   declarations: [
     ActionbarComponent,
+    ClioComponent,
     DataPollingComponent,
     AppComponent,
     CollapsibleDirective,

src/app/dataset/clio/clio.component.html

@@ -0,0 +1,13 @@
+<div class="dropdown" (clickOutside)="close()">
+  <a (click)="toggleVisible()" class="clio-open clio-state {{ openerIconClass }}"></a>
+  <div *ngIf="isOpen" class="dropdown-wrapper">
+    <ul class="dropdown-content">
+      <li
+        *ngFor="let clioData of allClioData"
+        class="clio-state clio-state-{{ clioData.score }}"
+        (click)="close()"
+        title="{{ clioData.date }}"
+      ></li>
+    </ul>
+  </div>
+</div>

src/app/dataset/clio/clio.component.scss

@@ -0,0 +1,76 @@
+$colour-cloud-lightest: '%23EEEEEE';
+$colour-cloud-light: '%23CCCCCC';
+$colour-cloud-dark: '%23AAAAAA';
+$colour-stroke: '%234D4D4D';
+$colour-sun: '%23FAFAD2';
+$colour-sun-bright: '%23FFFF00';
+
+$icon-height: 74;
+$icon-width: 64;
+
+$view-box: '0 0 #{$icon-width} #{$icon-height}';
+$view-box-up-6: '0 6 #{$icon-width} #{$icon-height}';
+$view-box-down-12: '0 -12 #{$icon-width} #{$icon-height}';
+
+.dropdown {
+  margin: auto;
+  position: relative;
+  width: 2.5em;
+
+  > .clio-open::after {
+    display: none;
+  }
+
+  .dropdown-wrapper {
+    &::after {
+      left: 7px;
+    }
+    &::before {
+      left: 5px;
+    }
+  }
+
+  .dropdown-content {
+    display: flex;
+    min-width: unset;
+    transform: translateX(-1em);
+  }
+}
+
+.clio-state {
+  $state-width: 2;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  height: #{($icon-height / $icon-width) * $state-width}em;
+  display: block;
+  width: #{$state-width}em;
+
+  &:not(.clio-open) {
+    margin: 0.25em 1em;
+  }
+}
+
+// storm cloud
+.clio-state-0 {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='#{$view-box-down-12}' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M42 41.1h7a13 13 0 100-26h-.5a17 17 0 00-32.3 4.4A11 11 0 1013 41.1h9' fill='#{$colour-cloud-dark}' stroke='#{$colour-stroke}' stroke-miterlimit='10' stroke-width='2'%3E%3C/path%3E%3Cpath fill='none' stroke='#{$colour-stroke}' stroke-miterlimit='10' stroke-width='2' d='M36 36.6L26 49.1h8L24.4 61'%3E%3C/path%3E%3C/svg%3E");
+}
+
+// rain cloud
+.clio-state-1 {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='#{$view-box-down-12}' stroke='#{$colour-stroke}' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath stroke-width='2' stroke-miterlimit='10' fill='#{$colour-cloud-light}' d='M49 12.015c-.168 0-.33.02-.5.025a16.98 16.98 0 0 0-32.293 4.447A11 11 0 1 0 13 38.011h36a13 13 0 1 0 0-26z'%3E%3C/path%3E%3Cpath d='M11.998 46l-6.404 8.001M23.998 46L11.19 61.997M36 46l-6.404 8.001M48 46L35.191 61.997' stroke-width='2' stroke-miterlimit='10' stroke='#{$colour-stroke}' fill='none' %3E%3C/path%3E%3C/svg%3E");
+}
+
+// cloud
+.clio-state-2 {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='#{$view-box}' stroke='#{$colour-stroke}' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M49 24h-.5a17 17 0 0 0-32.3 4.4A11 11 0 1 0 13 50h36a13 13 0 0 0 0-26z' fill='#{$colour-cloud-lightest}' stroke-miterlimit='10' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
+}
+
+// overcast
+.clio-state-3 {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='#{$view-box-up-6}' stroke='#{$colour-stroke}' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.1 39.5a10 10 0 1 1 6.9-10M24 8v6M8 30H2m6.4-15.5l4.3 4.2m26.9-4.2l-4.3 4.2M12.7 41.3l-4.3 4.3' fill='#{$colour-sun}' stroke-miterlimit='10' stroke-width='2'%3E%3C/path%3E%3Cpath d='M52 36a13 13 0 0 0-25 4.1h-1a8 8 0 1 0 0 16h26a10 10 0 0 0 0-20z' fill='none' stroke='#{$colour-stroke}' stroke-miterlimit='10' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
+}
+
+// sun
+.clio-state-4 {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='#{$view-box}' stroke='#{$colour-stroke}' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='32' cy='32' r='14' fill='#{$colour-sun-bright}' stroke='#{$colour-stroke}' stroke-miterlimit='10' stroke-width='2'%3E%3C/circle%3E%3Cpath fill='none' stroke='#{$colour-stroke}' stroke-miterlimit='10' stroke-width='2' d='M32 2v8m0 44v8m30-30h-8m-44 0H2m8.8-21.2l5.6 5.6m31.2 31.2l5.6 5.6m0-42.4l-5.6 5.6M16.4 47.6l-5.6 5.6'%3E%3C/path%3E%3C/svg%3E");
+}

src/app/dataset/clio/clio.component.spec.ts

@@ -0,0 +1,79 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ClioComponent } from '.';
+import { MockClioService } from '../../_mocked';
+import { ClioService } from '../../_services';
+
+describe('ClioComponent', () => {
+  const datasetId = '0';
+  let clios: ClioService;
+  let component: ClioComponent;
+  let fixture: ComponentFixture<ClioComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ClioComponent],
+      imports: [HttpClientTestingModule],
+      providers: [{ provide: ClioService, useClass: MockClioService }],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+    clios = TestBed.inject(ClioService);
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClioComponent);
+    component = fixture.componentInstance;
+    component.datasetId = datasetId;
+  });
+
+  describe('Normal operation', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should close', () => {
+      component.isOpen = true;
+      component.close();
+      expect(component.isOpen).toBeFalsy();
+    });
+
+    it('should toggle', () => {
+      component.isOpen = true;
+      component.toggleVisible();
+      expect(component.isOpen).toBeFalsy();
+      component.toggleVisible();
+      expect(component.isOpen).toBeTruthy();
+    });
+
+    it('should set the opener icon class', () => {
+      expect(component.openerIconClass).toBeFalsy();
+
+      const clioData1 = { score: 1, date: '' };
+      const clioData3 = { score: 3, date: '' };
+
+      let allClioData = [clioData1];
+      component.setOpenerIconClass(allClioData);
+
+      expect(component.openerIconClass).toBeTruthy();
+      expect(component.openerIconClass).toEqual('clio-state-1');
+
+      allClioData = [clioData1, clioData3];
+      component.setOpenerIconClass(allClioData);
+
+      expect(component.openerIconClass).toEqual('clio-state-2');
+    });
+
+    it('should load data on init', fakeAsync(() => {
+      spyOn(component, 'loadData').and.callThrough();
+      spyOn(clios, 'loadClioData').and.callThrough();
+      component.ngOnInit();
+      tick(1);
+      fixture.detectChanges();
+      expect(component.loadData).toHaveBeenCalled();
+      expect(clios.loadClioData).toHaveBeenCalled();
+      component.ngOnDestroy();
+      tick(1);
+    }));
+  });
+});

src/app/dataset/clio/clio.component.ts

@@ -0,0 +1,71 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from '../../../environments/environment';
+import { ClioData } from '../../_models';
+import { ClioService } from '../../_services';
+import { DataPollingComponent } from '../../data-polling';
+
+@Component({
+  selector: 'app-clio',
+  templateUrl: './clio.component.html',
+  styleUrls: ['./clio.component.scss']
+})
+export class ClioComponent extends DataPollingComponent implements OnInit {
+  allClioData: Array<ClioData>;
+  isOpen = false;
+  openerIconClass: string;
+
+  @Input() datasetId: string;
+
+  constructor(private readonly clios: ClioService) {
+    super();
+    this.clios = clios;
+  }
+
+  /** ngOnInit
+  /* - poll the data
+  */
+  ngOnInit(): void {
+    console.log('get the data (' + this.datasetId + ') - show icon if anything is available');
+    this.createNewDataPoller(
+      environment.intervalStatusMedium,
+      () => {
+        return this.loadData(this.datasetId);
+      },
+      (clioData: Array<ClioData>) => {
+        this.allClioData = clioData;
+        this.setOpenerIconClass(clioData);
+      }
+    );
+  }
+
+  /** loadData
+  /* - poll the data
+  */
+  loadData(datasetId: string): Observable<Array<ClioData>> {
+    return this.clios.loadClioData(datasetId);
+  }
+
+  /** close
+  /* - set isOpen to false
+  */
+  close(): void {
+    this.isOpen = false;
+  }
+
+  /** setOpenerIconClass
+  /* - sets opener icon class based on average score in clioStats
+  */
+  setOpenerIconClass(clioData: Array<ClioData>): void {
+    const scores: Array<number> = clioData.map((s: ClioData) => s.score);
+    const avg = scores.reduce((a, b) => a + b, 0) / scores.length;
+    this.openerIconClass = `clio-state-${Math.floor(avg)}`;
+  }
+
+  /** toggleVisible
+  /* - toggles isOpen variable
+  */
+  toggleVisible(): void {
+    this.isOpen = !this.isOpen;
+  }
+}

src/app/dataset/clio/index.ts

@@ -0,0 +1 @@
+export * from './clio.component';

src/app/dataset/generalinfo/generalinfo.component.html

@@ -1,6 +1,10 @@
 <div class="metis-dataset-info-block" *ngIf="datasetData">
   <div class="dataset-name">
-    <span class="svg-icon-dataset"></span> {{ datasetData.datasetName }}
+    <!--
+      <span class="svg-icon-dataset"></span> {{ datasetData.datasetName }}
+    -->
+    <app-clio datasetData.datasetId [datasetId]="datasetData.datasetId"></app-clio>
+    {{ datasetData.datasetName }}
     <span
       *ngIf="currentDepublicationStatusMessage"
       class="depublication-status"

src/app/dataset/index.ts

@@ -1,4 +1,5 @@
 export * from './actionbar/';
+export * from './clio/clio.component';
 export * from './dataset.component';
 export * from './datasetform/';
 export * from './datasetlog/';

test-data/index.ts

@@ -305,6 +305,22 @@ function routeToFile(request: IncomingMessage, response: ServerResponse, route:
     }
   }
 
+  regRes = route.match(/orchestrator\/clio\/(\d+)/);
+
+  if (regRes) {
+    response.end(
+      JSON.stringify(
+        [0, 1, 2, 3, 4].map((n) => {
+          return {
+            score: n,
+            date: new Date().toISOString().split('T')[0]
+          };
+        })
+      )
+    );
+    return true;
+  }
+
   regRes = route.match(/orchestrator\/proxies\/(\D+)\/task\/-?(\d+)\/report\/exists/);
 
   if (regRes) {