gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2026-01-07 19:02:56 -08:00
Code Issues Packages Projects Releases Wiki Activity

add tooltip on hips layers

Browse Source
This commit is contained in:
Matthieu Baumann
2024-04-24 22:04:41 +02:00
parent d765dc9ec2
commit 027a76f2ab
7 changed files with 79 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/al-ska-hips-list.html
View File

@@ -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);
});
</script>
</body>

46
src/js/Aladin.js
View File

@@ -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

1
src/js/ImageSurvey.js
View File

@@ -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,

16
src/js/gui/Box/StackBox.js
View File

@@ -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,
//'<div class="' + layerClassName + '" style="background-color: rgba(0, 0, 0, 0.6); line-height: 1rem; padding: 3px; border-radius: 3px; word-break: break-word;' + (selectedLayer === layer.layer ? 'border: 1px solid white;' : '') + '">' + (layer.name) + '</div>',
Layout.horizontal(btns)
],
cssStyle: {
display: 'flex',
alignItems: 'center',
listStyle: 'none',
justifyContent: 'space-between',
width: '100%',
}
});
layout.push(item);

51
src/js/gui/Input/HiPSSearch.js
View File

@@ -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('<a style="color: white;" href="' + layer.url + '" target="_blank">See more...</a>')
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);
}

5
src/js/gui/Widgets/Input.js
View File

@@ -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';

20
src/js/gui/Widgets/Tooltip.js
View File

@@ -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);
}
}
}