Spaces:
Build error
Build 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> |