diff --git a/MINDFulPluto/src/static/html/DashboardIndex.html b/MINDFulPluto/src/static/html/DashboardIndex.html new file mode 100644 index 0000000..0f09c09 --- /dev/null +++ b/MINDFulPluto/src/static/html/DashboardIndex.html @@ -0,0 +1,387 @@ + +
+ +
+ +
+
+
+
+ + MINDFulPlutoGUI v0.1.3 + +
+ +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+ +
+ + +
+
+
+
+ Intent Creation +
+
+
+
+ +
+ +
+ +
+
+
+
+ +
+ +
+ +
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ Drawing +
+
+
+
+ +
+ +
+ +
+
+
+
+ +
+ +
+ +
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/data/scripts/GetViewportSize.js b/MINDFulPluto/src/static/scripts/GetViewportSize.js similarity index 97% rename from data/scripts/GetViewportSize.js rename to MINDFulPluto/src/static/scripts/GetViewportSize.js index 9f68e40..3e20b90 100644 --- a/data/scripts/GetViewportSize.js +++ b/MINDFulPluto/src/static/scripts/GetViewportSize.js @@ -1,6 +1,6 @@ function getViewportSize() { - var viewportWidth; - var viewportHeight; + let viewportWidth; + let viewportHeight; // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight if (typeof window.innerWidth != 'undefined') { viewportWidth = window.innerWidth, diff --git a/MINDFulPluto/src/static/scripts/Init.js b/MINDFulPluto/src/static/scripts/Init.js new file mode 100644 index 0000000..a7c24d5 --- /dev/null +++ b/MINDFulPluto/src/static/scripts/Init.js @@ -0,0 +1,36 @@ +function initJS() { + tsparticlesWrapper(); + reformatNotebook(); + + updateButtonAvailabilities(); + sendIntentCommand("update_ui"); +} + +async function waitTillPageLoad() { + // while (document.readyState !== "complete") { + // await new Promise(resolve => setTimeout(resolve, 100)); + // console.log(document.readyState); + // } + + while (true) { + try { + add_toast_to_div("MINDFulPluto.jl", "Page loaded."); + + //get toast div + let toastContainer = document.getElementById("toast_container"); + //remove all children + while (toastContainer.firstChild) { + toastContainer.removeChild(toastContainer.firstChild); + } + break; + } + catch (e) { + await new Promise(resolve => setTimeout(resolve, 1000)); + console.log(document.readyState); + } + + } + + initJS(); +} +waitTillPageLoad(); diff --git a/data/scripts/IntentCommands.js b/MINDFulPluto/src/static/scripts/IntentCommands.js similarity index 76% rename from data/scripts/IntentCommands.js rename to MINDFulPluto/src/static/scripts/IntentCommands.js index 8d29f7c..ac9b1c3 100644 --- a/data/scripts/IntentCommands.js +++ b/MINDFulPluto/src/static/scripts/IntentCommands.js @@ -11,7 +11,6 @@ function createIntent() { function updateDomainList() { const topology = document.querySelector("#topology_select").value; - sendIntentCommand(`update_domain_list ${topology}`) } @@ -36,4 +35,19 @@ function updateDomainListDrawing() { const plottingType = document.querySelector("#plot_selection_select").value; sendIntentCommand(`update_domain_list_drawing ${intent_index} ${plottingType}`) +} + +function removePlot() { + const position = document.querySelector("#wanted_pos_select").value; + console.log(position) + // Find all codeFolded elements + const plotDivs = document.querySelectorAll(".code_folded"); + console.log(plotDivs); + // Find the position-th plotDiv (index 2+3) + const plotDiv = plotDivs[parseInt(position) + 1]; + console.log(plotDiv); + // Find rich_output + const plutoShoulder = plotDiv.querySelector(".rich_output"); + // Remove it + plutoShoulder.remove(); } \ No newline at end of file diff --git a/data/scripts/SwitchViews.js b/MINDFulPluto/src/static/scripts/SwitchViews.js similarity index 51% rename from data/scripts/SwitchViews.js rename to MINDFulPluto/src/static/scripts/SwitchViews.js index bb88f0a..423f5c4 100644 --- a/data/scripts/SwitchViews.js +++ b/MINDFulPluto/src/static/scripts/SwitchViews.js @@ -164,4 +164,158 @@ function setDevmodeCellStyle() { p_nb.style.marginLeft = '20vw'; p_nb.style.marginRight = '-25vw'; p_nb.style.backgroundColor = 'transparent'; +} + +function reformatNotebook() { + //find body + let body = document.querySelector("body"); + //set overflow hidden + body.style.overflow = "hidden"; + + + //find
+ let main = document.querySelector("main"); + + //set main style to max-width 100% + main.style.maxWidth = "100%"; + //set main color to darkslategray + + //find rich-output class and remove backgroundColor + document.querySelectorAll(".rich_output").forEach((cell, i) => { + cell.style.background = "transparent"; + }); + + //remove header + document.querySelector("header").style.display = "none"; + + //remove footer + document.querySelector("footer").style.display = "none"; + + + //place first cell ath the top and 2nd cell at the bottom + document.querySelectorAll(".code_folded ").forEach((cell, i) => { + if (i == 0) { + cell.style.display = "none"; + } + else if (i == 1) { + cell.style.position = "absolute"; + cell.style.top = "0"; + cell.style.left = "0"; + cell.style.width = "100%"; + cell.style.margin = "0"; + } + }); + + //hide shown cells + document.querySelectorAll(".show_input").forEach((cell, i) => { + cell.style.display = "none"; + }); + + //hide div with class="helpbox-true hidden " + document.querySelectorAll(".helpbox-true.hidden").forEach((cell, i) => { + cell.style.display = "none"; + }); + + //find title=Drag to move cell + document.querySelectorAll("pluto-shoulder").forEach((cell, i) => { + cell.style.display = "none"; + cell.style.width = "0px"; + }); + + //find tag main and set class to container-fluid + document.getElementsByTagName("main")[0].className = "container"; + //document.getElementsByTagName("main")[0].style += " padding-bottom: 0px;"; + + + //find tag pluto-notebook and set class to row + document.getElementsByTagName("pluto-notebook")[0].className = "row"; + document.getElementsByTagName("pluto-notebook")[0].style = "width: 100vw;"; + document.getElementsByTagName("pluto-notebook")[0].style = "background: rgba(0,0,0,0) !important;"; + document.getElementsByTagName("pluto-notebook")[0].style = "margin-top: 30vh; margin-left:10vw; margin-right:10vw;"; + + //find shown cells and set class to col except for the first one + document.querySelectorAll(".code_folded").forEach((cell, i) => { + if (i > 1) { + cell.className += "col"; + } else { + + } + }); + + + //show all cards + document.querySelectorAll('.card').forEach((card, i) => { + card.style.display = 'block'; + }); + + //hide last 2 cells + let cells = document.querySelectorAll('.show_input '); + cells = Array.prototype.slice.call(cells, -2); + cells.forEach((cell, i) => { + cell.style.display = 'none'; + }); + + document.querySelectorAll('.code_folded').forEach((card, i) => { + //if col in className of card + if (card.className.includes('col')) { + card.style.display = 'none'; + } + }); + + + cells = document.querySelectorAll('.code_folded '); + cells = Array.prototype.slice.call(cells, -2); + + cells.forEach((cell, i) => { + cell.querySelector('.cm-editor').style.background = 'transparent'; + + cell.style.display = 'inline-block'; + cell.style.verticalAlign = 'top'; + cell.style.width = '30vw'; + cell.style.maxWidth = '30vw'; + cell.style.height = '50vh'; + cell.style.margin = '2.5%'; + cell.style.textAlign = 'start'; + + cell.style.background = 'rgba(217, 147, 232, 0.1)'; + cell.style.borderRadius = '16px'; + cell.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.1)'; + + cell.style.padding = '20px 20px 20px 20px'; + + //find element pluto-trafficlight + cell.querySelector('pluto-trafficlight').style.display = 'none'; + + let log_container = cell.querySelector('pluto-logs-container'); + if (log_container != null) { + log_container.style.display = 'transparent'; + } + + //remove pluto-log-icon + let log_icon = cell.querySelector('pluto-log-icon'); + if (log_icon != null) { + log_icon.style.display = 'none'; + } + + //find class=Stdout and change style + let stdout = cell.querySelector('pluto-log-dot') + if (stdout != null) { + stdout.style.background = 'transparent'; + stdout.style.border = '2px solid #FFFFFF'; + } + + let rich_output = cell.querySelector('pluto-output'); + if (rich_output != null) { + rich_output.style.borderRadius = '16px'; + rich_output.style.background = 'black'; + } + + + }); + + let p_nb = document.getElementsByTagName('pluto-notebook')[0]; + p_nb.style.marginTop = '31vh'; + p_nb.style.marginLeft = '20vw'; + p_nb.style.marginRight = '-25vw'; + p_nb.style.backgroundColor = 'transparent'; } \ No newline at end of file diff --git a/data/scripts/TSParticlesConfig.js b/MINDFulPluto/src/static/scripts/TSParticlesConfig.js similarity index 90% rename from data/scripts/TSParticlesConfig.js rename to MINDFulPluto/src/static/scripts/TSParticlesConfig.js index a9b285a..569edc0 100644 --- a/data/scripts/TSParticlesConfig.js +++ b/MINDFulPluto/src/static/scripts/TSParticlesConfig.js @@ -2,7 +2,7 @@ function sleep(time) { return new Promise((resolve) => setTimeout(resolve, time)); } -const load_tsparticles = async () => { +let load_tsparticles = async () => { await loadLinksPreset(tsParticles); await tsParticles.load("tsparticles", { @@ -154,32 +154,37 @@ const load_tsparticles = async () => { }; -const wrapper = async () => { +const tsparticlesWrapper = async () => { + //check if tsParticles div is already there + if (document.getElementById("tsparticles") !== null) { + return; + } + while (true) { try { await load_tsparticles(); break; } catch (e) { - console.log(e); + //console.log(e); if (e instanceof TypeError) { - console.log("TypeError, inserting again!"); + console.log("TypeError, loading tsparticles again!"); - var body = document.getElementsByTagName("body")[0]; + let body = document.getElementsByTagName("body")[0]; //get src of scripts src = []; - for (var i = 0; i < body.getElementsByTagName("script").length; i++) { + for (let i = 0; i < body.getElementsByTagName("script").length; i++) { // if tsparticles in src if (body.getElementsByTagName("script")[i].src.includes("tsparticles")) { body.removeChild(body.getElementsByTagName("script")[i]);; } } - var body = document.querySelector("body"); + body = document.querySelector("body"); - var scripts = ["https://cdn.jsdelivr.net/npm/tsparticles-engine@2/tsparticles.engine.min.js", + let scripts = ["https://cdn.jsdelivr.net/npm/tsparticles-engine@2/tsparticles.engine.min.js", "https://cdn.jsdelivr.net/npm/tsparticles-basic@2/tsparticles.basic.min.js", "https://cdn.jsdelivr.net/npm/tsparticles-interaction-particles-links@2/tsparticles.interaction.particles.links.min.js", "https://cdn.jsdelivr.net/npm/tsparticles-move-base@2/tsparticles.move.base.min.js", @@ -192,7 +197,7 @@ const wrapper = async () => { "https://cdn.jsdelivr.net/npm/tsparticles-preset-links@2/tsparticles.preset.links.min.js"]; scripts.forEach((script, i) => { - var script = document.createElement("script"); + script = document.createElement("script"); script.src = scripts[i]; body.appendChild(script); }); @@ -206,6 +211,4 @@ const wrapper = async () => { } }; -wrapper(); - diff --git a/data/scripts/Toasts.js b/MINDFulPluto/src/static/scripts/Toasts.js similarity index 97% rename from data/scripts/Toasts.js rename to MINDFulPluto/src/static/scripts/Toasts.js index bb84ed0..3921f41 100644 --- a/data/scripts/Toasts.js +++ b/MINDFulPluto/src/static/scripts/Toasts.js @@ -28,7 +28,7 @@ function add_toast_to_div(heading, message) { $(`#${random_id_string}`).on('shown.bs.toast', function() { $(`#${random_id_string} > .progress > .progress-bar`).each(function(i) { // Todo: Create time variable from Toast - var displayTime = $('.toast').attr('data-bs-delay'); + let displayTime = $('.toast').attr('data-bs-delay'); $(this).animate({ width: $(this).attr('aria-valuenow') + '%' }); diff --git a/data/scripts/UpdateCommandCell.js b/MINDFulPluto/src/static/scripts/UpdateCommandCell.js similarity index 100% rename from data/scripts/UpdateCommandCell.js rename to MINDFulPluto/src/static/scripts/UpdateCommandCell.js diff --git a/data/scripts/UpdateIntentTable.js b/MINDFulPluto/src/static/scripts/UpdateIntentTable.js similarity index 74% rename from data/scripts/UpdateIntentTable.js rename to MINDFulPluto/src/static/scripts/UpdateIntentTable.js index c9f072b..81f150e 100644 --- a/data/scripts/UpdateIntentTable.js +++ b/MINDFulPluto/src/static/scripts/UpdateIntentTable.js @@ -94,6 +94,84 @@ function updateIntentTable(intent_names, intent_configs, intent_toplogies, inten } +function updateDomainListJS(domain_names) { + console.log(domain_names) + //find domain list + let domain_lists = document.querySelectorAll(".domain_selection_select"); + + //for each domain list + domain_lists.forEach((domain_list, j) => { + //find out which option was selected in domain_list + let selected_value = domain_list.value; + + + //clear domain list except first option + while (domain_list.options.length > 1) { + domain_list.remove(1); + } + + + //add domains to domain list + + domain_names.forEach((domain, i) => { + let option = document.createElement("option"); + option.value = domain; + option.innerHTML = domain; + //check if domain was selected + if (selected_value != undefined) { + if (selected_value == domain) { + option.selected = true; + } + } + + domain_list.appendChild(option); + + }); + }); + + //reset domain list to first option + domain_lists.forEach((domain_list, j) => { + domain_list.value = domain_list.options[0].value; + }); + + + add_toast_to_div('MINDFulPluto.jl', 'Topology loaded.') +} + +function updateNodeListJS(nodes, nodeNumber) { + console.log(nodes) + //find node list + let node_list = document.querySelector(`.node_selection_select_${nodeNumber}`); + + + //find out which option was selected in node_list + let selected_value = node_list.value; + + + //clear node list except first option + while (node_list.options.length > 1) { + node_list.remove(1); + } + + + //add nodes to node list + + nodes.forEach((node, i) => { + let option = document.createElement("option"); + option.value = node; + option.innerHTML = node; + //check if node was selected + if (selected_value != undefined) { + if (selected_value == node) { + option.selected = true; + } + } + + node_list.appendChild(option); + + }); +} + function updateDomainDrawingList(domains) { const domainDrawingList = document.querySelector("#domain_drawing_select"); @@ -174,10 +252,10 @@ function updateButtonAvailabilities() { domainDrawing.disabled = true; } - //TODO implement Remove button - //disable remove button - document.querySelector("#remove_intent").disabled = true; -} - -//run it initially -updateButtonAvailabilities(); \ No newline at end of file + //if position is selected, enable remove button + if (position.selectedIndex != 0) { + document.querySelector("#remove_plot").disabled = false; + } else { + document.querySelector("#remove_plot").disabled = true; + } +} \ No newline at end of file diff --git a/Manifest.toml b/Manifest.toml index 4d21119..a092b99 100644 --- a/Manifest.toml +++ b/Manifest.toml @@ -1059,11 +1059,11 @@ version = "0.1.0" [[deps.MINDFulPluto]] deps = ["GraphIO", "Graphs", "HypertextLiteral", "Logging", "MINDFul", "MINDFulMakie", "MetaGraphs", "NestedGraphs", "NestedGraphsIO", "Pluto", "PlutoUI", "PrecompileTools", "Revise", "Unitful", "WGLMakie"] -git-tree-sha1 = "4b3960ff2acccce6e2fbc32e6a9c538572033bd4" +git-tree-sha1 = "0c3b025fc10b060f0e1017da2d117558fd66db80" repo-rev = "main" repo-url = "https://github.com/UniStuttgart-IKR/MINDFulPluto.jl" uuid = "2169b6f5-785b-460d-ad6a-2192ac02d426" -version = "0.1.2" +version = "0.1.3" [[deps.MKL_jll]] deps = ["Artifacts", "IntelOpenMP_jll", "JLLWrappers", "LazyArtifacts", "Libdl"] diff --git a/plutodash.jl b/plutodash.jl index 28ce018..1a6d4a7 100644 --- a/plutodash.jl +++ b/plutodash.jl @@ -21,28 +21,7 @@ using Pkg Pkg.activate(".") # ╔═╡ 247ea030-8bd4-11ee-1923-2914682ad01e -using Revise - -# ╔═╡ f22fce0f-bc83-4903-9597-c8ae00e8c8e7 -using WGLMakie - -# ╔═╡ eb0ca9a4-7d10-4f77-ac7d-30d845bbfba4 -using PlutoUI - -# ╔═╡ 8024c5f9-bfe8-4fae-a6e1-0364b5688950 -using HypertextLiteral - -# ╔═╡ e6a036b2-a202-40b8-ba97-b664d148b770 -using MINDFulPluto - -# ╔═╡ 957302ee-001b-4850-a89f-7ee256457860 -MINDFulPluto.insert_bootstrap() - -# ╔═╡ 68010739-8e28-44fe-b75d-2c9f9498b2a3 -begin - MINDFulPluto.init() - nothing -end +using Revise, WGLMakie, PlutoUI, HypertextLiteral, MINDFulPluto # ╔═╡ 1fbb319e-8a8e-40cc-acc2-58a5a07ac275 begin @@ -97,11 +76,8 @@ end # ╔═╡ 1921d610-5308-4c4f-8a2b-54a067024701 MINDFulPluto.handle_command(intent_command) -# ╔═╡ aa5dbee4-f5eb-4889-a0d5-8b9014570409 -MINDFulPluto.resize_cells() - # ╔═╡ 4838aca7-d253-42a7-9eb1-d3a74040d4af -MINDFulPluto.update_width_devving() +#MINDFulPluto.update_width_devving() # ╔═╡ 1f562bd9-17fe-49cb-83d0-11480eb4afca MINDFulPluto.insert_scripts() @@ -116,12 +92,6 @@ MINDFulPluto.draw_args # ╠═5145f6b7-ddb7-45ac-a3c7-fb30dc364f15 # ╟─0c8710c0-bdd0-46a0-9e0a-76565e074430 # ╠═247ea030-8bd4-11ee-1923-2914682ad01e -# ╠═f22fce0f-bc83-4903-9597-c8ae00e8c8e7 -# ╠═eb0ca9a4-7d10-4f77-ac7d-30d845bbfba4 -# ╠═8024c5f9-bfe8-4fae-a6e1-0364b5688950 -# ╠═e6a036b2-a202-40b8-ba97-b664d148b770 -# ╠═957302ee-001b-4850-a89f-7ee256457860 -# ╠═68010739-8e28-44fe-b75d-2c9f9498b2a3 # ╟─1fbb319e-8a8e-40cc-acc2-58a5a07ac275 # ╟─36ded27e-079a-4bed-9d94-abd6314ddca8 # ╟─dcad27db-f258-4ac8-a17b-21397933a3a1 @@ -129,7 +99,6 @@ MINDFulPluto.draw_args # ╠═01e839e5-8cb4-4402-a5a3-ff2fdc89c035 # ╠═00af9143-eebf-4d20-9ab2-5038070efc66 # ╠═1921d610-5308-4c4f-8a2b-54a067024701 -# ╠═aa5dbee4-f5eb-4889-a0d5-8b9014570409 # ╠═4838aca7-d253-42a7-9eb1-d3a74040d4af # ╠═1f562bd9-17fe-49cb-83d0-11480eb4afca # ╠═daceb10a-f60c-4f4f-b2ac-ff8bf68f8c8a