onNodeClick

weng-lab · Jul 31, 2024 · e5e4051 · e5e4051
1 parent dc0901b
commit e5e4051
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
@@ -58,6 +58,7 @@ const Graph: React.FC<GraphProps> = ({
   legendEdgeLabel,
   order,
   fontFamily = 'Arial',
+  onNodeClick,
 }) => {
   const cyRef = useRef<Core | null>(null);
 
@@ -363,6 +364,15 @@ const Graph: React.FC<GraphProps> = ({
       content.style.fontFamily = fontFamily;
       const tip = popperFactory(ref, content, {});
       node.on('mouseover', () => tip.show());
+      if (onNodeClick) {
+        const c = {
+          accession: node.style('label'),
+          start: 0,
+          end: 0,
+          chromosome: '',
+        };
+        node.on('click', onNodeClick(c));
+      }
       node.on('mouseout', () => tip.hide());
     });
 

diff --git a/src/components/Graph/types.ts b/src/components/Graph/types.ts
@@ -31,6 +31,7 @@ export interface Edge {
     legendEdgeLabel?: string,
     order?: string[],
     fontFamily?: string,
+    onNodeClick?: (n: { accession: string; start: number; end: number; chromosome: string }) => any,
   }
 
 

diff --git a/stories/Graph.stories.tsx b/stories/Graph.stories.tsx
@@ -141,6 +141,12 @@ SampleGraph.args = {
   getColor: setColor3,
   legendToggle: convertToSimple2,
   order: ['P', 'R', 'B'],
+  onNodeClick: (n: {
+    accession: string;
+    start: number;
+    end: number;
+    chromosome: string;
+  }) => console.log('Accession: ' + n.accession),
 };
 export const PilotDataWithCentered = Template.bind({});
 PilotDataWithCentered.args = {