diff --git a/assets/messages.svg b/assets/messages.svg
new file mode 100644
index 0000000..f021e69
--- /dev/null
+++ b/assets/messages.svg
@@ -0,0 +1 @@
+Highlight simulators
-
+
diff --git a/index.js b/index.js
index f48aad0..36a92ec 100644
--- a/index.js
+++ b/index.js
@@ -8,108 +8,114 @@ var TOOL_DESCRIPTIONS = {};
const selected = [];
// If params are null, show a default message
-function showDetails(data, outgoers) {
+function showDetails(data, connected) {
// Show details about the simulator
- const details = document.getElementById("details");
+ const details_top = document.getElementById("details_top");
+ const details_bottom = document.getElementById("details_bottom");
// Basic description
if (data === null) {
- details.innerHTML = "Using this resource ";
- details.innerHTML += "";
- details.innerHTML += "Use the 'Toggle Filters' button to activate the simulation engine filter. ";
- details.innerHTML += "Select what simulation engines you would like to show in the graph. ";
- details.innerHTML += "Select a node/edge to see its ecosystem in the graph. ";
- details.innerHTML += "Double click/tap on a node/edge to see details of the tool. ";
- details.innerHTML += "Click outside to unselect nodes. ";
- details.innerHTML += " ";
- details.innerHTML += "Contributing";
- details.innerHTML += ` Contributions are welcome! If you have anything to add or correct in the data,
+ details_top.innerHTML = "
Using this resource ";
+ details_top.innerHTML += "";
+ details_top.innerHTML += "Use the 'Toggle Filters' button to activate the simulation engine filter. ";
+ details_top.innerHTML += "Select what simulation engines you would like to show in the graph. ";
+ details_top.innerHTML += "Select a node/edge to see its ecosystem in the graph. ";
+ details_top.innerHTML += "Double click/tap on a node/edge to see details of the tool. ";
+ details_top.innerHTML += "Click outside to unselect nodes. ";
+ details_top.innerHTML += " ";
+ details_top.innerHTML += "Contributing";
+ details_top.innerHTML += ` Contributions are welcome! If you have anything to add or correct in the data,
please follow the link at the end of the tool's details view to edit the data on GitHub.
You can also open an issue on the GitHub repository .
`;
- details.innerHTML += "List of simulators";
- details.innerHTML += "";
+ details_bottom.innerHTML = "
";
+ details_bottom.innerHTML += "
List of simulators";
for (const sim of SIMULATORS) {
const quoted_sim = `[id='${sim}']`;
- details.innerHTML += `${TOOL_DESCRIPTIONS[sim].short_name} `;
+ details_bottom.innerHTML += `${TOOL_DESCRIPTIONS[sim].short_name} `;
}
- details.innerHTML += " ";
-
+ details_bottom.innerHTML += "
-
${data["full_name"]}
-
-
-
-
-
${data["full_name"]} `;
- }
- details.innerHTML += " " + data["description"] + "
";
+ details_top.innerHTML = "";
+ details_bottom.innerHTML = "";
+ let description = document.createElement("div");
+ if (data["features"].includes("simulator")) {
+ const quoted_sim = `[id='${data.id}']`;
+ description.innerHTML = `
+
${data["full_name"]}
+
+
+
+
+
${data["full_name"]} `;
}
+ description.innerHTML += "" + data["description"] + "
";
// Relations
- if (outgoers !== null) {
- if (outgoers.length > 0) {
- details.innerHTML += "Relations ";
+ if (connected !== null) {
+ if (connected.length > 0) {
+ description.innerHTML += "Relations ";
const list = document.createElement("ul");
- for (let edge of outgoers) {
+ for (let edge of connected) {
+ if (edge["source"] === "simulators") {
+ continue;
+ }
const listItem = document.createElement("li");
const targetLink = document.createElement("a");
- // targetLink.href = "#";
- // targetLink.addEventListener("click",function(e) { node.unselect(); edge.target().select(); });
- targetLink.innerHTML = edge["target"];
- const label = document.createElement("i");
+ targetLink.href = "#";
+ if (edge["type"] === "outgoing") {
+ targetId = edge["target"];
+ } else {
+ targetId = edge["source"];
+ }
+ targetLink.addEventListener("click",function(e) {
+ console.log("Clicked on " + targetLink.innerHTML);
+ cy.nodes("[id='" + data.id + "']").unselect();
+ cy.nodes("[id='" + targetLink.innerHTML + "']").select();
+ });
+ targetLink.innerHTML = targetId;
+ const simName = document.createElement("i");
+ simName.innerHTML = data["short_name"];
+ const label = document.createElement("span");
label.innerHTML = " " + edge["label"] + " ";
- listItem.appendChild(label);
- listItem.appendChild(targetLink);
-
+ if (edge["type"] === "outgoing") {
+ listItem.append(simName);
+ listItem.append(label);
+ listItem.appendChild(targetLink);
+ } else {
+ listItem.appendChild(targetLink);
+ listItem.append(label);
+ listItem.append(simName);
+ }
list.appendChild(listItem);
}
- details.appendChild(list);
+ description.appendChild(list);
}
+ details_top.appendChild(description);
// URLs
link_heading = document.createElement("h3");
link_heading.innerHTML = "Links";
- details.append(link_heading);
- if (data["urls"] !== undefined) {
- for (let [text, url] of Object.entries(data["urls"])) {
- details.appendChild(urlButton(text, url));
+ let tool_links = data["urls"];
+ details_bottom.appendChild(link_heading);
+ for (let row_idx=0; row_idx < BUTTON_ROWS.length; row_idx++) {
+ let row = document.createElement("div");
+ row.classList.add("row");
+ // Go through elements in BUTTON_ROWS
+ for (const button_type of BUTTON_ROWS[row_idx]) {
+ let col = document.createElement("div");
+ col.classList.add("col-auto");
+ let button = urlButton(button_type, tool_links[button_type]);
+ col.appendChild(button);
+ row.appendChild(col);
}
+ details_bottom.appendChild(row);
}
- // Back to simulators
- back_p = document.createElement("p");
- back_p.classList.add("mt-3");
- back_button = document.createElement("a");
- back_button.href = "#";
- back_button.innerHTML = `
- Back to simulators`;
- back_button.classList.add("btn", "btn-secondary");
- back_button.onclick = function() { cy.nodes(`[id = '${data.id}']`).unselect(); cy.nodes("#simulators").select(); unhighlightNode(); };
- back_p.appendChild(back_button);
- details.appendChild(back_p);
- // Edit footer
- edit_p = document.createElement("p");
- edit_p.classList.add("mt-3", "text-end");
- edit_link = document.createElement("a");
- edit_link.classList.add("link-secondary");
- edit_link.href = `${REPO_URL}/edit/${GIT_BRANCH}/${DATA_FOLDER}/${data["short_name"].replaceAll(" ", "-")}.yaml`;
- edit_link.innerHTML = "Edit this description on GitHub ";
- edit_link.innerHTML += `
- `;
- edit_link.target = "_blank";
- edit_p.appendChild(edit_link);
- details.appendChild(edit_p);
-
}
// hide filter pane
const filterPane = new bootstrap.Offcanvas('#filter_pane');