feat: add reset to graph feature

app/client-v2/src/__tests__/components/ProjectView/CytoscapeCanvas.spec.ts

@@ -1,6 +1,8 @@
 import CytoscapeCanvas from "@/components/ProjectView/CytoscapeCanvas.vue";
 import { MOCK_NETWORK_GRAPH } from "@/mocks/mockObjects";
-import { render } from "@testing-library/vue";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/vue";
+import Tooltip from "primevue/tooltip";
 
 vitest.mock("cytoscape", () => ({
   default: vitest.fn(() => ({
@@ -9,15 +11,60 @@ vitest.mock("cytoscape", () => ({
 }));
 vitest.mock("cytoscape-graphml");
 describe("CytoscapeCanvas", () => {
-  it("should render div for canvas with correct classes for display", async () => {
-    const { container } = render(CytoscapeCanvas, {
+  it("should render div & buttons only for canvas with correct classes for display", async () => {
+    const { container, emitted } = render(CytoscapeCanvas, {
       props: {
-        graph: MOCK_NETWORK_GRAPH
+        graph: MOCK_NETWORK_GRAPH,
+        cluster: "test-cluster"
+      },
+      global: {
+        directives: {
+          Tooltip
+        }
       }
     });
 
+    await userEvent.click(screen.getByRole("button", { name: /fullscreen/i }));
+    console.log(emitted());
+
+    expect(screen.getByRole("button", { name: /reset/i })).toBeVisible();
+    expect(screen.getByRole("button", { name: /fullscreen/i })).toBeVisible();
     expect(container.querySelector(".shadow-5")).toHaveClass(
       "shadow-5 border-round w-full h-full m-auto flex-grow-1 text-left"
     );
   });
+
+  it("should call onFullScreen emit when fullscreen button is clicked", async () => {
+    const { emitted } = render(CytoscapeCanvas, {
+      props: {
+        graph: MOCK_NETWORK_GRAPH,
+        cluster: "test-cluster"
+      },
+      global: {
+        directives: {
+          Tooltip
+        }
+      }
+    });
+
+    await userEvent.click(screen.getByRole("button", { name: /fullscreen/i }));
+
+    expect(emitted()).toHaveProperty("onFullScreen");
+  });
+
+  it("should not render fullscreen button when isFullscreen prop is true", async () => {
+    render(CytoscapeCanvas, {
+      props: {
+        graph: MOCK_NETWORK_GRAPH,
+        cluster: "test-cluster",
+        isFullScreen: true
+      },
+      global: {
+        directives: {
+          Tooltip
+        }
+      }
+    });
+    expect(screen.queryByRole("button", { name: /fullscreen/i })).not.toBeInTheDocument();
+  });
 });

app/client-v2/src/__tests__/components/ProjectView/NetworkGraph.spec.ts

@@ -5,7 +5,7 @@ import PrimeVue from "primevue/config";
 import Tooltip from "primevue/tooltip";
 
 describe("NetworkGraph", () => {
-  it("should render graph and be able to go from fullscreen and close fullscreen mode", async () => {
+  it("should render info and graphs with correct props", async () => {
     render(NetworkGraph, {
       props: {
         graph: "test-graph",
@@ -24,21 +24,9 @@ describe("NetworkGraph", () => {
       }
     });
 
-    const clusterTextElements = screen.getAllByText(/test-cluster/i);
-    const canvasTextElements = screen.getAllByText(/cytoscape canvas/i);
+    const graph = screen.getByText("cytoscape canvas");
 
-    expect(clusterTextElements.length).toBe(1);
-    expect(canvasTextElements.length).toBe(1);
-    expect(canvasTextElements[0]).toHaveAttribute("graph", "test-graph");
-
-    await userEvent.click(screen.getByRole("button", { name: /fullscreen/i }));
-
-    expect(screen.getAllByText(/test-cluster/i).length).toBe(2);
-    expect(screen.getAllByText(/cytoscape canvas/i).length).toBe(2);
-
-    await userEvent.click(screen.getByRole("button", { name: /close/i }));
-
-    expect(screen.getAllByText(/test-cluster/i).length).toBe(1);
-    expect(screen.getAllByText(/cytoscape canvas/i).length).toBe(1);
+    expect(graph).toHaveAttribute("graph", "test-graph");
+    expect(graph).toHaveAttribute("cluster", "test-cluster");
   });
 });

app/client-v2/src/components/ProjectView/CytoscapeCanvas.vue

@@ -8,9 +8,15 @@ import { onMounted, ref } from "vue";
 
 const props = defineProps<{
   graph: string;
+  cluster: string;
+  isFullScreen?: boolean;
+}>();
+defineEmits<{
+  onFullScreen: [];
 }>();
 
 const cyRef = ref<HTMLElement | null>(null);
+const cystoscapeObj = ref<cytoscape.Core | null>(null);
 
 onMounted(async () => {
   await graphml(cytoscape, jquery);
@@ -52,10 +58,34 @@ onMounted(async () => {
   cy.ready(() => {
     (cy as CyGraphml).graphml({ layoutBy: "cose" });
     (cy as CyGraphml).graphml(props.graph);
+    cystoscapeObj.value = cy;
   });
 });
 </script>
 
 <template>
+  <div class="flex justify-content-between align-items-center">
+    <span class="text-color-secondary">Cluster: {{ props.cluster }}</span>
+    <div>
+      <Button
+        @click="cystoscapeObj?.fit()"
+        outlined
+        icon="pi pi-refresh"
+        v-tooltip.top="'Reset Layout'"
+        aria-label="Reset Layout"
+        size="small"
+        class="mr-1"
+      />
+      <Button
+        v-if="!props.isFullScreen"
+        v-tooltip.top="'Fullscreen'"
+        outlined
+        icon="pi pi-window-maximize"
+        aria-label="Fullscreen"
+        @click="$emit('onFullScreen')"
+        size="small"
+      />
+    </div>
+  </div>
   <div class="shadow-5 border-round w-full h-full m-auto flex-grow-1 text-left" ref="cyRef"></div>
 </template>

app/client-v2/src/components/ProjectView/NetworkGraph.vue

@@ -11,20 +11,10 @@ const fullScreenVisible = ref(false);
 
 <template>
   <Sidebar v-model:visible="fullScreenVisible" :header="`Cluster: ${props.cluster}`" position="full">
-    <CytoscapeCanvas :graph="props.graph" />
+    <CytoscapeCanvas :graph="props.graph" :cluster="props.cluster" isFullScreen />
   </Sidebar>
   <div class="cytoscape-graph">
-    <div class="flex justify-content-between align-items-center">
-      <span class="text-color-secondary">Cluster: {{ props.cluster }}</span>
-      <Button
-        v-tooltip.top="'Fullscreen'"
-        outlined
-        icon="pi pi-window-maximize"
-        aria-label="Fullscreen"
-        @click="fullScreenVisible = true"
-      />
-    </div>
-    <CytoscapeCanvas :graph="props.graph" />
+    <CytoscapeCanvas :cluster="props.cluster" :graph="props.graph" @onFullScreen="fullScreenVisible = true" />
   </div>
 </template>
 

app/client-v2/src/components/ProjectView/NetworkTab.vue

@@ -22,7 +22,8 @@ const { data, error, isFetching } = useFetch(`${apiUrl}/networkGraphs/${store.pr
   </div>
   <div v-else-if="data?.data">
     <InlineMessage severity="info" class="mb-2"
-      >Use default mouse gestures on graphs to zoom in and out, move nodes around or view in fullscreen</InlineMessage
+      >View in fullscreen, reset layout or use default mouse gestures on graphs to zoom in and out, move nodes
+      around.</InlineMessage
     >
     <div class="grid">
       <div v-for="(value, key) in data.data" :key="key" class="col">