Last active
September 1, 2022 20:06
-
-
Save tonilastre/f284f5cf7f0fe65be37207e075969ca7 to your computer and use it in GitHub Desktop.
Orb <> GSS examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Delete all the nodes and edges | |
MATCH (n) DETACH DELETE n; | |
// Create the example graph | |
CREATE | |
(n1:Show { id: 1, name: 'House of the Dragon', type: 'Show' }), | |
(n2:Person { id: 2, name: 'Rhaenyra Targaryen', type: 'Person', family: 'Targaryen' }), | |
(n3:Person { id: 3, name: 'Daemon Targaryen', type: 'Person', family: 'Targaryen' }), | |
(n4:Person { id: 4, name: 'Viserys Targaryen', type: 'Person', family: 'Targaryen' }), | |
(n5:Person { id: 5, name: 'Otto Hightower', type: 'Person', family: 'Hightower' }), | |
(n6:Person { id: 6, name: 'Alicent Hightower', type: 'Person', family: 'Hightower' }), | |
(n2)-[:``]->(n1), | |
(n3)-[:``]->(n1), | |
(n4)-[:``]->(n1), | |
(n5)-[:``]->(n1), | |
(n6)-[:``]->(n1), | |
(n3)-[:`brother of`]->(n4), | |
(n4)-[:`brother of`]->(n3), | |
(n2)-[:`child of`]->(n4), | |
(n6)-[:`child of`]->(n5); | |
// Return all the created nodes and edges | |
MATCH (n)-[e]-(m) RETURN n, e, m; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Define(ImageById, AsArray( | |
"", | |
"2022-06/house-of-the-dragon-ka-1920.jpg", | |
"2022-05/house-of-the-dragon-character-rhaenyra-512x512_0.jpg?w=512", | |
"2022-05/house-of-the-dragon-character-daemon-512x512.jpg?w=512", | |
"2022-05/house-of-the-dragon-character-viserys-512x512_0.jpg?w=512", | |
"2022-05/house-of-the-dragon-character-otto-512x512.jpg?w=512", | |
"2022-05/house-of-the-dragon-character-alicent-512x512_2.jpg?w=512" | |
)) | |
Define(TARGARYEN_COLOR, #c51c1c) | |
Define(HIGHTOWER_COLOR, #1ead2a) | |
Define(DEFAULT_COLOR, #999999) | |
Define(GetFamilyColor, | |
Function(family, | |
If( | |
Equals(family, "Targaryen"), | |
TARGARYEN_COLOR, | |
If( | |
Equals(family, "Hightower"), | |
HIGHTOWER_COLOR, | |
DEFAULT_COLOR | |
) | |
) | |
) | |
) | |
Define(GetNodeFamilyColor, | |
Function(node, | |
GetFamilyColor(Property(node, "family")) | |
) | |
) | |
Define(GetEdgeFamilyColor, | |
Function(edge, | |
GetNodeFamilyColor(EndNode(edge)) | |
) | |
) | |
@NodeStyle { | |
size: 10 | |
font-size: 3 | |
label: AsText(Property(node, "name")) | |
image-url: Format( | |
"https://static.hbo.com/{}", Get(ImageById, Property(node, "id")) | |
) | |
} | |
@NodeStyle Equals(Property(node, "type"), "Person") { | |
size: 6 | |
border-width: 0.9 | |
border-color: GetNodeFamilyColor(node) | |
} | |
@EdgeStyle { | |
color: GetEdgeFamilyColor(edge) | |
color-hover: Darker(GetEdgeFamilyColor(edge)) | |
color-selected: Darker(GetEdgeFamilyColor(edge)) | |
font-size: 3 | |
font-color: Darker(GetEdgeFamilyColor(edge)) | |
width: If(Type(edge), 0.3, 0.1) | |
width-hover: 0.9 | |
width-selected: 0.9 | |
label: Type(edge) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Orb | Default vs custom-styled graph</title> | |
<script src="https://unpkg.com/@memgraph/orb@0.0.2/dist/browser/orb.js"></script> | |
<style> | |
html, body { | |
height: 100%; | |
margin: 0; | |
} | |
#graph { | |
height: 100%; | |
} | |
#graph-style-select { | |
position: absolute; | |
z-index: 1; | |
margin: 10px; | |
padding: 10px; | |
background: #9feff2; | |
font-family: sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="graph-style-select"> | |
<input id="is-custom-style" type="checkbox" name="is-custom-style"> | |
<label for="is-custom-style"> Apply custom graph style</label> | |
</div> | |
<div id="graph"></div> | |
<script> | |
const container = document.getElementById('graph'); | |
const checkbox = document.getElementById('is-custom-style'); | |
const nodes = [ | |
{ id: 1, name: 'House of the Dragon', type: 'Show' }, | |
{ id: 2, name: 'Rhaenyra Targaryen', type: 'Person', family: 'Targaryen' }, | |
{ id: 3, name: 'Daemon Targaryen', type: 'Person', family: 'Targaryen' }, | |
{ id: 4, name: 'Viserys Targaryen', type: 'Person', family: 'Targaryen' }, | |
{ id: 5, name: 'Otto Hightower', type: 'Person', family: 'Hightower' }, | |
{ id: 6, name: 'Alicent Hightower', type: 'Person', family: 'Hightower' }, | |
]; | |
const edges = [ | |
{ id: 1, start: 2, end: 1 }, | |
{ id: 2, start: 3, end: 1 }, | |
{ id: 3, start: 4, end: 1 }, | |
{ id: 4, start: 5, end: 1 }, | |
{ id: 5, start: 6, end: 1 }, | |
{ id: 6, start: 3, end: 4, label: 'brother of' }, | |
{ id: 7, start: 4, end: 3, label: 'brother of' }, | |
{ id: 8, start: 2, end: 4, label: 'child of' }, | |
{ id: 9, start: 6, end: 5, label: 'child of' }, | |
]; | |
const orb = new Orb.Orb(container); | |
const getCustomStyle = () => { | |
const imageUrlByNodeId = { | |
1: 'https://static.hbo.com/2022-06/house-of-the-dragon-ka-1920.jpg', | |
2: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-rhaenyra-512x512_0.jpg?w=512', | |
3: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-daemon-512x512.jpg?w=512', | |
4: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-viserys-512x512_0.jpg?w=512', | |
5: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-otto-512x512.jpg?w=512', | |
6: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-alicent-512x512_2.jpg?w=512' | |
} | |
const colorByFamily = { | |
'Targaryen': '#c51c1c', | |
'Hightower': '#1ead2a', | |
} | |
// Create default style for new nodes and new edges | |
return { | |
getNodeStyle(node) { | |
const imageUrl = imageUrlByNodeId[node.id]; | |
// Shared style properties for all the nodes | |
const commonProperties = { | |
size: 10, | |
fontSize: 3, | |
imageUrl, | |
label: node.data.name, | |
}; | |
// Specific style properties for nodes where ".type = 'Person'" | |
if (node.data.type === 'Person') { | |
return { | |
...commonProperties, | |
// Border color will be the color of the family | |
borderColor: colorByFamily[node.data.family], | |
borderWidth: 0.9, | |
size: 6, | |
}; | |
} | |
return commonProperties; | |
}, | |
getEdgeStyle(edge) { | |
// Using Orb.Color to easily generate darker colors below | |
const familyColor = new Orb.Color(colorByFamily[edge.endNode.data.family] ?? '#999999'); | |
return { | |
color: familyColor, | |
colorHover: familyColor.getDarkerColor(), | |
colorSelected: familyColor.getDarkerColor(), | |
fontSize: 3, | |
fontColor: familyColor.getDarkerColor(), | |
// Edges will "label" property will have 3x larger width | |
width: edge.data.label ? 0.3 : 0.1, | |
widthHover: 0.9, | |
widthSelected: 0.9, | |
label: edge.data.label, | |
}; | |
}, | |
}; | |
}; | |
const renderOrb = (isCustomStyle = false) => { | |
const style = isCustomStyle ? getCustomStyle() : Orb.getDefaultGraphStyle(); | |
orb.data.setDefaultStyle(style); | |
// Reinitialize nodes and edges because default style is | |
// only applied on new nodes and new edges | |
orb.data.setup({ nodes, edges }); | |
// Render and recenter the view | |
orb.view.render(() => { | |
orb.view.recenter(); | |
}); | |
}; | |
checkbox.addEventListener('change', (event) => { | |
renderOrb(event.currentTarget.checked); | |
}); | |
renderOrb(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment