From d51616d82a501f47efa65a21a17415a6c32d7c1a Mon Sep 17 00:00:00 2001
From: Harry Li <harry.li@ll.mit.edu>
Date: Wed, 29 Jan 2025 11:59:48 -0500
Subject: [PATCH] added graph recenter button

---
 .../QueryGraph/QueryGraph.module.scss         | 11 +++++++++
 .../QueryGraph/QueryGraph.tsx                 | 24 +++++++++++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 src/components/QueryVisualization/QueryGraph/QueryGraph.module.scss

diff --git a/src/components/QueryVisualization/QueryGraph/QueryGraph.module.scss b/src/components/QueryVisualization/QueryGraph/QueryGraph.module.scss
new file mode 100644
index 0000000..c3cc5fc
--- /dev/null
+++ b/src/components/QueryVisualization/QueryGraph/QueryGraph.module.scss
@@ -0,0 +1,11 @@
+#graph-container {
+  height: 400px;
+
+  position: relative;
+
+  .recenter-button {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/QueryVisualization/QueryGraph/QueryGraph.tsx b/src/components/QueryVisualization/QueryGraph/QueryGraph.tsx
index b69f30e..e48c042 100644
--- a/src/components/QueryVisualization/QueryGraph/QueryGraph.tsx
+++ b/src/components/QueryVisualization/QueryGraph/QueryGraph.tsx
@@ -1,17 +1,20 @@
 // Copyright (c) 2024 Massachusetts Institute of Technology
 // SPDX-License-Identifier: MIT
 
-import {useMemo} from "react";
+import {useMemo, useRef} from "react";
 
 import Graphin, {Components, LegendChildrenProps} from "@antv/graphin";
 import '@antv/graphin/dist/index.css';
-import { Title } from '@mantine/core';
+import { ActionIcon, Button, Title } from '@mantine/core';
 
 import { useAppSelector } from "redux/store.ts";
 
 import { parseSparqlQuery } from "utils/parseSparqlQuery.ts";
 import { transformTripleQueryToGraphin } from "utils/transformTripleDataToGraphin.ts";
 import { useQueryGetIDTableEntitiesFromQuery } from "utils/knowledgeBase/getEntityData.ts";
+import { IconFocus } from "@tabler/icons-react";
+
+import styles from "./QueryGraph.module.scss"
 
 const { Legend } = Components;
 
@@ -26,19 +29,32 @@ export const QueryGraph = () => {
         return transformTripleQueryToGraphin(semanticTriples, idTableEntities||undefined);
     }, [queryValue, idTableEntities]);
 
+    const graphRef = useRef<Graphin>(null)
+    const center = () => {
+        if(graphRef.current) {
+            const graph = graphRef.current.graph;
+            graph.fitView(); // Re-centers and fits graph to view
+        }
+    }
+
+
     if(queryGraphData.nodes.length===0) return null
 
     return (
         <div>
             <Title style={{color:"white", marginLeft: 13, marginBottom: 7, marginTop: 7, padding: 1}} order={4}>Query Structure Graph</Title>
-            <div style={{height: '400px'}}>
-                <Graphin data={queryGraphData} layout={{type: 'dagre', rankdir: 'LR'}} style={{minHeight: "unset"}}>
+            <div id={styles["graph-container"]}>
+                <Graphin data={queryGraphData} ref={graphRef} layout={{type: 'dagre', rankdir: 'LR'}} style={{minHeight: "unset"}}>
                     <Legend bindType="node" sortKey="data.type">
                         {(renderProps: LegendChildrenProps) => {
                             return <Legend.Node {...renderProps} />;
                         }}
                     </Legend>
                 </Graphin>
+
+                <ActionIcon className={styles["recenter-button"]} size="sm" variant="filled" aria-label="Center" onClick={() => center()}>
+                    <IconFocus/>
+                </ActionIcon>
             </div>
         </div>
     )