to be continued: run aladin lite inside a headless browser

package.json

@@ -43,7 +43,8 @@
     "test:unit": "vitest run"
   },
   "devDependencies": {
-    "happy-dom": "^8.9.0",
+    "jsdom": "^22.1.0",
+    "node-fetch": "^3.3.2",
     "npm": "^9.8.1",
     "typescript": "^5.0.4",
     "vite": "^4.3.8",
@@ -52,7 +53,10 @@
     "vite-plugin-top-level-await": "^1.3.1",
     "vite-plugin-wasm": "^3.2.2",
     "vite-plugin-wasm-pack": "^0.1.12",
-    "vitest": "^0.32.2"
+    "vitest": "^0.32.2",
+    "vitest-canvas-mock": "^0.3.3",
+    "vitest-fetch-mock": "^0.2.2",
+    "vitest-webgl-canvas-mock": "^1.1.0"
   },
   "dependencies": {
     "autocompleter": "^6.1.3",

release-notes.txt

@@ -1,3 +1,9 @@
+unreleased
+- new method aladin.getFrame() that returns the name of the current coordinate system
+- `getViewWCS` now adapts to the `cooFrame` and the `projection`
+- `getFov` is no longer capped at 180°
+- bugfix `setProjecion` now also updates for 'PAR' and 'SFL' projections
+
 2020-08
 - polyline improvements (by @imbasimba)
 

src/js/A.js

@@ -296,8 +296,12 @@ A.init = (async () => {
     const isWebGL2Supported = document
         .createElement('canvas')
         .getContext('webgl2');
+    console.log('webgl2 support:', isWebGL2Supported, document
+    .createElement('canvas')
+    .getContext('webgl'))
 
     await init();
+
     // Check for webgl2 support
     if (isWebGL2Supported) {
         Aladin.wasmLibs.core = module;
@@ -306,6 +310,8 @@ A.init = (async () => {
         // According to caniuse, https://caniuse.com/webgl2, webgl2 is supported by 89% of users
         throw "WebGL2 not supported by your browser";
     }
+
+    console.log('D')
 })();
 
 export default A;

src/js/Aladin.js

@@ -713,6 +713,14 @@ export let Aladin = (function () {
         return projName;
     };
 
+    /** return the current coordinate system: possible values are 'J2000', 'J2000d', and 'Galactic' 
+     * @api
+     *
+     */
+    Aladin.prototype.getFrame = function() {
+        return this.view.cooFrame.label;
+    }
+
     /** point view to a given object (resolved by Sesame) or position
      * @api
      *
@@ -1432,34 +1440,102 @@ export let Aladin = (function () {
      * Return the current view WCS as a key-value dictionary
      * Can be useful in coordination with getViewDataURL
      *
+     * NOTE + TODO : Rotations are not implemented yet
+     * 
      * @API
     */
-    Aladin.prototype.getViewWCS = function (options) {
-        var raDec = this.getRaDec();
-        var fov = this.getFov();
-        // TODO: support for other projection methods than SIN
-        return {
-            NAXIS: 2,
-            NAXIS1: this.view.width,
-            NAXIS2: this.view.height,
-            RADECSYS: 'ICRS',
-            CRPIX1: this.view.width / 2,
-            CRPIX2: this.view.height / 2,
-            CRVAL1: raDec[0],
-            CRVAL2: raDec[1],
-            CTYPE1: 'RA---SIN',
-            CTYPE2: 'DEC--SIN',
-            CD1_1: fov[0] / this.view.width,
-            CD1_2: 0.0,
-            CD2_1: 0.0,
-            CD2_2: fov[1] / this.view.height
+    Aladin.prototype.getViewWCS = function () {
+        // get general view properties
+        const center = this.wasm.getCenter();
+        const fov = this.getFov();
+        const width = this.view.width;
+        const height = this.view.height;
+
+        // get values common for all
+        let cdelt1 = fov[0] / width;
+        const cdelt2 = fov[1] / height;
+        const projectionName = this.getProjectionName();
+
+        if (projectionName == "FEYE")
+            return "Fish eye projection is not supported by WCS standards.";
+
+        // reversed longitude case
+        if (this.getBaseImageLayer().longitudeReversed) {
+            cdelt1 = -cdelt1;
         }
+
+        // solar system object dict from planetary fits standard
+        // https://agupubs.onlinelibrary.wiley.com/doi/10.1029/2018EA000388
+        const solarSystemObjects = {
+            "earth": "EA",
+            "moon": "SE",
+            "mercury": "ME",
+            "venus": "VE",
+            "mars": "MA",
+            "jupiter": "JU",
+            "saturn": "SA",
+            "uranus": "UR",
+            "neptune": "NE",
+            // satellites other than the Moon
+            "satellite": "ST" // not findable in the hips properties?
+        };
+
+        // we define a generic LON LAT keyword for unknown body types
+        let cooType1 = "LON--";
+        let cooType2 = "LAT--";
+
+        // just in case it would be equatorial
+        let radecsys;
+
+        if (this.getBaseImageLayer().isPlanetaryBody()) {
+            const body = this.getBaseImageLayer().properties.hipsBody
+            if (body in solarSystemObjects) {
+                cooType1 = `${solarSystemObjects[body]}LN-`;
+                cooType2 = `${solarSystemObjects[body]}LT-`;
+            }
+           
+        } else {
+            switch (this.getFrame()) {
+                case "J2000":
+                case "J2000d":
+                    cooType1 = "RA---";
+                    cooType2 = "DEC--";
+                    radecsys = "ICRS    ";
+                    break;
+                case "Galactic":
+                    cooType1 = "GLON-";
+                    cooType2 = "GLAT-";
+            }
+        }
+
+        const WCS = {
+            NAXIS: 2,
+            NAXIS1: width,
+            NAXIS2: height,
+            CRPIX1: width / 2 + 0.5,
+            CRPIX2: height / 2 + 0.5,
+            CRVAL1: center[0],
+            CRVAL2: center[1],
+            CTYPE1: cooType1 + projectionName,
+            CTYPE2: cooType2 + projectionName,
+            CUNIT1: "deg     ",
+            CUNIT2: "deg     ",
+            CDELT1: cdelt1,
+            CDELT2: cdelt2
+        };
+
+        // handle the case of equatorial coordinates that need 
+        // the radecsys keyword
+        if (radecsys == "ICRS    ")
+            WCS.RADECSYS = radecsys;
+
+        return WCS;
     }
 
     /** restrict FOV range
      * @API
      * @param minFOV in degrees when zoom in at max
-     * @param maxFOV in degreen when zoom out at max
+     * @param maxFOV in degrees when zoom out at max
     */
     Aladin.prototype.setFovRange = Aladin.prototype.setFOVRange = function (minFOV, maxFOV) {
         if (minFOV > maxFOV) {
@@ -1572,10 +1648,6 @@ export let Aladin = (function () {
         var fovX = this.view.fov;
         var s = this.getSize();
         var fovY = s[1] / s[0] * fovX;
-        // TODO : take into account AITOFF projection where fov can be larger than 180
-        fovX = Math.min(fovX, 180);
-        fovY = Math.min(fovY, 180);
-
         return [fovX, fovY];
     };
 

src/js/ProjectionEnum.js

@@ -29,29 +29,29 @@
  *****************************************************************************/
 export let ProjectionEnum = {
    // Zenithal
-   TAN: {id: 1, fov: 180},	  /* Gnomonic projection      */
-   STG: {id: 2, fov: 360},	  /* Stereographic projection */
-   SIN: {id: 3, fov: 180},	  /* Orthographic		         */
-   ZEA: {id: 4, fov: 360},	  /* Equal-area 		         */
-   FEYE: {id: 5, fov: 190},
-   AIR: {id: 6, fov: 360},
+   TAN: {id: 1, fov: 180, label: "gnomonic"},	  /* Gnomonic projection      */
+   STG: {id: 2, fov: 360, label: "stereographic"},	  /* Stereographic projection */
+   SIN: {id: 3, fov: 180, label: "orthographic"},	  /* Orthographic		         */
+   ZEA: {id: 4, fov: 360, label: "zenital equal-area"},	  /* Equal-area 		         */
+   FEYE: {id: 5, fov: 190, label: "fish eye"},
+   AIR: {id: 6, fov: 360, label: "airy"},
    //AZP: {fov: 180},
-   ARC: {id: 7, fov: 360},
-   NCP: {id: 8, fov: 180},
+   ARC: {id: 7, fov: 360, label: "zenital equidistant"},
+   NCP: {id: 8, fov: 180, label: "north celestial pole"},
    // Cylindrical
-   MER: {id: 9, fov: 360},
-   CAR: {id: 10, fov: 360},
-   CEA: {id: 11, fov: 360},
-   CYP: {id: 12, fov: 360},
+   MER: {id: 9, fov: 360, label: "mercator"},
+   CAR: {id: 10, fov: 360, label: "plate carrée"},
+   CEA: {id: 11, fov: 360, label: "cylindrical equal area"},
+   CYP: {id: 12, fov: 360, label: "cylindrical perspective"},
    // Pseudo-cylindrical
-   AIT: {id: 13, fov: 360},
-   PAR: {id: 14, fov: 360},
-   SFL: {id: 15, fov: 360},
-   MOL: {id: 16, fov: 360},
+   AIT: {id: 13, fov: 360, label: "hammer-aitoff"},
+   PAR: {id: 14, fov: 360, label: "parabolic"},
+   SFL: {id: 15, fov: 360, label: "sanson-flamsteed"},
+   MOL: {id: 16, fov: 360, label: "mollweide"},
    // Conic
-   COD: {id: 17, fov: 360},
+   COD: {id: 17, fov: 360, label: "conic equidistant"},
    // Hybrid
-   HPX: {id: 19, fov: 360},
+   HPX: {id: 19, fov: 360, label: "healpix"},
 };
 
 export let projectionNames = [

src/js/View.js

@@ -1689,6 +1689,12 @@ export let View = (function () {
             case "AIT":
                 this.projection = ProjectionEnum.AIT;
                 break;
+            case "PAR":
+                this.projection = ProjectionEnum.PAR;
+                break;
+            case "SFL":
+                this.projection = ProjectionEnum.SFL;
+                break;
             // Cylindrical (MER, CAR, CEA, CYP)
             case "MER":
                 this.projection = ProjectionEnum.MER;

src/js/gui/ProjectionSelector.js

@@ -29,7 +29,7 @@
  *****************************************************************************/
 
  import { ALEvent } from "../events/ALEvent.js";
- import { projectionNames } from "../ProjectionEnum.js";
+ import { projectionNames, ProjectionEnum } from "../ProjectionEnum.js";
  import $ from 'jquery';
 
  export class ProjectionSelector {
@@ -55,7 +55,7 @@
         this.selectProjection.empty();
         
         projectionNames.forEach(p => {
-            this.selectProjection.append($("<option />").val(p).text(p));
+            this.selectProjection.append($("<option />").val(p).text(p).attr("title", ProjectionEnum[p].label));
         });
         let self = this;
         this.selectProjection.change(function () {

tests/unit/WCS.test.js

@@ -0,0 +1,92 @@
+import { expect, test, vi } from 'vitest'
+
+const propertiesDSSResponse = `creator_did          = ivo://CDS/P/DSS2/color
+obs_collection       = DSS colored
+obs_title            = DSS colored
+obs_description      = Color composition generated by CDS. This HiPS survey is based on 2 others HiPS surveys, respectively DSS2-red and DSS2-blue HiPS, both of them directly generated from original scanned plates downloaded from STScI site. The red component has been built from POSS-II F, AAO-SES,SR and SERC-ER plates. The blue component has been build from POSS-II J and SERC-J,EJ. The green component is based on the mean of other components. Three missing plates from red survey (253, 260, 359) has been replaced by pixels from the DSSColor STScI jpeg survey. The 11 missing blue plates (mainly in galactic plane) have not been replaced (only red component).
+obs_copyright        = Digitized Sky Survey - STScI/NASA, Colored & Healpixed by CDS
+obs_copyright_url    = http://archive.stsci.edu/dss/copyright.html
+client_category      = Image/Optical/DSS
+client_sort_key      = 03-00
+hips_builder         = Aladin/HipsGen v10.123
+hips_creation_date   = 2010-05-01T19:05Z
+hips_release_date    = 2019-05-07T10:55Z
+hips_creator         = Oberto A. (CDS) , Fernique P. (CDS)
+hips_version         = 1.4
+hips_order           = 9
+hips_frame           = equatorial
+hips_tile_width      = 512
+hips_tile_format     = jpeg
+dataproduct_type     = image
+client_application   = AladinLite
+moc_access_url       = http://alasky.u-strasbg.fr/DSS/DSSColor/Moc.fits
+#hips_service_url     = http://alasky.u-strasbg.fr/DSS/DSSColor
+hips_status          = public mirror clonableOnce
+hips_rgb_red         = DSS2Merged [1488.0 8488.8125 14666.0 Linear]
+hips_rgb_blue        = DSS2-blue-XJ-S [4286.0 12122.5 19959.0 Linear]
+hips_hierarchy       = median
+hips_pixel_scale     = 2.236E-4
+hips_initial_ra      = 085.30251
+hips_initial_dec     = -02.25468
+hips_initial_fov     = 2
+moc_sky_fraction     = 1
+hips_copyright       = CNRS/Unistra
+obs_ack              = The Digitized Sky Surveys were produced at the Space Telescope Science Institute under U.S. Government grant NAG W-2166. The images of these surveys are based on photographic data obtained using the Oschin Schmidt Telescope on Palomar Mountain and the UK Schmidt Telescope. The plates were processed into the present compressed digital form with the permission of these institutions. The National Geographic Society - Palomar Observatory Sky Atlas (POSS-I) was made by the California Institute of Technology with grants from the National Geographic Society. The Second Palomar Observatory Sky Survey (POSS-II) was made by the California Institute of Technology with funds from the National Science Foundation, the National Geographic Society, the Sloan Foundation, the Samuel Oschin Foundation, and the Eastman Kodak Corporation. The Oschin Schmidt Telescope is operated by the California Institute of Technology and Palomar Observatory. The UK Schmidt Telescope was operated by the Royal Observatory Edinburgh, with funding from the UK Science and Engineering Research Council (later the UK Particle Physics and Astronomy Research Council), until 1988 June, and thereafter by the Anglo-Australian Observatory. The blue plates of the southern Sky Atlas and its Equatorial Extension (together known as the SERC-J), as well as the Equatorial Red (ER), and the Second Epoch [red] Survey (SES) were all taken with the UK Schmidt. Supplemental funding for sky-survey work at the ST ScI is provided by the European Southern Observatory.
+prov_progenitor      = STScI
+bib_reference        = 1996ASPC..101...88L
+bib_reference_url    = http://cdsads.u-strasbg.fr/abs/1996ASPC..101...88L
+# 1975-1999
+t_min                = 42413
+t_max                = 51179
+obs_regime           = Optical
+em_min               = 4e-7
+em_max               = 6e-7
+#hips_master_url     = ex: http://yourHipsServer/null
+hips_order_min       = 0
+dataproduct_subtype  = color
+hips_estsize         = 37580398
+hipsgen_date         = 2019-05-07T10:55Z
+hipsgen_params       = out=/asd-volumes/sc1-asd-volume8/DSS/DSSColor UPDATE`;
+
+function createFetchResponse(data) {
+    return { text: () => new Promise((resolve) => resolve(data)) }
+}
+
+/*global.fetch = vi.fn()
+    .mockResolvedValue(createFetchResponse(propertiesDSSResponse))
+
+beforeEach(() => {
+    global.fetch.mockClear();
+});*/
+//import createFetchMock from 'vitest-fetch-mock';
+//const fetchMocker = createFetchMock(vi);
+
+import A from 'dist/aladin.js';
+
+describe('A.js', () => {
+    beforeEach(async () => {
+        delete window.location;
+        window.location = {href: {}, search: ''};
+        let text = await fetch('https://alaskybis.u-strasbg.fr/DSS/DSSColor/properties').then((resp) => resp.text());
+        //console.log(text)
+    });
+
+    it('simple Aladin lite instanciation', async () => {
+        let aladin;
+
+        A.init.then(() => {
+            console.log(A)
+            console.log("jkj", aladin);
+                /*aladin = A.aladin('#aladin-lite-div', {
+                    survey: 'https://alaskybis.u-strasbg.fr/DSS/DSSColor',
+                    projection: "TAN",
+                    target: '15 16 57.636 -60 55 7.49',
+                    showCooGrid: true,
+                    fov: 90,
+                    log: false,
+                });*/
+        });
+
+        expect(true).toBe(true)
+    });
+});

vite.config.ts

@@ -48,12 +48,21 @@ export default defineConfig({
     },
     test: {
         globals: true,
-        environment: 'happy-dom',
+        environment: 'jsdom',
+        setupFiles: ['./vitest.setup.ts'],
+        includeSource: ['src/**/*.{js,ts}'],
+        // For this config, check https://github.com/vitest-dev/vitest/issues/740
+        environmentOptions: {
+            jsdom: {
+              resources: 'usable',
+            },
+        },
+        threads: false,
         include: [
             'tests/unit/**/*.{test,spec}.{js,ts}'
         ],
         deps: {
-            inline: ['core/pkg'],
+            inline: ['dist/aladin.js', 'vitest-webgl-canvas-mock'],
         },
     },
     server: {

vitest.setup.ts

@@ -0,0 +1,33 @@
+// Use the canvas mock, should support webgl2 canvas 
+import 'vitest-webgl-canvas-mock';
+import fetch, {
+    Blob,
+    blobFrom,
+    blobFromSync,
+    File,
+    fileFrom,
+    fileFromSync,
+    FormData,
+    Headers,
+    Request,
+    Response,
+  } from 'node-fetch'
+
+// Mock the fetch
+/*import createFetchMock from 'vitest-fetch-mock';
+import { vi } from 'vitest';
+
+const fetchMocker = createFetchMock(vi);
+
+// adds the 'fetchMock' global variable and rewires 'fetch' global to call 'fetchMock' instead of the real implementation
+fetchMocker.enableMocks();
+
+// changes default behavior of fetchMock to use the real 'fetch' implementation and not mock responses
+fetchMocker.dontMock();*/
+if (!global.fetch) {
+    global.fetch = fetch;
+    global.Headers = Headers
+    global.Request = Request
+    global.Response = Response
+}
+