Weird problem with sizing

[Tsuiban]

I'm trying to overlay three graphs on top of each other, each in a different colour. To do this, I'm using Path elements for each graph, placing them inside a rectangle. It looks like this:
`import { Button, GridBox, HorizontalBox, LineEdit, VerticalBox } from "std-widgets.slint";

export component AppWindow inherits Window {
in-out property file-name <=> file-line-edit.text;
in property start-date: "Jan 1, 1962 00:00:00";
in property end-date: "Dec 31, 2100 23:59:59";
in property detail-start-date: "Jan 1, 1962 00:00:00";
in property detail-end-date: "Dec 31, 2100 23:59:39";
in property min-boat-speed: 0;
in property max-boat-speed: 30;
in property min-wind-speed: 0;
in property max-wind-speed: 30;

pure callback summary-svg-commands(length, length) -> string;
pure callback boat-speed-svg-commands(length, length, length, length) -> string;
pure callback wind-speed-svg-commands(length, length) -> string;
pure callback wind-direction-svg-commands(length, length) -> string;

HorizontalBox {
    VerticalBox {
        HorizontalBox {

            Button {
                text: "File";
            }
            Rectangle {
                border-width: 1px;
                border-color: black;

                clip: true;

                file-line-edit := LineEdit {
                    width: 100%;
                }
            }
        }
        GridBox {
            spacing-horizontal: 5px;

            Row {
                Rectangle {
                    colspan: 2;
                    clip: true;

                    Text {
                        text: "Date Range";
                        horizontal-alignment: center;
                    }
                }
                Rectangle {
                    col: 2;
                    colspan: 2;
                    clip: true;

                    Text {
                        text: "Boatspeed Range";
                        horizontal-alignment: center;
                        color: darkgreen;
                    }
                }
                Rectangle {
                    colspan: 2;
                    col: 4;
                    clip: true;

                    Text {
                        text: "Windspeed Range";
                        horizontal-alignment: center;
                        color: darkred;
                    }
                }
            }
            Row {
                Rectangle {
                    border-width: 1px;
                    border-color: black;
                    Text {
                        text: root.start-date;
                        horizontal-alignment: center;
                    }
                }
                Rectangle {
                    border-width: 1px;
                    border-color: black;
                    Text {
                        text: root.end-date;
                        horizontal-alignment: center;
                    }
                }
                Rectangle {
                    border-width: 1px;
                    border-color: black;
                    background: darkgreen;
                    Text {
                        text: root.min-boat-speed;
                        horizontal-alignment: center;
                        color: white;
                    }
                }
                Rectangle {
                    border-width: 1px;
                    border-color: black;
                    background: darkgreen;
                    Text {
                        text: root.max-boat-speed;
                        horizontal-alignment: center;
                        color: white;
                    }
                }
                Rectangle {
                    border-width: 1px;
                    border-color: black;
                    background: darkred;
                    Text {
                        text: root.min-wind-speed;
                        horizontal-alignment: center;
                        color: white;
                    }
                }
                Rectangle {
                    border-width: 1px;
                    border-color: black;
                    background: darkred;
                    Text {
                        text: root.max-wind-speed;
                        horizontal-alignment: center;
                        color: white;
                    }
                }
            }
            Row {
                Rectangle {
                    colspan: 6;
                    border-width: 1px;
                    border-color: black;
                    clip: true;
                    min-width: 640px;
                    height: 20px;

                    summary-graph := Path {
                        commands: root.summary-svg-commands(self.width, self.height);
                        stroke: goldenrod;
                        stroke-width: 1px;
                        clip: true;
                    }
                }
            }
            // Everything above here renders correctly, or at least as I expect.
            Row {
                Rectangle {
                    colspan: 6;
                    border-width: 1px;
                    border-color: black;
                    clip: true;

                    min-height: 200px;
                    min-width: 640px;

                    // This path box renders a LOT smaller than the following two...
                    wind-direction-graph := Path {
                        width: parent.width - 2px;
                        height: parent.height - 2px;

                        commands: root.wind-direction-svg-commands(self.width, self.height);
                        stroke: blue;
                        stroke-width: 1px;
                    }

                    // Everything below here renders as I expect, taking up the full area of the rectangle
                    wind-speed-graph := Path {
                        width: parent.width - 2px;
                        height: parent.height - 2px;

                        commands: root.wind-speed-svg-commands(self.width, self.height);
                        stroke: darkred;
                        stroke-width: 1px;
                    }

                    boat-speed-graph := Path {
                        width: parent.width - 2px;
                        height: parent.height - 2px;

                        commands: root.boat-speed-svg-commands(self.width, self.height, parent.width, parent.height);
                        stroke: darkgreen;
                        stroke-width: 1px;
                    }
                }
            }
            Row {
                Text {
                    colspan: 3;
                    horizontal-alignment: left;
                    text: root.detail-start-date;
                }
                Text {
                    col: 3;
                    colspan: 3;
                    horizontal-alignment: right;
                    text: root.detail-end-date;
                }
            }
        }
    }
}

}

You can see from the following screen shot that the blue box is a lot smaller than the other two, even though all three have their height and width set to the (same) parent's height and width minus 2 pixels.

the first commands of each SVG are format!("M 0 {1} L 0 0 L {1} 0 L {0} {1} L 0 {1}", height, width); I've verified that the commands really are using height of the rectangle - 2 pixels and width of the rectangle minus 2 pixels.

Any idea why one of the paths are so small? (all three SVG paths use the same preamble)

[hunger]

I do not see a smoking gun in the slint code.

Did you check the callbacks into your business logic? They apparently generate the SVG commands you render. Does the wind direction graph return the same size output as the others?

[Tsuiban]

That's the crazy thing. Both the wind graph and the speed graph use the same routine with the same parameters other than colour. Of course, the data is different, but that should be sized appropriately, yes? The blue rectangle you see is the size of the resulting Path box, just as the green rectangle is the size of the resulting Path box for that item.

If I manually clip the range of the data on the y axis (applying a limit function to the data), then the blue box grows to be the same size as the green box.

It seems that the box is not clipping the values automatically?

[hunger]

As a quick test: You could switch the svg-generator functions around and check whether that changes the graph that's rendered too small.

Slint does not clip by default. That's what clip: true; is for, as you do in the rectangle containing all three graphs.