Initialize SVG viewBox to prevent zoom control jump on first interaction

[Copilot]

The zoom control caused the graph to unexpectedly resize on first click at 100% because the SVG's viewBox attribute was uninitialized until user interaction.

Changes

• Added viewBox initialization in docs/ssvc-explorer/simple.js line 134 when creating the SVG element

Before:

svg = d3.select(selector).append("svg")
    .attr("xmlns","http://www.w3.org/2000/svg")
    .attr("preserveAspectRatio","none")
    .attr("class","mgraph")
    .attr("width", svg_width)
    .attr("height", svg_height)
    .append("g")

After:

svg = d3.select(selector).append("svg")
    .attr("xmlns","http://www.w3.org/2000/svg")
    .attr("preserveAspectRatio","none")
    .attr("class","mgraph")
    .attr("width", svg_width)
    .attr("height", svg_height)
    .attr("viewBox", "0 0 " + svg_width + " " + svg_height)
    .append("g")

The viewBox now matches the dimensions at 100% zoom (zf=1.0), consistent with the zoom control's calculation on line 124.

Demonstration

Before fix: First click at 100% zoom causes content to jump/resize

After fix: Content remains stable at initial 100% zoom

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Zoom control on the graph view module is activated on first click only</issue_title>
<issue_description>Describe the bug
This bug was observed when trying to fix the graph view cutting bug. The zoom control uses a viewbox attribute in SVG which seems to be not set to anything until a user does his first click on the zoom control.

To Reproduce

1. To go SSVC Explorer and then
2. Click on Graph tab to see the Graph
3. Now click on the zoom controller icon - the graph will change even if the zoom is set to 100%

Expected behavior
The graph zoom view should be at 100% for the first initial setup. Looks like viewbox attribute is not initially set causing this.

</issue_description>

<agent_instructions>Hey Copilot,

In the original code the zoom controller code in L125 of code docs/ssvc-explorer/simple.js However the viewBox is not set when the SVG is created. Can you help fix this so the SVG is created with a default view box that matches it height and width? Basically in L128 - variable object svg should set the viewbox attribute during the d3.append statement.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Zoom control on the graph view module is activated on first click only #1025

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[sei-vsarvepalli]

Copilot you worked hard to get this one line done! You are hard worker.

[Copilot]

Pull Request Overview

This PR adds a viewBox attribute to an SVG element to improve its scalability and responsive behavior. The viewBox attribute enables the SVG to scale proportionally when its container dimensions change.

Key Changes

• Added viewBox attribute to the SVG element with coordinates matching the width and height dimensions

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.