mirror of
https://github.com/ae-utbm/sith.git
synced 2025-06-24 04:05:18 +00:00
Convert family tree to typescript
This commit is contained in:
parent
0e850e5486
commit
cc96c93d23
GPG Key ID:
E7245548C53F904B
@ -1,13 +1,26 @@
|
||||
import { History, initialUrlParams, updateQueryString } from "#core:utils/history";
|
||||
import cytoscape from "cytoscape";
|
||||
import cytoscape, {
|
||||
type ElementDefinition,
|
||||
type NodeSingular,
|
||||
type Singular,
|
||||
} from "cytoscape";
|
||||
import cxtmenu from "cytoscape-cxtmenu";
|
||||
import klay from "cytoscape-klay";
|
||||
import { familyGetFamilyGraph } from "#openapi";
|
||||
import { type UserProfileSchema, familyGetFamilyGraph } from "#openapi";
|
||||
|
||||
cytoscape.use(klay);
|
||||
cytoscape.use(cxtmenu);
|
||||
|
||||
async function getGraphData(userId, godfathersDepth, godchildrenDepth) {
|
||||
type GraphData = (
|
||||
| { data: UserProfileSchema }
|
||||
| { data: { source: number; target: number } }
|
||||
)[];
|
||||
|
||||
async function getGraphData(
|
||||
userId: number,
|
||||
godfathersDepth: number,
|
||||
godchildrenDepth: number,
|
||||
): Promise<GraphData> {
|
||||
const data = (
|
||||
await familyGetFamilyGraph({
|
||||
path: {
|
||||
@ -34,13 +47,13 @@ async function getGraphData(userId, godfathersDepth, godchildrenDepth) {
|
||||
];
|
||||
}
|
||||
|
||||
function createGraph(container, data, activeUserId) {
|
||||
function createGraph(container: HTMLDivElement, data: GraphData, activeUserId: number) {
|
||||
const cy = cytoscape({
|
||||
boxSelectionEnabled: false,
|
||||
autounselectify: true,
|
||||
|
||||
container,
|
||||
elements: data,
|
||||
elements: data as ElementDefinition[],
|
||||
minZoom: 0.5,
|
||||
|
||||
style: [
|
||||
@ -101,28 +114,30 @@ function createGraph(container, data, activeUserId) {
|
||||
},
|
||||
},
|
||||
});
|
||||
const activeUser = cy.getElementById(activeUserId).style("shape", "rectangle");
|
||||
const activeUser = cy
|
||||
.getElementById(activeUserId.toString())
|
||||
.style("shape", "rectangle");
|
||||
/* Reset graph */
|
||||
const resetGraph = () => {
|
||||
cy.elements((element) => {
|
||||
cy.elements(((element: Singular) => {
|
||||
if (element.hasClass("traversed")) {
|
||||
element.removeClass("traversed");
|
||||
}
|
||||
if (element.hasClass("not-traversed")) {
|
||||
element.removeClass("not-traversed");
|
||||
}
|
||||
});
|
||||
}) as unknown as string);
|
||||
};
|
||||
|
||||
const onNodeTap = (el) => {
|
||||
const onNodeTap = (el: Singular) => {
|
||||
resetGraph();
|
||||
/* Create path on graph if selected isn't the targeted user */
|
||||
if (el === activeUser) {
|
||||
return;
|
||||
}
|
||||
cy.elements((element) => {
|
||||
cy.elements(((element: Singular) => {
|
||||
element.addClass("not-traversed");
|
||||
});
|
||||
}) as unknown as string);
|
||||
|
||||
for (const traversed of cy.elements().aStar({
|
||||
root: el,
|
||||
@ -169,52 +184,49 @@ function createGraph(container, data, activeUserId) {
|
||||
return cy;
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef FamilyGraphConfig
|
||||
* @property {number} activeUser Id of the user to fetch the tree from
|
||||
* @property {number} depthMin Minimum tree depth for godfathers and godchildren
|
||||
* @property {number} depthMax Maximum tree depth for godfathers and godchildren
|
||||
**/
|
||||
interface FamilyGraphConfig {
|
||||
activeUser: number; // activeUser Id of the user to fetch the tree from
|
||||
depthMin: number; // depthMin Minimum tree depth for godfathers and godchildren
|
||||
depthMax: number; // depthMax Maximum tree depth for godfathers and godchildren
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a family graph of an user
|
||||
* @param {FamilyGraphConfig} config
|
||||
**/
|
||||
window.loadFamilyGraph = (config) => {
|
||||
document.addEventListener("alpine:init", () => {
|
||||
document.addEventListener("alpine:init", () => {
|
||||
const defaultDepth = 2;
|
||||
|
||||
function getInitialDepth(prop) {
|
||||
Alpine.data("graph", (config: FamilyGraphConfig) => ({
|
||||
loading: false,
|
||||
godfathersDepth: 0,
|
||||
godchildrenDepth: 0,
|
||||
reverse: initialUrlParams.get("reverse")?.toLowerCase?.() === "true",
|
||||
graph: undefined as cytoscape.Core,
|
||||
graphData: {},
|
||||
|
||||
getInitialDepth(prop: string) {
|
||||
const value = Number.parseInt(initialUrlParams.get(prop));
|
||||
if (Number.isNaN(value) || value < config.depthMin || value > config.depthMax) {
|
||||
return defaultDepth;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
Alpine.data("graph", () => ({
|
||||
loading: false,
|
||||
godfathersDepth: getInitialDepth("godfathersDepth"),
|
||||
godchildrenDepth: getInitialDepth("godchildrenDepth"),
|
||||
reverse: initialUrlParams.get("reverse")?.toLowerCase?.() === "true",
|
||||
graph: undefined,
|
||||
graphData: {},
|
||||
},
|
||||
|
||||
async init() {
|
||||
this.godfathersDepth = this.getInitialDepth("godfathersDepth");
|
||||
this.godchildrenDepth = this.getInitialDepth("godchildrenDepth");
|
||||
|
||||
const delayedFetch = Alpine.debounce(async () => {
|
||||
await this.fetchGraphData();
|
||||
}, 100);
|
||||
for (const param of ["godfathersDepth", "godchildrenDepth"]) {
|
||||
this.$watch(param, async (value) => {
|
||||
this.$watch(param, async (value: number) => {
|
||||
if (value < config.depthMin || value > config.depthMax) {
|
||||
return;
|
||||
}
|
||||
updateQueryString(param, value, History.Replace);
|
||||
updateQueryString(param, value.toString(), History.Replace);
|
||||
await delayedFetch();
|
||||
});
|
||||
}
|
||||
this.$watch("reverse", async (value) => {
|
||||
updateQueryString("reverse", value, History.Replace);
|
||||
this.$watch("reverse", async (value: number) => {
|
||||
updateQueryString("reverse", value.toString(), History.Replace);
|
||||
await this.reverseGraph();
|
||||
});
|
||||
this.$watch("graphData", async () => {
|
||||
@ -246,7 +258,7 @@ window.loadFamilyGraph = (config) => {
|
||||
},
|
||||
|
||||
async reverseGraph() {
|
||||
this.graph.elements((el) => {
|
||||
this.graph.elements((el: NodeSingular) => {
|
||||
el.position({ x: -el.position().x, y: -el.position().y });
|
||||
});
|
||||
this.graph.center(this.graph.elements());
|
||||
@ -263,12 +275,11 @@ window.loadFamilyGraph = (config) => {
|
||||
generateGraph() {
|
||||
this.loading = true;
|
||||
this.graph = createGraph(
|
||||
$(this.$refs.graph),
|
||||
this.$refs.graph as HTMLDivElement,
|
||||
this.graphData,
|
||||
config.activeUser,
|
||||
);
|
||||
this.loading = false;
|
||||
},
|
||||
}));
|
||||
});
|
||||
};
|
||||
});
|
||||
@ -7,7 +7,7 @@
|
||||
{%- endblock -%}
|
||||
|
||||
{% block additional_js %}
|
||||
<script type="module" src="{{ static("bundled/user/family-graph-index.js") }}"></script>
|
||||
<script type="module" src="{{ static("bundled/user/family-graph-index.ts") }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}
|
||||
@ -15,7 +15,14 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div x-data="graph" :aria-busy="loading">
|
||||
<div
|
||||
x-data="graph({
|
||||
activeUser: {{ object.id }},
|
||||
depthMin: {{ depth_min }},
|
||||
depthMax: {{ depth_max }},
|
||||
})"
|
||||
:aria-busy="loading"
|
||||
>
|
||||
<div class="graph-toolbar">
|
||||
<div class="toolbar-column">
|
||||
<div class="toolbar-input">
|
||||
@ -89,14 +96,5 @@
|
||||
<div x-ref="graph" class="graph"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
loadFamilyGraph({
|
||||
activeUser: {{ object.id }},
|
||||
depthMin: {{ depth_min }},
|
||||
depthMax: {{ depth_max }},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
29
package-lock.json
generated
29
package-lock.json
generated
@ -45,6 +45,8 @@
|
||||
"@hey-api/openapi-ts": "^0.73.0",
|
||||
"@rollup/plugin-inject": "^5.0.5",
|
||||
"@types/alpinejs": "^3.13.10",
|
||||
"@types/cytoscape-cxtmenu": "^3.4.4",
|
||||
"@types/cytoscape-klay": "^3.1.4",
|
||||
"@types/jquery": "^3.5.31",
|
||||
"vite": "^6.2.5",
|
||||
"vite-bundle-visualizer": "^1.2.1",
|
||||
@ -2819,6 +2821,33 @@
|
||||
"@types/tern": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/cytoscape": {
|
||||
"version": "3.21.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/cytoscape/-/cytoscape-3.21.9.tgz",
|
||||
"integrity": "sha512-JyrG4tllI6jvuISPjHK9j2Xv/LTbnLekLke5otGStjFluIyA9JjgnvgZrSBsp8cEDpiTjwgZUZwpPv8TSBcoLw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/cytoscape-cxtmenu": {
|
||||
"version": "3.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/cytoscape-cxtmenu/-/cytoscape-cxtmenu-3.4.4.tgz",
|
||||
"integrity": "sha512-cuv+IdbKekswDRBIrHn97IYOzWS2/UjVr0kDIHCOYvqWy3iZkuGGM4qmHNPQ+63Dn7JgtmD0l3MKW1moyhoaKw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/cytoscape": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/cytoscape-klay": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/cytoscape-klay/-/cytoscape-klay-3.1.4.tgz",
|
||||
"integrity": "sha512-H+tIadpcVjmDGWKFUfibwzIpH/kddfwAFsuhPparjiC+bWBm+MeNqIwwY+19ofkJZWcqWqZL6Jp8lkp+sP8Aig==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/cytoscape": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||
|
||||
@ -31,6 +31,8 @@
|
||||
"@rollup/plugin-inject": "^5.0.5",
|
||||
"@types/alpinejs": "^3.13.10",
|
||||
"@types/jquery": "^3.5.31",
|
||||
"@types/cytoscape-cxtmenu": "^3.4.4",
|
||||
"@types/cytoscape-klay": "^3.1.4",
|
||||
"vite": "^6.2.5",
|
||||
"vite-bundle-visualizer": "^1.2.1",
|
||||
"vite-plugin-static-copy": "^3.0.2"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user