Group related dataset-related state into object

[ShrimpCryptid]

Use Case

Somewhat parallel request to #492, refactoring state management. This is a lower-hanging-fruit version of it!

Currently there are a lot of loose state variables that are being passed around the viewer, which makes props for certain components (like CanvasWrapper) very large and unwieldy:

<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}
/>

Some state could be grouped into objects, the way config, scatterPlotConfig, and vectorConfig are grouped.

Acceptance Criteria

Group related state together and pass into objects, updating their prop APIs:

• datasetState => collection + dataset + datasetKey
• visualizationState => featureKey + selectedBackdropKey + colorRamp + colorRampMin + colorRampMax + categoricalColors + selectedTrack + inRangeLUT

Types should be defined for each of these state objects in a types.ts file outside of Viewer.tsx.

Details

Please provide any helpful specifications