Source: public/javascript/modules/spectrum/olqv_spectrum.js

  1. import {
  2.     shiftFrequencyByZ,
  3.     unshiftFrequencyByZ,
  4.     shiftFrequencyByV,
  5.     unshiftFrequencyByV,
  6.     v2f,
  7.     f2v,
  8.     sumArr,
  9.     unitRescale,
  10.     standardDeviation,
  11.     jyperk
  12. } from "../utils.js";
  13. import { LinePlotter } from '../olqv_spectro.js';
  14. import { dataPaths, URL_ROOT, URL_3D_TO_1D, yafitsTarget, testMode } from '../init.js';
  15. import { ServerApi } from '../serverApi.js'
  16. import { FITS_HEADER } from '../fitsheader.js';
  17. import { Constants } from "../constants.js";
  18. import { sAMPPublisher, setOnHubAvailability } from "../samp_utils.js";
  19. import { DOMAccessor } from "../domelements.js";
  20. import {Slice} from "../olqv_slice.js";
  21. import {
  22.     XDataCompute, FrequencyXData, VelocityXData, VeloLSRXData, WaveXData, WavnXData, AWavXData
  23. } from "./xdata.js";
  24. import {
  25.     YDataCompute, FrequencyYData, VelocityYData, VeloLSRYData, WaveYData, WavnYData, AWavYData
  26. } from "./ydata.js";
  29. import{
  30.     ChartLegend, SitelleLegend, CasaLegend, GildasLegend, MuseLegend, MiriadLegend, MeerkatLegend, NenufarLegend
  31. } from './chartlegend.js';
  33. /**
  34.  * Triggers Highcharts selection event on the given chart
  35.  * @param {Highcharts.chart} chart event target
  36.  * @param {number} xMin minimum selected value on xAxis
  37.  * @param {number} xMax maximum selected value on xAxis
  38.  */
  39. function fireChartSelectionEvent(chart, xMin, xMax){
  40.     Highcharts.fireEvent(chart, 'selection', {
  41.         xAxis: [{
  42.             min: xMin,
  43.             max: xMax
  44.         }],
  45.     });
  46. }
  48. /**
  49.  * Returns a formatted string containing a displayable unit name
  50.  * @param {string} unit the source unit
  51.  * @returns {string} a formatted unit
  52.  */
  53. function displayableBUnit(unit) {
  54.     if(unit === undefined)
  55.             return "";
  56.     else{
  57.         switch (unit) {
  58.             case "Jy/beam":
  59.                 return "Jy";
  61.             case "erg/s/cm^2/A/arcsec^2":
  62.                 return "erg/s/cm^2/A";
  64.             default:
  65.                 return "";
  66.         }
  67.     }
  68. }
  70. /**
  71.  * Returns an object containing the configuration of a point when it will be displayed
  72.  * in Highcharts graph (plot type, colors, line width ...)
  73.  *
  74.  * Radius (5) and color (red) are hard coded for now
  75.  *
  76.  * @param {number} x coordinate on x axis (float)
  77.  * @param {number} y coordinate on y axis (float)
  78.  * @param {boolean} visible  visibility
  79.  * @returns {object} a point object to plot in Hightcharts
  80.  */
  81. function getPoint(x, y, visible) {
  82.     return {
  83.         type: 'scatter',
  84.         name: '',
  85.         showInLegend: false,
  86.         visible: visible,
  87.         zIndex: 1,
  88.         enableMouseTracking: false,
  89.         marker: {
  90.             radius: 8
  91.         },
  92.         data: [{
  93.             x: x,
  94.             y: y,
  95.             color: '#BF0B23'
  96.         }]
  97.     }
  98. }
  100. /**
  101.  * Returns an object containing the configuration of the X axis when it will be displayed
  102.  * in Highcharts graph (plot type, colors, line width ...)
  103.  * @returns {Object} configuration of x axis for Highcharts
  104.  */
  105. function getXAxisConfiguration() {
  106.     let axis = {
  107.         type: 'scatter',
  108.         marker: {
  109.             color: '#1f77b4',
  110.             size: 0,
  111.             radius: 0
  112.         },
  113.         line: {
  114.             color: '#1f77b4',
  115.             width: 1
  116.         },
  117.         connectgaps: 'true',
  118.         hoverinfo: 'x+y',
  119.         xaxis: 'x'
  120.     };
  121.     return axis;
  122.     // commented for now, does not seem useful
  123.     //return JSON.parse(JSON.stringify(axis))
  124. }
  126. /**
  127.  * Returns an event signaling that a slice has been modified
  128.  * data packed inside the event are used in testing context
  129.  * @param {string} type type of the modified slice ( single or summed)
  130.  * @param {object} data spectrum data
  131.  * @returns Event
  132.  */
  133. function get3DSpectrumUpdateEvent(type, data, meta){
  134.     let event = new Event(type);
  135.     if (type === "single"){
  136.         event.freqMin = meta.spectrumValues.freqMin;
  137.         event.freqMax = meta.spectrumValues.freqMax;
  138.         event.jyperk = jyperk(FITS_HEADER.restfreq, FITS_HEADER.bmin, FITS_HEADER.bmaj);
  139.         event.iRA = meta.iRA;
  140.         event.iDEC = meta.iDEC;
  141.         if(meta.ytitle !== undefined){
  142.             let parts = meta.ytitle.split('(');
  143.             if(parts.length > 1){
  144.                 event.unit = parts[1].replace(')', '');
  145.             }else{
  146.                 event.unit = parts[0];
  147.             }
  148.         }
  150.         event.rmsValue = standardDeviation(data.y);
  151.         event.minValue = Math.min(...data.y);
  152.         event.maxValue = Math.max(...data.y);
  153.     }else if(type === "summed"){
  154.         if(meta.lowerIntegratedValues.flux !== undefined){
  155.             event.fluxValue = meta.lowerIntegratedValues.flux.value;
  156.             event.fluxUnit = meta.lowerIntegratedValues.flux.unit;
  157.         }
  158.     
  159.         if(meta.lowerIntegratedValues.vmin !== undefined){
  160.             event.vminValue = meta.lowerIntegratedValues.vmin.value;
  161.             event.vminUnit = meta.lowerIntegratedValues.vmin.unit;
  162.         }
  163.     
  164.         if(meta.lowerIntegratedValues.vmax !== undefined){
  165.             event.vmaxValue = meta.lowerIntegratedValues.vmax.value;
  166.             event.vmaxUnit = meta.lowerIntegratedValues.vmax.unit;
  167.         }
  168.         event.imin = meta.lowerIntegratedValues.imin;
  169.         event.imax = meta.lowerIntegratedValues.imax;
  170.         if(meta.ytitle !== undefined){
  171.             let parts = meta.ytitle.split('(');
  172.             if(parts.length > 1){
  173.                 event.unit = parts[1].replace(')', '');
  174.             }else{
  175.                 event.unit = parts[0];
  176.             }
  177.         }
  178.         event.rmsValue = standardDeviation(data.y);
  180.         event.minValue = Math.min(...data.y);
  181.         event.maxValue = Math.max(...data.y);
  182.     }else if(type === "bounds"){
  183.         event.iFreqMin = meta.iFreqMin;
  184.         event.iFreqMax = meta.iFreqMax;
  185.         /*event.freqMin = meta.freqMin;
  186.         event.freqMax = meta.freqMax;*/
  187.         event.velMin = meta.velMin;
  188.         event.velMax = meta.velMax;
  189.     }
  190.     return event;
  191. }
  193. /**
  194.  * Returns an event signaling that a slice has been modified
  195.  * data packed inside the event are used in testing context
  196.  * @param {object} data spectrum data
  197.  * @returns Event
  198.  */
  199. function get1DSpectrumUpdateEvent(data, meta){
  200.     let event = new Event("1d");
  201.     if(meta.ytitle !== undefined){
  202.         let parts = meta.ytitle.split('(');
  203.         if(parts.length > 1){
  204.             event.unit = parts[1].replace(')', '');
  205.         }else{
  206.             event.unit = parts[0];
  207.         }
  208.     }
  210.     event.rmsValue = standardDeviation(data.y);
  212.     event.minValue = meta.minVal;
  213.     event.maxValue = meta.maxVal;
  214.     event.freqMin = meta.freqMin;
  215.     event.freqMax = meta.freqMax;
  216.     event.iRA = 0;
  217.     event.iDEC = 0;
  218.  
  219.     return event;
  220. }
  223. class SpectrumViewer {
  225.     static objectType = "SPECTRUM";
  227.     /**
  228.      * @constructor
  229.      * @param {Object} paths dataPaths object
  230.      * @param {string} containerId id of graph container
  231.      */
  232.     constructor(paths, containerId, width, heightWidthRatio, spectroUI) {
  233.         this.spectrumChart = null;
  234.         this._containerId = containerId;
  235.         this._viewLinker = null;
  236.         this._spectroUI = spectroUI;
  237.         this.linePlotter = null;
  238.         this.spectrumLoadedlisteners = [];
  240.         this._spectrumUnit = displayableBUnit(FITS_HEADER.bunit);
  242.         this._width = width;
  243.         this._heightWidthRatio = heightWidthRatio;
  244.         this._xtitle = "undefined";
  245.         this._ytitle = "undefined";
  246.         this._xMinZoom = null;
  247.         this._xMaxZoom = null;
  248.         this._relFITSFilePath = paths.relFITSFilePath;
  249.         this._sampButton = undefined;
  250.         this._datatype = "";
  252.         this._legendObject = new ChartLegend();
  253.         this._xDataComputer = new XDataCompute()
  254.         this._yDataComputer = new YDataCompute()
  256.         this._initLegendObject();
  257.         this. _initDataComputers();
  258.     }
  260.     _initLegendObject(){
  261.         let strategy = null;
  262.         if (FITS_HEADER.isSITELLE()) {
  263.             strategy = new SitelleLegend();
  264.         } else if (FITS_HEADER.isCASA()) {
  265.             strategy =  new CasaLegend();
  266.         } else if (FITS_HEADER.isGILDAS()) {
  267.             strategy =  new GildasLegend();
  268.         } else if (FITS_HEADER.isMUSE()) {
  269.             strategy =  new MuseLegend();
  270.         } else if (FITS_HEADER.isMIRIAD()) {
  271.             strategy =  new MiriadLegend();
  272.         } else if (FITS_HEADER.isMEERKAT()) {
  273.             strategy =  new MeerkatLegend();
  274.         } else if (FITS_HEADER.isNENUFAR()) {
  275.             strategy =  new NenufarLegend();
  276.         } else{
  277.             throw("Strategy is unknown");
  278.         }
  280.         this._legendObject.setStrategy(strategy);
  281.     }
  283.     _initDataComputers(){
  284.         switch (FITS_HEADER.ctype3) {
  285.             case 'FREQ': 
  286.                 this._xDataComputer.setStrategy(new FrequencyXData());
  287.                 this._yDataComputer.setStrategy(new FrequencyYData());
  288.                 break;
  290.             case 'VRAD':
  291.                 this._xDataComputer.setStrategy(new VelocityXData());
  292.                 this._yDataComputer.setStrategy(new VelocityYData());
  293.                 break;
  295.             case 'VELO-LSR':
  296.                 this._xDataComputer.setStrategy(new VeloLSRXData());
  297.                 this._yDataComputer.setStrategy(new VeloLSRYData());
  298.                 break;
  300.             case 'WAVE':
  301.                 this._xDataComputer.setStrategy(new WaveXData());
  302.                 this._yDataComputer.setStrategy(new WaveYData());
  303.                 break;
  305.             case 'WAVN':
  306.                 this._xDataComputer.setStrategy(new WavnXData());
  307.                 this._yDataComputer.setStrategy(new WavnYData());
  308.                 break;
  310.             case 'AWAV':
  311.                 this._xDataComputer.setStrategy(new AWavXData());
  312.                 this._yDataComputer.setStrategy(new AWavYData());
  313.                 break;
  315.             default:
  316.                 throw("ctype3 case not recognized : " + FITS_HEADER.ctype3);
  317.         }        
  318.     }
  320.     /**
  321.      * Returns Y value in spectrum data for a given X. 
  322.      * Values are sorted in descending ordre in spectrumData,
  323.      * Y value is returned as soon as X > spectrumData[i]
  324.      * @param {number} x  X value (float)
  325.      * @param {array} spectrumData an array of [x,y] tuples
  326.      * @returns 
  327.      */
  328.     getYValueAtX(x, spectrumData){
  329.         if(x <= spectrumData[0][0] && x >= spectrumData[spectrumData.length -1][0]){
  330.             for(let i=0; i < spectrumData.length; i++){
  331.                 if(x >= spectrumData[i][0])
  332.                     return spectrumData[i][1];
  333.             }
  334.         } else
  335.             throw RangeError(x + " value not found in spectrum data");
  336.     }
  338.     setSpectrumSize(width, ratio){
  339.         this.spectrumChart.setSize(width, ratio);
  340.         this._width = width;
  341.         this._heightWidthRatio = ratio;
  342.     }
  344.     addSpectrumLoadedListener(listener){
  345.         this.spectrumLoadedlisteners.push(listener);
  346.     }
  348.     removeSpectrumLoadedListener(listener){
  349.         for(let i=0; i < this.spectrumLoadedlisteners.length; i++){
  350.             if(this.spectrumLoadedlisteners[i] === listener){
  351.                 this.spectrumLoadedlisteners.splice(i, 1);
  352.             }
  353.         }
  354.     }
  356.     _executeSpectrumLoadedListener(event) {
  357.         for (let l of this.spectrumLoadedlisteners) {
  358.             l.spectrumLoaded(event);
  359.         }
  360.     }
  362.     /**
  363.      * @param {ViewLinker} viewLinker ViewLinker object managing interactions between elements
  364.      */
  365.     setViewLinker(viewLinker) {
  366.         this._viewLinker = viewLinker;
  367.     }
  369.     /**
  370.      * Returns the xaxis of the chart and its datatype
  371.      * @returns {Object} an object containing the xaxis and a datatype
  372.      */
  373.     getSpectrumChartXAxis() {
  374.         return {
  375.             axis: this.spectrumChart.xAxis[0],
  376.             datatype: this._datatype
  377.         };
  378.     }
  380.     /**
  381.      * Called when NED table object triggers an event, refreshes lines display
  382.      * 
  383.      * @param {Event} event event that triggered the call
  384.      */
  385.     sourceTableCall(event) {
  386.         if (this.linePlotter != undefined) {
  387.             this.linePlotter.refresh();
  388.         }
  389.     }
  391.     refreshChartLegend() {
  392.         throw new Error("This method must be implemented");
  393.     }
  395.     getExportMenuItems(mode, sampConnected){
  396.         let result = ['downloadPNG'];
  398.         if(mode === "OBSPM"){
  399.             result.push('downloadFits');
  400.         }
  402.         result.push("sendTo1D");
  404.         if(sampConnected){
  405.             result.push("sendWithSamp");
  406.         }
  408.         return result;
  409.     }
  412.     /**
  413.      * Toggles samp button visibility
  414.      * @param {boolean} state status of button visibility
  415.      */
  416.     setSampButtonVisible(state) {
  417.         let menu = { exporting: { buttons: { contextButton: { menuItems: this.getExportMenuItems(yafitsTarget, state) } } } };
  418.         //this can occur before chart is initialized
  419.         if(this.spectrumChart !== null){
  420.             this.spectrumChart.update(menu);
  421.         }
  422.     }
  424.     _showCoordinates(coords){
  425.         throw new Error("This method must be implemented");
  426.     }
  428.     /**
  429.      * Returns integral value of selected area in the spectrum
  430.      * One case for a graph in radial velocity, one for all other cases
  431.      * @param {*} yData
  432.      * @param {*} imin 
  433.      * @param {*} imax 
  434.      * @returns 
  435.      */
  436.     _getSelectedSpectrumValue(yData, imin, imax) {
  437.         let result = 0;
  438.         if (FITS_HEADER.ctype3 === 'VRAD') {
  439.             let copy = (x) => x;
  440.             let arraycopy = yData.map(copy);
  441.             result = sumArr(arraycopy.reverse(), imin, imax, FITS_HEADER.cdelt3prim);
  442.         } else {
  443.             result = sumArr(yData, imin, imax, FITS_HEADER.cdelt3prim);
  444.         }
  445.         return result / unitRescale(this._spectrumUnit);
  446.     }
  448.     /**
  449.      * Returns the channel corresponding to the given input value (frequency or velocity)
  450.      * @param {number} value (float)
  451.      * @returns {float}
  452.      */
  453.     _getCalculatedIndex(value) {
  454.         let result = 0;
  455.         if (FITS_HEADER.ctype3 === 'VRAD') {
  456.             let step1 = (Constants.UNIT_FACTOR[Constants.DEFAULT_OUTPUT_UNIT[FITS_HEADER.ctype3]] / Constants.UNIT_FACTOR[FITS_HEADER.cunit3]) / FITS_HEADER.cdelt3;
  457.             let crval3 = FITS_HEADER.crval3 / (Constants.UNIT_FACTOR[Constants.DEFAULT_OUTPUT_UNIT[FITS_HEADER.ctype3]] / Constants.UNIT_FACTOR[FITS_HEADER.cunit3]);
  458.             result = (value - crval3) * step1 + FITS_HEADER.crpix3 - 1;
  459.         } else if (FITS_HEADER.ctype3 === 'FREQ') {
  460.             // if ctype is FREQ we have to read Constants.DEFAULT_OUTPUT_UNIT['VRAD']*
  461.     
  462.             let vcenter = 0; //SPEED_OF_LIGHT * (FITS_HEADER.crval3 - FITS_HEADER.restfreq) / FITS_HEADER.restfreq;
  463.             let step1 = v2f(value * Constants.UNIT_FACTOR[Constants.DEFAULT_OUTPUT_UNIT['VRAD']], FITS_HEADER.restfreq, vcenter);
  464.             let step2 = (step1 - FITS_HEADER.crval3) / FITS_HEADER.cdelt3;
  465.             result = step2 + FITS_HEADER.crpix3 - 1 /*+ FITS_HEADER.naxis3 / 2*/;
  466.         }
  467.     
  468.         if (FITS_HEADER.cdelt3 >= 0) {
  469.             result = FITS_HEADER.naxis3 - result - 1;
  470.         }
  471.     
  472.         if(Math.round(result) < 0){
  473.             console.error("Calculated index can not be a negative value : " + result);
  474.         } else
  475.             return Math.round(result);
  476.     }
  478.     /**
  479.      * Returns x axis coordinates. They are calculated from center position and step between each value (CDELT3)
  480.      * The formula changes according to the type of data on x axis (CTYPE3)
  481.      *
  482.      * @param {number} rlen number of points on x axis (int)
  483.      * @returns {array} an array of x values
  484.      */
  485.     _getXData(rlen) {
  486.         throw new Error("This method must be implemented");
  487.     }
  489.     /**
  490.      * Returns an array of ydata from the data passed in parameter.
  491.      * The parameter array must be reverted if CDELT3 > 0 in case of a frequency
  492.      * and if CDELT3 < 0 in case of a radial velocity
  493.      * It is rescaled in case of Sitelle data.
  494.      * It is returned unchanged in any other case
  495.      *
  496.      * @param {array} data 
  497.      * @returns {array}
  498.      */
  499.     _getYData(data) {
  500.         throw new Error("This method must be implemented");
  501.     }
  504. }
  506. /**
  507.  * A class displaying a spectrum, using the Highcharts library
  508.  * 
  509.  * @property {Object} spectrumChart a highchart chart object
  510.  */
  511. class SingleSpectrumViewer extends SpectrumViewer {
  512.     /**
  513.      * @constructor
  514.      * @param {Object} paths dataPaths object
  515.      * @param {string} containerId id of graph container
  516.      */
  517.     constructor(paths, containerId, width, heightWidthRatio, spectroUI) {
  518.         super(paths, containerId, width, heightWidthRatio, spectroUI);
  519.         this.iRA = undefined;
  520.         this._iDEC = undefined;
  521.         this._ifrequencyMarker = 0;
  522.         this.toptitle = "undefined";
  523.         this._datatype = "frequency";
  524.         this._computeSliceIndex = this._computeSliceIndex.bind(this);
  525.         this.refreshChartLegend();
  526.     }
  529.     /**
  530.     Returns index of slice to be displayed
  531.     plotData : spectrum
  532.     x : x position clicked on graph
  533.     */
  534.     /**
  535.      * Returns index of slice to be displayed when spectrum is clicked
  536.      * @param {Object} plotData object containing arrays of x and y values of the graph
  537.      * @param {number} x x position clicked on graph (float)
  538.      * @returns 
  539.      */
  540.     _computeSliceIndex(plotData, x) {
  541.         var rlen = plotData.x.length;
  542.         switch (FITS_HEADER.ctype3) {
  543.             case 'FREQ':
  544.                 if (FITS_HEADER.cdelt3 > 0) {
  545.                     var forigin = plotData.x[rlen - 1];
  546.                     var deltaf = plotData.x[0] - plotData.x[1];
  547.                 } else {
  548.                     var forigin = plotData.x[0];
  549.                     var deltaf = plotData.x[1] - plotData.x[0];
  550.                 }
  551.                 break;
  553.             case 'VRAD':
  554.             case 'VELO-LSR':
  555.             case 'WAVE':
  556.             case 'WAVN':
  557.             case 'AWAV':
  558.                 if (FITS_HEADER.cdelt3 > 0) {
  559.                     var forigin = plotData.x[0];
  560.                     var deltaf = plotData.x[1] - plotData.x[0];
  561.                 } else {
  562.                     var forigin = plotData.x[rlen - 1];
  563.                     var deltaf = plotData.x[0] - plotData.x[1];
  564.                 }
  565.                 break;
  567.             default:
  568.                 console.log("This should not happen");
  569.         }
  571.         // phys2Index
  572.         return Math.round((x - forigin) / deltaf);
  573.     }
  575.     /**
  576.      * Called when NED table object triggers an event, refreshes lines display
  577.      * 
  578.      * @param {Event} event event that triggered the call
  579.      */
  580.     sourceTableCall(event) {
  581.         this.refresh();
  582.     }
  584.     /**
  585.      * Sets the title of the graph, x and y axis
  586.      * the format of the title depends on the type o displayed data.
  587.      * currently considered are : sitelle, casa, muse, gildas, miriad
  588.      * 
  589.      * An alert is displayed in any other case
  590.      */
  591.     refreshChartLegend() {
  592.         this._legendObject.defineSpectrumLegend(this);
  593.         if(this.spectrumChart !== null){
  594.             this.spectrumChart.xAxis[0].axisTitle.attr({
  595.                 text: this._xtitle
  596.             });
  597.         }
  598.     }
  600.     _showCoordinates(coords){
  601.         DOMAccessor.getSingleChartCoordinates().innerText = "@Pixel x=" + Math.round(coords[0]) + " y=" + Math.round(coords[1]);
  602.     }
  604.     /**
  605.      * Sets the index of selected frequency value on graph
  606.      * @param {number} i index of selected frequency on graph (int)
  607.      */
  608.     setFrequencyMarker(i) {
  609.         console.log("setFrequencyMarker: entering.");
  610.         switch (FITS_HEADER.ctype3) {
  611.             case 'FREQ':
  612.                 if (FITS_HEADER.cdelt3 > 0) {
  613.                     this._ifrequencyMarker = FITS_HEADER.naxis3 - 1 - i;
  614.                 } else {
  615.                     this._ifrequencyMarker = i;
  616.                 }
  617.                 break;
  619.             case 'VRAD':
  620.                 if (FITS_HEADER.cdelt3 > 0) {
  621.                     this._ifrequencyMarker = i;
  622.                 } else {
  623.                     this._ifrequencyMarker = FITS_HEADER.naxis3 - 1 - i;
  624.                 }
  625.                 break;
  627.             // equivalent to VRAD
  628.             case 'VELO-LSR':
  629.                 if (FITS_HEADER.cdelt3 > 0) {
  630.                     this._ifrequencyMarker = i;
  631.                 } else {
  632.                     this._ifrequencyMarker = FITS_HEADER.naxis3 - 1 - i;
  633.                 }
  634.                 break;
  636.             case 'WAVE':
  637.             case 'WAVN':
  638.             case 'AWAV':
  639.                 this._ifrequencyMarker = i;
  640.                 break;
  642.             default:
  643.                 console.log("This should not happen");
  644.                 break;
  645.         }
  646.         console.log("setFrequencyMarker: exiting.");
  647.     }
  650.     /**
  651.      * Creates and returns a Highcharts chart
  652.      * @param {Object} plotData Data plotted in graph
  653.      * @param {string} xtitle x axis title
  654.      * @param {string} ytitle  y axis title
  655.      * @returns {chart} 
  656.      */
  657.     _getChart(plotData, xtitle, ytitle) {
  658.         let self = this;
  659.         let kpj = FITS_HEADER.kelvinPerJansky();
  660.         let spectrumData = [];
  661.         for (let i = 0; i < plotData.x.length; i++) {
  662.             spectrumData.push([plotData.x[i], plotData.y[i]]);
  663.         }
  664.         let container = document.getElementById(this._containerId);
  666.         return Highcharts.chart(container, {
  667.             title: {
  668.                 text: ''
  669.             },
  670.             chart: {
  671.                 type: 'line',
  672.                 width: self._width,
  673.                 height: self._heightWidthRatio,
  674.                 animation: false,
  675.                 zoomType: 'xz',
  676.                 panning: true,
  677.                 panKey: 'shift',
  678.                 responsive: {  
  679.                     rules: [{  
  680.                       condition: {  
  681.                         maxWidth: self._width,
  682.                         maxHeight: self._heightWidthRatio
  683.                       },  
  684.                       chartOptions: {
  685.                         xAxis: {
  686.                             labels: {
  687.                                 formatter: function () {
  688.                                     return this.value.charAt(0);
  689.                                 }
  690.                             }
  691.                         },
  692.                         yAxis: {
  693.                             labels: {
  694.                                 align: 'left',
  695.                                 x: 0,
  696.                                 y: -5
  697.                             },
  698.                             title: {
  699.                                 text: null
  700.                             }
  701.                         }
  702.                     }
  703.                     }]  
  704.                 },
  705.                 events: {
  706.                     render: function (event) {
  707.                         // hides zoom button when it is displayed
  708.                         // we only use zoom button defined in yafits UI
  709.                         if (this.resetZoomButton !== undefined) {
  710.                             this.resetZoomButton.hide();
  711.                         }
  712.                     },
  713.                     load: function (event) {
  714.                         // graph is loaded
  715.                         DOMAccessor.showLoaderAction(false);
  716.                     },
  718.                     click: function (event) {
  719.                         let sliceIndex = self._computeSliceIndex(plotData, event.xAxis[0].value);
  720.                         // Display slice at index sliceIndex
  721.                         if (self._viewLinker !== null) {
  722.                             self._viewLinker.getAndPlotSingleSlice(sliceIndex);
  723.                             self._viewLinker.setFluxDensityInPopup(event.yAxis[0].value, SpectrumViewer.objectType);
  724.                         }
  725.                         const yvalue = self.getYValueAtX(event.xAxis[0].value, spectrumData);
  726.                         this.series[1].update(getPoint(event.xAxis[0].value, yvalue, true));
  727.                     }
  728.                 }
  730.             },
  731.             boost: {
  732.                 useGPUTranslations: true,
  733.                 usePreAllocated: true
  734.             },
  735.             xAxis: {
  736.                 gridLineWidth: 1,
  737.                 lineColor: '#FFFFFF',
  738.                 title: {
  739.                     text: xtitle
  740.                 },
  741.                 crosshair: true,
  742.                 reversed: true,
  743.                 maxPadding : 0, 
  744.                 endOnTick : false,
  745.                 minPadding : 0, 
  746.                 startOnTick : false,
  747.                 events: {
  748.                     // called when boudaries of spectrum are modified
  749.                     setExtremes: function (event) {
  750.                         if ((event.min === undefined || event.max === undefined) && self._viewLinker !== null) {
  751.                             self._viewLinker.summedPixelsSpectrumViewer.spectrumChart.xAxis[0].setExtremes(
  752.                             self._viewLinker.summedPixelsSpectrumViewer.spectrumChart.xAxis[0].dataMin,
  753.                             self._viewLinker.summedPixelsSpectrumViewer.spectrumChart.xAxis[0].dataMax);
  754.                         } else {
  755.                             let restfreq = FITS_HEADER.restfreq
  756.                             if(self._spectroUI.getVelocity("m/s") === 0 || self._spectroUI.getVelocity("m/s")  === undefined ){
  757.                                 if(self._spectroUI.getRedshift() !== undefined){
  758.                                     restfreq = restfreq * (1 + self._spectroUI.getRedshift());
  759.                                 }                                    
  760.                             }
  762.                             let minval, maxval;
  764.                             //velocity is undefined if a z value has been entered
  765.                             if( self._spectroUI.getVelocity("m/s")  === undefined ){
  766.                                 minval = Math.round(f2v(event.min * 1e9, restfreq, 0) / 1e3);
  767.                                 maxval = Math.round(f2v(event.max * 1e9, restfreq, 0) / 1e3); 
  768.                             }else{
  769.                                 minval = Math.round(f2v(event.min * 1e9, restfreq, self._spectroUI.getVelocity("m/s")) / 1e3);
  770.                                 maxval = Math.round(f2v(event.max * 1e9, restfreq, self._spectroUI.getVelocity("m/s")) / 1e3);   
  771.                             }
  773.                             //exchange min/max if min > max
  774.                             if (minval > maxval) {
  775.                                 let tmp = minval;
  776.                                 minval = maxval;
  777.                                 maxval = tmp;
  778.                             }
  780.                             if (self._viewLinker !== null) {
  781.                                 self._viewLinker.summedPixelsSpectrumViewer.spectrumChart.xAxis[0].setExtremes(minval, maxval);
  782.                             }
  783.                         }
  784.                     },
  785.                 }
  786.             },
  787.             yAxis: {
  788.                 lineColor: '#FFFFFF',
  789.                 gridLineWidth: 1,
  790.                 lineWidth: 1,
  791.                 opposite: true,
  792.                 title: {
  793.                     text: ytitle
  794.                 },
  795.                 labels: {
  796.                     // returns ticks to be displayed on Y axis
  797.                     formatter: function () {
  798.                         let label = '';
  799.                         // value already in K
  800.                         if (FITS_HEADER.isSpectrumInK()) {
  801.                             label = 'K';
  802.                         }
  803.                         // result can be NaN if _bmin/_bmaj not available
  804.                         // then nothing to display, else value is converted in K
  805.                         else if (!isNaN(kpj)) {
  806.                             label = " <br/> " + Number(this.value * kpj).toExponential(2) + " K";
  807.                         }
  809.                         return Number(this.value).toExponential(2) + label;
  810.                     }
  811.                 }
  812.             },
  813.             plotOptions: {
  814.                 series: {
  815.                     cursor: 'pointer',
  816.                     step: 'center',
  817.                     color: Constants.PLOT_DEFAULT_COLOR,
  818.                     animation: {
  819.                         duration: 0
  820.                     },
  821.                     lineWidth: Constants.PLOT_DEFAULT_LINE_WIDTH,
  822.                     events: {
  823.                         click: function (event) {
  824.                             //console.clear();
  825.                             let sliceIndex = self._computeSliceIndex(plotData, event.point.x);
  826.                             DOMAccessor.setSliceChannel("Chan#" + sliceIndex);
  827.                             const yvalue = self.getYValueAtX(event.point.x, spectrumData);
  828.                             this.chart.series[1].update(getPoint(event.point.x, yvalue, true));
  829.                             if (this._viewLinker !== null) {
  830.                                 // Display slice at index sliceIndex
  831.                                 self._viewLinker.setFluxDensityInPopup(event.point.y, SpectrumViewer.objectType);
  832.                                 self._viewLinker.getAndPlotSingleSlice(sliceIndex);
  833.                             }
  834.                         }
  835.                     }
  836.                 },
  837.                 marker: {
  838.                     radius: 0
  839.                 }
  840.             },
  841.             exporting: {
  842.                 menuItemDefinitions: {
  843.                     // Custom definition
  844.                     downloadFits: {
  845.                         onclick: function () {
  846.                             window.open(URL_ROOT + dataPaths.spectrum, '_blank');
  847.                         },
  848.                         text: 'Download FITS file'
  849.                     },
  850.                     sendWithSamp: {
  851.                         onclick: function (event) {
  852.                             sAMPPublisher.sendSpectrumToAll(URL_ROOT + dataPaths.spectrum, "Artemix");
  853.                             event.stopPropagation();
  854.                         },
  855.                         text: 'Send with SAMP'
  856.                     },
  857.                     sendTo1D: {
  858.                         onclick: function (event) {
  859.                             window.open(URL_3D_TO_1D + dataPaths.spectrum, '_blank');
  860.                         },
  861.                         text: 'Open in 1D viewer'
  862.                     }
  863.                 },
  864.                 buttons: {
  865.                     contextButton: {
  866.                         menuItems: self.getExportMenuItems(yafitsTarget, false)
  867.                     }
  868.                 }
  869.             },
  870.             tooltip: {
  871.                 // displayed when the mouse if above the graph
  872.                 formatter: function () {
  873.                     // get channel number
  874.                     let sliceIndex = self._computeSliceIndex(plotData, this.x);
  875.                     let label = '( ' + this.x.toFixed(4) + ', ' + this.y.toFixed(4) + ') ';
  876.                     if (!isNaN(kpj) && !FITS_HEADER.isSpectrumInK()) {
  877.                         label = label + ", " + Number(this.y * kpj).toExponential(2) + " K";
  878.                     }
  879.                     return " Chan#" + sliceIndex + " " + label;
  880.                 }
  881.             },
  882.             series: [{
  883.                 // unlimited number of points when zooming
  884.                 cropThreshold: Infinity,
  885.                 showInLegend: false,
  886.                 data: spectrumData,
  887.                 zIndex: 0,
  888.                 marker: {
  889.                     radius: 0
  890.                 },
  891.             },
  892.             //series of frequency markers, must not be empty to create it, this point is hidden
  893.             getPoint(0, 0, false)],
  894.         });
  895.     }
  897.     /**
  898.      * Returns x axis coordinates. They are calculated from center position and step between each value (CDELT3)
  899.      * The formula changes according to the type of data on x axis (CTYPE3)
  900.      *
  901.      * @param {number} rlen number of points on x axis (int)
  902.      * @returns {array} an array of x values
  903.      */
  904.     _getXData(rlen) {
  905.         return this._xDataComputer.computeSpectrum(rlen, this._spectroUI.getVelocity("m/s"), this._spectroUI.getRedshift());
  906.     }
  908.     /**
  909.      * Returns an array of ydata from the data passed in parameter.
  910.      * The parameter array must be reverted if CDELT3 > 0 in case of a frequency
  911.      * and if CDELT3 < 0 in case of a radial velocity
  912.      * It is rescaled in case of Sitelle data.
  913.      * It is returned unchanged in any other case
  914.      *
  915.      * @param {array} data 
  916.      * @returns {array}
  917.      */
  918.     _getYData(data) {
  919.         let result = this._yDataComputer.computeSpectrum(data);
  921.         if (FITS_HEADER.isSITELLE()) {
  922.             if (FITS_HEADER.cdelt1 && FITS_HEADER.cdelt2) {
  923.                 let pixel2arcsec = Math.abs(3600 * 3600 * FITS_HEADER.cdelt1 * FITS_HEADER.cdelt2);
  924.                 let temparr = result.map(function (x) {
  925.                     return x * unitRescale(FITS_HEADER.bunit) / pixel2arcsec
  926.                 });
  927.                 result = temparr;
  928.             }
  929.         }
  931.         return result;
  932.     }
  934.     /**
  935.      * Calls createFits function of server to create a fits file corresponding to iRa/iDec
  936.      * Path of created file is stored in dataPaths.spectrum
  937.      *
  938.      * createFits parameters are relFITSFilePath, iRA, iDEC
  939.      *
  940.      * @param {number} iRA  index of selected RA value (int)
  941.      * @param {number} iDEC index of selected DEC value (int)
  942.      */
  943.      _createFitsFile(iRA, iDEC) {
  944.         if (FITS_HEADER.ctype3 === "FREQ" || FITS_HEADER.ctype3 === "VRAD") {
  945.             let apiQuery = new ServerApi();
  946.             apiQuery.createFitsFile(iRA, iDEC, this._relFITSFilePath, (resp)=>{
  947.                 let response = JSON.parse(resp);
  948.                 dataPaths.spectrum = response.result;
  949.             });
  950.         }
  951.     }
  953.     refresh(){
  954.         this.plot(this._iRA, this._iDEC, undefined);
  955.         this.refreshChartLegend();
  956.     }
  958.     /**
  959.      * Calls the getSpectrum function of the server to get the spectrum data and plot them
  960.      *
  961.      * getSpectrum parameters are : relFITSFilePath, iRA, iDEC, iFREQ0, iFREQ1
  962.      *
  963.      * Here we want data for all frequencies so iFREQ0 = 0 and iFREQ1 = NAXIS3 - 1
  964.      * if iRA or iDEC are undefined, we use a centered value NAXIS1 / 2 and NAXIS2 / 2 respectively
  965.      *
  966.      * @param {number} iRA
  967.      * @param {number} iDEC
  968.      * @param {callbackFucntion} cb a function called when data have been returned from server
  969.      */
  970.     plot(iRA, iDEC, cb) {
  971.         this._iRA = iRA;
  972.         this._iDEC = iDEC;
  973.         let self = this;
  974.         if (typeof iRA === 'undefined') {
  975.             iRA = Math.floor(FITS_HEADER.naxis1 / 2);
  976.         }
  977.         if (typeof iDEC === 'undefined') {
  978.             iDEC = Math.floor(FITS_HEADER.naxis2 / 2);
  979.         }
  981.         let queryApi = new ServerApi();
  982.         queryApi.getSingleSpectrum(iRA, iDEC, this._relFITSFilePath,(resp)=>{
  983.             let plotData = getXAxisConfiguration();
  984.             let jsonTextContent =  JSON.stringify(resp);
  985.             let data;
  986.             // NaN values are replaced by null if they exist
  987.             if(jsonTextContent.includes("NaN")){
  988.                 let newResp = JSON.stringify(resp).replace(/\bNaN\b/g, "null");
  989.                 let test = JSON.parse(newResp);
  990.                 data = JSON.parse(test.data);
  991.             }else{
  992.                 data = resp.data;
  993.             }
  995.             plotData.x = self._getXData(data.result.length); // abscissa ( frequency, wavelength, velocity, ...);
  996.             plotData.xaxis = "x";
  998.             plotData.y = self._getYData(data.result);
  999.             self.spectrumChart = self._getChart(plotData, self._xtitle, self._ytitle);
  1001.             // pixel coordinates above chart
  1002.             self._showCoordinates([iRA, iDEC]);
  1003.             self._createFitsFile(iRA, iDEC);
  1005.             if(testMode){
  1006.                 let meta = {iRA : iRA, 
  1007.                     iDEC : iDEC, 
  1008.                     ytitle : self._ytitle, 
  1009.                     spectrumValues : {
  1010.                         freqMin : Math.min(...plotData.x), 
  1011.                         freqMax : Math.max(...plotData.x),
  1012.                         freqcenter : plotData.x[Math.floor(FITS_HEADER.naxis3 / 2)],
  1013.                     }
  1014.                 };
  1015.                 self._executeSpectrumLoadedListener(get3DSpectrumUpdateEvent("single",plotData, meta));
  1016.             }
  1019.             // callback function called at the end of loading process
  1020.             // typical use is restore previous graph limits
  1021.             if (cb !== undefined) {
  1022.                 cb();
  1023.             }
  1025.             if (self._viewLinker !== null) {
  1026.                 // set value of flux density in popup, should me moved out of this function
  1027.                 self._viewLinker.setFluxDensityInPopup(plotData.y[self._ifrequencyMarker], Slice.objectType);
  1028.                 if (self._viewLinker.summedPixelsSpectrumViewer.linePlotter !== null && self._viewLinker.spectroUI.getSelectedDatabase() !== "off") {
  1029.                     self._viewLinker.summedPixelsSpectrumViewer.linePlotter.loadAndPlotLines(self._viewLinker.summedPixelsSpectrumViewer.linePlotter.obsFreqMin,
  1030.                         self._viewLinker.summedPixelsSpectrumViewer.linePlotter.obsFreqMax,
  1031.                         [self._viewLinker.summedPixelsSpectrumViewer.getSpectrumChartXAxis(), self.getSpectrumChartXAxis()]);
  1032.                 }
  1033.             }
  1034.         }); 
  1035.     };
  1036. }
  1039. /**
  1040.  * A class displaying a spectrum, using the Highcharts library
  1041.  * 
  1042.  * @property {Object} spectrumChart a highchart chart object
  1043.  */
  1044. class SingleSpectrumViewer1D extends SingleSpectrumViewer {
  1045.     constructor(paths, containerId, width, heightWidthRatio, spectroUI) {
  1046.         super(paths, containerId, width, heightWidthRatio, spectroUI);
  1047.         this.detailChart;
  1048.         this._detailData = [];
  1050.         // min x value in detail chart
  1051.         this._xDetailMin = null;
  1052.         // max x value in detail chart
  1053.         this._xDetailMax = null;
  1055.         this._shiftMode = null;
  1057.         //xMin for manual user selection, redshift is applied
  1058.         this._xSelectionMin = null;
  1059.         //xMax for manual user selection, redshift is applied
  1060.         this._xSelectionMax = null;
  1061.         this.plottedData;
  1062.         // draw lines on master chart
  1063.         this.linePlotter = null;
  1064.         // draw lines on detailed chart
  1065.         this.detailLinePlotter = null;
  1066.         this._masterYData = [];
  1067.         // reference to last lines drawer called
  1068.         // this is used by the navigation buttons in 
  1069.         // the web UI
  1070.         this.activePlotter = null;
  1071.         //this.initialized = false;
  1072.         this.isRefreshable = true;
  1073.         this._isInit = true;
  1075.     }
  1077.     /**
  1078.      * Resets zoom of detail chart to its initial value by triggering a selection event on the chart
  1079.      * with this._xDetailMin and this._xDetailMax values
  1080.      * Master chart is fixed and can not be zoomed
  1081.      */
  1082.     resetZoom(){
  1083.         Highcharts.fireEvent(this.detailChart, 'selection', {
  1084.             xAxis: [{
  1085.                 min: this._xDetailMin,
  1086.                 max: this._xDetailMax
  1087.             }],
  1088.         });
  1089.     }
  1091.     /**
  1092.      * Called when NED table object triggers an event, refreshes lines display
  1093.      * 
  1094.      * @param {Event} event event that triggered the call
  1095.      */
  1096.     sourceTableCall(event) {
  1097.         this._shiftMode = "z";
  1098.         this.refresh("z");
  1099.     }
  1101.     /**
  1102.      * Returns data in the min/max interval from this._detailData
  1103.      * @param {number} min minimum value in interval (float)
  1104.      * @param {number} max maximum value in interval (float)
  1105.      * @returns array
  1106.      */
  1107.     _getIntervalData(dataArray, min, max){
  1108.         let result = [];
  1109.         dataArray.forEach(point => {
  1110.             if (point[0] > min && point[0] < max) {
  1111.                 result.push([point[0], point[1]]);
  1112.             }
  1113.         });
  1114.         return result;
  1115.     }
  1117.     setDetailedSpectrumSize(width, ratio){
  1118.         this.detailChart.setSize(width, ratio);
  1119.         this._width = width;
  1120.         this._heightWidthRatio = ratio;
  1121.     }
  1123.     /**
  1124.      * Creates the detailed chart zooming content from master chart
  1125.      * @param {string} xtitle X axis title
  1126.      * @param {string} ytitle Y axis title
  1127.      */
  1128.     _getDetailChart(srcData){
  1129.         let self = this;
  1130.         let kpj = FITS_HEADER.kelvinPerJansky();
  1131.         this.detailChart = Highcharts.chart('detail-container', {
  1132.             chart: {
  1133.                 type : "line",
  1134.                 animation : false,
  1135.                 width: self._width,
  1136.                 height: self._heightWidthRatio,
  1137.                 zoomType: 'x',
  1138.                 panning: true,
  1139.                 panKey: 'shift',
  1140.                 /*responsive: {  
  1141.                     rules: [{  
  1142.                       condition: {  
  1143.                         maxWidth: self._width,
  1144.                         maxHeight: self._heightWidthRatio
  1145.                       },  
  1146.                       chartOptions: {
  1147.                         xAxis: {
  1148.                             labels: {
  1149.                                 formatter: function () {
  1150.                                     return this.value.charAt(0);
  1151.                                 }
  1152.                             }
  1153.                         },
  1154.                         yAxis: {
  1155.                             labels: {
  1156.                                 align: 'left',
  1157.                                 x: 0,
  1158.                                 y: -5
  1159.                             },
  1160.                             title: {
  1161.                                 text: null
  1162.                             }
  1163.                         }
  1164.                     }
  1165.                     }]  
  1166.                 },*/
  1167.                 events : {
  1168.                     selection: function (event) {
  1169.                         if(self.isRefreshable){
  1170.                             var extremesObject = event.xAxis[0],
  1171.                             min = extremesObject.min,
  1172.                             max = extremesObject.max;
  1174.                             this.xAxis[0].setExtremes(min, max);
  1175.                             self.refreshMasterBands(min, max);
  1176.                             // spectral lines
  1177.                             self.detailChartLines();
  1178.                             self.activePlotter = self.detailLinePlotter;
  1179.                         }else{
  1180.                             alert("Display can not be refreshed. Velocity or redshift value has changed. Please press enter in this field to validate.");
  1181.                         }
  1183.                         return false;
  1184.                     },
  1185.                     pan : function(event){
  1186.                         self.refreshMasterBands(event.target.xAxis[0].min, event.target.xAxis[0].max);
  1187.                     }
  1188.                 },
  1189.             },
  1190.             credits: {
  1191.                 enabled: false
  1192.             },
  1193.             title: {
  1194.                 text: '',
  1196.             },
  1197.             tooltip: {
  1198.                 // displayed when the mouse if above the graph
  1199.                 formatter: function () {
  1200.                     // get channel number
  1201.                     let sliceIndex = self._computeSliceIndex(srcData, this.x);
  1202.                     let label = '( ' + this.x.toFixed(4) + ', ' + this.y.toFixed(4) + ') ';
  1203.                     return " Chan#" + sliceIndex + " " + label;
  1204.                 }
  1205.             },
  1206.             xAxis: {
  1207.                 gridLineWidth: 1,
  1208.                 type : "line",
  1209.                 lineColor: '#FFFFFF',
  1210.                 title: {
  1211.                     text: self._xtitle
  1212.                 },
  1213.                 crosshair: true,
  1214.                 reversed: false,
  1215.                 maxPadding : 0, 
  1216.                 endOnTick : false,
  1217.                 minPadding : 0, 
  1218.                 startOnTick : false
  1219.             },
  1220.             yAxis: {
  1221.                 lineColor: '#FFFFFF',
  1222.                 gridLineWidth: 1,
  1223.                 lineWidth: 1,
  1224.                 opposite: true,
  1225.                 title: {
  1226.                     text: self._ytitle
  1227.                 },
  1228.                 labels: {
  1229.                     // returns ticks to be displayed on Y axis
  1230.                     formatter: function () {
  1231.                         let label = '';
  1232.                         // value already in K
  1233.                         if (FITS_HEADER.isSpectrumInK()) {
  1234.                             label = 'K';
  1235.                         }
  1236.                         // result can be NaN if _bmin/_bmaj not available
  1237.                         // then nothing to display, else value is converted in K
  1238.                         else if (!isNaN(kpj)) {
  1239.                             label = " <br/> " + Number(this.value * kpj).toExponential(2) + " K";
  1240.                         }
  1242.                         return Number(this.value).toExponential(2) + label;
  1243.                     }
  1244.                 }
  1245.             },
  1246.             legend: {
  1247.                 enabled: false
  1248.             },
  1249.             exporting: {
  1250.                 menuItemDefinitions: {
  1251.                 },
  1252.                 buttons: {
  1253.                     contextButton: {
  1254.                         menuItems: ['downloadPNG']
  1255.                     }
  1256.                 }
  1257.             },
  1258.             plotOptions: {
  1259.                 series: {
  1260.                     cursor: 'pointer',
  1261.                     step: 'center',
  1262.                     color: Constants.PLOT_DEFAULT_COLOR,
  1263.                     lineWidth: Constants.PLOT_DEFAULT_LINE_WIDTH,
  1264.                     animation: {
  1265.                         duration: 0
  1266.                       }
  1267.                 },
  1268.                 marker: {
  1269.                     radius: 0
  1270.                 }
  1271.             },
  1272.             series: [{
  1273.                 marker: {
  1274.                     radius: 0
  1275.                 }
  1276.             }],
  1277.         });
  1278.     }
  1281.     /**
  1282.      * Shows the selected interval on the master graph. 
  1283.      * Area is coloured between [xAxis[0], xMin] and [xMax, xAxis[xAxis.length -1]]
  1284.      * @param {number} xMin minimum value seelcted by user on X axis
  1285.      * @param {number} xMax maximum value seelcted by user on X axis
  1286.      */
  1287.     refreshMasterBands(xMin, xMax){
  1288.         if(this.spectrumChart !== null){
  1289.             if(this._shiftMode === 'z'){
  1290.                 this._xSelectionMin = unshiftFrequencyByZ(xMin, this._spectroUI.getRedshift());
  1291.                 this._xSelectionMax = unshiftFrequencyByZ(xMax, this._spectroUI.getRedshift());
  1292.             }else if(this._shiftMode === 'v'){
  1293.                 this._xSelectionMin = unshiftFrequencyByV(xMin, this._spectroUI.getVelocity());
  1294.                 this._xSelectionMax = unshiftFrequencyByV(xMax, this._spectroUI.getVelocity());
  1295.             }
  1297.             // move the plot bands to reflect the new detail span
  1298.             this.spectrumChart.xAxis[0].removePlotBand('mask');
  1299.             this.spectrumChart.xAxis[0].addPlotBand({
  1300.                 id: 'mask',
  1301.                 from: xMin,
  1302.                 to: xMax,
  1303.                 color: 'rgba(51, 153, 255, 0.2)'
  1304.             });
  1305.         }
  1306.     }
  1308.     /**
  1309.      * Returns the xaxis of the chart and its datatype
  1310.      * @returns {Object} an object containing the xaxis and a datatype
  1311.      */
  1312.      getDetailedSpectrumChartXAxis() {
  1313.         return {
  1314.             axis: this.detailChart.xAxis[0],
  1315.             datatype: this._datatype
  1316.         };
  1317.     }
  1319.     _getAxes(){
  1320.         return [{
  1321.             axis: this.spectrumChart.xAxis[0],
  1322.             datatype: this._datatype
  1323.         },{
  1324.             axis: this.detailChart.xAxis[0],
  1325.             datatype: this._datatype
  1326.         }
  1327.         ]; 
  1328.     }
  1330.     masterChartLines(){ 
  1331.         // if not disabled
  1332.         if (this._spectroUI.getSelectedDatabase() !== "off") {
  1333.             if (this.linePlotter === null) {
  1334.                 this.linePlotter = new LinePlotter(this._spectroUI);
  1335.             }
  1336.     
  1337.             const graphs = this._getAxes();
  1339.             try {
  1340.                 this.linePlotter.loadAndPlotLines(this._xDetailMin,
  1341.                                                   this._xDetailMax,
  1342.                                                   graphs);
  1343.             } catch (e) {
  1344.                 console.log(e);
  1345.                 alert("Lines can not be displayed, please verify that redshift and/or velocity is defined.");
  1346.             }
  1347.         }
  1349.         //}
  1350.     }
  1352.     detailChartLines(){
  1353.         // spectral lines
  1354.         //if (this._spectroUI.isEnabled()) {
  1355.         if (this.detailLinePlotter === null) {
  1356.             this.detailLinePlotter = new LinePlotter(this._spectroUI);
  1357.         }
  1359.         const graphs = this._getAxes();
  1361.         try {
  1362.             this.detailLinePlotter.loadAndPlotLines(this.detailChart.xAxis[0].getExtremes().min,
  1363.             this.detailChart.xAxis[0].getExtremes().max,
  1364.             graphs);
  1365.         } catch (e) {
  1366.             console.log(e);
  1367.             alert("Lines can not be displayed, please verify that redshift and/or velocity is defined.");
  1368.         }
  1369.         //}
  1370.     }
  1372.     /**
  1373.       * Creates and returns a Highcharts chart
  1374.       * @param {Object} spectrumData Data plotted in graph
  1375.       * @param {string} xtitle x axis title
  1376.       * @param {string} ytitle  y axis title
  1377.       * @returns {chart} 
  1378.       */
  1379.     _getChart(srcData, spectrumData) {
  1380.         let self = this;
  1381.         let kpj = FITS_HEADER.kelvinPerJansky();
  1382.         let result = Highcharts.chart("master-container", {
  1383.             title: {
  1384.                 text: ''
  1385.             },
  1386.             chart: {
  1387.                 type: 'line',
  1388.                 width: self._width,
  1389.                 height: self._heightWidthRatio,
  1390.                 animation: false,
  1391.                 zoomType: 'x',
  1392.                 panning: true,
  1393.                 panKey: 'shift',
  1394.                 /*responsive: {  
  1395.                     rules: [{  
  1396.                       condition: {  
  1397.                         maxWidth: self._width,
  1398.                         maxHeight: self._heightWidthRatio
  1399.                       },  
  1400.                       chartOptions: {
  1401.                         xAxis: {
  1402.                             labels: {
  1403.                                 formatter: function () {
  1404.                                     return this.value.charAt(0);
  1405.                                 }
  1406.                             }
  1407.                         },
  1408.                         yAxis: {
  1409.                             labels: {
  1410.                                 align: 'left',
  1411.                                 x: 0,
  1412.                                 y: -5
  1413.                             },
  1414.                             title: {
  1415.                                 text: null
  1416.                             }
  1417.                         }
  1418.                     }
  1419.                     }]  
  1420.                 },*/
  1421.                 events: {
  1422.                     load: function (event) {
  1423.                         // graph is loaded
  1424.                         //result.series[0].setVisible(false);
  1425.                         let meta = {
  1426.                             yTitle: self._ytitle,
  1427.                             freqMin : this.xAxis[0].min,
  1428.                             freqMax : this.xAxis[0].max,
  1429.                             minVal : this.series[0].dataMin,
  1430.                             maxVal : this.series[0].dataMax,
  1431.                         }
  1432.                         let t = get1DSpectrumUpdateEvent(srcData, meta);
  1433.                         self._executeSpectrumLoadedListener(get1DSpectrumUpdateEvent(srcData, meta));
  1434.                         //DOMAccessor.showLoaderAction(true);
  1435.                         DOMAccessor.markLoadingDone();
  1436.                     },
  1437.                     selection: function (event) {
  1438.                         if(self.isRefreshable) {
  1439.                             var extremesObject = event.xAxis[0],
  1440.                             min = extremesObject.min,
  1441.                             max = extremesObject.max,
  1442.                             detailData = self._getIntervalData(spectrumData, min, max);
  1444.                             // show selected interval
  1445.                             self.refreshMasterBands(min ,max);
  1447.                             // set data on detailed chart and refresh x axis limits
  1448.                             self.detailChart.series[0].setData(detailData, true, false, false);
  1449.                             self.detailChart.xAxis[0].setExtremes(min, max);
  1451.                             // save global selection
  1452.                             self._detailData = detailData;
  1453.                             self._xDetailMin = min;
  1454.                             self._xDetailMax = max;
  1456.                             self._xSelectionMin = min;
  1457.                             self._xSelectionMax = max;
  1458.                             
  1459.                             // spectral lines
  1460.                             self.masterChartLines();
  1461.                             self.activePlotter = self.linePlotter;
  1462.                         }else{
  1463.                             alert("Display can not be refreshed. Velocity or redshift value has changed. Please press enter in this field to validate.");
  1464.                         }
  1466.                         return false;
  1467.                     }
  1468.                 }
  1470.             },
  1471.             boost: {
  1472.                 useGPUTranslations: true,
  1473.                 usePreAllocated: true
  1474.             },
  1475.             xAxis: {
  1476.                 gridLineWidth: 1,
  1477.                 lineColor: '#FFFFFF',
  1478.                 title: {
  1479.                     text: self._xtitle
  1480.                 },
  1481.                 crosshair: true,
  1482.                 reversed: false,
  1483.                 maxPadding : 0, 
  1484.                 endOnTick : false,
  1485.                 minPadding : 0, 
  1486.                 startOnTick : false
  1487.             },
  1488.             yAxis: {
  1489.                 lineColor: '#FFFFFF',
  1490.                 gridLineWidth: 1,
  1491.                 lineWidth: 1,
  1492.                 opposite: true,
  1493.                 title: {
  1494.                     text: self._ytitle
  1495.                 },
  1496.                 labels: {
  1497.                     // returns ticks to be displayed on Y axis
  1498.                     formatter: function () {
  1499.                         let label = '';
  1500.                         // value already in K
  1501.                         if (FITS_HEADER.isSpectrumInK()) {
  1502.                             label = 'K';
  1503.                         }
  1504.                         // result can be NaN if _bmin/_bmaj not available
  1505.                         // then nothing to display, else value is converted in K
  1506.                         else if (!isNaN(kpj)) {
  1507.                             label = " <br/> " + Number(this.value * kpj).toExponential(2) + " K";
  1508.                         }
  1510.                         return Number(this.value).toExponential(2) + label;
  1511.                     }
  1512.                 }
  1513.             },
  1514.             plotOptions: {
  1515.                 series: {
  1516.                     cursor: 'pointer',
  1517.                     step: 'center',
  1518.                     color: Constants.PLOT_DEFAULT_COLOR,
  1519.                     animation: {
  1520.                         duration: 0
  1521.                     },
  1522.                     lineWidth: Constants.PLOT_DEFAULT_LINE_WIDTH,
  1523.                 },
  1524.                 marker: {
  1525.                     radius: 0
  1526.                 }
  1527.             },
  1528.             tooltip: {
  1529.                 // displayed when the mouse if above the graph
  1530.                 formatter: function () {
  1531.                     // get channel number
  1532.                     let sliceIndex = self._computeSliceIndex(srcData, this.x);
  1533.                     let label = '( ' + this.x.toFixed(4) + ', ' + this.y.toFixed(4) + ') ';
  1534.                     if (!isNaN(kpj) && !FITS_HEADER.isSpectrumInK()) {
  1535.                         label = label + ", " + Number(this.y * kpj).toExponential(2) + " K";
  1536.                     }
  1537.                     return " Chan#" + sliceIndex + " " + label;
  1538.                 }
  1539.             },
  1540.             exporting: {
  1541.                 menuItemDefinitions: {
  1542.                     // Custom definition
  1543.                     downloadFits: {
  1544.                         onclick: function () {
  1545.                             window.open(URL_ROOT + dataPaths.spectrum, '_blank');
  1546.                         },
  1547.                         text: 'Download FITS file'
  1548.                     },
  1549.                     sendWithSamp: {
  1550.                         onclick: function (event) {
  1551.                             sAMPPublisher.sendSpectrumToAll(URL_ROOT + dataPaths.spectrum, "Artemix");
  1552.                             event.stopPropagation();
  1553.                         },
  1554.                         text: 'Send with SAMP'
  1555.                     },
  1556.                 },
  1557.                 buttons: {
  1558.                     contextButton: {
  1559.                         menuItems:  self.getExportMenuItems(yafitsTarget, false)
  1560.                     }
  1561.                 }
  1562.             },
  1563.             series: [{
  1564.                 // unlimited number of points when zooming
  1565.                 cropThreshold: Infinity,
  1566.                 showInLegend: false,
  1567.                 data: self.plottedData,
  1568.                 zIndex: 0,
  1569.                 marker: {
  1570.                     radius: 0
  1571.                 }
  1573.             },
  1574.             //series of frequency markers, must not be empty to create it, this point is hidden
  1575.             getPoint(0, 0, false)],
  1576.         }, function (chart) { 
  1577.             // this is called when spectrum is exported as an image
  1578.             // the detailed chart must not be recreated then
  1579.             //if(!self.initialized){
  1580.             self._getDetailChart(srcData);
  1581.             //}                
  1582.             //self.initialized = true;
  1583.         });
  1584.         return result;
  1585.     }
  1587.     /**
  1588.      * Refresh both charts display
  1589.      */
  1590.     refresh(mode = null){
  1591.         this._shiftMode = mode;
  1592.         // set data on detailed chart and refresh x axis limits
  1593.         this.plot(this._iRA, this._iDEC, ()=>{
  1594.             let xMin = this._xSelectionMin;
  1595.             let xMax = this._xSelectionMax;
  1596.             this._xDetailMin = xMin;
  1597.             this._xDetailMax = xMax;
  1598.             if(this._shiftMode === "z"){
  1599.                 xMin = shiftFrequencyByZ(this._xSelectionMin, this._spectroUI.getRedshift());
  1600.                 xMax = shiftFrequencyByZ(this._xSelectionMax, this._spectroUI.getRedshift());
  1601.             }else if(this._shiftMode === "v"){
  1602.                 xMin = shiftFrequencyByV(this._xSelectionMin, this._spectroUI.getVelocity());
  1603.                 xMax = shiftFrequencyByV(this._xSelectionMax, this._spectroUI.getVelocity());
  1604.             }
  1606.             this.refreshChartLegend();
  1607.             this.detailChart.series[0].setData(this.plottedData, true, false, false);            
  1608.             this.detailChart.xAxis[0].setExtremes(xMin, xMax);
  1609.             //this.detailChart.xAxis[0].setExtremes(this.detailChart.xAxis[0].getExtremes().min, this.detailChart.xAxis[0].getExtremes().max);
  1610.             
  1611.             if (this.linePlotter !== null) {
  1612.                 this.linePlotter.setTargets(this._getAxes());
  1613.                 this.masterChartLines();
  1614.                 this.detailChartLines();
  1615.             }
  1616.             this.detailChart.xAxis[0].axisTitle.attr({
  1617.                 text: this._xtitle
  1618.             });
  1619.         });        
  1620.     }
  1622.     /**
  1623.      * Calls the getSpectrum function of the server to get the spectrum data and plot them
  1624.      * 
  1625.      * getSpectrum parameters are : relFITSFilePath, iRA, iDEC, iFREQ0, iFREQ1
  1626.      * 
  1627.      * Here we want data for all frequencies so iFREQ0 = 0 and iFREQ1 = NAXIS3 - 1
  1628.      * if iRA or iDEC are undefined, we use a centered value NAXIS1 / 2 and NAXIS2 / 2 respectively
  1629.      * 
  1630.      * @param {number} iRA 
  1631.      * @param {number} iDEC 
  1632.      * @param {callbackFucntion} cb a function called when data have been returned from server
  1633.      */
  1634.      plot(iRA, iDEC, cb) {
  1635.         let self = this;
  1636.         this._iRA = iRA;
  1637.         this._iDEC = iDEC;
  1638.         if (typeof iRA === 'undefined') {
  1639.             iRA = Math.floor(FITS_HEADER.naxis1 / 2);
  1640.         }
  1641.         if (typeof iDEC === 'undefined') {
  1642.             iDEC = Math.floor(FITS_HEADER.naxis2 / 2);
  1643.         }
  1645.         this.refreshChartLegend();
  1647.         DOMAccessor.showLoaderAction(true);
  1648.         let qp = new ServerApi();
  1649.         qp.getSingleSpectrum(iRA, iDEC, this._relFITSFilePath,(resp)=>{
  1650.             let content = resp;
  1651.             let test = JSON.stringify(resp);
  1652.             let data;
  1653.             // fix for cubes containing NaN
  1654.             if(test.includes("NaN")){
  1655.                 let newResp = test.replace(/\bNaN\b/g, "null");
  1656.                 content = JSON.parse(newResp);
  1657.                 //for some reason the data element is still
  1658.                 //a string after data have been parsed above
  1659.                 data = JSON.parse(content.data);
  1660.             }else{
  1661.                 data = resp.data;
  1662.             }
  1663.             let plotData = getXAxisConfiguration();
  1664.             // in a 1D spectra, getXData will always return data sorted in reverse order
  1665.             plotData.x = self._getXData(data["result"].length).reverse();
  1666.             plotData.xaxis = "x";
  1667.             plotData.y = self._getYData(data["result"]).reverse();
  1668.             self._masterYData = plotData.y;
  1669.             let spectrumData = [];
  1670.             for (let i = 0; i < plotData.x.length; i++) {
  1671.                 spectrumData.push([plotData.x[i], plotData.y[i]]);
  1672.             }
  1673.     
  1674.             this.plottedData = spectrumData;
  1676.             self.spectrumChart = self._getChart(plotData, spectrumData);
  1677.             if(self._xSelectionMin !== null){
  1678.                 let xMin = this._xSelectionMin;
  1679.                 let xMax= this._xSelectionMax;
  1680.                 if(this._shiftMode === "z"){                    
  1681.                     xMin = shiftFrequencyByZ(this._xSelectionMin, this._spectroUI.getRedshift());
  1682.                     xMax = shiftFrequencyByZ(this._xSelectionMax, this._spectroUI.getRedshift());
  1683.                 }else if(this._shiftMode === "v"){
  1684.                     xMin = shiftFrequencyByV(this._xSelectionMin, this._spectroUI.getVelocity());
  1685.                     xMax = shiftFrequencyByV(this._xSelectionMax, this._spectroUI.getVelocity());
  1686.                 }
  1687.                 self.refreshMasterBands(xMin, xMax);
  1688.             }            
  1690.             self._createFitsFile(iRA, iDEC);
  1691.             if(testMode && self._isInit){
  1692.                 self._isInit = false;
  1693.             }
  1695.             // callback function called at the end of loading process
  1696.             // typical use is restore previous graph limits
  1697.             if (cb !== undefined) {
  1698.                 cb();
  1699.             }
  1700.             DOMAccessor.showLoaderAction(false);
  1701.         });
  1702.     };
  1703. }
  1706. /**
  1707.  * A class displaying an averaged spectrum, using the Highcharts library
  1708.  * Initial interval selection is defined in _getInitialSelectionRange
  1709.  * 
  1710.  * @property {Object} summedPixelsSpectrumChart a highchart chart object
  1711.  * @property {LinePlotter} linePlotter an object drawing spectral lines on the chart
  1712.  */
  1713. class SummedPixelsSpectrumViewer extends SpectrumViewer {
  1714.     /**
  1715.      * 
  1716.      * @param {*} paths 
  1717.      * @param {*} containerId 
  1718.      * @param {*} viewLinker 
  1719.      */
  1720.     constructor(paths, containerId, width, heightWidthRatio, spectroUI) {
  1721.         super(paths, containerId, width, heightWidthRatio, spectroUI);
  1722.         this._iRA0 = null;
  1723.         this._iRA1 = null;
  1724.         this._iDEC0 = null;
  1725.         this._iDEC1 = null;
  1727.         this._toptitle_unit = "";
  1728.         this._flux_unit = "";
  1729.         this._averageSpectrum = null;        
  1731.         this._vmin = null;
  1732.         this._vmax = null;
  1734.         this._isInit = true;
  1736.         // Interval of values selected by default of the graph
  1737.         // Those are the indexes of the values to select not values themselves
  1738.         // If they are not null they will bypass the values coming from the selection event
  1739.         this.defaultIndexMax = null;
  1741.         const freqs = this._getInitialSelectionRange();
  1742.         this.defaultIndexMin = freqs[0];
  1743.         this.defaultIndexMax = freqs[1];
  1745.         this._summedData = {
  1746.             x: [],
  1747.         };
  1749.         this._datatype = "velocity";
  1751.         // surface under the chart in area selected by user, Jy/km/s
  1752.         //this._selectedSurface = 0;
  1753.         this.refreshChartLegend();
  1754.     }
  1756.     get vmin() {
  1757.         return this._vmin;
  1758.     }
  1760.     get vmax() {
  1761.         return this._vmax;
  1762.     }
  1764.     set vmin(vmin) {
  1765.         this._vmin = vmin;
  1766.     }
  1768.     set vmax(vmax) {
  1769.         this._vmax = vmax;
  1770.     }
  1772.     get summedData() {
  1773.         return this._summedData;
  1774.     }
  1777.     /**
  1778.      * Initial frequency range selected on the spectrum
  1779.      * @returns array
  1780.      */
  1781.     _getInitialSelectionRange() {
  1782.         const naxis3Index = FITS_HEADER.naxis3 -1;
  1783.         const iFREQ0 = Math.round(naxis3Index / 2 - naxis3Index  / 8);
  1784.         const iFREQ1 = Math.round(naxis3Index / 2 + naxis3Index / 8);
  1785.         /*const iFREQ0 = 0;
  1786.         const iFREQ1 = naxis3Index;*/
  1787.         return [iFREQ0, iFREQ1];
  1788.     }
  1791.     _showCoordinates(coords){
  1792.         DOMAccessor.getSummedChartCoordinates().innerText = "@Box xmin=" + Math.round(coords[0]) +
  1793.                                                             " xmax=" + Math.round(coords[1]) +
  1794.                                                             " ymin=" + Math.round(coords[2]) +
  1795.                                                             " ymax=" + Math.round(coords[3]);
  1796.     }
  1798.     /**
  1799.      * Sets title of spectrum, x and y axis
  1800.      * 
  1801.      * Title of the spectrum depends on its type (Sitelle, Casa, Gildas, Muse)
  1802.      */
  1803.     refreshChartLegend() {
  1804.         // prefix and suffix for GILDAS and ALMA title 
  1805.         this._legendObject.defineSummedSpectrumLegend(this);
  1806.         if(this.spectrumChart !== null){
  1807.             this.spectrumChart.xAxis[0].axisTitle.attr({
  1808.                 text: this._xtitle
  1809.             });
  1810.             
  1811.         }
  1812.     }
  1814.     /**
  1815.      * Returns the title displayed above the graph
  1816.      * @param {number} value integral of selected interval on the graph (float)
  1817.      * @param {string} unit  unit of integral value
  1818.      * @param {number} vmin minimum selected velocity value (float)
  1819.      * @param {number} vmax maximum selected velocity value (float)
  1820.      * @param {number} imin minimum selected channel index (int)
  1821.      * @param {number} imax maximum selected channel index (int)
  1822.      * @returns {string} 
  1823.      */
  1824.     _getTopTitle(value, unit, vmin, vmax, imin, imax) {
  1825.         // do not display unit (Jy.km/s) if bmin/bmax are not defined
  1826.         // because it has no meaning in that case
  1827.         let result_unit = "";
  1828.         if (FITS_HEADER.bmin !== undefined) {
  1829.             result_unit = unit;
  1830.         }
  1832.         return '<span id="selected-surface">' + value.toExponential(2) + "</span> " +
  1833.             result_unit + ", vmin=" +
  1834.             vmin.toFixed(2) + " " + "km/s" + "  , vmax=" +
  1835.             vmax.toFixed(2) + " " + "km/s, imin=" + imin + ", imax=" + imax;
  1836.     }
  1838.     /**
  1839.      * Sets the title diplayed above the graph
  1840.      * @param {string} title 
  1841.      */
  1842.     setChartTitle(title) {
  1843.         DOMAccessor.getAverageSpectrumTitle().innerHTML = title;
  1844.     }
  1846.     refresh(){
  1847.         this.plot(this._iRA0, this._iRA1, this._iDEC0, this._iDEC1, undefined);
  1848.         this.refreshChartLegend();
  1849.     }
  1851.     /**
  1852.      * Updates the displayed averaged slice image, with respect to selected interval in graph
  1853.      * Note : this function should be removed from this class and place in ViewLinker
  1854.      * 
  1855.      * @param {number} min minimum selected value (float)
  1856.      * @param {number} max maximum selected value (float)
  1857.      */
  1858.     _updateSummedSlices(min, max) {
  1859.         if (this._viewLinker !== null) {
  1860.             const imin = Math.round((min - this._summedData.x[0]) / (this._summedData.x[1] - this._summedData.x[0]));
  1861.             const imax = Math.round((max - this._summedData.x[0]) / (this._summedData.x[1] - this._summedData.x[0]));
  1862.             if (FITS_HEADER.cunit3 in Constants.UNIT_FACTOR) {
  1863.                 switch (FITS_HEADER.ctype3) {
  1864.                     case 'FREQ':
  1865.                         if (FITS_HEADER.cdelt3 > 0) {
  1866.                             this._viewLinker.getAndPlotSummedSlices(this._summedData.x.length - 1 - imax, this._summedData.x.length - 1 - imin);
  1867.                         } else {
  1868.                             this._viewLinker.getAndPlotSummedSlices(imin, imax);
  1869.                         }
  1870.                         break;
  1871.                     case 'VRAD':
  1872.                         if (FITS_HEADER.cdelt3 > 0) {
  1873.                             this._viewLinker.getAndPlotSummedSlices(imin, imax);
  1874.                         } else {
  1875.                             this._viewLinker.getAndPlotSummedSlices(this._summedData.x.length - 1 - imax, this._summedData.x.length - 1 - imin);
  1876.                         }
  1877.                         break;
  1878.                     //equivalent to VRAD
  1879.                     case 'VELO-LSR':
  1880.                         if (FITS_HEADER.cdelt3 > 0) {
  1881.                             this._viewLinker.getAndPlotSummedSlices(imin, imax);
  1882.                         } else {
  1883.                             this._viewLinker.getAndPlotSummedSlices(this._summedData.x.length - 1 - imax, this._summedData.x.length - 1 - imin);
  1884.                         }
  1885.                         break;
  1886.                     case 'WAVE':
  1887.                         break
  1888.                     case 'WAVN':
  1889.                         break
  1890.                     case 'AWAV':
  1891.                         if (FITS_HEADER.cdelt3 > 0) {
  1892.                             this._viewLinker.getAndPlotSummedSlices(imin, imax);
  1893.                         } else {
  1894.                             this._viewLinker.getAndPlotSummedSlices(this._summedData.x.length - 1 - imax, this._summedData.x.length - 1 - imin);
  1895.                         }
  1896.                         break;
  1897.                     default:
  1898.                         alert('Unknown value for ctype3');
  1899.                         console.log("This should not happen");
  1900.                 }
  1901.             }
  1902.         }
  1904.     }
  1906.     /**
  1907.      * Returns a Highchart chart
  1908.      * @returns {chart}
  1909.      */
  1910.     _getChart() {
  1911.         let self = this;
  1912.         let target = document.getElementById(this._containerId);
  1913.         return Highcharts.chart(target, {
  1914.             title: {
  1915.                 text: ''
  1916.             },
  1917.             chart: {
  1918.                 type: 'line',
  1919.                 animation: false,
  1920.                 width: self._width,
  1921.                 height: self._heightWidthRatio,
  1922.                 zoomType: 'x',
  1923.                 panning: true,
  1924.                 panKey: 'shift',
  1925.                 //marginLeft: 0, // Set the left margin to 0
  1926.                // marginRight: 0, // Set the right margin to 0
  1927.                 responsive: {  
  1928.                     rules: [{  
  1929.                       condition: {  
  1930.                         maxWidth: self._width,
  1931.                         maxHeight: self._heightWidthRatio
  1932.                       },  
  1933.                       chartOptions: {
  1934.                         xAxis: {
  1935.                             labels: {
  1936.                                 formatter: function () {
  1937.                                     return this.value.charAt(0);
  1938.                                 }
  1939.                             }
  1940.                         },
  1941.                         yAxis: {
  1942.                             labels: {
  1943.                                 align: 'left',
  1944.                                 x: 0,
  1945.                                 y: -5
  1946.                             },
  1947.                             title: {
  1948.                                 text: null
  1949.                             }
  1950.                         }
  1951.                     }
  1952.                     }]  
  1953.                 },
  1954.                 events: {
  1955.                     click: function (event) {
  1956.                         console.log("A click occurred on the spectrum : enter");
  1957.                     },
  1958.                     redraw: function(event){
  1959.                         // make sure chart title are always up to date
  1960.                         self.refreshChartLegend();
  1961.                     },
  1962.                     selection: function (event) {
  1963.                         if(self._viewLinker.isRefreshable){                          
  1964.                             let velMin, velMax = null;
  1965.                             // if true, refresh displayed summmed slice after the selection
  1966.                             let refreshSlice = true;
  1967.    
  1968.                             // if default values exists for the interval use them then they are reseted
  1969.                             if (self.defaultIndexMin !== null && self.defaultIndexMax !== null) {
  1970.                                 velMin = self.spectrumChart.series[0].xData[self.defaultIndexMin];
  1971.                                 velMax = self.spectrumChart.series[0].xData[self.defaultIndexMax];
  1972.                                 // slice is not refreshed
  1973.                                 refreshSlice = false;
  1974.                                 self.defaultIndexMin = null;
  1975.                                 self.defaultIndexMax = null;
  1976.                             }
  1977.                             // values selected by the user
  1978.                             else {
  1979.                                 velMin = event.xAxis[0].min;
  1980.                                 velMax = event.xAxis[0].max;
  1981.                             }
  1982.     
  1983.                             // overplot selected area  in blue                            
  1984.                             this.xAxis[0].update({
  1985.                                 plotBands: [{
  1986.                                     from: velMin,
  1987.                                     to: velMax,
  1988.                                     color: 'rgba(68, 170, 213, .2)'
  1989.                                 }]
  1990.                             });
  1991.                             
  1992.                             self._vmin = velMin;
  1993.                             self._vmax = velMax;
  1994.     
  1995.                             //toggle-lines-search
  1996.                             if (self._viewLinker !== null) {
  1997.                                 self._spectroUI.hideEnergyGroupLines();
  1998.                                 if (self.linePlotter === null) {
  1999.                                     self.linePlotter = new LinePlotter(self._spectroUI);
  2000.                                 }
  2001.                             }
  2002.     
  2003.                             // refreshes summed slice display according to selection
  2004.                             if(refreshSlice === true){
  2005.                                 self._updateSummedSlices(velMin, velMax);
  2006.                             }
  2007.         
  2008.                             let ivalues = [self._getCalculatedIndex(velMin), self._getCalculatedIndex(velMax)].sort();
  2009.                             const imin = ivalues[0];
  2010.                             const imax = ivalues[1];
  2011.     
  2012.                             let selectedSurface = 0;
  2013.                             if (self._viewLinker !== null) {
  2014.                                 selectedSurface = self._getSelectedSpectrumValue(self._averageSpectrum, imin, imax);
  2015.                                 self._spectroUI.setSelectedSurface(selectedSurface);    
  2016.                             }
  2017.     
  2018.                             self.setChartTitle(self._getTopTitle(selectedSurface, self._toptitle_unit,
  2019.                                 self._vmin, self._vmax, imin, imax));
  2020.     
  2021.                             let factor = 1;
  2022.                             if(self._spectroUI.getVelocity("m/s") === 0 || self._spectroUI.getVelocity("m/s")  === undefined ){
  2023.                                 factor = 1 + self._spectroUI.getRedshift();
  2024.                             }
  2025.                             const obsFreqMin = v2f(velMax * 10 ** 3, FITS_HEADER.restfreq * factor, self._spectroUI.getVelocity("m/s")) / 10 ** 9;
  2026.                             const obsFreqMax = v2f(velMin * 10 ** 3, FITS_HEADER.restfreq * factor,  self._spectroUI.getVelocity("m/s")) / 10 ** 9;
  2028.     
  2029.                             if (self._viewLinker !== null && self._viewLinker.spectroUI.getSelectedDatabase() !== "off") {
  2030.                                 const graphs = [self._viewLinker.spectrumViewer.getSpectrumChartXAxis(),
  2031.                                 self.getSpectrumChartXAxis()
  2032.                                 ];
  2033.     
  2034.                                 self._viewLinker.updateSummedSlicesFreqIndexes(imin, imax);
  2035.     
  2036.                                 if((self._isInit && FITS_HEADER.velolsr != undefined) || (!self._isInit)){
  2037.                                     try {
  2038.                                         self.linePlotter.loadAndPlotLines(obsFreqMin, 
  2039.                                                                           obsFreqMax, 
  2040.                                                                         graphs);
  2041.                                     } catch (e) {
  2042.                                         console.log(e);
  2043.                                         alert("Lines can not be displayed, please verify that redshift and/or velocity is defined.");
  2044.                                     }
  2045.                                 }
  2046.     
  2047.                             }
  2048.     
  2049.                             if(testMode && self._isInit){
  2050.                                 let meta = {
  2051.                                     iFreqMin : imin,
  2052.                                     iFreqMax : imax,
  2053.                                     freqMin: obsFreqMin,
  2054.                                     freqMax: obsFreqMax, 
  2055.                                     velMin : velMin,
  2056.                                     velMax : velMax
  2057.                                 };
  2058.                                 //this._meta = meta;
  2059.                                 self._executeSpectrumLoadedListener(
  2060.                                     get3DSpectrumUpdateEvent("bounds",self._summedData, meta));
  2061.                                 
  2062.                                 DOMAccessor.markLoadingDone();
  2063.                             }
  2064.                             self._isInit = false;
  2065.                             
  2066.                         }else{
  2067.                             alert("Display can not be refreshed. Velocity or redshift value has changed. Please press enter in this field to validate.");
  2068.                         }
  2069.                         return false;
  2070.                     }
  2071.                 }
  2073.             },
  2074.             boost: {
  2075.                 useGPUTranslations: true
  2076.             },
  2077.             xAxis: {
  2078.                 title: {
  2079.                     text: self._xtitle
  2080.                 },
  2081.                 crosshair: true,
  2082.                 reversed: false,
  2083.                 gridLineWidth: 1,
  2084.                 lineColor: '#FFFFFF',
  2085.                 maxPadding : 0, 
  2086.                 endOnTick : false,
  2087.                 minPadding : 0, 
  2088.                 startOnTick : false
  2089.             },
  2090.             yAxis: {
  2091.                 gridLineWidth: 1,
  2092.                 lineColor: '#FFFFFF',
  2093.                 lineWidth: 1,
  2094.                 opposite: true,
  2095.                 title: {
  2096.                     text: self._ytitle
  2097.                 },
  2098.                 labels:{
  2099.                     formatter: function(){
  2100.                         return Number(this.value).toExponential(2);
  2101.                     }
  2102.                 }
  2103.             },
  2104.             plotOptions: {
  2105.                 series: {
  2106.                     step: 'center',
  2107.                     zoneAxis: 'x',
  2108.                     animation: {
  2109.                         duration: 0
  2110.                     },
  2111.                     lineWidth: Constants.PLOT_DEFAULT_LINE_WIDTH,
  2112.                     events: {
  2113.                         click: function (event) {
  2114.                             console.log("A click occurred on the LINE : enter");
  2115.                         }
  2116.                     }
  2117.                 },
  2118.                 marker: {
  2119.                     radius: 0
  2120.                 }
  2121.             },
  2122.             exporting: {
  2123.                 menuItemDefinitions: {
  2124.                     // Custom definition
  2125.                     downloadFits: {
  2126.                         onclick: function () {
  2127.                             window.open(URL_ROOT + dataPaths.averageSpectrum, '_blank');
  2128.                         },
  2129.                         text: 'Download FITS file'
  2130.                     },
  2131.                     sendWithSamp: {
  2132.                         onclick: function (event) {
  2133.                             sAMPPublisher.sendSpectrumToAll(URL_ROOT + dataPaths.averageSpectrum, "Artemix");
  2134.                             event.stopPropagation();
  2135.                         },
  2136.                         text: 'Send with SAMP'
  2137.                     },
  2138.                     sendTo1D: {
  2139.                         onclick: function (event) {
  2140.                             window.open(URL_3D_TO_1D + dataPaths.averageSpectrum, '_blank');
  2141.                         },
  2142.                         text: 'Open in 1D viewer'
  2143.                     }  
  2144.                 },
  2145.                 buttons: {
  2146.                     contextButton: {
  2147.                         menuItems:  self.getExportMenuItems(yafitsTarget, false)
  2148.                     }
  2149.                 }
  2150.             },
  2151.             tooltip: {
  2152.                 formatter: function () {
  2153.                     const index = self._getCalculatedIndex(this.x);
  2154.                     return 'Chan# ' + index + ' ( ' + this.x.toFixed(4) + ', ' + this.y.toFixed(4) + ')';
  2155.                 }
  2156.             },
  2157.             series: [{
  2158.                 color: Constants.PLOT_DEFAULT_COLOR
  2159.             }]
  2160.         });
  2161.     }
  2163.     /**
  2164.      * Returns x axis coordinates. They are calculated from center position and step between each value (CDELT3)
  2165.      * The formula changes according to the type of data on x axis (CTYPE3)
  2166.      *
  2167.      * @param {number} rlen number of points on x axis (int)
  2168.      * @returns {array} an array of x values
  2169.      */
  2170.     _getXData(rlen) {
  2171.         return this._xDataComputer.computeSummedSpectrum(rlen, this._spectroUI.getVelocity("m/s"));
  2172.     }
  2174.     /**
  2175.      * Returns an array of ydata from the data passed in parameter.
  2176.      * The parameter array must be reverted if CDELT3 > 0 in case of a frequency
  2177.      * and if CDELT3 < 0 in case of a radial velocity
  2178.      * It is rescaled in case of Sitelle data.
  2179.      * It is returned unchanged in any other case
  2180.      *
  2181.      * @param {array} averageSpectrum 
  2182.      * @returns {array}
  2183.      */
  2184.     _getYData(averageSpectrum) {
  2185.         return this._yDataComputer.computeSummedSpectrum(averageSpectrum, this._spectrumUnit);        
  2186.     }
  2188.     /**
  2189.      * Calls the getAverageSpectrum function of the server to get the spectrum data and plot them
  2190.      * 
  2191.      * getAverageSpectrum parameters are : relFITSFilePath, iRA0, iDEC0, iRA1, iDEC1
  2192.      * 
  2193.      * 
  2194.      * @param {number} iRA0     minimum selected index value on RA axis (int)
  2195.      * @param {number} iDEC0    minimum selected index value on DEC axis (int)
  2196.      * @param {number} iRA1     maximum selected index value on RA axis (int)
  2197.      * @param {number} iDEC1    maximum selected index value on DEC axis (int)
  2198.      */
  2199.     plot(iRA0, iRA1, iDEC0, iDEC1, callback) {
  2200.         this._iRA0 = iRA0;
  2201.         this._iRA1 = iRA1;
  2202.         this._iDEC0 = iDEC0;
  2203.         this._iDEC1 = iDEC1;
  2205.         if(this.spectrumChart !== null){
  2206.             this._xMinZoom = this.spectrumChart.xAxis[0].getExtremes().min;
  2207.             this._xMaxZoom = this.spectrumChart.xAxis[0].getExtremes().max;
  2208.         }
  2210.         this.spectrumChart = this._getChart();
  2211.         let self = this;
  2212.         let queryApi = new ServerApi(); 
  2213.         queryApi.getSummedSpectrum(iRA0, iRA1, iDEC0, iDEC1, self._relFITSFilePath, (resp)=>{
  2214.             let x = JSON.parse(resp);
  2215.             if (x.result.averageSpectrum == null) {
  2216.                 alert("No data for average spectrum");
  2217.                 throw ("No data for average spectrum");
  2218.             }
  2220.             // Let's inform the SAMP hub
  2221.             if ("absFITSFilePath" in x["result"]) {
  2222.                 dataPaths.averageSpectrum = x["result"]["absFITSFilePath"];
  2223.             } else {
  2224.                 console.log("We should have found a key 'absFITSFilePath'");
  2225.             }
  2226.             let averageSpectrum = x["result"]["averageSpectrum"];
  2228.             // Draw x-axis in Velocities (plot on bottom right)
  2229.             self._summedData.x = self._getXData(averageSpectrum.length);
  2232.             // only at initialization
  2233.             if (self._vmin === null && self._vmax === null) {
  2234.                 self._vmin = self._summedData.x[0];
  2235.                 self._vmax = self._summedData.x[self._summedData.x.length - 1];
  2236.             }
  2238.             // box coordinates above chart
  2239.             self._showCoordinates([iRA0, iRA1, iDEC0, iDEC1]);
  2241.             // change name of function
  2242.             averageSpectrum = self._getYData(averageSpectrum);
  2243.             self._summedData.y = averageSpectrum;
  2245.             let chartData = [];
  2246.             for (let i = 0; i < self._summedData.x.length; i++) {
  2247.                 chartData.push([self._summedData.x[i], self._summedData.y[i]]);
  2248.             }
  2250.             self._averageSpectrum = averageSpectrum;
  2251.             self.spectrumChart.series[0].update({
  2252.                 name: '',
  2253.                 // unlimited number of points when zooming
  2254.                 cropThreshold: Infinity,
  2255.                 showInLegend: false,
  2256.                 marker: {
  2257.                     radius: 0
  2258.                 },
  2259.                 data: chartData,
  2260.             });
  2262.             /**
  2263.             Add a series where Y=0 in the given chart
  2264.             */
  2265.             let addYAxisSeries = function (chart) {
  2266.                 chart.addSeries({
  2267.                     lineWidth: 1,
  2268.                     enableMouseTracking: false,
  2269.                     showInLegend: false,
  2270.                     color: "#000000",
  2271.                     marker: {
  2272.                         enabled: false
  2273.                     },
  2274.                     data: [
  2275.                         [chart.xAxis[0].dataMin, 0],
  2276.                         [chart.xAxis[0].dataMax, 0]
  2277.                     ]
  2278.                 });
  2279.             }
  2281.             addYAxisSeries(self.spectrumChart);
  2283.             if (self._viewLinker !== null) {
  2284.                 addYAxisSeries(self._viewLinker.spectrumViewer.spectrumChart);
  2286.                 if (self._viewLinker.summedPixelsSpectrumViewer.linePlotter !== null && self._viewLinker.spectroUI.getSelectedDatabase() !== "off") {
  2287.                     self.linePlotter.loadAndPlotLines(self.linePlotter.obsFreqMin,
  2288.                         self.linePlotter.obsFreqMax,
  2289.                         [self.getSpectrumChartXAxis(), self._viewLinker.spectrumViewer.getSpectrumChartXAxis()]);
  2290.                 }
  2291.             }
  2293.             if(self._xMinZoom !== null && self._xMaxZoom !== null){
  2294.                 self.spectrumChart.xAxis[0].setExtremes(self._xMinZoom, self._xMaxZoom);
  2295.             }             
  2297.             if(testMode){
  2298.                 let meta = {
  2299.                     iRA : Math.min(iRA0, iRA1), 
  2300.                     iDEC : Math.max(iDEC0, iDEC1), 
  2301.                     ytitle : self._ytitle, 
  2302.                     xbox : Math.abs(iRA1-iRA0), 
  2303.                     ybox : Math.abs(iDEC1-iDEC0),
  2304.                     lowerIntegratedValues : {
  2305.                         flux : {value: self._getSelectedSpectrumValue(self._averageSpectrum, 0, self._summedData.x.length -1), unit : self._toptitle_unit},
  2306.                         vmin : {value : self._vmin, unit : "km/s"},
  2307.                         vmax : {value : self._vmax, unit : "km/s"},
  2308.                         imin : 0,
  2309.                         imax : self._summedData.x.length -1,
  2310.                     }
  2311.                 };
  2312.                 //this._meta = meta;
  2313.                 self._executeSpectrumLoadedListener(get3DSpectrumUpdateEvent("summed",self._summedData, meta));
  2314.             }
  2316.             if (callback !== undefined)
  2317.                 callback();
  2318.         })
  2320.     }
  2322.     /**
  2323.      * Replot the spectrum according to the received parameters
  2324.      * The plot is done through a call to this.plot()
  2325.      * 
  2326.      * The displayed spectral lines will be updated if they exist
  2327.      * 
  2328.      * @param {number} xMin start x position (float)
  2329.      * @param {number} xMax end x position (float)
  2330.      * @param {number} yMin start y position (float)
  2331.      * @param {number} yMax end y position (float)
  2332.      */
  2333.      replot(xMin, xMax, yMin, yMax) {
  2334.         // replot the spectrum and keep the selection interval if it exists
  2335.         this.plot(xMin, xMax, yMin, yMax, () => {
  2336.             if (this.spectrumChart !== null && this._vmin !== null && this._vmax !== null) {
  2337.                 fireChartSelectionEvent(this.spectrumChart, this._vmin, this._vmax);
  2338.             }            
  2339.         });
  2340.     }
  2342.     /**
  2343.      * Called when NED table object triggers an event, refreshes graph title
  2344.      * 
  2345.      * @param {Event} event event that triggered the call
  2346.      */
  2347.     sourceTableCall(event) {
  2348.         this.refreshChartLegend();
  2349.     }
  2350. }
  2352. /**
  2353.  * Initializes and return the spectrum
  2354.  * @param {*} spectroUI 
  2355.  * @param {*} sourceTable 
  2356.  * @param {*} withSAMP true if SAMP is enabled
  2357.  * @returns 
  2358.  */
  2359. function getSingleSpectrum1D(spectroUI, sourceTable, withSAMP) {
  2360.     let spectrumViewer = new SingleSpectrumViewer1D(dataPaths, 'spectrum', 
  2361.                                                     Constants.PLOT_WIDTH_1D_LARGE, 
  2362.                                                     Constants.PLOT_HEIGHT_RATIO_1D_LARGE, 
  2363.                                                     spectroUI);
  2364.     //spectrumViewer.setSpectroUI(spectroUI);
  2365.     sourceTable.addListener(spectrumViewer);
  2366.     spectrumViewer.plot(Math.floor(FITS_HEADER.naxis1 / 2), Math.floor(FITS_HEADER.naxis2 / 2), ()=>{
  2367.         // select all the spectrum by default is velolsr is defined
  2368.         // this plot all the lines
  2369.         //if(FITS_HEADER.velolsr !== undefined){
  2370.         let icenter = Math.round(spectrumViewer.spectrumChart.xAxis[0].series[0].processedXData.length/2);
  2371.         let imin = icenter - Math.round(FITS_HEADER.naxis3 / 8);
  2372.         let imax = icenter + Math.round(FITS_HEADER.naxis3 / 8);
  2374.         fireChartSelectionEvent(spectrumViewer.spectrumChart, 
  2375.             spectrumViewer.spectrumChart.xAxis[0].series[0].processedXData[imin], 
  2376.             spectrumViewer.spectrumChart.xAxis[0].series[0].processedXData[imax] );
  2377.         //}
  2378.     });
  2379.     
  2380.     if (withSAMP) {
  2381.         // all implement setSampButtonVisible
  2382.         setOnHubAvailability([spectrumViewer]);
  2383.     }
  2384.     
  2385.     return spectrumViewer;
  2386. }
  2389. export{
  2390.     fireChartSelectionEvent, SingleSpectrumViewer, 
  2391.     SingleSpectrumViewer1D, SummedPixelsSpectrumViewer,
  2392.     getSingleSpectrum1D
  2393. }