fix: clear frame previews, update layer style for all frames on changes

Author: BryonLewis

web/src/components/sidebars/LayerStyle.vue

@@ -84,38 +84,23 @@ const setCurrentLayerStyle = (style: LayerStyle) => {
   styleStore.selectedLayerStyles[styleKey.value] = style;
 };
 
-// After a style save, the backend invalidates multiframe raster previews and
-// regenerates them asynchronously. Apply the saved style (which the API returns
-// with preview_status "notready" and no previews), drop any stale previews, and
-// remove the on-map preview overlay so tiles are shown until regeneration
-// completes and the WebSocket handler reattaches fresh previews.
+// After a style save, apply the API response. When previews were invalidated,
+// clear stale payloads/overlays; onPreviewTaskComplete reloads them when ready.
 const markStyleSavedAndInvalidatePreviews = (style: LayerStyle) => {
-  const previewStatus =
-    style.preview_status === "ready" && !style.multiframe_previews
-      ? "notready"
-      : (style.preview_status ?? "notready");
-  const invalidatedStyle: LayerStyle = {
-    ...style,
-    preview_status: previewStatus,
-    multiframe_previews: undefined,
-  };
-  setCurrentLayerStyle(invalidatedStyle);
-  if (invalidatedStyle.is_default) {
-    layerStore.selectedLayers = layerStore.selectedLayers.map((layer) => {
-      if (
-        layer.id !== props.layer.id ||
-        layer.copy_id !== props.layer.copy_id
-      ) {
-        return layer;
-      }
-      return {
-        ...layer,
-        preview_status: invalidatedStyle.preview_status,
-        multiframe_previews: undefined,
-      };
-    });
+  const previewsStillValid =
+    style.preview_status === "ready" && !!style.multiframe_previews?.length;
+  setCurrentLayerStyle(
+    previewsStillValid
+      ? cloneDeep(style)
+      : {
+          ...style,
+          preview_status: style.preview_status ?? "notready",
+          multiframe_previews: undefined,
+        },
+  );
+  if (!previewsStillValid) {
+    framePreviewStore.clearPreviewsForStyleChange(props.layer, style.id);
   }
-  framePreviewStore.dismissPreviewForLayer(props.layer);
 };
 
 const appliedStyleName = computed(() => {
@@ -674,15 +659,38 @@ watch(
 );
 
 const debouncedStyleSpecUpdated = debounce(() => {
-  if (currentStyleSpec.value) {
-    styleStore.selectedLayerStyles[styleKey.value] = {
-      ...currentLayerStyle.value,
-      style_spec: currentStyleSpec.value,
-    };
-    styleStore.updateLayerStyles(props.layer);
-    setAvailableGroups();
-    unsavedChanges.value = true;
+  if (!currentStyleSpec.value) return;
+
+  const prev = currentLayerStyle.value;
+  const hadPreviews =
+    prev?.preview_status === "ready" || !!prev?.multiframe_previews?.length;
+  let clearPreviews = false;
+  if (hadPreviews && prev?.style_spec && showRasterOptions.value) {
+    const prevQuery = JSON.stringify(
+      styleStore.getRasterTilesQuery(prev.style_spec, styleStore.colormaps),
+    );
+    const nextQuery = JSON.stringify(
+      styleStore.getRasterTilesQuery(
+        currentStyleSpec.value,
+        styleStore.colormaps,
+      ),
+    );
+    clearPreviews = prevQuery !== nextQuery;
+  }
+
+  styleStore.selectedLayerStyles[styleKey.value] = {
+    ...prev,
+    style_spec: currentStyleSpec.value,
+    ...(clearPreviews
+      ? { preview_status: "notready" as const, multiframe_previews: undefined }
+      : {}),
+  };
+  if (clearPreviews) {
+    framePreviewStore.clearPreviewsForStyleChange(props.layer, prev.id);
   }
+  styleStore.updateLayerStyles(props.layer);
+  setAvailableGroups();
+  unsavedChanges.value = true;
 }, 100);
 watch(currentStyleSpec, debouncedStyleSpecUpdated, { deep: true });
 

web/src/store/framePreview.ts

@@ -347,21 +347,17 @@ export const useFramePreviewStore = defineStore("framePreview", () => {
     hidePreviousPreview(map, layerKeyValue);
 
     if (!preview) {
+      // Drop any leftover overlay (including adjacent preloads) so a stale
+      // image cannot flash while tiles catch up after a style change.
+      removeAllPreviewLayersForLayerKey(map, layerKeyValue);
+      activePreviewByLayerKey.delete(layerKeyValue);
       clearPreviewDisplayed(layerKeyValue);
       ensureRasterTilesOnMap(
         currentFrame,
         tileSourceId,
         tileLayerId,
         targetOpacity,
       );
-      void preloadAdjacentPreviewLayers(
-        map,
-        layerKeyValue,
-        previews,
-        rasterFrames,
-        layer.current_frame_index,
-        targetOpacity,
-      );
       return;
     }
 
@@ -437,6 +433,37 @@ export const useFramePreviewStore = defineStore("framePreview", () => {
     }
   }
 
+  /** Clear stale preview payloads + map overlays after a style change. */
+  function clearPreviewsForStyleChange(layer: Layer, styleId?: number) {
+    layerStore.selectedLayers.forEach((candidate) => {
+      if (candidate.id !== layer.id) return;
+
+      const key = styleStore.layerStyleKey(candidate);
+      const selectedStyle = styleStore.selectedLayerStyles[key];
+      if (!selectedStyle) return;
+
+      const matches =
+        styleId !== undefined
+          ? selectedStyle.id === styleId
+          : candidate.copy_id === layer.copy_id;
+      if (!matches) return;
+
+      styleStore.selectedLayerStyles[key] = {
+        ...selectedStyle,
+        preview_status: "notready",
+        multiframe_previews: undefined,
+      };
+      if (
+        selectedStyle.is_default ||
+        usesLayerDefaultPreviews(candidate, selectedStyle)
+      ) {
+        candidate.preview_status = "notready";
+        candidate.multiframe_previews = undefined;
+      }
+      dismissPreviewForLayer(candidate);
+    });
+  }
+
   function cleanupLayer(layer: Layer) {
     const layerKeyValue = styleStore.layerStyleKey(layer);
     transitionGenerationByLayerKey.delete(layerKeyValue);
@@ -551,6 +578,7 @@ export const useFramePreviewStore = defineStore("framePreview", () => {
     hasReadyPreviewForCurrentFrame,
     showPreviewThenTiles,
     dismissPreviewForLayer,
+    clearPreviewsForStyleChange,
     onPreviewTaskComplete,
     cleanupLayer,
     clearAll,

web/src/store/style.ts

@@ -483,33 +483,38 @@ export const useStyleStore = defineStore("style", () => {
       (f) => f.index === layer.current_frame_index,
     );
     if (!currentFrame) return;
+
+    const styleKey = layerStyleKey(layer);
+    const currentStyleSpec: StyleSpec | undefined =
+      selectedLayerStyles.value[styleKey]?.style_spec;
+
     mapStore.getUserMapLayers().forEach((mapLayerId) => {
       if (isPreviewMapLayerId(mapLayerId)) {
         return;
       }
       const { layerId, layerCopyId, frameId } =
         mapStore.parseLayerString(mapLayerId);
-      if (layerId === layer.id && layerCopyId === layer.copy_id) {
-        if (frameId === currentFrame.id) {
-          map.setLayoutProperty(
-            mapLayerId,
-            "visibility",
-            layer.visible ? "visible" : "none",
-          );
-          const styleKey = layerStyleKey(layer);
-          const currentStyleSpec: StyleSpec | undefined =
-            selectedLayerStyles.value[styleKey].style_spec;
-          if (currentStyleSpec) {
-            setMapLayerStyle(
-              mapLayerId,
-              currentStyleSpec,
-              currentFrame,
-              currentFrame.vector,
-            );
-          }
-        } else {
-          map.setLayoutProperty(mapLayerId, "visibility", "none");
-        }
+      if (layerId !== layer.id || layerCopyId !== layer.copy_id) {
+        return;
+      }
+
+      const frame = frames.find((f) => f.id === frameId);
+      if (!frame) {
+        return;
+      }
+
+      const isCurrent = frameId === currentFrame.id;
+      map.setLayoutProperty(
+        mapLayerId,
+        "visibility",
+        layer.visible && isCurrent ? "visible" : "none",
+      );
+
+      // Restyle every loaded frame, not only the current one. Otherwise a
+      // previously visited / adjacent frame keeps the old tile URL and flashes
+      // the previous style when scrubbed to after a style change.
+      if (currentStyleSpec) {
+        setMapLayerStyle(mapLayerId, currentStyleSpec, frame, frame.vector);
       }
     });
     networkStore.styleVisibleNetworks();