diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue index 68c77e55..bce0ac5f 100644 --- a/client/src/components/geoJS/LayerManager.vue +++ b/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( diff --git a/client/src/components/geoJS/layers/legendLayer.ts b/client/src/components/geoJS/layers/legendLayer.ts index d3ee8109..d6bb867a 100644 --- a/client/src/components/geoJS/layers/legendLayer.ts +++ b/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 { @@ -153,7 +154,7 @@ export default class LegendLayer extends BaseTextLayer { 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 { //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; @@ -506,6 +511,7 @@ export default class LegendLayer extends BaseTextLayer { 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, }; } } diff --git a/client/src/components/geoJS/layers/timeLayer.ts b/client/src/components/geoJS/layers/timeLayer.ts index 5f92676a..96b677e6 100644 --- a/client/src/components/geoJS/layers/timeLayer.ts +++ b/client/src/components/geoJS/layers/timeLayer.ts @@ -117,13 +117,13 @@ export default class TimeLayer extends BaseTextLayer { }); // 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', @@ -177,12 +177,12 @@ export default class TimeLayer extends BaseTextLayer { }); // 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, }); @@ -220,7 +220,7 @@ export default class TimeLayer extends BaseTextLayer { 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, }); @@ -252,7 +252,7 @@ export default class TimeLayer extends BaseTextLayer { 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, }); diff --git a/client/src/components/geoJS/layers/types.ts b/client/src/components/geoJS/layers/types.ts index 22cc59b3..192bb637 100644 --- a/client/src/components/geoJS/layers/types.ts +++ b/client/src/components/geoJS/layers/types.ts @@ -20,4 +20,5 @@ export interface LayerStyle { textBaseline?: ((data: D) => string) | string; textScaled?: ((data: D) => number | undefined) | number | undefined; [x: string]: unknown; + visible?: (data: D) => boolean; }