From 74a20ff7b5b55fb1452716413f24988df335a618 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 7 Nov 2024 14:15:45 -0500
Subject: [PATCH 1/3] improving selection, adding test chart data

---
 vue/package.json                              |   1 -
 vue/src/client/services/ApiService.ts         |  11 +
 .../animation/AnimationDownloadDialog.vue     |  26 +-
 .../components/imageViewer/ImageFilter.vue    | 149 +++++++++-
 .../imageViewer/ImageGifCreation.vue          | 270 ------------------
 .../components/imageViewer/ImageViewer.vue    |  51 +++-
 vue/src/store.ts                              |   4 +-
 7 files changed, 211 insertions(+), 301 deletions(-)
 delete mode 100644 vue/src/components/imageViewer/ImageGifCreation.vue

diff --git a/vue/package.json b/vue/package.json
index 804356efd..7392730f4 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -21,7 +21,6 @@
     "@techstark/opencv-js": "^4.9.0-release.2",
     "@turf/turf": "7.0.0-alpha.113",
     "@types/mapbox__mapbox-gl-draw": "^1.4.6",
-    "canvas-capture": "^2.1.1",
     "django-s3-file-field": "^1.0.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
diff --git a/vue/src/client/services/ApiService.ts b/vue/src/client/services/ApiService.ts
index fe2103006..dd22ef58a 100644
--- a/vue/src/client/services/ApiService.ts
+++ b/vue/src/client/services/ApiService.ts
@@ -120,6 +120,17 @@ export interface DownloadSettings {
   pointArea?: number;
 }
 
