diff --git a/examples/al-ska-hips-list.html b/examples/al-ska-hips-list.html index 1e922cc6..e6f1061f 100644 --- a/examples/al-ska-hips-list.html +++ b/examples/al-ska-hips-list.html @@ -12,10 +12,12 @@ A.init.then(() => { aladin = A.aladin('#aladin-lite-div', { fullScreen: true, - target: "orion", + target: "centaurus A", fov: 10, projection: 'SIN', showContextMenu: true, + showSimbadPointerControl: true, + expandLayersControl: true, hipsList: [ // High energy (Gamma and X-rays) 'CDS/P/HGPS/Flux', @@ -73,8 +75,8 @@ ] }); - const c1 = A.catalogFromURL('./data/eso.xml', {onClick: 'showTable'}); - aladin.addCatalog(c1); + //const c1 = A.catalogFromURL('./data/eso.xml', {onClick: 'showTable'}); + //aladin.addCatalog(c1); }); diff --git a/src/js/Aladin.js b/src/js/Aladin.js index aa42017b..6c4d43bc 100644 --- a/src/js/Aladin.js +++ b/src/js/Aladin.js @@ -452,22 +452,14 @@ export let Aladin = (function () { } } + console.log('cache', ImageSurvey.cache) + ALEvent.HIPS_LIST_UPDATED.dispatchedTo(this.aladinDiv); } + let HiPSQuery; if (hipsList.length === 0) { - MocServer.getAllHiPSes() - .then((HiPSes) => { - HiPSes.forEach((h) => { - hipsList.push({ - id: h.ID, - name: h.obs_title, - regime: h.obs_regime, - }) - }); - - fillHiPSCache(); - }); + HiPSQuery = MocServer.getAllHiPSes() } else { let IDs = hipsList.map((h) => { if (h instanceof Object) { @@ -477,22 +469,24 @@ export let Aladin = (function () { } }); - MocServer.getHiPSesFromIDs(IDs) - .then((HiPSes) => { - // Erase the HiPSlist with the one completed from the MOCServer - hipsList = []; - HiPSes.forEach((h) => { - hipsList.push({ - id: h.ID, - name: h.obs_title, - regime: h.obs_regime, - }) - }); - - fillHiPSCache(); - }); + HiPSQuery = MocServer.getHiPSesFromIDs(IDs) } + HiPSQuery.then((HiPSes) => { + hipsList = []; + HiPSes.forEach((h) => { + hipsList.push({ + id: h.ID, + name: h.obs_title, + regime: h.obs_regime, + }) + }); + + console.log(hipsList); + + fillHiPSCache(); + }); + this.view.showCatalog(options.showCatalog); // FullScreen toolbar icon diff --git a/src/js/ImageSurvey.js b/src/js/ImageSurvey.js index 4c6774b5..157609f1 100644 --- a/src/js/ImageSurvey.js +++ b/src/js/ImageSurvey.js @@ -378,6 +378,7 @@ export let ImageSurvey = (function () { let colorOpt = Object.fromEntries(Object.entries(this.colorCfg)); let surveyOpt = { + id: self.id, creatorDid: self.creatorDid, name: self.name, url: self.url, diff --git a/src/js/gui/Box/StackBox.js b/src/js/gui/Box/StackBox.js index 8e69d76f..fca82ef2 100644 --- a/src/js/gui/Box/StackBox.js +++ b/src/js/gui/Box/StackBox.js @@ -523,6 +523,10 @@ export class OverlayStackBox extends Box { const hips = e.detail.layer; let ui = self.HiPSui[hips.layer]; + if (!ui) { + return; + } + // change the ui from parameter changes // show button const opacity = hips.getOpacity(); @@ -549,8 +553,6 @@ export class OverlayStackBox extends Box { } } - //console.log(HiPSSearch.HiPSList) - let keys = Object.keys(HiPSSearch.HiPSList) // Change the autocomplete of all the search input text for (var key in this.HiPSui) { @@ -829,8 +831,6 @@ export class OverlayStackBox extends Box { }, }); - let layerClassName = 'a' + layer.layer.replace(/[.\/ ]/g, '') - let btns = [showBtn, settingsBtn]; if (layer.subtype !== 'fits') { @@ -841,16 +841,8 @@ export class OverlayStackBox extends Box { let item = Layout.horizontal({ layout: [ searchInput, - //'
' + (layer.name) + '
', Layout.horizontal(btns) ], - cssStyle: { - display: 'flex', - alignItems: 'center', - listStyle: 'none', - justifyContent: 'space-between', - width: '100%', - } }); layout.push(item); diff --git a/src/js/gui/Input/HiPSSearch.js b/src/js/gui/Input/HiPSSearch.js index 6817ebfd..c3ef83b6 100644 --- a/src/js/gui/Input/HiPSSearch.js +++ b/src/js/gui/Input/HiPSSearch.js @@ -21,6 +21,9 @@ import { Box } from "../Widgets/Box.js"; import { Layout } from "../Layout.js"; import { ActionButton } from "../Widgets/ActionButton.js"; import { ALEvent } from "../../events/ALEvent.js"; +import { Icon } from "../Widgets/Icon.js"; +import infoIconUrl from '../../../../assets/icons/info.svg'; + /****************************************************************************** * Aladin Lite project * @@ -62,6 +65,7 @@ import { ALEvent } from "../../events/ALEvent.js"; *****************************************************************************/ import { Input } from "./../Widgets/Input.js"; +import { Utils } from "../../Utils.ts"; export class HiPSSearch extends Input { static HiPSList = {}; @@ -74,13 +78,31 @@ import { ALEvent } from "../../events/ALEvent.js"; aladin.view.catalogCanvas.addEventListener('click', (e) => { self.el.blur(); }); - + let prevKey = layer.name; + let hips = HiPSSearch.HiPSList[layer.name]; + + let content = [new Icon({ + size: 'medium', + monochrome: true, + url: infoIconUrl, + cssStyle: { + cursor: "help", + }, + })]; + content.push('See more...') + let tooltip = { + content: new Layout({layout: content, orientation: 'horizontal'}), + hoverable: true, + position: { + direction: 'bottom', + } + } super({ name: 'HiPS search', type: 'text', - classList: ['search'], - name: 'survey', + name: 'survey' + Utils.uuidv4(), + tooltip, placeholder: "Survey keywords or url", autocomplete: {options: Object.keys(HiPSSearch.HiPSList)}, title: layer.name, @@ -92,14 +114,14 @@ import { ALEvent } from "../../events/ALEvent.js"; return; } - let image; + let image, hips; // A user can put an url try { image = new URL(key).href; } catch(e) { // Or he can select a HiPS from the list given - let hips = HiPSSearch.HiPSList[key] - //console.log("HIPS", key, hips) + hips = HiPSSearch.HiPSList[key] + if (hips) { image = hips.id || hips.url || undefined; } else { @@ -109,26 +131,23 @@ import { ALEvent } from "../../events/ALEvent.js"; } self.el.blur(); - if (image) { - prevKey = key; - aladin.setOverlayImageLayer(image, layer.layer); + prevKey = image; + // set the layer to the new value + self.layer = aladin.setOverlayImageLayer(image, layer.layer); } - }, - /*input(e) { - let value = e.target.value; - - self.update({value, title: value}) - }*/ + } }, value: layer.name, ...options }) - this.addClass('aladin-HiPS-search') + this.el.classList.add('aladin-HiPS-search', 'search') self = this; this.layer = layer; + console.log(this.el) + this._addEventListeners(aladin); } diff --git a/src/js/gui/Widgets/Input.js b/src/js/gui/Widgets/Input.js index 5307b77a..2a0a616f 100644 --- a/src/js/gui/Widgets/Input.js +++ b/src/js/gui/Widgets/Input.js @@ -130,9 +130,10 @@ export class Input extends DOMElement { datalist.id = 'ticks-' + this.options.name; this.el.setAttribute('list', datalist.id); - if (this.el.querySelector('#' + datalist.id)) { + //console.log(this.el, this.el.querySelector('#' + datalist.id), datalist) + /*if (this.el.querySelector('#' + datalist.id)) { this.el.querySelector('#' + datalist.id).remove() - } + }*/ this.el.appendChild(datalist); this.el.autocomplete = 'off'; diff --git a/src/js/gui/Widgets/Tooltip.js b/src/js/gui/Widgets/Tooltip.js index 012251bc..fd2ba9a9 100644 --- a/src/js/gui/Widgets/Tooltip.js +++ b/src/js/gui/Widgets/Tooltip.js @@ -136,15 +136,17 @@ export class Tooltip extends DOMElement { } if (this.options.content) { - let content = this.options.content; - if (content instanceof DOMElement) { - content.attachTo(tooltipEl) - } else if (content instanceof Element) { - tooltipEl.insertAdjacentElement('beforeend', content); - } else { - let wrapEl = document.createElement('div'); - wrapEl.innerHTML = content; - tooltipEl.insertAdjacentElement('beforeend', wrapEl); + let content = [].concat(this.options.content); + for (var c of content) { + if (c instanceof DOMElement) { + c.attachTo(tooltipEl) + } else if (c instanceof Element) { + tooltipEl.insertAdjacentElement('beforeend', c); + } else { + let wrapEl = document.createElement('div'); + wrapEl.innerHTML = c; + tooltipEl.insertAdjacentElement('beforeend', wrapEl); + } } }