Add basic HiPS filter in the stack box

2025-12-12 15:49:18 -08:00 · 2024-04-23 22:25:37 +02:00
parent 63aebf738a
commit d765dc9ec2
14 changed files with 276 additions and 56 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@

 ## 3.3.3

+* [feat] UI: add HiPS basic filter that filters the `hipsList` given
 * [feat] New `hipsList` option parameter when instancing a new Aladin object.
 * [feat] Zoom smoothing using hermite cubic interpolation functions
 * [feat] shape option of Catalog and ProgressiveCat accepts a function returning a Footprint. This allow user to
--- a/assets/icons/filter-off.svg
+++ b/assets/icons/filter-off.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 15L21 21M21 15L15 21M10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L17 11" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/icons/filter-on.svg
+++ b/assets/icons/filter-on.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/examples/al-animation-CS-CDS-2022.html
+++ b/examples/al-animation-CS-CDS-2022.html
@@ -17,6 +17,7 @@
 </div>
 <script type="module">
    import A from '../src/js/A.js';
+    var aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {projection: 'MOL', cooFrame: 'galactic', fov: 360, fullScreen: true, showCooGrid: false, showReticle: false})
        aladin.gotoRaDec(79.9525321, -69.2742586)
@@ -50,8 +51,7 @@
            }
        }

