dot/GraphViz diagrams are 'on top' of the TOC

[StefanBattmer]

Maybe somewhat related to #46 but not sure about this. Once the Window is below a certain width dot-Graphs will be drawn on top of the TOC on the right side:

This can be played around with here: https://www.matrix-vision.com/manuals/SDK_C/ImageAcquisition_page_0.html

This can be seen using Chrome or Firefox. Haven't tried other browsers. I am also not sure if the same would happen using the default Doxygen CSS. However here it probably doesn't surface since the TOC doesn't stay visible when scrolling down but simply moves out of sight...

We also integrated the doxygen-awesome-interactive-toc.js here. Once this kicks in everything goes back to normal.

[jothepro]

I've investigated this a bit and it seems like there is no easy solution because the svg is embedded in an iframe.
I am planning a general purpose workaround that will at least allow large dot graphics with a fixed with to be scrollable in x direction if they are too wide.
This likely won't work for your interactive graphics though.

In your case the fix should be pretty easy:

.dotgraph iframe {
  max-width: 100%;
}

Out of curiosity: How are the interactive elements in the graph generated? Is this possible with plain doxygen and graphviz?

[StefanBattmer]

Thanks for looking into this! This is a plain Doxygen/graphviz diagram. It turned interactive once we embedded your *.css stylesheet. At least this is what I thought that happened. We also migrated to Doxygen 1.9.6 during that time but I think what actually did the magic was your project ;-). First I thought this happens to all the images inside the documentation but you are right: This only happens with the \dot graphs...

The source for this particular one is this:

\dot
digraph MultiPartBufferLayout {
    ranksep=2;
    MPB [shape=record, width=2, label="{{<aPart0> Part 0|<aPart1> Part 1|...|<aPartn> Part n} | Capture Buffer}"];
    MPR [shape=record, width=4, label="{ Request | { { getBufferPart( 0 ) | { <aPart0Address> Address | <aPart0Size> DataSize | ... } }|{ getBufferPart( 1 ) | { <aPart1Address> Address | <aPart1Size> DataSize | ... } }|{ getBufferPart( ... ) | { Address | DataSize| ... } }|{ getBufferPart( n ) | { <aPartnAddress> Address | <aPartnSize> DataSize | ... } } } }"];

    node [shape=plaintext];
    API -> Memory
    MPR:aPart0Address -> MPB:aPart0;
    MPR:aPart1Address -> MPB:aPart1;
    MPR:aPartnAddress -> MPB:aPartn;

    { rank=same; Memory; MPB; }
    { rank=same; API; MPR; }
}
\enddot

So nothing too fancy... In the meantime for now we removed all the \tableofcontents tags from our online documentation since it really looks very nice anyway when your stylesheet is applied.

[jothepro]

Hm. There must be something different in your setup that made the interactive elements appear. It's definitely not part of the theme, I didn't even know one could embed Graphviz like this.

In my case it renders like this:

As you can see I am working on a fix where a scrollbar appears if the image is too wide. Not nice but it's all I can do for now I guess.

I am using Graphviz 7.1.0 and Doxygen 1.9.6

[StefanBattmer]

You are right! I think this is what does the trick: https://www.doxygen.nl/manual/config.html#cfg_interactive_svg

[jothepro]

Graphviz graphs are now supported in v2.2.0
I've also documented how to deal with the interactive graphs here.

Closing this issue now. Pls reopen if you still have issues with the provided fixes.

[StefanBattmer]

Just checked with our documentation and can confirm everything looks very nice now! Thanks a lot!