voxel51/fiftyone

[FR] Persist zoom and pan in expanded view

Open

#2162 opened on Oct 14, 2022

View on GitHub
 (7 comments) (0 reactions) (0 assignees)Python (4,021 stars) (400 forks)batch import
appenhancementgood first issue

Description

Proposal Summary

While navigating samples in expanded view, the labels are shown on top-left, which is nice. However, when the mouse is on the image, they are shaded. The top-most one gets almost invisible.

Motivation

  • What is the use case for this feature?

Navigating samples in expanded view while easily reading their labels

  • Why is this use case valuable to support for FiftyOne users in general?

Seeing the labels is a highly valuable necessity when using the GUI.

  • Why is this use case valuable to support for your project(s) or organization?

I will be able to follow the sample labels while navigating my samples in Fiftyone.

  • Why is it currently difficult to achieve this use case? (please be as specific as possible about why related FiftyOne features and components are insufficient)

I cannot see what is behind when the label is shaded with a black strip.

What areas of FiftyOne does this feature affect?

  • App: FiftyOne application
  • Core: Core fiftyone Python library
  • Server: FiftyOne server

Details

  • Some minor UI tweaks are likely to solve this problem (according to @ehofesmann)

Willingness to contribute

The FiftyOne Community encourages new feature contributions. Would you or another member of your organization be willing to contribute an implementation of this feature?

  • Yes. I can contribute this feature independently.
  • Yes. I would be willing to contribute this feature with guidance from the FiftyOne community.
  • No. I cannot contribute this feature at this time.

Contributor guide

Tech stack
javascriptreactpython
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
ReactFiftyOne app UICSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Look into the expanded view implementation in the FiftyOne app, likely in `fiftyone/app` directory. Focus on how zoom and pan state is managed and where label overlays are rendered. Check comments from @ehofesmann for guidance on UI tweaks. Consider exploring the `SamplesView` or `ExpandedView` components and their associated CSS.