mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
const { root, visualization_config, visualization_plugin } = JSON.parse(document.getElementById("app").dataset.incoming);
|
|
|
|
const container = Object.assign(document.createElement("div"), {
|
|
style: `
|
|
font-family: sans-serif;
|
|
max-width: 600px;
|
|
margin: 0rem auto;
|
|
line-height: 1.5;
|
|
font-size: 14px;
|
|
position: relative;
|
|
padding: 1rem;
|
|
background-image: url(${root + visualization_plugin.logo});
|
|
background-size: 10px;
|
|
background-repeat: repeat;
|
|
background-position: center;
|
|
opacity: 0.5;
|
|
`
|
|
});
|
|
|
|
const content = Object.assign(document.createElement("div"), {
|
|
style: "position: relative; z-index: 1; background: rgba(255, 255, 255, 0.9); padding: 1rem; border-radius: 0.5rem; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all;"
|
|
});
|
|
|
|
const dataset = Object.assign(document.createElement("div"), {
|
|
innerText: `You have selected dataset: ${visualization_config.dataset_id}`,
|
|
style: "margin-bottom: 1rem; font-weight: 600;"
|
|
});
|
|
content.appendChild(dataset);
|
|
|
|
Object.entries(visualization_plugin).forEach(([key, value]) => {
|
|
const row = Object.assign(document.createElement("div"), {
|
|
style: "display: flex; margin-bottom: 0.25rem;"
|
|
});
|
|
const spanKey = Object.assign(document.createElement("span"), {
|
|
innerText: key,
|
|
style: "font-weight: 600; width: 150px; flex-shrink: 0;"
|
|
});
|
|
const spanValue = Object.assign(document.createElement("span"), {
|
|
innerText: JSON.stringify(value),
|
|
style: "color: #444;"
|
|
});
|
|
row.appendChild(spanKey);
|
|
row.appendChild(spanValue);
|
|
content.appendChild(row);
|
|
});
|
|
|
|
container.appendChild(content);
|
|
document.body.appendChild(container);
|