From dfbf8c33e6876e2ae2da13fc01b37567ee816a3e Mon Sep 17 00:00:00 2001
From: Matthieu BAUMANN <matthieubaumann@cds-dev-mb-2.local>
Date: Tue, 14 Feb 2023 16:01:18 +0100
Subject: [PATCH] fix progressive cat, remove depth on Layers struct

---
 examples/al-badbaselayer.html            |   2 +-
 examples/al-coronelli.html               |   1 -
 src/core/Cargo.toml                      |   2 +-
 src/core/al-api/src/cell.rs              |   2 +-
 src/core/al-api/src/hips.rs              |  28 +--
 src/core/src/app.rs                      |  23 ++-
 src/core/src/healpix/coverage.rs         |   5 +-
 src/core/src/lib.rs                      |  21 ++-
 src/core/src/renderable/mod.rs           | 224 ++++++++++++-----------
 src/core/src/survey/config.rs            |   2 +-
 src/core/src/survey/view.rs              |   6 +-
 src/css/aladin.css                       |   1 -
 src/js/{ImageColorCfg.js => ColorCfg.js} |   0
 src/js/ImageSurvey.js                    |  26 +--
 src/js/ProgressiveCat.js                 |   7 +-
 src/js/View.js                           |  88 +++------
 src/js/gui/HiPSLayer.js                  |   1 -
 17 files changed, 202 insertions(+), 237 deletions(-)
 rename src/js/{ImageColorCfg.js => ColorCfg.js} (100%)

