67 lines
2.1 KiB
HTML
67 lines
2.1 KiB
HTML
<head>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<script src="https://unpkg.com/3d-force-graph"></script>
|
|
</head>
|
|
<body>
|
|
<div id="3d-graph"></div>
|
|
<script src="./js/bridge.js"></script>
|
|
<script type="module">
|
|
import { getQueryParam } from './js/utils.js'
|
|
|
|
const apiUrl = getQueryParam('apiUrl')
|
|
const modelId = getQueryParam('modelId')
|
|
const jsonUrl = `${apiUrl}/v1/global_graph/${modelId}`
|
|
|
|
const infoCard = document.createElement('div')
|
|
infoCard.style.position = 'fixed'
|
|
infoCard.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'
|
|
infoCard.style.padding = '8px'
|
|
infoCard.style.borderRadius = '4px'
|
|
infoCard.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)'
|
|
infoCard.style.fontSize = '12px'
|
|
infoCard.style.maxWidth = '200px'
|
|
infoCard.style.display = 'none'
|
|
infoCard.style.zIndex = '1000'
|
|
document.body.appendChild(infoCard)
|
|
|
|
document.addEventListener('mousemove', (event) => {
|
|
infoCard.style.left = `${event.clientX + 10}px`
|
|
infoCard.style.top = `${event.clientY + 10}px`
|
|
})
|
|
|
|
const elem = document.getElementById('3d-graph')
|
|
const Graph = ForceGraph3D()(elem)
|
|
.jsonUrl(jsonUrl)
|
|
.nodeAutoColorBy((node) => node.properties.type || 'default')
|
|
.nodeVal((node) => node.properties.degree)
|
|
.linkWidth((link) => link.properties.weight)
|
|
.onNodeHover((node) => {
|
|
if (node) {
|
|
infoCard.innerHTML = `
|
|
<div style="font-weight: bold; margin-bottom: 4px; color: #333;">
|
|
${node.properties.title}
|
|
</div>
|
|
<div style="color: #666;">
|
|
${node.properties.description}
|
|
</div>`
|
|
infoCard.style.display = 'block'
|
|
} else {
|
|
infoCard.style.display = 'none'
|
|
}
|
|
})
|
|
.onNodeClick((node) => {
|
|
const url = `${apiUrl}/v1/references/${modelId}/entities/${node.properties.human_readable_id}`
|
|
window.api.minApp({
|
|
url,
|
|
windowOptions: {
|
|
title: node.properties.title
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|