Family tree and related image functionality

[dyner]

We will be using automatic image recognition to detect if an image is in the same family tree (derived from the same source). This will save the user from having to manually find and link images together.

In the UI we need to add to the photo view a small gallery with:

• [ ] Show the images that are derived from same image (color corrected, cropped, etc). This will be called and titled "Derivatives".
• [ ] Show images similar to this image. This will be called and titled "Related"

I'm thinking that we can fit this gallery section under the image so the user can scroll down to see it.

[andreyvolokitin]

So basically same main gallery view, but under the photo

[AllAboutLearningPress]

So basically same main gallery view, but under the photo

Yes, that's what I'm thinking. I'm open to any suggestions.

[andreyvolokitin]

That should be fine. Alternative would be going to a separate page. But if it can be fit under the image, not much change. Though sidebar show/hide will introduce more visual jank because now not only image is resized, but also a whole gallery things recalculating

[andreyvolokitin]

Visual jank meaning animation stuttering while opening/closing a sidebar, and it actually happens. Also this will introduce more "scrollbar clutter" (sidebar and page scrollbars): https://i.imgur.com/q4GKVib.png

Possible solutions:

• go to a separate view/page (currently I made it like so, "see main image" goes back to the image view: https://i.imgur.com/Q5PZHzP.png)
• I don't consider opening a modal, because it is very similar to going to separate page, but with worse UX and more complex code
• put related image galleries below, but keep them unaffected by a details sidebar (so it will overlay them when open). And "scrollbar clutter" will still happen
• things like "hide galleries, do sidebar sidebar animation, show and recalculate galleries" can be considered, but not sure if it will make enough sense, and also this is more dependant on the final/rewritten pig.js code/workings, which isn't yet available. And "scrollbar clutter" will still happen
• removing sidebar animation will cause removing animation also for main content sidebar for consistency. And "scrollbar clutter" will still happen

[AshrafAkon]

I think the image details should be on a permanent sidebar. Because whenever user clicks on a image from related galleries it will open another page for that image. So we dont need to open/close side bar for all of the image. The sidebar on right should only be for the image its showing. Also we can get away with showing 8-10 related images and a show-more button. That show more button will load more images if requested by user. Same goes for the "derivatives".

[andreyvolokitin]

I think the image details should be on a permanent sidebar. Because whenever user clicks on a image from related galleries it will open another page for that image. So we dont need to open/close side bar for all of the image.

Sidebar is saving it's open/closed state between page renders