move pulse metadata to it's own usePulseMetadata singleton composable

Author: BryonLewis

client/src/components/PulseMetadataButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import useState from "@use/useState";
+import usePulseMetadata from "@use/usePulseMetadata";
 
 export default defineComponent({
   name: "PulseMetadataButton",
@@ -30,7 +30,7 @@ export default defineComponent({
       pulseMetadataPointSize,
       pulseMetadataShowLabels,
       pulseMetadataDurationFreqLineColor,
-    } = useState();
+    } = usePulseMetadata();
 
     const togglePulseMetadata = async () => {
       if (pulseMetadataList.value.length === 0 && props.recordingId != null) {

client/src/components/SpectrogramImageContentMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue';
+import { ref, watch } from 'vue';
 import useState from '@use/useState';
 
 defineProps<{

client/src/components/geoJS/LayerManager.vue

@@ -24,6 +24,7 @@ import ContourLayer from "./layers/contourLayer";
 import PulseMetadataLayer from "./layers/pulseMetadataLayer";
 import { cloneDeep } from "lodash";
 import useState from "@use/useState";
+import usePulseMetadata from "@use/usePulseMetadata";
 
 export default defineComponent({
   name: "LayerManager",
@@ -84,6 +85,8 @@ export default defineComponent({
       loadContours,
       computedPulseContours,
       transparencyThreshold,
+    } = useState();
+    const {
       viewPulseMetadataLayer,
       pulseMetadataList,
       loadPulseMetadata,
@@ -96,7 +99,7 @@ export default defineComponent({
       pulseMetadataPointSize,
       pulseMetadataShowLabels,
       pulseMetadataDurationFreqLineColor,
-    } = useState();
+    } = usePulseMetadata();
     const selectedAnnotationId: Ref<null | number> = ref(null);
     const hoveredAnnotationId: Ref<null | number> = ref(null);
     const localAnnotations: Ref<SpectrogramAnnotation[]> = ref(cloneDeep(annotations.value));

client/src/use/useState.ts

@@ -16,7 +16,6 @@ import {
   ComputedPulseContour,
   getVettingDetailsForUser,
 } from "../api/api";
-import usePulseMetadata from "./usePulseMetadata";
 import {
   interpolateCividis,
   interpolateViridis,
@@ -380,7 +379,6 @@ export default function useState() {
     loadContours,
     clearContours,
     computedPulseContours,
-    ...usePulseMetadata(),
     showSubmittedRecordings,
     submittedMyRecordings,
     submittedSharedRecordings,

client/src/views/Spectrogram.vue

@@ -32,6 +32,7 @@ import ReferenceMaterialsDialog from "@/components/ReferenceMaterialsDialog.vue"
 import SpectrogramImageContentMenu from "@/components/SpectrogramImageContentMenu.vue";
 import PulseMetadataButton from "@/components/PulseMetadataButton.vue";
 import useState from "@use/useState";
+import usePulseMetadata from "@use/usePulseMetadata";
 export default defineComponent({
   name: "Spectrogram",
   components: {
@@ -83,13 +84,15 @@ export default defineComponent({
       contoursLoading,
       contoursEnabled,
       clearContours,
-      clearPulseMetadata,
-      viewPulseMetadataLayer,
       nextUnsubmittedRecordingId,
       previousUnsubmittedRecordingId,
       currentRecordingId,
       viewMaskOverlay,
     } = useState();
+    const {
+      clearPulseMetadata,
+      viewPulseMetadataLayer,
+    } = usePulseMetadata();
     const router = useRouter();
     const images: Ref<HTMLImageElement[]> = ref([]);
     const maskImages: Ref<HTMLImageElement[]> = ref([]);