fmt

run clippy + fmt
final commit
2026-04-30 04:38:57 -07:00 · 2025-09-09 17:00:41 +02:00 · 2025-09-09 17:00:01 +02:00 · 2025-09-09 16:56:38 +02:00 · 2025-09-08 17:53:00 +02:00 · 2025-09-05 14:54:04 +02:00
75 changed files with 4392 additions and 1786 deletions
--- a/examples/al-displayFITS.html
+++ b/examples/al-displayFITS.html
@@ -11,11 +11,12 @@
    import A from '../src/js/A.js';
    let aladin;
    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {cooFrame: "icrs", log: false, backgroundColor: 'red'});
+        aladin = A.aladin('#aladin-lite-div', {cooFrame: "icrs", log: false, backgroundColor: 'rgba(0, 0, 0, 255)'});

        aladin.displayFITS(
            //'https://fits.gsfc.nasa.gov/samples/FOCx38i0101t_c0f.fits', // url of the fits file
            'data/fits/panstarrs-g-m61.fits',
+            //'https://almascience.eso.org/dataPortal/member.uid___A001_X88f_X297.calibrated_final_cont_Sgr_B1off.pbcor.fits',
            {
                name: 'm61',
                colormap: 'viridis'
--- a/examples/al-displayJPG.html
+++ b/examples/al-displayJPG.html
@@ -39,7 +39,7 @@ Image Opacity: <br/> <input id="slider" type="range" value=1 min=0 max=1 step=0.
        //let fits = aladin.displayFITS('http://goldmine.mib.infn.it/data//B/fits/A04_VC1316_ooooog.fits', 'overlay');
        let jpg = aladin.displayJPG(
            // the JPG to transform to HiPS
-            'https://noirlab.edu/public/media/archives/images/large/noirlab1912a.jpg',
+            'https://owncloud.tuebingen.mpg.de/index.php/s/sdxfNgcEaaXoBp7/download/nightskycam3_2025_08_07_05_17_30_healpix1024_red.fits',
            // no options
            {
                transparency: 1.0,
--- a/examples/al-hips-3D.html
+++ b/examples/al-hips-3D.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html>
+    <head>
+    </head>
+<body>
+
+
+<div id="aladin-lite-div" style="width: 768px; height: 512px"></div>
+<script>let aladin; let hips;</script>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                showSimbadPointerControl: true,
+                projection: 'AIT', // set a projection
+                fov: 8.0, // initial field of view in degrees
+                target: '00 42 21.37 +41 07 29.8', // initial target
+                cooFrame: 'icrs', // set galactic frame
+                reticleColor: '#ff89ff', // change reticle color
+                showContextMenu: true,
+                showFrame: true,
+                showZoomControl:true,
+                showSettingsControl:true,
+                fullScreen: true,
+                samp: true,
+            }
+        );
+
+        hips = aladin.newImageSurvey("http://alasky.cds.unistra.fr/HIPS3D/GalfaHI", {
+            successCallback: (hips) => {
+                //hips.setFrequency({value: 6.374279333565797E-7, unit: "m"}) // GALFA
+            }
+        });
+        // compressed https://alasky.cds.unistra.fr/test-compression-cubes/DHIGLS/
+        //hips = aladin.newImageSurvey("http://alasky.cds.unistra.fr/DHIGLS");
+        //hips = aladin.newImageSurvey("https://alasky.cds.unistra.fr/MUSE3D");
+        // http://alasky.cds.unistra.fr/LGLBSHI
+        aladin.setImageLayer(hips)
+
+        //hips.setFrequency({value: emMin + delta * i, unit: "m"})
+        //hips.setFrequency({value: 6.374279333565797E-7, unit: "m"}) // MUSE
+        //hips.setFrequency({value: 0.21101690259115785, unit: "m"}) // DGHILG
+
+        /*let id;
+        aladin.on("zoomChanged", () => {
+            if (id)
+                clearTimeout(id);
+            id = setTimeout(() => {
+                console.log("wheel stopped, new cone search here")
+            }, 500);
+        })*/
+    });
+</script>
+<style>
+    .aladin-cat-browser-box {
+        width: 600px;
+    }
+</style>
+</body>
+</html>
--- a/examples/al-hips-cube.html
+++ b/examples/al-hips-cube.html
@@ -30,9 +30,14 @@
            }
        );

-        hips = aladin.newImageSurvey("https://alasky.cds.unistra.fr/GALFAHI/GALFAHI-Narrow-DR2/");
+        hips = aladin.newImageSurvey("https://alasky.cds.unistra.fr/GALFAHI/GALFAHI-Narrow-DR2");
        aladin.setImageLayer(hips)

+        setTimeout(() => {
+            hips.setSliceNumber(100)
+
+        }, 1000)
+
        /*let id;
        aladin.on("zoomChanged", () => {
            if (id)
--- a/src/core/Cargo.toml
+++ b/src/core/Cargo.toml
@@ -18,12 +18,12 @@ futures = "0.3.12"
 js-sys = "0.3.47"
 wasm-bindgen-futures = "0.4.20"
 cgmath = "*"
-url-lite = "0.1.0"
+# url-lite = "0.1.0"
 serde_json = "1.0.104"
 serde-wasm-bindgen = "0.5"
 enum_dispatch = "0.3.8"
 wasm-bindgen = "=0.2.92"
-wasm-streams = "0.3.0"
+#wasm-streams = "0.3.0"
 async-channel = "1.8.0"
 mapproj = "0.3.0"
 fitsrs = "0.3.4"
@@ -50,7 +50,8 @@ version = "0.7.3"

 [dependencies.moclib]
 package = "moc"
-version = "0.17.0"
+git = "https://github.com/cds-astro/cds-moc-rust"
+branch = "main"

 [dependencies.serde]
 version = "^1.0.183"
@@ -64,7 +65,7 @@ path = "./al-api"

 [dependencies.web-sys]
 version = "0.3.56"
-features = [ "console", "CssStyleDeclaration", "Document", "Element", "HtmlCollection", "HtmlElement", "HtmlImageElement", "HtmlCanvasElement", "Blob", "ImageBitmap", "ImageData", "CanvasRenderingContext2d", "WebGlBuffer", "WebGlContextAttributes", "WebGlFramebuffer", "WebGlProgram", "WebGlShader", "WebGlUniformLocation", "WebGlTexture", "WebGlActiveInfo", "Headers", "Window", "Request", "RequestInit", "RequestMode", "RequestCredentials", "Response", "XmlHttpRequest", "XmlHttpRequestResponseType", "PerformanceTiming", "Performance", "Url", "ReadableStream", "File", "FileList",]
+features = [ "console", "CssStyleDeclaration", "Document", "Element", "HtmlCollection", "CustomEvent", "CustomEventInit", "HtmlElement", "HtmlImageElement", "HtmlCanvasElement", "Blob", "ImageBitmap", "ImageData", "CanvasRenderingContext2d", "WebGlBuffer", "WebGlContextAttributes", "WebGlFramebuffer", "WebGlProgram", "WebGlShader", "WebGlUniformLocation", "WebGlTexture", "WebGlActiveInfo", "Headers", "Window", "Request", "RequestInit", "RequestMode", "RequestCredentials", "Response", "XmlHttpRequest", "XmlHttpRequestResponseType", "PerformanceTiming", "Performance", "Url", "ReadableStream", "File", "FileList",]

 [dev-dependencies.image-decoder]
 package = "image"
--- a/src/core/al-api/src/hips.rs
+++ b/src/core/al-api/src/hips.rs
@@ -48,14 +48,26 @@ pub struct HiPSProperties {
    hips_initial_fov: Option<f64>,
    hips_initial_ra: Option<f64>,
    hips_initial_dec: Option<f64>,
+    // HiPS cube
    hips_cube_depth: Option<u32>,

+    // HiPS 3D keywords
+    hips_order_freq: Option<u8>,
+    hips_tile_depth: Option<u8>,
+
+    /// Start of spectral coordinates (in meters)
+    em_min: Option<f32>,
+    /// End of spectral coordinates (in meters)
+    em_max: Option<f32>,
+
    // Parametrable by the user
    #[allow(unused)]
    min_cutout: Option<f32>,
    #[allow(unused)]
    max_cutout: Option<f32>,

+    dataproduct_type: Option<DataproductType>,
+
    creator_did: String,

    request_credentials: String,
@@ -63,6 +75,20 @@ pub struct HiPSProperties {
 }

 impl HiPSProperties {
+    #[inline(always)]
+    pub fn get_hips_order_freq(&self) -> Option<u8> {
+        self.hips_order_freq
+    }
+    #[inline(always)]
+    pub fn get_hips_tile_depth(&self) -> Option<u8> {
+        self.hips_tile_depth
+    }
+
+    #[inline(always)]
+    pub fn get_dataproduct_type(&self) -> Option<DataproductType> {
+        self.dataproduct_type
+    }
+
    #[inline(always)]
    pub fn get_url(&self) -> &str {
        &self.url
@@ -137,18 +163,39 @@ impl HiPSProperties {
    pub fn get_request_mode(&self) -> &str {
        &self.request_mode
    }
+
+    #[inline(always)]
+    pub fn get_em_min(&self) -> Option<f32> {
+        self.em_min
+    }
+
+    #[inline(always)]
+    pub fn get_em_max(&self) -> Option<f32> {
+        self.em_max
+    }
 }

 #[derive(Deserialize, Debug, Clone, Copy, PartialEq, Eq, Hash)]
 #[wasm_bindgen]
 #[serde(rename_all = "camelCase")]
 pub enum ImageExt {
+    #[serde(alias = "fits", alias = "fits.fz")]
    Fits,
    Jpeg,
    Png,
    Webp,
 }

+#[derive(Deserialize, Debug, Clone, Copy, PartialEq, Eq, Hash)]
+#[wasm_bindgen]
+#[serde(rename_all = "camelCase")]
+pub enum DataproductType {
+    #[serde(rename = "spectral-cube")]
+    SpectralCube,
+    Image,
+    Cube,
+}
+
 impl std::fmt::Display for ImageExt {
    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
        match self {
--- a/src/core/al-core/Cargo.toml
+++ b/src/core/al-core/Cargo.toml
@@ -7,14 +7,14 @@ edition = "2018"
 [dependencies]
 js-sys = "0.3.47"
 cgmath = "*"
-jpeg-decoder = "0.3.0"
-png = "0.17.6"
+#jpeg-decoder = "0.3.0"
+#png = "0.17.6"
 fitsrs = "0.3.4"
 al-api = { path = "../al-api" }
 serde = { version = "^1.0.59", features = ["derive"] }
 serde_json = "1.0"
 serde-wasm-bindgen = "0.4"
-wasm-streams = "0.3.0"
+# wasm-streams = "0.3.0"
 futures = "0.3.25"
 colorgrad = "0.6.2"
 wasm-bindgen = "0.2.92"
--- a/src/core/al-core/src/image/bitmap.rs
+++ b/src/core/al-core/src/image/bitmap.rs
@@ -35,7 +35,7 @@ where
        Ok(())
    }

-    fn get_size(&self) -> (u32, u32) {
-        (self.image.width(), self.image.height())
+    fn get_size(&self) -> (u32, u32, u32) {
+        (self.image.width(), self.image.height(), 1)
    }
 }
--- a/src/core/al-core/src/image/canvas.rs
+++ b/src/core/al-core/src/image/canvas.rs
@@ -43,7 +43,7 @@ where
        Ok(())
    }

-    fn get_size(&self) -> (u32, u32) {
-        (self.canvas.width(), self.canvas.height())
+    fn get_size(&self) -> (u32, u32, u32) {
+        (self.canvas.width(), self.canvas.height(), 1)
    }
 }
--- a/src/core/al-core/src/image/fits.rs
+++ b/src/core/al-core/src/image/fits.rs
@@ -2,24 +2,27 @@ use crate::texture::format::TextureFormat;
 use crate::texture::format::R8U;
 use cgmath::Vector3;
 use fitsrs::card::Value;
-use fitsrs::hdu::header::extension::image::Image as XImage;
 use fitsrs::hdu::header::Bitpix;
 use fitsrs::hdu::header::Header;
+use fitsrs::hdu::header::Xtension;
 use fitsrs::WCS;
 use fitsrs::{Fits, HDU};
 use std::fmt::Debug;
 use std::io::Cursor;
+use std::ops::Range;
 use wasm_bindgen::JsValue;

 #[derive(Debug)]
 pub struct FitsImage<'a> {
-    // get a reference to the header
-    pub header: Header<XImage>,
-    // image size
+    // Margin values for HiPS3D cubic tiles
+    pub trim1: u32,
+    pub trim2: u32,
+    pub trim3: u32,
+    // Image/cube size
    pub width: u32,
    pub height: u32,
    pub depth: u32,
-    // bitpix
+    // Bitpix
    pub bitpix: Bitpix,
    // 1.0 by default
    pub bscale: f32,
@@ -29,10 +32,20 @@ pub struct FitsImage<'a> {
    pub blank: Option<f32>,
    // optional wcs
    pub wcs: Option<WCS>,
+    // bytes offset where the data bytes are located inside the fits
+    pub data_byte_offset: Range<usize>,
    // raw bytes of the data image (in Big-Endian)
    pub raw_bytes: &'a [u8],
 }

+fn parse_keyword_as_number<X: Xtension + Debug>(header: &Header<X>, keyword: &str) -> Option<f32> {
+    match header.get(keyword) {
+        Some(Value::Integer { value, .. }) => Some(*value as f32),
+        Some(Value::Float { value, .. }) => Some(*value as f32),
+        _ => None,
+    }
+}
+
 impl<'a> FitsImage<'a> {
    /// Get all the hdu images from a fits file
    pub fn from_raw_bytes(bytes: &'a [u8]) -> Result<Vec<Self>, JsValue> {
@@ -53,35 +66,28 @@ impl<'a> FitsImage<'a> {

                        let header = hdu.get_header();

-                        let bscale = match header.get("BSCALE") {
-                            Some(Value::Integer { value, .. }) => *value as f32,
-                            Some(Value::Float { value, .. }) => *value as f32,
-                            _ => 1.0,
-                        };
+                        let bscale = parse_keyword_as_number(header, "BSCALE").unwrap_or(1.0);
+                        let bzero = parse_keyword_as_number(header, "BZERO").unwrap_or(0.0);
+                        let blank = parse_keyword_as_number(header, "BLANK");

-                        let bzero = match header.get("BZERO") {
-                            Some(Value::Integer { value, .. }) => *value as f32,
-                            Some(Value::Float { value, .. }) => *value as f32,
-                            _ => 0.0,
-                        };
+                        let trim1 = parse_keyword_as_number(header, "TRIM1").unwrap_or(0.0) as u32;
+                        let trim2 = parse_keyword_as_number(header, "TRIM2").unwrap_or(0.0) as u32;
+                        let trim3 = parse_keyword_as_number(header, "TRIM3").unwrap_or(0.0) as u32;

-                        let blank = match header.get("BLANK") {
-                            Some(Value::Integer { value, .. }) => Some(*value as f32),
-                            Some(Value::Float { value, .. }) => Some(*value as f32),
-                            _ => None,
-                        };
+                        let bitpix = hdu.get_header().get_xtension().get_bitpix();

                        let off = hdu.get_data_unit_byte_offset() as usize;
                        let len = hdu.get_data_unit_byte_size() as usize;

-                        let raw_bytes = &bytes[off..(off + len)];
-
-                        let bitpix = hdu.get_header().get_xtension().get_bitpix();
+                        let data_byte_offset = off..(off + len);
+                        let raw_bytes = &bytes[data_byte_offset.clone()];

                        let wcs = hdu.wcs().ok();

                        images.push(Self {
-                            header: hdu.get_header().clone(),
+                            trim1,
+                            trim2,
+                            trim3,
                            width: width as u32,
                            height: height as u32,
                            depth,
@@ -90,6 +96,7 @@ impl<'a> FitsImage<'a> {
                            wcs,
                            bzero,
                            blank,
+                            data_byte_offset,
                            raw_bytes,
                        });
                    }
@@ -107,6 +114,7 @@ impl<'a> FitsImage<'a> {
 }

 use crate::{image::Image, texture::Tex3D};
+use std::convert::TryInto;
 impl Image for FitsImage<'_> {
    fn insert_into_3d_texture<T: Tex3D>(
        &self,
@@ -115,11 +123,45 @@ impl Image for FitsImage<'_> {
        // An offset to write the image in the texture array
        offset: &Vector3<i32>,
    ) -> Result<(), JsValue> {
-        let view = unsafe { R8U::view(self.raw_bytes) };
+        let view = unsafe {
+            match self.bitpix {
+                Bitpix::I64 => {
+                    // convert to i64 first
+                    let new_bytes: Vec<_> = self
+                        .raw_bytes
+                        .chunks_exact(8)
+                        .flat_map(|chunk| {
+                            let bytes: [u8; 8] = chunk.try_into().unwrap();
+                            let value = i64::from_be_bytes(bytes);
+
+                            (value as i32).to_be_bytes()
+                        })
+                        .collect();
+
+                    R8U::view(&new_bytes)
+                }
+                Bitpix::F64 => {
+                    let new_bytes: Vec<_> = self
+                        .raw_bytes
+                        .chunks_exact(8)
+                        .flat_map(|chunk| {
+                            let bytes: [u8; 8] = chunk.try_into().unwrap();
+                            let value = f64::from_be_bytes(bytes);
+
+                            (value as f32).to_be_bytes()
+                        })
+                        .collect();
+
+                    R8U::view(&new_bytes)
+                }
+                _ => R8U::view(self.raw_bytes),
+            }
+        };
+
        textures.tex_sub_image_3d_with_opt_array_buffer_view(
-            offset.x,
-            offset.y,
-            offset.z,
+            offset.x + self.trim1 as i32,
+            offset.y + self.trim2 as i32,
+            offset.z + self.trim3 as i32,
            self.width as i32,
            self.height as i32,
            self.depth as i32,
@@ -129,7 +171,8 @@ impl Image for FitsImage<'_> {
        Ok(())
    }

-    fn get_size(&self) -> (u32, u32) {
-        (self.width, self.height)
+    fn get_size(&self) -> (u32, u32, u32) {
+        // The true image size is given by ONAXISi keywords
+        (self.width, self.height, self.depth)
    }
 }
--- a/src/core/al-core/src/image/html.rs
+++ b/src/core/al-core/src/image/html.rs
@@ -1,7 +1,7 @@
 /* ------------------------------------------------------ */
 #[derive(Debug)]
 pub struct HTMLImage<F> {
-    image: web_sys::HtmlImageElement,
+    pub image: web_sys::HtmlImageElement,
    format: std::marker::PhantomData<F>,
 }

@@ -15,6 +15,10 @@ where
            format: std::marker::PhantomData,
        }
    }
+
+    pub fn element(&self) -> &web_sys::HtmlImageElement {
+        &self.image
+    }
 }

 use crate::image::Image;
@@ -43,7 +47,7 @@ where
        Ok(())
    }

-    fn get_size(&self) -> (u32, u32) {
-        (self.image.width(), self.image.height())
+    fn get_size(&self) -> (u32, u32, u32) {
+        (self.image.width(), self.image.height(), 1)
    }
 }
--- a/src/core/al-core/src/image/mod.rs
+++ b/src/core/al-core/src/image/mod.rs
@@ -191,7 +191,7 @@ pub trait Image {
        offset: &Vector3<i32>,
    ) -> Result<(), JsValue>;

-    fn get_size(&self) -> (u32, u32);
+    fn get_size(&self) -> (u32, u32, u32);
 }

 impl<I> Image for &I
@@ -212,7 +212,7 @@ where
    }

    #[inline]
-    fn get_size(&self) -> (u32, u32) {
+    fn get_size(&self) -> (u32, u32, u32) {
        let image = &**self;
        image.get_size()
    }
@@ -237,7 +237,7 @@ where
    }

    #[inline]
