From 03eac685d5580d6730bfb13c3d42c3c620497d9b Mon Sep 17 00:00:00 2001
From: Ronit0104123 <ronitj0104@gmail.com>
Date: Sun, 3 Aug 2025 20:54:01 +0530
Subject: [PATCH] added node expansion feature

---
 src/components/OutputPanel.vue        |  7 ++++-
 src/components/output/GraphOutput.vue | 41 +++++++++++++++++++++++----
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/components/OutputPanel.vue b/src/components/OutputPanel.vue
index d50e8d7..335f032 100644
--- a/src/components/OutputPanel.vue
+++ b/src/components/OutputPanel.vue
@@ -107,6 +107,11 @@ const handleEditorHeightChange = (newHeight) => {
   outputPanel.value.style.height = `${height + diff}px`;
 };
 
+const handleNodeExpanded = ({ newNodes, newRels }) => {
+  nodes.value.push(...newNodes);
+  relationships.value.push(...newRels);
+};
+
 onMounted(() => {
   run(props.query, props.queryTypeInput);
   if (!props.disableResizer) {
@@ -184,7 +189,7 @@ onMounted(() => {
               v-if="nodes.length"
               class="output-tab-panel"
             >
-              <GraphOutput :nodes="nodes" :relationships="relationships" />
+              <GraphOutput :nodes="nodes" :relationships="relationships" @nodeExpanded="handleNodeExpanded"/>
             </q-tab-panel>
             <q-tab-panel
               name="table"
diff --git a/src/components/output/GraphOutput.vue b/src/components/output/GraphOutput.vue
index 3d5be7b..fc98427 100644
--- a/src/components/output/GraphOutput.vue
+++ b/src/components/output/GraphOutput.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { ref, onMounted, onUnmounted, watch, inject } from "vue";
 import { NVL } from "@neo4j-nvl/base";
 import {
   ZoomInteraction,
@@ -9,6 +9,8 @@ import {
   ClickInteraction,
 } from "@neo4j-nvl/interaction-handlers";
 
+const Neo4jApi = inject("Neo4jApi");
+const emit = defineEmits(['nodeExpanded']);
 const props = defineProps(["nodes", "relationships"]);
 
 const graph = ref();
@@ -62,9 +64,36 @@ const reset = () => {
   nvl.resetZoom();
 };
 
-const nodeExpansion = () => {
-  console.log("Expand:", nodeRightClickMenu.value.node);
-};
+const fetchConnectedNodes = async (nodeId) => {
+  const cypher = `
+    MATCH (n)
+    WHERE elementId(n) = "${nodeId}"
+    MATCH (n)-[r]->(m)
+    WITH type(r) AS relType, r, m
+    WITH relType, collect({r: r, m: m}) AS connections
+    UNWIND connections[..1] AS conn
+    RETURN conn.r AS rel, conn.m AS target
+  `
+  const res = await Neo4jApi.run(cypher);
+  return {
+    nodes: res.graph?.nodes || [],
+    relationships: res.graph?.relationships || []
+  }
+}
+
+const nodeExpansion = async (nodeId) => {
+  const { nodes: newNodes, relationships: newRels, rows: newRows, columns: newCols } = await fetchConnectedNodes(nodeId);
+  if(newNodes.length){
+    nvl.addAndUpdateElementsInGraph([...newNodes], [...newRels]);
+    emit('nodeExpanded', {
+      newNodes,
+      newRels
+    });
+  }
+  else{
+    console.log("node is not expandable");
+  }
+}
 
 const updateNvlElementselectedElement = (element) => {
   if (!element && selectedElement.value.clicked) {
@@ -218,9 +247,9 @@ onUnmounted(() => {
 <template>
   <div class="graph">
     <div ref="graph">
-      <q-menu :target="nodeRightClickMenu.clicked" context-menu>
+      <q-menu v-model="nodeRightClickMenu.clicked" context-menu>
         <q-list dense>
-          <q-item clickable v-close-popup @click="nodeExpansion">
+          <q-item clickable v-close-popup @click="() => nodeExpansion(nodeRightClickMenu.node?.id)">
             <q-item-section>Expand</q-item-section>
           </q-item>
         </q-list>