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

Refactor state management #492

Open
ShrimpCryptid opened this issue Dec 6, 2024 · 0 comments
Open

Refactor state management #492

ShrimpCryptid opened this issue Dec 6, 2024 · 0 comments
Labels
internals Tech debt, refactoring, dependencies, etc.

Comments

@ShrimpCryptid
Copy link
Contributor

ShrimpCryptid commented Dec 6, 2024

Use Case

State is currently a loose collection of useStates in the main app viewer, and it's gotten large enough that passing props around is becoming a chore (see CanvasWrapper). This would be a great opportunity to switch a state management framework (e.g. Zustand, Redux).

                <CanvasWrapper
                  loading={isDatasetLoading}
                  loadingProgress={datasetLoadProgress}
                  canv={canv}
                  collection={collection || null}
                  vectorData={motionDeltas}
                  dataset={dataset}
                  datasetKey={datasetKey}
                  featureKey={featureKey}
                  selectedBackdropKey={selectedBackdropKey}
                  colorRamp={getColorMap(colorRampData, colorRampKey, colorRampReversed)}
                  colorRampMin={colorRampMin}
                  colorRampMax={colorRampMax}
                  isRecording={isRecording}
                  categoricalColors={categoricalPalette}
                  selectedTrack={selectedTrack}
                  config={config}
                  updateConfig={updateConfig}
                  onTrackClicked={onTrackClicked}
                  inRangeLUT={inRangeLUT}
                  onMouseHover={(id: number): void => {
                    const isObject = id !== BACKGROUND_ID;
                    setShowObjectHoverInfo(isObject);
                    if (isObject) {
                      setLastValidHoveredId(id);
                    }
                  }}
                  onMouseLeave={() => setShowObjectHoverInfo(false)}
                  showAlert={isInitialDatasetLoaded ? showAlert : undefined}
                />

Acceptance Criteria

  • Move all useState declarations in Viewer.tsx into their own hook or store.
  • Move shared state modifiers (like setFrameAndRender, findTrack, handleDatasetChange, replaceDataset) into hook or store.
  • Remove prop drilling for CanvasWrapper.tsx, Export.tsx, CanvasHoverTooltip, ColorRampDropdown, and any other components with more than 8 props in Viewer.tsx.

Details

  • This will likely need to be split up into multiple PRs.
@ShrimpCryptid ShrimpCryptid added the internals Tech debt, refactoring, dependencies, etc. label Dec 6, 2024
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.
Projects
None yet
Development

No branches or pull requests

1 participant