Compressed View ms labels and Compressed view highlight (#241)

* disable compressed overlay layer when in compressed view

* add left/right indicators to times, disable legend times for compressed when compressed view zoomed out

* replace ms with subscript ms

Author: BryonLewis

client/src/components/geoJS/LayerManager.vue

@@ -321,6 +321,8 @@ export default defineComponent({
       if (viewCompressedOverlay.value && compressedOverlayLayer && !props.spectroInfo?.compressedWidth && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
         compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
         compressedOverlayLayer.redraw();
+      } else {
+        compressedOverlayLayer?.disable();
       }
       if (sequenceAnnotationLayer && layerVisibility.value.includes('sequence')) {
         sequenceAnnotationLayer.formatData(

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

@@ -20,6 +20,7 @@ interface TextData {
   textAlign?: 'left' | 'center' | 'right';
   textBaseline?: 'top' | 'middle' | 'bottom';
   textScaled?: number | undefined;
+  compressedLabel?: boolean;
 }
 
 export default class LegendLayer extends BaseTextLayer<TextData> {
@@ -153,7 +154,7 @@ export default class LegendLayer extends BaseTextLayer<TextData> {
           thicker: i % 1000 === 0,
         });
         this.textDataX.push({
-          text: `${i}ms`,
+          text: `${i}ₘₛ`,
           type: 'time',
           x: i * timeToPixels,
           y: baseYPos + length,
@@ -260,22 +261,26 @@ export default class LegendLayer extends BaseTextLayer<TextData> {
         //Need to decide what text to add to the label
         if (!bottomWithinYAxisStart) {
         this.textDataX.push({
-          text: `${start_time}ms`,
+          text: `▶${start_time}ₘₛ`,
           type: 'time',
           x: 0 + pixelOffset,
           y: baseYPos + length + (yOffset === 0 ? 18 : -12),
           textScaled: this.textScaled,
+          textAlign: 'left',
+          compressedLabel: true,
         });
       }
       if (!topWithinYAxisEnd) {
 
         this.textDataX.push({
-          text: `${end_time}ms`,
+          text: `${end_time}ₘₛ◀`,
           type: 'time',
           x: width + pixelOffset,
           y: baseTopPos + (baseTopPos === 0 ? -16 : 16),
           textBaseline: baseTopPos === 0 ? 'bottom' : 'top',
+          textAlign: 'right',
           textScaled: this.textScaled,
+          compressedLabel: true,
         });
       }
         pixelOffset += width;
@@ -514,6 +519,7 @@ export default class LegendLayer extends BaseTextLayer<TextData> {
       textAlign: (data) => (data.textAlign || "center"),
       textScaled: (data) => (data.textScaled),
       fontSize: (data) => data.type === 'time' && this.compressedView ? `${this.getFontSize(16, 10, this.xScale)}px` : `20px`,
+      visible: (data) => (data.compressedLabel && this.xScale < 1.5) ? false : true,
     };
   }
 }

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

@@ -120,13 +120,13 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
         });
         // Now we need to create the text Labels
         this.textData.push({
-          text: `${start_time}ms`,
+          text: `${start_time}ₘₛ`,
           x: xmin,
           y: ymin + lineDist + 5,
           textBaseline: 'top',
         });
         this.textData.push({
-          text: `${end_time}ms`,
+          text: `${end_time}ₘₛ`,
           x: xmax,
           y: ymin + lineDist + 5,
           textBaseline: 'top',
@@ -182,12 +182,12 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
         });
         // Now we need to create the text Labels
         this.textData.push({
-          text: `${start_time}ms`,
+          text: `${start_time}ₘₛ`,
           x: xmin,
           y: ymax - lineDist,
         });
         this.textData.push({
-          text: `${end_time}ms`,
+          text: `${end_time}ₘₛ`,
           x: xmax,
           y: ymax - lineDist,
         });
@@ -225,7 +225,7 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
         const ypos = (ymax + ymin) / 2.0;
         // Now we need to create the text Labels
         this.textData.push({
-          text: `${end_time - start_time}ms`,
+          text: `${end_time - start_time}ₘₛ`,
           x: xpos,
           y: ypos + lineDist,
         });
@@ -257,7 +257,7 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
         const xpos = (xmin + xmax) / 2.0;
         // Now we need to create the text Labels
         this.textData.push({
-          text: `${end_time - start_time}ms`,
+          text: `${end_time - start_time}ₘₛ`,
           x: xpos,
           y: ((ymax - ymin) / 2.0) + -35 + offsetY,
         });

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

@@ -21,4 +21,5 @@ export interface LayerStyle<D> {
     textBaseline?: ((data: D) => string) | string;
     textScaled?: ((data: D) => number | undefined) | number | undefined;
     [x: string]: unknown;
+    visible?: (data: D) => boolean;
   }