Skip to content

Commit

Permalink
highlight WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@joon-at-sri
joon-at-sri committed Jul 17, 2024
1 parent a5a5fe3 commit 2f70923
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 35 deletions.
2 changes: 1 addition & 1 deletion src/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const SERVER_URL = 'http://localhost:3001';
export const QUERY_ENDPOINT = `${SERVER_URL}/query`;
export const QUERY_RAW_ENDPOINT = `${SERVER_URL}/query-raw`;
export const COMMON_GREMLIN_ERROR = 'Invalid query. Please execute a query to get a set of vertices';
export let GRAPH_IMPL = "vis" // 'vis' | 'cytoscape' | 'sigma'
export let GRAPH_IMPL = "sigma" // 'vis' | 'cytoscape' | 'sigma'
export const ACTIONS = {
SET_HOST: 'SET_HOST',
SET_PORT: 'SET_PORT',
Expand Down
95 changes: 61 additions & 34 deletions src/logics/graphImpl/cytoImpl.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/// @ts-nocheck
import cy, { NodeDefinition } from "cytoscape";
import edgehandles from 'cytoscape-edgehandles';
import { EdgeData, getColor, GraphData, GraphOptions, GraphTypes, NodeData } from "../utils";
Expand All @@ -20,7 +21,8 @@ const opts: ColaLayoutOptions = {
centerGraph: false,
fit: false,
}

var previous_node_id: number;
var previous_sel: any;

cy.use(cola)
cy.use(edgehandles)
Expand All @@ -29,6 +31,7 @@ cy.use(edgehandles)
function toCyNode(n: NodeData): cy.NodeDefinition {
let nodeColorMap = store.getState().graph.nodeColorMap
let color = n.type !== undefined ? nodeColorMap[n.type] : '#000000';
console.log(color);
return {
group: "nodes",
data: { ...n, id: n.id!.toString() },
Expand All @@ -54,37 +57,45 @@ function toCyEdge(e: EdgeData): cy.EdgeDefinition {
export function getCytoGraph(container?: HTMLElement, data?: GraphData, options?: GraphOptions | undefined): GraphTypes {
if (!graph) {
graph = cy({
container: container,
elements: {
nodes: [],
edges: []
container: container,
elements: {
nodes: [],
edges: []
},
minZoom: .1,
maxZoom: 10,
style: [
{
selector: 'node',
style: {
label: 'data(id)'
}
},
minZoom: .1,
maxZoom: 10,
style: [
{
selector: 'node',
style: {
label: 'data(id)'
}
},
{
selector: 'node[label]',
style: {
label: 'data(label)'
}
},
{
selector: 'edge',
style: {
width: 1,
"curve-style": "bezier",
"target-arrow-shape": 'triangle',
"label": "data(label)"
}
{
selector: 'node[label]',
style: {
label: 'data(label)'
}
]
}
},
{
selector: 'node.semitransp',
style: { 'opacity': '0.5' }
},
{
selector: 'edge.semitransp',
style: { 'opacity': '0.3' }
},
{
selector: 'edge',
style: {
width: 1,
"curve-style": "bezier",
"target-arrow-shape": 'triangle',
"label": "data(label)"
}
}
]
}
);
layout = graph.layout(opts)

Expand All @@ -93,6 +104,19 @@ export function getCytoGraph(container?: HTMLElement, data?: GraphData, options?
layout.start()
graph.on('tap', 'node', (event) => {
store.dispatch(setSelectedNode(event.target.id()))
var sel = event.target;
var id = event.target.id();
if ((id != previous_node_id) && (previous_node_id != undefined) && (previous_sel != undefined)) {
graph!.elements().removeClass("semitransp");
graph!.elements().difference(sel.connectedEdges()).not(sel).addClass("semitransp");
previous_sel = sel;
previous_node_id = id;
}
else {
graph!.elements().difference(sel.connectedEdges()).not(sel).addClass("semitransp");
previous_sel = sel;
previous_node_id = id;
}
})
graph.on('tap', 'edge', (event) => {
store.dispatch(setSelectedEdge(event.target.id()))
Expand All @@ -104,6 +128,9 @@ export function getCytoGraph(container?: HTMLElement, data?: GraphData, options?
if (e.target == graph && e.originalEvent.shiftKey) {
store.dispatch(openNodeDialog({ x: e.position.x, y: e.position.y }));
}
else if (e.target == graph) {
graph!.elements().removeClass("semitransp");
}
})

graph.on('ehcomplete', (_event, sourceNode, targetNode, addedEdge) => {
Expand All @@ -114,11 +141,11 @@ export function getCytoGraph(container?: HTMLElement, data?: GraphData, options?
});

document.addEventListener('keydown', function (e) {
if (e.key === 'Shift' && shiftKeyDown !== true) {
shiftKeyDown = true;
eh.enableDrawMode();
}
if (e.key === 'Shift' && shiftKeyDown !== true) {
shiftKeyDown = true;
eh.enableDrawMode();
}
}
);
document.addEventListener('keyup', function (e) {
if (e.key === 'Shift' && shiftKeyDown === true) {
Expand Down
46 changes: 46 additions & 0 deletions src/logics/graphImpl/sigmaImpl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { animateNodes } from "sigma/utils";
import { EdgeArrowProgram } from "sigma/rendering";
import { DEFAULT_EDGE_CURVATURE, EdgeCurvedArrowProgram, indexParallelEdgesIndex } from "@sigma/edge-curve";
import FileSaver from "file-saver";
import { EdgeDisplayData, NodeDisplayData } from "sigma/types";


export const layoutOptions = ['force-directed', 'circular']
Expand Down Expand Up @@ -48,13 +49,54 @@ function createSigmaGraph(container: HTMLElement) {
})
},
});

let selectedNode: any;
let selectedEdge: any;
sigma.on("clickEdge", e => {
store.dispatch(setSelectedEdge(e.edge))
})
sigma.on("clickNode", (e) => {
store.dispatch(setSelectedNode(e.node))
selectNode(e.node);


});

sigma.setSetting("nodeReducer", (node, data) => {
const res: Partial<NodeDisplayData> = { ...data };

if (selectedNode && selectedNode !== node) {
res.color = "#f6f6f6";
}

if (selectedNode === node) {
res.highlighted = true;
}

return res;
});

sigma.setSetting("edgeReducer", (edge, data) => {
const res: Partial<EdgeDisplayData> = { ...data };

if (selectedNode && !graph.hasExtremity(edge, selectedNode)) {
res.size = 0.1;
res.color = "#f2f5f3";
}
return res;
});

function selectNode(node?: string) {
if (node) {
selectedNode = node;
}
if (!node) {
selectedNode = undefined;
}
sigma.refresh();
}


// State for drag'n'drop
let draggedNode: string | null = null;
let isDragging = false;
Expand Down Expand Up @@ -128,6 +170,10 @@ function createSigmaGraph(container: HTMLElement) {
if (jsEvent.shiftKey && !draggingEdge) {
store.dispatch(openNodeDialog({ x: params.event.x, y: params.event.y }));
}
else if (selectedNode) {
selectedNode = undefined;
sigma.refresh();
}
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Shift' && shiftKeyDown !== true) {
Expand Down

0 comments on commit 2f70923

Please sign in to comment.