BUG: Observations sometimes don't link the image properly

[sophearahsp]

Repro steps

1. Create capture with https://www.twitch.tv/alveussanctuary/clip/FastDrabBatteryKappa-Asg7k_HsCYP9IPnd?filter=clips&range=24hr&sort=time
2. Create observation around reed

3. Image doesn't link properly as seen here

The image src is http://localhost:2209/extract_436_-74_553_553/http://127.0.0.1:10000/devstoreaccount1/azurite/594ac6aa-09bb-454a-a101-9eba342ddb70.png, and has a negative extract y value for some reason. If you edit the src to 0 or a positive number, an image appears again. Simple workaround would be to set the link using the absolute value of all the extraction options but it might not crop nicely.

After experimenting with it for a bit, I think making bigger observations tend to have this problem?

[changesbyjames]

hey @sophearahsp, thank you for the bug!

this could be happening in two places:

• when making a bounding box and creating an observation, it's being calculated and saved incorrectly to the database. If you could check the numbers you're getting in the database/in the API response and see negative numbers, it's probably happening here. I would be surprised because there are explicit checks for that sort of thing.
• in the <Polaroid /> component we use the <Square /> component that attempts to change the extract parameters to make the selection into a square without cropping any of it out.

for example, this is when it works well:

in your case, i think this is what's happening:

I'm not really sure what the fix is here. I would still like to have it be a square but I don't know what's the best way to get there would be without cutting off the bounding box area?

maybe something like this where the ideal square is calculated and then it's shifted inwards?

[sophearahsp]

Hi @changesbyjames! your idea about the <Square /> was the problem. I ended up just doing your suggested fix in #23.