Merge branch 'dev' into feat/viewerPanelDualMode

.gitignore

@@ -6,3 +6,4 @@ src/plugin_examples/*/
 .vscode
 .idea
 deploy/datasets/data/
+.DS_Store

deploy/app.js

@@ -99,4 +99,4 @@ app.use('/preview', jsonMiddleware, previewRouter)
 const catchError = require('./catchError')
 app.use(catchError)
 
-module.exports = app
\ No newline at end of file
+module.exports = app

src/atlasViewer/atlasViewer.apiService.service.ts

@@ -226,4 +226,4 @@ export interface UserLandmark{
 
 export interface NGLayerObj{
 
-}
\ No newline at end of file
+}

src/atlasViewer/atlasViewer.template.html

@@ -151,7 +151,7 @@
 <ng-template #viewerBody>
   <div class="atlas-container" (drag-drop)="localFileService.handleFileDrop($event)" helpdirective>
 
-    <ui-nehuba-container (contextmenu)="nehubaClickHandler($event)">
+    <ui-nehuba-container (contextmenu)="$event.stopPropagation(); $event.preventDefault();"> <!--nehubaClickHandler($event)-->
     </ui-nehuba-container>
   
     <div *ngIf="!isMobile" bannerWrapper>

src/main.module.ts

@@ -168,4 +168,4 @@ export class MainModule{
       }
     })
   }
-}
\ No newline at end of file
+}

src/res/css/extra_styles.css

@@ -466,4 +466,13 @@ modal-container.modal
 bs-modal-backdrop.modal-backdrop
 {
   z-index: 940;
-}
\ No newline at end of file
+}
+
+
+.outline-none {
+    outline: none;
+}
+
+.cursorPointer {
+    cursor: pointer;
+}

src/res/css/plugin_styles.css

@@ -66,4 +66,4 @@
   color: #f2dede;
   background-color: rgba(169, 68, 66, 0.5);
   border-color: rgba(169, 68, 66,0.2)
-}
\ No newline at end of file
+}

src/ui/databrowserModule/databrowser.module.ts

@@ -64,7 +64,11 @@ import { RegionBackgroundToRgbPipe } from "./util/regionBackgroundToRgb.pipe";
   ],
   exports:[
     DataBrowser,
-    SingleDatasetView
+    SingleDatasetView,
+    PreviewComponent,
+    ModalityPicker,
+    FilterDataEntriesbyMethods,
+      FileViewer
   ],
   entryComponents:[
     DataBrowser
@@ -143,4 +147,4 @@ export class DatabrowserModule{
       }
     })
   }
-}
\ No newline at end of file
+}

src/ui/databrowserModule/databrowser.service.ts

@@ -388,4 +388,4 @@ export interface CountedDataModality{
   name: string
   occurance: number
   visible: boolean
-}
\ No newline at end of file
+}

src/ui/databrowserModule/databrowser.useEffect.ts

@@ -143,4 +143,4 @@ export class DataBrowserUseEffect implements OnDestroy{
 
 const LOCAL_STORAGE_CONST = {
   FAV_DATASET: 'fzj.xg.iv.FAV_DATASET'
-}
\ No newline at end of file
+}

src/ui/databrowserModule/fileviewer/dedicated/dedicated.component.ts

@@ -37,10 +37,4 @@ export class DedicatedViewer{
       ? this.removeDedicatedView()
       : this.showDedicatedView()
   }
-
-  get tooltipText(){
-    return this.isShowing
-      ? 'Remove this file in the viewer'
-      : 'View this file in the viewer'
-  }
-}
\ No newline at end of file
+}

src/ui/databrowserModule/fileviewer/dedicated/dedicated.style.css

@@ -2,4 +2,4 @@ a
 {
   margin: 0 1em;
   transition: all 200ms ease;
-}
\ No newline at end of file
+}

src/ui/databrowserModule/fileviewer/dedicated/dedicated.template.html

@@ -2,12 +2,21 @@
   You can directly preview this nifti file overlaying the atlas viewer.
 </div>
 
-<a 
-  href="#"
-  [matTooltip]="tooltipText"
-  container="body"
-  class="btn btn-sm rounded-circle"
-  [ngClass]="isShowing ? 'btn-primary' : 'btn-outline-secondary'"
-  (click)="click($event)">
-  <i class="far fa-eye"></i>
-</a>
\ No newline at end of file
+
+<div class="w-100 d-flex align-items-center flex-column">
+
+<div *ngIf="isShowing" class="d-flex flex-column align-items-center">
+  <i class="far fa-eye h3" [ngStyle]="isShowing && {'color' : '#04D924'}"></i>
+  <span>File is added</span>
+</div>
+
+  <button *ngIf="!isShowing" mat-button class="p-3 outline-none mat-raised-button" [disabled]="isShowing" color="primary" (click)="!isShowing && showDedicatedView()">
+    <span class="ml-2">Click to add file in Atlas Viewer</span>
+  </button>
+
+  <button mat-button *ngIf="isShowing" class="mat-raised-button p-3 outline-none" color="primary" (click)="removeDedicatedView()">
+    <i class="fas fa-eye-slash" style="color: #D93D04"></i>
+    Remove file from <b>Atlas Viewer</b>
+  </button>
+
+</div>

src/ui/databrowserModule/fileviewer/fileviewer.component.ts

@@ -5,6 +5,7 @@ import { interval,from } from 'rxjs';
 import { switchMap,take,retry } from 'rxjs/operators'
 import { ViewerPreviewFile } from 'src/services/state/dataStore.store';
 
+
 @Component({
   selector : 'file-viewer',
   templateUrl : './fileviewer.template.html' ,
@@ -97,6 +98,7 @@ export class FileViewer implements OnChanges,OnDestroy,OnInit{
 }
 
 interface ChartComponentInterface{
-  canvas : ElementRef
+  canvas : ElementRef,
+  shapedLineChartDatasets: any
 }
 

src/ui/databrowserModule/fileviewer/fileviewer.style.css

@@ -28,12 +28,12 @@ kg-entry-viewer
   display: block;
 }
 
-div[anchorContainer]
-{
-  padding:0.2em 1em;
-}
-
 div[mimetypeTextContainer]
 {
   margin:1em;
-}
\ No newline at end of file
+}
+
+.downloadButton {
+  color: #4595ec;
+  font-size: 20px;
+}

src/ui/databrowserModule/fileviewer/fileviewer.template.html

+<div class="w-100 d-flex justify-content-center mt-2 font-weight-bold">
+  {{previewFile.name}}
+</div>
+
 <div *ngIf = "!previewFile">
   previewFile as an input is required for this component to work...
 </div>
-
-<!-- KG Entry Viewer -->
-<!-- <kg-entry-viewer *ngIf = "previewFile.kgID && false" [dataset] = "previewFile">
-</kg-entry-viewer> -->
-
-<!-- citation -->
-<!-- <citations-component 
-  citationContainer
-  *ngIf = "previewFile && !previewFile.kgID"
-  [properties] = "previewFile.datasetProperties">
-</citations-component> -->
-
-<!-- file viewer -->
 <div 
   *ngIf = "previewFile"
   [ngSwitch]="previewFile.mimetype">
@@ -63,11 +54,6 @@
   </div>
   <div *ngSwitchCase = "'application/nehuba-layer'">
     APPLICATION NEHUBA LAYER - NOT YET IMPLEMENTED
-    <!-- <dedicated-view-controller
-      [dedicatedViewString]="'nehuba-layer://'+previewFile.url"
-      [dedicatedViewNehubaLayerObject]="previewFile.data">
-
-    </dedicated-view-controller> -->
   </div>
   <div *ngSwitchDefault>
     <div mimetypeTextContainer>
@@ -76,37 +62,34 @@
   </div>
 </div>
 
-<!-- caption -->
-<!-- <readmore-component *ngIf = "previewFile.properties && previewFile.properties.description">
-  <small id = "captions">
-    {{ previewFile.properties.description }}
-  </small>
-</readmore-component> -->
+<div class="mt-1 w-100 d-flex justify-content-end pl-1 pr-1 pt-2 pb-2">
+  <button
+          (click)="childChart.downloadChartAsPng()"
+          class="outline-none mr-1 ml-1 btn btn-link p-0"
+          container="body"
+          *ngIf="childChart && childChart.shapedLineChartDatasets"
+          matTooltip="Download line graph as csv">
+    <i class="fas fa-file-csv downloadButton"></i>
+  </button>
 
-<div
-  anchorContainer
-  *ngIf="downloadUrl">
-  <a
-    class="btn btn-sm btn-outline-secondary rounded-circle"
-    tooltip="Download file"
-    container="body"
-    [href]="downloadUrl"
-    target="_blank"
-    download>
-    <i class="far fa-arrow-alt-circle-down"></i>
+  <a      class="outline-none mr-1 ml-1"
+          *ngIf="downloadUrl"
+          [href]="downloadUrl"
+          target="_blank"
+          download
+          matTooltip="Download File"
+          color="#4595ec">
+    <i class="far fa-arrow-alt-circle-down downloadButton"></i>
   </a>
-</div>
 
-<div
-  anchorContainer
-  *ngIf="downloadPng">
-  <a
-    class="btn btn-sm btn-outline-secondary rounded-circle"
-    tooltip="Download chart as an image"
-    container="body"
-    [href]="downloadPng"
-    target="_blank"
-    download>
-    <i class="far fa-image"></i>
+  <a      class="outline-none mr-1 ml-1"
+          *ngIf="downloadPng"
+          container="body"
+          [href]="downloadPng"
+          target="_blank"
+          download
+          matTooltip="Download chart as an image"
+          color="#4595ec">
+    <i class="far fa-arrow-alt-circle-down downloadButton"></i>
   </a>
 </div>

src/ui/databrowserModule/fileviewer/line/line.chart.component.ts

-import { Component, Input, OnChanges, ElementRef, ViewChild } from '@angular/core'
+import {Component, Input, OnChanges, ElementRef, ViewChild, Output, EventEmitter} from '@angular/core'
 import {  DatasetInterface, ChartColor, ScaleOptionInterface, LegendInterface, TitleInterfacce, applyOption } from '../chart.interface'
 
 import { ChartOptions, LinearTickOptions,ChartDataSets, ChartPoint } from 'chart.js';
@@ -14,6 +14,12 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 export class LineChart implements OnChanges{
 
   @ViewChild('canvas') canvas : ElementRef
+  @ViewChild('DownloadLineChartLink', {read: ElementRef}) downloadLineChartLink : ElementRef
+
+  public downloadChartAsPng() {
+    if (this.downloadLineChartLink && this.downloadLineChartLink.nativeElement && this.downloadLineChartLink.nativeElement.click())
+      this.downloadLineChartLink.nativeElement.click()
+  }
 
   /**
    * labels of each of the columns, spider web edges
@@ -116,7 +122,7 @@ export class LineChart implements OnChanges{
       })),
       fill : 'origin'
     }))
-    
+
     this.maxY = this.chartDataset.datasets.reduce((max,dataset)=>{
       return Math.max(
         max,
@@ -178,4 +184,4 @@ export interface LinearChartOptionInterface{
 
 interface LineChartOption extends ChartOptions{
   color? : Color[]
-}
\ No newline at end of file
+}

src/ui/databrowserModule/fileviewer/line/line.chart.template.html

-<canvas 
-  *ngIf="shapedLineChartDatasets"
-  (mousewheel)="mousescroll($event)"
-  width='100%'
-  height='100%'
-  baseChart 
-  chartType="line"
-  [options]="chartOption"
-  [colors]="colors"
-  [datasets]="shapedLineChartDatasets"
-  [labels]="chartDataset.labels"
-  #canvas>
+<canvas
+        *ngIf="shapedLineChartDatasets"
+        (mousewheel)="mousescroll($event)"
+        width='100%'
+        height='100%'
+        baseChart
+        chartType="line"
+        [options]="chartOption"
+        [colors]="colors"
+        [datasets]="shapedLineChartDatasets"
+        [labels]="chartDataset.labels"
+        #canvas>
 </canvas>
-<a
-  [download]="csvTitle"
-  [href]="csvDataUrl"
-  tooltip="Download line graph as csv"
-  container="body"
-  class="btn btn-sm btn-outline-secondary rounded-circle"
-  *ngIf="shapedLineChartDatasets">
-  <i class="fas fa-file-csv"></i>
-</a>
-<span
-  *ngIf="!shapedLineChartDatasets">
+<div class="w-100 d-flex justify-content-end">
+    <a hidden
+       #DownloadLineChartLink
+       class="outline-none"
+       [download]="csvTitle"
+       [href]="csvDataUrl"
+       container="body"
+       *ngIf="shapedLineChartDatasets"
+       matTooltip="Download line graph as csv">
+        <i class="fas fa-file-csv"></i>
+        <!--  <i class="fas fa-file-csv"></i><span class="ml-2">Download line graph as csv</span>-->
+    </a>
+    <span
+            *ngIf="!shapedLineChartDatasets">
   datasets are required to display linear graph
-</span>
\ No newline at end of file
+</span>
+</div>

src/ui/databrowserModule/modalityPicker/modalityPicker.template.html

@@ -5,15 +5,6 @@
     class="btn btn-sm btn-link ">
     clear all
   </div>
-  <pill-component
-    class="mw-60"
-    [containerStyle]="{backgroundColor:'rgba(128,128,128,0.5)'}"
-    [closeBtnStyle]="{backgroundColor:'rgba(128,128,128,0.8)'}"
-    (closeClicked)="uncheckModality(dataM.name)"
-    [title]="dataM.name"
-    *ngFor="let dataM of checkedModality">
-  
-  </pill-component>
 </div>
 
 <div
@@ -24,4 +15,4 @@
 
   </i>
   {{ datamodality.name }} <span class="text-muted">({{ datamodality.occurance }})</span>
-</div>
\ No newline at end of file
+</div>