mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-22 06:03:20 +00:00
Use new typescript api for user graphs
This commit is contained in:
parent
a98c924b24
commit
37f62e15cf
@ -1,16 +1,26 @@
|
|||||||
import cytoscape from "cytoscape";
|
import cytoscape from "cytoscape";
|
||||||
import cxtmenu from "cytoscape-cxtmenu";
|
import cxtmenu from "cytoscape-cxtmenu";
|
||||||
import klay from "cytoscape-klay";
|
import klay from "cytoscape-klay";
|
||||||
|
import { familyGetFamilyGraph } from "#openapi";
|
||||||
|
|
||||||
cytoscape.use(klay);
|
cytoscape.use(klay);
|
||||||
cytoscape.use(cxtmenu);
|
cytoscape.use(cxtmenu);
|
||||||
|
|
||||||
async function getGraphData(url, godfathersDepth, godchildrenDepth) {
|
async function getGraphData(userId, godfathersDepth, godchildrenDepth) {
|
||||||
const data = await (
|
const data = (
|
||||||
await fetch(
|
await familyGetFamilyGraph({
|
||||||
`${url}?godfathers_depth=${godfathersDepth}&godchildren_depth=${godchildrenDepth}`,
|
path: {
|
||||||
)
|
// biome-ignore lint/style/useNamingConvention: api is snake_case
|
||||||
).json();
|
user_id: userId,
|
||||||
|
},
|
||||||
|
query: {
|
||||||
|
// biome-ignore lint/style/useNamingConvention: api is snake_case
|
||||||
|
godfathers_depth: godfathersDepth,
|
||||||
|
// biome-ignore lint/style/useNamingConvention: api is snake_case
|
||||||
|
godchildren_depth: godchildrenDepth,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
).data;
|
||||||
return [
|
return [
|
||||||
...data.users.map((user) => {
|
...data.users.map((user) => {
|
||||||
return { data: user };
|
return { data: user };
|
||||||
@ -160,8 +170,7 @@ function createGraph(container, data, activeUserId) {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef FamilyGraphConfig
|
* @typedef FamilyGraphConfig
|
||||||
* @param {string} apiUrl Base url for fetching the tree as a string
|
* @param {number} activeUser Id of the user to fetch the tree from
|
||||||
* @param {string} activeUser Id of the user to fetch the tree from
|
|
||||||
* @param {number} depthMin Minimum tree depth for godfathers and godchildren
|
* @param {number} depthMin Minimum tree depth for godfathers and godchildren
|
||||||
* @param {number} depthMax Maximum tree depth for godfathers and godchildren
|
* @param {number} depthMax Maximum tree depth for godfathers and godchildren
|
||||||
**/
|
**/
|
||||||
@ -248,7 +257,7 @@ window.loadFamilyGraph = (config) => {
|
|||||||
|
|
||||||
async fetchGraphData() {
|
async fetchGraphData() {
|
||||||
this.graphData = await getGraphData(
|
this.graphData = await getGraphData(
|
||||||
config.apiUrl,
|
config.activeUser,
|
||||||
this.godfathersDepth,
|
this.godfathersDepth,
|
||||||
this.godchildrenDepth,
|
this.godchildrenDepth,
|
||||||
);
|
);
|
||||||
|
@ -92,8 +92,7 @@
|
|||||||
<script>
|
<script>
|
||||||
window.addEventListener("DOMContentLoaded", () => {
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
loadFamilyGraph({
|
loadFamilyGraph({
|
||||||
apiUrl: "{{ api_url }}",
|
activeUser: {{ object.id }},
|
||||||
activeUser: "{{ object.id }}",
|
|
||||||
depthMin: {{ depth_min }},
|
depthMin: {{ depth_min }},
|
||||||
depthMax: {{ depth_max }},
|
depthMax: {{ depth_max }},
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user