2024-10-08 15:14:22 +00:00
|
|
|
async function getGraphData(url, godfathersDepth, godchildrenDepth) {
|
2024-10-08 11:54:44 +00:00
|
|
|
const data = await (
|
|
|
|
await fetch(
|
2024-10-08 15:14:22 +00:00
|
|
|
`${url}?godfathers_depth=${godfathersDepth}&godchildren_depth=${godchildrenDepth}`,
|
2024-10-08 11:54:44 +00:00
|
|
|
)
|
|
|
|
).json();
|
|
|
|
return [
|
|
|
|
...data.users.map((user) => {
|
|
|
|
return { data: user };
|
|
|
|
}),
|
|
|
|
...data.relationships.map((rel) => {
|
|
|
|
return {
|
|
|
|
data: { source: rel.godfather, target: rel.godchild },
|
|
|
|
};
|
|
|
|
}),
|
|
|
|
];
|
2024-09-17 10:10:06 +00:00
|
|
|
}
|
|
|
|
|
2024-10-08 15:14:22 +00:00
|
|
|
function createGraph(container, data, activeUserId) {
|
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: imported by user_godphaters_tree.jinja
|
2024-10-08 11:54:44 +00:00
|
|
|
const cy = cytoscape({
|
|
|
|
boxSelectionEnabled: false,
|
|
|
|
autounselectify: true,
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
container,
|
|
|
|
elements: data,
|
|
|
|
minZoom: 0.5,
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
style: [
|
|
|
|
// the stylesheet for the graph
|
|
|
|
{
|
|
|
|
selector: "node",
|
|
|
|
style: {
|
|
|
|
label: "data(display_name)",
|
|
|
|
"background-image": "data(profile_pict)",
|
|
|
|
width: "100%",
|
|
|
|
height: "100%",
|
|
|
|
"background-fit": "cover",
|
|
|
|
"background-repeat": "no-repeat",
|
|
|
|
shape: "ellipse",
|
|
|
|
},
|
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
{
|
|
|
|
selector: "edge",
|
|
|
|
style: {
|
|
|
|
width: 5,
|
|
|
|
"line-color": "#ccc",
|
|
|
|
"target-arrow-color": "#ccc",
|
|
|
|
"target-arrow-shape": "triangle",
|
|
|
|
"curve-style": "bezier",
|
|
|
|
},
|
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
{
|
|
|
|
selector: ".traversed",
|
|
|
|
style: {
|
|
|
|
"border-width": "5px",
|
|
|
|
"border-style": "solid",
|
|
|
|
"border-color": "red",
|
|
|
|
"target-arrow-color": "red",
|
|
|
|
"line-color": "red",
|
|
|
|
},
|
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
{
|
|
|
|
selector: ".not-traversed",
|
|
|
|
style: {
|
|
|
|
"line-opacity": "0.5",
|
|
|
|
"background-opacity": "0.5",
|
|
|
|
"background-image-opacity": "0.5",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
layout: {
|
|
|
|
name: "klay",
|
|
|
|
nodeDimensionsIncludeLabels: true,
|
|
|
|
fit: true,
|
|
|
|
klay: {
|
|
|
|
addUnnecessaryBendpoints: true,
|
|
|
|
direction: "DOWN",
|
|
|
|
nodePlacement: "INTERACTIVE",
|
|
|
|
layoutHierarchy: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
2024-10-08 15:14:22 +00:00
|
|
|
const activeUser = cy.getElementById(activeUserId).style("shape", "rectangle");
|
2024-10-08 11:54:44 +00:00
|
|
|
/* Reset graph */
|
2024-10-08 15:14:22 +00:00
|
|
|
const resetGraph = () => {
|
2024-10-08 11:54:44 +00:00
|
|
|
cy.elements((element) => {
|
|
|
|
if (element.hasClass("traversed")) {
|
|
|
|
element.removeClass("traversed");
|
|
|
|
}
|
|
|
|
if (element.hasClass("not-traversed")) {
|
|
|
|
element.removeClass("not-traversed");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 15:14:22 +00:00
|
|
|
const onNodeTap = (el) => {
|
|
|
|
resetGraph();
|
2024-10-08 11:54:44 +00:00
|
|
|
/* Create path on graph if selected isn't the targeted user */
|
2024-10-08 15:14:22 +00:00
|
|
|
if (el === activeUser) {
|
2024-10-08 11:54:44 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
cy.elements((element) => {
|
|
|
|
element.addClass("not-traversed");
|
|
|
|
});
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
for (const traversed of cy.elements().aStar({
|
|
|
|
root: el,
|
2024-10-08 15:14:22 +00:00
|
|
|
goal: activeUser,
|
2024-10-08 11:54:44 +00:00
|
|
|
}).path) {
|
|
|
|
traversed.removeClass("not-traversed");
|
|
|
|
traversed.addClass("traversed");
|
|
|
|
}
|
|
|
|
};
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
cy.on("tap", "node", (tapped) => {
|
2024-10-08 15:14:22 +00:00
|
|
|
onNodeTap(tapped.target);
|
2024-10-08 11:54:44 +00:00
|
|
|
});
|
|
|
|
cy.zoomingEnabled(false);
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
/* Add context menu */
|
|
|
|
if (cy.cxtmenu === undefined) {
|
2024-10-08 15:14:22 +00:00
|
|
|
throw new Error("ctxmenu isn't loaded, context menu won't be available on graphs");
|
2024-10-08 11:54:44 +00:00
|
|
|
}
|
|
|
|
cy.cxtmenu({
|
|
|
|
selector: "node",
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
commands: [
|
|
|
|
{
|
|
|
|
content: '<i class="fa fa-external-link fa-2x"></i>',
|
|
|
|
select: (el) => {
|
|
|
|
window.open(el.data().profile_url, "_blank").focus();
|
|
|
|
},
|
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
{
|
|
|
|
content: '<span class="fa fa-mouse-pointer fa-2x"></span>',
|
|
|
|
select: (el) => {
|
2024-10-08 15:14:22 +00:00
|
|
|
onNodeTap(el);
|
2024-10-08 11:54:44 +00:00
|
|
|
},
|
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
{
|
|
|
|
content: '<i class="fa fa-eraser fa-2x"></i>',
|
2024-10-08 15:14:22 +00:00
|
|
|
select: (_) => {
|
|
|
|
resetGraph();
|
2024-10-08 11:54:44 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
});
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
return cy;
|
2024-09-17 10:10:06 +00:00
|
|
|
}
|
|
|
|
|
2024-10-07 23:33:21 +00:00
|
|
|
document.addEventListener("alpine:init", () => {
|
2024-10-08 11:54:44 +00:00
|
|
|
/*
|
2024-09-17 10:10:06 +00:00
|
|
|
This needs some constants to be set before the document has been loaded
|
|
|
|
|
2024-10-08 15:14:22 +00:00
|
|
|
apiUrl: base url for fetching the tree as a string
|
|
|
|
activeUser: id of the user to fetch the tree from
|
|
|
|
depthMin: minimum tree depth for godfathers and godchildren as an int
|
|
|
|
depthMax: maximum tree depth for godfathers and godchildren as an int
|
2024-09-17 10:10:06 +00:00
|
|
|
*/
|
2024-10-08 15:14:22 +00:00
|
|
|
const defaultDepth = 2;
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
if (
|
2024-10-08 15:14:22 +00:00
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by user_godfathers_tree.jinja
|
|
|
|
typeof apiUrl === "undefined" ||
|
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by user_godfathers_tree.jinja
|
|
|
|
typeof activeUser === "undefined" ||
|
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by user_godfathers_tree.jinja
|
|
|
|
typeof depthMin === "undefined" ||
|
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by user_godfathers_tree.jinja
|
|
|
|
typeof depthMax === "undefined"
|
2024-10-08 11:54:44 +00:00
|
|
|
) {
|
2024-10-08 15:14:22 +00:00
|
|
|
throw new Error(
|
2024-10-08 11:54:44 +00:00
|
|
|
"Some constants are not set before using the family_graph script, please look at the documentation",
|
|
|
|
);
|
|
|
|
}
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 15:14:22 +00:00
|
|
|
function getInitialDepth(prop) {
|
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
|
2024-10-08 11:54:44 +00:00
|
|
|
const value = Number.parseInt(initialUrlParams.get(prop));
|
2024-10-08 15:14:22 +00:00
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by user_godfathers_tree.jinja
|
|
|
|
if (Number.isNaN(value) || value < depthMin || value > depthMax) {
|
|
|
|
return defaultDepth;
|
2024-10-08 11:54:44 +00:00
|
|
|
}
|
|
|
|
return value;
|
|
|
|
}
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
Alpine.data("graph", () => ({
|
|
|
|
loading: false,
|
2024-10-08 15:14:22 +00:00
|
|
|
godfathersDepth: getInitialDepth("godfathersDepth"),
|
|
|
|
godchildrenDepth: getInitialDepth("godchildrenDepth"),
|
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
|
2024-10-08 11:54:44 +00:00
|
|
|
reverse: initialUrlParams.get("reverse")?.toLowerCase?.() === "true",
|
|
|
|
graph: undefined,
|
2024-10-08 15:14:22 +00:00
|
|
|
graphData: {},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 11:54:44 +00:00
|
|
|
async init() {
|
2024-10-08 15:14:22 +00:00
|
|
|
const delayedFetch = Alpine.debounce(async () => {
|
|
|
|
await this.fetchGraphData();
|
2024-10-08 11:54:44 +00:00
|
|
|
}, 100);
|
2024-10-08 15:14:22 +00:00
|
|
|
for (const param of ["godfathersDepth", "godchildrenDepth"]) {
|
2024-10-08 11:54:44 +00:00
|
|
|
this.$watch(param, async (value) => {
|
2024-10-08 15:14:22 +00:00
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by user_godfathers_tree.jinja
|
|
|
|
if (value < depthMin || value > depthMax) {
|
2024-10-08 11:54:44 +00:00
|
|
|
return;
|
|
|
|
}
|
2024-10-08 15:14:22 +00:00
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
|
|
|
|
updateQueryString(param, value, History.REPLACE);
|
|
|
|
await delayedFetch();
|
2024-10-08 11:54:44 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
this.$watch("reverse", async (value) => {
|
2024-10-08 15:14:22 +00:00
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
|
|
|
|
updateQueryString("reverse", value, History.REPLACE);
|
|
|
|
await this.reverseGraph();
|
2024-10-08 11:54:44 +00:00
|
|
|
});
|
2024-10-08 15:14:22 +00:00
|
|
|
this.$watch("graphData", async () => {
|
|
|
|
await this.generateGraph();
|
2024-10-08 11:54:44 +00:00
|
|
|
if (this.reverse) {
|
2024-10-08 15:14:22 +00:00
|
|
|
await this.reverseGraph();
|
2024-10-08 11:54:44 +00:00
|
|
|
}
|
|
|
|
});
|
2024-10-08 15:14:22 +00:00
|
|
|
await this.fetchGraphData();
|
2024-10-08 11:54:44 +00:00
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 15:14:22 +00:00
|
|
|
screenshot() {
|
2024-10-08 11:54:44 +00:00
|
|
|
const link = document.createElement("a");
|
|
|
|
link.href = this.graph.jpg();
|
|
|
|
link.download = interpolate(
|
|
|
|
gettext("family_tree.%(extension)s"),
|
|
|
|
{ extension: "jpg" },
|
|
|
|
true,
|
|
|
|
);
|
|
|
|
document.body.appendChild(link);
|
|
|
|
link.click();
|
|
|
|
document.body.removeChild(link);
|
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 15:14:22 +00:00
|
|
|
reset() {
|
2024-10-08 11:54:44 +00:00
|
|
|
this.reverse = false;
|
2024-10-08 15:14:22 +00:00
|
|
|
this.godfathersDepth = defaultDepth;
|
|
|
|
this.godchildrenDepth = defaultDepth;
|
2024-10-08 11:54:44 +00:00
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 15:14:22 +00:00
|
|
|
async reverseGraph() {
|
2024-10-08 11:54:44 +00:00
|
|
|
this.graph.elements((el) => {
|
|
|
|
el.position({ x: -el.position().x, y: -el.position().y });
|
|
|
|
});
|
|
|
|
this.graph.center(this.graph.elements());
|
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 15:14:22 +00:00
|
|
|
async fetchGraphData() {
|
|
|
|
this.graphData = await getGraphData(
|
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by user_godfathers_tree.jinja
|
|
|
|
apiUrl,
|
|
|
|
this.godfathersDepth,
|
|
|
|
this.godchildrenDepth,
|
2024-10-08 11:54:44 +00:00
|
|
|
);
|
|
|
|
},
|
2024-09-17 10:10:06 +00:00
|
|
|
|
2024-10-08 15:14:22 +00:00
|
|
|
async generateGraph() {
|
2024-10-08 11:54:44 +00:00
|
|
|
this.loading = true;
|
2024-10-08 15:14:22 +00:00
|
|
|
// biome-ignore lint/correctness/noUndeclaredVariables: defined by user_godfathers_tree.jinja
|
|
|
|
this.graph = await createGraph($(this.$refs.graph), this.graphData, activeUser);
|
2024-10-08 11:54:44 +00:00
|
|
|
this.loading = false;
|
|
|
|
},
|
|
|
|
}));
|
2024-10-07 23:33:21 +00:00
|
|
|
});
|