+export interface DefaultAnimationSettings {
+  fps: number;
+  sources: Constellation[];
+  noData: number;
+  include: ('obs' | 'nonobs')[];
+  point_radius: number;
+  cloudCover: number;
+  rescale: boolean;
+  rescale_border: number;
+}
+
 export interface DownloadAnimationSettings {
   output_format: 'mp4' | 'gif';
   fps: number;
diff --git a/vue/src/components/animation/AnimationDownloadDialog.vue b/vue/src/components/animation/AnimationDownloadDialog.vue
index 79c9f64d3..35bdbc697 100644
--- a/vue/src/components/animation/AnimationDownloadDialog.vue
+++ b/vue/src/components/animation/AnimationDownloadDialog.vue
@@ -4,6 +4,7 @@ import { debounce } from "lodash";
 import {
   ApiService,
   Constellation,
+  DefaultAnimationSettings,
   DownloadAnimationSettings,
 } from "../../client/services/ApiService";
 import AnimationDownloaded from "./AnimationDownloaded.vue";
@@ -11,6 +12,7 @@ import AnimationDownloaded from "./AnimationDownloaded.vue";
 const props = defineProps<{
   type: "site" | "modelRun";
   id: string;
+  defaults?: DefaultAnimationSettings;
 }>();
 
 const emit = defineEmits<{
@@ -22,10 +24,10 @@ const validForm = ref(true);
 const outputFormat: Ref<DownloadAnimationSettings["output_format"]> =
   ref("mp4");
 const formatChoices = ref(["mp4", "gif"]);
-const fps = ref(1);
-const pointRadius = ref(5);
-const constellationChoices = ref(["S2", "WV", "L8"]);
-const selectedSources: Ref<Constellation[]> = ref(["WV", "S2"]);
+const fps = ref(props.defaults ? props.defaults.fps : 1);
+const pointRadius = ref(props.defaults ? props.defaults.point_radius : 5);
+const constellationChoices = ref( ["S2", "WV", "L8"]);
+const selectedSources: Ref<Constellation[]> = ref(props.defaults?.sources || ["WV", "S2"]);
 const labelChoices = ref(["geom", "date", "source", "obs", "obs_label"]);
 const labels: Ref<DownloadAnimationSettings["labels"]> = ref([
   "geom",
@@ -34,9 +36,13 @@ const labels: Ref<DownloadAnimationSettings["labels"]> = ref([
   "obs",
   "obs_label",
 ]);
-const cloudCover = ref(95);
-const noData = ref(100);
-const include: Ref<DownloadAnimationSettings["include"]> = ref([
+onMounted(() => {
+  console.log('Animation Defaults');
+  console.log(props.defaults);
+});
+const cloudCover = ref(props.defaults ? props.defaults.cloudCover : 95);
+const noData = ref(props.defaults ? props.defaults.noData : 100);
+const include: Ref<DownloadAnimationSettings["include"]> = ref(props.defaults?.include || [
   "obs",
   "nonobs",
 ]);
@@ -158,9 +164,9 @@ const cancel = debounce(() => emit("close"), 5000, { leading: true });
           >
             <v-slider
               v-model="fps"
-              min="1"
-              max="60"
-              step="1"
+              min="0.1"
+              max="30"
+              step="0.1"
               thumb-label="always"
               label="FPS"
               class="pt-2"
diff --git a/vue/src/components/imageViewer/ImageFilter.vue b/vue/src/components/imageViewer/ImageFilter.vue
index 42816230b..65e77d1db 100644
--- a/vue/src/components/imageViewer/ImageFilter.vue
+++ b/vue/src/components/imageViewer/ImageFilter.vue
@@ -3,20 +3,43 @@ import { computed, ref, watch, withDefaults } from "vue";
 import { EvaluationImage } from "../../types";
 import { PixelPoly } from "./imageUtils";
 import { state } from '../../store';
+import { DefaultAnimationSettings } from "../../client/services/ApiService";
 
 interface Props {
     combinedImages: {image: EvaluationImage; poly: PixelPoly, groundTruthPoly?: PixelPoly}[];
+    rescaleImage: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-    (e: "imageFilter", data: {image: EvaluationImage; poly: PixelPoly, groundTruthPoly?: PixelPoly}[]): void;
+    (e: "imageFilter", data: {image: EvaluationImage; poly: PixelPoly, groundTruthPoly?: PixelPoly}[]): void,
+    (e: "animationDefaults", data: DefaultAnimationSettings): void;
+    (e: "rescaleBBox", data: number): void;
 }>();
 
 const baseImageSources = ref(['S2', 'WV', 'L8', 'PL'])
 const baseObs = ref(['observations', 'non-observations'])
 const filterSettings = ref(true);
+const rescaleBorder = ref(1)
+
+const downloadingGifPointSize = computed({
+  get() {
+    return state.gifSettings.pointSize || 1;
+  },
+  set(val: number) {
+    state.gifSettings = { ...state.gifSettings, pointSize: val };
+  },
+});
+
+const playbackFps = computed({
+  get() {
+    return state.gifSettings.fps || 1;
+  },
+  set(val: number) {
+    state.gifSettings = { ...state.gifSettings, fps: val };
+  },
+});
 
 
 const filteredImages = computed(() => {
@@ -44,6 +67,39 @@ const filteredImages = computed(() => {
 watch(filteredImages, () => {
   emit('imageFilter', filteredImages.value);
 })
+
+watch([
+  () => state.imageFilter.sources,
+  () => state.imageFilter.obsFilter,
+  () => state.imageFilter.cloudCover,
+  () => state.imageFilter.noData], () => {
+  const defaultAnimationSettings: DefaultAnimationSettings = {
+    cloudCover: state.imageFilter.cloudCover,
+    noData: state.imageFilter.noData,
+    sources: state.imageFilter.sources,
+    include: state.imageFilter.obsFilter.map((item) => item === 'non-observations' ? 'nonobs' : 'obs'),
+    rescale: props.rescaleImage,
+    rescale_border: rescaleBorder.value,
+    fps: playbackFps.value,
+    point_radius: downloadingGifPointSize.value,
+  }
+  console.log('Emitting Animation Defaults');
+  emit('animationDefaults', defaultAnimationSettings);
+})
+watch(rescaleBorder, () => {
+  const defaultAnimationSettings: DefaultAnimationSettings = {
+    cloudCover: state.imageFilter.cloudCover,
+    noData: state.imageFilter.noData,
+    sources: state.imageFilter.sources,
+    include: state.imageFilter.obsFilter.map((item) => item === 'non-observations' ? 'nonobs' : 'obs'),
+    rescale: props.rescaleImage,
+    rescale_border: rescaleBorder.value,
+    fps: playbackFps.value,
+    point_radius: downloadingGifPointSize.value,
+  }
+  emit('animationDefaults', defaultAnimationSettings);
+  emit('rescaleBBox', rescaleBorder.value);
+})
 </script>
 
 <template>
@@ -77,6 +133,7 @@ watch(filteredImages, () => {
           multiple
           closable-chips
           chips
+          density="compact"
           class="mx-2"
         />
         <v-select
@@ -85,6 +142,7 @@ watch(filteredImages, () => {
           :items="baseImageSources"
           multiple
           closable-chips
+          density="compact"
           chips
           class="mx-2"
         />
@@ -94,7 +152,7 @@ watch(filteredImages, () => {
         justify="center"
         align="center"
       >
-        <v-col cols="3">
+        <v-col cols="2" class="slider-label">
           <span>Cloud Cover:</span>
         </v-col>
         <v-col cols="7">
@@ -105,7 +163,7 @@ watch(filteredImages, () => {
             step="1"
             color="primary"
             density="compact"
-            class="mt-5"
+            hide-details
           />
         </v-col>
         <v-col>
@@ -119,7 +177,7 @@ watch(filteredImages, () => {
         justify="center"
         align="center"
       >
-        <v-col cols="3">
+        <v-col cols="2" class="slider-label">
           <span>NoData:</span>
         </v-col>
         <v-col cols="7">
@@ -129,8 +187,8 @@ watch(filteredImages, () => {
             max="100"
             step="1"
             color="primary"
+            hide-details
             density="compact"
-            class="mt-5"
           />
         </v-col>
         <v-col>
@@ -139,6 +197,87 @@ watch(filteredImages, () => {
           </span>
         </v-col>
       </v-row>
+      <v-row
+        dense
+        justify="center"
+        align="center"
+      >
+        <v-col cols="2" class="slider-label">
+          <span>FPS:</span>
+        </v-col>
+        <v-col cols="7">
+          <v-slider
+            v-model.number="playbackFps"
+            min="0.1"
+            max="30"
+            step="0.1"
+            color="primary"
+            hide-details
+            density="compact"
+          />
+        </v-col>
+        <v-col>
+          <span>
+            {{ playbackFps.toFixed(2) }}fps
+          </span>
+        </v-col>
+      </v-row>
+      <v-row
+        dense
+        justify="center"
+        align="center"
+      >
+        <v-col cols="2" class="slider-label">
+          <span>Rescale Border:</span>
+        </v-col>
+        <v-col cols="7">
+          <v-slider
+            v-model.number="rescaleBorder"
+            min="1"
+            max="5"
+            step="1"
+            color="primary"
+            hide-details
+            density="compact"
+          />
+        </v-col>
+        <v-col>
+          <span class="pl-2">
+            {{ rescaleBorder }}X
+          </span>
+        </v-col>
+      </v-row>
+      <v-row
+        dense
+        justify="center"
+        align="center"
+      >
+        <v-col cols="2" class="slider-label">
+          <span>Point Radius:</span>
+        </v-col>
+        <v-col cols="7">
+          <v-slider
+            v-model.number="downloadingGifPointSize"
+            min="1"
+            max="20"
+            step="1"
+            color="primary"
+            hide-details
+            density="compact"
+          />
+        </v-col>
+        <v-col>
+          <span class="pl-2">
+            {{ downloadingGifPointSize }}px
+          </span>
+        </v-col>
+      </v-row>
     </div>
   </div>
 </template>
+
+<style scoped>
+.slider-label {
+  font-size: 0.75em;
+}
+</style>
\ No newline at end of file
diff --git a/vue/src/components/imageViewer/ImageGifCreation.vue b/vue/src/components/imageViewer/ImageGifCreation.vue
deleted file mode 100644
index b65a66661..000000000
--- a/vue/src/components/imageViewer/ImageGifCreation.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<script setup lang="ts">
-import { Ref, computed, ref, watch, withDefaults } from "vue";
-import { EvaluationImage } from "../../types";
-import { PixelPoly } from "./imageUtils";
-import { CanvasCapture } from 'canvas-capture';
-import { createCanvas, drawData } from './imageUtils';
-import { state } from '../../store'
-
-interface Props {
-  filteredImages: {image: EvaluationImage; poly: PixelPoly, groundTruthPoly?: PixelPoly}[];
-  siteEvaluationName: string | null;
-  drawGroundTruth: boolean;
-  rescaleImage: boolean;
-  fullscreen: boolean | undefined;
-  rescalingBBox: number;
-  disabled: boolean,
-  background: HTMLCanvasElement & { ctx?: CanvasRenderingContext2D | null } | undefined;
-
-}
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-});
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const emit = defineEmits<{
-    (e: "rescaleBBox", data: number): void;
-}>();
-
-const downloadingGifFPS = computed({
-  get() {
-    return state.gifSettings.fps;
-  },
-  set(val: number) {
-    state.gifSettings = { ...state.gifSettings, fps: val };
-  },
-});
-const downloadingGifQuality = computed({
-  get() {
-    return state.gifSettings.quality || 0.01;
-  },
-  set(val: number) {
-    state.gifSettings = { ...state.gifSettings, quality: val };
-  },
-});
-
-
-const downloadingGifPointSize = computed({
-  get() {
-    return state.gifSettings.pointSize || 1;
-  },
-  set(val: number) {
-    state.gifSettings = { ...state.gifSettings, pointSize: val };
-  },
-
-})
-
-
-const downloadingGif = ref(false);
-const downloadingGifState: Ref<null | 'drawing' | 'generating'> = ref(null);
-const downloadingGifProgress = ref(0);
-const GifSettingsDialog = ref(false);
-const exportProgress = (progress: number) => {
-  downloadingGifProgress.value = progress * 100;
-  if (progress === 1) {
-    downloadingGif.value = false;
-    downloadingGifState.value = null;
-    downloadingGifProgress.value = 0;
-  }
-}
-const rescaleBBoxLocal = ref(props.rescalingBBox);
-
-watch(() => props.rescalingBBox, () => {
-    rescaleBBoxLocal.value = props.rescalingBBox;
-})
-
-function drawForDownload() {
-  downloadingGif.value = true;
-  let width = -Infinity;
-  let height = -Infinity;
-  for (let i = 0; i< props.filteredImages.length; i += 1) {
-    const [imgWidth, imgHeight ] =props.filteredImages[i].image.image_dimensions;
-    width = Math.max(width, imgWidth);
-    height = Math.max(height, imgHeight);
-  }
-  if (width < 500 || height < 500) {
-    const ratio = width / height;
-    if (width < 500) {
-      width = 500;
-      height = ratio / 500;
-    }
-    if (height < 500) {
-      height = 500;
-      width = ratio * 500;
-    }
-  }
-  const offScreenCanvas = createCanvas(width * props.rescalingBBox, height * props.rescalingBBox);
-  downloadingGifState.value = 'drawing';
-  CanvasCapture.init(offScreenCanvas, { verbose: false});
-  CanvasCapture.beginGIFRecord({
-    name: props.siteEvaluationName || 'download',
-    fps: downloadingGifFPS.value,
-    quality: downloadingGifQuality.value,
-    onExportProgress: exportProgress,
-  });
-  let index = 0;
-  function drawImageForRecord(){
-    requestAnimationFrame(drawImageForRecord);
-    if (index < props.filteredImages.length ) {
-      drawData(
-        offScreenCanvas,
-        props.filteredImages[index].image,
-        props.filteredImages[index].poly,
-        props.filteredImages[index].groundTruthPoly,
-        width,
-        height,
-        props.background,
-        props.drawGroundTruth,
-        props.rescaleImage,
-        props.fullscreen,
-        props.rescalingBBox,
-        downloadingGifPointSize.value,
-      );
-      CanvasCapture.recordFrame();
-      index += 1
-      downloadingGifProgress.value = (index / props.filteredImages.length) * 100;
-    } else {
-      CanvasCapture.stopRecord();
-      downloadingGifState.value = 'generating';
-      downloadingGifProgress.value = 0;
-    }
-  }
-  drawImageForRecord();
-}
-
-</script>
-
-<template>
-  <div>
-    <div v-if="downloadingGif">
-      <span> {{ downloadingGifState === 'drawing' ? 'Drawing' : 'GIF Creation' }}</span>
-      <v-progress-linear
-        v-model="downloadingGifProgress"
-        width="50"
-      />
-    </div>
-    <v-tooltip
-      open-delay="50"
-      bottom
-    >
-      <template #activator="{ props }">
-        <v-btn
-          v-if="!downloadingGif"
-          v-bind="props"
-          variant="tonal"
-          density="compact"
-          :disabled="disabled"
-          class="pa-0 ma-1 sidebar-icon"
-          @click="drawForDownload()"
-        >
-          <v-icon>
-            mdi-download-box-outline
-          </v-icon>
-        </v-btn>
-        <v-btn
-          v-else
-          v-bind="props"
-          variant="tonal"
-          density="compact"
-          class="pa-0 ma-1 sidebar-icon"
-        >
-          <v-icon>
-            mdi-spin mdi-sync
-          </v-icon>
-          <v-icon @click="GifSettingsDialog = true">
-            mdi-cog
-          </v-icon>
-        </v-btn>
-      </template>
-      <span>
-        Download Images to GIF.
-      </span>
-    </v-tooltip>
-    <v-tooltip
-      open-delay="50"
-      bottom
-    >
-      <template #activator="{ props }">
-        <v-btn
-          v-bind="props"
-          variant="tonal"
-          :disabled="disabled"
-          density="compact"
-          class="pa-0 ma-1 sidebar-icon"
-          @click="GifSettingsDialog = true"
-        >
-          <v-icon>
-            mdi-cog
-          </v-icon>
-        </v-btn>
-      </template>
-      <span> GIF Download Settings</span>
-    </v-tooltip>
-    <v-dialog
-      v-model="GifSettingsDialog"
-      width="400"
-    >
-      <v-card>
-        <v-card-title> GIF Downloading Settings</v-card-title>
-        <v-card-text>
-          <v-row dense>
-            <v-text-field
-              v-model.number="downloadingGifFPS"
-              type="number"
-              label="FPS"
-              step="0.1"
-              :rules="[v => v > 0 || 'Value must be greater than 0']"
-            />
-          </v-row>
-          <v-row dense>
-            <v-slider
-              v-model="rescaleBBoxLocal"
-              min="1"
-              max="5"
-              step="0.1"
-              :label="`Zoom out (${rescaleBBoxLocal.toFixed(2)})X`"
-              @update:model-value="$emit('rescaleBBox', $event)"
-            />
-          </v-row>
-
-          <v-row dense>
-            <v-slider
-              v-model="downloadingGifQuality"
-              min="0"
-              max="1"
-              step="0.1"
-              :label="`Quality (${downloadingGifQuality.toFixed(2)})`"
-            />
-          </v-row>
-          <v-row dense>
-            <v-slider
-              v-model="downloadingGifPointSize"
-              min="0"
-              max="10"
-              step="0.1"
-              :label="`Point Size (${downloadingGifPointSize.toFixed(2)})`"
-            />
-          </v-row>
-        </v-card-text>
-        <v-card-actions>
-          <v-row>
-            <v-spacer />
-            <v-btn
-              color="success"
-              @click="GifSettingsDialog = false"
-            >
-              OK
-            </v-btn>
-          </v-row>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<style scoped>
-.sidebar-icon {
-  min-width: 20px;
-  min-height: 20px;;
-}
-</style>
\ No newline at end of file
diff --git a/vue/src/components/imageViewer/ImageViewer.vue b/vue/src/components/imageViewer/ImageViewer.vue
index b96fca0ba..25477043d 100644
--- a/vue/src/components/imageViewer/ImageViewer.vue
+++ b/vue/src/components/imageViewer/ImageViewer.vue
@@ -18,13 +18,13 @@ import {
 import type { PixelPoly } from "./imageUtils";
 import { drawData, processImagePoly } from "./imageUtils";
 import maplibregl from "maplibre-gl";
-import ImageGifCreation from "./ImageGifCreation.vue";
+import AnimationDownloadDialog from "../animation/AnimationDownloadDialog.vue";
 import ImageFilter from "./ImageFilter.vue";
 import ImageEditorDetails from "./ImageEditorDetails.vue";
 import ImageSliderDetails from "./ImageSliderDetails.vue";
 import ImagePolygonEditor from "./ImagePolygonEditor.vue";
 import ImageSAM from "./ImageSAM.vue";
-import { SiteModelStatus } from "../../client/services/ApiService";
+import { DefaultAnimationSettings, SiteModelStatus } from "../../client/services/ApiService";
 interface Props {
   siteEvalId: string;
   dialog?: boolean;
@@ -111,7 +111,8 @@ const editingGeoJSON = ref(false);
 const SAMViewer: Ref<number | null> = ref(null);
 const sidePanelExpanded = ref(false || props.editable);
 const sidePanelTab: Ref<null | string> = ref(null);
-
+const animationDefaults: Ref<DefaultAnimationSettings | undefined> = ref(undefined);
+const animationDialog = ref(false);
 
 const evaluationGeoJSON: Ref<GeoJSON.Polygon | GeoJSON.Point | null> = ref(null); // holds the site geoJSON so it can be edited
 
@@ -441,17 +442,25 @@ const clearStorage = async () => {
         </template>
         <span> Rescale Images</span>
       </v-tooltip>
-      <image-gif-creation
-        :disabled="combinedImages.length === 0"
-        :background="background"
-        :filtered-images="filteredImages"
-        :fullscreen="fullscreen"
-        :rescale-image="rescaleImage"
-        :site-evaluation-name="siteEvaluationName"
-        :rescaling-b-box="rescalingBBox"
-        :draw-ground-truth="drawGroundTruth"
-        @rescale-b-box="rescalingBBox = $event"
-      />
+      <v-tooltip
+        open-delay="50"
+        bottom
+      >
+        <template #activator="{ props }">
+          <v-btn
+            v-bind="props"
+            variant="tonal"
+            density="compact"
+            class="pa-0 ma-1 sidebar-icon"
+            @click="animationDialog = true"
+          >
+            <v-icon>
+              mdi-download-box-outline
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>Download Animation</span>
+      </v-tooltip>
       <v-tooltip>
         <template #activator="{ props }">
           <v-btn
@@ -694,7 +703,10 @@ const clearStorage = async () => {
           <div v-show="sidePanelTab === 'Filter'">
             <image-filter
               :combined-images="combinedImages"
+              :rescale-image="rescaleImage"
+              @rescale-b-box="rescalingBBox = $event"
               @image-filter="filteredImages = $event"
+              @animation-defaults="animationDefaults = $event"
             />
           </div>
           <div v-if="sidePanelTab === 'Editing' && editMode">
@@ -709,6 +721,17 @@ const clearStorage = async () => {
         </v-card>
       </v-col>
     </v-row>
+    <v-dialog
+      v-model="animationDialog"
+      width="900"
+    >
+      <animation-download-dialog
+        :id="siteEvalId"
+        :defaults="animationDefaults"
+        type="site"
+        @close="animationDialog = false"
+      />
+    </v-dialog>
   </v-card>
 </template>
 
diff --git a/vue/src/store.ts b/vue/src/store.ts
index 2333d6c7e..c98a3e72d 100644
--- a/vue/src/store.ts
+++ b/vue/src/store.ts
@@ -182,7 +182,9 @@ export const state = reactive<{
   modelRuns: KeyedModelRun[],
   totalNumModelRuns: number;
   openedModelRuns: Set<KeyedModelRun["key"]>;
-  gifSettings: { fps: number, quality: number, pointSize: number},
+  gifSettings: { 
+    fps: number,
+    pointSize: number,},
   performerIds: number[],
   performerMapping: Record<number, Performer>,
   proposals: {

From 934fb3cab46a0863c4ee76d149da16a66611619d Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 8 Nov 2024 08:59:42 -0500
Subject: [PATCH 2/3] finalizing settings cration

---
 .../components/imageViewer/ImageFilter.vue    | 25 +++++++++++++++----
 .../components/imageViewer/ImageViewer.vue    |  2 +-
 vue/src/components/siteList/SiteListCard.vue  |  2 +-
 vue/src/store.ts                              |  2 +-
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/vue/src/components/imageViewer/ImageFilter.vue b/vue/src/components/imageViewer/ImageFilter.vue
index 65e77d1db..39198fe52 100644
--- a/vue/src/components/imageViewer/ImageFilter.vue
+++ b/vue/src/components/imageViewer/ImageFilter.vue
@@ -152,7 +152,10 @@ watch(rescaleBorder, () => {
         justify="center"
         align="center"
       >
-        <v-col cols="2" class="slider-label">
+        <v-col
+          cols="2"
+          class="slider-label"
+        >
           <span>Cloud Cover:</span>
         </v-col>
         <v-col cols="7">
@@ -177,7 +180,10 @@ watch(rescaleBorder, () => {
         justify="center"
         align="center"
       >
-        <v-col cols="2" class="slider-label">
+        <v-col
+          cols="2"
+          class="slider-label"
+        >
           <span>NoData:</span>
         </v-col>
         <v-col cols="7">
@@ -202,7 +208,10 @@ watch(rescaleBorder, () => {
         justify="center"
         align="center"
       >
-        <v-col cols="2" class="slider-label">
+        <v-col
+          cols="2"
+          class="slider-label"
+        >
           <span>FPS:</span>
         </v-col>
         <v-col cols="7">
@@ -227,7 +236,10 @@ watch(rescaleBorder, () => {
         justify="center"
         align="center"
       >
-        <v-col cols="2" class="slider-label">
+        <v-col
+          cols="2"
+          class="slider-label"
+        >
           <span>Rescale Border:</span>
         </v-col>
         <v-col cols="7">
@@ -252,7 +264,10 @@ watch(rescaleBorder, () => {
         justify="center"
         align="center"
       >
-        <v-col cols="2" class="slider-label">
+        <v-col
+          cols="2"
+          class="slider-label"
+        >
           <span>Point Radius:</span>
         </v-col>
         <v-col cols="7">
diff --git a/vue/src/components/imageViewer/ImageViewer.vue b/vue/src/components/imageViewer/ImageViewer.vue
index 25477043d..a53e32bb3 100644
--- a/vue/src/components/imageViewer/ImageViewer.vue
+++ b/vue/src/components/imageViewer/ImageViewer.vue
@@ -455,7 +455,7 @@ const clearStorage = async () => {
             @click="animationDialog = true"
           >
             <v-icon>
-              mdi-download-box-outline
+              mdi-movie-roll
             </v-icon>
           </v-btn>
         </template>
diff --git a/vue/src/components/siteList/SiteListCard.vue b/vue/src/components/siteList/SiteListCard.vue
index 0be86dfe1..7970a1f5c 100644
--- a/vue/src/components/siteList/SiteListCard.vue
+++ b/vue/src/components/siteList/SiteListCard.vue
@@ -385,7 +385,7 @@ const animationDialog = ref(false);
                 </v-row>
                 <v-row dense>
                   <v-spacer>
-                    <span>Downloading {{ downloadingData.current }} of {{ downloadingData.total }} in source: {{ downloadingData.source}}</span>
+                    <span>Downloading {{ downloadingData.current }} of {{ downloadingData.total }} in source: {{ downloadingData.source }}</span>
                   </v-spacer>
                 </v-row>
                 <v-row dense>
diff --git a/vue/src/store.ts b/vue/src/store.ts
index c98a3e72d..c40148dfe 100644
--- a/vue/src/store.ts
+++ b/vue/src/store.ts
@@ -270,7 +270,7 @@ export const state = reactive<{
   modelRuns: [],
   totalNumModelRuns: 0,
   openedModelRuns: new Set<KeyedModelRun["key"]>(),
-  gifSettings: { fps: 1, quality: 1, pointSize: 1},
+  gifSettings: { fps: 1, pointSize: 1},
   performerMapping: {},
   performerIds: [],
   proposals: {},

From 8948ce407adaf2995c74e4cb0c1723727944df75 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 12 Nov 2024 08:01:33 -0500
Subject: [PATCH 3/3] addresing comments

---
 vue/src/components/animation/AnimationDownloadDialog.vue | 4 ----
 vue/src/store.ts                                         | 3 ++-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/vue/src/components/animation/AnimationDownloadDialog.vue b/vue/src/components/animation/AnimationDownloadDialog.vue
index 35bdbc697..bb50eeb73 100644
--- a/vue/src/components/animation/AnimationDownloadDialog.vue
+++ b/vue/src/components/animation/AnimationDownloadDialog.vue
@@ -36,10 +36,6 @@ const labels: Ref<DownloadAnimationSettings["labels"]> = ref([
   "obs",
   "obs_label",
 ]);
-onMounted(() => {
-  console.log('Animation Defaults');
-  console.log(props.defaults);
-});
 const cloudCover = ref(props.defaults ? props.defaults.cloudCover : 95);
 const noData = ref(props.defaults ? props.defaults.noData : 100);
 const include: Ref<DownloadAnimationSettings["include"]> = ref(props.defaults?.include || [
diff --git a/vue/src/store.ts b/vue/src/store.ts
index c40148dfe..a9132e15f 100644
--- a/vue/src/store.ts
+++ b/vue/src/store.ts
@@ -184,7 +184,8 @@ export const state = reactive<{
   openedModelRuns: Set<KeyedModelRun["key"]>;
   gifSettings: { 
     fps: number,
-    pointSize: number,},
+    pointSize: number,
+  },
   performerIds: number[],
   performerMapping: Record<number, Performer>,
   proposals: {