highlight node (#68)
Co-authored-by: moon19960501@gmail.com <wenzhenhe1@gmail.com>
diff --git a/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx b/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx
index 4477d86..0f15d52 100644
--- a/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx
+++ b/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx
@@ -34,6 +34,7 @@
faLockOpen,
faProjectDiagram,
faWindowClose,
+ faHighlighter,
} from '@fortawesome/free-solid-svg-icons';
import cxtmenu from '../../lib/cytoscape-cxtmenu';
import { initLocation, seletableLayouts } from './CytoscapeLayouts';
@@ -211,6 +212,27 @@
select() {
},
},
+
+ {
+ content: ReactDOMServer.renderToString(
+ (<FontAwesomeIcon icon={faHighlighter} size="lg" />),
+ ),
+ select(ele) {
+ if (ele.style().borderColor === 'rgb(232,228,6)') {
+ let border;
+ elements.nodes.forEach((e) => {
+ if (e.data.id === ele.id()) border = e.data.borderColor;
+ });
+ ele.style('borderColor', border);
+ ele.style('borderWidth', '3px');
+ ele.style('borderOpacity', '0.6');
+ } else {
+ ele.style('borderColor', '#e8e406');
+ ele.style('borderWidth', '10px');
+ ele.style('borderOpacity', '1');
+ }
+ },
+ },
],
fillColor: 'rgba(210, 213, 218, 1)',
activeFillColor: 'rgba(166, 166, 166, 1)',
