Skip to content

Instantly share code, notes, and snippets.

@tonilastre

tonilastre/cypher-create-dataset.cypher

Last active September 1, 2022 20:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonilastre/f284f5cf7f0fe65be37207e075969ca7 to your computer and use it in GitHub Desktop.
Save tonilastre/f284f5cf7f0fe65be37207e075969ca7 to your computer and use it in GitHub Desktop.
Download ZIP
Orb <> GSS examples
Raw
cypher-create-dataset.cypher
// 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;
Raw
gss-custom-style.gss
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)
}
Raw
orb-default-vs-custom-style.html
<!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