No Thumbnail with SVG image

[corbym]

I am trying to add an SVG image to a jgiven report as an attachment:

 public Attachment generateUml() {
        final String interactions = testInteractions.stream().map(it ->
                it.getFrom() + " -> " + it.getTo() + " [[" + linkToAttachment(it) + "]] : " + it.getType().name().toLowerCase()
        ).collect(Collectors.joining("\n", "@startuml\n", "\n@enduml\n"));
        final SourceStringReader reader = new SourceStringReader(interactions);

        try (final ByteArrayOutputStream outputStream = new ByteArrayOutputStream()) {
            if(reader.outputImage(outputStream, new FileFormatOption(FileFormat.SVG)) == null){
                throw new RuntimeException("unable to generate image:" + outputStream);
            };
            return Attachment.fromText(outputStream.toString(), MediaType.imageUtf8("svg+xml; charset=utf-8"))
                    .withTitle("System Interactions")
                    .withFileName("interactions-" + UUID.randomUUID().toString().substring(0, 10));
        } catch (IOException e) {
            throw new RuntimeException("could not generate sequence diagram", e);
        }
    }

However, there are a number of problems:

1. The image has no thumbnail version (and so looks strange in the report). Clicking the link renders the image correctly in the browser.

2. inlining it does so correctly but renders it unable to function correctly (the image has hover overs and links in it). You cannot click the image to open it in the browser, however.

3. I cannot just use the SVG MediaType enum provided as this cannot be rendered correctly by the report. I need to do the MediaType.imageUtf8("svg+xml; charset=utf-8") dance for jgiven to render it at all.. it gets the incorrect file extension when it's mediatype is assessed by the report generation step.

What is the correct way to do this? Please help.

[l-1squared]

Hi @corbym,
we will be glad to look into this issue. In the meantime could you provide an executable example?

[corbym]

I can write a test without all the plantuml generation stuff - it should run with vanilla jgiven dependencies, is this acceptable?

// .. package and imports etc

@ExtendWith(JGivenExtension.class)
public class SvgJGivenTest extends SimpleScenarioTest<SvgJGivenTest.SimpleStage> {

    @Test
    public void svgThumbnailIsNotShown() {
        given().something();
        when().iDoSomethingeElse();
        then().iCheckWhatHappened();
    }

    @JGivenStage
    public static class SimpleStage {
        @ScenarioState
        CurrentStep currentStep;

        public SimpleStage something() {
            return this;
        }

        public SimpleStage iDoSomethingeElse() {
            currentStep.addAttachment(
                    Attachment.fromText(svgText(), MediaType.imageUtf8("svg+xml; charset=utf-8"))
                            .withTitle("System Interactions")
                            .withFileName("interactions"));
            return this;
        }

        private String svgText() {
            return "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" contentScriptType=\"application/ecmascript\" contentStyleType=\"text/css\" height=\"221px\" preserveAspectRatio=\"none\" style=\"width:295px;height:221px;background:#FFFFFF;\" version=\"1.1\" viewBox=\"0 0 295 221\" width=\"295px\" zoomAndPan=\"magnify\"><defs><filter height=\"300%\" id=\"fn3yvorrca0j1\" width=\"300%\" x=\"-1\" y=\"-1\"><feGaussianBlur result=\"blurOut\" stdDeviation=\"2.0\"/><feColorMatrix in=\"blurOut\" result=\"blurOut2\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0\"/><feOffset dx=\"4.0\" dy=\"4.0\" in=\"blurOut2\" result=\"blurOut3\"/><feBlend in=\"SourceGraphic\" in2=\"blurOut3\" mode=\"normal\"/></filter></defs><g><line style=\"stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;\" x1=\"30\" x2=\"30\" y1=\"40.4883\" y2=\"177.7305\"/><line style=\"stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;\" x1=\"263.5\" x2=\"263.5\" y1=\"40.4883\" y2=\"177.7305\"/><rect fill=\"#FEFECE\" filter=\"url(#fn3yvorrca0j1)\" height=\"30.4883\" style=\"stroke:#A80036;stroke-width:1.5;\" width=\"47\" x=\"5\" y=\"5\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" lengthAdjust=\"spacing\" textLength=\"33\" x=\"12\" y=\"25.5352\">Alice</text><rect fill=\"#FEFECE\" filter=\"url(#fn3yvorrca0j1)\" height=\"30.4883\" style=\"stroke:#A80036;stroke-width:1.5;\" width=\"47\" x=\"5\" y=\"176.7305\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" lengthAdjust=\"spacing\" textLength=\"33\" x=\"12\" y=\"197.2656\">Alice</text><rect fill=\"#FEFECE\" filter=\"url(#fn3yvorrca0j1)\" height=\"30.4883\" style=\"stroke:#A80036;stroke-width:1.5;\" width=\"40\" x=\"241.5\" y=\"5\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" lengthAdjust=\"spacing\" textLength=\"26\" x=\"248.5\" y=\"25.5352\">Bob</text><rect fill=\"#FEFECE\" filter=\"url(#fn3yvorrca0j1)\" height=\"30.4883\" style=\"stroke:#A80036;stroke-width:1.5;\" width=\"40\" x=\"241.5\" y=\"176.7305\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" lengthAdjust=\"spacing\" textLength=\"26\" x=\"248.5\" y=\"197.2656\">Bob</text><polygon fill=\"#A80036\" points=\"251.5,67.7988,261.5,71.7988,251.5,75.7988,255.5,71.7988\" style=\"stroke:#A80036;stroke-width:1.0;\"/><line style=\"stroke:#A80036;stroke-width:1.0;\" x1=\"30.5\" x2=\"257.5\" y1=\"71.7988\" y2=\"71.7988\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"13\" lengthAdjust=\"spacing\" textLength=\"147\" x=\"37.5\" y=\"67.0566\">Authentication Request</text><polygon fill=\"#A80036\" points=\"41.5,97.1094,31.5,101.1094,41.5,105.1094,37.5,101.1094\" style=\"stroke:#A80036;stroke-width:1.0;\"/><line style=\"stroke:#A80036;stroke-width:1.0;stroke-dasharray:2.0,2.0;\" x1=\"35.5\" x2=\"262.5\" y1=\"101.1094\" y2=\"101.1094\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"13\" lengthAdjust=\"spacing\" textLength=\"157\" x=\"47.5\" y=\"96.3672\">Authentication Response</text><polygon fill=\"#A80036\" points=\"251.5,126.4199,261.5,130.4199,251.5,134.4199,255.5,130.4199\" style=\"stroke:#A80036;stroke-width:1.0;\"/><line style=\"stroke:#A80036;stroke-width:1.0;\" x1=\"30.5\" x2=\"257.5\" y1=\"130.4199\" y2=\"130.4199\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"13\" lengthAdjust=\"spacing\" textLength=\"199\" x=\"37.5\" y=\"125.6777\">Another authentication Request</text><polygon fill=\"#A80036\" points=\"41.5,155.7305,31.5,159.7305,41.5,163.7305,37.5,159.7305\" style=\"stroke:#A80036;stroke-width:1.0;\"/><line style=\"stroke:#A80036;stroke-width:1.0;stroke-dasharray:2.0,2.0;\" x1=\"35.5\" x2=\"262.5\" y1=\"159.7305\" y2=\"159.7305\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"13\" lengthAdjust=\"spacing\" textLength=\"209\" x=\"47.5\" y=\"154.9883\">Another authentication Response</text><!--MD5=[21844f63476f3838ec05329fb1d94a5f]\n" +
                    "@startuml\n" +
                    "Alice -> Bob: Authentication Request\n" +
                    "Bob - -> Alice: Authentication Response\n" +
                    "\n" +
                    "Alice -> Bob: Another authentication Request\n" +
                    "Alice <- - Bob: Another authentication Response\n" +
                    "@enduml\n" +
                    "\n" +
                    "PlantUML version 1.2021.9(Sun Jul 25 11:13:56 BST 2021)\n" +
                    "(GPL source distribution)\n" +
                    "Java Runtime: OpenJDK Runtime Environment\n" +
                    "JVM: OpenJDK 64-Bit Server VM\n" +
                    "Default Encoding: UTF-8\n" +
                    "Language: en\n" +
                    "Country: GB\n" +
                    "--></g></svg>";
        }

