Merge pull request #40 from sarbull/react

Add onNodeClick callback function
odpi · Aug 5, 2022 · faff0a2 · faff0a2
2 parents f307d3f + f7eea19
commit faff0a2
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -2,7 +2,7 @@ import { iconsMap, linksTypeIconMap, itemGroupIconMap } from "egeria-js-commons"
 export declare const simpleSquareIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0H20V20H0V0Z\" fill=\"white\"/></svg>";
 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
@@ -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={<HappiGraphActions rawData={{...rawData}}/>} />
+                  actions={<HappiGraphActions rawData={{...rawData}}/>}
+                  onNodeClick={(d: any) => console.log(d)} />
     </div>
   </>;
 }
diff --git 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<Props, State> {
               })
     }, () => {
       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
@@ -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()