Skip to content

Commit

Permalink
allow to overwrite the display of specific fields in MeasurementTable.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmatthieu3
bmatthieu3 committed Sep 14, 2023
1 parent 3ab0d2c commit 2293760
Show file tree
Hide file tree
Showing 10 changed files with 256 additions and 219 deletions.
13 changes: 8 additions & 5 deletions src/css/aladin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@

.aladin-measurement-div {
z-index: 77;
width: 100%;
max-width: 100%;
position: absolute;
bottom: 20px;
font-family: monospace;
Expand All @@ -114,6 +114,7 @@
-ms-overflow-style: none;
scrollbar-width: none;

position: relative;
overflow-y: scroll;
overscroll-behavior-x: none;
background-color: rgba(255, 255, 255, 0.9);
Expand Down Expand Up @@ -148,6 +149,7 @@

.aladin-measurement-div table thead {
position: sticky;
width: 100%;
top: 0;
background-color: #fff;
color: #000;
Expand Down Expand Up @@ -177,7 +179,7 @@
.aladin-measurement-div table td .aladin-href-td-container {
border: 1px solid #d2d2d2;
border-radius: 3px;
padding: 0.6em;
padding: 0.4em;

white-space: nowrap;
overflow: hidden;
Expand All @@ -198,8 +200,9 @@
}
80%,
100% {
transform: translateX(-100%);
left: 100%;
/* the max width is 150px and a padding of 0.8em is added for href link */
transform: translateX(calc(-100% + 150px - 0.8em));
left: calc(100% - 150px + 0.8em);
}
}

Expand Down Expand Up @@ -993,7 +996,7 @@ canvas {

/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 100;
z-index: 10000;
}

/* Show the tooltip text when you mouse over the tooltip container */
Expand Down
15 changes: 6 additions & 9 deletions src/js/A.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,18 +170,16 @@ A.MOCFromJSON = function (jsonMOC, options) {
A.catalogFromURL = function (url, options, successCallback, errorCallback, useProxy) {
var catalog = A.catalog(options);

const processVOTable = function (sources, footprints, fields) {
const processVOTable = function (table) {
console.log(table);
let {sources, footprints, fields, type} = table;
catalog.setFields(fields);

if (catalog.isObsCore()) {
// The fields corresponds to obscore ones
// Set the name of the catalog to be ObsCore:<catalog name>
catalog.name = "ObsCore:" + url;
if (type != 'sources') {
catalog.name = type + ':' + url;
}

// Even if the votable is not a proper ObsCore one, try to see if specific columns are given
// e.g. access_format and access_url
ObsCore.handleActions(catalog);
console.log(type)

catalog.addFootprints(footprints)
catalog.addSources(sources);
Expand All @@ -205,7 +203,6 @@ A.catalogFromURL = function (url, options, successCallback, errorCallback, usePr
url,
processVOTable,
() => {
console.log("error cors")
Catalog.parseVOTable(
url,
processVOTable,
Expand Down
34 changes: 25 additions & 9 deletions src/js/Catalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { Coo } from "./libs/astro/coo.js";
import { VOTable } from "./vo/VOTable.js";
import { ALEvent } from "./events/ALEvent.js";
import { Footprint } from "./Footprint.js";
import { ObsCore } from "./vo/ObsCore.js";
import A from "./A.js";

import $ from 'jquery';
Expand Down Expand Up @@ -64,7 +65,7 @@ export let Catalog = (function() {
// allows for filtering of sources
this.filterFn = options.filter || undefined; // TODO: do the same for catalog

this.fieldsClickedActions = {}; // callbacks when the user clicks on a cell in the measurement table associated
this.showFieldCallback = {}; // callbacks when the user clicks on a cell in the measurement table associated
this.fields = undefined;

this.indexationNorder = 5; // à quel niveau indexe-t-on les sources
Expand Down Expand Up @@ -273,6 +274,8 @@ export let Catalog = (function() {
fields.forEach((field) => {
let key = field.name ? field.name : field.id;

key = key.split(' ').join('_')

let nameField;
if (fieldIdx == raFieldIdx) {
nameField = 'ra';
Expand All @@ -282,6 +285,7 @@ export let Catalog = (function() {
nameField = key;
}

// remove the space character
parsedFields[nameField] = {
name: key,
idx: fieldIdx,
Expand All @@ -299,7 +303,18 @@ export let Catalog = (function() {
VOTable.parse(
url,
(rsc) => {
let { fields, rows } = VOTable.parseTableRsc(rsc, raField, decField)
let { fields, rows } = VOTable.parseTableRsc(rsc)
let type;
try {
fields = ObsCore.parseFields(fields);
//fields.subtype = "ObsCore";
type = 'ObsCore';
} catch(e) {
// It is not an ObsCore table
fields = Catalog.parseFields(fields, raField, decField);
type = 'sources';
}

let sources = [];
let footprints = [];

Expand Down Expand Up @@ -356,7 +371,12 @@ export let Catalog = (function() {
})

if (successCallback) {
successCallback(sources, footprints, fields);
successCallback({
sources: sources,
footprints: footprints,
fields: fields,
type: type
});
}
},
errorCallback,
Expand Down Expand Up @@ -445,12 +465,8 @@ export let Catalog = (function() {
};

/// This add a callback when the user clicks on the field column in the measurementTable
Catalog.prototype.addFieldClickCallback = function(field, callback) {
this.fieldsClickedActions[field] = callback;
};

Catalog.prototype.isObsCore = function() {
return this.fields && this.fields.subtype === "ObsCore";
Catalog.prototype.addShowFieldCallback = function(field, callback) {
this.showFieldCallback[field] = callback;
};

// API
Expand Down
78 changes: 31 additions & 47 deletions src/js/MeasurementTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
*****************************************************************************/

import { Color } from "./Color.js"
import { ActionButton } from "./gui/widgets/ActionButton.js";

export let MeasurementTable = (function() {

Expand All @@ -45,60 +46,44 @@ export let MeasurementTable = (function() {
aladinLiteDiv.appendChild(this.element);
}

MeasurementTable.prototype.updateRows = function() {
MeasurementTable.prototype.updateTableBody = function() {
let tbody = this.element.querySelector('tbody');

tbody.innerHTML = "";
tbody.innerHTML = '';

let table = this.tables[this.curTableIdx];

let result = '';
table["rows"].forEach((row) => {
result += '<tr>'
let trEl = document.createElement('tr');

for (let key in row.data) {
// check the type here
let val = row.data[key] || '--';

if (val instanceof Element) {
val = val.outerHTML;
}

result += '<td class="' + key + '">'

try {
let url = new URL(val);
let link = '<div class="aladin-href-td-container"><a href=' + url + ' target="_blank">' + url + '</a></div>';
result += link;
} catch(e) {
result += val
let tdEl = document.createElement('td');
tdEl.classList.add(key);

if (table.showCallback && table.showCallback[key]) {
let showFieldCallback = table.showCallback[key];

let el = showFieldCallback(row.data);
if (el instanceof Element) {
tdEl.appendChild(el);
} else {
tdEl.innerHTML = el;
}
} else {
let val = row.data[key] || '--';
tdEl.innerText = val;
}

result += '</td>'
trEl.appendChild(tdEl);
}
result += '</tr>';
});

tbody.innerHTML = result;

if (table["fieldsClickedActions"]) {
for (let key in table["fieldsClickedActions"]) {
tbody.querySelectorAll("." + key).forEach(function(e, index) {
e.addEventListener('click', (e) => {
let callback = table["fieldsClickedActions"][key];
let fieldClickedVal = table["rows"][index].data[key];
if (fieldClickedVal && fieldClickedVal !== '--') {
callback(table["rows"][index].data)
}

e.preventDefault();
}, false)
})
}
}
tbody.appendChild(trEl);
});
}

// show measurement associated with a given source
MeasurementTable.prototype.showMeasurement = function(tables, options) {
MeasurementTable.prototype.showMeasurement = function(tables) {
if (tables.length === 0) {
return;
}
Expand Down Expand Up @@ -126,12 +111,11 @@ export let MeasurementTable = (function() {
const thead = MeasurementTable.createTableHeader(table);
// table body creation
const tbody = document.createElement('tbody');

tableElement.appendChild(thead);
tableElement.appendChild(tbody);
this.element.appendChild(tableElement);

this.updateRows();
this.element.appendChild(tableElement);
this.updateTableBody();

this.show();
}
Expand All @@ -154,8 +138,6 @@ export let MeasurementTable = (function() {
tabButtonElement.style.whiteSpace = 'nowrap';
tabButtonElement.style.maxWidth = '20%';

tabButtonElement

tabButtonElement.addEventListener(
'click',
() => {
Expand All @@ -168,7 +150,7 @@ export let MeasurementTable = (function() {
// replace the old header with the one of the current table
thead.parentNode.replaceChild(MeasurementTable.createTableHeader(table), thead);

self.updateRows()
self.updateTableBody()
}
,false
);
Expand All @@ -194,9 +176,11 @@ export let MeasurementTable = (function() {
var content = '<tr>';

for (let [_, field] of Object.entries(table["fields"])) {
content += '<th>' + field.name + '</th>';
if (field.name) {
content += '<th>' + field.name + '</th>';
}
}
content += '</thead>';
content += '</tr>';

theadElement.innerHTML = content;

Expand Down
22 changes: 11 additions & 11 deletions src/js/Source.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@
*
*****************************************************************************/

import { ActionButton } from "./gui/widgets/ActionButton";
import { Datalink } from "./vo/Datalink";
import { Utils } from "./Utils";
import { ObsCore } from "./vo/ObsCore";

export let Source = (function() {
// constructor
let Source = function(ra, dec, data, options) {
Expand Down Expand Up @@ -101,27 +106,22 @@ export let Source = (function() {
if (this.catalog && this.catalog.onClick) {
var view = this.catalog.view;

if (this.catalog.onClick=='showTable') {
if (this.catalog.onClick == 'showTable') {
this.select();

view.aladin.measurementTable.hide();

let singleSourceTable = {
'rows': [this],
'fields': this.catalog.fields,
'fieldsClickedActions': this.catalog.fieldsClickedActions,
'showCallback': ObsCore.SHOW_CALLBACKS(view.aladin),
'name': this.catalog.name,
'color': this.catalog.color
};

let options = {};
//if (this.catalog.isObsCore && this.catalog.isObsCore()) {
// If the source is obscore, save the table state inside the measurement table
// This is used to go back from a possible datalink table to the obscore one
options["save"] = true;
//}
view.aladin.measurementTable.hide();
view.aladin.measurementTable.showMeasurement([singleSourceTable], options);
view.aladin.measurementTable.showMeasurement([singleSourceTable]);
}
else if (this.catalog.onClick=='showPopup') {
else if (this.catalog.onClick == 'showPopup') {

view.popup.setTitle('<br><br>');
var m = '<div class="aladin-marker-measurement">';
Expand Down
Loading

0 comments on commit 2293760

Please sign in to comment.