add action when clicking on nodes
This commit is contained in:
Darren Zal
parent
c15f5a0da7
commit
87b396db34
|
|
@ -1,30 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { themeStore } from '../stores'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Firefox doesn't fully support background-clip so the marquee text is cut off half way through the animation
|
|
||||||
*/
|
|
||||||
const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="fixed z-0 lg:z-20 right-0 bottom-0 left-0 h-8 flex items-center motion-reduce:justify-center motion-safe:justify-end bg-base-content overflow-x-hidden"
|
|
||||||
>
|
|
||||||
{#if $themeStore === 'light'}
|
|
||||||
<p
|
|
||||||
class="motion-safe:animate-marquee motion-safe:left-full whitespace-nowrap font-bold text-xxs {isFirefox
|
|
||||||
? 'text-orange-500'
|
|
||||||
: 'text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-300'}"
|
|
||||||
>
|
|
||||||
*** Experimental *** - You are currently previewing Webnative SDK Alpha
|
|
||||||
0.2
|
|
||||||
</p>
|
|
||||||
{:else}
|
|
||||||
<p
|
|
||||||
class="motion-safe:animate-marquee motion-safe:left-full whitespace-nowrap font-bold text-xxs text-[#DD1F13]"
|
|
||||||
>
|
|
||||||
*** Experimental *** - You are currently previewing Webnative SDK Alpha
|
|
||||||
0.2
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,223 +1,247 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import cytoscape from 'cytoscape';
|
import cytoscape from 'cytoscape'
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
|
|
||||||
let cy;
|
let cy
|
||||||
let cyDiv;
|
let cyDiv
|
||||||
|
|
||||||
const createGraph = () => {
|
|
||||||
cy = cytoscape({
|
|
||||||
container: cyDiv,
|
|
||||||
elements: [],
|
|
||||||
style: [],
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
interface INodeData {
|
interface INodeData {
|
||||||
id: string;
|
id: string
|
||||||
}
|
|
||||||
|
|
||||||
interface INode {
|
|
||||||
data: INodeData;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IEdgeData {
|
|
||||||
id: string;
|
|
||||||
source: string;
|
|
||||||
target: string;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IEdge {
|
|
||||||
data: IEdgeData;
|
|
||||||
}
|
|
||||||
|
|
||||||
let knowledgeGraphJson: any = {
|
|
||||||
"entities": [{
|
|
||||||
"label": "Organization",
|
|
||||||
"title": "Neuralink"
|
|
||||||
}, {
|
|
||||||
"label": "Organization",
|
|
||||||
"title": "SpaceX"
|
|
||||||
}, {
|
|
||||||
"label": "Organization",
|
|
||||||
"title": "Pretoria"
|
|
||||||
}, {
|
|
||||||
"label": "Organization",
|
|
||||||
"title": "The Boring Company"
|
|
||||||
}, {
|
|
||||||
"label": "Organization",
|
|
||||||
"title": "University of Pretoria"
|
|
||||||
}, {
|
|
||||||
"label": "Organization",
|
|
||||||
"title": "Stanford University"
|
|
||||||
}, {
|
|
||||||
"label": "Person",
|
|
||||||
"title": "Jeff Bezos"
|
|
||||||
}, {
|
|
||||||
"label": "Organization",
|
|
||||||
"title": "University of Pennsylvania"
|
|
||||||
}, {
|
|
||||||
"label": "Person",
|
|
||||||
"title": "Kimbal Musk"
|
|
||||||
}, {
|
|
||||||
"label": "Organization",
|
|
||||||
"title": "Tesla, Inc."
|
|
||||||
}, {
|
|
||||||
"label": "Person",
|
|
||||||
"title": "Elon Musk"
|
|
||||||
}],
|
|
||||||
"relations": [{
|
|
||||||
"source": "Elon Musk",
|
|
||||||
"target": "Neuralink"
|
|
||||||
}, {
|
|
||||||
"source": "Tesla, Inc.",
|
|
||||||
"target": "Elon Musk",
|
|
||||||
"type": "owned by"
|
|
||||||
}, {
|
|
||||||
"source": "Elon Musk",
|
|
||||||
"target": "University of Pennsylvania",
|
|
||||||
"type": "residence"
|
|
||||||
}, {
|
|
||||||
"source": "Elon Musk",
|
|
||||||
"target": "Tesla, Inc.",
|
|
||||||
"type": "owned by"
|
|
||||||
}, {
|
|
||||||
"source": "The Boring Company",
|
|
||||||
"target": "Tesla, Inc.",
|
|
||||||
"type": "owned by"
|
|
||||||
}, {
|
|
||||||
"source": "Elon Musk",
|
|
||||||
"target": "Kimbal Musk",
|
|
||||||
"type": "sibling"
|
|
||||||
}, {
|
|
||||||
"source": "University of Pennsylvania",
|
|
||||||
"target": "Elon Musk",
|
|
||||||
"type": "residence"
|
|
||||||
}, {
|
|
||||||
"source": "The Boring Company",
|
|
||||||
"target": "Neuralink",
|
|
||||||
"type": "subsidiary"
|
|
||||||
}, {
|
|
||||||
"source": "Elon Musk",
|
|
||||||
"target": "University of Pretoria",
|
|
||||||
"type": "work location"
|
|
||||||
}, {
|
|
||||||
"source": "The Boring Company",
|
|
||||||
"target": "Elon Musk",
|
|
||||||
"type": "owned by"
|
|
||||||
}, {
|
|
||||||
"source": "Kimbal Musk",
|
|
||||||
"target": "Elon Musk",
|
|
||||||
"type": "sibling"
|
|
||||||
}, {
|
|
||||||
"source": "Neuralink",
|
|
||||||
"target": "Elon Musk",
|
|
||||||
"type": "owned by"
|
|
||||||
}, {
|
|
||||||
"source": "Elon Musk",
|
|
||||||
"target": "The Boring Company",
|
|
||||||
"type": "owned by"
|
|
||||||
}, {
|
|
||||||
"source": "Elon Musk",
|
|
||||||
"target": "University of Pennsylvania",
|
|
||||||
"type": "work location"
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
async function fetchData() {
|
|
||||||
const response = await fetch('./data.json');
|
|
||||||
if (response.ok) {
|
|
||||||
knowledgeGraphJson = await response.json();
|
|
||||||
} else {
|
|
||||||
alert(`HTTP-Error: ${response.status}`);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
let nodes: INode[] = [];
|
interface INode {
|
||||||
let edges: IEdge[] = [];
|
data: INodeData
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IEdgeData {
|
||||||
|
id: string
|
||||||
|
source: string
|
||||||
|
target: string
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IEdge {
|
||||||
|
data: IEdgeData
|
||||||
|
}
|
||||||
|
|
||||||
|
let knowledgeGraphJson: any = {
|
||||||
|
entities: [
|
||||||
|
{
|
||||||
|
label: 'Organization',
|
||||||
|
title: 'Neuralink'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Organization',
|
||||||
|
title: 'SpaceX'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Organization',
|
||||||
|
title: 'Pretoria'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Organization',
|
||||||
|
title: 'The Boring Company'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Organization',
|
||||||
|
title: 'University of Pretoria'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Organization',
|
||||||
|
title: 'Stanford University'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Person',
|
||||||
|
title: 'Jeff Bezos'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Organization',
|
||||||
|
title: 'University of Pennsylvania'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Person',
|
||||||
|
title: 'Kimbal Musk'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Organization',
|
||||||
|
title: 'Tesla, Inc.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Person',
|
||||||
|
title: 'Elon Musk'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
relations: [
|
||||||
|
{
|
||||||
|
source: 'Elon Musk',
|
||||||
|
target: 'Neuralink'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'Tesla, Inc.',
|
||||||
|
target: 'Elon Musk',
|
||||||
|
type: 'owned by'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'Elon Musk',
|
||||||
|
target: 'University of Pennsylvania',
|
||||||
|
type: 'residence'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'Elon Musk',
|
||||||
|
target: 'Tesla, Inc.',
|
||||||
|
type: 'owned by'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'The Boring Company',
|
||||||
|
target: 'Tesla, Inc.',
|
||||||
|
type: 'owned by'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'Elon Musk',
|
||||||
|
target: 'Kimbal Musk',
|
||||||
|
type: 'sibling'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'University of Pennsylvania',
|
||||||
|
target: 'Elon Musk',
|
||||||
|
type: 'residence'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'The Boring Company',
|
||||||
|
target: 'Neuralink',
|
||||||
|
type: 'subsidiary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'Elon Musk',
|
||||||
|
target: 'University of Pretoria',
|
||||||
|
type: 'work location'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'The Boring Company',
|
||||||
|
target: 'Elon Musk',
|
||||||
|
type: 'owned by'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'Kimbal Musk',
|
||||||
|
target: 'Elon Musk',
|
||||||
|
type: 'sibling'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'Neuralink',
|
||||||
|
target: 'Elon Musk',
|
||||||
|
type: 'owned by'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'Elon Musk',
|
||||||
|
target: 'The Boring Company',
|
||||||
|
type: 'owned by'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: 'Elon Musk',
|
||||||
|
target: 'University of Pennsylvania',
|
||||||
|
type: 'work location'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// async function fetchData() {
|
||||||
|
// const response = await fetch('./data.json')
|
||||||
|
// if (response.ok) {
|
||||||
|
// knowledgeGraphJson = await response.json()
|
||||||
|
// } else {
|
||||||
|
// alert(`HTTP-Error: ${response.status}`)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
let nodes: INode[] = []
|
||||||
|
let edges: IEdge[] = []
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
console.log("1");
|
|
||||||
cyDiv = document.getElementById('cy');
|
|
||||||
console.log("2");
|
|
||||||
|
|
||||||
//await fetchData();
|
//await fetchData();
|
||||||
|
nodes = knowledgeGraphJson.entities.map((entity: any) => ({
|
||||||
|
data: { id: entity.title }
|
||||||
|
}))
|
||||||
|
|
||||||
console.log(knowledgeGraphJson);
|
edges = knowledgeGraphJson.relations.map(
|
||||||
|
(relation: any, index: string) => ({
|
||||||
|
data: {
|
||||||
|
id: index,
|
||||||
|
source: relation.source,
|
||||||
|
target: relation.target,
|
||||||
|
label: relation.type
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
nodes = knowledgeGraphJson.entities.map((entity: any) => ({
|
let cy = cytoscape({
|
||||||
data: { id: entity.title },
|
container: document.getElementById('cy'),
|
||||||
}));
|
elements: {
|
||||||
|
nodes,
|
||||||
edges = knowledgeGraphJson.relations.map((relation: any, index: string) => ({
|
edges
|
||||||
data: {
|
|
||||||
id: index,
|
|
||||||
source: relation.source,
|
|
||||||
target: relation.target,
|
|
||||||
label: relation.type,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
console.log(edges);
|
|
||||||
const cy = cytoscape({
|
|
||||||
container: document.getElementById('cy'),
|
|
||||||
elements: {
|
|
||||||
nodes,
|
|
||||||
edges,
|
|
||||||
},
|
|
||||||
style: [
|
|
||||||
{
|
|
||||||
selector: 'node',
|
|
||||||
style: {
|
|
||||||
'text-valign': 'center',
|
|
||||||
'text-halign': 'center',
|
|
||||||
label: 'data(id)',
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
style: [
|
||||||
selector: 'edge',
|
{
|
||||||
style: {
|
selector: 'node',
|
||||||
width: 5,
|
style: {
|
||||||
'line-color': 'light grey',
|
'text-valign': 'center',
|
||||||
'target-arrow-color': 'grey',
|
'text-halign': 'center',
|
||||||
'target-arrow-shape': 'triangle',
|
label: 'data(id)',
|
||||||
'curve-style': 'bezier',
|
width: 100,
|
||||||
label: 'data(label)',
|
height: 100
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
],
|
selector: 'edge',
|
||||||
});
|
style: {
|
||||||
|
width: 5,
|
||||||
|
'line-color': 'light grey',
|
||||||
|
'target-arrow-color': 'grey',
|
||||||
|
'target-arrow-shape': 'triangle',
|
||||||
|
'curve-style': 'bezier',
|
||||||
|
label: 'data(label)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
layout: {
|
||||||
|
name: 'cose'
|
||||||
|
// infinite: true,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
cy.layout({
|
cy.on('tap', 'node', event => {
|
||||||
name: 'cose',
|
const node = event.target
|
||||||
}).run();
|
const nodeId = node.data('id')
|
||||||
});
|
alert('Display info for ' + nodeId)
|
||||||
|
})
|
||||||
|
|
||||||
|
cy.on('tap', 'edge', event => {
|
||||||
|
const edge = event.target
|
||||||
|
const edgeId = edge.data('id')
|
||||||
|
alert('Display info for ' + edgeId)
|
||||||
|
})
|
||||||
|
|
||||||
|
// cy.on('tap', 'node', function(){
|
||||||
|
// alert("put code here"));
|
||||||
|
// });
|
||||||
|
|
||||||
|
// cy.layout({
|
||||||
|
// name: 'cola'
|
||||||
|
// }).run();
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<section class="overflow-hidden text-gray-700">
|
||||||
|
<div class="pt-8 p-6 md:p-8 mx-auto" />
|
||||||
|
|
||||||
|
<div id="cy" />
|
||||||
|
</section>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#cy {
|
#cy {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 95%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 55px;
|
top: 55px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<section class="overflow-hidden text-gray-700">
|
|
||||||
<div class="pt-8 p-6 md:p-8 mx-auto">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="cy"></div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
import { sessionStore, themeStore } from '../stores'
|
import { sessionStore, themeStore } from '../stores'
|
||||||
import { errorToMessage } from '$lib/session'
|
import { errorToMessage } from '$lib/session'
|
||||||
import { initialize } from '$lib/init'
|
import { initialize } from '$lib/init'
|
||||||
import Footer from '$components/Footer.svelte'
|
|
||||||
import Header from '$components/Header.svelte'
|
import Header from '$components/Header.svelte'
|
||||||
import Notifications from '$components/notifications/Notifications.svelte'
|
import Notifications from '$components/notifications/Notifications.svelte'
|
||||||
import SidebarNav from '$components/nav/SidebarNav.svelte'
|
import SidebarNav from '$components/nav/SidebarNav.svelte'
|
||||||
|
|
@ -60,5 +59,4 @@
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</SidebarNav>
|
</SidebarNav>
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue