Hide images when contours are shown

Author: naglepuff

client/src/components/SpectrogramViewer.vue

@@ -36,7 +36,8 @@ export default defineComponent({
       scaledVals,
       configuration,
       scaledWidth,
-      scaledHeight
+      scaledHeight,
+      viewContours,
     } = useState();
 
     const containerRef: Ref<HTMLElement | undefined> = ref();
@@ -227,6 +228,16 @@ export default defineComponent({
 
     onUnmounted(() => geoJS.destroyGeoViewer());
 
+    watch(viewContours, () => {
+      // If the user has chosen to look at the contours, hide
+      // the images.
+      if (viewContours.value) {
+        geoJS.clearQuadFeatures(true);
+      } else if (props.images.length) {
+          geoJS.drawImages(props.images, scaledWidth.value, scaledHeight.value, false);
+      }
+    });
+
     return {
       containerRef,
       geoViewerRef: geoJS.getGeoViewer(),

client/src/components/geoJS/geoJSUtils.ts

@@ -33,13 +33,16 @@ const useGeoJS = () => {
     }
   };
 
-  const clearQuadFeatures = () => {
+  const clearQuadFeatures = (redraw?: boolean) => {
     quadFeatures.forEach((feature) => {
       if (quadFeatureLayer) {
         quadFeatureLayer.removeFeature(feature);
       }
     });
     quadFeatures.splice(0, quadFeatures.length);
+    if (redraw) {
+      quadFeatureLayer.draw();
+    }
   };
 
   const initializeViewer = (
@@ -222,6 +225,7 @@ const useGeoJS = () => {
     resetMapDimensions,
     resetZoom,
     destroyGeoViewer,
+    clearQuadFeatures,
   };
 };