Legend Rendering, Fill screen

client/src/components/SpectrogramViewer.vue

@@ -40,7 +40,7 @@ export default defineComponent({
     "hoverData",
   ],
   setup(props, { emit }) {
-    const { annotations, temporalAnnotations, selectedId, selectedType, creationType } = useState();
+    const { annotations, temporalAnnotations, selectedId, selectedType, creationType, blackBackground } = useState();
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
     const initialized = ref(false);
@@ -193,13 +193,17 @@ export default defineComponent({
       createAnnotation,
       cursorHandler,
       imageCursorRef,
+      blackBackground,
     };
   },
 });
 </script>
 
 <template>
-  <div class="video-annotator">
+  <div
+    class="video-annotator"
+    :class="{'black-background': blackBackground, 'white-background': !blackBackground}"
+  >
     <div
       id="spectro"
       ref="containerRef"
@@ -236,8 +240,6 @@ export default defineComponent({
   top: 0;
   bottom: 0;
   z-index: 0;
-  height: 60vh;
-  background-color: black;
 
   display: flex;
   flex-direction: column;
@@ -248,6 +250,7 @@ export default defineComponent({
     }
   }
 
+
   .playback-container {
     flex: 1;
   }
@@ -264,6 +267,14 @@ export default defineComponent({
     cursor: inherit;
   }
 }
+
+.black-background {
+    background-color: black;
+  }
+
+.white-background {
+  background-color:  white;
+}
 .imageCursor {
   z-index: 9999; //So it will be above the annotator layers
   position: fixed;

client/src/components/geoJS/layers/legendLayer.ts

@@ -97,11 +97,12 @@
     this.textDataX = [];
     this.textDataY = [];
     this.drawYAxis(leftOffset);
-    this.drawXAxis(bottomOffset, topOffset);
+    this.drawXAxis(bottomOffset, topOffset, leftOffset);
     this.redraw();
   }
 
-  drawXAxisLabels(yOffset = 0) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  drawXAxisLabels(yOffset = 0, _xOffset = 0, leftOffset = 0) {
     const yBuffer = yOffset === 0 ? this.axisBuffer : this.axisBuffer * -0.5;
     const baseYPos = yOffset === 0 ? this.spectroInfo.height : yOffset;
 
@@ -112,6 +113,10 @@
     // every 100 ms a small tick and every 1000 a big tick
     for (let i = 0; i < time; i += 10) {
       const length = i % 1000 === 0 ? yBuffer * 8 : yBuffer * 4;
+      const withinYAxis = (i * timeToPixels) < (leftOffset +  50)  && leftOffset  !== 0 && yOffset !== 0;
+      if (withinYAxis) {
+        continue;
+      }
       if (i % 50 === 0) {
         this.lineDataX.push({
           line: {
@@ -134,15 +139,14 @@
     }
   }
 
-  drawXAxisLabelsCompressed(yOffset = 0, topOffset = 0) {
+  drawXAxisLabelsCompressed(yOffset = 0, topOffset = 0, leftOffset = 0) {
     const yBuffer = yOffset === 0 ? this.axisBuffer : this.axisBuffer * -0.5;
     const baseYPos = yOffset === 0 ? this.spectroInfo.height : yOffset;
     const baseTopPos = topOffset === 0 ? 0 : -topOffset;
     const topBuffer = topOffset === 0 ? this.axisBuffer * 3 : this.axisBuffer * -0.5;
 
     // For compressed we need to draw based on the start/endTimes instead of the standard
     const time = this.spectroInfo.end_time - this.spectroInfo.start_time;
-    const timeToPixels = this.spectroInfo.width / time;
 
     const { start_times, end_times, widths } = this.spectroInfo;
     if (start_times && end_times && widths) {
@@ -153,16 +157,23 @@
         const start_time = start_times[i];
         const end_time = end_times[i];
         const width = widths[i];
+        const bottomWithinYAxisStart = (pixelOffset) < (leftOffset +  50)  && leftOffset !== 0 && yOffset !== 0;
+        const topWithinYAxisEnd = (pixelOffset+width) < (leftOffset +  50)  && leftOffset !== 0 && topOffset !== 0;
+
+
+        if (!bottomWithinYAxisStart) {
         this.lineDataX.push({
           line: {
             type: "LineString",
             coordinates: [
-              [0 + pixelOffset, baseYPos + yBuffer],
-              [0 * timeToPixels + pixelOffset, baseYPos + length],
+              [pixelOffset, baseYPos + yBuffer],
+              [ pixelOffset, baseYPos + length],
             ],
           },
           thicker: true,
         });
+      }
+      if (!topWithinYAxisEnd) {
         this.lineDataX.push({
           line: {
             type: "LineString",
@@ -179,6 +190,7 @@
           },
           thicker: true,
         });
+
         this.lineDataX.push({
           line: {
             type: "LineString",
@@ -189,6 +201,7 @@
           },
           thicker: true,
         });
+      }
         this.lineDataX.push({
           line: {
             type: "LineString",
@@ -204,20 +217,25 @@
         });
 
         //Need to decide what text to add to the label
+        if (!bottomWithinYAxisStart) {
         this.textDataX.push({
           text: `${start_time}ms`,
           x: 0 + pixelOffset,
           y: baseYPos + length,
           offsetX: 3,
           offsetY: yOffset === 0 ? 16 : -16,
         });
+      }
+      if (!topWithinYAxisEnd) {
+
         this.textDataX.push({
           text: `${end_time}ms`,
           x: width + pixelOffset,
           y: baseTopPos,
           offsetX: 3,
           offsetY: baseTopPos === 0 ? -16 : 16,
         });
+      }
         pixelOffset += width;
         // Need to add the current
       }
@@ -298,7 +316,7 @@
     }
   }
 
-  drawXAxis(bottomOffset = 0, topOffset = 0) {
+  drawXAxis(bottomOffset = 0, topOffset = 0, lefOffset = 0) {
     const xAxis: GeoJSON.LineString = {
       type: "LineString",
       coordinates: [
@@ -311,9 +329,9 @@
     this.drawYAxis();
 
     if (this.spectroInfo.start_times && this.spectroInfo.end_times) {
-      this.drawXAxisLabelsCompressed(bottomOffset, topOffset);
+      this.drawXAxisLabelsCompressed(bottomOffset, topOffset, lefOffset);
     } else {
-      this.drawXAxisLabels(bottomOffset);
+      this.drawXAxisLabels(bottomOffset, topOffset, lefOffset);
     }
   }
   createLabels() {

client/src/use/useState.ts

@@ -18,6 +18,7 @@ const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
 const sharedList: Ref<Recording[]> = ref([]);
 const recordingList: Ref<Recording[]> = ref([]);
 const nextShared: Ref<Recording | false> = ref(false);
+const blackBackground = ref(true);
 
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
@@ -83,5 +84,6 @@ export default function useState() {
     sharedList,
     recordingList,
     nextShared,
+    blackBackground,
   };
 }

client/src/views/Spectrogram.vue

@@ -341,6 +341,7 @@ export default defineComponent({
         :recording-id="id"
         :other-user-annotations="otherUserAnnotations"
         :grid="gridEnabled"
+        class="spectro-main"
         @selected="setSelection($event)"
         @create:annotation="getAnnotationsList($event)"
         @update:annotation="getAnnotationsList()"
@@ -384,4 +385,7 @@ export default defineComponent({
   max-height: 60vh;
   overflow-y: auto;
 }
+.spectro-main {
+  height: calc(100vh - 20vh - 64px - 72px);
+}
 </style>