Spaces:
Runtime error
Runtime error
File size: 6,651 Bytes
fcc16aa |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 |
<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> |