Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <style type="text/css"> | |
| </style> | |
| </head> | |
| <!-- | |
| ---------------------------------------------------- | |
| Your custom static HTML goes in the body: | |
| --> | |
| <body> | |
| </body> | |
| <script type="text/javascript"> | |
| // Helper function to send type and data messages to Streamlit client | |
| const SET_COMPONENT_VALUE = "streamlit:setComponentValue" | |
| const RENDER = "streamlit:render" | |
| const COMPONENT_READY = "streamlit:componentReady" | |
| const SET_FRAME_HEIGHT = "streamlit:setFrameHeight" | |
| var HIGHTLIGHT_COLOR; | |
| var original_colors; | |
| function _sendMessage(type, data) { | |
| // copy data into object | |
| var outboundData = Object.assign({ | |
| isStreamlitMessage: true, | |
| type: type, | |
| }, data) | |
| if (type == SET_COMPONENT_VALUE) { | |
| console.log("_sendMessage data: ", SET_COMPONENT_VALUE) | |
| // console.log("_sendMessage data: " + JSON.stringify(data)) | |
| // console.log("_sendMessage outboundData: " + JSON.stringify(outboundData)) | |
| } | |
| window.parent.postMessage(outboundData, "*") | |
| } | |
| function initialize(pipeline) { | |
| // Hook Streamlit's message events into a simple dispatcher of pipeline handlers | |
| window.addEventListener("message", (event) => { | |
| if (event.data.type == RENDER) { | |
| // The event.data.args dict holds any JSON-serializable value | |
| // sent from the Streamlit client. It is already deserialized. | |
| pipeline.forEach(handler => { | |
| handler(event.data.args) | |
| }) | |
| } | |
| }) | |
| _sendMessage(COMPONENT_READY, { apiVersion: 1 }); | |
| // Component should be mounted by Streamlit in an iframe, so try to autoset the iframe height. | |
| window.addEventListener("load", () => { | |
| window.setTimeout(function () { | |
| setFrameHeight(document.documentElement.clientHeight) | |
| }, 0) | |
| }) | |
| // Optionally, if auto-height computation fails, you can manually set it | |
| // (uncomment below) | |
| setFrameHeight(0) | |
| } | |
| function setFrameHeight(height) { | |
| _sendMessage(SET_FRAME_HEIGHT, { height: height }) | |
| } | |
| // The `data` argument can be any JSON-serializable value. | |
| function notifyHost(data) { | |
| _sendMessage(SET_COMPONENT_VALUE, data) | |
| } | |
| function changeButtonColor(button, color) { | |
| pol = button.querySelectorAll('polygon')[0] | |
| pol.setAttribute('fill', color) | |
| pol.setAttribute('stroke', color) | |
| } | |
| function getButtonColor(button) { | |
| pol = button.querySelectorAll('polygon')[0] | |
| return pol.getAttribute('fill') | |
| } | |
| // ---------------------------------------------------- | |
| // Your custom functionality for the component goes here: | |
| function toggle(button) { | |
| group = 'node' | |
| let button_color; | |
| nodes = window.parent.document.getElementsByClassName('node') | |
| console.log("nodes.length = ", nodes.length) | |
| // for (let i = 0; i < nodes.length; i++) { | |
| // console.log(nodes.item(i)) | |
| // } | |
| console.log("selected button ", button, button.getAttribute('class'), button.id) | |
| for (let i = 0; i < nodes.length; i++) { | |
| polygons = nodes.item(i).querySelectorAll('polygon') | |
| if (polygons.length == 0) { | |
| continue | |
| } | |
| if (button.id == nodes.item(i).id & button.getAttribute('class').includes("off")) { | |
| button.setAttribute('class', group + " on") | |
| button_color = original_colors[i] | |
| } else if (button.id == nodes.item(i).id & button.getAttribute('class').includes("on")) { | |
| button.setAttribute('class', group + " off") | |
| button_color = original_colors[i] | |
| } else if (button.id == nodes.item(i).id) { | |
| button.setAttribute('class', group + " on") | |
| button_color = original_colors[i] | |
| } else if (button.id != nodes.item(i).id & nodes.item(i).getAttribute('class').includes("on")) { | |
| nodes.item(i).className = group + " off" | |
| } else { | |
| nodes.item(i).className = group + " off" | |
| } | |
| } | |
| nodes = window.parent.document.getElementsByClassName('node') | |
| actions = [] | |
| for (let i = 0; i < nodes.length; i++) { | |
| polygons = nodes.item(i).querySelectorAll('polygon') | |
| if (polygons.length == 0) { | |
| continue | |
| } | |
| btn = nodes.item(i) | |
| ori_color = original_colors[i] | |
| color = btn.querySelectorAll('polygon')[0].getAttribute('fill') | |
| actions.push({ "action": btn.getAttribute("class").includes("on"), "original_color": ori_color, "color": color}) | |
| } | |
| states = {} | |
| states['choice'] = { | |
| "node_title": button.querySelectorAll("title")[0].innerHTML, | |
| "node_id": button.id, | |
| "state": { | |
| "action": button.getAttribute("class").includes("on"), | |
| "original_color": button_color, | |
| "color": button.querySelectorAll('polygon')[0].getAttribute('fill') | |
| } | |
| } | |
| states["options"] = {"states": actions } | |
| notifyHost({ | |
| value: states, | |
| dataType: "json", | |
| }) | |
| } | |
| // ---------------------------------------------------- | |
| // Here you can customize a pipeline of handlers for | |
| // inbound properties from the Streamlit client app | |
| // Set initial value sent from Streamlit! | |
| function initializeProps_Handler(props) { | |
| HIGHTLIGHT_COLOR = props['hightlight_color'] | |
| original_colors = [] | |
| // nodes = document.getElementsByClassName('node') | |
| nodes = window.parent.document.getElementsByClassName('node') | |
| console.log(nodes) | |
| for (let i = 0; i < nodes.length; i++) { | |
| // color = nodes.item(i).getElementsByTagName('POLYGON')[0].getAttribute("fill") | |
| // nodes.item(i).addEventListener("click", toggle) | |
| polygons = nodes.item(i).querySelectorAll('polygon') | |
| if (polygons.length == 0) { | |
| original_colors.push('none') | |
| continue | |
| } | |
| color = polygons[0].getAttribute("fill") | |
| if (!nodes.item(i).hasAttribute('color')) { | |
| nodes.item(i).setAttribute("color", color) | |
| original_colors.push(color) | |
| } else { | |
| original_colors.push(nodes.item(i).getAttribute("color")) | |
| } | |
| nodes.item(i).addEventListener("click", function (event) {toggle(this)}) | |
| } | |
| // console.log("original colors:", original_colors) | |
| } | |
| // Access values sent from Streamlit! | |
| function dataUpdate_Handler(props) { | |
| console.log('dataUpdate_Handler...........') | |
| let msgLabel = document.getElementById("message_label") | |
| } | |
| // Simply log received data dictionary | |
| function log_Handler(props) { | |
| console.log("Received from Streamlit: " + JSON.stringify(props)) | |
| } | |
| let pipeline = [initializeProps_Handler, dataUpdate_Handler, log_Handler] | |
| // ---------------------------------------------------- | |
| // Finally, initialize component passing in pipeline | |
| initialize(pipeline) | |
| </script> | |
| </html> |