Add cone search plot background image

client/src/app/instance/search/components/result/cone-search-plot.component.ts

@@ -7,11 +7,13 @@
  * file that was distributed with this source code.
  */
 
-import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, OnInit } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, OnInit, SimpleChanges } from '@angular/core';
 
 import * as d3 from 'd3';
 
+import { Dataset, Image } from 'src/app/metamodel/models';
 import { ConeSearch } from 'src/app/instance/store/models';
+import { AppConfigService } from 'src/app/app-config.service';
 
 /**
  * @class
@@ -26,22 +28,45 @@ import { ConeSearch } from 'src/app/instance/store/models';
 })
 export class ConeSearchPlotComponent implements OnInit {
     @Input() coneSearch: ConeSearch;
+    @Input() dataset: Dataset;
     @Input() data: {x: number, y: number}[];
+    @Input() selectedBackground: Image;
 
     // Interactive variables intialisation
     margin = { top: 50, right: 50, bottom: 50 , left: 50 };
     width = 500;
     height = 500;
     degTorad = 0.0174532925;
+    image;
     x: d3.ScaleLinear<number, number>;
     y: d3.ScaleLinear<number, number>;
 
+    constructor(private config: AppConfigService) { }
+
     ngOnInit(): void {
         this.coneSearchPlot();
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.selectedBackground && changes.selectedBackground.currentValue) {
+            console.log('coucou');
+            this.image.attr('xlink:href', this.getHrefBackgroundImage());
+        }
+    }
+
+
     getHrefBackgroundImage() {
-            //const scale = this.width / (this.rad * 2);
+        if (this.selectedBackground) {
+            let href = `${this.config.servicesUrl}/fits-cut-to-png/${this.dataset.name}?filename=${this.selectedBackground.file_path}`;
+            href += `&ra=${this.coneSearch.ra}`;
+            href += `&dec=${this.coneSearch.dec}`;
+            href += `&radius=${this.coneSearch.radius}`;
+            href += `&stretch=${this.selectedBackground.stretch}`;
+            href += `&pmin=${this.selectedBackground.pmin}`;
+            href += `&pmax=${this.selectedBackground.pmax}`;
+            href += `&axes=false`;
+            return href;
+        } else {
             const scale = this.coneSearch.radius / this.width;     // arcsec/pix
             return `https://skyserver.sdss.org/dr16/SkyServerWS/ImgCutout/getjpeg?TaskName=Skyserver.Chart.Image
                 &ra=${this.coneSearch.ra}
@@ -49,6 +74,7 @@ export class ConeSearchPlotComponent implements OnInit {
                 &scale=${scale}
                 &width=${this.width}
                 &height=${this.height}`;
+        }
     }
 
     coneSearchPlot(): void {
@@ -66,8 +92,8 @@ export class ConeSearchPlotComponent implements OnInit {
         this.y = d3.scaleLinear().range([this.height, 0]).domain([coneSearchDomain.decMin, coneSearchDomain.decMax]);
 
         // Background image
-        svg.append('image')
-            .attr('xlink:href', this.getHrefBackgroundImage())
+        this.image = svg.append('image');
+        this.image.attr('xlink:href', this.getHrefBackgroundImage())
             .attr('width', this.width)
             .attr('height', this.height);
 

client/src/app/instance/search/components/result/datatable-tab.component.html

@@ -10,9 +10,17 @@
         </button>
         <div class="row">
             <div class="col-md-5" *ngIf="coneSearch">
+                <div class="form-group">
+                    <label for="file_size">Background image</label>
+                    <ng-select [(ngModel)]="selectedBackground">
+                        <ng-option *ngFor="let image of imageList" [value]="image">{{ image.file_path }}</ng-option>
+                     </ng-select>
+                </div>
                 <app-cone-search-plot *ngIf="dataIsLoaded"
                     [coneSearch]="coneSearch"
-                    [data]="getData()">
+                    [dataset]="datasetList | datasetByName:datasetSelected"
+                    [data]="getData()"
+                    [selectedBackground]="selectedBackground">
                 </app-cone-search-plot>
             </div>
             <div class="datatable-group" [ngClass]="{'col': !coneSearch, 'col-md-7' : coneSearch }">

client/src/app/instance/search/components/result/datatable-tab.component.ts

@@ -9,7 +9,7 @@
 
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 
-import { Instance, Attribute, Dataset } from 'src/app/metamodel/models';
+import { Instance, Attribute, Dataset, Image } from 'src/app/metamodel/models';
 import { Pagination, SearchQueryParams, Criterion, ConeSearch } from 'src/app/instance/store/models';
 
 /**
@@ -37,6 +37,9 @@ export class DatatableTabComponent {
     @Input() dataIsLoading: boolean;
     @Input() dataIsLoaded: boolean;
     @Input() selectedData: any[];
+    @Input() imageList: Image[];
+    @Input() imageListIsLoading: boolean;
+    @Input() imageListIsLoaded: boolean;
     @Output() retrieveData: EventEmitter<Pagination> = new EventEmitter();
     @Output() addSelectedData: EventEmitter<number | string> = new EventEmitter();
     @Output() deleteSelectedData: EventEmitter<number | string> = new EventEmitter();
@@ -45,6 +48,8 @@ export class DatatableTabComponent {
     @Output() startTaskCreateArchive: EventEmitter<{ selectedData: boolean }> = new EventEmitter();
     @Output() downloadFile: EventEmitter<{url: string, fileId: string, datasetName: string, filename: string}> = new EventEmitter();
 
+    selectedBackground: Image = null;
+
     getData() {
         const dataset = this.getDataset();
         const columnRa = this.attributeList.find(a => a.id === dataset.cone_search_column_ra);

client/src/app/instance/search/containers/result.component.html

@@ -86,6 +86,9 @@
                 [dataIsLoading]="dataIsLoading | async"
                 [dataIsLoaded]="dataIsLoaded | async"
                 [selectedData]="selectedData | async"
+                [imageList]="imageList | async"
+                [imageListIsLoading]="imageListIsLoading | async"
+                [imageListIsLoaded]="imageListIsLoaded | async"
                 (retrieveData)="retrieveData($event)"
                 (addSelectedData)="addSearchData($event)"
                 (deleteSelectedData)="deleteSearchData($event)"

client/src/app/instance/search/containers/result.component.ts

@@ -14,7 +14,7 @@ import { Observable, Subscription } from 'rxjs';
 
 import { AbstractSearchComponent } from './abstract-search.component';
 import { Pagination, DownloadFile } from '../../store/models';
-import { Instance } from 'src/app/metamodel/models';
+import { Instance, Image } from 'src/app/metamodel/models';
 import * as instanceSelector from 'src/app/metamodel/selectors/instance.selector';
 import * as searchActions from '../../store/actions/search.actions';
 import * as searchSelector from '../../store/selectors/search.selector';
@@ -22,6 +22,8 @@ import * as sampActions from 'src/app/samp/samp.actions';
 import * as sampSelector from 'src/app/samp/samp.selector';
 import * as downloadFileActions from '../../store/actions/download-file.actions';
 import * as downloadFileSelector from '../../store/selectors/download-file.selector';
+import * as imageActions from 'src/app/metamodel/actions/image.actions';
+import * as imageSelector from 'src/app/metamodel/selectors/image.selector';
 
 /**
  * @class
@@ -45,6 +47,9 @@ export class ResultComponent extends AbstractSearchComponent {
     public selectedData: Observable<any>;
     public sampRegistered: Observable<boolean>;
     public downloadedFiles: Observable<DownloadFile[]>;
+    public imageList: Observable<Image[]>;
+    public imageListIsLoading: Observable<boolean>;
+    public imageListIsLoaded: Observable<boolean>;
     public pristineSubscription: Subscription;
 
     constructor(protected store: Store<{ }>) {
@@ -59,6 +64,9 @@ export class ResultComponent extends AbstractSearchComponent {
         this.selectedData = this.store.select(searchSelector.selectSelectedData);
         this.sampRegistered = this.store.select(sampSelector.selectRegistered);
         this.downloadedFiles = this.store.select(downloadFileSelector.selectDownloadedFiles);
+        this.imageList = this.store.select(imageSelector.selectAllImages);
+        this.imageListIsLoading = this.store.select(imageSelector.selectImageListIsLoading);
+        this.imageListIsLoaded = this.store.select(imageSelector.selectImageListIsLoaded);
     }
 
     ngOnInit(): void {
@@ -72,6 +80,7 @@ export class ResultComponent extends AbstractSearchComponent {
                 Promise.resolve(null).then(() => this.store.dispatch(searchActions.retrieveDataLength()));
             }
         });
+        Promise.resolve(null).then(() => this.store.dispatch(imageActions.loadImageList()));
     }
 
     /**