diff --git a/dist/esm/happi-graph.component.js b/dist/esm/happi-graph.component.js index 8528dd8..fcf8e27 100644 --- a/dist/esm/happi-graph.component.js +++ b/dist/esm/happi-graph.component.js @@ -111,10 +111,11 @@ class HappiGraph extends React.Component { }) }, () => { const { zoom } = this.state; + const { onNodeClick } = this.props; svg .call(zoom) .on('dblclick.zoom', null); - addNodes(nodes, nodesGroup, graphDirection); + addNodes(nodes, nodesGroup, graphDirection, onNodeClick); addLinks(links, linksGroup, graphDirection, nodes); centerGraph(allGroup, svg, zoom); }); diff --git a/dist/esm/happi-graph.render.js b/dist/esm/happi-graph.render.js index 72f6756..11f3199 100644 --- a/dist/esm/happi-graph.render.js +++ b/dist/esm/happi-graph.render.js @@ -154,7 +154,7 @@ const addHeader = (nodeGroup) => { .classed('label', true) .text((d) => d.label); }; -const addNodes = (nodes, nodesGroup, graphDirection) => { +const addNodes = (nodes, nodesGroup, graphDirection, onNodeClick) => { let _nodesGroup = nodesGroup .selectAll() .data(nodes) @@ -163,7 +163,7 @@ const addNodes = (nodes, nodesGroup, graphDirection) => { .append('g') .classed('node-group', true) .attr('id', (d) => d.id) - .on('click', () => { console.log('CLICKED'); }) + .on('click', (d) => { onNodeClick ? onNodeClick(d.target.__data__) : console.log('ON_NODE_CLICK_NOT_IMPLEMENTED'); }) .attr('transform', (d) => `translate(${d.x}, ${d.y})`) .call(d3.drag() .on('start', (d) => { diff --git a/dist/types/happi-graph.component.d.ts b/dist/types/happi-graph.component.d.ts index 918183d..a28e55b 100644 --- a/dist/types/happi-graph.component.d.ts +++ b/dist/types/happi-graph.component.d.ts @@ -3,6 +3,7 @@ interface Props { actions: any; algorithm?: string; selectedNodeId: string; + onNodeClick?: Function; rawData: any; debug?: boolean; graphDirection?: string; diff --git a/dist/types/happi-graph.render.d.ts b/dist/types/happi-graph.render.d.ts index 2865dee..eeab0c9 100644 --- a/dist/types/happi-graph.render.d.ts +++ b/dist/types/happi-graph.render.d.ts @@ -2,7 +2,7 @@ import { iconsMap, linksTypeIconMap, itemGroupIconMap } from "egeria-js-commons" export declare const simpleSquareIcon = ""; export declare const addProperties: (nodeGroup: any) => void; export declare const addIcon: (nodeGroup: any, iconsMap: any) => void; -declare const addNodes: (nodes: any, nodesGroup: any, graphDirection: string) => void; +declare const addNodes: (nodes: any, nodesGroup: any, graphDirection: string, onNodeClick?: Function) => void; declare const centerGraph: (allGroup: any, svg: any, zoom: any) => void; declare const customZoom: (value: number, zoom: any, svg: any) => void; declare const customZoomIn: (zoom: any, svg: any) => void; diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index ed8dc64..fc8056d 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -23,7 +23,8 @@ export function App() { debug={false} graphDirection={"VERTICAL"} selectedNodeId={"term@68e36496-7167-4af7-abdd-a0cd36e24084:6662c0f2.e1b1ec6c.66k78i6du.uchsna1.rn2epa.rfn2fjqf7h4qvmt5lflm8"} - actions={} /> + actions={} + onNodeClick={(d: any) => console.log(d)} /> ; } diff --git a/src/components/HappiGraph/happi-graph.component.tsx b/src/components/HappiGraph/happi-graph.component.tsx index e49e53c..e6ee1ef 100644 --- a/src/components/HappiGraph/happi-graph.component.tsx +++ b/src/components/HappiGraph/happi-graph.component.tsx @@ -23,6 +23,7 @@ interface Props { actions: any; algorithm?: string; selectedNodeId: string; + onNodeClick?: Function; rawData: any; debug?: boolean; graphDirection?: string; @@ -188,12 +189,13 @@ class HappiGraph extends React.Component { }) }, () => { const { zoom } = this.state; + const { onNodeClick } = this.props; svg .call(zoom) .on('dblclick.zoom', null); - addNodes(nodes, nodesGroup, graphDirection); + addNodes(nodes, nodesGroup, graphDirection, onNodeClick); addLinks(links, linksGroup, graphDirection, nodes); centerGraph(allGroup, svg, zoom); diff --git a/src/components/HappiGraph/happi-graph.render.ts b/src/components/HappiGraph/happi-graph.render.ts index efe32ee..8bba6c5 100644 --- a/src/components/HappiGraph/happi-graph.render.ts +++ b/src/components/HappiGraph/happi-graph.render.ts @@ -197,7 +197,7 @@ const addHeader = (nodeGroup: any) => { .text((d: any) => d.label); }; -const addNodes = (nodes: any, nodesGroup: any, graphDirection: string) => { +const addNodes = (nodes: any, nodesGroup: any, graphDirection: string, onNodeClick?: Function) => { let _nodesGroup: any = nodesGroup .selectAll() .data(nodes) @@ -208,7 +208,7 @@ const addNodes = (nodes: any, nodesGroup: any, graphDirection: string) => { .append('g') .classed('node-group', true) .attr('id', (d: any) => d.id) - .on('click', () => { console.log('CLICKED'); }) + .on('click', (d: any) => { onNodeClick ? onNodeClick(d.target.__data__) : console.log('ON_NODE_CLICK_NOT_IMPLEMENTED'); }) .attr('transform', (d: any) => `translate(${d.x}, ${d.y})`) .call( d3.drag()