-    fn get_size(&self) -> (u32, u32) {
+    fn get_size(&self) -> (u32, u32, u32) {
        let image = &**self;
        image.get_size()
    }
@@ -250,7 +250,7 @@ use crate::texture::Tex3D;
 pub enum ImageType {
    FitsRawBytes {
        raw_bytes: js_sys::Uint8Array,
-        size: (u32, u32),
+        size: (u32, u32, u32),
    },
    Canvas {
        canvas: Canvas<RGBA8U>,
@@ -311,10 +311,10 @@ impl Image for ImageType {
            ImageType::Canvas { canvas } => canvas.insert_into_3d_texture(textures, offset)?,
            ImageType::ImageRgba8u { image } => image.insert_into_3d_texture(textures, offset)?,
            ImageType::ImageRgb8u { image } => image.insert_into_3d_texture(textures, offset)?,
-            ImageType::HTMLImageRgba8u { image } => {
+            ImageType::HTMLImageRgba8u { image, .. } => {
                image.insert_into_3d_texture(textures, offset)?
            }
-            ImageType::HTMLImageRgb8u { image } => {
+            ImageType::HTMLImageRgb8u { image, .. } => {
                image.insert_into_3d_texture(textures, offset)?
            }
            ImageType::RawRgb8u { image } => image.insert_into_3d_texture(textures, offset)?,
@@ -328,7 +328,7 @@ impl Image for ImageType {
        Ok(())
    }

-    fn get_size(&self) -> (u32, u32) {
+    fn get_size(&self) -> (u32, u32, u32) {
        match self {
            ImageType::FitsRawBytes { size, .. } => *size,
            ImageType::Canvas { canvas } => canvas.get_size(),
--- a/src/core/al-core/src/image/raw.rs
+++ b/src/core/al-core/src/image/raw.rs
@@ -8,8 +8,8 @@ pub struct ImageBuffer<T>
 where
    T: TextureFormat,
 {
-    pub data: Vec<<<T as TextureFormat>::P as Pixel>::Item>,
-    pub size: Vector2<i32>,
+    pub data: Box<[<<T as TextureFormat>::P as Pixel>::Item]>,
+    pub size: (u32, u32, u32),
 }

 use crate::texture::format::Bytes;
@@ -26,21 +26,22 @@ where
    T: TextureFormat,
 {
    pub fn new(
-        data: Vec<<<T as TextureFormat>::P as Pixel>::Item>,
-        width: i32,
-        height: i32,
+        data: Box<[<<T as TextureFormat>::P as Pixel>::Item]>,
+        width: u32,
+        height: u32,
+        depth: u32,
    ) -> Self {
-        let size_buf = width * height * (T::NUM_CHANNELS as i32);
-        debug_assert!(size_buf == data.len() as i32);
+        let size_buf = width * height * depth * (T::NUM_CHANNELS as u32);
+        debug_assert!(size_buf == data.len() as u32);
        //let buf = <<T as ImageFormat>::P as Pixel>::Container::new(buf);
-        let size = Vector2::new(width, height);
+        let size = (width, height, depth);
        Self { data, size }
    }

    pub fn from_encoded_raw_bytes(
        raw_bytes: &[u8],
-        width: i32,
-        height: i32,
+        width: u32,
+        height: u32,
    ) -> Result<Self, JsValue> {
        let mut decoded_bytes = match T::decode(raw_bytes).map_err(JsValue::from_str)? {
            Bytes::Borrowed(bytes) => bytes.to_vec(),
@@ -55,29 +56,33 @@ where
            std::mem::transmute::<Vec<u8>, Vec<<<T as TextureFormat>::P as Pixel>::Item>>(
                decoded_bytes,
            )
+            .into_boxed_slice()
        };

-        Ok(Self::new(decoded_pixels, width, height))
+        Ok(Self::new(decoded_pixels, width, height, 1))
    }

-    pub fn from_raw_bytes(mut raw_bytes: Vec<u8>, width: i32, height: i32) -> Self {
-        let size_buf = width * height * (std::mem::size_of::<T::P>() as i32);
-        debug_assert!(size_buf == raw_bytes.len() as i32);
+    pub fn from_raw_bytes(mut raw_bytes: Vec<u8>, width: u32, height: u32) -> Self {
+        let size_buf = width * height * (std::mem::size_of::<T::P>() as u32);
+        debug_assert!(size_buf == raw_bytes.len() as u32);

        let decoded_pixels = unsafe {
            raw_bytes.set_len(raw_bytes.len() / std::mem::size_of::<<T::P as Pixel>::Item>());
-            std::mem::transmute::<Vec<u8>, Vec<<T::P as Pixel>::Item>>(raw_bytes)
+            std::mem::transmute::<Vec<u8>, Vec<<T::P as Pixel>::Item>>(raw_bytes).into_boxed_slice()
        };

-        Self::new(decoded_pixels, width, height)
+        Self::new(decoded_pixels, width, height, 1)
    }

    pub fn empty() -> Self {
-        let size = Vector2::new(0, 0);
-        Self { data: vec![], size }
+        let size = (0, 0, 0);
+        Self {
+            data: Box::new([]),
+            size,
+        }
    }

-    pub fn allocate(pixel_fill: &T::P, width: i32, height: i32) -> ImageBuffer<T> {
+    pub fn allocate(pixel_fill: &T::P, width: u32, height: u32) -> ImageBuffer<T> {
        let size_buf = ((width * height) as usize) * (T::NUM_CHANNELS);

        let data = pixel_fill
@@ -86,9 +91,10 @@ where
            .cloned()
            .cycle()
            .take(size_buf)
-            .collect::<Vec<_>>();
+            .collect::<Vec<_>>()
+            .into_boxed_slice();

-        ImageBuffer::<T>::new(data, width, height)
+        ImageBuffer::<T>::new(data, width, height, 1)
    }

    pub fn tex_sub(&mut self, src: &Self, s: &ImageBufferView, d: &ImageBufferView) {
@@ -97,8 +103,8 @@ where

        for ix in s.x..(s.x + s.w) {
            for iy in s.y..(s.y + s.h) {
-                let s_idx = (iy * src.width() + ix) as usize;
-                let d_idx = (di * self.width() + dj) as usize;
+                let s_idx = ((iy * src.width() as i32) + ix) as usize;
+                let d_idx = ((di * self.width() as i32) + dj) as usize;

                for i in 0..T::NUM_CHANNELS {
                    let si = s_idx * T::NUM_CHANNELS + i;
@@ -124,12 +130,12 @@ where
        &self.data
    }

-    pub fn width(&self) -> i32 {
-        self.size.x
+    pub fn width(&self) -> u32 {
+        self.size.0
    }

-    pub fn height(&self) -> i32 {
-        self.size.y
+    pub fn height(&self) -> u32 {
+        self.size.1
    }
 }

@@ -144,7 +150,7 @@ pub enum ImageBufferType {
 }

 use crate::image::{ArrayBuffer, Image};
-use cgmath::{Vector2, Vector3};
+use cgmath::Vector3;
 impl<I> Image for ImageBuffer<I>
 where
    I: TextureFormat,
@@ -161,9 +167,9 @@ where
            offset.x,
            offset.y,
            offset.z,
-            self.width(),
-            self.height(),
-            1,
+            self.width() as i32,
+            self.height() as i32,
+            self.size.2 as i32,
            Some(js_array.as_ref()),
        );

@@ -171,7 +177,7 @@ where
    }

    // The size of the image
-    fn get_size(&self) -> (u32, u32) {
-        (self.size.x as u32, self.size.y as u32)
+    fn get_size(&self) -> (u32, u32, u32) {
+        self.size
    }
 }
--- a/src/core/al-core/src/lib.rs
+++ b/src/core/al-core/src/lib.rs
@@ -1,8 +1,8 @@
 extern crate futures;
-extern crate jpeg_decoder as jpeg;
-extern crate png;
+//extern crate jpeg_decoder as jpeg;
+//extern crate png;
 extern crate serde_json;
-extern crate wasm_streams;
+//extern crate wasm_streams;

 pub mod convert;
 pub mod image;
--- a/src/core/al-core/src/texture/3d.rs
+++ b/src/core/al-core/src/texture/3d.rs
@@ -19,7 +19,6 @@ pub struct Texture3D {
    texture: Option<WebGlTexture>,

    metadata: Option<Rc<RefCell<Texture2DMeta>>>,
-    _depth: i32,
 }

 impl Texture3D {
@@ -62,7 +61,6 @@ impl Texture3D {
        Ok(Texture3D {
            texture,
            gl: gl.clone(),
-            _depth: depth,
            metadata,
        })
    }
--- a/src/core/al-core/src/texture/format.rs
+++ b/src/core/al-core/src/texture/format.rs
@@ -43,13 +43,14 @@ impl TextureFormat for RGB8U {

    const PIXEL_TYPE: PixelType = PixelType::RGB8U;

-    fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
-        let mut decoder = jpeg::Decoder::new(raw_bytes);
+    fn decode(_raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
+        todo!()
+        /*let mut decoder = jpeg::Decoder::new(raw_bytes);
        let bytes = decoder
            .decode()
            .map_err(|_| "Cannot decoder jpeg. This image may not be compressed.")?;

-        Ok(Bytes::Owned(bytes))
+        Ok(Bytes::Owned(bytes))*/
    }

    type ArrayBufferView = js_sys::Uint8Array;
@@ -72,13 +73,15 @@ impl TextureFormat for RGBA8U {

    const PIXEL_TYPE: PixelType = PixelType::RGBA8U;

-    fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
-        let mut decoder = jpeg::Decoder::new(raw_bytes);
+    fn decode(_raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
+        /*let mut decoder = jpeg::Decoder::new(raw_bytes);
        let bytes = decoder
            .decode()
            .map_err(|_| "Cannot decoder png. This image may not be compressed.")?;

        Ok(Bytes::Owned(bytes))
+        */
+        todo!()
    }

    type ArrayBufferView = js_sys::Uint8Array;
--- a/src/core/build.rs
+++ b/src/core/build.rs
@@ -49,7 +49,7 @@ fn read_shader<P: AsRef<std::path::Path>>(path: P) -> std::io::Result<String> {
    let shader_src = std::io::BufReader::new(file)
        .lines()
        .map_while(Result::ok)
-        .map(|l| {
+        .filter_map(|l| {
            if l.starts_with("#include") {
                let incl_file_names: Vec<_> = l.split_terminator(&[';', ' '][..]).collect();
                let incl_file_name_rel = incl_file_names[1];
@@ -57,9 +57,12 @@ fn read_shader<P: AsRef<std::path::Path>>(path: P) -> std::io::Result<String> {

                println!("{}", incl_file_name.to_string_lossy());

-                read_shader(incl_file_name.to_str().unwrap()).unwrap()
+                Some(read_shader(incl_file_name.to_str().unwrap()).unwrap())
+            } else if l.trim_start().starts_with("//") {
+                // comment
+                None
            } else {
-                l
+                Some(l)
            }
        })
        .collect::<Vec<_>>()
--- a/src/core/src/app.rs
+++ b/src/core/src/app.rs
@@ -1,17 +1,16 @@
+use crate::browser_support::BrowserFeaturesSupport;
+use crate::downloader::request::moc::MOCRequest;
+use crate::math::angle::ToAngle;
+use crate::math::spectra::Freq;
+use crate::renderable::hips::HiPS;
 use crate::renderable::image::Image;
 use crate::renderable::ImageLayer;
 use crate::tile_fetcher::HiPSLocalFiles;
-use al_core::image::fits::FitsImage;
-use al_core::image::ImageType;
-use fitsrs::WCS;
-use std::io::Cursor;
-
-use crate::math::angle::ToAngle;
-use crate::renderable::hips::HiPS;
+use crate::Abort;
 use crate::{
    camera::CameraViewPort,
    downloader::Downloader,
-    healpix::coverage::HEALPixCoverage,
+    healpix::moc::SpaceMoc,
    inertia::Inertia,
    math::{
        self,
@@ -26,6 +25,12 @@ use crate::{
    time::DeltaTime,
 };
 use al_api::moc::MOCOptions;
+use al_core::image::bitmap::Bitmap;
+use al_core::image::fits::FitsImage;
+use al_core::image::ImageType;
+use fitsrs::WCS;
+use moclib::qty::{Frequency, MocQty};
+use std::io::Cursor;

 use wasm_bindgen::prelude::*;

@@ -39,13 +44,13 @@ use al_api::{
    hips::{HiPSCfg, ImageMetadata},
 };

+use crate::healpix::moc::Moc;
+
 use web_sys::{HtmlElement, WebGl2RenderingContext};

 use std::cell::RefCell;
 use std::rc::Rc;

-use std::collections::HashSet;
-
 use crate::renderable::final_pass::RenderPass;
 use al_core::FrameBufferObject;

@@ -103,6 +108,8 @@ pub struct App {
    //img_send: async_channel::Sender<ImageLayer>,
    img_recv: async_channel::Receiver<ImageLayer>,
    ack_img_send: async_channel::Sender<ImageParams>,
+
+    browser_features_support: BrowserFeaturesSupport,
    //ack_img_recv: async_channel::Receiver<ImageParams>,
    // callbacks
    //callback_position_changed: js_sys::Function,
@@ -116,8 +123,8 @@ pub const BLENDING_ANIM_DURATION: DeltaTime = DeltaTime::from_millis(200.0); //
 use crate::time::Time;
 use cgmath::InnerSpace;

-use crate::downloader::query;
-use crate::downloader::request;
+use crate::downloader::query::{self, CellDesc};
+use crate::downloader::request::RequestType;
 use al_api::resources::Resources;

 impl App {
@@ -199,6 +206,8 @@ impl App {
        let dragging = false;
        let time_mouse_high_vel = Time::now();

+        let browser_features_support = BrowserFeaturesSupport::new();
+
        Ok(App {
            gl,
            //ui,
@@ -250,7 +259,8 @@ impl App {
            //img_send,
            img_recv,
            ack_img_send,
-            //ack_img_recv,
+
+            browser_features_support, //ack_img_recv,
        })
    }

@@ -260,54 +270,24 @@ impl App {
        // Loop over the hipss
        for hips in self.layers.get_mut_hipses() {
            if self.camera.get_tile_depth() == 0 {
-                let allsky_query = match hips {
-                    HiPS::D2(h) => query::Allsky::new(h.get_config(), None),
-                    HiPS::D3(h) => query::Allsky::new(h.get_config(), Some(h.get_slice() as u32)),
-                };
-                if self.downloader.borrow().is_queried(&allsky_query.id) {
-                    // do not ask for tiles if we download the allsky
-                    continue;
-                }
-            }
-
-            let cfg = hips.get_config();
-
-            let min_tile_depth = cfg.get_min_depth_tile();
-            let mut ancestors = HashSet::new();
-
-            if let Some(tiles) = hips.look_for_new_tiles(&self.camera) {
-                for tile_cell in tiles {
-                    self.tile_fetcher.append(hips.get_tile_query(&tile_cell));
-
-                    // check if we are starting aladin lite or not.
-                    // If so we want to retrieve only the tiles in the view and access them
-                    // directly i.e. without blending them with less precised tiles
-                    if self.tile_fetcher.get_num_tile_fetched() > 0
-                        && tile_cell.depth() >= min_tile_depth + 3
-                    {
-                        let ancestor_tile_cell = tile_cell.ancestor(3);
-                        ancestors.insert(ancestor_tile_cell);
-                    }
-                }
-            }
-            // Request for ancestor
-            match hips {
-                HiPS::D2(hips) => {
-                    for ancestor in ancestors {
-                        if !hips.update_priority_tile(&ancestor) {
-                            self.tile_fetcher.append(hips.get_tile_query(&ancestor));
-                        }
-                    }
-                }
-                HiPS::D3(hips) => {
-                    let slice = hips.get_slice();
-                    for ancestor in ancestors {
-                        if !hips.contains_tile(&ancestor, slice) {
-                            self.tile_fetcher.append(hips.get_tile_query(&ancestor));
+                match hips {
+                    HiPS::D2(h) => {
+                        let query = query::Allsky::new(h.get_config(), None);
+                        if self.downloader.borrow().is_queried(&query.id) {
+                            // do not ask for tiles if we download the allsky
+                            continue;
                        }
                    }
+                    // no Allsky generated for HiPS3D
+                    HiPS::D3(_) => (),
                }
            }
+
+            hips.look_for_new_tiles(
+                &mut self.tile_fetcher,
+                &self.camera,
+                &self.browser_features_support,
+            );
        }

        Ok(())
@@ -388,10 +368,9 @@ impl App {
    }*/
 }

-use crate::downloader::request::Resource;
 use al_api::cell::HEALPixCellProjeted;

-use crate::healpix::cell::HEALPixCell;
+use crate::healpix::cell::{HEALPixCell, HEALPixFreqCell};

 use al_api::color::ColorRGB;

@@ -474,15 +453,11 @@ impl App {
        self.catalog_loaded
    }

-    pub(crate) fn get_moc(&self, moc_uuid: &str) -> Option<&HEALPixCoverage> {
+    pub(crate) fn get_moc(&self, moc_uuid: &str) -> Option<&SpaceMoc> {
        self.moc.get_hpx_coverage(moc_uuid)
    }

-    pub(crate) fn add_moc(
-        &mut self,
-        moc: HEALPixCoverage,
-        options: MOCOptions,
-    ) -> Result<(), JsValue> {
+    pub(crate) fn add_moc(&mut self, moc: SpaceMoc, options: MOCOptions) -> Result<(), JsValue> {
        self.moc
            .push_back(moc, options, &mut self.camera, &self.projection);
        self.request_redraw = true;
@@ -518,6 +493,10 @@ impl App {
    }

    pub(crate) fn update(&mut self, dt: DeltaTime) -> Result<bool, JsValue> {
+        // a timer stopping the frame if it takes too long
+        // useful for garanting a framerate
+        let rendering_timer = Time::now();
+
        if let Some(inertia) = self.inertia.as_mut() {
            inertia.apply(&mut self.camera, &self.projection, dt);
            // Always request for new tiles while moving
@@ -591,28 +570,47 @@ impl App {

        let rscs_received = self.downloader.borrow_mut().get_received_resources();

-        //let mut tile_copied = false;
+        let mut tile_copied = false;
+
+        const MAX_FRAME_TIME: DeltaTime = DeltaTime::from_millis(1000.0 / 25.0);

        for rsc in rscs_received {
+            if Time::now() - rendering_timer >= MAX_FRAME_TIME {
+                self.downloader.borrow_mut().delay(rsc);
+                continue;
+            }
+
            match rsc {
-                Resource::Tile(tile) => {
-                    //if !_has_camera_zoomed {
-                    if let Some(hips) = self.layers.get_mut_hips_from_cdid(tile.get_hips_cdid()) {
-                        let cfg = hips.get_config_mut();
+                RequestType::Tile(tile) => {
+                    /*if self.camera.has_moved() {
+                        self.downloader
+                        .borrow_mut()
+                        .delay(RequestType::Tile(tile));
+                        continue;
+                    }*/
+
+                    if let Some(hips) = self.layers.get_mut_hips_from_cdid(&tile.hips_cdid) {
+                        let cfg = hips.get_config();

                        if cfg.get_format() == tile.format {
                            let fov_coverage = self.camera.get_cov(cfg.get_frame());
-                            let included_in_coverage = fov_coverage.intersects_cell(tile.cell());
+                            let hpx_cell = tile.cell.get_hpx();
+
+                            let included_in_coverage = fov_coverage.intersects_cell(hpx_cell);

                            //let is_tile_root = tile.cell().depth() == delta_depth;
                            //let _depth = tile.cell().depth();
                            // do not perform tex_sub costly GPU calls while the camera is zooming
-                            if tile.cell().is_root() || included_in_coverage {
-                                //if let Some(image) = image.as_ref() {
+                            if hpx_cell.is_root() || included_in_coverage {
+                                let image = tile.request.get_data().clone();
+
+                                // 1. For FITS tiles, parse the bscale/bzero and optional blank
+                                // FIXME. We should consider these constants as per tiles and not for
+                                // whole HiPS they belong to.
                                if let Some(ImageType::FitsRawBytes {
                                    raw_bytes: raw_bytes_buf,
                                    ..
-                                }) = &*tile.image.borrow()
+                                }) = &*image.borrow()
                                {
                                    // check if the metadata has not been set
                                    if hips.get_fits_params().is_none() {
@@ -628,44 +626,267 @@ impl App {
                                    }
                                };

-                                let image = tile.image.clone();
+                                // 2. Add the tile to its HiPS
                                if let Some(img) = &*image.borrow() {
-                                    /*if tile_copied {
-                                        self.downloader
-                                            .borrow_mut()
-                                            .delay(Resource::Tile(tile));
-                                        continue;
-                                    }*/
-
-                                    self.request_redraw = true;
-                                    //tile_copied = true;
-                                    match hips {
-                                        HiPS::D2(hips) => {
-                                            hips.add_tile(&tile.cell, img, tile.time_req)?
+                                    // For PNG/JPEG cubic tiles, all the slices are in the lonely image
+                                    match (&tile.cell, hips) {
+                                        (CellDesc::HiPS2D { cell, .. }, HiPS::D2(hips)) => {
+                                            hips.push_tile(cell, img, tile.request.time_request)?
                                        }
-                                        HiPS::D3(hips) => hips.add_tile(
-                                            &tile.cell,
-                                            img,
-                                            tile.time_req,
-                                            tile.channel.unwrap() as u16,
-                                        )?,
+                                        (
+                                            CellDesc::HiPSCube { cell, channel, .. },
+                                            HiPS::D3(hips),
+                                        ) => {
+                                            // We build an artificial cube
+                                            let f_hash = (*channel / 32) as u64;
+                                            let slice_idx = (*channel % 32) as u16;
+
+                                            let cell = HEALPixFreqCell::new(
+                                                *cell,
+                                                f_hash,
+                                                Frequency::<u64>::MAX_DEPTH,
+                                            );
+                                            hips.push_tile_slice(
+                                                &cell,
+                                                img,
+                                                tile.request.time_request,
+                                                slice_idx,
+                                            )?
+                                        }
+                                        (
+                                            CellDesc::HiPS3D {
+                                                cell,
+                                                tile_size,
+                                                tile_depth,
+                                            },
+                                            HiPS::D3(hips),
+                                        ) => {
+                                            // As the decoding and copying to the GPU of cubic tile is more costly
+                                            // (not that much but there is more because they are smaller)
+                                            // then we delay their treatment through the frames
+                                            if tile_copied {
+                                                self.downloader
+                                                    .borrow_mut()
+                                                    .delay(RequestType::Tile(tile));
+                                                continue;
+                                            }
+                                            tile_copied = true;
+
+                                            // TODO PNG/JPG case to handle here
+                                            match img {
+                                                ImageType::ImageRgba8u {
+                                                    image: Bitmap { image, .. },
+                                                } => {
+                                                    let document = web_sys::window()
+                                                        .unwrap_abort()
+                                                        .document()
+                                                        .unwrap_abort();
+                                                    let canvas = document
+                                                        .create_element("canvas")?
+                                                        .dyn_into::<web_sys::HtmlCanvasElement>()?;
+                                                    canvas.set_width(image.width());
+                                                    canvas.set_height(image.height());
+                                                    let context = canvas
+                                                        .get_context("2d")?
+                                                        .unwrap_abort()
+                                                        .dyn_into::<web_sys::CanvasRenderingContext2d>()?;
+                                                    // Get the data once for all for the whole image
+                                                    // This takes time so better do it once and not repeatly
+                                                    context.draw_image_with_image_bitmap(
+                                                        image, 0.0, 0.0,
+                                                    )?;
+
+                                                    // Cut the png in several tile images. See page 3 of
+                                                    // https://aladin.cds.unistra.fr/java/DocTechHiPS3D.pdf
+                                                    let tile_depth = *tile_depth;
+                                                    let num_cols =
+                                                        (tile_depth as f32).sqrt().floor() as u32;
+                                                    let num_rows = ((tile_depth as f32)
+                                                        / (num_cols as f32))
+                                                        .ceil()
+                                                        as u32;
+
+                                                    let tile_size = *tile_size;
+
+                                                    let bytes = context
+                                                        .get_image_data(
+                                                            0_f64,
+                                                            0_f64,
+                                                            (num_cols * tile_size) as f64,
+                                                            (num_rows * tile_size) as f64,
+                                                        )?
+                                                        .data()
+                                                        .0;
+
+                                                    let mut decoded_bytes = vec![
+                                                        0_u8;
+                                                        (tile_size * tile_size * tile_depth * 2)
+                                                            as usize
+                                                    ];
+
+                                                    let mut k = 0;
+                                                    let mut num_tiles_cropped = 0;
+                                                    for y in 0..num_rows {
+                                                        let sy = y * tile_size;
+
+                                                        for x in 0..num_cols {
+                                                            let sx = x * tile_size;
+
+                                                            for i in sy..(sy + tile_size) {
+                                                                for j in sx..(sx + tile_size) {
+                                                                    let id_byte = (j + i
+                                                                        * num_cols
+                                                                        * tile_size)
+                                                                        * 4;
+
+                                                                    decoded_bytes[k] =
+                                                                        bytes[id_byte as usize];
+                                                                    decoded_bytes[k + 1] =
+                                                                        bytes[id_byte as usize + 3];
+                                                                    k += 2;
+                                                                }
+                                                            }
+
+                                                            num_tiles_cropped += 1;
+
+                                                            if num_tiles_cropped == tile_depth {
+                                                                break;
+                                                            }
+                                                        }
+                                                        if num_tiles_cropped == tile_depth {
+                                                            break;
+                                                        }
+                                                    }
+
+                                                    hips.push_tile_from_png(
+                                                        cell,
+                                                        decoded_bytes.into_boxed_slice(),
+                                                        (tile_size, tile_size, tile_depth),
+                                                        tile.request.time_request,
+                                                    )?;
+                                                }
+                                                ImageType::ImageRgb8u {
+                                                    image: Bitmap { image, .. },
+                                                } => {
+                                                    let document = web_sys::window()
+                                                        .unwrap_abort()
+                                                        .document()
+                                                        .unwrap_abort();
+                                                    let canvas = document
+                                                        .create_element("canvas")?
+                                                        .dyn_into::<web_sys::HtmlCanvasElement>()?;
+                                                    canvas.set_width(image.width());
+                                                    canvas.set_height(image.height());
+                                                    let context = canvas
+                                                        .get_context("2d")?
+                                                        .unwrap_abort()
+                                                        .dyn_into::<web_sys::CanvasRenderingContext2d>()?;
+                                                    // Get the data once for all for the whole image
+                                                    // This takes time so better do it once and not repeatly
+                                                    context.draw_image_with_image_bitmap(
+                                                        image, 0.0, 0.0,
+                                                    )?;
+
+                                                    // Cut the png in several tile images. See page 3 of
+                                                    // https://aladin.cds.unistra.fr/java/DocTechHiPS3D.pdf
+                                                    let tile_depth = *tile_depth;
+                                                    let num_cols =
+                                                        (tile_depth as f32).sqrt().floor() as u32;
+                                                    let num_rows = ((tile_depth as f32)
+                                                        / (num_cols as f32))
+                                                        .ceil()
+                                                        as u32;
+
+                                                    let tile_size = *tile_size;
+
+                                                    let bytes = context
+                                                        .get_image_data(
+                                                            0_f64,
+                                                            0_f64,
+                                                            (num_cols * tile_size) as f64,
+                                                            (num_rows * tile_size) as f64,
+                                                        )?
+                                                        .data()
+                                                        .0;
+
+                                                    let mut decoded_bytes = vec![
+                                                        0_u8;
+                                                        (tile_size * tile_size * tile_depth)
+                                                            as usize
+                                                    ];
+
+                                                    let mut k = 0;
+                                                    let mut num_tiles_cropped = 0;
+                                                    for y in 0..num_rows {
+                                                        let sy = y * tile_size;
+
+                                                        for x in 0..num_cols {
+                                                            let sx = x * tile_size;
+
+                                                            for i in sy..(sy + tile_size) {
+                                                                for j in sx..(sx + tile_size) {
+                                                                    let id_byte = (j + i
+                                                                        * num_cols
+                                                                        * tile_size)
+                                                                        * 4;
+
+                                                                    decoded_bytes[k] =
+                                                                        bytes[id_byte as usize];
+                                                                    k += 1;
+                                                                }
+                                                            }
+
+                                                            num_tiles_cropped += 1;
+
+                                                            if num_tiles_cropped == tile_depth {
+                                                                break;
+                                                            }
+                                                        }
+                                                        if num_tiles_cropped == tile_depth {
+                                                            break;
+                                                        }
+                                                    }
+
+                                                    hips.push_tile_from_jpeg(
+                                                        cell,
+                                                        decoded_bytes.into_boxed_slice(),
+                                                        (tile_size, tile_size, tile_depth),
+                                                        tile.request.time_request,
+                                                    )?;
+                                                }
+                                                ImageType::FitsRawBytes { raw_bytes, size } => hips
+                                                    .push_tile_from_fits(
+                                                        cell,
+                                                        raw_bytes.clone(),
+                                                        *size,
+                                                        tile.request.time_request,
+                                                    )?,
+                                                _ => unreachable!(),
+                                            }
+                                        }
+                                        _ => unreachable!(),
                                    }
+                                    self.request_redraw = true;
                                    self.time_start_blending = Time::now();
                                };
                            }
                        }
                    }
                }
-                Resource::Allsky(allsky) => {
-                    let hips_cdid = allsky.get_hips_cdid();
-
-                    if let Some(hips) = self.layers.get_mut_hips_from_cdid(hips_cdid) {
+                RequestType::Allsky(allsky) => {
+                    if let Some(HiPS::D2(hips)) =
+                        self.layers.get_mut_hips_from_cdid(&allsky.hips_cdid)
+                    {
                        let is_missing = allsky.missing();
                        if is_missing {
                            // The allsky image is missing so we donwload all the tiles contained into
                            // the 0's cell
                            for base_hpx_cell in crate::healpix::cell::ALLSKY_HPX_CELLS_D0 {
-                                let query = hips.get_tile_query(base_hpx_cell);
+                                let query = query::Tile::new(
+                                    base_hpx_cell,
+                                    hips.get_config(),
+                                    &self.browser_features_support,
+                                );
                                self.tile_fetcher.append_base_tile(query);
                            }
                        } else {
@@ -677,14 +898,21 @@ impl App {
                        }
                    }
                }
-                Resource::Moc(moc) => {
-                    let moc_hips_cdid = moc.get_hips_cdid();
+                RequestType::Moc(moc) => {
+                    let moc_hips_cdid = moc.hips_cdid;
                    //let url = &moc_url[..moc_url.find("/Moc.fits").unwrap_abort()];
-                    if let Some(hips) = self.layers.get_mut_hips_from_cdid(moc_hips_cdid) {
-                        let request::moc::Moc { moc, .. } = moc;
-
-                        if let Some(moc) = &*moc.borrow() {
-                            hips.set_moc(moc.clone());
+                    if let Some(hips) = self.layers.get_mut_hips_from_cdid(&moc_hips_cdid) {
+                        let MOCRequest { request, .. } = moc;
+                        if let Some(moc) = &*request.get_data().borrow() {
+                            match (hips, moc) {
+                                (HiPS::D2(hips), Moc::Space(moc)) => {
+                                    hips.set_moc(moc.clone());
+                                }
+                                (HiPS::D3(hips), Moc::FreqSpace(moc)) => {
+                                    hips.set_moc(moc.clone());
+                                }
+                                _ => (),
+                            }

                            self.request_for_new_tiles = true;
                            self.request_redraw = true;
@@ -1042,7 +1270,11 @@ impl App {
        self.layers.get_layer_cfg(layer)
    }

-    pub(crate) fn set_hips_slice_number(&mut self, layer: &str, slice: u32) -> Result<(), JsValue> {
+    pub(crate) fn set_hips_frequency(
+        &mut self,
+        layer: &str,
+        frequency: f32,
+    ) -> Result<(), JsValue> {
        let hips = self
            .layers
            .get_mut_hips_from_layer(layer)
@@ -1053,13 +1285,49 @@ impl App {
        match hips {
            HiPS::D2(_) => Err(JsValue::from_str("layer do not refers to a cube")),
            HiPS::D3(hips) => {
-                hips.set_slice(slice as u16);
+                hips.set_freq(Freq(frequency as f64));

                Ok(())
            }
        }
    }

+    pub(crate) fn get_hips_frequency(&mut self, layer: &str) -> Result<f32, JsValue> {
+        let hips = self
+            .layers
+            .get_mut_hips_from_layer(layer)
+            .ok_or_else(|| JsValue::from_str("Layer not found"))?;
+
+        match hips {
+            HiPS::D2(_) => Err(JsValue::from_str("layer do not refers to a cube")),
+            HiPS::D3(hips) => Ok(hips.get_freq().0 as f32),
+        }
+    }
+
+    pub(crate) fn get_freq_from_hash(&mut self, layer: &str, hash: u64) -> Result<f64, JsValue> {
+        let hips = self
+            .layers
+            .get_mut_hips_from_layer(layer)
+            .ok_or_else(|| JsValue::from_str("Layer not found"))?;
+
+        match hips {
+            HiPS::D2(_) => Err(JsValue::from_str("layer do not refers to a cube")),
+            HiPS::D3(hips) => Ok(hips.get_freq_from_hash(hash).0),
+        }
+    }
+
+    pub(crate) fn get_freq_hash(&mut self, layer: &str, freq: f64) -> Result<u64, JsValue> {
+        let hips = self
+            .layers
+            .get_mut_hips_from_layer(layer)
+            .ok_or_else(|| JsValue::from_str("Layer not found"))?;
+
+        match hips {
+            HiPS::D2(_) => Err(JsValue::from_str("layer do not refers to a cube")),
+            HiPS::D3(hips) => Ok(hips.get_freq_hash(Freq(freq))),
+        }
+    }
+
    pub(crate) fn set_image_hips_color_cfg(
        &mut self,
        layer: String,
--- a/src/core/src/browser_support.rs
+++ b/src/core/src/browser_support.rs
@@ -0,0 +1,25 @@
+use js_sys::Reflect;
+use wasm_bindgen::JsValue;
+use web_sys::window;
+
+pub struct BrowserFeaturesSupport {
+    pub create_image_bitmap: bool,
+}
+
+impl Default for BrowserFeaturesSupport {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl BrowserFeaturesSupport {
+    pub fn new() -> Self {
+        let window = window().expect("no global `window` exists");
+        let create_image_bitmap =
+            Reflect::has(&window, &JsValue::from_str("createImageBitmap")).unwrap_or(false);
+
+        Self {
+            create_image_bitmap,
+        }
+    }
+}
--- a/src/core/src/camera/fov.rs
+++ b/src/core/src/camera/fov.rs
@@ -54,8 +54,8 @@ fn linspace(a: f64, b: f64, num: usize) -> Vec<f64> {
    res
 }

-const NUM_VERTICES_WIDTH: usize = 3;
-const NUM_VERTICES_HEIGHT: usize = 3;
+const NUM_VERTICES_WIDTH: usize = 4;
+const NUM_VERTICES_HEIGHT: usize = 4;
 const NUM_VERTICES: usize = 4 + 2 * NUM_VERTICES_WIDTH + 2 * NUM_VERTICES_HEIGHT;
 // This struct belongs to the CameraViewPort
 pub struct FieldOfView {
--- a/src/core/src/camera/mod.rs
+++ b/src/core/src/camera/mod.rs
@@ -8,8 +8,8 @@ pub use fov::FieldOfView;
 pub mod view_hpx_cells;

 use crate::CooSystem;
-use crate::HEALPixCoverage;
 use crate::ProjectionType;
+use crate::SpaceMoc;

 pub fn build_fov_coverage(
    depth: u8,
@@ -18,7 +18,7 @@ pub fn build_fov_coverage(
    camera_frame: CooSystem,
    frame: CooSystem,
    proj: &ProjectionType,
-) -> HEALPixCoverage {
+) -> SpaceMoc {
    if let Some(vertices) = fov.get_vertices() {
        // The vertices coming from the camera are in a specific coo sys
        // but cdshealpix accepts them to be given in ICRS coo sys
@@ -44,20 +44,20 @@ pub fn build_fov_coverage(
                ::healpix::nested::hash(depth, lon.to_radians(), lat.to_radians())
            });

-            HEALPixCoverage::from_fixed_hpx_cells(depth, hpx_idxs_iter, Some(vertices.len()))
+            SpaceMoc::from_fixed_hpx_cells(depth, hpx_idxs_iter, Some(vertices.len()))
        } else {
            // The polygon is not too small for the depth asked
            let inside_vertex = crate::coosys::apply_coo_system(camera_frame, frame, camera_center);

            // Prefer to query from_polygon with depth >= 2

-            HEALPixCoverage::from_3d_coos(depth, vertices_iter, &inside_vertex)
+            SpaceMoc::from_3d_coos(depth, vertices_iter, &inside_vertex)
        }
    } else {
        let center_xyz = crate::coosys::apply_coo_system(camera_frame, frame, camera_center);

        let biggest_fov_rad = proj.aperture_start().to_radians();
        let lonlat = center_xyz.lonlat();
-        HEALPixCoverage::from_cone(&lonlat, biggest_fov_rad * 0.5, depth)
+        SpaceMoc::from_cone(&lonlat, biggest_fov_rad * 0.5, depth)
    }
 }
--- a/src/core/src/camera/view_hpx_cells.rs
+++ b/src/core/src/camera/view_hpx_cells.rs
@@ -3,7 +3,7 @@ use crate::healpix::cell::HEALPixCell;

 use crate::math::projection::*;

-use crate::HEALPixCoverage;
+use crate::SpaceMoc;

 use moclib::moc::{range::op::degrade::degrade, RangeMOCIterator};

@@ -84,7 +84,7 @@ impl ViewHpxCells {
        self.hpx_cells[frame as usize].get_cells(depth)
    }

-    pub(super) fn get_cov(&self, frame: CooSystem) -> &HEALPixCoverage {
+    pub(super) fn get_cov(&self, frame: CooSystem) -> &SpaceMoc {
        self.hpx_cells[frame as usize].get_cov()
    }

@@ -109,7 +109,7 @@ pub struct HpxCells {
    // An index vector referring to the indices of each depth cells
    //idx_rng: [Option<Range<usize>>; MAX_HPX_DEPTH as usize + 1],
    // Coverage created in the frame
-    cov: HEALPixCoverage,
+    cov: SpaceMoc,
    // boolean refering to if the cells in the view has changed
    //new_cells: bool,
 }
@@ -127,7 +127,7 @@ use super::FieldOfView;
 impl HpxCells {
    pub fn new(frame: CooSystem) -> Self {
        //let cells = Vec::new();
-        let cov = HEALPixCoverage::empty(29);
+        let cov = SpaceMoc::empty(29);

        //let idx_rng = Default::default();

@@ -203,7 +203,7 @@ impl HpxCells {
        if depth == cov_depth {
            self.cov
                .flatten_to_fixed_depth_cells()
-                .map(move |idx| HEALPixCell(depth, idx))
+                .map(|idx| HEALPixCell(depth, idx))
                .collect()
        } else if depth > self.cov.depth_max() {
            let cov_d = self.cov.depth_max();
@@ -212,7 +212,7 @@ impl HpxCells {

            self.cov
                .flatten_to_fixed_depth_cells()
-                .flat_map(move |idx| {
+                .flat_map(|idx| {
                    // idx is at depth_max
                    HEALPixCell(cov_d, idx).get_children_cells(dd)
                })
@@ -221,7 +221,7 @@ impl HpxCells {
            // compute the cells from the coverage
            degrade((&self.cov.0).into_range_moc_iter(), depth)
                .flatten_to_fixed_depth_cells()
-                .map(move |idx| HEALPixCell(depth, idx))
+                .map(|idx| HEALPixCell(depth, idx))
                .collect()
        }
    }
@@ -257,7 +257,7 @@ impl HpxCells {
    }*/

    #[inline(always)]
-    pub fn get_cov(&self) -> &HEALPixCoverage {
+    pub fn get_cov(&self) -> &SpaceMoc {
        &self.cov
    }

--- a/src/core/src/camera/viewport.rs
+++ b/src/core/src/camera/viewport.rs
@@ -12,7 +12,7 @@ const ID_R: &Matrix3<f64> = &Matrix3::new(-1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.

 use super::{fov::FieldOfView, view_hpx_cells::ViewHpxCells};
 use crate::healpix::cell::HEALPixCell;
-use crate::healpix::coverage::HEALPixCoverage;
+use crate::healpix::moc::SpaceMoc;
 use crate::math::angle::ToAngle;
 use crate::math::{projection::coo_space::XYZModel, projection::domain::sdf::ProjDef};
 use cgmath::{InnerSpace, Vector3};
@@ -216,7 +216,7 @@ impl CameraViewPort {
        self.view_hpx_cells.has_changed()
    }*/

-    pub fn get_cov(&self, frame: CooSystem) -> &HEALPixCoverage {
+    pub fn get_cov(&self, frame: CooSystem) -> &SpaceMoc {
        self.view_hpx_cells.get_cov(frame)
    }

--- a/src/core/src/downloader/mod.rs
+++ b/src/core/src/downloader/mod.rs
@@ -10,13 +10,13 @@ pub struct Downloader {
    requests: Vec<RequestType>,
    queried_list: HashSet<QueryId>,

-    cache: Cache<QueryId, Resource>,
+    cache: Cache<QueryId, RequestType>,
 }

 use crate::fifo_cache::Cache;

 use query::Query;
-use request::{RequestType, Resource};
+use request::RequestType;

 impl Default for Downloader {
    fn default() -> Self {
@@ -62,26 +62,23 @@ impl Downloader {
        }
    }

-    pub fn get_received_resources(&mut self) -> Vec<Resource> {
+    pub fn get_received_resources(&mut self) -> Vec<RequestType> {
        let mut rscs = vec![];
+        let mut not_finished_requests = vec![];

        let mut finished_query_list = vec![];
-        self.requests = self
-            .requests
-            .drain(..)
-            .filter(|request| {
-                // If the request resolves into a resource
-                if let Some(rsc) = request.into() {
-                    rscs.push(rsc);
-                    finished_query_list.push(request.id().clone());

-                    false
-                // The request is not resolved, we keep it
-                } else {
-                    true
-                }
-            })
-            .collect();
+        while let Some(request) = self.requests.pop() {
+            if request.is_resolved() {
+                finished_query_list.push(request.id().clone());
+                rscs.push(request);
+            // The request is not resolved, we keep it
+            } else {
+                not_finished_requests.push(request);
+            }
+        }
+
+        self.requests = not_finished_requests;

        for query_id in finished_query_list.into_iter() {
            self.queried_list.remove(&query_id);
@@ -98,16 +95,10 @@ impl Downloader {
        self.queried_list.contains(id)
    }

-    pub fn delay(&mut self, r: Resource) {
+    pub fn delay(&mut self, r: RequestType) {
        match r {
-            Resource::Tile(tile) => {
-                let k = format!(
-                    "{:?}{:?}/{:?}",
-                    tile.get_hips_cdid(),
-                    tile.cell.depth(),
-                    tile.cell.idx()
-                );
-                self.cache.insert(k, Resource::Tile(tile));
+            RequestType::Tile(tile) => {
+                self.cache.insert(tile.id.clone(), RequestType::Tile(tile));
            }
            _ => unimplemented!(),
        }
--- a/src/core/src/downloader/query.rs
+++ b/src/core/src/downloader/query.rs
@@ -6,32 +6,87 @@ pub trait Query: Sized {

    fn id(&self) -> &QueryId;
 }
-
 pub type QueryId = String;

+use crate::browser_support::BrowserFeaturesSupport;
+use crate::healpix::cell::HEALPixFreqCell;
+use al_api::hips::DataproductType;
 use al_core::image::format::ImageFormatType;

+/// Description of a cell to query
+#[derive(Clone, PartialEq, Eq)]
+pub enum CellDesc {
+    HiPS2D {
+        // A description of the tile in space
+        cell: HEALPixCell,
+        // Size of the tile requested
+        tile_size: u32,
+    },
+    HiPS3D {
+        // A description of the tile in space and frequency
+        cell: HEALPixFreqCell,
+        // Size of the tile requested
+        tile_size: u32,
+        // Depth of the cubic tile
+        tile_depth: u32,
+    },
+    HiPSCube {
+        // A description of the tile in space
+        cell: HEALPixCell,
+        // size of the tile requested
+        tile_size: u32,
+        // The channel number to query
+        channel: u32,
+    },
+}
+
+impl CellDesc {
+    /*fn get_size(&self) -> (u32, u32, u32) {
+        match self {
+            Self::HiPS2D { tile_size, .. } => (*tile_size, *tile_size, 1),
+            Self::HiPSCube { tile_size, .. } => (*tile_size, *tile_size, 1),
+            Self::HiPS3D {
+                tile_size,
+                tile_depth,
+                ..
+            } => (*tile_size, *tile_size, *tile_depth),
+        }
+    }*/
+
+    pub fn get_hpx(&self) -> &HEALPixCell {
+        match self {
+            Self::HiPS2D { cell, .. } => cell,
+            Self::HiPS3D { cell, .. } => &cell.hpx,
+            Self::HiPSCube { cell, .. } => cell,
+        }
+    }
+}
+
 #[derive(Eq, PartialEq, Clone)]
 pub struct Tile {
-    pub cell: HEALPixCell,
+    pub cell: CellDesc,
    pub format: ImageFormatType,
    // The root url of the HiPS
    pub hips_cdid: CreatorDid,
    // The total url of the query
    pub url: Url,
-    pub size: u32, // size of the tile requested
    pub credentials: RequestCredentials,
    pub mode: RequestMode,
    pub id: QueryId,
-    pub channel: Option<u32>,
+    pub create_bitmap_support: bool,
 }

 use crate::healpix::cell::HEALPixCell;
 use crate::renderable::hips::config::HiPSConfig;
 use crate::renderable::CreatorDid;
+use crate::tile_fetcher::HiPSLocalFiles;
 use web_sys::{RequestCredentials, RequestMode};
 impl Tile {
-    pub fn new(cell: &HEALPixCell, channel: Option<u32>, cfg: &HiPSConfig) -> Self {
+    pub fn new(
+        cell: &HEALPixCell,
+        cfg: &HiPSConfig,
+        browser_support: &BrowserFeaturesSupport,
+    ) -> Self {
        let hips_cdid = cfg.get_creator_did();
        let hips_url = cfg.get_root_url();
        let format = cfg.get_format();
@@ -44,38 +99,108 @@ impl Tile {

        let dir_idx = (idx / 10000) * 10000;

-        let mut url = format!("{hips_url}/Norder{depth}/Dir{dir_idx}/Npix{idx}");
+        let url = format!("{hips_url}/Norder{depth}/Dir{dir_idx}/Npix{idx}.{ext}");

-        // handle cube case
-        if let Some(channel) = channel {
-            if channel > 0 {
-                url.push_str(&format!("_{channel:?}"));
-            }
-        }
+        let id = format!("{}_{}_{}_{}", hips_cdid, depth, idx, ext);

-        // add the tile format
-        url.push_str(&format!(".{ext}"));
-
-        let id = format!(
-            "{}{}{}{}{}",
-            hips_cdid,
-            depth,
-            idx,
-            channel.unwrap_or(0),
-            ext
-        );
-
-        let size = cfg.get_tile_size();
+        let tile_size = cfg.get_tile_size() as u32;
        Tile {
            hips_cdid: hips_cdid.to_string(),
            url,
-            cell: *cell,
+            cell: CellDesc::HiPS2D {
+                cell: *cell,
+                tile_size,
+            },
            format,
            credentials,
            mode,
            id,
-            channel,
-            size: size as u32,
+            create_bitmap_support: browser_support.create_image_bitmap,
+        }
+    }
+
+    pub fn new_with_channel(
+        cell: &HEALPixCell,
+        channel: u32,
+        cfg: &HiPSConfig,
+        browser_support: &BrowserFeaturesSupport,
+    ) -> Self {
+        let hips_cdid = cfg.get_creator_did();
+        let hips_url = cfg.get_root_url();
+        let format = cfg.get_format();
+        let credentials = cfg.get_request_credentials();
+        let mode = cfg.get_request_mode();
+
+        let ext = format.get_ext_file();
+
+        let HEALPixCell(depth, idx) = *cell;
+
+        let dir_idx = (idx / 10000) * 10000;
+
+        let url = format!("{hips_url}/Norder{depth}/Dir{dir_idx}/Npix{idx}_{channel:?}.{ext}");
+
+        let id = format!("{}_{}_{}_{}_{}", hips_cdid, depth, idx, channel, ext);
+
+        let tile_size = cfg.get_tile_size() as u32;
+        Tile {
+            hips_cdid: hips_cdid.to_string(),
+            url,
+            cell: CellDesc::HiPSCube {
+                cell: *cell,
+                tile_size,
+                channel,
+            },
+            format,
+            credentials,
+            mode,
+            id,
+            create_bitmap_support: browser_support.create_image_bitmap,
+        }
+    }
+
+    pub fn new_cubic(
+        hpx_f_cell: &HEALPixFreqCell,
+        cfg: &HiPSConfig,
+        browser_support: &BrowserFeaturesSupport,
+    ) -> Self {
+        let hips_cdid = cfg.get_creator_did();
+        let hips_url = cfg.get_root_url();
+        let format = cfg.get_format();
+        let credentials = cfg.get_request_credentials();
+        let mode = cfg.get_request_mode();
+
+        let ext = format.get_ext_file();
+
+        // f hash at order_f
+
+        let HEALPixFreqCell {
+            hpx: HEALPixCell(k, n),
+            f_hash: m,
+            f_depth: l,
+        } = *hpx_f_cell;
+
+        let d = (n / 10000) * 10000;
+        let e = (m / 10) * 10;
+
+        let url = format!("{hips_url}/Norder{k}_{l}/Dir{d}_{e}/Npix{n}_{m}.{ext}");
+
+        let id = format!("{hips_cdid}_{k}_{l}_{n}_{m}_{ext}");
+
+        let tile_size = cfg.get_tile_size() as u32;
+        let tile_depth = cfg.tile_depth.unwrap_or(1) as u32;
+        Tile {
+            hips_cdid: hips_cdid.to_string(),
+            url,
+            cell: CellDesc::HiPS3D {
+                cell: hpx_f_cell.clone(),
+                tile_size,
+                tile_depth,
+            },
+            format,
+            credentials,
+            mode,
+            id,
+            create_bitmap_support: browser_support.create_image_bitmap,
        }
    }
 }
@@ -168,21 +293,41 @@ pub struct Moc {
    pub credentials: RequestCredentials,
    pub params: MOCOptions,
    pub hips_cdid: CreatorDid,
+    pub dataproduct_type: DataproductType,
 }
+use std::collections::HashMap;
 impl Moc {
    pub fn new(
-        url: String,
-        mode: RequestMode,
-        credentials: RequestCredentials,
-        hips_cdid: CreatorDid,
+        cfg: &HiPSConfig,
+        hips_local_files: &HashMap<String, HiPSLocalFiles>,
        params: MOCOptions,
    ) -> Self {
+        // Try to fetch the MOC
+        let hips_cdid = cfg.get_creator_did();
+        let url = if let Some(local_hips) = hips_local_files.get(hips_cdid) {
+            if let Ok(url) =
+                web_sys::Url::create_object_url_with_blob(local_hips.get_moc().as_ref())
+            {
+                url
+            } else {
+                format!("{}/Moc.fits", cfg.get_root_url())
+            }
+        } else {
+            format!("{}/Moc.fits", cfg.get_root_url())
+        };
+
+        let mode = cfg.get_request_mode();
+        let credentials = cfg.get_request_credentials();
+        let hips_cdid = cfg.get_creator_did().to_string();
+        let dataproduct_type = cfg.dataproduct_type;
+
        Moc {
            url,
            params,
            hips_cdid,
            mode,
            credentials,
+            dataproduct_type,
        }
    }
 }
--- a/src/core/src/downloader/request/allsky.rs
+++ b/src/core/src/downloader/request/allsky.rs
@@ -14,7 +14,13 @@ pub struct AllskyRequest {
    pub id: QueryId,
    pub channel: Option<u32>,

-    request: Request<Vec<ImageType>>,
+    pub request: Request<Vec<ImageType>>,
+}
+
+impl AllskyRequest {
+    pub fn missing(&self) -> bool {
+        self.request.data.borrow().is_none()
+    }
 }

 impl From<AllskyRequest> for RequestType {
@@ -57,7 +63,7 @@ async fn query_allsky(

    let raw_bytes = image_data.data();

-    Ok(ImageBuffer::from_raw_bytes(raw_bytes.0, w as i32, h as i32))
+    Ok(ImageBuffer::from_raw_bytes(raw_bytes.0, w, h))
 }

 impl From<query::Allsky> for AllskyRequest {
@@ -89,12 +95,18 @@ impl From<query::Allsky> for AllskyRequest {
                            .map(|image| {
                                let ImageBuffer { data, size } = image;
                                let data = data
-                                    .into_iter()
+                                    .iter()
                                    .enumerate()
                                    .filter(|&(i, _)| i % 4 != 3)
-                                    .map(|(_, v)| v)
-                                    .collect();
-                                let image = ImageBuffer::new(data, size.x, size.y);
+                                    .map(|(_, v)| *v)
+                                    .collect::<Vec<_>>();
+
+                                let image = ImageBuffer::new(
+                                    data.into_boxed_slice(),
+                                    size.0,
+                                    size.1,
+                                    size.2,
+                                );

                                ImageType::RawRgb8u { image }
                            })
@@ -220,8 +232,11 @@ fn handle_allsky_file<F: TextureFormat>(

    let mut src_idx = 0;
    let tiles = (0..12).map(move |_| {
-        let mut base_tile =
-            ImageBuffer::<F>::allocate(&F::P::BLACK, allsky_tile_size, allsky_tile_size);
+        let mut base_tile = ImageBuffer::<F>::allocate(
+            &F::P::BLACK,
+            allsky_tile_size as u32,
+            allsky_tile_size as u32,
+        );
        for idx_tile in 0..64 {
            let (x, y) = crate::utils::unmortonize(idx_tile as u64);
            let dx = x * (d3_tile_allsky_size as u32);
@@ -268,8 +283,14 @@ fn handle_allsky_fits<F: TextureFormat>(
        .rev()
        .flatten()
        .copied()
-        .collect::<Vec<_>>();
-    let image = ImageBuffer::<F>::new(reversed_rows_data, width_allsky_px, height_allsky_px);
+        .collect::<Vec<_>>()
+        .into_boxed_slice();
+    let image = ImageBuffer::<F>::new(
+        reversed_rows_data,
+        width_allsky_px as u32,
+        height_allsky_px as u32,
+        1,
+    );

    let allsky_tiles_iter =
        handle_allsky_file::<F>(image, allsky_tile_size, tile_size)?.map(move |image| {
@@ -286,7 +307,12 @@ fn handle_allsky_fits<F: TextureFormat>(
                .cloned()
                .collect();

-            ImageBuffer::<F>::new(new_image_data, allsky_tile_size, allsky_tile_size)
+            ImageBuffer::<F>::new(
+                new_image_data,
+                allsky_tile_size as u32,
+                allsky_tile_size as u32,
+                1,
+            )
        });

    Ok(allsky_tiles_iter)
@@ -294,59 +320,4 @@ fn handle_allsky_fits<F: TextureFormat>(

 use al_core::texture::format::RGBA8U;

-use crate::time::Time;
-use std::cell::RefCell;
-use std::rc::Rc;
-pub struct Allsky {
-    pub image: Rc<RefCell<Option<Vec<ImageType>>>>,
-    pub time_req: Time,
-    //pub depth_tile: u8,
-    pub hips_cdid: CreatorDid,
-    url: Url,
-    pub channel: Option<u32>,
-}
-
 use crate::Abort;
-
-impl Allsky {
-    pub fn missing(&self) -> bool {
-        self.image.borrow().is_none()
-    }
-
-    pub fn get_hips_cdid(&self) -> &CreatorDid {
-        &self.hips_cdid
-    }
-
-    pub fn get_url(&self) -> &Url {
-        &self.url
-    }
-}
-
-impl<'a> From<&'a AllskyRequest> for Option<Allsky> {
-    fn from(request: &'a AllskyRequest) -> Self {
-        let AllskyRequest {
-            request,
-            hips_cdid,
-            //depth_tile,
-            url,
-            channel,
-            ..
-        } = request;
-        if request.is_resolved() {
-            let Request::<Vec<ImageType>> {
-                time_request, data, ..
-            } = request;
-            Some(Allsky {
-                time_req: *time_request,
-                // This is a clone on a Arc, it is supposed to be fast
-                image: data.clone(),
-                hips_cdid: hips_cdid.clone(),
-                url: url.clone(),
-                //depth_tile: *depth_tile,
-                channel: *channel,
-            })
-        } else {
-            None
-        }
-    }
-}
--- a/src/core/src/downloader/request/moc.rs
+++ b/src/core/src/downloader/request/moc.rs
@@ -3,15 +3,15 @@ use crate::renderable::CreatorDid;

 use super::{Request, RequestType};

-use crate::healpix::coverage::Smoc;
-use moclib::deser::fits::MocType;
-use moclib::qty::Hpx;
+use crate::healpix::moc::Moc;
+use crate::healpix::moc::{FreqSpaceMoc, SpaceMoc};
+use al_api::hips::DataproductType;

 pub struct MOCRequest {
    //pub id: QueryId,
    pub hips_cdid: CreatorDid,
    pub params: MOCOptions,
-    request: Request<HEALPixCoverage>,
+    pub request: Request<Moc>,
 }

 impl From<MOCRequest> for RequestType {
@@ -19,35 +19,14 @@ impl From<MOCRequest> for RequestType {
        RequestType::Moc(request)
    }
 }
-use super::Url;

-use moclib::deser::fits;
 use wasm_bindgen::JsCast;
 use wasm_bindgen_futures::JsFuture;
 use web_sys::{RequestInit, Response};

-use moclib::moc::range::op::convert::convert_to_u64;
-
-/// Convenient type for Space-MOCs
-pub fn from_fits_hpx<T: Idx>(moc: MocType<T, Hpx<T>, Cursor<&[u8]>>) -> Smoc {
-    match moc {
-        MocType::Ranges(moc) => convert_to_u64::<T, Hpx<T>, _, Hpx<u64>>(moc).into_range_moc(),
-        MocType::Cells(moc) => {
-            convert_to_u64::<T, Hpx<T>, _, Hpx<u64>>(moc.into_cell_moc_iter().ranges())
-                .into_range_moc()
-        }
-    }
-}
-
-use crate::healpix::coverage::HEALPixCoverage;
 use crate::Abort;
 use al_api::moc::MOCOptions;
-use moclib::deser::fits::MocIdxType;
-use moclib::deser::fits::MocQtyType;
-use moclib::idx::Idx;
-use moclib::moc::{CellMOCIntoIterator, CellMOCIterator, RangeMOCIterator};
-use std::io::Cursor;
-use wasm_bindgen::JsValue;
+
 impl From<query::Moc> for MOCRequest {
    // Create a tile request associated to a HiPS
    fn from(query: query::Moc) -> Self {
@@ -57,6 +36,7 @@ impl From<query::Moc> for MOCRequest {
            hips_cdid,
            credentials,
            mode,
+            dataproduct_type,
        } = query;

        let url_clone = url.clone();
@@ -75,22 +55,20 @@ impl From<query::Moc> for MOCRequest {
            let resp: Response = resp_value.dyn_into()?;
            let array_buffer = JsFuture::from(resp.array_buffer()?).await?;

-            let bytes_buf = js_sys::Uint8Array::new(&array_buffer);
-            let num_bytes = bytes_buf.length() as usize;
-            let mut bytes = vec![0; num_bytes];
-            bytes_buf.copy_to(&mut bytes[..]);
+            let buf = js_sys::Uint8Array::new(&array_buffer);
+            let bytes = buf.to_vec();

            // Coosys is permissive because we load a moc
-            let smoc = match fits::from_fits_ivoa_custom(Cursor::new(&bytes[..]), true)
-                .map_err(|e| JsValue::from_str(&e.to_string()))?
-            {
-                MocIdxType::U16(MocQtyType::<u16, _>::Hpx(moc)) => Ok(from_fits_hpx(moc)),
-                MocIdxType::U32(MocQtyType::<u32, _>::Hpx(moc)) => Ok(from_fits_hpx(moc)),
-                MocIdxType::U64(MocQtyType::<u64, _>::Hpx(moc)) => Ok(from_fits_hpx(moc)),
-                _ => Err(JsValue::from_str("MOC not supported. Must be a HPX MOC")),
-            }?;
-
-            Ok(HEALPixCoverage(smoc))
+            Ok(match dataproduct_type {
+                DataproductType::SpectralCube => {
+                    Moc::FreqSpace(FreqSpaceMoc::from_fits_raw_bytes(&bytes)?)
+                }
+                DataproductType::Cube => {
+                    let moc = SpaceMoc::from_fits_raw_bytes(&bytes)?;
+                    Moc::FreqSpace(FreqSpaceMoc::from_space_moc(moc))
+                }
+                _ => Moc::Space(SpaceMoc::from_fits_raw_bytes(&bytes)?),
+            })
        });

        Self {
@@ -102,39 +80,3 @@ impl From<query::Moc> for MOCRequest {
        }
    }
 }
-
-use std::cell::RefCell;
-use std::rc::Rc;
-pub struct Moc {
-    pub moc: Rc<RefCell<Option<HEALPixCoverage>>>,
-    pub params: MOCOptions,
-    pub hips_cdid: Url,
-}
-
-impl Moc {
-    pub fn get_hips_cdid(&self) -> &Url {
-        &self.hips_cdid
-    }
-}
-
-impl<'a> From<&'a MOCRequest> for Option<Moc> {
-    fn from(request: &'a MOCRequest) -> Self {
-        let MOCRequest {
-            request,
-            hips_cdid,
-            params,
-            ..
-        } = request;
-        if request.is_resolved() {
-            let Request::<HEALPixCoverage> { data, .. } = request;
-            Some(Moc {
-                // This is a clone on a Arc, it is supposed to be fast
-                moc: data.clone(),
-                hips_cdid: hips_cdid.clone(),
-                params: params.clone(),
-            })
-        } else {
-            None
-        }
-    }
-}
--- a/src/core/src/downloader/request/mod.rs
+++ b/src/core/src/downloader/request/mod.rs
@@ -11,8 +11,8 @@ use std::cell::{Cell, RefCell};
 use std::rc::Rc;
 pub type Url = String;
 pub struct Request<R> {
-    data: Rc<RefCell<Option<R>>>,
-    time_request: Time,
+    pub data: Rc<RefCell<Option<R>>>,
+    pub time_request: Time,
    // Flag telling if the tile has been copied so that
    // the HtmlImageElement can be reused to download another tile
    //ready: bool,
@@ -75,6 +75,10 @@ where
    pub fn resolve_status(&self) -> ResolvedStatus {
        self.resolved.get()
    }
+
+    pub fn get_data(&self) -> Rc<RefCell<Option<R>>> {
+        self.data.clone()
+    }
 }

 use allsky::AllskyRequest;
@@ -83,7 +87,7 @@ use tile::TileRequest;
 pub enum RequestType {
    Tile(TileRequest),
    Allsky(AllskyRequest),
-    Moc(MOCRequest), //..
+    Moc(MOCRequest),
 }

 use crate::downloader::QueryId;
@@ -95,29 +99,30 @@ impl RequestType {
            RequestType::Moc(request) => &request.hips_cdid,
        }
    }
-}

-impl<'a> From<&'a RequestType> for Option<Resource> {
-    fn from(request: &'a RequestType) -> Self {
-        match request {
-            RequestType::Tile(request) => Option::<Tile>::from(request).map(Resource::Tile),
-            RequestType::Allsky(request) => Option::<Allsky>::from(request).map(Resource::Allsky),
-            RequestType::Moc(request) => Option::<Moc>::from(request).map(Resource::Moc),
+    pub fn is_resolved(&self) -> bool {
+        match self {
+            RequestType::Tile(request) => request.request.is_resolved(),
+            RequestType::Allsky(request) => request.request.is_resolved(),
+            RequestType::Moc(request) => request.request.is_resolved(),
        }
    }
 }

-use crate::Abort;
-use allsky::Allsky;
-use moc::Moc;
-use tile::Tile;
-pub enum Resource {
-    Tile(Tile),
-    Allsky(Allsky),
-    Moc(Moc),
-}
+/*
+impl From<RequestType> for Option<Resource> {
+    fn from(request: RequestType) -> Self {
+        match request {
+            RequestType::Tile(request) => Option::<Tile>::from(request).map(Resource::Tile),
+            RequestType::Allsky(request) => Option::<Allsky>::from(request).map(Resource::Allsky),
+            RequestType::Moc(request) => Option::<FetchedMoc>::from(request).map(Resource::Moc),
+        }
+    }
+}*/

+use crate::Abort;
 use web_sys::RequestCredentials;
+
 async fn query_html_image(
    url: &str,
    credentials: RequestCredentials,
@@ -146,3 +151,39 @@ async fn query_html_image(

    Ok(image)
 }
+
+use wasm_bindgen::JsCast;
+use web_sys::RequestInit;
+use web_sys::RequestMode;
+use web_sys::Response;
+async fn query_bitmap_from_blob(
+    url: &str,
+    mode: RequestMode,
+    credentials: RequestCredentials,
+) -> Result<web_sys::ImageBitmap, JsValue> {
+    let window = web_sys::window().unwrap_abort();
+
+    let mut opts = RequestInit::new();
+    opts.method("GET");
+    opts.mode(mode);
+    opts.credentials(credentials);
+
+    let request = web_sys::Request::new_with_str_and_init(url, &opts).unwrap_abort();
+    let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;
+    // `resp_value` is a `Response` object.
+    debug_assert!(resp_value.is_instance_of::<Response>());
+    let resp: Response = resp_value.dyn_into()?;
+
+    if resp.ok() {
+        let blob = JsFuture::from(resp.blob()?)
+            .await?
+            .dyn_into::<web_sys::Blob>()?;
+        let image_bitmap = JsFuture::from(window.create_image_bitmap_with_blob(&blob)?).await?;
+
+        Ok(image_bitmap.into())
+    } else {
+        Err(JsValue::from_str(
+            "Response status code not between 200-299.",
+        ))
+    }
+}
--- a/src/core/src/downloader/request/tile.rs
+++ b/src/core/src/downloader/request/tile.rs
@@ -1,24 +1,24 @@
-use crate::healpix::cell::HEALPixCell;
 use crate::renderable::CreatorDid;
 use al_core::image::format::ImageFormatType;
-use al_core::texture::format::{PixelType, RGB8U, RGBA8U};
+use al_core::texture::format::PixelType;

 use crate::downloader::query;
 use al_core::image::ImageType;

+use super::super::query::CellDesc;
 use super::Url;
 use super::{Request, RequestType};
 use crate::downloader::request::query_html_image;
 use crate::downloader::QueryId;
+
 pub struct TileRequest {
-    request: Request<ImageType>,
+    pub request: Request<ImageType>,
    pub id: QueryId,

-    cell: HEALPixCell,
-    hips_cdid: CreatorDid,
-    url: Url,
-    format: ImageFormatType,
-    channel: Option<u32>,
+    pub cell: CellDesc,
+    pub hips_cdid: CreatorDid,
+    pub url: Url,
+    pub format: ImageFormatType,
 }

 impl From<TileRequest> for RequestType {
@@ -27,11 +27,14 @@ impl From<TileRequest> for RequestType {
    }
 }

+use crate::downloader::request::query_bitmap_from_blob;
+use al_core::image::bitmap::Bitmap;
 use al_core::image::html::HTMLImage;
 use wasm_bindgen::JsCast;
 use wasm_bindgen::JsValue;
 use wasm_bindgen_futures::JsFuture;
 use web_sys::{RequestInit, Response};
+
 impl From<query::Tile> for TileRequest {
    // Create a tile request associated to a HiPS
    fn from(query: query::Tile) -> Self {
@@ -43,33 +46,62 @@ impl From<query::Tile> for TileRequest {
            credentials,
            mode,
            id,
-            channel: slice,
-            size,
+            create_bitmap_support,
        } = query;

        let url_clone = url.clone();
-        let channel = format.get_pixel_format();
+        let pixel_format = format.get_pixel_format();

-        let window = web_sys::window().unwrap_abort();
-        let request = match channel {
+        let size = match cell {
+            CellDesc::HiPS2D { tile_size, .. } | CellDesc::HiPSCube { tile_size, .. } => {
+                (tile_size, tile_size, 1)
+            }
+            CellDesc::HiPS3D {
+                tile_size,
+                tile_depth,
+                ..
+            } => (tile_size, tile_size, tile_depth),
+        };
+
+        let request = match pixel_format {
            PixelType::RGB8U => Request::new(async move {
-                // HTMLImageElement
-                let image = query_html_image(&url_clone, credentials).await?;
-                // The image has been resolved
-                Ok(ImageType::HTMLImageRgb8u {
-                    image: HTMLImage::<RGB8U>::new(image),
-                })
+                if create_bitmap_support {
+                    // optimized download of tile for GPU (using Blob + Bitmap) without creating any DOM structure
+                    let image_bitmap =
+                        query_bitmap_from_blob(&url_clone, mode, credentials).await?;
+                    Ok(ImageType::ImageRgb8u {
+                        image: Bitmap::new(image_bitmap),
+                    })
+                } else {
+                    // HTMLImageElement
+                    let image = query_html_image(&url_clone, credentials).await?;
+                    // The image has been resolved
+                    Ok(ImageType::HTMLImageRgb8u {
+                        image: HTMLImage::new(image),
+                    })
+                }
            }),
            PixelType::RGBA8U => Request::new(async move {
-                // HTMLImageElement
-                let image = query_html_image(&url_clone, credentials).await?;
-                // The image has been resolved
-                Ok(ImageType::HTMLImageRgba8u {
-                    image: HTMLImage::<RGBA8U>::new(image),
-                })
+                if create_bitmap_support {
+                    // optimized download of tile for GPU (using Blob + Bitmap) without creating any DOM structure
+                    let image_bitmap =
+                        query_bitmap_from_blob(&url_clone, mode, credentials).await?;
+                    Ok(ImageType::ImageRgba8u {
+                        image: Bitmap::new(image_bitmap),
+                    })
+                } else {
+                    // HTMLImageElement
+                    let image = query_html_image(&url_clone, credentials).await?;
+                    // The image has been resolved
+                    Ok(ImageType::HTMLImageRgba8u {
+                        image: HTMLImage::new(image),
+                    })
+                }
            }),
            PixelType::R32F | PixelType::R32I | PixelType::R16I | PixelType::R8U => {
                Request::new(async move {
+                    let window = web_sys::window().unwrap_abort();
+
                    let mut opts = RequestInit::new();
                    opts.method("GET");
                    opts.mode(mode);
@@ -93,10 +125,7 @@ impl From<query::Tile> for TileRequest {
                        let array_buffer = JsFuture::from(resp.array_buffer()?).await?;
                        let raw_bytes = js_sys::Uint8Array::new(&array_buffer);

-                        Ok(ImageType::FitsRawBytes {
-                            raw_bytes,
-                            size: (size, size),
-                        })
+                        Ok(ImageType::FitsRawBytes { raw_bytes, size })
                    } else {
                        Err(JsValue::from_str(
                            "Response status code not between 200-299.",
@@ -113,74 +142,8 @@ impl From<query::Tile> for TileRequest {
            hips_cdid,
            url,
            request,
-            channel: slice,
        }
    }
 }

-use crate::time::Time;
-use std::cell::RefCell;
-use std::rc::Rc;
-pub struct Tile {
-    pub image: Rc<RefCell<Option<ImageType>>>,
-    pub time_req: Time,
-    pub cell: HEALPixCell,
-    pub format: ImageFormatType,
-    pub channel: Option<u32>,
-    hips_cdid: CreatorDid,
-    url: Url,
-}
-
 use crate::Abort;
-impl Tile {
-    #[inline(always)]
-    pub fn missing(&self) -> bool {
-        self.image.borrow().is_none()
-    }
-
-    #[inline(always)]
-    pub fn get_hips_cdid(&self) -> &CreatorDid {
-        &self.hips_cdid
-    }
-
-    #[inline(always)]
-    pub fn get_url(&self) -> &Url {
-        &self.url
-    }
-
-    #[inline(always)]
-    pub fn cell(&self) -> &HEALPixCell {
-        &self.cell
-    }
-}
-
-impl<'a> From<&'a TileRequest> for Option<Tile> {
-    fn from(request: &'a TileRequest) -> Self {
-        let TileRequest {
-            cell,
-            request,
-            hips_cdid,
-            url,
-            format,
-            channel,
-            ..
-        } = request;
-        if request.is_resolved() {
-            let Request::<ImageType> {
-                time_request, data, ..
-            } = request;
-            Some(Tile {
-                cell: *cell,
-                time_req: *time_request,
-                // This is a clone on a Arc, it is supposed to be fast
-                image: data.clone(),
-                hips_cdid: hips_cdid.clone(),
-                url: url.clone(),
-                format: *format,
-                channel: *channel,
-            })
-        } else {
-            None
-        }
-    }
-}
--- a/src/core/src/event.rs
+++ b/src/core/src/event.rs
@@ -0,0 +1,18 @@
+use wasm_bindgen::prelude::*;
+use web_sys::{window, CustomEvent, CustomEventInit};
+
+pub(crate) fn send_custom_event(name: &str, value: JsValue) {
+    // Create event details (optional)
+    let mut event_init = CustomEventInit::new();
+    event_init.detail(&value);
+
+    // Create the event
+    let event = CustomEvent::new_with_event_init_dict(name, &event_init)
+        .expect("Failed to create custom event");
+
+    // Dispatch the event on the window or any target element
+    window()
+        .expect("no global `window` exists")
+        .dispatch_event(&event)
+        .expect("failed to dispatch event");
+}
--- a/src/core/src/healpix/cell.rs
+++ b/src/core/src/healpix/cell.rs
@@ -15,6 +15,7 @@ use healpix::compass_point::MainWind;
 use healpix::compass_point::Ordinal;
 use healpix::compass_point::OrdinalMap;

+use crate::math::lonlat::LonLatT;
 use crate::utils;

 impl HEALPixCell {
@@ -95,6 +96,13 @@ impl HEALPixCell {
        self.depth() == 0
    }

+    #[inline(always)]
+    pub fn hash_with_dxdy(depth: u8, lon: f64, lat: f64) -> (Self, f64, f64) {
+        let (hash, dx, dy) = healpix::nested::hash_with_dxdy(depth, lon, lat);
+
+        (HEALPixCell(depth, hash), dx, dy)
+    }
+
    // Find the smallest HEALPix cell containing self and another cells
    // Returns None if the 2 HEALPix cell are not located in the same base HEALPix cell
    #[inline]
@@ -483,6 +491,83 @@ impl Ord for HEALPixCell {
    }
 }

+/// A simple object describing a cubic tile of a HiPS3D
+#[derive(Eq, Hash, PartialEq, Clone, Debug)]
+pub struct HEALPixFreqCell {
+    pub hpx: HEALPixCell,
+    pub f_hash: u64,
+    pub f_depth: u8,
+}
+
+use crate::math::spectra::Freq;
+use crate::math::spectra::SpectralUnit;
+
+impl HEALPixFreqCell {
+    pub fn from_lonlat(lonlat: LonLatT<f64>, freq: Freq, s_depth: u8, f_depth: u8) -> Self {
+        let hpx = HEALPixCell::new(
+            s_depth,
+            lonlat.lon().to_radians(),
+            lonlat.lat().to_radians(),
+        );
+
+        let f_hash = freq.hash(f_depth);
+
+        Self {
+            hpx,
+            f_hash,
+            f_depth,
+        }
+    }
+
+    pub fn new(hpx: HEALPixCell, f_hash: u64, f_depth: u8) -> Self {
+        Self {
+            hpx,
+            f_hash,
+            f_depth,
+        }
+    }
+
+    pub fn hpx_parent(&self) -> Self {
+        Self {
+            hpx: self.hpx.parent(),
+            f_hash: self.f_hash,
+            f_depth: self.f_depth,
+        }
+    }
+
+    pub fn parent(&self) -> Self {
+        Self {
+            hpx: self.hpx.parent(),
+            f_hash: self.f_hash >> 1,
+            f_depth: self.f_depth - 1,
+        }
+    }
+
+    pub fn is_hpx_root(&self) -> bool {
+        self.hpx.is_root()
+    }
+
+    pub fn freq_range(&self) -> Range<Freq> {
+        let f0 = Freq::from_hash_with_order(self.f_hash, self.f_depth);
+        let f1 = Freq::from_hash_with_order(
+            (self.f_hash + 1).min(Freq::num_max_cells(self.f_depth) as u64),
+            self.f_depth,
+        );
+
+        f0..f1
+    }
+
+    pub fn pixel_frequencies(&self, num_pixels: usize) -> impl Iterator<Item = f32> {
+        let delta_depth = num_pixels.trailing_zeros();
+        let pixel_depth = self.f_depth + delta_depth as u8;
+
+        let h0 = self.f_hash << delta_depth;
+        let h1 = (self.f_hash + 1) << delta_depth;
+
+        (h0..h1).map(move |hash| Freq::from_hash_with_order(hash, pixel_depth).0 as f32)
+    }
+}
+
 // Utils
 #[inline(always)]
 pub fn nside2depth(nside: u32) -> u8 {
--- a/src/core/src/healpix/moc/freq_space.rs
+++ b/src/core/src/healpix/moc/freq_space.rs
@@ -0,0 +1,131 @@
+use crate::healpix::cell::HEALPixFreqCell;
+use moclib::hpxranges2d::HpxRanges2D;
+use moclib::ranges::ranges2d::Ranges2D;
+
+use moclib::qty::{Frequency, MocQty};
+
+#[derive(Debug)]
+pub struct FreqSpaceMoc(pub moclib::hpxranges2d::FreqSpaceMoc<u64, u64>);
+
+impl Clone for FreqSpaceMoc {
+    fn clone(&self) -> Self {
+        let HpxRanges2D(Moc2DRanges {
+            ranges2d: Ranges2D { x, y },
+            ..
+        }) = &**self;
+
+        Self(HpxRanges2D(Moc2DRanges::new(x.clone(), y.clone())))
+    }
+}
+
+use wasm_bindgen::JsValue;
+
+use moclib::deser::fits;
+use moclib::deser::fits::MocIdxType;
+use moclib::deser::fits::MocQtyType;
+use moclib::mocranges2d::Moc2DRanges;
+
+use std::io::Cursor;
+
+impl FreqSpaceMoc {
+    /// Create a FreqSpaceMoc from a
+    pub fn from_space_moc(moc: SpaceMoc) -> Self {
+        let moc_2d = Moc2DRanges::new(vec![0..u64::MAX; 1], vec![moc.0.into_moc_ranges().0]);
+        FreqSpaceMoc(HpxRanges2D(moc_2d))
+    }
+
+    pub fn from_fits_raw_bytes(bytes: &[u8]) -> Result<Self, JsValue> {
+        let sfmoc = match fits::from_fits_ivoa_custom(Cursor::new(bytes), true)
+            .map_err(|e| JsValue::from_str(&e.to_string()))?
+        {
+            //MocIdxType::U16(MocQtyType::<u16, _>::FreqHpx(moc)) => Ok(from_fits_hpx(moc)),
+            //MocIdxType::U32(MocQtyType::<u32, _>::FreqHpx(moc)) => Ok(from_fits_hpx(moc)),
+            MocIdxType::U64(MocQtyType::<u64, _>::FreqHpx(ranges_iter)) => {
+                /*al_core::log(&format!(
+                    "ranges moc 2D iter from fits {:?}",
+
+                ));*/
+                let moc_2d_ranges = Moc2DRanges::from_ranges_it(ranges_iter);
+                let inner = moclib::hpxranges2d::HpxRanges2D(moc_2d_ranges);
+                Ok(inner)
+            }
+            _ => Err(JsValue::from_str(
+                "MOC not supported. Must be a FREQ|HPX 2DMOC coded on U64 only",
+            )),
+        }?;
+
+        Ok(Self(sfmoc))
+    }
+
+    /*pub fn from_fixed_hpx_cells(
+        depth: u8,
+        hpx_idx: impl Iterator<Item = u64>,
+        cap: Option<usize>,
+    ) -> Self {
+        let moc = RangeMOC::from_fixed_depth_cells(depth, hpx_idx, cap);
+        SpaceMoc(moc)
+    }
+
+    pub fn from_hpx_cells<'a>(
+        depth: u8,
+        hpx_cell_it: impl Iterator<Item = &'a HEALPixCell>,
+        cap: Option<usize>,
+    ) -> Self {
+        let cells_it = hpx_cell_it.map(|HEALPixCell(depth, idx)| (*depth, *idx));
+
+        let moc = RangeMOC::from_cells(depth, cells_it, cap);
+        SpaceMoc(moc)
+    }*/
+
+    pub fn f_max_depth(&self) -> u8 {
+        self.0.compute_min_depth().0
+    }
+
+    pub fn s_max_depth(&self) -> u8 {
+        self.0.compute_min_depth().1
+    }
+
+    pub fn sky_fraction(&self) -> f64 {
+        todo!()
+    }
+
+    pub fn intersects_cell(&self, cell: &HEALPixFreqCell) -> bool {
+        let HEALPixFreqCell {
+            hpx,
+            f_hash,
+            f_depth,
+        } = *cell;
+
+        let f_hash_0 = f_hash << (Frequency::<u64>::MAX_DEPTH - f_depth);
+        let f_hash_1 = (f_hash + 1) << (Frequency::<u64>::MAX_DEPTH - f_depth);
+
+        //let f0 = Frequency::<u64>::hash2freq(5171582628058365952);
+        //let f1 = Frequency::<u64>::hash2freq(5171590187200806912);
+        //al_core::log(&format!("F1: {f0}"));
+
+        let hpx_ranges_2d = HpxRanges2D::create_from_freq_ranges_positions(
+            vec![f_hash_0..f_hash_1; 1],
+            vec![hpx.idx()],
+            Frequency::<u64>::MAX_DEPTH,
+            hpx.depth(),
+        );
+
+        !self.0.intersection(&hpx_ranges_2d).is_empty()
+    }
+
+    /*/// provide the list of (hash hpx, hash freq) of the cells contained in the sfmoc
+    pub fn cells(&self) -> impl Iterator<Item = (u64, u64)> {
+        todo!()
+    }*/
+}
+
+use core::ops::Deref;
+
+use super::SpaceMoc;
+impl Deref for FreqSpaceMoc {
+    type Target = moclib::hpxranges2d::FreqSpaceMoc<u64, u64>;
+
+    fn deref(&'_ self) -> &'_ Self::Target {
+        &self.0
+    }
+}
--- a/src/core/src/healpix/moc/mod.rs
+++ b/src/core/src/healpix/moc/mod.rs
@@ -0,0 +1,10 @@
+mod freq_space;
+mod space;
+
+pub use freq_space::FreqSpaceMoc;
+pub use space::SpaceMoc;
+
+pub enum Moc {
+    FreqSpace(FreqSpaceMoc),
+    Space(SpaceMoc),
+}
--- a/src/core/src/healpix/moc/space.rs
+++ b/src/core/src/healpix/moc/space.rs
@@ -1,8 +1,8 @@
+use crate::math::lonlat::LonLat;
 use crate::math::lonlat::LonLatT;
 use crate::math::PI;
-use crate::math::{self, lonlat::LonLat};

-use cgmath::Vector3;
+use moclib::moc::RangeMOCIntoIterator;
 use moclib::{
    moc::range::{CellSelection, RangeMOC},
    qty::Hpx,
@@ -12,9 +12,63 @@ pub type Smoc = RangeMOC<u64, Hpx<u64>>;

 use crate::healpix::cell::HEALPixCell;
 #[derive(Clone, Debug)]
-pub struct HEALPixCoverage(pub Smoc);
+pub struct SpaceMoc(pub Smoc);
+
+use wasm_bindgen::JsValue;
+
+use moclib::deser::fits;
+use moclib::deser::fits::MocIdxType;
+use moclib::deser::fits::MocQtyType;
+use moclib::idx::Idx;
+use moclib::moc::range::op::convert::convert_to_u64;
+use moclib::moc::{CellMOCIntoIterator, CellMOCIterator, RangeMOCIterator};
+/// Convenient type for Space-MOCs
+pub fn from_fits_hpx<T: Idx>(moc: MocType<T, Hpx<T>, Cursor<&[u8]>>) -> Smoc {
+    match moc {
+        MocType::Ranges(moc) => convert_to_u64::<T, Hpx<T>, _, Hpx<u64>>(moc).into_range_moc(),
+        MocType::Cells(moc) => {
+            convert_to_u64::<T, Hpx<T>, _, Hpx<u64>>(moc.into_cell_moc_iter().ranges())
+                .into_range_moc()
+        }
+    }
+}
+
+use moclib::deser::fits::MocType;
+use std::io::Cursor;
+impl SpaceMoc {
+    pub fn from_fits_raw_bytes(bytes: &[u8]) -> Result<Self, JsValue> {
+        let smoc = match fits::from_fits_ivoa_custom(Cursor::new(bytes), true)
+            .map_err(|e| JsValue::from_str(&e.to_string()))?
+        {
+            MocIdxType::U16(MocQtyType::<u16, _>::Hpx(moc)) => Ok(from_fits_hpx(moc)),
+            MocIdxType::U32(MocQtyType::<u32, _>::Hpx(moc)) => Ok(from_fits_hpx(moc)),
+            MocIdxType::U64(MocQtyType::<u64, _>::Hpx(moc)) => Ok(from_fits_hpx(moc)),
+            _ => Err(JsValue::from_str("MOC not supported. Must be a HPX MOC")),
+        }?;
+
+        Ok(Self(smoc))
+    }
+
+    pub fn from_json(s: &str) -> Result<Self, JsValue> {
+        let moc = moclib::deser::json::from_json_aladin::<u64, Hpx<u64>>(s)
+            .map_err(|e| JsValue::from(js_sys::Error::new(&e.to_string())))?
+            .into_cell_moc_iter()
+            .ranges()
+            .into_range_moc();
+
+        Ok(Self(moc))
+    }
+
+    pub fn serialize_to_json(&self) -> Result<String, JsValue> {
+        let mut buf: Vec<u8> = Default::default();
+        (&self.0)
+            .into_range_moc_iter()
+            .cells()
+            .to_json_aladin(None, &mut buf)
+            .map(|()| unsafe { String::from_utf8_unchecked(buf) })
+            .map_err(|err| JsValue::from_str(&format!("{err:?}")))
+    }

-impl HEALPixCoverage {
    pub fn from_3d_coos<T: LonLat<f64>>(
        // The depth of the smallest HEALPix cells contained in it
        depth: u8,
@@ -38,7 +92,7 @@ impl HEALPixCoverage {
            depth,
            CellSelection::All,
        );
-        HEALPixCoverage(moc)
+        SpaceMoc(moc)
    }

    pub fn from_fixed_hpx_cells(
@@ -47,7 +101,7 @@ impl HEALPixCoverage {
        cap: Option<usize>,
    ) -> Self {
        let moc = RangeMOC::from_fixed_depth_cells(depth, hpx_idx, cap);
-        HEALPixCoverage(moc)
+        SpaceMoc(moc)
    }

    pub fn from_hpx_cells<'a>(
@@ -58,14 +112,14 @@ impl HEALPixCoverage {
        let cells_it = hpx_cell_it.map(|HEALPixCell(depth, idx)| (*depth, *idx));

        let moc = RangeMOC::from_cells(depth, cells_it, cap);
-        HEALPixCoverage(moc)
+        SpaceMoc(moc)
    }

    pub fn from_cone(lonlat: &LonLatT<f64>, rad: f64, depth: u8) -> Self {
        if rad >= PI {
            Self::allsky(depth)
        } else {
-            HEALPixCoverage(RangeMOC::from_cone(
+            SpaceMoc(RangeMOC::from_cone(
                lonlat.lon().to_radians(),
                lonlat.lat().to_radians(),
                rad,
@@ -78,12 +132,7 @@ impl HEALPixCoverage {

    pub fn allsky(depth_max: u8) -> Self {
        let moc = RangeMOC::new_full_domain(depth_max);
-        HEALPixCoverage(moc)
-    }
-
-    pub fn contains_coo(&self, coo: &Vector3<f64>) -> bool {
-        let (lon, lat) = math::lonlat::xyz_to_radec(coo);
-        self.0.is_in(lon.to_radians(), lat.to_radians())
+        SpaceMoc(moc)
    }

    pub fn contains_lonlat(&self, lonlat: &LonLatT<f64>) -> bool {
@@ -98,9 +147,9 @@ impl HEALPixCoverage {
        self.0.moc_ranges().intersects_range(&z29_rng)
    }

-    pub fn is_intersecting(&self, other: &Self) -> bool {
+    /*pub fn is_intersecting(&self, other: &Self) -> bool {
        !self.0.intersection(&other.0).is_empty()
-    }
+    }*/

    pub fn depth(&self) -> u8 {
        self.0.depth_max()
@@ -111,16 +160,16 @@ impl HEALPixCoverage {
    }

    pub fn not(&self) -> Self {
-        HEALPixCoverage(self.0.not())
+        SpaceMoc(self.0.not())
    }

    pub fn empty(depth: u8) -> Self {
-        HEALPixCoverage(RangeMOC::new_empty(depth))
+        SpaceMoc(RangeMOC::new_empty(depth))
    }
 }

 use core::ops::Deref;
-impl Deref for HEALPixCoverage {
+impl Deref for SpaceMoc {
    type Target = Smoc;

    fn deref(&'_ self) -> &'_ Self::Target {
--- a/src/core/src/healpix/mod.rs
+++ b/src/core/src/healpix/mod.rs
@@ -1,4 +1,4 @@
 pub mod cell;
-pub mod coverage;
 pub mod index_vector;
+pub mod moc;
 pub mod utils;
--- a/src/core/src/lib.rs
+++ b/src/core/src/lib.rs
@@ -39,7 +39,7 @@ pub trait Abort {
 impl<T> Abort for Option<T> {
    type Item = T;

-    #[inline]
+    #[inline(always)]
    fn unwrap_abort(self) -> Self::Item {
        use std::process;
        match self {
@@ -51,7 +51,7 @@ impl<T> Abort for Option<T> {
 impl<T, E> Abort for Result<T, E> {
    type Item = T;

-    #[inline]
+    #[inline(always)]
    fn unwrap_abort(self) -> Self::Item {
        use std::process;
        match self {
@@ -65,7 +65,7 @@ extern crate serde_json;
 #[macro_use]
 extern crate enum_dispatch;

-#[inline]
+#[inline(always)]
 pub fn unwrap_abort<T>(o: Option<T>) -> T {
    use std::process;
    match o {
@@ -85,7 +85,6 @@ mod utils;

 use math::projection::*;

-use moclib::moc::RangeMOCIntoIterator;
 //use votable::votable::VOTableWrapper;
 use crate::tile_fetcher::HiPSLocalFiles;
 use al_api::moc::MOCOptions;
@@ -101,8 +100,10 @@ pub mod async_task;
 mod camera;
 mod shaders;

+mod browser_support;
 mod coosys;
 mod downloader;
+mod event;
 mod fifo_cache;
 mod healpix;
 mod inertia;
@@ -112,16 +113,10 @@ mod shader;
 mod tile_fetcher;
 mod time;

-use crate::downloader::request::moc::from_fits_hpx;
 use crate::{
-    camera::CameraViewPort, healpix::coverage::HEALPixCoverage, math::lonlat::LonLatT,
-    shader::ShaderManager, time::DeltaTime,
+    camera::CameraViewPort, healpix::moc::SpaceMoc, math::lonlat::LonLatT, shader::ShaderManager,
+    time::DeltaTime,
 };
-use moclib::deser::fits;
-use moclib::deser::fits::MocIdxType;
-use moclib::deser::fits::MocQtyType;
-
-use std::io::Cursor;

 use al_api::color::{Color, ColorRGBA};
 use al_api::coo_system::CooSystem;
@@ -136,10 +131,6 @@ use cgmath::{Vector2, Vector3};

 use crate::healpix::cell::HEALPixCell;
 use math::angle::ArcDeg;
-use moclib::{
-    moc::{CellMOCIntoIterator, CellMOCIterator, RangeMOCIterator},
-    qty::Hpx,
-};

 #[wasm_bindgen]
 pub struct WebClient {
@@ -421,9 +412,24 @@ impl WebClient {
        self.app.set_image_hips_color_cfg(layer, meta)
    }

-    #[wasm_bindgen(js_name = setSliceNumber)]
-    pub fn set_hips_slice_number(&mut self, layer: String, slice: u32) -> Result<(), JsValue> {
-        self.app.set_hips_slice_number(&layer, slice)
+    #[wasm_bindgen(js_name = setFreq)]
+    pub fn set_hips_frequency(&mut self, layer: String, frequency: f32) -> Result<(), JsValue> {
+        self.app.set_hips_frequency(&layer, frequency)
+    }
+
+    #[wasm_bindgen(js_name = getFreq)]
+    pub fn get_hips_frequency(&mut self, layer: String) -> Result<f32, JsValue> {
+        self.app.get_hips_frequency(&layer)
+    }
+
+    #[wasm_bindgen(js_name = freq2hash)]
+    pub fn get_freq_hash(&mut self, layer: String, freq: f64) -> Result<u64, JsValue> {
+        self.app.get_freq_hash(&layer, freq)
+    }
+
+    #[wasm_bindgen(js_name = hash2freq)]
+    pub fn get_freq_from_hash(&mut self, layer: String, hash: u64) -> Result<f64, JsValue> {
+        self.app.get_freq_from_hash(&layer, hash)
    }

    #[wasm_bindgen(js_name = setBackgroundColor)]
@@ -1062,13 +1068,8 @@ impl WebClient {
    pub fn add_json_moc(&mut self, options: MOCOptions, data: &JsValue) -> Result<(), JsValue> {
        let str: String = js_sys::JSON::stringify(data)?.into();

-        let moc = moclib::deser::json::from_json_aladin::<u64, Hpx<u64>>(&str)
-            .map_err(|e| JsValue::from(js_sys::Error::new(&e.to_string())))?
-            .into_cell_moc_iter()
-            .ranges()
-            .into_range_moc();
-
-        self.app.add_moc(HEALPixCoverage(moc), options)?;
+        let smoc = SpaceMoc::from_json(&str)?;
+        self.app.add_moc(smoc, options)?;

        Ok(())
    }
@@ -1076,18 +1077,8 @@ impl WebClient {
    #[wasm_bindgen(js_name = addFITSMOC)]
    pub fn add_fits_moc(&mut self, options: MOCOptions, data: &[u8]) -> Result<(), JsValue> {
        //let bytes = js_sys::Uint8Array::new(array_buffer).to_vec();
-        let moc = match fits::from_fits_ivoa_custom(Cursor::new(data), false)
-            .map_err(|e| JsValue::from_str(&e.to_string()))?
-        {
-            MocIdxType::U16(MocQtyType::<u16, _>::Hpx(moc)) => {
-                Ok(crate::downloader::request::moc::from_fits_hpx(moc))
-            }
-            MocIdxType::U32(MocQtyType::<u32, _>::Hpx(moc)) => Ok(from_fits_hpx(moc)),
-            MocIdxType::U64(MocQtyType::<u64, _>::Hpx(moc)) => Ok(from_fits_hpx(moc)),
-            _ => Err(JsValue::from_str("MOC not supported. Must be a HPX MOC")),
-        }?;
-
-        self.app.add_moc(HEALPixCoverage(moc), options)?;
+        let smoc = SpaceMoc::from_fits_raw_bytes(data)?;
+        self.app.add_moc(smoc, options)?;

        Ok(())
    }
@@ -1102,7 +1093,7 @@ impl WebClient {
    ) -> Result<(), JsValue> {
        let tile_d = self.app.get_norder();
        let pixel_d = tile_d + 9;
-        let moc = HEALPixCoverage::from_cone(
+        let moc = SpaceMoc::from_cone(
            &LonLatT::new(
                ra_deg.to_radians().to_angle(),
                dec_deg.to_radians().to_angle(),
@@ -1136,7 +1127,7 @@ impl WebClient {

        let v_in = &Vector3::new(1.0, 0.0, 0.0);

-        let mut moc = HEALPixCoverage::from_3d_coos(pixel_d as u8 - 1, vertex_it, v_in);
+        let mut moc = SpaceMoc::from_3d_coos(pixel_d as u8 - 1, vertex_it, v_in);
        if moc.sky_fraction() > 0.5 {
            moc = moc.not();
        }
@@ -1182,13 +1173,7 @@ impl WebClient {
            .get_moc(&moc_uuid)
            .ok_or_else(|| JsValue::from(js_sys::Error::new("MOC not found")))?;

-        let mut buf: Vec<u8> = Default::default();
-        let json = (&moc.0)
-            .into_range_moc_iter()
-            .cells()
-            .to_json_aladin(None, &mut buf)
-            .map(|()| unsafe { String::from_utf8_unchecked(buf) })
-            .map_err(|err| JsValue::from_str(&format!("{err:?}")))?;
+        let json = moc.serialize_to_json()?;

        serde_wasm_bindgen::to_value(&json).map_err(|err| JsValue::from_str(&format!("{err:?}")))
    }
--- a/src/core/src/math/lonlat.rs
+++ b/src/core/src/math/lonlat.rs
@@ -55,6 +55,15 @@ impl From<fitsrs::wcs::LonLat> for LonLatT<f64> {
    }
 }

+impl<S: BaseFloat> From<&'_ Vector3<S>> for LonLatT<S> {
+    fn from(v: &'_ Vector3<S>) -> Self {
+        let lon = Rad(v.x.atan2(v.z));
+        let lat = Rad(v.y.atan2((v.x * v.x + v.z * v.z).sqrt()));
+
+        LonLatT::new(Angle::new(lon), Angle::new(lat))
+    }
+}
+
 impl<S> LonLat<S> for LonLatT<S>
 where
    S: BaseFloat,
@@ -98,10 +107,7 @@ where

    #[inline]
    fn lonlat(&self) -> LonLatT<S> {
-        let lon = Rad(self.x.atan2(self.z));
-        let lat = Rad(self.y.atan2((self.x * self.x + self.z * self.z).sqrt()));
-
-        LonLatT::new(Angle::new(lon), Angle::new(lat))
+        self.into()
    }

    #[inline]
--- a/src/core/src/math/mod.rs
+++ b/src/core/src/math/mod.rs
@@ -9,6 +9,8 @@ pub const SQRT_TWO: f64 = std::f64::consts::SQRT_2;

 pub const ZERO: f64 = 0.0;

+pub mod spectra;
+
 pub mod angle;
 pub mod lonlat;
 pub mod projection;
--- a/src/core/src/math/spectra.rs
+++ b/src/core/src/math/spectra.rs
@@ -0,0 +1,104 @@
+pub trait SpectralUnit: Into<Freq> + Clone + Copy {
+    fn hash(&self, depth: u8) -> u64 {
+        let f: Freq = (*self).into();
+        let f_hash_max_order = Frequency::<u64>::freq2hash(f.0);
+
+        f_hash_max_order >> (Frequency::<u64>::MAX_DEPTH - depth)
+    }
+}
+
+use moclib::qty::{Frequency, MocQty};
+
+pub const FREQ_MAX: Freq = Freq(5.846_006_549_323_611e48);
+pub const FREQ_MIN: Freq = Freq(5.048_709_793_414_476e-29);
+
+/// Frequency in Hz unit
+#[derive(Clone, Copy, Debug, PartialEq, PartialOrd)]
+pub struct Freq(pub f64);
+
+impl Freq {
+    pub fn from_hash(hash: u64) -> Self {
+        let f = Frequency::hash2freq(hash);
+
+        Freq(f)
+    }
+
+    pub fn from_hash_with_order(hash: u64, order: u8) -> Self {
+        let hash_max_order = hash << (Frequency::<u64>::MAX_DEPTH - order);
+        let f = Frequency::hash2freq(hash_max_order);
+
+        Freq(f)
+    }
+
+    pub fn max(&self, other: Self) -> Self {
+        Freq(self.0.max(other.0))
+    }
+
+    pub fn min(&self, other: Self) -> Self {
+        Freq(self.0.min(other.0))
+    }
+
+    pub fn num_max_cells(order: u8) -> usize {
+        (Frequency::<u64>::n_cells_max() >> (Frequency::<u64>::MAX_DEPTH - order)) as usize
+    }
+}
+
+use std::ops::Sub;
+impl Sub for Freq {
+    type Output = Self;
+
+    fn sub(self, other: Self) -> Self::Output {
+        Self(self.0 - other.0)
+    }
+}
+
+use std::ops::Add;
+impl Add for Freq {
+    type Output = Self;
+
+    fn add(self, other: Self) -> Self::Output {
+        Self(self.0 + other.0)
+    }
+}
+
+/// Wavelength in meter unit
+#[derive(Clone, Copy)]
+pub struct Wavelength(pub f64);
+
+/// Velocity in meter/sec unit
+#[derive(Clone, Copy)]
+pub struct Velocity {
+    /// A rest frequency to compute the velocity from
+    /// given by the obs_restfreq HiPS property
+    rest_freq: Freq,
+    /// The velocity in m/s
+    velocity: f64,
+}
+
+const SPEED_OF_LIGHT: f64 = 299792458.0;
+
+impl From<Velocity> for Freq {
+    fn from(v: Velocity) -> Self {
+        let Velocity {
+            rest_freq,
+            velocity,
+        } = v;
+
+        // v = c * (of - f) / of
+        // v * of = c * (of - f)
+        // c * f = c * of - v * of = of * (c - v)
+        // f = of * (c - v) / c = of * (1 - v / c)
+
+        Freq(rest_freq.0 * (1.0 - velocity / SPEED_OF_LIGHT))
+    }
+}
+
+impl From<Wavelength> for Freq {
+    fn from(lambda: Wavelength) -> Self {
+        Freq(SPEED_OF_LIGHT / lambda.0)
+    }
+}
+
+impl SpectralUnit for Freq {}
+impl SpectralUnit for Wavelength {}
+impl SpectralUnit for Velocity {}
--- a/src/core/src/renderable/hips/config.rs
+++ b/src/core/src/renderable/hips/config.rs
@@ -1,39 +1,52 @@
-use al_api::hips::ImageExt;
+use al_api::hips::{DataproductType, ImageExt};

+use crate::math::spectra::Freq;
 use al_core::image::format::ImageFormatType;
 use al_core::texture::format::PixelType;
 use web_sys::{RequestCredentials, RequestMode};
-
 #[derive(Debug)]
 pub struct HiPSConfig {
    pub root_url: String,
    // HiPS image format
    // TODO: Make that independant of the HiPS but of the ImageFormat

-    // The size of the texture images
-    tile_size: i32,
+    // Size of the tiles
+    pub tile_size: i32,

+    // Number of slices for HiPS cubes
+    pub cube_depth: Option<u32>,
+
+    /// Max depth of the current HiPS tiles
+    pub max_depth_tile: u8,
+    /// Min depth of the current HiPS tiles
    min_depth_tile: u8,
-    // the number of slices for cubes
-    cube_depth: Option<u32>,
+    /// Max depth in the frequency axis (HiPS3D only)
+    pub max_depth_freq: Option<u8>,

-    // Max depth of the current HiPS tiles
-    max_depth_tile: u8,
+    /// Start of spectral coordinates (in meters)
+    pub em_min: Option<Freq>,
+    /// End of spectral coordinates (in meters)
+    pub em_max: Option<Freq>,
+
+    // For HiPS3D
+    pub tile_depth: Option<u8>,

    pub is_allsky: bool,

    pub frame: CooSystem,
+    // For FITS HiPSes
    pub bitpix: Option<i32>,
    format: ImageFormatType,
-    //dataproduct_subtype: Option<Vec<String>>,
-    //colored: bool,
+
+    pub dataproduct_type: DataproductType,
+
    pub creator_did: String,

    pub request_credentials: RequestCredentials,
    pub request_mode: RequestMode,
 }

-use crate::HiPSProperties;
+use crate::{math::spectra::Wavelength, HiPSProperties};
 use al_api::coo_system::CooSystem;
 use wasm_bindgen::JsValue;

@@ -73,6 +86,7 @@ impl HiPSConfig {
                        32 => Ok(PixelType::R32I),
                        -32 => Ok(PixelType::R32F),
                        -64 => Ok(PixelType::R32F),
+                        64 => Ok(PixelType::R32I),
                        _ => Err(JsValue::from_str(
                            "Fits tiles exists but the BITPIX is not correct in the property file",
                        )),
@@ -116,6 +130,19 @@ impl HiPSConfig {
            _ => RequestMode::Cors,
        };

+        let dataproduct_type = properties.get_dataproduct_type().ok_or(JsValue::from_str(
+            "dataproduct_type keyword is required in the HiPS properties file",
+        ))?;
+        let max_depth_freq = properties.get_hips_order_freq();
+        let tile_depth = properties.get_hips_tile_depth();
+
+        let em_min: Option<Freq> = properties
+            .get_em_max()
+            .map(|lambda| Wavelength(lambda as f64).into());
+        let em_max: Option<Freq> = properties
+            .get_em_min()
+            .map(|lambda| Wavelength(lambda as f64).into());
+
        let hips_config = HiPSConfig {
            creator_did,
            // HiPS name
@@ -125,15 +152,23 @@ impl HiPSConfig {

            is_allsky,

-            // the number of slices in a cube
+            // HiPSCube
            cube_depth,

+            em_min,
+            em_max,
+
+            // HiPS3D
+            tile_depth,
+            max_depth_freq,
+
            frame,
            bitpix,
            format,
            tile_size,
            request_credentials,
            request_mode,
+            dataproduct_type,
        };

        Ok(hips_config)
@@ -148,6 +183,7 @@ impl HiPSConfig {
                        8 => Ok(PixelType::R8U),
                        16 => Ok(PixelType::R16I),
                        32 => Ok(PixelType::R32I),
+                        64 => Ok(PixelType::R32I),
                        -32 => Ok(PixelType::R32F),
                        -64 => Ok(PixelType::R32F),
                        _ => Err(JsValue::from_str(
@@ -187,6 +223,7 @@ impl HiPSConfig {
        self.root_url = root_url;
    }

+    #[inline(always)]
    pub fn get_cube_depth(&self) -> Option<u32> {
        self.cube_depth
    }
--- a/src/core/src/renderable/hips/d2/buffer.rs
+++ b/src/core/src/renderable/hips/d2/buffer.rs
@@ -1,10 +1,9 @@
-use std::cmp::Ordering;
-use std::collections::BinaryHeap;
+use crate::renderable::hips::d2::texture::HpxTex;
 use std::collections::HashMap;

 use al_core::texture::format::PixelType;

-use crate::renderable::hips::HpxTile;
+use crate::downloader::request::allsky::AllskyRequest;
 use cgmath::Vector3;

 use al_api::hips::ImageExt;
@@ -16,9 +15,8 @@ use al_core::texture::format::{R16I, R32F, R32I, R8U, RGB8U, RGBA8U};
 use al_core::Texture2DArray;
 use al_core::WebGlContext;

-use super::texture::{HpxTexture2D, HpxTexture2DUniforms};
+use super::texture::HpxTexUniforms;

-use crate::downloader::request::allsky::Allsky;
 use crate::healpix::cell::HEALPixCell;
 use crate::healpix::cell::NUM_HPX_TILES_DEPTH_ZERO;
 use crate::renderable::hips::config::HiPSConfig;
@@ -26,116 +24,19 @@ use crate::time::Time;
 use crate::Abort;
 use crate::JsValue;

-#[derive(Clone, Debug)]
-pub struct TextureCellItem {
-    cell: HEALPixCell,
-    time_request: Time,
-}
-
-impl TextureCellItem {
-    fn is_root(&self) -> bool {
-        self.cell.is_root()
-    }
-}
-
-impl PartialEq for TextureCellItem {
-    fn eq(&self, other: &Self) -> bool {
-        self.cell == other.cell
-    }
-}
-impl Eq for TextureCellItem {}
-
-// Ordering based on the time the tile has been requested
-impl PartialOrd for TextureCellItem {
-    fn partial_cmp(&self, other: &Self) -> Option<Ordering> {
-        Some(self.cmp(other))
-    }
-}
-
-impl Ord for TextureCellItem {
-    fn cmp(&self, other: &Self) -> Ordering {
-        other
-            .time_request
-            .partial_cmp(&self.time_request)
-            .unwrap_abort()
-    }
-}
-
-impl From<HpxTexture2D> for TextureCellItem {
-    fn from(texture: HpxTexture2D) -> Self {
-        let time_request = texture.time_request();
-        let cell = *texture.cell();
-
-        Self { cell, time_request }
-    }
-}
-impl From<&HpxTexture2D> for TextureCellItem {
-    fn from(texture: &HpxTexture2D) -> Self {
-        let time_request = texture.time_request();
-        let cell = *texture.cell();
-
-        Self { cell, time_request }
-    }
-}
-impl From<&mut HpxTexture2D> for TextureCellItem {
-    fn from(texture: &mut HpxTexture2D) -> Self {
-        let time_request = texture.time_request();
-        let cell = *texture.cell();
-
-        Self { cell, time_request }
-    }
-}
-
-struct HEALPixCellHeap(BinaryHeap<TextureCellItem>);
-
-impl HEALPixCellHeap {
-    fn with_capacity(cap: usize) -> Self {
-        Self(BinaryHeap::with_capacity(cap))
-    }
-
-    fn push<E: Into<TextureCellItem>>(&mut self, item: E) {
-        let item = item.into();
-        self.0.push(item);
-    }
-
-    fn update_entry<E: Into<TextureCellItem>>(&mut self, item: E) {
-        let item = item.into();
-        self.0 = self
-            .0
-            .drain()
-            // Remove the cell
-            .filter(|texture_node| texture_node.cell != item.cell)
-            // Collect to a new binary heap that does not have cell anymore
-            .collect::<BinaryHeap<_>>();
-
-        self.push(item);
-    }
-
-    fn clear(&mut self) {
-        self.0.clear();
-    }
-
-    fn pop(&mut self) -> Option<TextureCellItem> {
-        self.0.pop()
-    }
-
-    fn len(&self) -> usize {
-        self.0.len()
-    }
-}
-
+use super::super::tile_heap::{Tile, TileHeap};
 use crate::renderable::hips::HpxTileBuffer;
 // Fixed sized binary heap
 pub struct HiPS2DBuffer {
    // Some information about the HiPS
    config: HiPSConfig,
-    heap: HEALPixCellHeap,
+
+    heap: TileHeap<HEALPixCell>,
+    textures: HashMap<HEALPixCell, HpxTex>,

    num_root_textures_available: u8,
-    size: usize,

-    textures: HashMap<HEALPixCell, HpxTexture2D>,
-    base_textures: [HpxTexture2D; NUM_HPX_TILES_DEPTH_ZERO],
+    base_textures: [HpxTex; NUM_HPX_TILES_DEPTH_ZERO],

    // Array of 2D textures
    tile_pixels: Texture2DArray,
@@ -218,16 +119,14 @@ fn create_hpx_texture_storage(
 }

 impl HiPS2DBuffer {
-    pub fn push_allsky(&mut self, allsky: Allsky) -> Result<(), JsValue> {
-        let Allsky {
-            image, time_req, ..
-        } = allsky;
+    pub fn push_allsky(&mut self, allsky: AllskyRequest) -> Result<(), JsValue> {
+        let AllskyRequest { request, .. } = allsky;

        {
-            let mutex_locked = image.borrow();
+            let mutex_locked = request.data.borrow();
            let images = mutex_locked.as_ref().unwrap_abort();
            for (idx, image) in images.iter().enumerate() {
-                self.push(&HEALPixCell(0, idx as u64), image, time_req)?;
+                self.push(&HEALPixCell(0, idx as u64), image, request.time_request)?;
            }
        }

@@ -250,14 +149,6 @@ impl HiPS2DBuffer {
        }
    }

-    fn is_heap_full(&self) -> bool {
-        // Check that there are no more than num_textures
-        // textures in the buffer
-        let num_textures_heap = self.heap.len();
-
-        num_textures_heap == self.size
-    }
-
    // Update the priority of the texture containing the tile
    // It must be ensured that the tile is already contained in the buffer
    pub fn update_priority(&mut self, cell: &HEALPixCell /*, new_fov_cell: bool*/) {
@@ -270,7 +161,7 @@ impl HiPS2DBuffer {

        let texture = self
            .textures
-            .get_mut(cell)
+            .get(cell)
            .expect("Texture cell has not been found while the buffer contains one of its tile!");
        // Reset the time the tile has been received if it is a new cell present in the fov
        //if new_fov_cell {
@@ -283,8 +174,8 @@ impl HiPS2DBuffer {
        // But other textures can be removed thanks to the heap
        // data-structure. We have to update the time_request of the texture
        // and push it again in the heap to update its position.
-        let mut tex_cell_item: TextureCellItem = texture.into();
-        tex_cell_item.time_request = Time::now();
+        let mut tex_cell_item: Tile<HEALPixCell> = texture.into();
+        tex_cell_item.reset_time();

        self.heap.update_entry(tex_cell_item);
    }
@@ -331,14 +222,14 @@ impl HiPS2DBuffer {
            if !self.contains_tile(cell) {
                // The texture is not among the essential ones
                // (i.e. is not a root texture)
-                let mut texture = if self.is_heap_full() {
+                let mut texture = if self.heap.is_full() {
                    // Pop the oldest requested texture
                    let oldest_texture = self.heap.pop().unwrap_abort();
                    // Ensure this is not a base texture
                    debug_assert!(!oldest_texture.is_root());

                    // Remove it from the textures HashMap
-                    let mut texture = self.textures.remove(&oldest_texture.cell).expect(
+                    let mut texture = self.textures.remove(oldest_texture.cell()).expect(
                        "Texture (oldest one) has not been found in the buffer of textures",
                    );
                    texture.replace(cell, time_request);
@@ -347,7 +238,7 @@ impl HiPS2DBuffer {
                } else {
                    let idx = NUM_HPX_TILES_DEPTH_ZERO + self.heap.len();

-                    HpxTexture2D::new(cell, idx as i32, time_request)
+                    HpxTex::new(cell, idx as i32, time_request)
                };

                texture.copy_to_gpu(
@@ -421,10 +312,26 @@ impl HiPS2DBuffer {
    pub fn render_allsky(&mut self, flag: bool) {
        self.allsky_rendering = flag;
    }
+
+    // Get the nearest parent tile found in the CPU buffer
+    pub fn get_nearest_parent(&self, cell: &HEALPixCell) -> Option<HEALPixCell> {
+        let mut parent_cell = cell.parent();
+
+        while !self.contains(&parent_cell) && !parent_cell.is_root() {
+            parent_cell = parent_cell.parent();
+        }
+
+        if self.contains(&parent_cell) {
+            Some(parent_cell)
+        } else {
+            None
+        }
+    }
 }

 impl HpxTileBuffer for HiPS2DBuffer {
-    type T = HpxTexture2D;
+    type T = HpxTex;
+    type C = HEALPixCell;

    fn new(gl: &WebGlContext, config: HiPSConfig) -> Result<Self, JsValue> {
        let size = 128 - NUM_HPX_TILES_DEPTH_ZERO;
@@ -432,23 +339,23 @@ impl HpxTileBuffer for HiPS2DBuffer {
        // Ensures there is at least space for the 12
        // root textures
        //debug_assert!(size >= NUM_HPX_TILES_DEPTH_ZERO);
-        let heap = HEALPixCellHeap::with_capacity(size);
+        let heap = TileHeap::with_capacity(size);
        let textures = HashMap::with_capacity(size);

        let now = Time::now();
        let base_textures = [
-            HpxTexture2D::new(&HEALPixCell(0, 0), 0, now),
-            HpxTexture2D::new(&HEALPixCell(0, 1), 1, now),
-            HpxTexture2D::new(&HEALPixCell(0, 2), 2, now),
-            HpxTexture2D::new(&HEALPixCell(0, 3), 3, now),
-            HpxTexture2D::new(&HEALPixCell(0, 4), 4, now),
-            HpxTexture2D::new(&HEALPixCell(0, 5), 5, now),
-            HpxTexture2D::new(&HEALPixCell(0, 6), 6, now),
-            HpxTexture2D::new(&HEALPixCell(0, 7), 7, now),
-            HpxTexture2D::new(&HEALPixCell(0, 8), 8, now),
-            HpxTexture2D::new(&HEALPixCell(0, 9), 9, now),
-            HpxTexture2D::new(&HEALPixCell(0, 10), 10, now),
-            HpxTexture2D::new(&HEALPixCell(0, 11), 11, now),
+            HpxTex::new(&HEALPixCell(0, 0), 0, now),
+            HpxTex::new(&HEALPixCell(0, 1), 1, now),
+            HpxTex::new(&HEALPixCell(0, 2), 2, now),
+            HpxTex::new(&HEALPixCell(0, 3), 3, now),
+            HpxTex::new(&HEALPixCell(0, 4), 4, now),
+            HpxTex::new(&HEALPixCell(0, 5), 5, now),
+            HpxTex::new(&HEALPixCell(0, 6), 6, now),
+            HpxTex::new(&HEALPixCell(0, 7), 7, now),
+            HpxTex::new(&HEALPixCell(0, 8), 8, now),
+            HpxTex::new(&HEALPixCell(0, 9), 9, now),
+            HpxTex::new(&HEALPixCell(0, 10), 10, now),
+            HpxTex::new(&HEALPixCell(0, 11), 11, now),
        ];
        let channel = config.get_format().get_pixel_format();
        let tile_size = config.get_tile_size();
@@ -467,7 +374,6 @@ impl HpxTileBuffer for HiPS2DBuffer {
            config,
            heap,

-            size,
            num_root_textures_available,
            textures,
            base_textures,
@@ -492,18 +398,18 @@ impl HpxTileBuffer for HiPS2DBuffer {

        let now = Time::now();
        self.base_textures = [
-            HpxTexture2D::new(&HEALPixCell(0, 0), 0, now),
-            HpxTexture2D::new(&HEALPixCell(0, 1), 1, now),
-            HpxTexture2D::new(&HEALPixCell(0, 2), 2, now),
-            HpxTexture2D::new(&HEALPixCell(0, 3), 3, now),
-            HpxTexture2D::new(&HEALPixCell(0, 4), 4, now),
-            HpxTexture2D::new(&HEALPixCell(0, 5), 5, now),
-            HpxTexture2D::new(&HEALPixCell(0, 6), 6, now),
-            HpxTexture2D::new(&HEALPixCell(0, 7), 7, now),
-            HpxTexture2D::new(&HEALPixCell(0, 8), 8, now),
-            HpxTexture2D::new(&HEALPixCell(0, 9), 9, now),
-            HpxTexture2D::new(&HEALPixCell(0, 10), 10, now),
-            HpxTexture2D::new(&HEALPixCell(0, 11), 11, now),
+            HpxTex::new(&HEALPixCell(0, 0), 0, now),
+            HpxTex::new(&HEALPixCell(0, 1), 1, now),
+            HpxTex::new(&HEALPixCell(0, 2), 2, now),
+            HpxTex::new(&HEALPixCell(0, 3), 3, now),
+            HpxTex::new(&HEALPixCell(0, 4), 4, now),
+            HpxTex::new(&HEALPixCell(0, 5), 5, now),
+            HpxTex::new(&HEALPixCell(0, 6), 6, now),
+            HpxTex::new(&HEALPixCell(0, 7), 7, now),
+            HpxTex::new(&HEALPixCell(0, 8), 8, now),
+            HpxTex::new(&HEALPixCell(0, 9), 9, now),
+            HpxTex::new(&HEALPixCell(0, 10), 10, now),
+            HpxTex::new(&HEALPixCell(0, 11), 11, now),
        ];

        self.heap.clear();
@@ -527,7 +433,7 @@ impl HpxTileBuffer for HiPS2DBuffer {

    // Tell if a texture is available meaning all its sub tiles
    // must have been written for the GPU
-    fn contains(&self, cell: &HEALPixCell) -> bool {
+    fn contains(&self, cell: &Self::C) -> bool {
        if let Some(t) = self.get(cell) {
            t.is_on_gpu()
        } else {
@@ -536,7 +442,7 @@ impl HpxTileBuffer for HiPS2DBuffer {
    }

    /// Accessors
-    fn get(&self, cell: &HEALPixCell) -> Option<&Self::T> {
+    fn get(&self, cell: &Self::C) -> Option<&Self::T> {
        if cell.is_root() {
            let HEALPixCell(_, idx) = cell;
            Some(&self.base_textures[*idx as usize])
@@ -570,7 +476,7 @@ impl SendUniforms for HiPS2DBuffer {
                let cell = HEALPixCell(0, idx as u64);

                let texture = self.get(&cell).unwrap();
-                let texture_uniforms = HpxTexture2DUniforms::new(texture, idx as i32);
+                let texture_uniforms = HpxTexUniforms::new(texture, idx as i32);
                shader.attach_uniforms_from(&texture_uniforms);
            }

--- a/src/core/src/renderable/hips/d2/mod.rs
+++ b/src/core/src/renderable/hips/d2/mod.rs
@@ -2,9 +2,12 @@ pub mod buffer;
 pub mod texture;

 use crate::app::BLENDING_ANIM_DURATION;
+use crate::browser_support::BrowserFeaturesSupport;
 use crate::downloader::query;
+use crate::downloader::query::CellDesc;
+use crate::downloader::request::allsky::AllskyRequest;
 use crate::math::angle::ToAngle;
-use crate::renderable::hips::HpxTile;
+use crate::tile_fetcher::TileFetcherQueue;
 use al_api::hips::ImageExt;
 use al_api::hips::ImageMetadata;
 use al_core::colormap::Colormap;
@@ -32,8 +35,7 @@ use crate::camera::CameraViewPort;
 use crate::shader::ShaderManager;
 use crate::utils;

-use crate::downloader::request::allsky::Allsky;
-use crate::healpix::{cell::HEALPixCell, coverage::HEALPixCoverage};
+use crate::healpix::{cell::HEALPixCell, moc::SpaceMoc};
 use crate::time::Time;

 use super::config::HiPSConfig;
@@ -44,7 +46,7 @@ use std::collections::HashSet;
 // to not be too much skewed

 use buffer::HiPS2DBuffer;
-use texture::HpxTexture2D;
+use texture::HpxTex;

 use super::raytracing::RayTracer;
 use super::uv::{TileCorner, TileUVW};
@@ -63,13 +65,21 @@ pub struct HpxDrawData<'a> {

 impl<'a> HpxDrawData<'a> {
    fn from_texture(
-        starting_texture: &HpxTexture2D,
-        ending_texture: &HpxTexture2D,
+        starting_texture: &HpxTex,
+        ending_texture: &HpxTex,
        cell: &'a HEALPixCell,
    ) -> Self {
-        let uv_0 = TileUVW::new(cell, starting_texture);
-        let uv_1 = TileUVW::new(cell, ending_texture);
-        let start_time = ending_texture.start_time().as_millis();
+        let uv_0 = TileUVW::new(
+            cell,
+            &Some(starting_texture.cell),
+            starting_texture.idx() as f32,
+        );
+        let uv_1 = TileUVW::new(
+            cell,
+            &Some(ending_texture.cell),
+            ending_texture.idx() as f32,
+        );
+        let start_time = ending_texture.start_time.unwrap_or(Time::now()).as_millis();

        Self {
            uv_0,
@@ -226,7 +236,7 @@ pub struct HiPS2D {
    vao: VertexArrayObject,
    gl: WebGlContext,

-    footprint_moc: Option<HEALPixCoverage>,
+    moc: Option<SpaceMoc>,

    // A buffer storing the cells in the view
    hpx_cells_in_view: Vec<HEALPixCell>,
@@ -292,7 +302,7 @@ impl HiPS2D {
        let buffer = HiPS2DBuffer::new(gl, config)?;

        let gl = gl.clone();
-        let footprint_moc = None;
+        let moc = None;
        let hpx_cells_in_view = vec![];
        // request the allsky texture
        Ok(Self {
@@ -313,15 +323,17 @@ impl HiPS2D {

            idx_vertices,

-            footprint_moc,
+            moc,
            hpx_cells_in_view,
        })
    }

-    pub fn look_for_new_tiles<'a>(
-        &'a mut self,
-        camera: &'a CameraViewPort,
-    ) -> Option<impl Iterator<Item = HEALPixCell> + 'a> {
+    pub fn look_for_new_tiles(
+        &mut self,
+        tile_fetcher: &mut TileFetcherQueue,
+        camera: &CameraViewPort,
+        browser_features_support: &BrowserFeaturesSupport,
+    ) {
        // do not add tiles if the view is already at depth 0
        let cfg = self.get_config();
        let depth_tile = camera
@@ -330,37 +342,66 @@ impl HiPS2D {
            .max(cfg.get_min_depth_tile());

        let survey_frame = cfg.get_frame();
-        let mut already_considered_tiles = HashSet::new();
+        let min_tile_depth = cfg.get_min_depth_tile();

-        let tile_cells_iter = camera
+        let tile_queries_iter = camera
            .get_hpx_cells(depth_tile, survey_frame)
            .into_iter()
-            .filter(move |tile_cell| {
-                if already_considered_tiles.contains(tile_cell) {
-                    return false;
-                }
-
-                already_considered_tiles.insert(*tile_cell);
-
-                if let Some(moc) = self.footprint_moc.as_ref() {
-                    moc.intersects_cell(tile_cell) && !self.update_priority_tile(tile_cell)
+            .filter_map(|tile_cell| {
+                let make_query = if let Some(moc) = self.moc.as_ref() {
+                    moc.intersects_cell(&tile_cell) && !self.update_priority_tile(&tile_cell)
                } else {
-                    !self.update_priority_tile(tile_cell)
+                    !self.update_priority_tile(&tile_cell)
+                };
+
+                if make_query {
+                    Some(query::Tile::new(
+                        &tile_cell,
+                        self.get_config(),
+                        browser_features_support,
+                    ))
+                } else {
+                    None
                }
            });

-        Some(tile_cells_iter)
+        let mut ancestors = HashSet::new();
+
+        for tile_query in tile_queries_iter {
+            match tile_query.cell {
+                CellDesc::HiPS2D { cell, .. } => {
+                    let tile_cell = cell;
+                    tile_fetcher.append(tile_query);
+
+                    // check if we are starting aladin lite or not.
+                    // If so we want to retrieve only the tiles in the view and access them
+                    // directly i.e. without blending them with less precised tiles
+                    if tile_fetcher.get_num_tile_fetched() > 0
+                        && tile_cell.depth() >= min_tile_depth + 3
+                    {
+                        let ancestor_tile_cell = tile_cell.ancestor(3);
+                        ancestors.insert(ancestor_tile_cell);
+                    }
+                }
+                _ => unreachable!(),
+            }
+        }
+
+        for ancestor in ancestors {
+            if !self.update_priority_tile(&ancestor) {
+                tile_fetcher.append(query::Tile::new(
+                    &ancestor,
+                    self.get_config(),
+                    browser_features_support,
+                ));
+            }
+        }
    }

    pub fn contains_tile(&self, cell: &HEALPixCell) -> bool {
        self.buffer.contains_tile(cell)
    }

-    pub fn get_tile_query(&self, cell: &HEALPixCell) -> query::Tile {
-        let cfg = self.get_config();
-        query::Tile::new(cell, None, cfg)
-    }
-
    pub fn update(&mut self, camera: &mut CameraViewPort, projection: &ProjectionType) {
        let raytracing = camera.is_raytracing(projection);

@@ -401,13 +442,13 @@ impl HiPS2D {
    }

    #[inline]
-    pub fn set_moc(&mut self, moc: HEALPixCoverage) {
-        self.footprint_moc = Some(moc);
+    pub fn set_moc(&mut self, moc: SpaceMoc) {
+        self.moc = Some(moc);
    }

    #[inline]
-    pub fn get_moc(&self) -> Option<&HEALPixCoverage> {
-        self.footprint_moc.as_ref()
+    pub fn get_moc(&self) -> Option<&SpaceMoc> {
+        self.moc.as_ref()
    }

    pub fn set_image_ext(&mut self, ext: ImageExt) -> Result<(), JsValue> {
@@ -479,7 +520,7 @@ impl HiPS2D {
        //    super::subdivide::num_hpx_subdivision(&self.hpx_cells_in_view[0], camera, projection);
        for cell in &self.hpx_cells_in_view {
            // filter textures that are not in the moc
-            let cell_in_cov = if let Some(moc) = self.footprint_moc.as_ref() {
+            let cell_in_cov = if let Some(moc) = self.moc.as_ref() {
                if moc.intersects_cell(cell) {
                    // Rasterizer does not render tiles that are not in the MOC
                    // This is not a problem for transparency rendered HiPses (FITS or PNG)
@@ -696,7 +737,7 @@ impl HiPS2D {
        }
    }

-    pub fn add_tile<I: Image>(
+    pub fn push_tile<I: Image>(
        &mut self,
        cell: &HEALPixCell,
        image: I,
@@ -705,7 +746,7 @@ impl HiPS2D {
        self.buffer.push(cell, image, time_request)
    }

-    pub fn add_allsky(&mut self, allsky: Allsky) -> Result<(), JsValue> {
+    pub fn add_allsky(&mut self, allsky: AllskyRequest) -> Result<(), JsValue> {
        self.buffer.push_allsky(allsky)
    }

--- a/src/core/src/renderable/hips/d2/texture.rs
+++ b/src/core/src/renderable/hips/d2/texture.rs
@@ -4,8 +4,8 @@ use al_core::image::Image;
 use al_core::Texture2DArray;
 use wasm_bindgen::JsValue;

-pub struct HpxTexture2D {
-    tile_cell: HEALPixCell,
+pub struct HpxTex {
+    pub cell: HEALPixCell,
    // Precomputed uniq number
    uniq: i32,
    // Position of the texture in the buffer
@@ -13,7 +13,7 @@ pub struct HpxTexture2D {
    // The time the texture has been received
    // If the texture contains multiple tiles, then the receiving time
    // is set when all the tiles have been copied to the buffer
-    start_time: Option<Time>,
+    pub start_time: Option<Time>,
    // The time request of the texture is the time request
    // of the first tile being inserted in it
    // It is then only given in the constructor of Texture
@@ -22,23 +22,21 @@ pub struct HpxTexture2D {
    // texture. But this is too expensive because at each tile inserted
    // in the buffer, one should reevalute the priority of the texture
    // in the buffer's binary heap.
-    time_request: Time,
+    pub time_request: Time,

    // Full flag telling the texture has been filled
    copied_to_gpu: bool,
 }

-use crate::renderable::hips::HpxTile;
-
-impl HpxTexture2D {
+impl HpxTex {
    pub fn new(cell: &HEALPixCell, idx: i32, time_request: Time) -> Self {
        let start_time = None;
        let copied_to_gpu = false;
-        let tile_cell = *cell;
+        let cell = *cell;
        let uniq = cell.uniq();

        Self {
-            tile_cell,
+            cell,
            uniq,
            time_request,
            idx,
@@ -56,13 +54,13 @@ impl HpxTexture2D {
    }

    // Setter
-    pub fn replace(&mut self, tile_cell: &HEALPixCell, time_request: Time) {
+    pub fn replace(&mut self, cell: &HEALPixCell, time_request: Time) {
        // Cancel the tasks copying the tiles contained in the texture
        // which have not yet been completed.
        //self.clear_tasks_in_progress(config, exec);

-        self.tile_cell = *tile_cell;
-        self.uniq = tile_cell.uniq();
+        self.cell = *cell;
+        self.uniq = cell.uniq();
        self.copied_to_gpu = false;
        self.start_time = None;
        self.time_request = time_request;
@@ -77,8 +75,7 @@ impl HpxTexture2D {
        image: &I,
        gpu_texture: &Texture2DArray,
    ) -> Result<(), JsValue> {
-        debug_assert!(*cell == self.tile_cell);
-        debug_assert!(!self.copied_to_gpu);
+        debug_assert!(*cell == self.cell);

        self.copied_to_gpu = true;
        self.start_time = Some(Time::now());
@@ -87,7 +84,8 @@ impl HpxTexture2D {
    }
 }

-impl HpxTile for HpxTexture2D {
+/*
+impl HpxTile for HpxTex {
    // Getter
    // Returns the current time if the texture is not full
    fn start_time(&self) -> Time {
@@ -103,44 +101,43 @@ impl HpxTile for HpxTexture2D {
    }

    fn cell(&self) -> &HEALPixCell {
-        &self.tile_cell
+        &self.cell
    }
-}
+}*/

 use std::cmp::Ordering;
-impl PartialOrd for HpxTexture2D {
+impl PartialOrd for HpxTex {
    fn partial_cmp(&self, other: &Self) -> Option<Ordering> {
        Some(self.cmp(other))
    }
 }
-use crate::Abort;
-impl Ord for HpxTexture2D {
+impl Ord for HpxTex {
    fn cmp(&self, other: &Self) -> Ordering {
        self.uniq.cmp(&other.uniq)
    }
 }

-impl PartialEq for HpxTexture2D {
+impl PartialEq for HpxTex {
    fn eq(&self, other: &Self) -> bool {
        self.uniq == other.uniq
    }
 }
-impl Eq for HpxTexture2D {}
+impl Eq for HpxTex {}

-pub struct HpxTexture2DUniforms<'a> {
-    texture: &'a HpxTexture2D,
+pub struct HpxTexUniforms<'a> {
+    texture: &'a HpxTex,
    name: String,
 }

-impl<'a> HpxTexture2DUniforms<'a> {
-    pub fn new(texture: &'a HpxTexture2D, idx_texture: i32) -> Self {
+impl<'a> HpxTexUniforms<'a> {
+    pub fn new(texture: &'a HpxTex, idx_texture: i32) -> Self {
        let name = format!("textures_tiles[{idx_texture}].");
-        HpxTexture2DUniforms { texture, name }
+        HpxTexUniforms { texture, name }
    }
 }

 use al_core::shader::{SendUniforms, ShaderBound};
-impl SendUniforms for HpxTexture2DUniforms<'_> {
+impl SendUniforms for HpxTexUniforms<'_> {
    // Info: These uniforms are used for raytracing drawing mode only
    fn attach_uniforms<'b>(&self, shader: &'b ShaderBound<'b>) -> &'b ShaderBound<'b> {
        shader
@@ -160,7 +157,7 @@ impl SendUniforms for HpxTexture2DUniforms<'_> {
            )
            .attach_uniform(
                &format!("{}{}", self.name, "start_time"),
-                &self.texture.start_time(),
+                &self.texture.start_time.unwrap_or(Time::now()),
            );

        shader
--- a/src/core/src/renderable/hips/d3/buffer.rs
+++ b/src/core/src/renderable/hips/d3/buffer.rs
@@ -1,197 +0,0 @@
-use std::collections::HashMap;
-
-use al_core::image::Image;
-use al_core::WebGlContext;
-
-use super::texture::HpxTexture3D;
-use crate::downloader::request::allsky::Allsky;
-use crate::healpix::cell::HEALPixCell;
-use crate::renderable::hips::config::HiPSConfig;
-use crate::renderable::hips::HpxTileBuffer;
-use crate::time::Time;
-use crate::Abort;
-use crate::JsValue;
-use al_api::hips::ImageExt;
-// Fixed sized binary heap
-pub struct HiPS3DBuffer {
-    // Some information about the HiPS
-    textures: HashMap<HEALPixCell, HpxTexture3D>,
-
-    config: HiPSConfig,
-
-    available_tiles_during_frame: bool,
-
-    gl: WebGlContext,
-}
-
-impl HiPS3DBuffer {
-    pub fn new(gl: &WebGlContext, config: HiPSConfig) -> Result<Self, JsValue> {
-        let textures = HashMap::new();
-
-        let available_tiles_during_frame = false;
-
-        let gl = gl.clone();
-        Ok(Self {
-            config,
-
-            textures,
-            available_tiles_during_frame,
-            gl,
-        })
-    }
-
-    pub fn push_allsky(&mut self, allsky: Allsky) -> Result<(), JsValue> {
-        let Allsky {
-            image,
-            time_req,
-            //depth_tile,
-            channel,
-            ..
-        } = allsky;
-
-        {
-            let mutex_locked = image.borrow();
-            let images = mutex_locked.as_ref().unwrap_abort();
-            for (idx, image) in images.iter().enumerate() {
-                self.push(
-                    &HEALPixCell(0, idx as u64),
-                    image,
-                    time_req,
-                    channel.map(|c| c as u16).unwrap_or(0),
-                )?;
-            }
-        }
-
-        Ok(())
-    }
-
-    pub fn find_nearest_slice(&self, cell: &HEALPixCell, slice: u16) -> Option<u16> {
-        self.get(cell).and_then(|t| t.find_nearest_slice(slice))
-    }
-
-    // This method pushes a new downloaded tile into the buffer
-    // It must be ensured that the tile is not already contained into the buffer
-    pub fn push<I: Image>(
-        &mut self,
-        cell: &HEALPixCell,
-        image: I,
-        time_request: Time,
-        slice_idx: u16,
-    ) -> Result<(), JsValue> {
-        let tex = if let Some(tex) = self.textures.get_mut(cell) {
-            tex
-        } else {
-            self.textures
-                .insert(*cell, HpxTexture3D::new(*cell, time_request));
-
-            self.textures.get_mut(cell).unwrap()
-        };
-
-        // copy to the 3D textured block
-        tex.append(image, slice_idx, &self.config, &self.gl)?;
-
-        self.available_tiles_during_frame = true;
-
-        Ok(())
-    }
-
-    // Return if tiles did become available
-    pub fn reset_available_tiles(&mut self) -> bool {
-        let available_tiles_during_frame = self.available_tiles_during_frame;
-        self.available_tiles_during_frame = false;
-
-        available_tiles_during_frame
-    }
-
-    // Tell if a texture is available meaning all its sub tiles
-    // must have been written for the GPU
-    pub fn contains_tile(&self, texture_cell: &HEALPixCell, slice: u16) -> bool {
-        self.get(texture_cell)
-            .is_some_and(|t| t.contains_slice(slice))
-    }
-
-    /// Accessors
-    pub fn get(&self, cell: &HEALPixCell) -> Option<&HpxTexture3D> {
-        self.textures.get(cell)
-    }
-
-    pub fn config(&self) -> &HiPSConfig {
-        &self.config
-    }
-
-    pub fn config_mut(&mut self) -> &mut HiPSConfig {
-        &mut self.config
-    }
-}
-
-impl HpxTileBuffer for HiPS3DBuffer {
-    type T = HpxTexture3D;
-
-    fn new(gl: &WebGlContext, config: HiPSConfig) -> Result<Self, JsValue> {
-        let textures = HashMap::new();
-
-        let available_tiles_during_frame = false;
-
-        let gl = gl.clone();
-        Ok(Self {
-            config,
-
-            textures,
-            available_tiles_during_frame,
-            gl,
-        })
-    }
-
-    // Return if tiles did become available
-    fn reset_available_tiles(&mut self) -> bool {
-        let available_tiles_during_frame = self.available_tiles_during_frame;
-        self.available_tiles_during_frame = false;
-
-        available_tiles_during_frame
-    }
-
-    fn set_image_ext(&mut self, _gl: &WebGlContext, ext: ImageExt) -> Result<(), JsValue> {
-        self.config.set_image_ext(ext)?;
-
-        self.textures.clear();
-        //self.ready = false;
-        self.available_tiles_during_frame = true;
-
-        Ok(())
-    }
-
-    // Tell if a texture is available meaning all its sub tiles
-    // must have been written for the GPU
-    fn contains(&self, cell: &HEALPixCell) -> bool {
-        self.get(cell).is_some()
-    }
-
-    /// Accessors
-    fn get(&self, cell: &HEALPixCell) -> Option<&HpxTexture3D> {
-        self.textures.get(cell)
-    }
-
-    fn config(&self) -> &HiPSConfig {
-        &self.config
-    }
-
-    fn config_mut(&mut self) -> &mut HiPSConfig {
-        &mut self.config
-    }
-}
-
-use al_core::shader::SendUniforms;
-use al_core::shader::ShaderBound;
-impl SendUniforms for HiPS3DBuffer {
-    // Send only the allsky textures
-    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {
-        shader.attach_uniforms_from(&self.config)
-    }
-}
-
-impl Drop for HiPS3DBuffer {
-    fn drop(&mut self) {
-        // drop all the 3D block textures
-        self.textures.clear();
-    }
-}
--- a/src/core/src/renderable/hips/d3/cube.rs
+++ b/src/core/src/renderable/hips/d3/cube.rs
@@ -0,0 +1,264 @@
+use std::collections::HashMap;
+
+use al_core::image::Image;
+use al_core::WebGlContext;
+
+use super::super::tile_heap::TileHeap;
+use super::texture::HpxFreqTex;
+use crate::healpix::cell::HEALPixFreqCell;
+use crate::renderable::hips::config::HiPSConfig;
+use crate::renderable::hips::HpxTileBuffer;
+use crate::time::Time;
+use crate::Abort;
+use crate::JsValue;
+use al_api::hips::ImageExt;
+// Fixed sized binary heap
+pub struct HiPS3DBuffer {
+    // Some information about the HiPS
+    textures: HashMap<HEALPixFreqCell, HpxFreqTex>,
+    heap: TileHeap<HEALPixFreqCell>,
+
+    config: HiPSConfig,
+
+    available_tiles_during_frame: bool,
+
+    gl: WebGlContext,
+}
+
+impl HiPS3DBuffer {
+    /*pub fn push_allsky(&mut self, allsky: AllskyRequest) -> Result<(), JsValue> {
+        let AllskyRequest {
+            request,
+            //depth_tile,
+            channel,
+            ..
+        } = allsky;
+
+        {
+            let mutex_locked = request.data.borrow();
+            let images = mutex_locked.as_ref().unwrap_abort();
+            for (idx, image) in images.iter().enumerate() {
+                self.push(
+                    &HEALPixCell(0, idx as u64),
+                    image,
+                    request.time_request,
+                    channel.map(|c| c as u16).unwrap_or(0),
+                )?;
+            }
+        }
+
+        Ok(())
+    }*/
+
+    /*pub fn find_nearest_slice(&self, cell: &HEALPixCell, slice: u16) -> Option<u16> {
+        self.get(cell).and_then(|t| t.find_nearest_slice(slice))
+    }*/
+
+    fn push_cell(&mut self, cell: &HEALPixFreqCell, time_request: Time) -> Result<(), JsValue> {
+        // Check if the cell is not yet contain in the buffer
+        if !self.contains(cell) {
+            // If not, add create it and add it to the buffer
+            if self.heap.is_full() {
+                // Pop the oldest requested texture
+                let oldest_texture = self.heap.pop().unwrap_abort();
+
+                // Remove it from the textures HashMap
+                self.textures
+                    .remove(oldest_texture.cell())
+                    .expect("Texture (oldest one) has not been found in the buffer of textures");
+            }
+
+            let texture = HpxFreqTex::new(
+                cell.clone(),
+                time_request,
+                self.config.tile_size as u16,
+                self.config.tile_depth.unwrap_or(32) as u16,
+                self.config.get_format().get_pixel_format(),
+                &self.gl,
+            )?;
+
+            // Push it to the buffer
+            self.heap.push(&texture);
+            self.textures.insert(cell.clone(), texture);
+        };
+
+        Ok(())
+    }
+
+    // Push a image slice into the buffer
+    pub fn push_tile_slice<I: Image>(
+        &mut self,
+        cell: &HEALPixFreqCell,
+        image: I,
+        time_request: Time,
+        // this slice index inside the cubic cell
+        slice_idx: u16,
+    ) -> Result<(), JsValue> {
+        self.push_cell(cell, time_request)?;
+
+        let texture = self.textures.get_mut(cell).unwrap_abort();
+
+        // And copy the image in that cubic tile
+        texture.append_tile_slice(image, slice_idx)?;
+        self.available_tiles_during_frame = true;
+
+        Ok(())
+    }
+
+    pub fn push_tile_from_fits(
+        &mut self,
+        cell: &HEALPixFreqCell,
+        raw_bytes: js_sys::Uint8Array,
+        size: (u32, u32, u32),
+        time_request: Time,
+    ) -> Result<(), JsValue> {
+        self.push_cell(cell, time_request)?;
+
+        let texture = self.textures.get_mut(cell).unwrap_abort();
+
+        // And copy the image in that cubic tile
+        texture.set_data_from_fits(raw_bytes, size)?;
+        self.available_tiles_during_frame = true;
+
+        Ok(())
+    }
+
+    pub fn push_tile_from_jpeg(
+        &mut self,
+        cell: &HEALPixFreqCell,
+        decoded_bytes: Box<[u8]>,
+        size: (u32, u32, u32),
+        time_request: Time,
+    ) -> Result<(), JsValue> {
+        self.push_cell(cell, time_request)?;
+
+        let texture = self.textures.get_mut(cell).unwrap_abort();
+
+        // And copy the image in that cubic tile
+        texture.set_data_from_jpeg(decoded_bytes, size)?;
+        self.available_tiles_during_frame = true;
+
+        Ok(())
+    }
+
+    pub fn push_tile_from_png(
+        &mut self,
+        cell: &HEALPixFreqCell,
+        decoded_bytes: Box<[u8]>,
+        size: (u32, u32, u32),
+        time_request: Time,
+    ) -> Result<(), JsValue> {
+        self.push_cell(cell, time_request)?;
+
+        let texture = self.textures.get_mut(cell).unwrap_abort();
+
+        // And copy the image in that cubic tile
+        texture.set_data_from_png(decoded_bytes, size)?;
+        self.available_tiles_during_frame = true;
+
+        Ok(())
+    }
+
+    // Tell if a texture is available meaning all its sub tiles
+    // must have been written for the GPU
+    pub fn contains_slice(
+        &self,
+        // the cell to check
+        cell: &HEALPixFreqCell,
+        // the idx of one slice inside the cube, has to be in [0; 2^(f_order) - 1]
+        idx_slice: u16,
+    ) -> bool {
+        self.get(cell).is_some_and(|t| t.contains_slice(idx_slice))
+    }
+
+    // Get the nearest spatial parent found in the buffer
+    pub fn get_nearest_parent(&self, cell: &HEALPixFreqCell) -> Option<HEALPixFreqCell> {
+        let mut parent_cell = cell.parent();
+
+        while !self.contains(&parent_cell) && !parent_cell.is_hpx_root() {
+            parent_cell = parent_cell.parent();
+        }
+
+        if self.contains(&parent_cell) {
+            Some(parent_cell)
+        } else {
+            None
+        }
+    }
+}
+
+impl HpxTileBuffer for HiPS3DBuffer {
+    type T = HpxFreqTex;
+    type C = HEALPixFreqCell;
+
+    fn new(gl: &WebGlContext, config: HiPSConfig) -> Result<Self, JsValue> {
+        let textures = HashMap::new();
+        // Limit the number of cached cubes to 256 so approx 256 MB
+        let heap = TileHeap::with_capacity(1024);
+
+        let available_tiles_during_frame = false;
+
+        let gl = gl.clone();
+        Ok(Self {
+            config,
+
+            textures,
+            heap,
+            available_tiles_during_frame,
+            gl,
+        })
+    }
+
+    // Return if tiles did become available
+    fn reset_available_tiles(&mut self) -> bool {
+        let available_tiles_during_frame = self.available_tiles_during_frame;
+        self.available_tiles_during_frame = false;
+
+        available_tiles_during_frame
+    }
+
+    fn set_image_ext(&mut self, _gl: &WebGlContext, ext: ImageExt) -> Result<(), JsValue> {
+        self.config.set_image_ext(ext)?;
+
+        self.textures.clear();
+        self.heap.clear();
+
+        self.available_tiles_during_frame = true;
+
+        Ok(())
+    }
+
+    /// Accessors
+    fn get(&self, cell: &Self::C) -> Option<&HpxFreqTex> {
+        self.textures.get(cell)
+    }
+
+    fn contains(&self, cell: &Self::C) -> bool {
+        self.get(cell).is_some()
+    }
+
+    fn config(&self) -> &HiPSConfig {
+        &self.config
+    }
+
+    fn config_mut(&mut self) -> &mut HiPSConfig {
+        &mut self.config
+    }
+}
+
+use al_core::shader::SendUniforms;
+use al_core::shader::ShaderBound;
+impl SendUniforms for HiPS3DBuffer {
+    // Send only the allsky textures
+    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {
+        shader.attach_uniforms_from(&self.config)
+    }
+}
+
+impl Drop for HiPS3DBuffer {
+    fn drop(&mut self) {
+        // drop all the 3D block textures
+        self.textures.clear();
+        self.heap.clear();
+    }
+}
--- a/src/core/src/renderable/hips/d3/mod.rs
+++ b/src/core/src/renderable/hips/d3/mod.rs
--- a/src/core/src/renderable/hips/d3/texture.rs
+++ b/src/core/src/renderable/hips/d3/texture.rs
@@ -1,21 +1,139 @@
-use crate::renderable::hips::d2::texture::HpxTexture2D;
-use crate::{healpix::cell::HEALPixCell, time::Time};
+use crate::time::Time;

+use crate::renderable::hips::d3::Freq;
+use crate::Abort;
+use crate::WebGlContext;
+use al_core::image::fits::FitsImage;
+use al_core::image::raw::ImageBuffer;
 use al_core::image::Image;
-use al_core::texture::format::{PixelType, R16I, R32F, R32I, R8U, RGB8U, RGBA8U};
+use al_core::texture::format::{PixelType, R16I, R32F, R32I, R8U};
 use al_core::texture::Texture3D;
 use al_core::webgl_ctx::WebGlRenderingCtx;
 use cgmath::Vector3;
+use fitsrs::hdu::header::Bitpix;
+use std::cmp::Ordering;
+use std::ops::Range;
 use wasm_bindgen::JsValue;

-pub struct HpxTexture3D {
-    tile_cell: HEALPixCell,
-    // Precomputed uniq number
-    uniq: i32,
+pub enum HpxFreqData {
+    Fits {
+        // The raw bytes of the whole cubic FITS file, data big endian
+        raw_bytes: Box<[u8]>,
+        // Offset to the data bytes of the cubic tile
+        data_byte_offset: Range<usize>,
+        // Number of bytes per pixel (deduced from the bitpix)
+        bitpix: Bitpix,
+        // Triming offset indices when reading the data
+        trim: (u32, u32, u32),
+        // Naxis
+        naxis: (u32, u32, u32),
+        // Scaling value
+        bscale: f32,
+        // Offset value
+        bzero: f32,
+        // The real size of the cube
+        size: (u32, u32, u32),
+    },
+    Jpeg {
+        data: Box<[u8]>,
+        size: (u32, u32, u32),
+    },
+    Png {
+        data: Box<[u8]>,
+        size: (u32, u32, u32),
+    },
+}
+
+pub enum Pixel {
+    F32(f32),
+    I32(i32),
+    I16(i16),
+    U8(u8),
+}
+
+impl Pixel {
+    pub fn to_f32(&self) -> f32 {
+        match *self {
+            Pixel::F32(v) => v,
+            Pixel::I16(v) => v as f32,
+            Pixel::I32(v) => v as f32,
+            Pixel::U8(v) => v as f32,
+        }
+    }
+}
+
+impl HpxFreqData {
+    pub fn read_pixel(&self, x: u32, y: u32, z: u32) -> Option<f32> {
+        match self {
+            HpxFreqData::Fits {
+                raw_bytes,
+                data_byte_offset,
+                bitpix,
+                trim,
+                naxis,
+                bscale,
+                bzero,
+                size,
+            } => {
+                // Do not remember the origin in fits image data is left-down corner
+                let y = size.1 - y;
+
+                let x_in_data = (trim.0..(trim.0 + naxis.0)).contains(&x);
+                let y_in_data = (trim.1..(trim.1 + naxis.1)).contains(&y);
+                let z_in_data = (trim.2..(trim.2 + naxis.2)).contains(&z);
+
+                if !x_in_data || !y_in_data || !z_in_data {
+                    None
+                } else {
+                    let x = x - trim.0;
+                    let y = y - trim.1;
+                    let z = z - trim.2;
+
+                    let data_raw_bytes = &raw_bytes[data_byte_offset.clone()];
+                    let bytes_per_pixel = bitpix.byte_size();
+                    let pixel_bytes_off =
+                        bytes_per_pixel * (x + y * naxis.0 + z * (naxis.0 * naxis.1)) as usize;
+
+                    let p = &data_raw_bytes[pixel_bytes_off..(pixel_bytes_off + bytes_per_pixel)];
+
+                    let pixel = match bitpix {
+                        Bitpix::U8 => Pixel::U8(p[0]),
+                        Bitpix::I16 => Pixel::I16(i16::from_be_bytes([p[0], p[1]])),
+                        Bitpix::I32 => Pixel::I32(i32::from_be_bytes([p[0], p[1], p[2], p[3]])),
+                        Bitpix::F32 => Pixel::F32(f32::from_be_bytes([p[0], p[1], p[2], p[3]])),
+                        Bitpix::F64 => Pixel::F32(f64::from_be_bytes([
+                            p[0], p[1], p[2], p[3], p[4], p[5], p[6], p[7],
+                        ]) as f32),
+                        Bitpix::I64 => Pixel::I32(i64::from_be_bytes([
+                            p[0], p[1], p[2], p[3], p[4], p[5], p[6], p[7],
+                        ]) as i32),
+                    };
+
+                    Some(pixel.to_f32() * (*bscale) + (*bzero))
+                }
+            }
+            HpxFreqData::Jpeg { data, size } => {
+                let pixel_bytes_off = (x + y * size.0 + z * (size.0 * size.1)) as usize;
+
+                let p = data[pixel_bytes_off];
+                Some(p as f32)
+            }
+            HpxFreqData::Png { data, size } => {
+                let pixel_bytes_off = (x + y * size.0 + z * (size.0 * size.1)) as usize;
+
+                let p = data[2 * pixel_bytes_off];
+                Some(p as f32)
+            }
+        }
+    }
+}
+
+pub struct HpxFreqTex {
+    pub cell: HEALPixFreqCell,
    // The time the texture has been received
    // If the texture contains multiple tiles, then the receiving time
    // is set when all the tiles have been copied to the buffer
-    start_time: Option<Time>,
+    pub start_time: Option<Time>,
    // The time request of the texture is the time request
    // of the first tile being inserted in it
    // It is then only given in the constructor of Texture
@@ -24,272 +142,269 @@ pub struct HpxTexture3D {
    // texture. But this is too expensive because at each tile inserted
    // in the buffer, one should reevalute the priority of the texture
    // in the buffer's binary heap.
-    time_request: Time,
+    pub time_request: Time,

+    // OLD CODE
    // We autorize 512 cubic tiles of size 32 each which allows to store max 16384 slices
-    textures: Vec<Option<Texture3D>>,
+    //textures: Vec<Option<Texture3D>>,
    // A set of already inserted slices. Each cubic tiles can have 32 slices. The occupancy of the
    // slices inside a cubic tile is done with a u32 mask. Limited to 16384 slices
-    blocks: [u32; 512],
+    //blocks: [u32; 512],
    // sorted index list of 32-length blocks that are not empty
-    block_indices: Vec<usize>,
+    //block_indices: Vec<usize>,
+    /// The webgl2 3D texture of the cubic tile
+    pub texture: Texture3D,
+
+    data: Option<HpxFreqData>,
+
+    // The real image data for accessing the pixel values
+    //data: ImageType,
+    /// A bitvector keeping track of the slices that have been inserted into the 3D texture
+    /// It is limited to a cube depth of 256 (~ to the max texture size).
+    slice_idx: [u32; 8],
+
+    /// Depth of the tile
+    num_slices: u16,
+    /// Number of slices copied (concerns only HiPSCube)
+    num_stored_slices: u16,
 }

-use crate::renderable::hips::config::HiPSConfig;
-use crate::WebGlContext;
+const TEX_PARAMS: &[(u32, u32)] = &[
+    (
+        WebGlRenderingCtx::TEXTURE_MIN_FILTER,
+        WebGlRenderingCtx::NEAREST,
+    ),
+    (
+        WebGlRenderingCtx::TEXTURE_MAG_FILTER,
+        WebGlRenderingCtx::NEAREST,
+    ),
+    // Prevents s-coordinate wrapping (repeating)
+    (
+        WebGlRenderingCtx::TEXTURE_WRAP_S,
+        WebGlRenderingCtx::CLAMP_TO_EDGE,
+    ),
+    // Prevents t-coordinate wrapping (repeating)
+    (
+        WebGlRenderingCtx::TEXTURE_WRAP_T,
+        WebGlRenderingCtx::CLAMP_TO_EDGE,
+    ),
+    // Prevents r-coordinate wrapping (repeating)
+    (
+        WebGlRenderingCtx::TEXTURE_WRAP_R,
+        WebGlRenderingCtx::CLAMP_TO_EDGE,
+    ),
+];

-use crate::renderable::hips::HpxTile;
-
-impl HpxTexture3D {
-    pub fn new(tile_cell: HEALPixCell, time_request: Time) -> Self {
+use crate::healpix::cell::HEALPixFreqCell;
+impl HpxFreqTex {
+    pub fn new(
+        // The cubic tile definition to locate the cube in the sky + spectral axis
+        cell: HEALPixFreqCell,
+        // The time the request has been made, i.e. when the tile was needed
+        time_request: Time,
+        // The size of the cubis tile
+        tile_size: u16,
+        // The depth of the cubic tile. Must be a power of two
+        num_slices: u16,
+        // pixel format
+        pixel_format: PixelType,
+        // The Gl context
+        gl: &WebGlContext,
+    ) -> Result<Self, JsValue> {
        let start_time = None;
-        let uniq = tile_cell.uniq();
-        let textures = std::iter::repeat_n(None, 512).collect();
-        let blocks = [0; 512];
-        let block_indices = Vec::new();
-        Self {
-            tile_cell,
-            uniq,
+
+        let texture = match pixel_format {
+            // alpha transparency
+            PixelType::RGBA8U => Texture3D::create_empty::<R16I>(
+                gl,
+                tile_size as i32,
+                tile_size as i32,
+                num_slices as i32,
+                TEX_PARAMS,
+            ),
+            PixelType::RGB8U => Texture3D::create_empty::<R8U>(
+                gl,
+                tile_size as i32,
+                tile_size as i32,
+                num_slices as i32,
+                TEX_PARAMS,
+            ),
+            PixelType::R8U => Texture3D::create_empty::<R8U>(
+                gl,
+                tile_size as i32,
+                tile_size as i32,
+                num_slices as i32,
+                TEX_PARAMS,
+            ),
+            PixelType::R32F => Texture3D::create_empty::<R32F>(
+                gl,
+                tile_size as i32,
+                tile_size as i32,
+                num_slices as i32,
+                TEX_PARAMS,
+            ),
+            PixelType::R16I => Texture3D::create_empty::<R16I>(
+                gl,
+                tile_size as i32,
+                tile_size as i32,
+                num_slices as i32,
+                TEX_PARAMS,
+            ),
+            PixelType::R32I => Texture3D::create_empty::<R32I>(
+                gl,
+                tile_size as i32,
+                tile_size as i32,
+                num_slices as i32,
+                TEX_PARAMS,
+            ),
+        }?;
+
+        let data = None;
+        let num_stored_slices = 0;
+        let slice_idx = [0x0; 8];
+        Ok(Self {
+            cell,
+            slice_idx,
            time_request,
            start_time,
-            textures,
-            blocks,
-            block_indices,
-        }
+            data,
+            texture,
+            num_slices,
+            num_stored_slices,
+        })
    }

-    pub fn find_nearest_slice(&self, slice: u16) -> Option<u16> {
-        let block_idx = (slice >> 5) as usize;
+    pub fn set_data_from_fits(
+        &mut self,
+        // the tile image of the whole cubic tile
+        raw_bytes: js_sys::Uint8Array,
+        // size of the cube
+        size: (u32, u32, u32),
+    ) -> Result<(), JsValue> {
+        let raw_bytes = raw_bytes.to_vec().into_boxed_slice();

-        match self.block_indices.binary_search(&block_idx) {
-            Ok(_) => {
-                if self.contains_slice(slice) {
-                    Some(slice)
-                } else {
-                    // the slice is not present but we know there is one in the block
-                    let block = self.blocks[block_idx];
+        let (trim1, trim2, trim3, width, height, depth, bitpix, data_byte_offset, bscale, bzero) = {
+            let fits = FitsImage::from_raw_bytes(&raw_bytes[..])?;
+            fits[0].insert_into_3d_texture(&self.texture, &Vector3::<i32>::new(0, 0, 0))?;

-                    let slice_idx = (slice & 0x1f) as u32;
+            (
+                fits[0].trim1,
+                fits[0].trim2,
+                fits[0].trim3,
+                fits[0].width,
+                fits[0].height,
+                fits[0].depth,
+                fits[0].bitpix,
+                fits[0].data_byte_offset.clone(),
+                fits[0].bscale,
+                fits[0].bzero,
+            )
+        };

-                    let m2 = if slice_idx == 31 {
-                        0
-                    } else {
-                        0xffffffff >> (slice_idx + 1)
-                    };
-                    let m1 = (!m2) & !(1 << (31 - slice_idx));
+        let trim = (trim1, trim2, trim3);
+        let naxis = (width, height, depth);

-                    let lb = (block & m1) >> (32 - slice_idx);
-                    let rb = block & m2;
+        self.data = Some(HpxFreqData::Fits {
+            raw_bytes,
+            data_byte_offset: data_byte_offset.clone(),
+            bitpix,
+            trim,
+            naxis,
+            bscale,
+            bzero,
+            size,
+        });
+        self.num_stored_slices = self.num_slices;
+        self.start_time = Some(Time::now());

-                    let lb_trailing_zeros = (lb.trailing_zeros() as u16).min(slice_idx as u16);
-                    let rb_leading_zeros = (rb.leading_zeros() - slice_idx - 1) as u16;
-
-                    let no_more_left_bits = slice_idx - (lb_trailing_zeros as u32) == 0;
-                    let no_more_right_bits = slice_idx + (rb_leading_zeros as u32) == 31;
-
-                    match (no_more_left_bits, no_more_right_bits) {
-                        (false, false) => {
-                            if lb_trailing_zeros <= rb_leading_zeros {
-                                Some(slice - lb_trailing_zeros - 1)
-                            } else {
-                                Some(slice + rb_leading_zeros + 1)
-                            }
-                        }
-                        (false, true) => {
-                            if lb_trailing_zeros <= rb_leading_zeros {
-                                Some(slice - lb_trailing_zeros - 1)
-                            } else {
-                                // explore next block
-                                if block_idx == self.blocks.len() - 1 {
-                                    // no after block
-                                    Some(slice - lb_trailing_zeros - 1)
-                                } else {
-                                    // get the next block
-                                    let next_block = self.blocks[block_idx + 1];
-
-                                    let num_bits_to_next_block =
-                                        next_block.leading_zeros() as u16 + rb_leading_zeros;
-
-                                    if num_bits_to_next_block < lb_trailing_zeros {
-                                        Some(slice + num_bits_to_next_block + 1)
-                                    } else {
-                                        Some(slice - lb_trailing_zeros - 1)
-                                    }
-                                }
-                            }
-                        }
-                        (true, false) => {
-                            if rb_leading_zeros <= lb_trailing_zeros {
-                                Some(slice + rb_leading_zeros + 1)
-                            } else {
-                                // explore previous block
-                                if block_idx == 0 {
-                                    // no after block
-                                    Some(slice + rb_leading_zeros + 1)
-                                } else {
-                                    // get the next block
-                                    let prev_block = self.blocks[block_idx - 1];
-
-                                    let num_bits_from_prev_block =
-                                        prev_block.trailing_zeros() as u16 + lb_trailing_zeros;
-                                    if num_bits_from_prev_block < rb_leading_zeros {
-                                        Some(slice - num_bits_from_prev_block - 1)
-                                    } else {
-                                        Some(slice + rb_leading_zeros + 1)
-                                    }
-                                }
-                            }
-                        }
-                        (true, true) => unreachable!(),
-                    }
-                }
-            }
-            Err(i) => {
-                let prev_block = if i > 0 {
-                    self.block_indices.get(i - 1)
-                } else {
-                    None
-                };
-
-                let cur_block = self.block_indices.get(i);
-                match (prev_block, cur_block) {
-                    (Some(b_idx_1), Some(b_idx_2)) => {
-                        let b1 = self.blocks[*b_idx_1];
-                        let b2 = self.blocks[*b_idx_2];
-
-                        let b1_tz = b1.trailing_zeros() as usize;
-                        let b2_lz = b2.leading_zeros() as usize;
-
-                        let slice_b1 = ((*b_idx_1 << 5) + 32 - b1_tz - 1) as u16;
-                        let slice_b2 = ((*b_idx_2 << 5) + b2_lz) as u16;
-                        if slice - slice_b1 <= slice_b2 - slice {
-                            // the nearest slice is in b1
-                            Some(slice_b1)
-                        } else {
-                            // the nearest slice is in b2
-                            Some(slice_b2)
-                        }
-                    }
-                    (None, Some(b_idx_2)) => {
-                        let b2 = self.blocks[*b_idx_2];
-                        let b2_lz = b2.leading_zeros() as usize;
-
-                        Some(((*b_idx_2 << 5) + b2_lz) as u16)
-                    }
-                    (Some(b_idx_1), None) => {
-                        let b1 = self.blocks[*b_idx_1];
-                        let b1_tz = b1.trailing_zeros() as usize;
-
-                        Some(((*b_idx_1 << 5) + 32 - b1_tz - 1) as u16)
-                    }
-                    (None, None) => None,
-                }
-            }
-        }
+        Ok(())
    }

-    pub fn get_3d_block_from_slice(&self, slice: u16) -> Option<&Texture3D> {
-        let block_idx = (slice >> 5) as usize;
-
-        self.textures[block_idx].as_ref()
-    }
-
-    pub fn extract_2d_slice_texture(&self, slice: u16) -> Option<HpxTexture2D> {
-        // Find the good sub cube containing the slice
-        let block_idx = (slice >> 5) as usize;
-        let slice_idx = (slice & 0x1f) as u8;
-
-        // check the texture is there
-        if self.blocks[block_idx] & (1 << (31 - slice_idx)) != 0 {
-            Some(HpxTexture2D::new(
-                &self.tile_cell,
-                slice_idx as i32,
-                self.time_request,
-            ))
+    pub fn read_pixel(&self, x: u32, y: u32, z: u32) -> Option<f32> {
+        if let Some(data) = &self.data {
+            data.read_pixel(x, y, z)
        } else {
            None
        }
    }

+    pub fn frequencies(&self) -> Vec<f32> {
+        let delta_depth = self.num_slices.trailing_zeros();
+        let pixel_depth = self.cell.f_depth + delta_depth as u8;
+
+        let h0 = self.cell.f_hash << delta_depth;
+        let h1 = (self.cell.f_hash + 1) << delta_depth;
+
+        (h0..h1)
+            .map(|hash| Freq::from_hash_with_order(hash, pixel_depth).0 as f32)
+            .collect()
+    }
+
+    pub fn set_data_from_jpeg(
+        &mut self,
+        // the tile image of the whole cubic tile
+        decoded_bytes: Box<[u8]>,
+        // size of the cube
+        size: (u32, u32, u32),
+    ) -> Result<(), JsValue> {
+        let cubic_tile = ImageBuffer::<R8U>::new(decoded_bytes, size.0, size.1, size.2);
+
+        cubic_tile.insert_into_3d_texture(&self.texture, &Vector3::<i32>::new(0, 0, 0))?;
+
+        self.data = Some(HpxFreqData::Jpeg {
+            data: cubic_tile.data,
+            size,
+        });
+        self.num_stored_slices = self.num_slices;
+        self.start_time = Some(Time::now());
+
+        Ok(())
+    }
+
+    pub fn set_data_from_png(
+        &mut self,
+        // the tile image of the whole cubic tile
+        decoded_bytes: Box<[u8]>,
+        // size of the cube
+        size: (u32, u32, u32),
+    ) -> Result<(), JsValue> {
+        let cubic_tile = ImageBuffer::<R16I>::new(decoded_bytes, size.0, size.1, size.2);
+
+        cubic_tile.insert_into_3d_texture(&self.texture, &Vector3::<i32>::new(0, 0, 0))?;
+
+        self.data = Some(HpxFreqData::Png {
+            data: cubic_tile.data,
+            size,
+        });
+        self.num_stored_slices = self.num_slices;
+        self.start_time = Some(Time::now());
+
+        Ok(())
+    }
+
    // Panic if cell is not contained in the texture
    // Do nothing if the texture is full
    // Return true if the tile is newly added
-    pub fn append<I: Image>(
+    // Used by HiPS Cubes
+    pub fn append_tile_slice<I: Image>(
        &mut self,
+        // the tile image of 1 slice
        image: I,
-        slice: u16,
-        cfg: &HiPSConfig,
-        gl: &WebGlContext,
+        // the slice offset in the cubic tile
+        offset: u16,
    ) -> Result<(), JsValue> {
-        let block_idx = (slice >> 5) as usize;
+        // If there is already something, do not tex sub
+        let block_idx = (offset >> 5) as usize;
+        let slice_idx = (offset & 0x1f) as u8;

-        let texture = if let Some(texture) = self.textures[block_idx].as_ref() {
-            texture
-        } else {
-            let tile_size = cfg.get_tile_size();
-            let params = &[
-                (
-                    WebGlRenderingCtx::TEXTURE_MIN_FILTER,
-                    WebGlRenderingCtx::NEAREST,
-                ),
-                (
-                    WebGlRenderingCtx::TEXTURE_MAG_FILTER,
-                    WebGlRenderingCtx::NEAREST,
-                ),
-                // Prevents s-coordinate wrapping (repeating)
-                (
-                    WebGlRenderingCtx::TEXTURE_WRAP_S,
-                    WebGlRenderingCtx::CLAMP_TO_EDGE,
-                ),
-                // Prevents t-coordinate wrapping (repeating)
-                (
-                    WebGlRenderingCtx::TEXTURE_WRAP_T,
-                    WebGlRenderingCtx::CLAMP_TO_EDGE,
-                ),
-                // Prevents r-coordinate wrapping (repeating)
-                (
-                    WebGlRenderingCtx::TEXTURE_WRAP_R,
-                    WebGlRenderingCtx::CLAMP_TO_EDGE,
-                ),
-            ];
+        if self.slice_idx[block_idx] & (1 << (31 - slice_idx)) == 0 {
+            image.insert_into_3d_texture(
+                &self.texture,
+                &Vector3::<i32>::new(0, 0, slice_idx as i32),
+            )?;

-            let texture = match cfg.get_format().get_pixel_format() {
-                PixelType::RGBA8U => {
-                    Texture3D::create_empty::<RGBA8U>(gl, tile_size, tile_size, 32, params)
-                }
-                PixelType::RGB8U => {
-                    Texture3D::create_empty::<RGB8U>(gl, tile_size, tile_size, 32, params)
-                }
-                PixelType::R32F => {
-                    Texture3D::create_empty::<R32F>(gl, tile_size, tile_size, 32, params)
-                }
-                PixelType::R8U => {
-                    Texture3D::create_empty::<R8U>(gl, tile_size, tile_size, 32, params)
-                }
-                PixelType::R16I => {
-                    Texture3D::create_empty::<R16I>(gl, tile_size, tile_size, 32, params)
-                }
-                PixelType::R32I => {
-                    Texture3D::create_empty::<R32I>(gl, tile_size, tile_size, 32, params)
-                }
-            };
-            self.textures[block_idx] = Some(texture?);
-
-            self.textures[block_idx].as_ref().unwrap()
-        };
-
-        let slice_idx = slice & 0x1f;
-
-        // if there is already something, do not tex sub
-        if self.blocks[block_idx] & (1 << (31 - slice_idx)) == 0 {
-            image.insert_into_3d_texture(texture, &Vector3::<i32>::new(0, 0, slice_idx as i32))?;
-
-            match self.block_indices.binary_search(&block_idx) {
-                Ok(_) => {} // element already in vector @ `pos`
-                Err(i) => self.block_indices.insert(i, block_idx),
-            }
-
-            self.blocks[block_idx] |= 1 << (31 - slice_idx);
+            self.slice_idx[block_idx] |= 1 << (31 - slice_idx);
+            self.num_stored_slices += 1;
        }

        self.start_time = Some(Time::now());
@@ -298,50 +413,29 @@ impl HpxTexture3D {
    }

    // Cell must be contained in the texture
-    pub fn contains_slice(&self, slice: u16) -> bool {
-        let block_idx = (slice >> 5) as usize;
-        let idx_in_block = slice & 0x1f;
+    pub fn contains_slice(&self, offset: u16) -> bool {
+        let block_idx = (offset >> 5) as usize;
+        let slice_idx = offset & 0x1f;

-        (self.blocks[block_idx] >> (31 - idx_in_block)) & 0x1 == 1
+        (self.slice_idx[block_idx] >> (31 - slice_idx)) & 0x1 == 1
    }
 }

-impl HpxTile for HpxTexture3D {
-    // Getter
-    // Returns the current time if the texture is not full
-    fn start_time(&self) -> Time {
-        if let Some(t) = self.start_time {
-            t
-        } else {
-            Time::now()
-        }
-    }
-
-    fn time_request(&self) -> Time {
-        self.time_request
-    }
-
-    fn cell(&self) -> &HEALPixCell {
-        &self.tile_cell
-    }
-}
-
-use std::cmp::Ordering;
-impl PartialOrd for HpxTexture3D {
+impl PartialOrd for HpxFreqTex {
    fn partial_cmp(&self, other: &Self) -> Option<Ordering> {
        Some(self.cmp(other))
    }
 }
-use crate::Abort;
-impl Ord for HpxTexture3D {
+
+impl Ord for HpxFreqTex {
    fn cmp(&self, other: &Self) -> Ordering {
        self.partial_cmp(other).unwrap_abort()
    }
 }

-impl PartialEq for HpxTexture3D {
+impl PartialEq for HpxFreqTex {
    fn eq(&self, other: &Self) -> bool {
-        self.uniq == other.uniq
+        self.cell == other.cell
    }
 }
-impl Eq for HpxTexture3D {}
+impl Eq for HpxFreqTex {}
--- a/src/core/src/renderable/hips/mod.rs
+++ b/src/core/src/renderable/hips/mod.rs
@@ -3,23 +3,23 @@ pub mod config;
 pub mod d2;
 pub mod d3;
 pub mod raytracing;
+pub mod tile_heap;
 mod triangulation;
 pub mod uv;

 pub use d2::HiPS2D;

-use crate::downloader::request::allsky::Allsky;
+use crate::browser_support::BrowserFeaturesSupport;
 use crate::renderable::HiPSConfig;
-use crate::time::Time;
+use crate::tile_fetcher::TileFetcherQueue;
 use crate::CameraViewPort;
-use crate::HEALPixCell;
-use crate::HEALPixCoverage;
 use crate::WebGlContext;
 use al_api::hips::ImageExt;
 use wasm_bindgen::JsValue;

 mod subdivide;

+/*
 pub(crate) trait HpxTile {
    // Getter
    // Returns the current time if the texture is not full
@@ -28,10 +28,11 @@ pub(crate) trait HpxTile {
    fn time_request(&self) -> Time;

    fn cell(&self) -> &HEALPixCell;
-}
+}*/

 pub(crate) trait HpxTileBuffer {
-    type T: HpxTile;
+    type T;
+    type C;

    fn new(gl: &WebGlContext, config: HiPSConfig) -> Result<Self, JsValue>
    where
@@ -43,35 +44,14 @@ pub(crate) trait HpxTileBuffer {
    fn reset_available_tiles(&mut self) -> bool;

    /// Accessors
-    fn get(&self, cell: &HEALPixCell) -> Option<&Self::T>;
+    fn get(&self, cell: &Self::C) -> Option<&Self::T>;

-    fn contains(&self, cell: &HEALPixCell) -> bool;
-
-    // Get the nearest parent tile found in the CPU buffer
-    fn get_nearest_parent(&self, cell: &HEALPixCell) -> Option<HEALPixCell> {
-        /*if cell.is_root() {
-            // Root cells are in the buffer by definition
-            Some(*cell)
-        } else {*/
-        let mut parent_cell = cell.parent();
-
-        while !self.contains(&parent_cell) && !parent_cell.is_root() {
-            parent_cell = parent_cell.parent();
-        }
-
-        if self.contains(&parent_cell) {
-            Some(parent_cell)
-        } else {
-            None
-        }
-        //}
-    }
+    fn contains(&self, cell: &Self::C) -> bool;

    fn config_mut(&mut self) -> &mut HiPSConfig;
    fn config(&self) -> &HiPSConfig;
 }

-use crate::downloader::query;
 use crate::renderable::hips::HiPS::{D2, D3};
 use crate::renderable::HiPS3D;
 use crate::ProjectionType;
@@ -83,10 +63,15 @@ pub enum HiPS {
 }

 impl HiPS {
-    pub fn look_for_new_tiles(&mut self, camera: &CameraViewPort) -> Option<Vec<HEALPixCell>> {
+    pub fn look_for_new_tiles(
+        &mut self,
+        tile_fetcher: &mut TileFetcherQueue,
+        camera: &CameraViewPort,
+        browser_features_support: &BrowserFeaturesSupport,
+    ) {
        match self {
-            D2(hips) => hips.look_for_new_tiles(camera).map(|it| it.collect()),
-            D3(hips) => hips.look_for_new_tiles(camera).map(|it| it.collect()),
+            D2(hips) => hips.look_for_new_tiles(tile_fetcher, camera, browser_features_support),
+            D3(hips) => hips.look_for_new_tiles(tile_fetcher, camera, browser_features_support),
        }
    }

@@ -114,10 +99,10 @@ impl HiPS {
    }

    #[inline]
-    pub fn get_config_mut(&mut self) -> &mut HiPSConfig {
+    pub fn set_root_url(&mut self, root_url: String) {
        match self {
-            D2(hips) => hips.get_config_mut(),
-            D3(hips) => hips.get_config_mut(),
+            D2(hips) => hips.get_config_mut().set_root_url(root_url),
+            D3(hips) => hips.get_config_mut().set_root_url(root_url),
        }
    }

@@ -128,30 +113,6 @@ impl HiPS {
        }
    }

-    #[inline]
-    pub fn set_moc(&mut self, moc: HEALPixCoverage) {
-        match self {
-            D2(hips) => hips.set_moc(moc),
-            D3(hips) => hips.set_moc(moc),
-        }
-    }
-
-    #[inline]
-    pub fn get_tile_query(&self, cell: &HEALPixCell) -> query::Tile {
-        match self {
-            HiPS::D2(hips) => hips.get_tile_query(cell),
-            HiPS::D3(hips) => hips.get_tile_query(cell),
-        }
-    }
-
-    #[inline]
-    pub fn add_allsky(&mut self, allsky: Allsky) -> Result<(), JsValue> {
-        match self {
-            HiPS::D2(hips) => hips.add_allsky(allsky),
-            HiPS::D3(hips) => hips.add_allsky(allsky),
-        }
-    }
-
    pub fn is_allsky(&self) -> bool {
        self.get_config().is_allsky
    }
--- a/src/core/src/renderable/hips/tile_heap.rs
+++ b/src/core/src/renderable/hips/tile_heap.rs
@@ -0,0 +1,139 @@
+use crate::renderable::hips::d2::texture::HpxTex;
+use crate::renderable::hips::d3::texture::HpxFreqTex;
+use crate::time::Time;
+use crate::Abort;
+use crate::HEALPixCell;
+use std::cmp::Ordering;
+use std::collections::BinaryHeap;
+
+#[derive(Clone, Debug)]
+pub struct Tile<C> {
+    cell: C,
+    time_request: Time,
+}
+
+impl<C> Tile<C> {
+    pub fn reset_time(&mut self) {
+        self.time_request = Time::now();
+    }
+
+    #[inline(always)]
+    pub fn cell(&self) -> &C {
+        &self.cell
+    }
+}
+
+impl Tile<HEALPixCell> {
+    pub fn is_root(&self) -> bool {
+        self.cell.is_root()
+    }
+}
+
+impl<C> PartialEq for Tile<C>
+where
+    C: PartialEq,
+{
+    fn eq(&self, other: &Self) -> bool {
+        self.cell == other.cell
+    }
+}
+
+impl<C> Eq for Tile<C> where C: PartialEq {}
+
+// Ordering based on the time the tile has been requested
+impl<C> PartialOrd for Tile<C>
+where
+    C: PartialEq,
+{
+    fn partial_cmp(&self, other: &Self) -> Option<Ordering> {
+        Some(self.cmp(other))
+    }
+}
+
+impl<C> Ord for Tile<C>
+where
+    C: PartialEq,
+{
+    fn cmp(&self, other: &Self) -> Ordering {
+        other
+            .time_request
+            .partial_cmp(&self.time_request)
+            .unwrap_abort()
+    }
+}
+
+impl From<&HpxTex> for Tile<HEALPixCell> {
+    fn from(tex: &HpxTex) -> Self {
+        let time_request = tex.time_request;
+        let cell = tex.cell;
+
+        Self { cell, time_request }
+    }
+}
+use crate::healpix::cell::HEALPixFreqCell;
+impl From<&HpxFreqTex> for Tile<HEALPixFreqCell> {
+    fn from(tex: &HpxFreqTex) -> Self {
+        let time_request = tex.time_request;
+        let cell = tex.cell.clone();
+
+        Self { cell, time_request }
+    }
+}
+
+pub struct TileHeap<C> {
+    heap: BinaryHeap<Tile<C>>,
+    size: usize,
+}
+
+impl<C> TileHeap<C> {
+    pub fn clear(&mut self) {
+        self.heap.clear();
+    }
+
+    pub fn len(&self) -> usize {
+        self.heap.len()
+    }
+
+    pub fn is_empty(&self) -> bool {
+        self.len() == 0
+    }
+}
+
+impl<C> TileHeap<C>
+where
+    C: PartialEq,
+{
+    pub fn with_capacity(cap: usize) -> Self {
+        Self {
+            heap: BinaryHeap::with_capacity(cap),
+            size: cap,
+        }
+    }
+
+    // Check if the heap is full
+    pub fn is_full(&self) -> bool {
+        self.heap.len() >= self.size
+    }
+
+    pub fn update_entry<T: Into<Tile<C>>>(&mut self, item: T) {
+        let item = item.into();
+        self.heap = self
+            .heap
+            .drain()
+            // Remove the cell
+            .filter(|texture_node| texture_node.cell != item.cell)
+            // Collect to a new binary heap that does not have cell anymore
+            .collect::<BinaryHeap<_>>();
+
+        self.push(item);
+    }
+
+    pub fn push<T: Into<Tile<C>>>(&mut self, item: T) {
+        let item = item.into();
+        self.heap.push(item);
+    }
+
+    pub fn pop(&mut self) -> Option<Tile<C>> {
+        self.heap.pop()
+    }
+}
--- a/src/core/src/renderable/hips/uv.rs
+++ b/src/core/src/renderable/hips/uv.rs
@@ -12,26 +12,35 @@ impl<T> Deref for UV<T> {
    }
 }

-use super::d2::texture::HpxTexture2D;
 use crate::healpix::cell::HEALPixCell;
-use crate::renderable::hips::HpxTile;
+
 pub struct TileUVW(pub [Vector3<f32>; 4]);
 impl TileUVW {
    // The texture cell passed must be a child of texture
-    pub fn new(cell: &HEALPixCell, texture: &HpxTexture2D) -> TileUVW {
+    pub fn new(cell: &HEALPixCell, parent_cell: &Option<HEALPixCell>, w: f32) -> TileUVW {
        // Index of the texture in the total set of textures
-        let texture_idx = texture.idx();
+        //let texture_idx = texture.idx();

        // Row and column indexes of the tile in its texture
-        let (idx_col_in_tex, idx_row_in_tex) = cell.offset_in_parent(texture.cell());
+        let (u, v, ds) = if let Some(parent) = parent_cell {
+            let (idx_col_in_tex, idx_row_in_tex) = cell.offset_in_parent(parent);

-        let nside = (1 << (cell.depth() - texture.cell().depth())) as f32;
-        let u = (idx_row_in_tex as f32) / nside;
-        let v = (idx_col_in_tex as f32) / nside;
+            let nside = (1 << (cell.depth() - parent.depth())) as f32;
+            let ds = 1_f32 / nside;

-        let ds = 1_f32 / nside;
+            let u = (idx_row_in_tex as f32) / nside;
+            let v = (idx_col_in_tex as f32) / nside;

-        let w = texture_idx as f32;
+            (u, v, ds)
+        } else {
+            (0.0, 0.0, 1.0)
+        };
+
+        //let u = 0.0;
+        //let v = 0.0;
+        //let ds = 1.0;
+
+        // let w = texture_idx as f32;
        TileUVW([
            Vector3::new(u, v, w),
            Vector3::new(u + ds, v, w),
--- a/src/core/src/renderable/moc/hierarchy.rs
+++ b/src/core/src/renderable/moc/hierarchy.rs
@@ -1,5 +1,5 @@
 use super::MOC;
-use crate::{camera::CameraViewPort, HEALPixCoverage};
+use crate::{camera::CameraViewPort, SpaceMoc};
 use al_api::moc::MOCOptions;

 pub struct MOCHierarchy {
@@ -12,19 +12,13 @@ use al_core::WebGlContext;
 impl MOCHierarchy {
    pub fn from_full_res_moc(
        gl: WebGlContext,
-        full_res_moc: HEALPixCoverage,
+        full_res_moc: SpaceMoc,
        options: &MOCOptions,
    ) -> Self {
        let full_res_depth = full_res_moc.depth();

        let mut mocs: Vec<_> = (0..full_res_depth)
-            .map(|d| {
-                MOC::new(
-                    gl.clone(),
-                    HEALPixCoverage(full_res_moc.degraded(d)),
-                    options,
-                )
-            })
+            .map(|d| MOC::new(gl.clone(), SpaceMoc(full_res_moc.degraded(d)), options))
            .collect();

        mocs.push(MOC::new(gl.clone(), full_res_moc, options));
@@ -80,7 +74,7 @@ impl MOCHierarchy {
        &mut self.mocs[d]
    }

-    pub fn get_full_moc(&self) -> &HEALPixCoverage {
+    pub fn get_full_moc(&self) -> &SpaceMoc {
        &self.mocs.last().unwrap().moc
    }

--- a/src/core/src/renderable/moc/mod.rs
+++ b/src/core/src/renderable/moc/mod.rs
@@ -3,7 +3,7 @@ pub mod renderer;
 pub use renderer::MOCRenderer;

 use crate::camera::CameraViewPort;
-use crate::healpix::coverage::HEALPixCoverage;
+use crate::healpix::moc::SpaceMoc;
 use crate::math::projection::ProjectionType;
 use crate::renderable::WebGl2RenderingContext;
 use crate::shader::ShaderManager;
@@ -32,11 +32,11 @@ pub struct MOC {

    inner: [Option<MOCIntern>; 3],

-    pub moc: HEALPixCoverage,
+    pub moc: SpaceMoc,
 }

 impl MOC {
-    pub(super) fn new(gl: WebGlContext, moc: HEALPixCoverage, cfg: &MOCOptions) -> Self {
+    pub(super) fn new(gl: WebGlContext, moc: SpaceMoc, cfg: &MOCOptions) -> Self {
        let sky_fraction = moc.sky_fraction() as f32;
        let max_order = moc.depth_max();

@@ -228,7 +228,7 @@ impl MOCIntern {

    fn vertices_in_view<'a>(
        &self,
-        moc: &'a HEALPixCoverage,
+        moc: &'a SpaceMoc,
        camera: &'a mut CameraViewPort,
    ) -> impl Iterator<Item = [(f64, f64); 4]> + 'a {
        let view_moc = camera.get_cov(CooSystem::ICRS);
@@ -250,7 +250,7 @@ impl MOCIntern {

    fn draw(
        &mut self,
-        moc: &HEALPixCoverage,
+        moc: &SpaceMoc,
        camera: &mut CameraViewPort,
        proj: &ProjectionType,
        shaders: &mut ShaderManager,
@@ -457,7 +457,7 @@ impl MOCIntern {

    fn compute_edge_paths_iter<'a>(
        &self,
-        moc: &'a HEALPixCoverage,
+        moc: &'a SpaceMoc,
        camera: &'a mut CameraViewPort,
    ) -> impl Iterator<Item = f32> + 'a {
        self.vertices_in_view(moc, camera).flat_map(|v| {
--- a/src/core/src/renderable/moc/renderer.rs
+++ b/src/core/src/renderable/moc/renderer.rs
@@ -1,4 +1,4 @@
-use crate::{healpix::coverage::HEALPixCoverage, CameraViewPort, ShaderManager};
+use crate::{healpix::moc::SpaceMoc, CameraViewPort, ShaderManager};
 use al_core::WebGlContext;
 use wasm_bindgen::JsValue;

@@ -67,7 +67,7 @@ impl MOCRenderer {

    pub fn push_back(
        &mut self,
-        moc: HEALPixCoverage,
+        moc: SpaceMoc,
        cfg: MOCOptions,
        camera: &mut CameraViewPort,
        proj: &ProjectionType,
@@ -80,7 +80,7 @@ impl MOCRenderer {
        //self.layers.push(key);
    }

-    pub fn get_hpx_coverage(&self, moc_uuid: &str) -> Option<&HEALPixCoverage> {
+    pub fn get_hpx_coverage(&self, moc_uuid: &str) -> Option<&SpaceMoc> {
        if let Some(idx) = self.cfgs.iter().position(|cfg| cfg.get_uuid() == moc_uuid) {
            Some(self.mocs[idx].get_full_moc())
        } else {
--- a/src/core/src/renderable/mod.rs
+++ b/src/core/src/renderable/mod.rs
@@ -13,6 +13,7 @@ use crate::renderable::image::Image;
 use crate::tile_fetcher::TileFetcherQueue;

 use al_api::color::ColorRGB;
+use al_api::hips::DataproductType;
 use al_api::hips::HiPSCfg;
 use al_api::hips::ImageMetadata;
 use al_api::image::ImageParams;
@@ -175,7 +176,7 @@ impl Layers {
    pub fn set_hips_url(&mut self, cdid: &CreatorDid, new_url: String) -> Result<(), JsValue> {
        if let Some(hips) = self.hipses.get_mut(cdid) {
            // update the root_url
-            hips.get_config_mut().set_root_url(new_url.clone());
+            hips.set_root_url(new_url);

            Ok(())
        } else {
@@ -449,11 +450,13 @@ impl Layers {
            }*/
            camera.register_view_frame(cfg.get_frame(), proj);

-            let hips = if cfg.get_cube_depth().is_some() {
+            let hips = match &cfg.dataproduct_type {
                // HiPS cube
-                HiPS::D3(HiPS3D::new(cfg, gl)?)
-            } else {
-                HiPS::D2(HiPS2D::new(cfg, gl)?)
+                DataproductType::Cube => HiPS::D3(HiPS3D::new(cfg, gl, &layer)?),
+                // HiPS 3D
+                DataproductType::SpectralCube => HiPS::D3(HiPS3D::new(cfg, gl, &layer)?),
+                // Typical HiPS image
+                _ => HiPS::D2(HiPS2D::new(cfg, gl)?),
            };

            // add the frame to the camera
--- a/src/core/src/tile_fetcher.rs
+++ b/src/core/src/tile_fetcher.rs
@@ -1,3 +1,4 @@
+use crate::downloader::query::CellDesc;
 use crate::downloader::{query, Downloader};
 use crate::time::{DeltaTime, Time};
 use crate::Abort;
@@ -72,8 +73,10 @@ impl HiPSLocalFiles {

        tiles_per_fmt[d].get(&i)
    }
+}

-    fn get_moc(&self) -> &web_sys::File {
+impl HiPSLocalFiles {
+    pub fn get_moc(&self) -> &web_sys::File {
        &self.moc
    }
 }
@@ -144,16 +147,23 @@ impl TileFetcherQueue {

    fn check_in_file_list(&self, mut query: Tile) -> Result<Tile, JsValue> {
        if let Some(local_hips) = self.hips_local_files.get(&query.hips_cdid) {
-            if let Some(tile) = local_hips.get_tile(&query.cell, *query.format.get_ext_file()) {
-                if let Ok(url) = web_sys::Url::create_object_url_with_blob(tile.as_ref()) {
-                    // rewrite the url
-                    query.url = url;
-                    Ok(query)
-                } else {
-                    Err(JsValue::from_str("could not create an url from the tile"))
+            // TODO modify local hips file structure to support freq indices as well
+            match query.cell {
+                CellDesc::HiPS2D { cell, .. } => {
+                    if let Some(tile) = local_hips.get_tile(&cell, *query.format.get_ext_file()) {
+                        if let Ok(url) = web_sys::Url::create_object_url_with_blob(tile.as_ref()) {
+                            // rewrite the url
+                            query.url = url;
+                            Ok(query)
+                        } else {
+                            Err(JsValue::from_str("could not create an url from the tile"))
+                        }
+                    } else {
+                        Ok(query)
+                    }
                }
-            } else {
-                Ok(query)
+                // TODO Support for HiPS3D/Cube
+                _ => Ok(query),
            }
        } else {
            Ok(query)
@@ -189,28 +199,10 @@ impl TileFetcherQueue {
        downloader: Rc<RefCell<Downloader>>,
    ) {
        let cfg = hips.get_config();
-        // Request for the allsky first
-        // The allsky is not mandatory present in a HiPS service but it is better to first try to search for it
-        //downloader.fetch(query::PixelMetadata::new(cfg));
-        // Try to fetch the MOC
-        let hips_cdid = cfg.get_creator_did();
-        let moc_url = if let Some(local_hips) = self.hips_local_files.get(hips_cdid) {
-            if let Ok(url) =
-                web_sys::Url::create_object_url_with_blob(local_hips.get_moc().as_ref())
-            {
-                url
-            } else {
-                format!("{}/Moc.fits", cfg.get_root_url())
-            }
-        } else {
-            format!("{}/Moc.fits", cfg.get_root_url())
-        };

        downloader.borrow_mut().fetch(query::Moc::new(
-            moc_url,
-            cfg.get_request_mode(),
-            cfg.get_request_credentials(),
-            cfg.get_creator_did().to_string(),
+            cfg,
+            &self.hips_local_files,
            MOCOptions::default(),
        ));

@@ -219,24 +211,26 @@ impl TileFetcherQueue {
        // Request the allsky
        let dl = downloader.clone();

-        let allsky_query = query::Allsky::new(
-            cfg,
-            match hips {
-                HiPS::D2(_) => None,
-                HiPS::D3(h) => Some(h.get_slice() as u32),
-            },
-        );
+        // Allsky query
+        match hips {
+            HiPS::D2(_) => {
+                let allsky_query = query::Allsky::new(cfg, None);

-        crate::utils::set_timeout(
-            move || {
-                dl.borrow_mut().fetch(allsky_query);
-            },
-            100,
-        );
+                crate::utils::set_timeout(
+                    move || {
+                        dl.borrow_mut().fetch(allsky_query);
+                    },
+                    100,
+                );
+            }
+            // Do not ask for allsky for HiPS3D
+            HiPS::D3(_) => (),
+        }

-        if cfg.get_min_depth_tile() == 0 {
+        // FIXME: this still might be important to keep but for HiPS2D only
+        /*if cfg.get_min_depth_tile() == 0 {
            for tile_cell in crate::healpix::cell::ALLSKY_HPX_CELLS_D0 {
-                if let Ok(query) = self.check_in_file_list(hips.get_tile_query(tile_cell)) {
+                if let Ok(query) = self.check_in_file_list(hips.build_tile_query(tile_cell)) {
                    let dl = downloader.clone();

                    crate::utils::set_timeout(
@@ -247,6 +241,6 @@ impl TileFetcherQueue {
                    );
                }
            }
-        }
+        }*/
    }
 }
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -23,6 +23,27 @@
    color: white;
 }

+.aladin-lite-spectra-displayer .aladin-spectra-unit-selector {
+    position: absolute;
+    bottom: 3rem;
+    right: 0;
+}
+.aladin-lite-spectra-displayer .aladin-spectra-home {
+    position: absolute;
+    bottom: 5rem;
+    right: 0;
+}
+.aladin-lite-spectra-displayer .aladin-spectra-extraction {
+    position: absolute;
+    bottom: 7rem;
+    right: 0;
+}
+.aladin-lite-spectra-displayer .aladin-spectra-hips-selector {
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-width: 10rem;
+}

 .aladin-imageCanvas {
 	position: absolute;
@@ -846,7 +867,6 @@
    padding: 0.2rem 0;
    font-size: inherit;
    border-radius: 0.2rem;
-    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-family: monospace;
    box-sizing: content-box;
--- a/src/glsl/webgl2/hips/color.glsl
+++ b/src/glsl/webgl2/hips/color.glsl
@@ -13,9 +13,21 @@ uniform float reversed;
 #include ../decode.glsl;

 /////////////////////////////////////////////
-/// RGBA sampler
+/// RED sampler
+vec4 uvw2c_r(vec3 uv) {    
+    vec2 va = texture(tex, uv).ra;

-vec4 uvw2c_rgba(vec3 uv) {    
+    va.x = transfer_func(H, va.x, min_value, max_value);
+
+    // apply reversed
+    va.x = mix(va.x, 1.0 - va.x, reversed);
+
+    vec4 c = colormap_f(va.x);
+    return apply_tonal(c);
+}
+
+/// RGBA sampler
+vec4 uvw2c_rgba(vec3 uv) {
    vec4 c = texture(tex, uv).rgba;

    c.r = transfer_func(H, c.r, min_value, max_value);
@@ -28,6 +40,19 @@ vec4 uvw2c_rgba(vec3 uv) {
    return apply_tonal(c);
 }

+vec4 uvw2c_ra(vec3 uv) {
+    vec2 c = texture(tex, uv).rg;
+
+    c.r = transfer_func(H, c.r, min_value, max_value);
+
+    // apply reversed
+    c.r = mix(c.r, 1.0 - c.r, reversed);
+
+    vec3 color = colormap_f(c.r).rgb;
+
+    return apply_tonal(vec4(color, c.g));
+}
+
 vec4 uvw2cmap_rgba(vec3 uv) {    
    float v = texture(tex, uv).r;
    // apply transfer f
@@ -42,7 +67,6 @@ vec4 uvw2cmap_rgba(vec3 uv) {

 /////////////////////////////////////////////
 /// FITS sampler
-
 vec4 val2c_f32(float x) {
    float alpha = x * scale + offset;
    alpha = transfer_func(H, alpha, min_value, max_value);
--- a/src/glsl/webgl2/hips3d/f32.frag
+++ b/src/glsl/webgl2/hips3d/f32.frag
@@ -13,7 +13,9 @@ out vec4 out_frag_color;
 uniform float opacity;

 void main() {
-    vec3 uv = vec3(frag_uv.xy, mod(frag_uv.z, 32.0) / 32.0);
+    vec3 uv = vec3(frag_uv.xyz);
+    uv.y = 1.0 - uv.y;
+
    vec4 color = uvw2c_f32(uv);

    out_frag_color = color;
--- a/src/glsl/webgl2/hips3d/i16.frag
+++ b/src/glsl/webgl2/hips3d/i16.frag
@@ -15,7 +15,9 @@ out vec4 out_frag_color;
 uniform float opacity;

 void main() {
-    vec3 uv = vec3(frag_uv.xy, mod(frag_uv.z, 32.0) / 32.0);
+    vec3 uv = vec3(frag_uv.xyz);
+    uv.y = 1.0 - uv.y;
+
    vec4 color = uvw2c_i16(uv);

    out_frag_color = color;
--- a/src/glsl/webgl2/hips3d/i32.frag
+++ b/src/glsl/webgl2/hips3d/i32.frag
@@ -15,7 +15,9 @@ out vec4 out_frag_color;
 uniform float opacity;

 void main() {
-    vec3 uv = vec3(frag_uv.xy, mod(frag_uv.z, 32.0) / 32.0);
+    vec3 uv = vec3(frag_uv.xyz);
+    uv.y = 1.0 - uv.y;
+
    vec4 color = uvw2c_i32(uv);

    out_frag_color = color;
--- a/src/glsl/webgl2/hips3d/rgba.frag
+++ b/src/glsl/webgl2/hips3d/rgba.frag
@@ -1,6 +1,8 @@
 #version 300 es
 precision lowp float;
 precision lowp sampler3D;
+precision lowp isampler3D;
+precision lowp usampler3D;

 uniform sampler3D tex;

@@ -12,8 +14,8 @@ uniform float opacity;
 #include ../hips/color.glsl;

 void main() {
-    vec3 uv = vec3(frag_uv.xy, mod(frag_uv.z, 32.0) / 32.0);
-    vec4 color = uvw2c_rgba(uv);
+    vec3 uv = vec3(frag_uv.xyz);
+    vec4 color = uvw2c_ra(uv);

    out_frag_color = color;
    out_frag_color.a = opacity * out_frag_color.a;
--- a/src/glsl/webgl2/hips3d/rgba2cmap.frag
+++ b/src/glsl/webgl2/hips3d/rgba2cmap.frag
@@ -1,20 +0,0 @@
-#version 300 es
-precision lowp float;
-precision lowp sampler3D;
-
-uniform sampler3D tex;
-
-in vec3 frag_uv;
-
-out vec4 out_frag_color;
-uniform float opacity;
-
-#include ../hips/color.glsl;
-
-void main() {
-    vec3 uv = vec3(frag_uv.xy, mod(frag_uv.z, 32.0) / 32.0);
-    vec4 color = uvw2cmap_rgba(uv);
-
-    out_frag_color = color;
-    out_frag_color.a = opacity * out_frag_color.a;
-}
--- a/src/glsl/webgl2/hips3d/u8.frag
+++ b/src/glsl/webgl2/hips3d/u8.frag
@@ -13,7 +13,9 @@ out vec4 out_frag_color;
 uniform float opacity;

 void main() {
-    vec3 uv = vec3(frag_uv.xy, mod(frag_uv.z, 32.0) / 32.0);
+    vec3 uv = vec3(frag_uv.xyz);
+    uv.y = 1.0 - uv.y;
+
    vec4 color = uvw2c_u8(uv);

    out_frag_color = color;
--- a/src/glsl/webgl2/projection/hpx_proj.glsl
+++ b/src/glsl/webgl2/projection/hpx_proj.glsl
@@ -53,15 +53,6 @@ float one_minus_z_neg(vec3 p) {
 int ij2z(int i, int j) {
    int i4 = i | (j << 2);

-    /*int j1 = (i1 ^ (i1 >> 8)) & 0x0000FF00;
-    int i2 = i1 ^ j1 ^ (j1 << 8);
-
-    int j2 = (i2 ^ (i2 >> 4)) & 0x00F000F0;
-    int i3 = i2 ^ j2 ^ (j2 << 4);
-
-    int j3 = (i3 ^ (i3 >> 2)) & 0x0C0C0C0C;
-    int i4 = i3 ^ j3 ^ (j3 << 2);*/
-
    int j4 = (i4 ^ (i4 >> 1)) & 0x22222222;
    int i5 = i4 ^ j4 ^ (j4 << 1);

--- a/src/glsl/webgl2/projection/projection.glsl
+++ b/src/glsl/webgl2/projection/projection.glsl
@@ -26,27 +26,27 @@ uniform int u_proj;

 vec2 proj(vec3 p) {
    if (u_proj == 0) {
-        /* TAN,      Gnomonic projection        */
+        // TAN,      Gnomonic projection
        return w2c_tan(p);
    } else if (u_proj == 1) {
-        /* STG,	     Stereographic projection   */
+        // STG,	     Stereographic projection
        return w2c_stg(p);
    } else if (u_proj == 2) {
-        /* SIN,	     Orthographic		        */
+        // SIN,	     Orthographic
        return w2c_sin(p);
    } else if (u_proj == 3) {
-        /* ZEA,	     Equal-area 		        */
+        // ZEA,	     Equal-area
        return w2c_zea(p);
    } else if (u_proj == 4) {
        // Pseudo-cylindrical projections
-        /* AIT,      Aitoff                     */
+        // AIT,      Aitoff
        return w2c_ait(p);
    } else if (u_proj == 5) {
-        // MOL,      Mollweide                  */
+        // MOL,      Mollweide
        return w2c_mol(p);
    } else {
        // Cylindrical projections
-        // MER,      Mercator                   */
+        // MER,      Mercator
        return w2c_mer(p);
    }
 }
--- a/src/js/Aladin.js
+++ b/src/js/Aladin.js
@@ -380,7 +380,7 @@ export let Aladin = (function () {
        this.gotoObject(options.target, undefined);

        if (options.log) {
-            var params = options;
+            var params = requestedOptions;
            params["version"] = Aladin.VERSION;
            Logger.log("startup", params);
        }
@@ -1013,8 +1013,6 @@ export let Aladin = (function () {

        let aladinBorderColor = Color.getLabelColorForBackground(`rgb(${aladinColor.r}, ${aladinColor.g}, ${aladinColor.b})`);
        this.aladinDiv.style.setProperty('--aladin-color-border', aladinBorderColor)
-
-        console.log(aladinBorderColor)
    };

    /**
@@ -2908,9 +2906,13 @@ export let Aladin = (function () {
        this.popup.hide();
    };

-    // @API
-    /*
-     * return a URL allowing to share the current view
+
+    /**
+     * Get the URL corresponding to the current view
+     *
+     * @memberof Aladin
+     *
+     * @returns {string} The URL allowing to share the current view
     */
    Aladin.prototype.getShareURL = function () {
        var radec = this.getRaDec();
@@ -3091,12 +3093,13 @@ aladin.displayFITS(
                options.body = JSON.stringify(params);
            }

-            return fetch(url, options).then((response) => response.json());
+            return fetch(url, options).then((response) => response.json()).catch(e => console.error(e));
        };
        const get = (url, params) => request(url, params, "GET");

        get("https://alasky.unistra.fr/cgi/fits2HiPS", data).then(
            async (response) => {
+                console.log(response, data)
                if (response.status != "success") {
                    console.error("An error occured: " + response.message);
                    if (errorCallback) {
@@ -3136,7 +3139,7 @@ aladin.displayFITS(
                // This has to be fixed in the backend but a fast fix is just to wait
                // before setting a new image survey
            }
-        );
+        ).catch((e) => console.error(e));
    };

    Aladin.prototype.displayPNG = Aladin.prototype.displayJPG;
--- a/src/js/Catalog.js
+++ b/src/js/Catalog.js
@@ -601,6 +601,9 @@ export let Catalog = (function () {
    };

    Catalog.prototype.computeFootprints = function (sources) {
+        if (!sources)
+            return;
+
        if ((this.shapeFn || this.colorFn || this.sourceSizeFn) && !this._shapeOperatesOnCtx) {
            for (let source of sources) {
                if (this.shapeFn) {
--- a/src/js/HiPS.js
+++ b/src/js/HiPS.js
@@ -31,6 +31,7 @@ import { HiPSProperties } from "./HiPSProperties.js";
 import { Aladin } from "./Aladin.js"; 
 import { CooFrameEnum } from "./CooFrameEnum.js";
 import { Utils } from "./Utils"
+import { SpectraDisplayer } from "./SpectraDisplayer.js";

 let PropertyParser = {};
 // Utilitary functions for parsing the properties and giving default values
@@ -106,6 +107,18 @@ PropertyParser.skyFraction = function (properties) {
    return skyFraction;
 };

+PropertyParser.hipsDataMinmax = function (properties) {
+    let data_minmax =
+        properties &&
+        properties.hips_data_minmax &&
+        properties.hips_data_minmax.split(" ");
+
+    const minData = data_minmax && parseFloat(data_minmax[0]);
+    const maxData = data_minmax && parseFloat(data_minmax[1]);
+
+    return [minData, maxData];
+};
+
 PropertyParser.cutouts = function (properties) {
    let cuts =
        properties &&
@@ -328,7 +341,7 @@ export let HiPS = (function () {

                        delete self.localFiles["properties"]
                    })
-                    .catch((_) => reject("HiPS " + self.id + " error: " + self.localFiles["properties"] + " does not point towards a local HiPS."))
+                    .catch((e) => reject("HiPS " + self.id + " error: " + self.localFiles["properties"] + " does not point towards a local HiPS.\nReason: " + e.stack))

                resolve(self);
            });
@@ -366,7 +379,7 @@ export let HiPS = (function () {
                            .then((p) => {
                                self._parseProperties(p);
                            })
-                            .catch((_) => reject("HiPS " + self.id + " error: starting url " + self.startUrl + " given does not points to a HiPS location"))
+                            .catch((e) => reject("HiPS " + self.id + " error: starting url " + self.startUrl + " given does not points to a HiPS location.\nReason: " + e.stack))
    
                        // the url stores a "CDS ID" we take it prioritaly
                        // if the url is null, take the id, this is for some tests
@@ -384,7 +397,7 @@ export let HiPS = (function () {
                                    .then((p) => {
                                        self._fetchFasterUrlFromProperties(p);
                                    })
-                                    .catch((_) => reject("HiPS " + self.id + " error: CDS ID " + id + " is not found"));
+                                    .catch((e) => reject("HiPS " + self.id + " error: CDS ID " + id + " is not found.\nReason: " + e.stack));
                            },
                            1000
                        );
@@ -401,21 +414,21 @@ export let HiPS = (function () {
                                self._parseProperties(p);
                                self._fetchFasterUrlFromProperties(p);
                            })
-                            .catch(() => {
+                            .catch((_) => {
                                // If no ID has been found then it may actually be a path
                                // url pointing to a local HiPS
                                return HiPSProperties.fetchFromUrl(id)
                                    .then((p) => {
                                        self._parseProperties(p);
                                    })
-                                    .catch((_) => reject("HiPS " + self.id + " error: " + id + " does not refer to a found CDS ID nor a local path pointing towards a HiPS"))
+                                    .catch((e) => reject("HiPS " + self.id + " error: " + id + " does not refer to a found CDS ID nor a local path pointing towards a HiPS.\nReason: " + e.stack))
                            })
                    } else {
                        await HiPSProperties.fetchFromUrl(self.url, self.requestMode, self.requestCredentials)
                            .then((p) => {
                                self._parseProperties(p);
                            })
-                            .catch((_) => reject("HiPS " + self.id + " error: HiPS not found at url " + self.url))
+                            .catch((e) => reject("HiPS " + self.id + " error: HiPS not found at url " + self.url + "\nReason: " + e.stack))
                    }
                } else {
                    self._parseProperties({
@@ -469,9 +482,24 @@ export let HiPS = (function () {
        let self = this;
        self.creatorDid = properties.creator_did || self.creatorDid;

-        // Cube depth
+        // HiPS Cube special keywords
        self.cubeDepth = properties && properties.hips_cube_depth && +properties.hips_cube_depth;
        self.cubeFirstFrame = properties && properties.hips_cube_firstframe && +properties.hips_cube_firstframe;
+        self.emMin = properties && properties.em_min && +properties.em_min;
+        self.emMax = properties && properties.em_max && +properties.em_max;
+
+        if (self.emMax < self.emMin) {
+            let tmp = self.emMin;
+            self.emMin = self.emMax;
+            self.emMax = tmp;
+        }
+
+        self.hipsDataMinMax = PropertyParser.hipsDataMinmax(properties);
+
+        // HiPS3D special keywords
+        self.hipsOrderFreq = properties && properties.hips_order_freq && +properties.hips_order_freq;
+        self.hipsTileDepth = properties && properties.hips_tile_depth && +properties.hips_tile_depth;
+        self.obsRestFreq = properties && properties.obs_restfreq && +properties.obs_restfreq;

        // Max order
        const maxOrder = PropertyParser.maxOrder(properties)
@@ -479,6 +507,9 @@ export let HiPS = (function () {
            self.maxOrder = maxOrder;
        }

+        // dataproduct type
+        self.dataproductType = properties && properties.dataproduct_type;
+
        // Tile size
        self.tileSize =
            PropertyParser.tileSize(properties) || self.tileSize;
@@ -548,6 +579,8 @@ export let HiPS = (function () {
                return "jpeg";
            } else if (acceptedFormats.indexOf("fits") >= 0) {
                return "fits";
+            } else if (acceptedFormats.indexOf("fits.fz") >= 0) {
+                return "fits";
            } else {
                throw (
                    "Unsupported format(s) found in the properties: " +
@@ -642,6 +675,10 @@ export let HiPS = (function () {
        this.setOptions({additive});
    };

+    HiPS.prototype.isSpectralCube = function() {
+        return this.hipsTileDepth !== undefined && this.hipsTileDepth !== null;
+    }
+
    /**
     * Sets the colormap when rendering the HiPS.
     *
@@ -764,7 +801,53 @@ export let HiPS = (function () {
        this.slice = slice;

        if (this.added) {
-            this.view.wasm.setSliceNumber(this.layer, slice);
+            let meters = this.emMin + ((slice / this.cubeDepth) * (this.emMax - this.emMin));
+
+            let freq = 299792458.0 / meters;
+            this.view.wasm.setFreq(this.layer, freq);
+        }
+    }
+
+    /**
+     * Set the frequency to look at (for HiPS3D object only).
+     *
+     * @memberof HiPS
+     *
+     * @param {Object} [options] - frequency object
+     * @param {number} [options.value] = The frequency value expressed in `options.unit`
+     * @param {"Hz"|"m"|"m/s"} [options.unit="Hz"] - The unit of the frequency passed
+     * @param {number} [options.restFreq] - "The rest frequency (in Hz) to use for computing the velocity in m.s-1"
+     */
+    HiPS.prototype.setFrequency = function(options) {
+        if (this.added) {
+            const SPEED_OF_LIGHT = 299792458.0;
+
+            const value = options && options.value;
+            const unit = options && options.unit;
+
+            let freq;
+            if (unit === "m") {
+                freq = SPEED_OF_LIGHT / value;
+            } else if (unit === "m/s") {
+                // A velocity is given in "m/s"
+                const restFreq = options && options.restFreq;
+                if (!restFreq) {
+                    throw 'When giving a velocity, a rest frequency must be given as well for computing the frequency to query the HiPS'
+                }
+
+                freq = restFreq * (1.0 - value / SPEED_OF_LIGHT)
+            } else {
+                // unit is "Hz"
+                freq = value;
+            }
+
+            this.view.wasm.setFreq(this.layer, freq);
+        }
+    }
+
+    HiPS.prototype.getFrequency = function() {
+        if (this.added) {
+            return this.view.wasm.getFreq(this.layer);
        }
    }

@@ -815,6 +898,10 @@ export let HiPS = (function () {

        /// Set image format
        if (options.imgFormat) {
+            if (this.dataproductType === "spectral-cube" && this.view.spectraDisplayer && this.view.spectraDisplayer.hips === this) {
+                this.view.spectraDisplayer.resetScale()
+            }
+
            let imgFormat = options.imgFormat.toLowerCase();

            if (imgFormat === "jpg") {
@@ -997,7 +1084,15 @@ export let HiPS = (function () {
                hipsInitialFov: self.initialFov,
                hipsInitialRa: self.initialRa,
                hipsInitialDec: self.initialDec,
+                emMin: self.emMin,
+                emMax: self.emMax,
+                // HiPS Cube
                hipsCubeDepth: self.cubeDepth,
+                // HiPS3D
+                hipsTileDepth: self.hipsTileDepth,
+                hipsOrderFreq: self.hipsOrderFreq,
+                // Dataproduct type
+                dataproductType: self.dataproductType, 
                isPlanetaryBody: self.isPlanetaryBody(),
                hipsBody: self.hipsBody,
                requestCredentials: self.requestCredentials,
--- a/src/js/SpectraDisplayer.js
+++ b/src/js/SpectraDisplayer.js
@@ -0,0 +1,779 @@
+// Copyright 2013 - UDS/CNRS
+// The Aladin Lite program is distributed under the terms
+// of the GNU General Public License version 3.
+//
+// This file is part of Aladin Lite.
+//
+//    Aladin Lite is free software: you can redistribute it and/or modify
+//    it under the terms of the GNU General Public License as published by
+//    the Free Software Foundation, version 3 of the License.
+//
+//    Aladin Lite is distributed in the hope that it will be useful,
+//    but WITHOUT ANY WARRANTY; without even the implied warranty of
+//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//    GNU General Public License for more details.
+//
+//    The GNU General Public License is available in COPYING file
+//    along with Aladin Lite.
+//
+
+import { ActionButton } from "./gui/Widgets/ActionButton";
+import { Input } from "./gui/Widgets/Input";
+import HomeIconUrl from '../../assets/icons/maximize.svg';
+import SpectraIconUrl from '../../assets/icons/freq.svg';
+import { ALEvent } from "./events/ALEvent";
+import { Utils } from "./Utils";
+import { Aladin } from "./Aladin";
+
+/******************************************************************************
+ * Aladin Lite project
+ *
+ * File SpectraDisplayer.js
+ *
+ *
+ * Author: Matthieu Baumann [CDS, matthieu.baumann@astro.unistra.fr]
+ *
+ *****************************************************************************/
+
+export class SpectraDisplayer {
+    static UNIT = {
+        FREQUENCY: {
+            label: "f",
+            units: [
+                { unit: "THz", factor: 1e12 },
+                { unit: "GHz", factor: 1e9 },
+                { unit: "MHz", factor: 1e6 },
+                { unit: "kHz", factor: 1e3 },
+                { unit: "Hz",  factor: 1 }
+            ]
+        },
+        WAVELENGTH: {
+            label: "λ",
+            units: [
+                { unit: "km", factor: 1e3 },
+                { unit: "m", factor: 1 },
+                { unit: "mm", factor: 1e-3 },
+                { unit: "μm", factor: 1e-6 },
+                { unit: "nm", factor: 1e-9 },
+                { unit: "Å", factor: 1e-10 },
+                { unit: "pm", factor: 1e-12 },
+            ]
+        },
+        VELOCITY: {
+            label: "v",
+            units: [
+                { unit: "km/s", factor: 1e3 },
+                { unit: "m/s", factor: 1 },
+                { unit: "mm/s", factor: 1e-3 },
+                { unit: "μm/s", factor: 1e-6 },
+                { unit: "nm/s", factor: 1e-9 },
+                { unit: "pm/s", factor: 1e-12 },
+            ]
+        },
+        convertFrequency: function(freq, options) {
+            const SPEED_OF_LIGHT = 299792458.0;
+
+            let unit = options && options.unit;
+
+            let value;
+            if (unit === SpectraDisplayer.UNIT.WAVELENGTH) {
+                value = SPEED_OF_LIGHT / freq;
+            } else if (unit === SpectraDisplayer.UNIT.VELOCITY) {
+                // A velocity is given in "m/s"
+                const restFreq = options && options.restFreq;
+                if (!restFreq) {
+                    throw 'When giving a velocity, a rest frequency must be given as well for computing the frequency to query the HiPS'
+                }
+
+                value = SPEED_OF_LIGHT * (1.0 - freq / restFreq)
+            } else {
+                // unit is "Hz"
+                value = freq;
+            }
+
+            return value;
+        },
+        convertPrecisionFrequency: function(prec, freq, options) {
+            const SPEED_OF_LIGHT = 299792458.0;
+
+            let unit = options && options.unit;
+
+            let value;
+            if (unit === SpectraDisplayer.UNIT.WAVELENGTH) {
+                value = SPEED_OF_LIGHT * prec / (freq * freq);
+            } else if (unit === SpectraDisplayer.UNIT.VELOCITY) {
+                // A velocity is given in "m/s"
+                const restFreq = options && options.restFreq;
+                if (!restFreq) {
+                    throw 'When giving a velocity, a rest frequency must be given as well for computing the frequency to query the HiPS'
+                }
+
+                value = prec * SPEED_OF_LIGHT / restFreq
+            } else {
+                // unit is "Hz"
+                value = prec;
+            }
+
+            return value;
+        }
+    };
+
+    constructor(view, options) {
+        let createPlotCanvas = (name) => {
+            const canvas = document.createElement("canvas");
+            canvas.classList.add(name);
+            canvas.width = this.width;
+            canvas.height = this.height;
+            canvas.style.position = "absolute"
+            canvas.style.top = 0;
+            canvas.style.left = 0;
+
+            this.view.aladinDiv.appendChild(canvas); 
+            return canvas;
+        };
+
+        this.view = view;
+
+        this.data = undefined;
+        this.scaleX = undefined;
+        this.scaleY = undefined;
+        this.height = options && options.height || 300;
+        this.width = options && options.width || 600;
+        this.minY = undefined;
+        this.maxY = undefined;
+        this.mouseFreq = undefined;
+
+        // One canvas for the spectra
+        this.canvas = createPlotCanvas("spectra-line");
+        this.ctx = this.canvas.getContext("2d");
+        // One canvas for the mouse hover spectral line
+        const canvasCursor = createPlotCanvas('spectra-cursor')
+        canvasCursor.style.pointerEvents = "none"
+        this.ctxCursor = canvasCursor.getContext("2d");
+        // One canvas for text
+        const canvasLabels = createPlotCanvas('spectra-labels')
+        canvasLabels.style.pointerEvents = "none"
+        this.ctxLabels = canvasLabels.getContext("2d");
+
+        let self = this;
+        // a selector for choosing the unit
+        let unitSelector = new Input({
+            label: "Unit:",
+            name: "unit selector",
+            value: "f",
+            type: 'select',
+            classList: ['aladin-spectra-unit-selector'],
+            options: [
+                SpectraDisplayer.UNIT.FREQUENCY.label,
+                SpectraDisplayer.UNIT.WAVELENGTH.label,
+                SpectraDisplayer.UNIT.VELOCITY.label,
+            ],
+            tooltip: {
+                content: "Unit between frequency, wavelength and velocity",
+                position: {direction: "right"}
+            },
+            change: (e) => {
+                let label = e.target.value;
+
+                if (label === SpectraDisplayer.UNIT.FREQUENCY.label) {
+                    self.unit = SpectraDisplayer.UNIT.FREQUENCY
+                } else if (label === SpectraDisplayer.UNIT.WAVELENGTH.label) {
+                    self.unit = SpectraDisplayer.UNIT.WAVELENGTH
+                } else {
+                    self.unit = SpectraDisplayer.UNIT.VELOCITY
+                }
+
+                self._redrawLabels();
+            },
+        })
+
+        let autoCenterBtn = new ActionButton({
+            size: 'small',
+            icon: {
+                monochrome: true,
+                url: HomeIconUrl
+            },
+            tooltip: {
+                content: "Scale for data",
+                position: {direction: "right"}
+            },
+            classList: ['aladin-spectra-home'],
+            action(e) {
+                self.resetScale()
+                self._redraw(self.ctx);
+            }
+        })
+        let extractionBtn = new ActionButton({
+            size: 'small',
+            icon: {
+                monochrome: true,
+                url: SpectraIconUrl
+            },
+            tooltip: {
+                content: "Extract the spectra under the cursor",
+                position: {direction: "right"}
+            },
+            classList: ['aladin-spectra-extraction'],
+            action(e) {
+                // TODO
+            }
+        })
+
+        this.unit = SpectraDisplayer.UNIT.FREQUENCY;
+
+        let divNode = document.createElement("div");
+        divNode.style.position = "absolute";
+        divNode.style.left = "50%";
+        divNode.style.transform = "translateX(-50%)";
+        divNode.style.bottom = "2px";
+        divNode.style.width = this.width + "px";
+        divNode.style.height = this.height + "px";
+        divNode.classList.add("aladin-lite-spectra-displayer")
+
+        divNode.appendChild(this.canvas)
+        divNode.appendChild(canvasCursor)
+        divNode.appendChild(canvasLabels)
+        divNode.appendChild(unitSelector.element())
+        divNode.appendChild(autoCenterBtn.element())
+        //divNode.appendChild(extractionBtn.element())
+
+        this.divNode = divNode;
+
+        this.view.aladin.aladinDiv.appendChild(divNode);
+
+        this.defineEventListeners()
+        this.hips3DList = new Map();
+    }
+
+    defineEventListeners() {
+        let lastMouse = { x: 0, y: 0 };
+        this.isDragging = false;
+
+        let canvas = this.canvas;
+        let ctxCursor = this.ctxCursor;
+
+        let self = this;
+
+        let lastClickTime = 0;
+        const DOUBLE_CLICK_DELAY = 300; // most operating systems uses duration between 250ms and 500ms by default.
+
+        canvas.addEventListener('mousedown', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const mx = e.clientX - rect.left;
+            const my = e.clientY - rect.top;
+            
+            let v = this.data.values[Math.round(mx / this.scaleX)]
+
+            let len = this.data.values.length;
+
+            v = this.height - (v - this.minY) * this.scaleY
+            if (my >= v) {
+                this.isDragging = true;
+                lastMouse = { x: mx, y: my };
+                canvas.style.cursor = 'grabbing';
+            } else {
+                // check if the click is next to the center bar
+                // Draw the vertical line that can be grabed to move the slice
+                this.ctx.beginPath();
+                this.ctx.moveTo(this.scaleX * len / 2, this.height);
+                this.ctx.lineTo(this.scaleX * len / 2, this.height - (this.maxY - this.minY) * this.scaleY);
+                this.ctx.strokeStyle = Aladin.DEFAULT_OPTIONS.reticleColor;
+                this.ctx.lineWidth = 10;
+
+                if (this.ctx.isPointInStroke(mx, my)) {
+                    this.isDragging = true;
+                    lastMouse = { x: mx, y: my };
+                    canvas.style.cursor = 'grabbing';
+                } else {
+                    // propagate event to its sibling
+                    let paramsEvent = {
+                        bubbles: e.bubbles,
+                        cancelable: e.cancelable,
+                        clientX: e.clientX,
+                        clientY: e.clientY,
+                        screenX: e.screenX,
+                        screenY: e.screenY,
+                        ctrlKey: e.ctrlKey,
+                        shiftKey: e.shiftKey,
+                        altKey: e.altKey,
+                        metaKey: e.metaKey,
+                        button: e.button,
+                        relatedTarget: e.relatedTarget,
+                    };
+                    const event = new MouseEvent('mousedown', paramsEvent);
+                    // Track timing to simulate dblclick
+                    const now = Date.now();
+                    if (now - lastClickTime < DOUBLE_CLICK_DELAY) {
+                        const dblClickEvent = new MouseEvent('dblclick', {
+                            bubbles: true,
+                            cancelable: true,
+                            clientX: e.clientX,
+                            clientY: e.clientY
+                        });
+
+                        this.view.catalogCanvas.dispatchEvent(dblClickEvent);
+                        lastClickTime = 0; // reset
+                    } else {
+                        lastClickTime = now;
+                    }
+
+                    this.view.catalogCanvas.dispatchEvent(event);
+                }
+            }
+        });
+            
+        canvas.addEventListener('mousemove', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const mx = e.clientX - rect.left;
+            const my = e.clientY - rect.top;
+
+            // can be in the spectral area
+            let v = this.data.values[Math.round(mx / this.scaleX)]
+            let len = this.data.values.length;
+
+            v = this.height - (v - this.minY) * this.scaleY
+            canvas.style.cursor = 'default';
+
+            this.ctxCursor.clearRect(0, 0, this.width, this.height);
+            this.mouseFreq = null;
+
+            if (my >= v) {
+                canvas.style.cursor = 'grab';
+
+                ctxCursor.beginPath();
+                ctxCursor.moveTo(mx, this.height);
+                ctxCursor.lineTo(mx, v);
+                ctxCursor.strokeStyle = "yellow";
+                ctxCursor.lineWidth = 2;
+                ctxCursor.stroke()
+
+                // compute the frequency at that position
+                let curFreq = self.hips.getFrequency();
+                let curHash = Number(self.view.wasm.freq2hash(self.hips.layer, curFreq));
+
+                let mouseHash = curHash + Math.round((mx - (this.width / 2)) / this.scaleX)
+                this.mouseFreq = self.view.wasm.hash2freq(self.hips.layer, BigInt(mouseHash));
+            }
+
+            this._redrawLabels()
+
+            if (!this.isDragging) {
+                // Draw the vertical line that can be grabed to move the slice
+                this.ctx.beginPath();
+                this.ctx.moveTo(this.scaleX * len / 2, this.height);
+                this.ctx.lineTo(this.scaleX * len / 2, this.height - (this.maxY - this.minY) * this.scaleY);
+                this.ctx.strokeStyle = "red";
+                this.ctx.lineWidth = 10;
+
+                if (this.ctx.isPointInStroke(mx, my)) {
+                    this.canvas.style.cursor = 'grab';
+                }
+
+                return;
+            }
+
+            this.mouseFreq = null;
+            this.canvas.style.cursor = 'grabbing';
+
+            // is dragged
+            let dx = (mx - lastMouse.x) / this.scaleX;
+            if (dx != 0) {
+                // Set the frequency
+
+                // look where we are in the freq range
+                let j = Utils.binarySearch(self.data.freqs, self.data.freq);
+                let df, f;
+                if (j > 0 && j < self.data.freqs.length - 1) {
+                    df = (self.data.freqs[j + 1] - self.data.freqs[j - 1]) * 0.5;
+                    f = self.data.freq - dx * df;
+                } else if (j == 0) {
+                    df = self.data.freqs[1] - self.data.freqs[0]
+                    f = self.data.freqs[0] - dx * df;
+                } else {
+                    df = self.data.freqs[self.data.freqs.length - 1] - self.data.freqs[self.data.freqs.length - 2];
+                    f = self.data.freqs[self.data.freqs.length - 1] - dx * df;
+                }
+
+                self.hips.setFrequency({
+                    value: f,
+                    unit: 'Hz'
+                })
+
+
+                lastMouse = { x: mx, y: my };
+            }
+        });
+            
+        canvas.addEventListener('mouseup', (e) => {
+            this.isDragging = false;
+            canvas.style.cursor = 'default';
+
+            const clickEvent = new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                clientX: e.clientX,
+                clientY: e.clientY
+            });
+            this.view.catalogCanvas.dispatchEvent(clickEvent);
+        });
+
+        canvas.addEventListener('mouseout', (e) => {
+            this.isDragging = false;
+        });
+
+        canvas.addEventListener('wheel', (e) => {
+            this.ctxCursor.clearRect(0, 0, this.width, this.height);
+
+            const wheelEvent = new WheelEvent('wheel', {
+                bubbles: true,
+                cancelable: true,
+                deltaX: e.deltaX,
+                deltaY: e.deltaY,
+                deltaMode: e.deltaMode,
+                clientX: e.clientX,
+                clientY: e.clientY,
+                ctrlKey: e.ctrlKey,
+                shiftKey: e.shiftKey,
+                altKey: e.altKey,
+                metaKey: e.metaKey
+            });
+
+            this.view.catalogCanvas.dispatchEvent(wheelEvent);
+        });
+
+        /*
+        const updateSelectorList = () => {
+            let options = [];
+            for (const hipsName of this.hips3DList.keys()) {
+                options.push(hipsName)
+            }
+
+            this.selector.update({options})
+        };
+
+        ALEvent.HIPS_LAYER_ADDED.listenedBy(
+            this.view.aladin.aladinDiv,
+            function (e) {
+                let hips = e.detail.layer;
+
+                if (hips.dataproductType === "spectral-cube") {
+                    self.hips3DList.set(hips.name, hips);
+
+                    updateSelectorList()
+                }
+            }
+        );
+
+        ALEvent.HIPS_LAYER_SWAP.listenedBy(
+            this.view.aladin.aladinDiv,
+            function (e) {
+                let firstHiPS = e.detail.firstLayer;
+                let secondHiPS = e.detail.secondLayer;
+
+                self.hips3DList.delete(firstHiPS.name);
+
+                if (secondHiPS.dataproductType === "spectral-cube") {
+                    self.hips3DList.set(secondHiPS.name, secondHiPS);
+                }
+
+                updateSelectorList()
+            }
+        );
+
+        ALEvent.HIPS_LAYER_REMOVED.listenedBy(
+            this.view.aladin.aladinDiv,
+            function (e) {
+                let hips = e.detail.layer;
+                self.hips3DList.delete(hips.name);
+
+                if (hips === this.hips) {
+                    // the hips pointed by the tool has been removed
+                    self.attachHiPS3D(null);
+                }
+
+                if (self.hips3DList.size === 0) {
+                    self.hide()
+                }
+
+                updateSelectorList()
+            }
+        );*/
+    }
+
+    hide() {
+        if (this.isHidden) {
+            return;
+        }
+
+        this.divNode.style.display = "none";
+        this.isHidden = true;
+    }
+
+    show() {
+        if (!this.isHidden) {
+            return;
+        }
+
+        this.divNode.style.display = "block";
+        this.isHidden = false;
+    }
+
+    attachHiPS3D(hips) {
+        // remove the callback from the last hips if there is
+        if (this.spectraUpdateCallback) {
+            window.removeEventListener("spectra", this.spectraUpdateCallback)
+        }
+
+        // store new references to the new hips
+        this.hips = hips;
+
+        if (hips) {
+            this.spectraUpdateCallback = (event) => {
+                let data = event.detail;
+                if (data.layer === this.hips.layer) {
+                    this.data = data;
+                    this._redraw(this.ctx);
+                }
+            };
+    
+            window.addEventListener("spectra", this.spectraUpdateCallback);
+
+            this.resetScale();
+            this.show()
+        }
+    }
+
+    // When changing the HiPS format, a scale reset is necessary
+    resetScale() {
+        this.minY = undefined;
+        this.maxY = undefined;
+    }
+
+    enableInteraction() {
+        this.divNode.style.pointerEvents = "auto"
+    }
+
+    disableInteraction() {
+        this.divNode.style.pointerEvents = "none"
+    }
+
+    _redraw() {
+        const values = this.data.values;
+        let len = values.length;
+
+        // Clear previous drawing
+        this.ctx.clearRect(0, 0, this.width, this.height);
+
+        // Find min and max for scaling
+        let valuesWithNoNans = values.filter(v=>Number.isFinite(v));
+
+        if (Number.isFinite(this.minY)) {
+            this.minY = Math.min(...valuesWithNoNans, this.minY)
+        } else {
+            this.minY = Math.min(...valuesWithNoNans)
+        }
+        if (Number.isFinite(this.maxY)) {
+            this.maxY = Math.max(...valuesWithNoNans, this.maxY)
+        } else {
+            this.maxY = Math.max(...valuesWithNoNans)
+        }
+
+        this.scaleX = this.width / (len - 1);
+        this.scaleY = (this.maxY - this.minY === 0) ? 1 : this.height / (this.maxY - this.minY);
+
+        this._redrawSpectra(values)
+
+        // Draw the vertical line that can be grabed to move the slice
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.scaleX * len / 2, this.height);
+        this.ctx.lineTo(this.scaleX * len / 2, this.height - (this.maxY - this.minY) * this.scaleY);
+        this.ctx.strokeStyle = Aladin.DEFAULT_OPTIONS.reticleColor;
+        this.ctx.lineWidth = 2;
+        this.ctx.stroke();
+
+        this._redrawLabels()
+    }
+
+    _redrawLabels() {
+        let self = this;
+        let spectraValue2String = (freq, precision) => {
+            let units = self.unit.units;
+
+            let x = SpectraDisplayer.UNIT.convertFrequency(
+                freq,
+                {
+                    unit: self.unit,
+                    restFreq: self.hips.obsRestFreq
+                }
+            )
+
+            let dx = SpectraDisplayer.UNIT.convertPrecisionFrequency(
+                precision,
+                freq,
+                {
+                    unit: self.unit,
+                    restFreq: self.hips.obsRestFreq
+                }
+            )
+
+            for (const { unit, factor } of units) {
+                const value = x / factor;
+                const precisionInUnit = dx / factor;
+            
+                if (Math.abs(value) >= 1 || unit === units[units.length - 1].unit) {
+                    // Calculate number of decimal places needed to show the given precision
+                    const decimals = Math.max(0, Math.ceil(-Math.log10(precisionInUnit)));
+                    return value.toFixed(decimals) + " " + unit;
+                }
+            }
+        }
+
+        // Clear previous drawing
+        this.ctxLabels.clearRect(0, 0, this.width, this.height);
+
+        let drawLabel = (ctx, str, x, y, strokeStyle, font, fillStyle) => {
+            ctx.strokeStyle = strokeStyle;       // contour color
+            ctx.strokeText(str, x, y);
+
+            ctx.fillStyle = fillStyle;
+            ctx.font = font
+            ctx.fillText(str, x, y);
+        };
+
+        // Draw the min and max frequencies
+        this.ctxLabels.font = "20px monospace"; // You can also use "Courier New", "Consolas", etc.
+        this.ctxLabels.fillStyle = "lightgreen";
+        this.ctxLabels.textBaseline = "middle"; // Vertically centered
+
+        // min window freq
+        this.ctxLabels.textAlign = "left"; // Horizontally centered
+        drawLabel(
+            this.ctxLabels,
+            spectraValue2String(this.data.freqMin, this.data.freqs[1] - this.data.freqs[0]),
+            0,
+            this.height - 20,
+            'black',
+            '20px monospace',
+            'lightgreen'
+        )
+
+        // max window freq
+        this.ctxLabels.textAlign = "right"; // Horizontally centered
+        drawLabel(
+            this.ctxLabels,
+            spectraValue2String(this.data.freqMax, this.data.freqs[this.data.freqs.length - 1] - this.data.freqs[this.data.freqs.length - 2]),
+            this.width,
+            this.height - 20,
+            'black',
+            '20px monospace',
+            'lightgreen'
+        )
+
+        // current window freq
+        this.ctxLabels.textAlign = "center"; // Horizontally centered
+        let str, fillStyle; 
+        if (!this.isDragging && this.mouseFreq) {
+            fillStyle = "yellow";
+            str = spectraValue2String(this.mouseFreq, this.data.freqStep);
+        } else {
+            fillStyle = Aladin.DEFAULT_OPTIONS.reticleColor;
+            str = spectraValue2String(this.data.freq, this.data.freqStep);
+        }
+        drawLabel(
+            this.ctxLabels,
+            str,
+            this.width / 2,
+            this.height - 20,
+            'black',
+            '20px monospace',
+            fillStyle
+        )
+    }
+
+    _redrawSpectra(array) {
+        this.ctx.beginPath();
+        this.ctx.lineWidth = 4;
+
+        let strokeStyle = "red";
+        this.ctx.strokeStyle = strokeStyle
+
+        let prevY;
+        let i = 0;
+        let i1 = array.length;
+
+        while (i < i1) {
+            let y;
+            const x = i * this.scaleX;
+
+            const inValidDomain = this.data.freqIdxStart !== undefined && this.data.freqIdxEnd !== undefined && i >= this.data.freqIdxStart && i <= this.data.freqIdxEnd;
+
+            if (inValidDomain) {
+                const tileNotReceived = !Number.isFinite(array[i]);
+                if (tileNotReceived) {
+                    // color orange
+                    if (strokeStyle !== "orange") {
+                        this.ctx.lineTo(x, this.height)
+                        strokeStyle = "orange"
+                        this.ctx.stroke()
+
+                        this.ctx.beginPath();
+                        this.ctx.strokeStyle = strokeStyle
+                        this.ctx.lineWidth = 4
+                    }
+
+                    y = this.height;
+                    if (i === 0) {
+                        this.ctx.moveTo(x, y);
+                    } else {
+                        this.ctx.lineTo(x, y);
+                    }
+                } else {
+                    // valid frequency, color green
+                    if (strokeStyle !== "lightgreen") {
+                        strokeStyle = "lightgreen"
+                        this.ctx.stroke()
+
+                        this.ctx.beginPath();
+                        this.ctx.strokeStyle = strokeStyle
+                        this.ctx.lineWidth = 2
+                        this.ctx.moveTo(x - this.scaleX, prevY)
+                    }
+
+                    y = this.height - (array[i] - this.minY) * this.scaleY;
+
+                    
+
+                    if (i === 0) {
+                        this.ctx.moveTo(x, y);
+                    } else {
+                        this.ctx.lineTo(x, y);
+                    }
+                }
+            } else {
+                // frequency out of the survey coverage => color red
+                if (strokeStyle !== "red") {
+                    this.ctx.lineTo(x, this.height)
+                    this.ctx.stroke()
+
+                    this.ctx.beginPath();
+                    strokeStyle = "red"
+                    this.ctx.strokeStyle = strokeStyle
+                    this.ctx.lineWidth = 4
+                }
+
+                y = this.height;
+                if (i === 0) {
+                    this.ctx.moveTo(x, y);
+                } else {
+                    this.ctx.lineTo(x, y);
+                }
+            }
+
+            i++;
+            prevY = y;
+        }
+
+        this.ctx.stroke();
+    }
+}
+ 
--- a/src/js/URLBuilder.js
+++ b/src/js/URLBuilder.js
@@ -54,11 +54,11 @@ export let URLBuilder = (function() {
        },

        buildNEDPositionCSURL: function(ra, dec, radiusDegrees) {
-                return 'https://ned.ipac.caltech.edu/cgi-bin/nph-objsearch?search_type=Near+Position+Search&of=xml_main&RA=' + ra + '&DEC=' + dec + '&SR=' + radiusDegrees;
+            return 'https://ned.ipac.caltech.edu/cgi-bin/nph-objsearch?search_type=Near+Position+Search&of=xml_main&RA=' + ra + '&DEC=' + dec + '&SR=' + radiusDegrees;
        },

        buildNEDObjectCSURL: function(object, radiusDegrees) {
-                return 'https://ned.ipac.caltech.edu/cgi-bin/nph-objsearch?search_type=Near+Name+Search&radius=' + (60 * radiusDegrees) + '&of=xml_main&objname=' + object;
+            return 'https://ned.ipac.caltech.edu/cgi-bin/nph-objsearch?search_type=Near+Name+Search&radius=' + (60 * radiusDegrees) + '&of=xml_main&objname=' + object;
        },

        buildSKAORucioCSURL: function(target, radiusDegrees) {
--- a/src/js/Utils.ts
+++ b/src/js/Utils.ts
@@ -149,12 +149,18 @@ Utils.inverseNewtonRaphson = function(y: number, f: Function, fPrime: Function,
 Utils.binarySearch = function(array, value) {
    var low = 0,
        high = array.length;
-
+    var mid;
    while (low < high) {
-        var mid = (low + high) >>> 1;
-        if (array[mid] > value) low = mid + 1;
-        else high = mid;
+        mid = Math.floor((low + high) / 2);
+        if (array[mid] === value) {
+            return mid;
+        } else if (array[mid] < value) {
+            low = mid + 1;
+        } else {
+            high = mid;
+        }
    }
+
    return low;
 }

--- a/src/js/View.js
+++ b/src/js/View.js
@@ -44,12 +44,10 @@ import { Zoom } from './Zoom.js'
 import { Footprint } from "./Footprint.js";
 import { Selector } from "./Selector.js";
 import { ObsCore } from "./vo/ObsCore.js";
-import { DefaultActionsForContextMenu } from "./DefaultActionsForContextMenu.js";
-import { Layout } from "./gui/Layout.js";
-import { SAMPActionButton } from "./gui/Button/SAMP.js";
 import { HiPS } from "./HiPS.js";
 import { Image } from "./Image.js";
 import { Color } from "./Color.js";
+import { SpectraDisplayer } from "./SpectraDisplayer.js";

 export let View = (function () {

@@ -592,11 +590,20 @@ export let View = (function () {
    }

    View.prototype.selectLayer = function (layer) {
-        if (!this.imageLayers.has(layer)) {
+        let imageLayer = this.imageLayers.get(layer)
+        if (!imageLayer) {
            console.warn(layer + ' does not exists. So cannot be selected');
            return;
        }

+        if (imageLayer.dataproductType === "spectral-cube") {
+            if (!this.spectraDisplayer) {
+                this.spectraDisplayer = new SpectraDisplayer(this, {width: 800, height: 300});
+            }
+
+            this.spectraDisplayer.attachHiPS3D(imageLayer)
+        }
+
        this.selectedLayer = layer;
    };

@@ -622,7 +629,6 @@ export let View = (function () {
            catch (err) {
                return;
            }
-
        };

        if (!Utils.hasTouchScreen()) {
@@ -720,6 +726,10 @@ export let View = (function () {

            const xymouse = Utils.relMouseCoords(e);

+            if (view.spectraDisplayer) {
+                view.spectraDisplayer.disableInteraction();
+            }
+
            ALEvent.CANVAS_EVENT.dispatchedTo(view.aladinDiv, {
                state: {
                    mode: view.mode,
@@ -788,6 +798,7 @@ export let View = (function () {
            view.dragCoo = xymouse;

            view.dragging = true;
+
            view.aladin.contextMenu && view.aladin.contextMenu._hide()

            if (view.mode === View.PAN) {
@@ -805,6 +816,7 @@ export let View = (function () {
            return true;
        });

+        /*
        Utils.on(view.catalogCanvas, "mouseup", function (e) {
            e.preventDefault();
            e.stopPropagation();
@@ -835,9 +847,36 @@ export let View = (function () {
                view.selector.dispatch('mouseup', {coo: xymouse})
            }
        });
+        */
+
+        Utils.on(view.catalogCanvas, "click", function (e) {
+            // call listener of 'click' event
+            
+            if (view.mode == View.TOOL_SIMBAD_POINTER) {
+                // call Simbad pointer or Planetary features
+                GenericPointer(view, e);
+
+                return; // when in TOOL_SIMBAD_POINTER mode, we do not call the listeners
+            }
+
+            if (view.mode == View.TOOL_COLOR_PICKER) {
+                Utils.copy2Clipboard(view.colorPickerTool.probedValue)
+                    .then(() => {
+                        if (view.aladin.statusBar) {
+                            view.aladin.statusBar.appendMessage({
+                                message: `${view.colorPickerTool.probedValue} copied into your clipboard`,
+                                duration: 1500,
+                                type: 'info'
+                            })
+                        }
+                    })
+                return; // listeners are not called
+            }
+
+        });

        // reacting on 'click' rather on 'mouseup' is more reliable when panning the view
-        Utils.on(view.catalogCanvas, "click mouseout touchend touchcancel", function (e) {
+        Utils.on(view.catalogCanvas, "mouseup mouseout touchend touchcancel", function (e) {
            const xymouse = Utils.relMouseCoords(e);

            ALEvent.CANVAS_EVENT.dispatchedTo(view.aladinDiv, {
@@ -882,6 +921,9 @@ export let View = (function () {
                }

                view.dragging = false;
+                if (view.spectraDisplayer) {
+                    view.spectraDisplayer.enableInteraction();
+                }

                if (wasDragging) {
                    view.realDragging = false;
@@ -894,6 +936,12 @@ export let View = (function () {
            view.mustClearCatalog = true;
            view.dragCoo = null;

+            if (e.type === "mouseup") {
+                if (view.mode === View.SELECT) {
+                    view.selector.dispatch('mouseup', {coo: xymouse})
+                }
+            }
+
            if (e.type === "mouseout" || e.type === "touchend" || e.type === "touchcancel") {
                if (e.type === "mouseout" || e.type === "touchcancel") {
                    if (view.mode === View.SELECT) {
@@ -912,25 +960,14 @@ export let View = (function () {
                } 
            }

-            if (view.mode == View.TOOL_SIMBAD_POINTER) {
-                // call Simbad pointer or Planetary features
-                GenericPointer(view, e);
+            if (view.rightClick) {
+                if (showContextMenu) {
+                    view.aladin.contextMenu && view.aladin.contextMenu.show({e});
+                }

-                return; // when in TOOL_SIMBAD_POINTER mode, we do not call the listeners
-            }
+                view.rightClick = false;

-            if (view.mode == View.TOOL_COLOR_PICKER) {
-                Utils.copy2Clipboard(view.colorPickerTool.probedValue)
-                    .then(() => {
-                        if (view.aladin.statusBar) {
-                            view.aladin.statusBar.appendMessage({
-                                message: `${view.colorPickerTool.probedValue} copied into your clipboard`,
-                                duration: 1500,
-                                type: 'info'
-                            })
-                        }
-                    })
-                return; // listeners are not called
+                return;
            }

            // popup to show ?
@@ -950,7 +987,6 @@ export let View = (function () {
                }
            }

-            // call listener of 'click' event
            var onClickFunction = view.aladin.callbacksByEventName['click'];
            if (typeof onClickFunction === 'function') {
                var pos = view.aladin.pix2world(xymouse.x, xymouse.y, "icrs");
@@ -959,16 +995,14 @@ export let View = (function () {
                }
            }

-            // TODO : remplacer par mecanisme de listeners
-            // on avertit les catalogues progressifs
-            view.refreshProgressiveCats();
-
-            //view.requestRedraw();
-            view.wasm.releaseLeftButtonMouse();
-
            if (view.mode === View.SELECT && e.type === "click") {
                view.selector.dispatch('click', {coo: xymouse})
            }
+
+            // TODO : remplacer par mecanisme de listeners
+            // on avertit les catalogues progressifs
+            view.refreshProgressiveCats();
+            view.wasm.releaseLeftButtonMouse();
        });

        var lastHoveredObject; // save last object hovered by mouse
@@ -1011,6 +1045,7 @@ export let View = (function () {
            view.colorPickerTool.domElement.style.left = `${xymouse.x}px`;
            view.colorPickerTool.domElement.style.top = `${xymouse.y}px`;
        }
+
        Utils.on(view.catalogCanvas, "mousemove touchmove", function (e) {
            e.preventDefault();

@@ -1348,8 +1383,6 @@ export let View = (function () {
        };
    };

-    View.FPS_INTERVAL = 1000 / 140;
-
    /**
     * redraw the whole view
     */
@@ -1376,8 +1409,6 @@ export let View = (function () {
            this.drawAllOverlays();
        }
        this.needRedraw = false;
-
-        //this.then = now % View.FPS_INTERVAL;
    };

    View.prototype.drawAllOverlays = function () {
@@ -1747,6 +1778,7 @@ export let View = (function () {
        } else {
            // it exists
            alreadyPresentImageLayer = this.imageLayers.get(layerName);
+
            // Notify that this image layer has been replaced by the wasm part
            if (alreadyPresentImageLayer && alreadyPresentImageLayer.added === true) {
                ALEvent.HIPS_LAYER_REMOVED.dispatchedTo(this.aladinDiv, { layer: alreadyPresentImageLayer });
@@ -1761,9 +1793,9 @@ export let View = (function () {
        this.imageLayers.set(layerName, imageLayer);

        // select the layer if he is on top
-        if (idxOverlayLayer == -1) {
+        //if (idxOverlayLayer == -1) {
            this.selectLayer(layerName);
-        }
+        //}

        ALEvent.HIPS_LAYER_ADDED.dispatchedTo(this.aladinDiv, { layer: imageLayer });
    }
--- a/src/js/events/ALEvent.js
+++ b/src/js/events/ALEvent.js
@@ -71,7 +71,7 @@ export class ALEvent {
  static SAMP_CONNECTED  = new ALEvent("AL:samp.connected");
  static SAMP_DISCONNECTED  = new ALEvent("AL:samp.disconnected");

-  static CANVAS_EVENT  = new ALEvent("AL:Event");
+  static CANVAS_EVENT = new ALEvent("AL:Event");

  static RETICLE_CHANGED = new ALEvent("AL:Reticle.changed")

--- a/src/js/gui/Box/HiPSSettingsBox.js
+++ b/src/js/gui/Box/HiPSSettingsBox.js
@@ -35,13 +35,15 @@ import { Form } from "../Widgets/Form.js";
 import colorIconUrl from '../../../../assets/icons/color.svg';
 import pixelHistIconUrl from '../../../../assets/icons/pixel_histogram.svg';
 import { RadioButton } from "../Widgets/Radio.js";
-
+ import waveOnIconUrl from '../../../../assets/icons/wave-on.svg';
+import { TogglerActionButton } from "../Button/Toggler.js";
 import { Layout } from "../Layout.js";

 export class HiPSSettingsBox extends Box {
     // Constructor
     constructor(aladin, options) {
        let self;
+
        let selector = new RadioButton({
            luminosity: {
                icon: {
@@ -52,7 +54,7 @@ import { Form } from "../Widgets/Form.js";
                tooltip: {content: 'Contrast', position: {direction: 'bottom'}},
                action: (e) => {
                    const content = Layout.vertical({
-                        layout: [self.selector, self.luminositySettingsContent]
+                        layout: [Layout.horizontal([self.selector, self.spectraBtn]), self.luminositySettingsContent]
                    });
                    self.update({content})
                }
@@ -65,7 +67,7 @@ import { Form } from "../Widgets/Form.js";
                },
                tooltip: {content: 'Opacity', position: {direction: 'bottom'}},
                action: (e) => {
-                    const content = Layout.vertical({layout: [self.selector, self.opacitySettingsContent]});
+                    const content = Layout.vertical({layout: [Layout.horizontal([self.selector, self.spectraBtn]), self.opacitySettingsContent]});
                    self.update({content})
                }
            },
@@ -76,7 +78,7 @@ import { Form } from "../Widgets/Form.js";
                },
                tooltip: {content: 'Colormap', position: {direction: 'bottom'}},
                action: (e) => {
-                    const content = Layout.vertical({layout: [self.selector, self.colorSettingsContent]});
+                    const content = Layout.vertical({layout: [Layout.horizontal([self.selector, self.spectraBtn]), self.colorSettingsContent]});
                    self.update({content})
                }
            },
@@ -88,7 +90,7 @@ import { Form } from "../Widgets/Form.js";
                },
                tooltip: {content: 'Cutouts', position: {direction: 'bottom'}},
                action: (e) => {
-                    const content = Layout.vertical({layout: [self.selector, self.pixelSettingsContent]});
+                    const content = Layout.vertical({layout: [Layout.horizontal([self.selector, self.spectraBtn]), self.pixelSettingsContent]});
                    self.update({content})
                }
            },
@@ -328,6 +330,31 @@ import { Form } from "../Widgets/Form.js";

    update(options) {
        if (options.layer) {
+            let self = this;
+            if (options.layer.isSpectralCube()) {
+                let spectraDisplayer = self.aladin.view.spectraDisplayer;
+
+                self.spectraBtn = new TogglerActionButton({
+                    content: 'Spectra',
+                    icon: {
+                        size: 'small',
+                        monochrome: true,
+                        url: waveOnIconUrl
+                    },
+                    tooltip: {content: 'Show/hide spectra', position: {direction: 'bottom'}},
+                    toggled: true,
+                    actionOn: () => {
+                        spectraDisplayer.attachHiPS3D(options.layer)
+                        spectraDisplayer.show()
+                    },
+                    actionOff: () => {
+                        spectraDisplayer.hide()
+                    }
+                });
+                
+                self.update({content: Layout.vertical([Layout.horizontal([self.selector, self.spectraBtn]), self.opacitySettingsContent])})
+            }
+
            this._update(options.layer)
        }

@@ -335,9 +362,12 @@ import { Form } from "../Widgets/Form.js";
    }

    _addListeners() {
+        let self = this;
+
        ALEvent.HIPS_LAYER_CHANGED.listenedBy(this.aladin.aladinDiv, (e) => {
            const hips = e.detail.layer;
            let selectedLayer = this.options.layer;
+
            if (selectedLayer && hips.layer === selectedLayer.layer) {
                this._update(hips)
            }
--- a/src/js/gui/Selector/Colormap.js
+++ b/src/js/gui/Selector/Colormap.js
@@ -1,77 +0,0 @@
-// Copyright 2023 - UDS/CNRS
-// The Aladin Lite program is distributed under the terms
-// of the GNU General Public License version 3.
-//
-// This file is part of Aladin Lite.
-//
-//    Aladin Lite is free software: you can redistribute it and/or modify
-//    it under the terms of the GNU General Public License as published by
-//    the Free Software Foundation, version 3 of the License.
-//
-//    Aladin Lite is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-//    GNU General Public License for more details.
-//
-//    The GNU General Public License is available in COPYING file
-//    along with Aladin Lite.
-//
-
-import { SelectorButton } from "../Widgets/Selector";
-/******************************************************************************
- * Aladin Lite project
- *
- * File gui/Form.js
- *
- * A context menu that shows when the user right clicks, or long touch on touch device
- *
- *
- * Author: Matthieu Baumann[CDS]
- *
- *****************************************************************************/
-
-/* 
-Exemple of layout object
-{
-    {
-        label: "ID",
-        type: "text",
-        value: "the placeholder value...",
-    },
-*/
-
-/*
-options = {cmap1: {imgUrl, change}, cmap2: imgUrl, selected: cmap1}
-*/
-export class CmapSelector extends SelectorButton {
-    /**
-     * Create a layout
-     * @param {{layout: {type: String, name: String, value: Number | String, placeholder: Number | String, change: Function } | {type: String, name: String, checked: Boolean, change: Function } | { type: String, name: String, value: String, options: Array.<String>, change: Function }, cssStyle: Object}} options - Represents the structure of the Tabs
-     * @param {DOMElement} target - The parent element.
-     * @param {String} position - The position of the tabs layout relative to the target.
-     *     For the list of possibilities, see https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
-     */
-    constructor(options, aladin, target, position = 'beforeend') {
-        for (const cmap in options) {
-            if (cmap === 'selected') {
-                continue;
-            }
-
-            options[cmap] = {
-                ...options[cmap],
-                cssStyle: {
-                    //border: 'none',
-                    //borderRadius: '0',
-                    //backgroundColor: 'black',
-                    color: 'black',
-                    width: '4rem',
-                    overflow: 'hidden',
-                    'font-family': 'monospace',
-                },
-                content: cmap,
-                tooltip: {content: cmap, position: {direction: 'left'}},
-            }
-        }
-        super(options, aladin, target, position)
-    }
-}
Author	SHA1	Message	Date
Matthieu Baumann	4d69014c90	fmt	2025-09-09 17:00:41 +02:00
Matthieu Baumann	91192f44f4	run clippy + fmt	2025-09-09 17:00:01 +02:00
Matthieu Baumann	fd3759f405	final commit	2025-09-09 16:56:38 +02:00
Matthieu Baumann	7375930901	fix spectral display bug, add a new display/hide icon for the spectra displayer	2025-09-08 17:53:00 +02:00
Matthieu Baumann	6808cda24e	wip	2025-09-05 14:54:04 +02:00
Matthieu Baumann	23dd78fae3	wip commit: not finished	2025-09-05 14:54:04 +02:00
Matthieu Baumann	025bab43fb	add some button to the spectral tool	2025-09-05 14:54:04 +02:00
Matthieu Baumann	74b551797d	add button to change unit	2025-09-05 14:54:04 +02:00
Matthieu Baumann	ebb5490f0b	compute max/min values per order	2025-09-05 14:54:04 +02:00
Matthieu Baumann	cfbc880611	refac SpectraDisplayer	2025-09-05 14:54:04 +02:00
Matthieu Baumann	60d17eb278	fix fits f64 tiles hips	2025-09-05 14:54:04 +02:00
Matthieu Baumann	a9cee0c248	widget: add spectral line on mouse hovering on the spectra	2025-09-05 14:54:04 +02:00
Matthieu Baumann	6ceba0b5fd	spectra displayer tool: event handling	2025-09-05 14:54:04 +02:00
Matthieu Baumann	e91373f26b	wip spectral tool	2025-09-05 14:54:04 +02:00
bmatthieu3	026e933ce2	wip: optimisation retrieving tiles from blob + imagebitmap when supported by the browser	2025-09-05 14:54:04 +02:00
bmatthieu3	381f9e4109	cargo clippy	2025-09-05 14:54:04 +02:00
bmatthieu3	b2d4883485	fix warnings	2025-09-05 14:54:04 +02:00
bmatthieu3	39095de632	fix bug to retrieve the correct spectra under the mouse	2025-09-05 14:54:04 +02:00
Matthieu Baumann	4668a3fe96	WIP: spectra plot	2025-09-05 14:54:04 +02:00
Matthieu Baumann	c8e1be6d78	get spectra under the cursor	2025-09-05 14:54:04 +02:00
Matthieu Baumann	a0cf64b6a2	increase cubic tile buffer size	2025-09-05 14:54:04 +02:00
Matthieu Baumann	d5b5a650d5	keep the true data of the cubic tiles. This will be needed to get the spectra at a specific sky location	2025-09-05 14:54:04 +02:00
Matthieu Baumann	a43693d296	fix fits parsing and jpg/png cubic tiles	2025-09-05 14:54:04 +02:00
Matthieu Baumann	786532fc5a	code is compiling, HiPSCube is soon to work again. HiPS3D not yet tested/debugged	2025-09-05 14:54:04 +02:00
Matthieu Baumann	aff1b2c618	DO NOT COMPILE. first very basic impl. Need testing.	2025-09-05 14:54:04 +02:00
Matthieu Baumann	7deab1ba9d	refac tile binary heap	2025-09-05 14:54:04 +02:00
Matthieu Baumann	b4a4b318ab	refac querying of HiPS3D tiles and HiPSCube tiles + fix rendering fits	2025-09-05 14:54:04 +02:00
Matthieu Baumann	f9fd9c7d5d	fix the HiPSCube work again	2025-09-05 14:54:04 +02:00
Matthieu Baumann	aca186868f	refact querying ressources (moc, tiles, allsky map)	2025-09-05 14:54:04 +02:00
Matthieu Baumann	4cf48ed7a6	first HiPS3D commit	2025-09-05 14:54:04 +02:00
Matthieu Baumann	c1dcb4b7e6	fix footprints	2025-09-05 14:53:35 +02:00
Matthieu Baumann	a1a8142b32	API doc: share url + send only requestedOptions	2025-09-05 14:49:48 +02:00
Matthieu Baumann	4294976105	final commit	2025-09-04 14:12:51 +02:00
Matthieu Baumann	12947ba9c9	show sources of obscore table	2025-09-04 14:12:51 +02:00
Matthieu Baumann	dd7ae10e0d	new onlyFootprint catalog option. If set to false, pointed sources are also shown with the footprint	2025-09-04 14:12:51 +02:00
Matthieu Baumann	610d22fd23	ellipse intersectBBox very coarse approx	2025-09-04 14:12:51 +02:00
Matthieu Baumann	9558bae25c	refac: compose Footprint inside Source and not the opposite	2025-09-04 14:12:51 +02:00
Matthieu Baumann	dd00d0db27	wip commit	2025-09-04 14:12:51 +02:00