-        aladin.setCooGrid({opacity: 0, color: {r: 51/255, g: 209/255, b: 1}})
-        aladin.setCooGrid({enabled: true})
+        aladin.setCooGrid({enabled: true, opacity: 0, color: {r: 51, g: 209, b: 255}})

        async function s_1() {
            return new Promise((resolve, reject) => {
--- a/examples/al-cat-proper-motion.html
+++ b/examples/al-cat-proper-motion.html
@@ -23,9 +23,7 @@
      });

      let pmraMean = null, pmdecMean = null;
-      //aladin.addCatalog(A.catalogFromSimbad('LMC', 2.5, {
-      //aladin.addCatalog(A.catalogFromVizieR('J/A+A/663/A107/table5', 'LMC', 5, {
-    
+
      const pmCat = A.catalogFromURL('./data/proper_motion.xml', {
        onClick: 'showTable',
        name: 'mean pm over HPX cells around LMC from GaiaDR2',
--- a/examples/al-ska-hips-list.html
+++ b/examples/al-ska-hips-list.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {
+            fullScreen: true,
+            target: "orion",
+            fov: 10,
+            projection: 'SIN',
+            showContextMenu: true,
+            hipsList: [
+                // High energy (Gamma and X-rays)
+                'CDS/P/HGPS/Flux',
+                'CDS/P/Fermi/5',
+                'CDS/P/Fermi/4',
+                'CDS/P/Fermi/3',
+                'ov-gso/P/Fermi/Band2',
+                'ov-gso/P/BAT/150-195keV',
+                'ov-gso/P/BAT/35-50keV',
+                'ov-gso/P/BAT/14-20keV',
+                'erosita/dr1/rate/023',
+                'erosita/dr1/rate/024',
+                // Uv/Optical/Infrared
+                'CDS/P/GALEXGR6_7/FUV',
+                'CDS/P/GALEXGR6_7/NUV',
+                'CDS/P/DSS2/color',
+                'CDS/P/PanSTARRS/DR1/g',
+                'CDS/P/PanSTARRS/DR1/r',
+                'CDS/P/Finkbeiner',
+                'CDS/P/PanSTARRS/DR1/i',
+                'CDS/P/PanSTARRS/DR1/color-i-r-g',
+                'CDS/P/PanSTARRS/DR1/z',
+                'CDS/P/PanSTARRS/DR1/y',
+                'CDS/P/DES-DR2/ColorIRG',
+                'CDS/P/2MASS/color',
+                'ov-gso/P/GLIMPSE/irac1',
+                'ov-gso/P/GLIMPSE/irac2',
+                'CDS/P/unWISE/color-W2-W1W2-W1',
+                'ov-gso/P/GLIMPSE/irac3',
+                'ov-gso/P/GLIMPSE/irac4',
+                'CDS/P/IRIS/color',
+                'ESAVO/P/AKARI/N60',
+                'ESAVO/P/AKARI/WideL',
+                'ESAVO/P/HERSCHEL/SPIRE-250',
+                'ESAVO/P/HERSCHEL/SPIRE-350',
+                'ESAVO/P/HERSCHEL/SPIRE-500',
+                // sub-mm/mm/radio
+                'CDS/P/PLANCK/R3/HFI/color',
+                'CDS/P/ACT_Planck/DR5/f220',
+                'CDS/P/CO',
+                'CDS/P/PLANCK/R3/HFI100',
+                'CDS/P/PLANCK/R3/LFI30',
+                'CDS/P/NVSS',
+                'CSIRO/P/RACS/mid/I',
+                'ov-gso/P/CGPS/VGPS',
+                'CDS/C/HI4PI/HI',
+                'CDS/P/MeerKAT/Galactic-Centre-1284MHz-StokesI',
+                'CSIRO/P/RACS/low/I',
+                'astron.nl/P/tgssadr',
+                'ov-gso/P/GLEAM/170-231',
+                'ov-gso/P/GLEAM/139-170',
+                'astron.nl/P/lotss_dr2_high',
+                'ov-gso/P/GLEAM/103-134',
+                'ov-gso/P/GLEAM/072-103'
+            ]
+        });
+
+        const c1 = A.catalogFromURL('./data/eso.xml', {onClick: 'showTable'});
+        aladin.addCatalog(c1);
+    });
+</script>
+</body>
+</html>
--- a/src/js/Aladin.js
+++ b/src/js/Aladin.js
@@ -418,12 +418,17 @@ export let Aladin = (function () {
                        url = null;
                    }

+                    cachedSurvey = {...cachedSurvey, ...survey}
+
                    if (survey.properties) {
+                        delete cachedSurvey.properties;
                        cachedSurvey = {...cachedSurvey, ...survey.properties}
                    }
                    if (survey.options) {
+                        delete cachedSurvey.options;
                        cachedSurvey = {...cachedSurvey, ...survey.options}
                    }
+
                } else {
                    console.warn('unable to parse the survey list item: ', survey)
                    continue;
@@ -456,14 +461,36 @@ export let Aladin = (function () {
                    HiPSes.forEach((h) => {
                        hipsList.push({
                            id: h.ID,
-                            name: h.obs_title
+                            name: h.obs_title,
+                            regime: h.obs_regime,
                        })
                    });

                    fillHiPSCache();
                });
        } else {
-            fillHiPSCache();
+            let IDs = hipsList.map((h) => {
+                if (h instanceof Object) {
+                    return h.id;
+                } else {
+                    return h;
+                }
+            });
+
+            MocServer.getHiPSesFromIDs(IDs)
+            .then((HiPSes) => {
+                // Erase the HiPSlist with the one completed from the MOCServer
+                hipsList = [];
+                HiPSes.forEach((h) => {
+                    hipsList.push({
+                        id: h.ID,
+                        name: h.obs_title,
+                        regime: h.obs_regime,
+                    })
+                });
+
+                fillHiPSCache();
+            });
        }

        this.view.showCatalog(options.showCatalog);
