taquynhnga's picture
lfs track pickle & json & csv
18f2f54
raw
history blame
No virus
6.65 kB
<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>