matteo/wikimedica-disease-search
matteo
/
wikimedica-disease-search
1
0
Fork 0
Code Issues 2 Pull Requests Releases Activity

app: Améliorations de performance

This commit is contained in:
Mattéo Delabre 2019-12-02 00:18:52 -05:00
parent 2efc32c5a2
commit 4295a94edf
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
2 changed files with 112 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
app/src/Graph.js
View File

@ -1,6 +1,14 @@
import React, {useState, useRef, useEffect} from 'react';
import Springy from 'springy';
/**
* Échappe une valeur utilisée dans un sélecteur d’attributs CSS.
*
* @param value Valeur à échapper.
* @return Valeur échappée.
*/
const escapeAttrValue = value => value.replace(/"/g, '\\"');
/**
* Crée un identifiant unique pour l’arête identifiée par ses deux extrémités.
*
@ -12,10 +20,10 @@ const getEdgeId = (from, to) =>
{
if (to < from)
{
return getEdgeId(to, from);
[to, from] = [from, to];
}
return `${from}-${to}`;
return JSON.stringify([from, to]);
};
/**
@ -33,11 +41,54 @@ const includesEdge = (list, from, to) =>
|| (source === to && target === from)
));
/**
* Recherche parmi les descendants d’un élément celui qui représente un
* nœud donnée, s’il existe.
*
* @param parent Élément parent.
* @param id Identifiant du nœud recherché.
* @return Élément trouvé ou null sinon.
*/
const findNode = (parent, id) =>
parent.querySelector(`[data-node-id="${escapeAttrValue(id)}"]`);
/**
* Recherche parmi les descendants d’un élément celui qui représente une
* arête donnée, s’il existe.
*
* @param parent Élément parent.
* @param id Identifiant de l’arête recherchée.
* @return Élément trouvé ou null sinon.
*/
const findEdge = (parent, id) =>
parent.querySelector(`[data-edge-id="${escapeAttrValue(id)}"]`);
/**
* Recherche le premier élément parent représentant un nœud et renvoie
* l’identifiant de ce nœud.
*
* @param start Élément de départ.
* @return Identifiant de l’élément trouvé ou null sinon.
*/
const findParentNode = start =>
{
if (start instanceof window.HTMLDocument)
{
return null;
}
if (start.hasAttribute('data-node-id'))
{
return start.getAttribute('data-node-id');
}
return findParentNode(start.parentNode);
};
/**
* Affiche un graphe.
*
* @prop nodes Liste des identifiants de nœuds du graphe. Chaque nœud doit
* avoir un identifiant unique ne contenant pas de tiret ('-').
* @prop nodes Liste des identifiants de nœuds du graphe.
* @prop edges Couples d’identifiants de nœuds formant les arêtes du graphe.
* @prop render Fonction de rendu prenant en paramètre l’identifiant d’un nœud
* du graphe et renvoyant un élément à afficher pour le représenter.
@ -47,64 +98,82 @@ const Graph = ({nodes, edges, render}) =>
const [graph,] = useState(new Springy.Graph());
const [layout,] = useState(new Springy.Layout.ForceDirected(
graph,
/* rigidité = */ 400,
/* répulsion = */ 450,
/* amortissement = */ 0.5
/* rigidité des arêtes = */ 400,
/* répulsion des nœuds = */ 450,
/* amortissement de vitesse = */ 0.4
));
// N’arrête jamais l’animation
layout.minEnergyThreshold = 0;
// Pointeur sur l’élément englobant le graphe
const graphParent = useRef(null);
// Ajout des nouveaux nœuds
// Ajout des nouveaux nœuds et retrait des anciens
const oldNodes = new Set(Object.keys(graph.nodeSet));
for (let node of nodes)
{
if (!(node in graph.nodeSet))
if (!oldNodes.has(node))
{
console.info(`Ajout du nouveau nœud ${node}`);
graph.addNode(new Springy.Node(node));
}
}
// Retrait des anciens nœuds et de leurs arêtes adjacentes
graph.filterNodes(node =>
for (let node of oldNodes)
{
if (!nodes.includes(node.id))
if (!nodes.includes(node))
{
console.info(`Retrait de l’ancien nœud ${node.id}`);
return false;
graph.removeNode({id: node});
}
}
return true;
});
const oldNodePoints = new Set(Object.keys(layout.nodePoints));
for (let node of oldNodePoints)
{
if (!nodes.includes(node))
{
delete layout.nodePoints[node];
}
}
// Ajout des nouvelles arêtes et retrait des anciennes
const newEdges = new Set(edges.map(edge => getEdgeId(...edge)));
const oldEdges = new Set(graph.edges.map(edge => edge.id));
// Ajout des nouvelles arêtes
for (let [from, to] of edges)
{
const edgeId = getEdgeId(from, to);
if (graph.edges.every(edge => edge.id !== edgeId))
if (!oldEdges.has(edgeId))
{
console.info(`Ajout de la nouvelle arête ${edgeId}`);
graph.addEdge(new Springy.Edge(edgeId, {id: from}, {id: to}));
}
}
// Retrait des anciennes arêtes
graph.filterEdges(({source: {id: from}, target: {id: to}}) =>
for (let edge of oldEdges)
{
if (!includesEdge(edges, from, to))
if (!newEdges.has(edge))
{
console.info(`Retrait de l’ancienne arête ${from}-${to}`);
return false;
graph.removeEdge({id: edge});
}
}
return true;
});
const oldEdgeSprings = new Set(Object.keys(layout.edgeSprings));
for (let edge of oldEdgeSprings)
{
if (!newEdges.has(edge))
{
delete layout.edgeSprings[edge];
}
}
// Rendu de l’animation du graphe
useEffect(() =>
{
const center = () => new Springy.Vector(
window.innerWidth / 2,
window.innerHeight / 2
@ -118,10 +187,7 @@ const Graph = ({nodes, edges, render}) =>
{
layout.eachNode(({id}, {p}) =>
{
const element = graphParent.current.querySelector(
`[data-node-id="${id.replace('"', '\\"')}"]`
);
const element = findNode(graphParent.current, id);
const {x, y} = coordsToScreen(p);
element.style.transform = `translate(
@ -132,10 +198,7 @@ const Graph = ({nodes, edges, render}) =>
layout.eachEdge(({id}, {point1: {p: p1}, point2: {p: p2}}) =>
{
const element = graphParent.current.querySelector(
`[data-edge-id="${id}"]`
);
const element = findEdge(graphParent.current, id);
const {x: x1, y: y1} = coordsToScreen(p1);
const {x: x2, y: y2} = coordsToScreen(p2);
@ -144,10 +207,6 @@ const Graph = ({nodes, edges, render}) =>
element.setAttribute('x2', x2);
element.setAttribute('y2', y2);
});
}, () => {
console.info(`Fin du rendu du graphe`);
}, () => {
console.info(`Démarrage du rendu du graphe`);
});
let dragging = null;
@ -156,13 +215,12 @@ const Graph = ({nodes, edges, render}) =>
{
const {clientX: x, clientY: y} = ev;
const screen = new Springy.Vector(x, y);
const position = screenToCoords(screen);
const nearest = layout.nearest(position);
const clickedNode = findParentNode(ev.target);
if (nearest.distance <= scale / 50)
if (clickedNode !== null)
{
dragging = nearest;
dragging.point.m = 1000;
dragging = layout.nodePoints[clickedNode];
dragging.m = Infinity;
}
};
@ -172,7 +230,7 @@ const Graph = ({nodes, edges, render}) =>
{
const {clientX: x, clientY: y} = ev;
const screen = new Springy.Vector(x, y);
dragging.point.p = screenToCoords(screen);
dragging.p = screenToCoords(screen);
}
};
@ -180,7 +238,7 @@ const Graph = ({nodes, edges, render}) =>
{
if (dragging !== null)
{
dragging.point.m = 1;
dragging.m = 1;
dragging = null;
}
};
@ -195,20 +253,24 @@ const Graph = ({nodes, edges, render}) =>
document.body.removeEventListener('mousemove', mouseMove);
document.body.removeEventListener('mouseup', mouseUp);
};
});
}, []);
return (
<div ref={graphParent} className="Graph">
<svg className="Graph_edgesContainer">
{edges.map(edge => (
<line data-edge-id={getEdgeId(...edge)} />
<line
key={getEdgeId(...edge)}
data-edge-id={getEdgeId(...edge)}
/>
))}
</svg>
{nodes.map(id => (
<span
className="Graph_node"
key={id}
data-node-id={id}
className="Graph_node"
>{render(id)}</span>
))}
</div>

1
app/src/TermInput.js
View File

@ -46,6 +46,7 @@ const TermInput = ({terms, setTerms}) =>
<div className="TermInput">
{terms.map(term =>
<span
key={term}
className="TermInput_term"
onClick={handleRemove.bind(null, term)}
>{term}</span>