Frame Preview UI/UX Fixes

[BryonLewis]

First Commit - Resolves slow to initial dispaly of preview layer

• map.ts
  • Adds optional rasterOpacity when creating raster tile layers (default 1).
  • Lets callers add the real tile layer already at opacity 0 under a preview.
• framePreview.ts
  • hasReadyPreviewForCurrentFrame: not style-editing, multi-frame raster, and a ready preview for the current frame.
  • ensureRasterTilesOnMap: create tile layer at a given opacity, or set raster-opacity if it already exists.
  • showPreviewThenTiles flow when a preview is ready:
    1. Show preview at style targetOpacity
    2. Ensure tiles exist at opacity 0
    3. Move preview above tiles
    4. transitionToTiles waits for tiles, then fades preview out / tiles in to targetOpacity
  • If no preview: ensure tiles at targetOpacity immediately
• layer.ts
  • Prefetch frame previews before awaiting fetchFramesForLayer so images start sooner
  • Skip addLayerFrameToMap when a preview is already ready (preview first; tiles added later at 0)
  • Don’t treat preview map layers as removable user layers during cleanup
• style.ts
  • Skip applying normal style/visibility updates to preview map layers, previews are managed separately
  • This is because the normal path would mess up fading, as well as previews are images and tile style paint aren't how they should be controled

Second Commit - Prevent stale cached frame previews

There were a couple of things happening here.

1. previously the updateLayerStyles function only applied the new style_spec to the CURRENT frame's map layer, so other loaded frames (not the preview but the styled tile) would be cached in maplibre and display the wrong style. Updated the function so it applies the style change to all layers while only handling the visibility for the current frame.
2. The style preview layers could still be there and would flash briefly the clearPreviewsForStyleChange function will mark the previews as notready and invalidate any multiframe_previews until the api reloads them.

• LayerStyle.vue:
  • markStyleSavedAndInvalidatePreviews - modified so that saved style is invalided and clears the multiframe_previews, if the API retruns with preview_status "ready" it will keep them (meaning we already have previews), if not it will call the clearPreviewsForStyleChange that should clear all previews
  • deboucing was updated so that if the rasterTilesQuery doesn't change it will not mark stuff as notready, I.E you save the same style by adjusting opacity,
• framePreview.ts:
  • clearPreviewsForStyleChange - new function that properly clears the maplibre preview layers as well as any styleStore cache of multiframe_previews and sets the preview_status of "notready"
• styles.ts:
  • now during updateLayerStyles it will apply the style_spec to all layers instead of just the current layer

Frame Scrubbing Preview Debouncing

• There is now an object that holds timers for frame layers that will clear itself while scrubbing. This will prevent a layer from attempting to load tiles if the user is moving the frame scrubber. It will only load the tile if the user is stopped for 1 second on a frame. This is a high level contstant that we can adjust from 1000ms to some other lower number if we think it it is necessary. This also contains code to clear the timers when the layer is turned off.

Frame Preview Icon states

• I added a helper function in framePreview.ts called iconState for LayerPanel and LegendPanel. This new iconState along with isGeneratingPreviews will now determine the visibility, color, tooltip and behavior of the framePreview icon. This includes solid and primary color when loaded and looking at the preview and gray and flashing when a preview is being generated.

[cloudflare-workers-and-pages]

Deploying geodatalytics with    Cloudflare Pages

Latest commit:	7398399
Status:	✅  Deploy successful!
Preview URL:	https://9ea076ac.geodatalytics.pages.dev
Branch Preview URL:	https://frame-preview-fixes.geodatalytics.pages.dev

View logs

[BryonLewis]

Check the scrubbing action for frame changes and prevent the system from loading the tiles immediately. Maybe have a delay or watch for the scrubbing to end and then start loading the tile system. Look for some sort of resonable debounce, so in summary it loads the frame previews first and then switches over the tile system afterwards.

Frame-preview icon: when solid and primary we are using the frame previews and when generating it is flashing and gray, have tooltip dynamically state what is happening as well.

[BryonLewis]

Look into the client spawing tasks for previous data that did not have frame previews and did not have the style url logged, patch it and it should create a new style. Only done if the user is a collaborator or owner, or super user for the system.