Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: Annotation data model (annotations pt. 1) #499

Open
wants to merge 13 commits into
base: main
Choose a base branch
from

Conversation

ShrimpCryptid
Copy link
Contributor

@ShrimpCryptid ShrimpCryptid commented Dec 16, 2024

Problem

Part 1 of 5ish for #484, annotation prototyping!

This PR implements the data model used for annotations. It syncs a pure TS class with React state using a hook to encapsulate all changes. This isn't wired up to anything yet in this PR, but will be used extensively in the next couple PRs for this feature.

Note that this change is missing track information, which means the API will change slightly in the near future.

Estimated review size: medium, 30 minutes (line count is higher due to unit testing)

(Also, you can see the end result of all 5 of the annotation prototype PRs here: https://allen-cell-animated.github.io/timelapse-colorizer/pr-preview-internal/pr-498/)

Solution

  • Adds the new AnnotationData class, which stores the current annotation state in the app.
    • Stores label data (name, color, and object IDs it currently labels).
    • Provides methods for interacting with label data.
  • Adds the new useAnnotations hook in react_utils.ts.
    • Contains an instance of AnnotationData.
    • Wraps mutator methods for AnnotationData so state is updated accordingly.
    • Adds additional UI-based state (currently selected label, whether annotation mode is enabled, etc.)
  • Adds unit tests

Type of change

  • New feature (non-breaking change which adds functionality)

@ShrimpCryptid ShrimpCryptid added new feature New feature or request internals Tech debt, refactoring, dependencies, etc. labels Dec 16, 2024
@ShrimpCryptid ShrimpCryptid self-assigned this Dec 16, 2024
Copy link

github-actions bot commented Dec 16, 2024

PR Preview Action v1.4.8
🚀 Deployed preview to https://allen-cell-animated.github.io/timelapse-colorizer/pr-preview/pr-499/
on branch gh-pages at 2025-01-06 20:16 UTC

Copy link

github-actions bot commented Dec 16, 2024

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 76% 5537 / 7285
🔵 Statements 76% 5537 / 7285
🔵 Functions 60.39% 154 / 255
🔵 Branches 81.42% 469 / 576
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
src/colorizer/AnnotationData.ts 96.13% 86.95% 92.3% 96.13% 149-151, 155-156, 165-166, 204-205
Generated in workflow #1331

Base automatically changed from refactor/move-hover-tooltip-logic to main December 17, 2024 00:11
Comment on lines +257 to +265
* Wrapper around the SharedWorkerPool method `getMotionDeltas`. Returns a
* debounced motion delta array for the given dataset and vector field
* configuration.
* @param dataset The dataset to calculate motion deltas for.
* @param workerPool The worker pool to use for asynchronous calculations.
* @param config The vector field configuration to use.
* @param debounceMs The debounce time in milliseconds. Defaults to 100ms.
* @returns The motion delta array or `null` if the dataset is invalid. Data will be
* asynchronously updated as calculations complete.
* @returns The motion delta array or `null` if the dataset is invalid. Data
* will be asynchronously updated as calculations complete.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tidied this comment slightly

fix: Linting

refactor: Cleanup comments in AnnotationData
refactor: Removed unused method from AnnotationData
fix: Linting

refactor: Renamed methods for consistency

doc: Updated comment

refactor: Code cleanup
@ShrimpCryptid ShrimpCryptid force-pushed the feature/annotation-data branch from 6ed64e3 to 4fc258f Compare December 17, 2024 23:22
@ShrimpCryptid ShrimpCryptid marked this pull request as ready for review December 17, 2024 23:23
@ShrimpCryptid ShrimpCryptid requested a review from a team as a code owner December 17, 2024 23:23
@ShrimpCryptid ShrimpCryptid removed the request for review from a team December 18, 2024 17:42
@ShrimpCryptid ShrimpCryptid marked this pull request as draft December 19, 2024 19:05
@ShrimpCryptid ShrimpCryptid marked this pull request as ready for review December 19, 2024 19:06
Copy link

@interim17 interim17 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

} ;

export const useAnnotations = (): AnnotationState => {
const annotationData = useConstructor(() => new AnnotationData());

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't remember if I looked at this before but it's a nifty util

src/colorizer/utils/react_utils.ts Outdated Show resolved Hide resolved
src/colorizer/AnnotationData.ts Outdated Show resolved Hide resolved
src/colorizer/AnnotationData.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@frasercl frasercl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Liking this overall! Approving preemptively since I left it hanging over the break and because all my comments are optional/matters of opinion, and you're the expert on where this code goes from here and what it needs. A couple of those optional comments are relatively substantial though.

src/colorizer/utils/react_utils.ts Outdated Show resolved Hide resolved
src/colorizer/utils/react_utils.ts Outdated Show resolved Hide resolved
import Dataset from "../Dataset";
import SharedWorkerPool from "../workers/SharedWorkerPool";

// TODO: Move this to a folder outside of `colorizer`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 to this - still like the idea of keeping colorizer independent of React

Comment on lines +113 to +115
getLabels(): LabelData[] {
return [...this.labelData];
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Why does this copy, rather than just returning this.labelData?
  2. Is it a problem that this shallow-copies? Modifying a member of the returned array will (if I'm not mistaken) modify the same LabelData object stored in this.labelData.

Copy link
Contributor Author

@ShrimpCryptid ShrimpCryptid Jan 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess I wanted to protect the label data and make it readonly, but you're 100% right that you can still mutate the underlying objects. At the very least this prevents changing of the label ordering which would mess up the UI rendering.

src/colorizer/AnnotationData.ts Outdated Show resolved Hide resolved
src/colorizer/AnnotationData.ts Outdated Show resolved Hide resolved
@ShrimpCryptid ShrimpCryptid requested a review from frasercl January 6, 2025 19:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
internals Tech debt, refactoring, dependencies, etc. new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants