multiple fixes for accessing SODA SKA services, HiPS browser, etc...

2026-03-12 21:23:10 -07:00 · 2024-05-06 13:58:42 +02:00
parent fda33df813
commit cd363ca4b9
15 changed files with 107 additions and 92 deletions
--- a/examples/al-ska-hips-list.html
+++ b/examples/al-ska-hips-list.html
@@ -14,7 +14,7 @@
            fullScreen: true,
            target: "centaurus A",
            fov: 10,
-            projection: 'AIT',
+            projection: 'TAN',
            showContextMenu: true,
            showSimbadPointerControl: true,
            expandLayersControl: true,
--- a/examples/al-soda-ska.html
+++ b/examples/al-soda-ska.html
@@ -73,7 +73,7 @@ aladin = A.aladin("#aladin-lite-div", {
    ],
 });

-                aladin.setImageLayer(A.imageHiPS("astron.nl/P/lotss_dr2_high"));
+                aladin.setImageLayer(A.imageHiPS("P/DSS2/color"));

                aladin.addCatalog(
                    A.catalogFromSKAORucio("m51", 10, {
--- a/examples/al-zoomchanged.html
+++ b/examples/al-zoomchanged.html
@@ -17,9 +17,9 @@
        aladin.on("zoomChanged", () => {
            console.log("zoomChanged")
        })
-
        aladin.on("positionChanged", ({ra, dec}) => {
-
+            console.log('call to aladin', aladin.pix2world(0, 0))
+            console.log('positionChanged in icrs', ra, dec)
        })

        aladin.gotoRaDec(0, 20);
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -98,54 +98,27 @@
    color: white;
 }

-.aladin-measurement-div table td.aladin-href-td-container a:hover {
-    overflow: visible;
-    display: inline-block;
-    animation: leftright 5s infinite normal linear;
-}
-
-@keyframes leftright {
-    0%,
-    20% {
-        transform: translateX(0%);
-        left: 0%;
-    }
-    80%,
-    100% {
-        /* the max width is 150px and a padding of 0.8em is added for href link */
-        transform: translateX(-100%);
-        left: -100%;
-    }
-}
-
 .aladin-measurement-div table th {
    padding: 0.3em 0.5em;
 }

-.aladin-measurement-div table td.aladin-href-td-container {
-    border: 1px solid #d2d2d2;
+.aladin-measurement-div table tr td a {
+    display: block;
+}

-    border-radius: 3px;
+.aladin-measurement-div table tr td {
+    padding: 0.5rem 0;
+}
+
+.aladin-measurement-div table tr td, .aladin-measurement-div table tr td a {
+    max-width: 10rem;
+    text-overflow: ellipsis;

-    padding: 0.5em;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
-    /*max-width: 150px;
-    text-overflow: ellipsis;*/
-}

-.aladin-measurement-div table td.aladin-text-td-container {
-    padding: 0.5em;
-    white-space: nowrap;
-    overflow: hidden;
-
-    /*max-width: 150px;
-    text-overflow: ellipsis;*/
-}
-
-.aladin-measurement-div table td.aladin-href-td-container:hover {
-    background-color: #fff;
+    word-wrap:break-word;
 }

 .aladin-marker-measurement {
@@ -161,10 +134,6 @@
    width: 100%;
 }

-.aladin-marker-measurement table tr td{
-    word-wrap:break-word;
-}
-
 .aladin-marker-measurement tr:nth-child(even) {
    background-color: #dddddd;
 }
@@ -423,11 +392,10 @@ canvas {
 }

 .aladin-input-text.aladin-dark-theme.search {
-    width: 15rem;
    text-shadow: 0px 0px 2px #000;
 }

-.aladin-input-text.aladin-dark-theme.search:focus, .aladin-input-text.aladin-dark-theme.search:hover {
+.aladin-input-text.search:focus, .aladin-input-text.search:hover {
    background-image: url(../../assets/icons/search-white.svg);
    background-size: 1.8rem;
    background-repeat: no-repeat;
@@ -523,6 +491,11 @@ canvas {

 .aladin-form .aladin-form-group {
    margin-bottom: 1rem;
+    width: 100%;
+}
+
+.aladin-form .aladin-form-group:last-of-type {
+    margin-bottom: 0rem;
 }

 .aladin-form .aladin-form-input select {
@@ -1139,6 +1112,10 @@ canvas {
    height: 1.7rem;
 }

+.aladin-location .aladin-input-text {
+    width: 15rem;
+}
+
 .aladin-fov {
    position: absolute;
    bottom: 0.2rem;
--- a/src/js/Aladin.js
+++ b/src/js/Aladin.js
@@ -1541,13 +1541,14 @@ export let Aladin = (function () {

        if (!surveyOptions) {
            surveyOptions = { name, maxOrder, cooFrame, ...options };
-
-
            surveyOptions.url = url;
-
-            HiPSCache.append(id, surveyOptions);
+        } else {
+            // update the cached survey
+            surveyOptions = {...surveyOptions, ...options};
        }

+        HiPSCache.append(id, surveyOptions);
+
        return new ImageHiPS(id, surveyOptions.url, surveyOptions);
    };

@@ -1894,8 +1895,10 @@ export let Aladin = (function () {
     * @memberof Aladin
     * @param {ListenerCallback} what - e.g. objectHovered, select, zoomChanged, positionChanged
     * @param {function} myFunction - a callback function.
-     * Note: positionChanged and zoomChanged are throttled every 100ms.
-     * 
+     * Note: <ul>
+     * <li>positionChanged and zoomChanged are throttled every 100ms.</li>
+     * <li>positionChanged's callback gives an object having ra and dec keywords of the current position in ICRS frame. See the below example.</li>
+     * </ul>
     * @example
 // define function triggered when  a source is hovered
 aladin.on('objectHovered', function(object, xyMouseCoords) {
@@ -1932,6 +1935,10 @@ aladin.on('objectClicked', function(object, xyMouseCoords) {
    }
    $('#infoDiv').html(msg);
 });
+
+aladin.on("positionChanged", ({ra, dec}) => {
+    console.log("positionChanged", ra, dec)
+})
     */
    Aladin.prototype.on = function (what, myFunction) {
        if (Aladin.AVAILABLE_CALLBACKS.indexOf(what) < 0) {
--- a/src/js/Source.js
+++ b/src/js/Source.js
@@ -119,8 +119,8 @@ export let Source = (function() {

    /**
     * Simulates a click on the source
-     * @memberof Source
-     * 
+     *
+     * @memberof Source 
     * @param {Footprint|Source} [obj] - If not given, the source is taken as the object to be selected 
     */
    Source.prototype.actionClicked = function(obj) {
--- a/src/js/Utils.ts
+++ b/src/js/Utils.ts
@@ -389,13 +389,15 @@ Utils.fetch = function(params) {
            if (params.success) {
                return params.success(data)
            }
+
+            return Promise.resolve(data);
        })
        .catch(e => {
            if (params.error) {
-                params.error(e)
-            } else {
-                alert(e)
+                return params.error(e)
            }
+
+            return Promise.reject(e);
        })
        .finally(() => {
            ALEvent.RESOURCE_FETCHED.dispatchedTo(document, {task});
--- a/src/js/View.js
+++ b/src/js/View.js
@@ -258,14 +258,9 @@ export let View = (function () {
                self.fixLayoutDimensions();
            })
        } else {*/
-        let resizeLayout = () => {
-            self.fixLayoutDimensions();
-        }

        this.resizeObserver = new ResizeObserver(() => {
-            //clearTimeout(doit);
-            //doit = setTimeout(resizeLayout, 100);
-            resizeLayout();
+            self.fixLayoutDimensions();
        });

        self.resizeObserver.observe(this.aladinDiv)
--- a/src/js/gui/Box/HiPSBrowserBox.js
+++ b/src/js/gui/Box/HiPSBrowserBox.js
@@ -66,7 +66,7 @@ export class HiPSBrowserBox extends Box {
            } catch (e) {
                // Or he can select a HiPS from the list given
                const hips = HiPSBrowserBox.HiPSList[value];
-                console.log(hips)
+
                if (hips) {
                    image = hips.ID || hips.hips_service_url;
                } else {
@@ -75,9 +75,9 @@ export class HiPSBrowserBox extends Box {
                }
            }

-
            if (image) {
                self._addHiPS(image)
+                self.searchDropdown.update({title: value});
            }
        };

@@ -85,10 +85,9 @@ export class HiPSBrowserBox extends Box {
            name: "HiPS browser",
            placeholder: "Browser a HiPS by an URL, ID or keywords",
            tooltip: {
-                content: 'Type an url, CDS ID or a name to search for a HiPS',
-                position: {
-                    direction: 'bottom'
-                }
+                global: true,
+                aladin,
+                content: 'HiPS url, ID or keyword accepted',
            },
            actions: {
                focus(e) {
@@ -188,7 +187,6 @@ export class HiPSBrowserBox extends Box {
                content: Layout.vertical([
                    Layout.horizontal(["Filter:", filterEnabler, filterBtn]),
                    Layout.horizontal(["Search:", searchDropdown]),
-                    //addBtn,
                ]),
                ...options,
            },
@@ -241,7 +239,6 @@ export class HiPSBrowserBox extends Box {
        let self = this;
        let hips = A.imageHiPS(id, {
            successCallback: (hips) => {
-                console.log('success')
                self.searchDropdown.removeClass('aladin-not-valid');
                self.searchDropdown.addClass('aladin-valid');
            },
--- a/src/js/gui/Box/HiPSFilterBox.js
+++ b/src/js/gui/Box/HiPSFilterBox.js
@@ -40,7 +40,8 @@ export class HiPSFilterBox extends Box {
        let self;

        let regimeBtn = new TogglerActionButton({
-            content: 'Optical',
+            content: 'Regime',
+            tooltip: {content: 'Observation regime'},
            toggled: true,
            actionOn: () => {
                self._triggerFilteringCallback();
@@ -51,6 +52,7 @@ export class HiPSFilterBox extends Box {
        });
        let spatialBtn = new TogglerActionButton({
            content: 'Spatial',
+            tooltip: {content: 'Check for HiPS having observation in the view!'},
            toggled: false,
            actionOn: () => {
                self._triggerFilteringCallback();
@@ -60,7 +62,8 @@ export class HiPSFilterBox extends Box {
            }
        });
        let resolutionBtn = new TogglerActionButton({
-            content: '<=1°',
+            content: 'Resolution',
+            tooltip: {content: 'Check for HiPS with a specific pixel resolution.'},
            toggled: false,
            actionOn: () => {
                self._triggerFilteringCallback();
@@ -72,14 +75,11 @@ export class HiPSFilterBox extends Box {

        super(
            {
-                header: {
-                    title: 'Filter'
-                },
                close: false,
                content: Layout.vertical([
-                    'Filters:',
+                    '<h3>Filters:</h3>',
                    Layout.horizontal([regimeBtn, spatialBtn, resolutionBtn]),
-                    'Parameters:',
+                    '<h3>Parameters:</h3>',
                    new Form({
                        subInputs: [
                            {
@@ -102,7 +102,7 @@ export class HiPSFilterBox extends Box {
                                            let regime = e.target.value;
                                            self.params["regime"] = regime;

-                                            regimeBtn.update({content: regime});
+                                            //regimeBtn.update({content: regime});

                                            self._triggerFilteringCallback();
                                        },
@@ -131,7 +131,7 @@ export class HiPSFilterBox extends Box {
                                                    self.params["resolution"] = resolution.degrees();

                                                    e.target.classList.add('aladin-valid');
-                                                    resolutionBtn.update({content: '<=' + value});
+                                                    //resolutionBtn.update({content: '<=' + value});

                                                    self._triggerFilteringCallback();
                                                } else {
--- a/src/js/gui/Box/ServiceQueryBox.js
+++ b/src/js/gui/Box/ServiceQueryBox.js
@@ -74,7 +74,10 @@ export class ServiceQueryBox extends Box {
                // Tackle CORS problems
                Utils.loadFromUrls([url, Utils.handleCORSNotSameOrigin(url)], {timeout: 30000, dataType: 'blob'})
                    .then((blob) => {
+                        console.log("azer", blob)
+
                        const url = URL.createObjectURL(blob);
+
                        try {
                            let image = self.aladin.createImageFITS(url, name);   
                            self.aladin.setOverlayImageLayer(image, Utils.uuidv4())
@@ -83,6 +86,7 @@ export class ServiceQueryBox extends Box {
                        }
                    })
                    .catch((e) => {
+                        console.log("jjaaz")
                        window.alert(e)
                    })
            },
--- a/src/js/gui/Location.js
+++ b/src/js/gui/Location.js
@@ -77,9 +77,10 @@ export class Location extends DOMElement {
                    e.stopPropagation();

                    field.removeClass('aladin-not-valid'); // remove red border
+                    field.removeClass('aladin-valid'); // remove red border

                    if (e.key === 'Enter') {
-                        field.el.blur();
+                        //field.el.blur();

                        let object = field.get();

@@ -96,6 +97,8 @@ export class Location extends DOMElement {
                                    field.el.focus();
                                },
                                success: function() {
+                                    field.addClass('aladin-valid');
+
                                    field.update({placeholder:'Search for an object...', value: object});
                                }
                            }
@@ -154,7 +157,7 @@ export class Location extends DOMElement {
                }

                let [lon, lat] = lonlat;
-
+                self.field.el.blur()
                self.update({
                    lon, lat,
                    frame: aladin.view.cooFrame,
@@ -162,6 +165,10 @@ export class Location extends DOMElement {
                }, aladin);
            }

+            if(param.state.dragging) {
+                self.field.el.blur()
+            }
+
            if (param.type === 'mousemove' && param.state.dragging === false) {
                if (focused) {
                    return;
@@ -177,6 +184,7 @@ export class Location extends DOMElement {
        });

        ALEvent.POSITION_CHANGED.listenedBy(aladin.aladinDiv, function (e) {
+
            self.update({
                lon: e.detail.lon, 
                lat: e.detail.lat,
@@ -221,6 +229,7 @@ export class Location extends DOMElement {
                self.field.set(coo.format('d/'))
            }
            self.field.removeClass('aladin-not-valid');
+            self.field.removeClass('aladin-valid'); 

            self.field.element().style.color = options.isViewCenter ? aladin.getReticle().getColor() : 'white';
            //self.field.el.blur()
--- a/src/js/gui/Widgets/Box.js
+++ b/src/js/gui/Widgets/Box.js
@@ -162,7 +162,7 @@ export class Box extends DOMElement {
 function dragElement(triggerElt, elmnt, onDragged) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    // otherwise, move the DIV from anywhere inside the DIV:
-
+    var t, l;
    triggerElt.onmousedown = dragMouseDown;
  
    function dragMouseDown(e) {
@@ -188,15 +188,37 @@ function dragElement(triggerElt, elmnt, onDragged) {
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
-        // set the element's new position:

-        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
-        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+        // set the element's new position:
+        t = elmnt.offsetTop - pos2
+        l = elmnt.offsetLeft - pos1
+        elmnt.style.top = t + "px";
+        elmnt.style.left = l + "px";
    }
  
    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
+
+        var r = elmnt.getBoundingClientRect();
+
+        if (t < r.height / 2) {
+            elmnt.style.top = r.height / 2 + "px";
+        }
+
+        if (l < r.width / 2) {
+            elmnt.style.left = r.width / 2 + "px";
+        }
+
+        const aladinDiv = elmnt.closest('.aladin-container');
+        
+        if (l + r.width / 2 > aladinDiv.offsetWidth) {
+            elmnt.style.left = (aladinDiv.offsetWidth - r.width / 2) + "px";
+        }
+
+        if (t + r.height / 2 > aladinDiv.offsetHeight) {
+            elmnt.style.top = (aladinDiv.offsetHeight - r.height / 2) + "px";
+        }
    }
 }
--- a/src/js/gui/Widgets/Table.js
+++ b/src/js/gui/Widgets/Table.js
@@ -81,6 +81,7 @@ export class Table extends DOMElement {
                    let val = row.data[key] || '--';
                    tdEl.innerHTML = val;
                    tdEl.classList.add("aladin-text-td-container");
+                    tdEl.title = val;
                }

                trEl.appendChild(tdEl);
--- a/src/js/vo/ObsCore.js
+++ b/src/js/vo/ObsCore.js
@@ -191,7 +191,7 @@
                let accessUrlEl = document.createElement('div');
                try {
                    let _ = new URL(url);
-                    accessUrlEl.classList.add('aladin-href-td-container');
+                    accessUrlEl.classList.add('aladin-href-link');

                    accessUrlEl.innerHTML = '<a href=' + url + ' target="_blank">' + url + '</a>';

@@ -238,20 +238,21 @@

                return accessUrlEl;
            },
-            'access_format': (data) => {
+            /*'access_format': (data) => {
                let accessFormat = data['access_format'];

                if (accessFormat && accessFormat.includes('datalink')) {
                    return new ActionButton({
                        size: 'small',
                        content: '🔗',
-                        tooltip: {content: accessFormat, position: {direction: 'left'}},
+                        tooltip: {content: accessFormat, position: {direction: 'right'}},
                        action(e) {}
                    }).element();
+                    return accessFormat;
                } else {
                    return accessFormat;
                }
-            }
+            }*/
        }
    };