GraphQL.Server.Ui.Voyager recent issues with zoom to fit

[nightroman]

The NuGet package GraphQL.Server.Ui.Voyager (the most recent 8.0.2 and older 7.7.1) started to have problems with the initial zoom to fit. The whole graph is rendered out of the screen area and it all becomes rather unusable.

I noticed this issue first on Monday but my colleague tells this started last week.

See this online example with the problem (using the package):
https://api.nexar.com/ui/voyager

and HTML copied from the above browser, with the same problem:
nexar-html-from-package.html.zip

Compare with working fine original Voyager HTML, with the same GraphQL endpoint:
nexar-voyager.html.zip
(based on the original Voyager HTML example)

[Shane32]

Here is the template that GraphQL.NET renders for the Voyager UI:

https://github.com/graphql-dotnet/server/blob/master/src/Ui.Voyager/Internal/voyager.cshtml

This file hasn't changed in 2 years; I don't know why you have two different HTML samples. In any case, it seems that it is just rendering the latest version of Voyager, as I do not see a version in the CDN reference. As such, the problem was probably caused by Voyager having released version 2.1.0 approximately 8 days ago - see https://www.npmjs.com/package/graphql-voyager?activeTab=versions.

We would accept a pull request to pin Voyager to a specific version, or changes to the file to fix the rendering bug that now occurs.

[nightroman]

why you have two different HTML samples

One is from the NuGet package, it has the issue.
Another is the Voyager official example, it works fine -- https://github.com/graphql-kit/graphql-voyager/blob/main/example/cdn/index.html

NB They use different code of initializing the renderer, maybe this is essential.

[nightroman]

Pinning to 1.3.0 seems to be working

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphql-voyager@1.3.0/dist/voyager.css" />
  <script src="https://cdn.jsdelivr.net/npm/graphql-voyager@1.3.0/dist/voyager.min.js"></script>

[nightroman]

Submitted the PR with the version pinned to 1.3.0. It seems to be the last version working, later versions have issues.
Not sure I can suggest anything better, I am not an expert in Voyager or JavaScript as such.

[Inok]

A workaround to force Voyager 1.3 on the latest GraphQL.Server.Ui.Voyager version:

app.UseGraphQLVoyager(options: new VoyagerOptions
{
    PostConfigure = (_, html) =>
        html.Replace(
            "https://cdn.jsdelivr.net/npm/graphql-voyager/",
            "https://cdn.jsdelivr.net/npm/graphql-voyager@1.3/"
        )
});

[Shane32]

Fixed in 8.0.3