diff --git a/examples/al-badbaselayer.html b/examples/al-badbaselayer.html
index 581d6e8d..5e0b99c7 100644
--- a/examples/al-badbaselayer.html
+++ b/examples/al-badbaselayer.html
@@ -9,7 +9,7 @@
 
 <script type="text/javascript">
 A.init.then(() => {
-    let aladin = A.aladin('#aladin-lite-div', {projection: "AIT"});
+    let aladin = A.aladin('#aladin-lite-div', {fov: 70,projection: "AIT"});
     let hsc = aladin.newImageSurvey("P/HSC/DR2/deep/g", {colormap:"Purples", imgFormat: "fits"});
     aladin.setBaseImageLayer(hsc);
 
diff --git a/examples/al-coronelli.html b/examples/al-coronelli.html
index f017064a..36c35673 100644
--- a/examples/al-coronelli.html
+++ b/examples/al-coronelli.html
@@ -15,7 +15,6 @@
         <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons.css">
         <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons-core.css">
     
-        <link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css">
         <!--meta name="viewport" content="initial-scale=1.0, user-scalable=no"-->
         <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     </head>
diff --git a/src/core/Cargo.toml b/src/core/Cargo.toml
index 63a905c0..5e795754 100644
--- a/src/core/Cargo.toml
+++ b/src/core/Cargo.toml
@@ -25,7 +25,7 @@ js-sys = "0.3.47"
 wasm-bindgen-futures = "0.4.20"
 cgmath = "*"
 cdshealpix = "0.6.4"
-moclib = { package = "moc", git = 'https://github.com/cds-astro/cds-moc-rust', branch = 'main' }
+moclib = { package = "moc", version = "0.10.1" }
 serde = { version = "^1.0.59", features = ["derive"] }
 serde_json = "1.0"
 serde-wasm-bindgen = "0.4"
diff --git a/src/core/al-api/src/cell.rs b/src/core/al-api/src/cell.rs
index acd3014a..49107c5d 100644
--- a/src/core/al-api/src/cell.rs
+++ b/src/core/al-api/src/cell.rs
@@ -1,6 +1,6 @@
 use serde::{Serialize, Deserialize};
 
-#[derive(Clone)]
+#[derive(Clone, Debug)]
 #[derive(Deserialize, Serialize)]
 pub struct HEALPixCellProjeted {
     pub ipix: u64,
diff --git a/src/core/al-api/src/hips.rs b/src/core/al-api/src/hips.rs
index 86c267c9..506c4a1a 100644
--- a/src/core/al-api/src/hips.rs
+++ b/src/core/al-api/src/hips.rs
@@ -2,26 +2,14 @@ use wasm_bindgen::JsValue;
 
 use super::blend::BlendCfg;
 use serde::Deserialize;
-#[derive(Deserialize, Debug)]
-pub struct CompositeHiPS {
-    hipses: Vec<SimpleHiPS>,
-}
-
-use std::iter::IntoIterator;
-impl IntoIterator for CompositeHiPS {
-    type Item = SimpleHiPS;
-    type IntoIter = std::vec::IntoIter<Self::Item>;
-
-    fn into_iter(self) -> Self::IntoIter {
-        self.hipses.into_iter()
-    }
-}
 
 #[derive(Deserialize, Debug, Clone)]
 #[serde(rename_all = "camelCase")]
-pub struct SimpleHiPS {
+pub struct HiPSCfg {
     /// Layer name
     pub layer: String,
+    // Index order of the layer
+    pub idx: usize,
 
     /// The HiPS metadata
     pub properties: HiPSProperties,
@@ -29,9 +17,9 @@ pub struct SimpleHiPS {
     pub meta: ImageSurveyMeta,
 }
 
-impl SimpleHiPS {
-    pub fn get_layer(&self) -> String {
-        self.layer.clone()
+impl HiPSCfg {
+    pub fn get_layer(&self) -> &str {
+        &self.layer
     }
 
     pub fn get_properties(&self) -> &HiPSProperties {
@@ -66,8 +54,8 @@ pub struct HiPSProperties {
 
 impl HiPSProperties {
     #[inline]
-    pub fn get_url(&self) -> String {
-        self.url.clone()
+    pub fn get_url(&self) -> &str {
+        &self.url
     }
 
     #[inline]
diff --git a/src/core/src/app.rs b/src/core/src/app.rs
index d0f7d8f0..00af382b 100644
--- a/src/core/src/app.rs
+++ b/src/core/src/app.rs
@@ -26,7 +26,7 @@ use al_core::colormap::{Colormap, Colormaps};
 use al_api::{
     coo_system::CooSystem,
     grid::GridCfg,
-    hips::{ImageSurveyMeta, SimpleHiPS},
+    hips::{ImageSurveyMeta, HiPSCfg},
 };
 use crate::Abort;
 use super::coosys;
@@ -398,9 +398,11 @@ impl App {
 
     pub(crate) fn get_visible_cells(&self, depth: u8) -> Box<[HEALPixCellProjeted]> {
         let coverage = crate::survey::view::compute_view_coverage(&self.camera, depth, &CooSystem::ICRSJ2000);
+
         let cells: Vec<_> = coverage.flatten_to_fixed_depth_cells()
             .filter_map(|ipix| {
                 let cell = HEALPixCell(depth, ipix);
+
                 if let Ok(v) = crate::survey::view::vertices(&cell, &self.camera, &self.projection) {
                     let vx = [v[0].x, v[1].x, v[2].x, v[3].x];
                     let vy = [v[0].y, v[1].y, v[2].y, v[3].y];
@@ -829,17 +831,22 @@ impl App {
         Ok(())
     }
 
-    pub(crate) fn set_image_surveys(&mut self, hipses: Vec<SimpleHiPS>) -> Result<(), JsValue> {
-        self.layers.set_image_surveys(hipses, &self.gl, &mut self.camera, &self.projection)?;
+    pub(crate) fn remove_layer(&mut self, layer: &str) -> Result<(), JsValue> {
+        self.layers.remove_layer(layer, &mut self.camera, &self.projection)?;
 
-        for hips in self.layers.values_hips() {
-            self.tile_fetcher.launch_starting_hips_requests(hips, &mut self.downloader);
-        }
+        self.request_redraw = true;
+
+        Ok(())
+    }
+
+    pub(crate) fn add_image_survey(&mut self, hips_cfg: HiPSCfg) -> Result<(), JsValue> {
+        let hips = self.layers.add_image_survey(&self.gl, hips_cfg, &mut self.camera, &self.projection)?;
+        self.tile_fetcher.launch_starting_hips_requests(hips, &mut self.downloader);
 
         // Once its added, request the tiles in the view (unless the viewer is at depth 0)
         self.request_for_new_tiles = true;
         self.request_redraw = true;
-        self.grid.update(&self.camera, &self.projection);
+        //self.grid.update(&self.camera, &self.projection);
 
         Ok(())
     }
@@ -1164,7 +1171,7 @@ impl App {
     }
 
     pub(crate) fn get_norder(&self) -> i32 {
-        self.layers.get_depth() as i32
+        self.camera.get_tile_depth() as i32
     }
 
     pub(crate) fn get_clip_zoom_factor(&self) -> f64 {
diff --git a/src/core/src/healpix/coverage.rs b/src/core/src/healpix/coverage.rs
index 73d39aa6..a3808b75 100644
--- a/src/core/src/healpix/coverage.rs
+++ b/src/core/src/healpix/coverage.rs
@@ -8,7 +8,7 @@ use cgmath::{Vector3, Vector4};
 pub type Smoc = RangeMOC<u64, Hpx<u64>>;
 
 use crate::healpix::cell::HEALPixCell;
-#[derive(Clone)]
+#[derive(Clone, Debug)]
 pub struct HEALPixCoverage(pub Smoc);
 
 use moclib::elemset::range::MocRanges;
@@ -22,7 +22,6 @@ impl HEALPixCoverage {
         // typically the center of projection
         inside: &Vector3<f64>,
     ) -> Self {
-
         let lonlat = vertices
             .iter()
             .map(|vertex| {
@@ -31,7 +30,7 @@ impl HEALPixCoverage {
             })
             .collect::<Vec<_>>();
         let (inside_lon, inside_lat) = math::lonlat::xyz_to_radec(inside);
-        
+
         let moc = RangeMOC::from_polygon_with_control_point(&lonlat[..], (inside_lon.0, inside_lat.0), depth);
         HEALPixCoverage(moc)
     }
diff --git a/src/core/src/lib.rs b/src/core/src/lib.rs
index 770d45a3..0d29c618 100644
--- a/src/core/src/lib.rs
+++ b/src/core/src/lib.rs
@@ -95,7 +95,7 @@ use moclib::deser::fits;
 
 use std::io::Cursor;
 
-use al_api::hips::{HiPSColor, HiPSProperties, SimpleHiPS};
+use al_api::hips::{HiPSColor, HiPSProperties, HiPSCfg};
 
 use al_core::Colormap;
 use al_core::{WebGlContext};
@@ -298,16 +298,19 @@ impl WebClient {
     /// * If the number of surveys is greater than 4. For the moment, due to the limitations
     ///   of WebGL2 texture units on some architectures, the total number of surveys rendered is
     ///   limited to 4.
-    #[wasm_bindgen(js_name = setImageSurveys)]
-    pub fn set_image_surveys(&mut self, surveys: Vec<JsValue>) -> Result<(), JsValue> {
+    #[wasm_bindgen(js_name = addImageSurvey)]
+    pub fn add_image_survey(&mut self, hips: JsValue) -> Result<(), JsValue> {
         // Deserialize the survey objects that compose the survey
-        let surveys: Result<Vec<SimpleHiPS>, serde_wasm_bindgen::Error> = surveys
-            .into_iter()
-            .map(|hips| serde_wasm_bindgen::from_value(hips))
-            .collect::<Result<Vec<_>, _>>();
+        let hips: HiPSCfg = serde_wasm_bindgen::from_value(hips)?;
+        self.app.add_image_survey(hips)?;
 
-        let surveys = surveys?;
-        self.app.set_image_surveys(surveys)?;
+        Ok(())
+    }
+
+    #[wasm_bindgen(js_name = removeLayer)]
+    pub fn remove_layer(&mut self, layer: String) -> Result<(), JsValue> {
+        // Deserialize the survey objects that compose the survey
+        self.app.remove_layer(&layer)?;
 
         Ok(())
     }
diff --git a/src/core/src/renderable/mod.rs b/src/core/src/renderable/mod.rs
index 5deaa169..62ded99c 100644
--- a/src/core/src/renderable/mod.rs
+++ b/src/core/src/renderable/mod.rs
@@ -14,6 +14,7 @@ pub use grid::ProjetedGrid;
 
 use al_api::hips::ImageSurveyMeta;
 use al_api::color::ColorRGB;
+use al_api::hips::HiPSCfg;
 
 use al_core::VertexArrayObject;
 use al_core::SliceData;
@@ -29,7 +30,6 @@ use crate::renderable::image::FitsImage;
 use crate::camera::CameraViewPort;
 use crate::shader::ShaderId;
 use crate::{shader::ShaderManager, survey::config::HiPSConfig};
-use crate::SimpleHiPS;
 
 // Recursively compute the number of subdivision needed for a cell
 // to not be too much skewed
@@ -39,7 +39,7 @@ use hips::raytracing::RayTracer;
 use web_sys::{WebGl2RenderingContext};
 use wasm_bindgen::JsValue;
 use std::borrow::Cow;
-use std::collections::{HashSet, HashMap};
+use std::collections::HashMap;
 
 pub(crate) type Url = String;
 type LayerId = String;
@@ -52,9 +52,7 @@ pub struct Layers {
     // Hashmap between urls and layers
     urls: HashMap<LayerId, Url>,
     // Layers given in a specific order to draw
-    ids: Vec<LayerId>,
-
-    most_precise_survey: Url,
+    layers: Vec<LayerId>,
 
     raytracer: RayTracer,
     // A vao that takes all the screen
@@ -62,8 +60,6 @@ pub struct Layers {
 
     background_color: ColorRGB,
 
-    depth: u8,
-
     gl: WebGlContext,
 }
 
@@ -89,7 +85,7 @@ impl Layers {
         let images = HashMap::new();
         let meta = HashMap::new();
         let urls = HashMap::new();
-        let ids = Vec::new();
+        let layers = Vec::new();
 
         // - The raytracer is a mesh covering the view. Each pixel of this mesh
         //   is unprojected to get its (ra, dec). Then we query ang2pix to get
@@ -98,7 +94,6 @@ impl Layers {
         //   This mode of rendering is used for big FoVs
         let raytracer = RayTracer::new(gl, &projection)?;
         let gl = gl.clone();
-        let most_precise_survey = String::new();
 
         let mut screen_vao = VertexArrayObject::new(&gl);
         #[cfg(feature = "webgl2")]
@@ -137,7 +132,6 @@ impl Layers {
             // Unbind the buffer
             .unbind();
 
-        let depth = 0;
         let background_color = DEFAULT_BACKGROUND_COLOR;
         Ok(Layers {
             surveys,
@@ -145,12 +139,9 @@ impl Layers {
 
             meta,
             urls,
-            ids,
-
-            most_precise_survey,
+            layers,
 
             raytracer,
-            depth,
 
             background_color,
             screen_vao,
@@ -174,10 +165,6 @@ impl Layers {
                 }
             }
 
-            if self.most_precise_survey == past_url {
-                self.most_precise_survey = new_url.clone();
-            }
-
             Ok(())
         } else {
             Err(JsValue::from_str("Survey not found"))
@@ -216,7 +203,7 @@ impl Layers {
         // if neither are, we draw a font
         // if there are, we do not draw nothing
         if !self.surveys.is_empty() {
-            let not_render_transparency_font = self.ids.iter()
+            let not_render_transparency_font = self.layers.iter()
                 .any(|layer| {
                     let meta = self.meta.get(layer).unwrap_abort();
                     let url = self.urls.get(layer).unwrap_abort();
@@ -257,7 +244,7 @@ impl Layers {
         // Pre loop over the layers to see if a HiPS is entirely covering those behind
         // so that we do not have to render those
         let mut idx_start_layer = 0;
-        for (idx_layer, layer) in self.ids.iter().enumerate().skip(1) {
+        for (idx_layer, layer) in self.layers.iter().enumerate().skip(1) {
             let meta = self.meta.get(layer).expect("Meta should be found");
 
             let url = self.urls.get(layer).expect("Url should be found");
@@ -270,7 +257,7 @@ impl Layers {
             }
         }
 
-        let rendered_layers = &self.ids[idx_start_layer..];
+        let rendered_layers = &self.layers[idx_start_layer..];
         for layer in rendered_layers {
             let draw_opt = self.meta.get(layer).expect("Meta should be found");
             if draw_opt.visible() {
@@ -323,96 +310,121 @@ impl Layers {
         Ok(())
     }
 
-    pub fn set_image_surveys(
+    pub fn remove_layer(&mut self, layer: &str, camera: &mut CameraViewPort, projection: &ProjectionType) -> Result<(), JsValue> {
+        let err_layer_not_found = JsValue::from_str(&format!("Layer {:?} not found, so cannot be removed.", layer));
+        // Color configs, and urls are indexed by layer
+        self.meta.remove(layer)
+            .ok_or(err_layer_not_found.clone())?;
+        let url = self.urls.remove(layer).ok_or(err_layer_not_found.clone())?;
+        // layer from layers does also need to be removed
+        let id_layer = self.layers.iter()
+            .position(|l| layer == l)
+            .ok_or(err_layer_not_found)?;
+        self.layers.remove(id_layer);
+
+        // Loop over all the meta for its longitude reversed property
+        // and set the camera to it if there is at least one
+        let longitude_reversed = self.meta.values()
+            .any(|meta| {
+                meta.longitude_reversed
+            });
+
+        camera.set_longitude_reversed(longitude_reversed, projection);
+
+        // Check if the url is still used
+        let url_still_used = self.urls.values().any(|rem_url| rem_url == &url);
+        if url_still_used {
+            // Keep the resource whether it is a HiPS or a FITS
+            Ok(())
+        } else {
+            // Resource not needed anymore
+            if let Some(_) = self.surveys.remove(&url) {
+                // A HiPS has been found and removed
+                Ok(())
+            } else if let Some(_) = self.images.remove(&url) {
+                // A FITS image has been found and removed
+                Ok(())
+            } else {
+                Err(JsValue::from_str(&format!("Url found {:?} is associated to no surveys.", url)))
+            }
+        }
+    }
+
+    pub fn add_image_survey(
         &mut self,
-        hipses: Vec<SimpleHiPS>,
         gl: &WebGlContext,
+        hips: HiPSCfg,
         camera: &mut CameraViewPort,
         projection: &ProjectionType
-    ) -> Result<(), JsValue> {
+    ) -> Result<&HiPS, JsValue> {
         // 1. Check if layer duplicated have been given
-        for i in 0..hipses.len() {
-            for j in 0..i {
-                if hipses[i].get_layer() == hipses[j].get_layer() {
-                    let layer = &hipses[i].get_layer();
-                    return Err(JsValue::from_str(&format!(
-                        "{:?} layer name are duplicates",
-                        layer
-                    )));
-                }
-            }
-        }
-
-        let mut current_needed_surveys = HashSet::new();
-        for hips in hipses.iter() {
-            let url = hips.get_properties().get_url();
-            current_needed_surveys.insert(url);
-        }
-
-        // Remove surveys that are not needed anymore
-        self.surveys = self
-            .surveys
-            .drain()
-            .filter(|(_, m)| current_needed_surveys.contains(&m.get_config().root_url))
-            .collect();
-
-        // Create the new surveys
-        let mut max_depth_among_surveys = 0;
-
-        self.meta.clear();
-        self.ids.clear();
-        self.urls.clear();
-
-        let _num_surveys = hipses.len();
-        let mut longitude_reversed = false;
-        for SimpleHiPS {
+        let HiPSCfg {
             layer,
+            idx,
             properties,
             meta,
-            ..
-        } in hipses.into_iter()
-        {
-            let config = HiPSConfig::new(&properties, meta.img_format)?;
-            //camera.set_longitude_reversed(meta.longitude_reversed);
+        } = hips;
 
-            // Get the most precise survey from all the ones given
-            let url = properties.get_url();
-            let max_order = properties.get_max_order();
-            if max_order > max_depth_among_surveys {
-                max_depth_among_surveys = max_order;
-                self.most_precise_survey = url.clone();
-            }
+        let layer_already_found = self.layers.iter()
+            .any(|s| {
+                s == &layer
+            });
 
-            // Add the new surveys
-            if !self.surveys.contains_key(&url) {
-                let survey = HiPS::new(config, gl, camera)?;
-                self.surveys.insert(url.clone(), survey);
-
-                // A new survey has been added and it is lonely
-                /*if num_surveys == 1 {
-                    if let Some(initial_ra) = properties.get_initial_ra() {
-                        if let Some(initial_dec) = properties.get_initial_dec() {
-                            camera.set_center::<P>(&LonLatT(Angle((initial_ra).to_radians()), Angle((initial_dec).to_radians())), &properties.get_frame());
-                        }
-                    }
-
-                    if let Some(initial_fov) = properties.get_initial_fov() {
-                        camera.set_aperture::<P>(Angle((initial_fov).to_radians()));
-                    }
-                }*/
-            }
-
-            longitude_reversed |= meta.longitude_reversed;
-
-            self.meta.insert(layer.clone(), meta);
-            self.urls.insert(layer.clone(), url);
-
-            self.ids.push(layer);
+        if layer_already_found {
+            self.remove_layer(&layer, camera, projection)?;
         }
 
-        camera.set_longitude_reversed(longitude_reversed, &projection);
+        let url = String::from(properties.get_url());
+        // The layer does not already exist
+        // Let's check if no other hipses points to the
+        // same url than `hips`
+        let url_already_found = self.surveys.keys()
+            .any(|hips_url| {
+                hips_url == &url
+            });
 
-        Ok(())
+        if !url_already_found {
+            // The url is not processed yet
+            let cfg = HiPSConfig::new(&properties, meta.img_format)?;
+
+            /*if let Some(initial_ra) = properties.get_initial_ra() {
+                if let Some(initial_dec) = properties.get_initial_dec() {
+                    camera.set_center::<P>(&LonLatT(Angle((initial_ra).to_radians()), Angle((initial_dec).to_radians())), &properties.get_frame());
+                }
+            }
+
+            if let Some(initial_fov) = properties.get_initial_fov() {
+                camera.set_aperture::<P>(Angle((initial_fov).to_radians()));
+            }*/
+
+            let hips = HiPS::new(cfg, gl, camera)?;
+
+            self.surveys.insert(url.clone(), hips);
+        }
+
+        self.urls.insert(layer.clone(), url.clone());
+
+        self.meta.insert(layer.clone(), meta);
+        if self.layers.len() <= idx {
+            self.layers.resize(idx + 1, layer.to_string());
+        }
+        self.layers[idx] = layer;
+
+        // Refresh the views of all the surveys
+        // this is necessary to compute the max depth between the surveys
+        self.refresh_views(camera);
+
+        // Loop over all the meta for its longitude reversed property
+        // and set the camera to it if there is at least one
+        let longitude_reversed = self.meta.values()
+            .any(|meta| {
+                meta.longitude_reversed
+            });
+
+        camera.set_longitude_reversed(longitude_reversed, projection);
+
+        let hips = self.surveys.get(&url).ok_or(JsValue::from_str("HiPS not found"))?;
+        Ok(hips)
     }
 
     pub fn add_fits_image(&mut self) {
@@ -464,27 +476,19 @@ impl Layers {
     }
 
     pub fn refresh_views(&mut self, camera: &mut CameraViewPort) {
-        self.depth = 0;
-
         for survey in self.surveys.values_mut() {
             survey.refresh_view(camera);
-            
-            self.depth = self.depth.max(survey.get_depth());
         }
     }
 
     // Accessors
-    pub fn get_depth(&self) -> u8 {
-        self.depth
-    }
-
     // HiPSes getters
-    pub fn get_hips_from_layer(&self, id: &str) -> Option<&HiPS> {
-        self.urls.get(id).map(|url| self.surveys.get(url).unwrap_abort())
+    pub fn get_hips_from_layer(&self, layer: &str) -> Option<&HiPS> {
+        self.urls.get(layer).map(|url| self.surveys.get(url).unwrap_abort())
     }
 
-    pub fn get_mut_hips_from_layer(&mut self, id: &str) -> Option<&mut HiPS> {
-        let url = self.urls.get_mut(id);
+    pub fn get_mut_hips_from_layer(&mut self, layer: &str) -> Option<&mut HiPS> {
+        let url = self.urls.get_mut(layer);
         if let Some(url) = url {
             self.surveys.get_mut(url)
         } else {
diff --git a/src/core/src/survey/config.rs b/src/core/src/survey/config.rs
index 3ac1c10e..68533bdc 100644
--- a/src/core/src/survey/config.rs
+++ b/src/core/src/survey/config.rs
@@ -283,7 +283,7 @@ impl HiPSConfig {
         let min_depth_tile = min_depth_texture;
         let hips_config = HiPSConfig {
             // HiPS name
-            root_url,
+            root_url: root_url.to_string(),
             // Tile size & blank tile data
             empty_image,
             // Texture config
diff --git a/src/core/src/survey/view.rs b/src/core/src/survey/view.rs
index 38311877..19ca922b 100644
--- a/src/core/src/survey/view.rs
+++ b/src/core/src/survey/view.rs
@@ -113,11 +113,13 @@ pub fn compute_view_coverage(camera: &CameraViewPort, depth: u8, dst_frame: &Coo
                 let inside_vertex = coosys::apply_coo_system(camera_frame, dst_frame, inside_vertex);
 
                 // Prefer to query from_polygon with depth >= 2
-                HEALPixCoverage::new(
+                let moc = HEALPixCoverage::new(
                     depth,
                     &vertices[..],
                     &inside_vertex.truncate(),
-                )
+                );
+
+                moc
             }
         } else {
             HEALPixCoverage::allsky(depth)
diff --git a/src/css/aladin.css b/src/css/aladin.css
index 8b88ef0f..1f6e363c 100644
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -288,7 +288,6 @@ input[type=number], input[type=text], input[type=range] {
   line-height: 2.0;
   font-weight: bold;
   cursor: pointer;
-  border-radius: 4px;
 }
 
 .aladin-box-content {
diff --git a/src/js/ImageColorCfg.js b/src/js/ColorCfg.js
similarity index 100%
rename from src/js/ImageColorCfg.js
rename to src/js/ColorCfg.js
diff --git a/src/js/ImageSurvey.js b/src/js/ImageSurvey.js
index 6ebc4787..8bdf73a1 100644
--- a/src/js/ImageSurvey.js
+++ b/src/js/ImageSurvey.js
@@ -33,7 +33,7 @@ import { ALEvent } from "./events/ALEvent.js";
 import { CooFrameEnum } from "./CooFrameEnum.js"
 import { Aladin } from "./Aladin.js";
 import { MocServer } from "./MocServer.js";
-import { ColorCfg } from "./ImageColorCfg.js";
+import { ColorCfg } from "./ColorCfg.js";
 
 export async function fetchSurveyProperties(rootURLOrId) {
     if (!rootURLOrId) {
@@ -45,13 +45,6 @@ export async function fetchSurveyProperties(rootURLOrId) {
         isUrl = true;
     }
 
-    const request = async (url) => {
-        const response = await fetch(url);
-        const json = await response.json();
-
-        return json;
-    };
-
     let metadata = {};
     // If an HiPS id has been given
     if (!isUrl) {
@@ -421,17 +414,24 @@ export let ImageSurvey = (function() {
                 // If the layer has been set then it is linked to the aladin lite view
                 // so we add it
                 if (self.added) {
-                    self.backend.commitSurveysToBackend(self, self.layer);
+                    self.backend.addImageSurvey(self, self.layer);
                 }
             } catch(e) {
                 // Check if no surveys have been added
-                if (view.aladin.empty && self.layer === "base") {
+                /*if (view.aladin.empty && self.layer === "base") {
                     console.error(e)
                     console.warn("DSS2/color is chosen by default.");
                     view.aladin.setBaseImageLayer(Aladin.DEFAULT_OPTIONS.survey)
-                } else {
-                    throw e;
-                }
+                } else {*/
+                    console.error(e)
+                    if (view.aladin.empty && self.layer == "base") {
+                        console.warn("DSS2/color is chosen by default.");
+                        view.aladin.setBaseImageLayer(Aladin.DEFAULT_OPTIONS.survey)
+                    }
+
+                    //view.aladin.setOverlayImageLayer(Aladin.DEFAULT_OPTIONS.survey, self.layer);
+                    //throw e;
+                //}
             }
         })();
     };
diff --git a/src/js/ProgressiveCat.js b/src/js/ProgressiveCat.js
index 03d00a33..d3356163 100644
--- a/src/js/ProgressiveCat.js
+++ b/src/js/ProgressiveCat.js
@@ -58,7 +58,7 @@ export let ProgressiveCat = (function() {
 
         this.frameStr = frameStr;
         this.frame = CooFrameEnum.fromString(frameStr) || CooFrameEnum.J2000;
-        this.maxOrder = maxOrder;
+        this.maxOrder = parseInt(maxOrder);
         this.isShowing = true; // TODO : inherit from catalogue
 
         this.name = options.name || "progressive-cat";
@@ -231,7 +231,7 @@ export let ProgressiveCat = (function() {
                 ProgressiveCat.readProperties(self.rootUrl,
                     function (properties) {
                         self.properties = properties;
-                        self.maxOrder = self.properties['hips_order'];
+                        self.maxOrder = parseInt(self.properties['hips_order']);
                         self.frame = CooFrameEnum.fromString(self.properties['hips_frame']);
 
                         self._loadMetadata();
@@ -478,12 +478,13 @@ export let ProgressiveCat = (function() {
             this.tilesInView = [];
             
             var norder = this.view.realNorder;
-            if (norder>this.maxOrder) {
+            if (norder > this.maxOrder) {
                 norder = this.maxOrder;
             }
             if (norder<=this.maxOrderAllsky) {
                 return; // nothing to do, hurrayh !
             }
+
             var cells = this.view.getVisibleCells(norder);
 
             var ipixList, ipix;
diff --git a/src/js/View.js b/src/js/View.js
index 890fec8a..fccd96ba 100644
--- a/src/js/View.js
+++ b/src/js/View.js
@@ -45,7 +45,7 @@ import { requestAnimFrame } from "./libs/RequestAnimationFrame.js";
 import { WebGLCtx } from "./WebGL.js";
 import { Logger } from "./Logger.js";
 import { ALEvent } from "./events/ALEvent.js";
-import { ColorCfg } from "./ImageColorCfg.js";
+import { ColorCfg } from "./ColorCfg.js";
 
 import $ from 'jquery';
 
@@ -289,7 +289,6 @@ export let View = (function () {
         }
 
         this.computeNorder();
-
         this.redraw();
     };
 
@@ -642,20 +641,14 @@ export let View = (function () {
                 const cx = (xymouse.x - cs.x) / view.catalogCanvas.clientWidth;
                 const cy = -(xymouse.y - cs.y) / view.catalogCanvas.clientHeight;
 
-                //if (selectedSurvey.colored && selectedSurvey.getColorCfg().getColormap() === "native") {
-                //    selectedSurvey.setSaturation(2*cx);
-                //    selectedSurvey.setBrightness(2*cy);
-                //} else {
-                    const offset = (cutMaxInit - cutMinInit) * cx;
+                const offset = (cutMaxInit - cutMinInit) * cx;
 
-                    const lr = offset + (1.0 - 2.0 * cy) * cutMinInit;
-                    const rr = offset + (1.0 + 2.0 * cy) * cutMaxInit;
-
-                    if (lr <= rr) {
-                        selectedSurvey.setCuts(lr, rr)
-                    }
-                //}
+                const lr = offset + (1.0 - 2.0 * cy) * cutMinInit;
+                const rr = offset + (1.0 + 2.0 * cy) * cutMaxInit;
 
+                if (lr <= rr) {
+                    selectedSurvey.setCuts(lr, rr)
+                }
                 return;
             }
 
@@ -1278,7 +1271,6 @@ export let View = (function () {
         }
         
         return cells;*/
-
         return this.aladin.webglAPI.getVisibleCells(norder);
     };
 
@@ -1509,49 +1501,16 @@ export let View = (function () {
 
         survey.added = true;
         survey.layer = layer;
-        survey.existedBefore = false;
-
-        const pastSurvey = this.imageSurveys.get(layer);
-        if (pastSurvey && pastSurvey.ready && pastSurvey.added) {
-            survey.existedBefore = true;
-        }
+        // This layer is the toppest one
+        this.selectedSurveyLayer = layer;
 
         this.imageSurveys.set(layer, survey);
 
         if (survey.ready) {
-            this.commitSurveysToBackend(survey, layer);
+            this.addImageSurvey(survey, layer);
         }
     };
 
-    View.prototype.buildSortedImageSurveys = function () {
-        let sortedImageSurveys = [];
-
-        this.overlayLayers.forEach((overlaidLayer) => {
-            sortedImageSurveys.push(
-                this.imageSurveys.get(overlaidLayer)
-            );
-        });
-
-        return sortedImageSurveys;
-    }
-
-    View.prototype.updateImageLayerStack = function () {
-        let surveys = this.buildSortedImageSurveys()
-            .filter(s => s !== undefined && s.properties)
-            .map(s => {
-                return {
-                    layer: s.layer,
-                    properties: s.properties,
-                    meta: s.metadata(),
-                };
-            });
-        this.aladin.empty = false;
-        this.aladin.webglAPI.setImageSurveys(surveys);
-
-        //const fov = this.aladin.webglAPI.getCenter();
-        //this.setZoom(this.aladin.webglAPI.getFieldOfView());
-    };
-
     View.prototype.removeImageSurvey = function (layer) {
         this.imageSurveys.delete(layer);
 
@@ -1565,25 +1524,30 @@ export let View = (function () {
         this.overlayLayers.splice(idxOverlaidSurveyFound, 1);
 
         // Update the backend
-        this.updateImageLayerStack();
+        this.aladin.webglAPI.removeLayer(layer);
 
+        // find the toppest layer
         if (this.selectedSurveyLayer === layer) {
-            this.selectedSurveyLayer = null;
+            let toppestLayer = this.overlayLayers[this.overlayLayers.length - 1];
+            this.selectedSurveyLayer = toppestLayer;
         }
 
         ALEvent.HIPS_LAYER_REMOVED.dispatchedTo(this.aladinDiv, { layer: layer });
     };
 
-    View.prototype.commitSurveysToBackend = function (survey, layer = "base") {
-        try {
-            this.updateImageLayerStack();
 
-            if (survey.existedBefore) {
-                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.aladinDiv, { survey: survey });
-            } else {
-                survey.existedBefore = true;
-                ALEvent.HIPS_LAYER_ADDED.dispatchedTo(this.aladinDiv, { survey: survey });
-            }
+    View.prototype.addImageSurvey = function (survey, layer = "base") {
+        try {
+            this.aladin.empty = false;
+            const idxOverlaySurveyFound = this.overlayLayers.findIndex(overlayLayer => overlayLayer == layer);
+            this.aladin.webglAPI.addImageSurvey({
+                layer: survey.layer,
+                idx: idxOverlaySurveyFound,
+                properties: survey.properties,
+                meta: survey.metadata(),
+            });
+
+            ALEvent.HIPS_LAYER_ADDED.dispatchedTo(this.aladinDiv, { survey: survey });
         } catch (e) {
             // En error occured while loading the HiPS
             // Remove it from the View
diff --git a/src/js/gui/HiPSLayer.js b/src/js/gui/HiPSLayer.js
index d7831531..1ce47e97 100644
--- a/src/js/gui/HiPSLayer.js
+++ b/src/js/gui/HiPSLayer.js
@@ -33,7 +33,6 @@ import { ALEvent } from "../events/ALEvent.js";
 import { HiPSSelector } from "./HiPSSelector.js";
 
 import $ from 'jquery';
-import { ColorCfg } from "../ImageColorCfg.js";
 
 export class HiPSLayer {