        public SimpleStage iCheckWhatHappened() {
            return this;
        }
    }
}

[corbym]

Some things I have noticed:

• there is no thumbnail generated at all - the link points to a missing file
• if I change the mediatype to MediaType.SVG_UTF_8, the extension is incorrect - interactions.svg+xml, the image is not rendered (because the extension is incorrect) AND the thumbnail is still missing.

[l-1squared]

From @andru47 who took a look into the issue:
"Apparently the SVG media type is not recognized properly and it is not recognized as binary" The latter is somewhat understandable, SVG is not a binary format."
We will try to figure out how to fix the issues.

[l-1squared]

Hi @corbym so we found out that JGiven does not consider SVG a binary file (because it isn't one) and consequently does not produce a thumbnail for it.
We are working on a fix for it

A separte problem is that the HTML display app seems to not handle SVG in the same manner as image attachments either. They should be displayed, but will lack some convenince features.

The HTML app unfortunately requires more analysis.

[corbym]

Some more thoughts:

1. Inlining the SVG might be better done as an XML island. I don't know how possible this is.
2. SVGs can be rendered by the image tag, so perhaps a thumbnail is not required, just an image tag with width and height specified pointing at the original SVG file? In fact, why not do this for all images rather than have a separate thumbnail? (Quality might suffer perhaps?)
3. (Separate issue) attachments of any kind are hard to spot on the resulting html page. What about a collapsible table underneath the stage listing them clearly instead of paperclips? If there are a lot of attachments, it's hard to find the one you want presently.

[l-1squared]

Some more thoughts:

1. Inlining the SVG might be better done as an XML island. I don't know how possible this is.
2. SVGs can be rendered by the image tag, so perhaps a thumbnail is not required, just an image tag with width and height specified pointing at the original SVG file? In fact, why not do this for all images rather than have a separate thumbnail? (Quality might suffer perhaps?)
3. (Separate issue) attachments of any kind are hard to spot on the resulting html page. What about a collapsible table underneath the stage listing them clearly instead of paperclips? If there are a lot of attachments, it's hard to find the one you want presently.

@andru47 please have a look at Matt's suggestions

[andru47]

Hi @corbym,
Thanks for all the ideas you provided.
I have spent some hours trying to research this problem and my initial thought was to convert the SVG file into a PNG so we can scale down the thumbnail using the existing code. I did that and the images are scaled down to 20px width/height. That seemed weird and I inspected how the html app works for normal images (not svg). The -thumb file is not used and the image before hovering has a % of width/height set as you mentioned at 2.

With that in mind, the next step would be to modify and publish the npm html app to fix how svg files are handled. We will keep you updated and we will also take into the account the feedback for general attachments.

[andru47]

Hi again,
After more research it seems that I got it wrong the first time. The problem was with the thumbnail, not with the situations when we want to showDirectly the SVG file.
The html-app didn't have any bugs in it and the solution can be found in the PR I linked.
Thank you again for reporting this.