--- a/src/js/ImageSurvey.js
+++ b/src/js/ImageSurvey.js
@@ -403,8 +403,9 @@ export let ImageSurvey = (function () {
        //console.log('new CACHE', ImageSurvey.cache, self.id, surveyOpt, ImageSurvey.cache[self.id], ImageSurvey.cache["CSIRO/P/RACS/mid/I"])

        // Tell that the HiPS List has been updated
-        ALEvent.HIPS_LIST_UPDATED.dispatchedTo(this.view.aladin.aladinDiv);
-
+        if (this.view) {
+            ALEvent.HIPS_LIST_UPDATED.dispatchedTo(this.view.aladin.aladinDiv);
+        }
    }

    /**
--- a/src/js/MocServer.js
+++ b/src/js/MocServer.js
@@ -64,6 +64,22 @@ export class MocServer {
        return this._allHiPSes;
    }

+    static getHiPSesFromIDs(ids) {
+        const params = {
+            //expr: "dataproduct_type=image||dataproduct_type=cube",
+            expr: "dataproduct_type=image&&ID=" + ids.join(','),
+            get: "record",
+            fmt: "json",
+            fields: "ID,hips_creator,hips_copyright,hips_frame,hips_tile_format,obs_title,obs_description,obs_copyright,obs_regime",
+            //fields: "ID,hips_initial_fov,hips_initial_ra,hips_initial_dec,hips_pixel_bitpix,hips_creator,hips_copyright,hips_frame,hips_order,hips_order_min,hips_tile_width,hips_tile_format,hips_pixel_cut,obs_title,obs_description,obs_copyright,obs_regime,hips_data_range,hips_service_url",
+        };
+
+        return Utils.loadFromUrls(MocServer.MIRRORS_HTTPS, {
+            data: params,
+            dataType: 'json'
+        })
+    }
+
    static getAllCatalogHiPSes() {
        if (!this._allCatalogHiPSes) {
            const params = {
--- a/src/js/View.js
+++ b/src/js/View.js
@@ -121,6 +121,38 @@ export let View = (function () {

        this.aladinDiv.ondragover = Utils.dragOverHandler;

+        this.throttledPositionChanged = Utils.throttle(
+            () => {
+                var posChangedFn = this.aladin.callbacksByEventName && this.aladin.callbacksByEventName['positionChanged'];
+                if (typeof posChangedFn === 'function') {
+                    var pos = this.aladin.pix2world(this.width / 2, this.height / 2);
+                    if (pos !== undefined) {
+                        posChangedFn({
+                            ra: pos[0],
+                            dec: pos[1],
+                            dragging: true
+                        });
+                    }
+                }
+            },
+            View.CALLBACKS_THROTTLE_TIME_MS,
+        );
+
+        this.throttledZoomChanged = Utils.throttle(
+            () => {
+                const fov = this.fov;
+                // trigger callback only if FoV (zoom) has changed !
+                if (fov !== this.oldFov) {
+                    const fovChangedFn = this.aladin.callbacksByEventName['zoomChanged'];
+                    (typeof fovChangedFn === 'function') && fovChangedFn(fov);
+
+                    // finally, save fov value
+                    this.oldFov = fov;
+                }
+            },
+            View.CALLBACKS_THROTTLE_TIME_MS,
+        );
+
        this.mustClearCatalog = true;
        this.mode = View.PAN;

@@ -231,7 +263,6 @@ export let View = (function () {
            self.fixLayoutDimensions();
        }

-        let doit;
        this.resizeObserver = new ResizeObserver(() => {
            //clearTimeout(doit);
            //doit = setTimeout(resizeLayout, 100);
@@ -240,38 +271,6 @@ export let View = (function () {

        self.resizeObserver.observe(this.aladinDiv)

-        this.throttledPositionChanged = Utils.throttle(
-            () => {
-                var posChangedFn = this.aladin.callbacksByEventName && this.aladin.callbacksByEventName['positionChanged'];
-                if (typeof posChangedFn === 'function') {
-                    var pos = this.aladin.pix2world(this.width / 2, this.height / 2);
-                    if (pos !== undefined) {
-                        posChangedFn({
-                            ra: pos[0],
-                            dec: pos[1],
-                            dragging: true
-                        });
-                    }
-                }
-            },
-            View.CALLBACKS_THROTTLE_TIME_MS,
-        );
-
-        this.throttledZoomChanged = Utils.throttle(
-            () => {
-                const fov = this.fov;
-                // trigger callback only if FoV (zoom) has changed !
-                if (fov !== this.oldFov) {
-                    const fovChangedFn = this.aladin.callbacksByEventName['zoomChanged'];
-                    (typeof fovChangedFn === 'function') && fovChangedFn(fov);
-
-                    // finally, save fov value
-                    this.oldFov = fov;
-                }
-            },
-            View.CALLBACKS_THROTTLE_TIME_MS,
-        );
-
        self.fixLayoutDimensions();
        self.redraw()

@@ -1099,7 +1098,7 @@ export let View = (function () {
            }

            view.debounceProgCatOnZoom();
-            view.throttledZoomChanged();
+            //view.throttledZoomChanged();

            // Zoom heuristic
            // First detect the device
@@ -1537,6 +1536,8 @@ export let View = (function () {
        fovY = Math.min(fovY, 180);

        ALEvent.ZOOM_CHANGED.dispatchedTo(this.aladinDiv, { fovX: fovX, fovY: fovY });
+
+        this.throttledZoomChanged();
    };

    /**
--- a/src/js/Zoom.js
+++ b/src/js/Zoom.js
@@ -66,7 +66,19 @@ import { requestAnimFrame } from "./libs/RequestAnimationFrame.js";
            view.idx = Zoom.LEVELS.length - 1
        }

-        return Zoom.LEVELS[view.idx];
+        let nextFov = Zoom.LEVELS[view.idx];
+
+        if (view.minFoV) {
+            nextFov = Math.max(nextFov, view.minFoV)
+            view.idx = Utils.binarySearch(Zoom.LEVELS, nextFov);
+        }
+
+        if (view.maxFoV) {
+            nextFov = Math.min(nextFov, view.maxFoV)
+            view.idx = Utils.binarySearch(Zoom.LEVELS, nextFov);
+        }
+
+        return nextFov;
    }

    Zoom.prototype.apply = function(options) {
--- a/src/js/gui/Box/HiPSSettingsBox.js
+++ b/src/js/gui/Box/HiPSSettingsBox.js
@@ -45,8 +45,7 @@ import { ColorCfg } from "../../ColorCfg.js";
     constructor(aladin, options) {
        super({
                cssStyle: {
-                    padding: '4px',
-                    backgroundColor: 'black',
+                    backgroundColor: '#333333'
                },
                close: false,
                ...options
--- a/src/js/gui/Box/StackBox.js
+++ b/src/js/gui/Box/StackBox.js
@@ -42,6 +42,9 @@ import addIconUrl from '../../../../assets/icons/plus.svg';
 import hideIconUrl from '../../../../assets/icons/hide.svg';
 import removeIconUrl from '../../../../assets/icons/remove.svg';
 import settingsIconUrl from '../../../../assets/icons/settings.svg';
+import filterOnUrl from '../../../../assets/icons/filter-on.svg';
+import filterOffUrl from '../../../../assets/icons/filter-off.svg';
+
 import { ImageFITS } from "../../ImageFITS.js";
 import searchIconImg from '../../../../assets/icons/search.svg';
 import { TogglerActionButton } from "../Button/Toggler.js";
@@ -50,6 +53,7 @@ import { ImageSurvey } from "../../ImageSurvey.js";
 import { Box } from "../Widgets/Box.js";
 import { CtxMenuActionButtonOpener } from "../Button/CtxMenuOpener.js";
 import { HiPSSearch } from "../Input/HiPSSearch.js";
+import { Input } from "../Widgets/Input.js";

 export class OverlayStackBox extends Box {
    /*static previewImagesUrl = {
@@ -89,6 +93,15 @@ export class OverlayStackBox extends Box {
        aladin.aladinDiv);
        this.aladin = aladin;

+        this.filterHiPSOn = false;
+        this.filterCallback = (HiPS) => {
+            if (this.filterParams.regime && HiPS.regime && this.filterParams.regime.toLowerCase() !== HiPS.regime.toLowerCase()) {
+                return false;
+            }
+
+            return true;
+        };
+
        this.mode = 'stack';

        this._addListeners();
@@ -402,6 +415,64 @@ export class OverlayStackBox extends Box {
            tooltip: { content: 'Add a HiPS or an FITS image', position: {direction: 'top'} },
        }, this.aladin);

+        this.filterParams = {
+            regime: 'Optical',
+        };
+        this.filterBox = new Box({
+            close: false,
+            content: [
+                Input.select({
+                    name: 'regime',
+                    value: 'Optical',
+                    options: ['Optical', 'UV', 'Radio', 'Infrared', 'X-ray', 'Gamma-ray'],
+                    change() {
+                        self.filterParams['regime'] = this.value;
+
+                        if (self.filterHiPSOn) {
+                            ALEvent.HIPS_LIST_UPDATED.dispatchedTo(self.aladin.aladinDiv);
+                        }
+                    },
+                    tooltip: {content: 'Observation regime', position: {direction: 'right'}}
+                })
+            ],
+        }, self.aladin.aladinDiv);
+        this.filterBox._hide();
+
+        this.filterEnabler = Input.checkbox({
+            name: 'filter-enabler',
+            checked: this.filterHiPSOn,
+            tooltip: { content: self.filterHiPSOn ? 'Filtering on' : 'Filtering off' },
+            click(e) {
+                self.filterHiPSOn = e.target.checked;
+                self.filterBtn.update({
+                    icon: {
+                        url: self.filterHiPSOn ? filterOnUrl : filterOffUrl,
+                        monochrome: true
+                    },
+                })
+
+                self.filterEnabler.update({
+                    tooltip: { content: self.filterHiPSOn ? 'Filtering on' : 'Filtering off' },
+                    checked: self.filterHiPSOn,
+                })
+
+                ALEvent.HIPS_LIST_UPDATED.dispatchedTo(self.aladin.aladinDiv);
+            }
+        })
+
+        this.filterBtn = new TogglerActionButton({
+            icon: {url: this.filterHiPSOn ? filterOnUrl : filterOffUrl, monochrome: true},
+            size: 'small',
+            tooltip: {content: 'Want to filter HiPS surveys by criteria ?', position: {direction: 'top'}},
+            toggled: false,
+            actionOn: (e) => {
+                self.filterBox._show({position: {nextTo: self.filterBtn, direction: 'right', aladin: self.aladin}});
+            },
+            actionOff: (e) => {
+                self.filterBox._hide();
+            },
+        });
+
        this.update({content: this.createLayout()});
    }

@@ -470,12 +541,18 @@ export class OverlayStackBox extends Box {
            HiPSSearch.HiPSList = {};
            for (var key in ImageSurvey.cache) {
                let HiPS = ImageSurvey.cache[key];
-                // search with the name or id
-                HiPSSearch.HiPSList[HiPS.name] = HiPS;
+
+                // apply filtering
+                if (!self.filterHiPSOn || (self.filterHiPSOn && !self.filterCallback) || (self.filterHiPSOn && self.filterCallback && self.filterCallback(HiPS))) {
+                    // search with the name or id
+                    HiPSSearch.HiPSList[HiPS.name] = HiPS;
+                }
            }

+            //console.log(HiPSSearch.HiPSList)
+
            let keys = Object.keys(HiPSSearch.HiPSList)
-            // change the autocomplete of all the search input text
+            // Change the autocomplete of all the search input text
            for (var key in this.HiPSui) {
                let hips = this.HiPSui[key];
                hips.searchInput.setAutocompletionList(keys)
@@ -496,6 +573,10 @@ export class OverlayStackBox extends Box {
            this.catBox._hide();
        }

+        if (this.filterBtn && this.filterBtn.toggled) {
+            this.filterBtn.toggle();
+        }
+
        if (this.addOverlayBtn)
            this.addOverlayBtn.hideMenu();

@@ -515,7 +596,7 @@ export class OverlayStackBox extends Box {
        layout = layout.concat(this._createOverlaysList());

        layout.push(Layout.horizontal({
-            layout: [this.addHiPSBtn, 'Surveys'],
+            layout: [this.addHiPSBtn, 'Surveys', this.filterEnabler, this.filterBtn],
        }))
        layout = layout.concat(this._createSurveysList());

--- a/src/js/gui/Widgets/Box.js
+++ b/src/js/gui/Widgets/Box.js
@@ -117,12 +117,7 @@ export class Box extends DOMElement {
                titleEl.style.cursor = 'move'
            }
    
-            Layout.horizontal({
-                cssStyle: {
-                    justifyContent: 'space-between',
-                },
-                layout: [draggableEl, titleEl]
-            }, this.el);
+            Layout.horizontal([draggableEl, titleEl], this.el);

            let separatorEl = document.createElement('div')
            separatorEl.classList.add("aladin-box-separator");