You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@age.apache.org by hb...@apache.org on 2022/11/19 08:26:28 UTC
[age-viewer] branch main updated: indicator of request being processed for node (#59)
This is an automated email from the ASF dual-hosted git repository.
hbshin pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/age-viewer.git
The following commit(s) were added to refs/heads/main by this push:
new bc82680 indicator of request being processed for node (#59)
bc82680 is described below
commit bc82680bd6975b4e02f98cfff1005c4173b82156
Author: marodins <67...@users.noreply.github.com>
AuthorDate: Sat Nov 19 00:26:24 2022 -0800
indicator of request being processed for node (#59)
---
.../components/cytoscape/CypherResultCytoscapeChart.jsx | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx b/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx
index 2600476..4477d86 100644
--- a/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx
+++ b/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx
@@ -56,7 +56,6 @@ const CypherResultCytoscapeCharts = ({
}) => {
const [cytoscapeMenu, setCytoscapeMenu] = useState(null);
const [initialized, setInitialized] = useState(false);
-
const addEventOnElements = (targetElements) => {
targetElements.bind('mouseover', (e) => {
onElementsMouseover({ type: 'elements', data: e.target.data() });
@@ -164,6 +163,20 @@ const CypherResultCytoscapeCharts = ({
(<FontAwesomeIcon icon={faProjectDiagram} size="lg" />),
),
select(ele) {
+ const elAnimate = ele.animation({
+ style: {
+ 'border-color': 'green',
+ 'border-width': '11px',
+ },
+ duration: 1000,
+ });
+ elAnimate.play();
+ const animateTimer = setInterval(() => {
+ if (elAnimate.complete()) {
+ elAnimate.reverse().play();
+ }
+ }, 1000);
+
fetch('/api/v1/cypher',
{
method: 'POST',
@@ -175,6 +188,8 @@ const CypherResultCytoscapeCharts = ({
})
.then((res) => res.json())
.then((data) => {
+ elAnimate.rewind().stop();
+ clearInterval(animateTimer);
addElements(ele.id(), data);
});
},