Skip to content

Commit c6f0a03

Browse files
BryonLewisBryonLewis
authored
Thumbnail annotation positioning (#258)
* fix: update libgdal version to 36 to support debian 13-trixie * fix: scale adjustments while in compressedOverlay viewing mode * fix: typo in yScale * fix: removal of y-scale, not needed now that we use scaledWidth and scaledHeight * update: remove deprecated yScale references * fix: missed editAnnotationLayer references to yScale * fix: remove older variables for yScale calculation
1 parent bdf606f commit c6f0a03

File tree

12 files changed

+38
-68
lines changed

12 files changed

+38
-68
lines changed

‎client/src/components/ThumbnailViewer.vue‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export default defineComponent({
2727
const geoJS = useGeoJS();
2828
const initialized = ref(false);
2929
const clientHeight = ref(0);
30-
const yScale = ref(1);
3130
const polyLayerCreated = ref(false);
3231
let downState: any;
3332
@@ -49,13 +48,6 @@ export default defineComponent({
4948
geoJS.resetMapDimensions(width, height);
5049
geoJS.getGeoViewer().value.bounds({ left: 0, top: 0, bottom: height, right: width });
5150
52-
// Calculate yScale
53-
const camera = geoJS.getGeoViewer().value.camera();
54-
const coords = camera.worldToDisplay({ x: 0, y: 0 });
55-
const end = camera.worldToDisplay({ x: 0, y: height });
56-
const diff = coords.y - end.y;
57-
yScale.value = diff ? (clientHeight.value * 0.5) / diff : 1;
58-
5951
if (props.images.length) {
6052
geoJS.drawImages(props.images, scaledWidth.value || width, scaledHeight.value || height);
6153
}
@@ -151,7 +143,6 @@ export default defineComponent({
151143
containerRef,
152144
geoViewerRef: geoJS.getGeoViewer(),
153145
initialized,
154-
yScale,
155146
scaledWidth,
156147
scaledHeight,
157148
backgroundColor,
@@ -172,7 +163,6 @@ export default defineComponent({
172163
v-if="initialized"
173164
:geo-viewer-ref="geoViewerRef"
174165
:spectro-info="spectroInfo"
175-
:y-scale="yScale"
176166
:scaled-width="scaledWidth"
177167
:scaled-height="scaledHeight"
178168
thumbnail

‎client/src/components/geoJS/LayerManager.vue‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,6 @@ export default defineComponent({
3838
type: Boolean,
3939
default: false,
4040
},
41-
yScale: {
42-
type: Number,
43-
default: 1,
44-
},
4541
scaledWidth: {
4642
type: Number,
4743
default: -1,
@@ -340,12 +336,11 @@ export default defineComponent({
340336
selectedType.value === 'pulse' ? selectedAnnotationId.value : null,
341337
currentUser.value,
342338
colorScale.value,
343-
props.yScale,
344339
);
345340
rectAnnotationLayer.redraw();
346341
}
347342
if (viewCompressedOverlay.value && compressedOverlayLayer && !props.spectroInfo?.compressedWidth && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
348-
compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
343+
compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times);
349344
compressedOverlayLayer.redraw();
350345
} else {
351346
compressedOverlayLayer?.disable();
@@ -356,7 +351,6 @@ export default defineComponent({
356351
selectedType.value === 'sequence' ? selectedAnnotationId.value : null,
357352
currentUser.value,
358353
colorScale.value,
359-
props.yScale,
360354
);
361355
sequenceAnnotationLayer.redraw();
362356
}
@@ -515,13 +509,13 @@ export default defineComponent({
515509
sequenceAnnotationLayer.spectroInfo = props.spectroInfo;
516510
sequenceAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
517511
}
518-
rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value, props.yScale);
512+
rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value);
519513
rectAnnotationLayer.redraw();
520514
if (viewCompressedOverlay.value && compressedOverlayLayer && props.spectroInfo.start_times && props.spectroInfo.end_times) {
521-
compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
515+
compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times);
522516
compressedOverlayLayer.redraw();
523517
}
524-
sequenceAnnotationLayer.formatData(localSequenceAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value, props.yScale);
518+
sequenceAnnotationLayer.formatData(localSequenceAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value);
525519
sequenceAnnotationLayer.redraw();
526520
if (!props.thumbnail) {
527521
if (!legendLayer) {
@@ -641,14 +635,13 @@ export default defineComponent({
641635
selectedType.value === 'pulse' ? selectedAnnotationId.value : null,
642636
currentUser.value,
643637
colorScale.value,
644-
props.yScale,
645638
);
646639
rectAnnotationLayer.redraw();
647640
}
648641
if (compressedOverlayLayer && props.spectroInfo?.start_times && props.spectroInfo.end_times && viewCompressedOverlay.value) {
649-
if (!props.thumbnail && props.spectroInfo.compressedWidth ) {
642+
if (!props.thumbnail) {
650643
compressedOverlayLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
651-
compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
644+
compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times);
652645
compressedOverlayLayer.redraw();
653646
} else {
654647
compressedOverlayLayer?.disable();
@@ -696,7 +689,6 @@ export default defineComponent({
696689
selectedAnnotationId.value,
697690
currentUser.value,
698691
colorScale.value,
699-
props.yScale,
700692
);
701693
sequenceAnnotationLayer.redraw();
702694
}
@@ -711,7 +703,7 @@ export default defineComponent({
711703
watch(viewCompressedOverlay, () => {
712704
if (viewCompressedOverlay.value && compressedOverlayLayer && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
713705
compressedOverlayLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
714-
compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
706+
compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times);
715707
compressedOverlayLayer.redraw();
716708
} else {
717709
compressedOverlayLayer.disable();

‎client/src/components/geoJS/geoJSUtils.ts‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,6 @@ function spectroSequenceToGeoJSon(
246246
spectroInfo: SpectroInfo,
247247
ymin = 0,
248248
ymax = 10,
249-
yScale = 1,
250249
scaledWidth = 0,
251250
// eslint-disable-next-line @typescript-eslint/no-unused-vars
252251
_scaledHeight = 0, // may be useful in the future
@@ -264,11 +263,11 @@ function spectroSequenceToGeoJSon(
264263
type: "Polygon",
265264
coordinates: [
266265
[
267-
[start_time, ymin * yScale],
268-
[start_time, ymax * yScale],
269-
[end_time, ymax * yScale],
270-
[end_time, ymin * yScale],
271-
[start_time, ymin * yScale],
266+
[start_time, ymin],
267+
[start_time, ymax],
268+
[end_time, ymax],
269+
[end_time, ymin ],
270+
[start_time, ymin],
272271
],
273272
],
274273
};
@@ -346,11 +345,11 @@ function spectroSequenceToGeoJSon(
346345
type: "Polygon",
347346
coordinates: [
348347
[
349-
[start_time, ymin * yScale + offsetY],
350-
[start_time, ymax * yScale + offsetY],
351-
[end_time, ymax * yScale + offsetY],
352-
[end_time, ymin * yScale + offsetY],
353-
[start_time, ymin * yScale + offsetY],
348+
[start_time, ymin + offsetY],
349+
[start_time, ymax + offsetY],
350+
[end_time, ymax + offsetY],
351+
[end_time, ymin + offsetY],
352+
[start_time, ymin + offsetY],
354353
],
355354
],
356355
};
@@ -372,7 +371,6 @@ function spectroSequenceToGeoJSon(
372371
function spectroToGeoJSon(
373372
annotation: SpectrogramAnnotation,
374373
spectroInfo: SpectroInfo,
375-
yScale = 1,
376374
scaledWidth = 0,
377375
scaledHeight = 0
378376
): GeoJSON.Polygon {
@@ -392,11 +390,11 @@ function spectroToGeoJSon(
392390
type: "Polygon",
393391
coordinates: [
394392
[
395-
[start_time, low_freq * yScale],
396-
[start_time, high_freq * yScale],
397-
[end_time, high_freq * yScale],
398-
[end_time, low_freq * yScale],
399-
[start_time, low_freq * yScale],
393+
[start_time, low_freq],
394+
[start_time, high_freq],
395+
[end_time, high_freq],
396+
[end_time, low_freq],
397+
[start_time, low_freq],
400398
],
401399
],
402400
};
@@ -450,11 +448,11 @@ function spectroToGeoJSon(
450448
type: "Polygon",
451449
coordinates: [
452450
[
453-
[start_time, low_freq * yScale],
454-
[start_time, high_freq * yScale],
455-
[end_time, high_freq * yScale],
456-
[end_time, low_freq * yScale],
457-
[start_time, low_freq * yScale],
451+
[start_time, low_freq],
452+
[start_time, high_freq],
453+
[end_time, high_freq],
454+
[end_time, low_freq],
455+
[start_time, low_freq],
458456
],
459457
],
460458
};

‎client/src/components/geoJS/layers/compressedOverlayLayer.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ interface RectCompressedGeoJSData {
77
}
88

99

10-
function scaleCompressedTime(start_time: number, end_time: number, spectroInfo: SpectroInfo, yScale: number, scaledWidth: number, scaledHeight: number) {
10+
function scaleCompressedTime(start_time: number, end_time: number, spectroInfo: SpectroInfo, scaledWidth: number, scaledHeight: number) {
1111
const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
1212
const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
1313

@@ -24,11 +24,11 @@ function scaleCompressedTime(start_time: number, end_time: number, spectroInfo:
2424
type: "Polygon",
2525
coordinates: [
2626
[
27-
[start_time_scaled, low_freq * yScale],
28-
[start_time_scaled, high_freq * yScale],
29-
[end_time_scaled, high_freq * yScale],
30-
[end_time_scaled, low_freq * yScale],
31-
[start_time_scaled, low_freq * yScale],
27+
[start_time_scaled, low_freq],
28+
[start_time_scaled, high_freq],
29+
[end_time_scaled, high_freq],
30+
[end_time_scaled, low_freq],
31+
[start_time_scaled, low_freq],
3232
],
3333
],
3434
} as GeoJSON.Polygon;
@@ -88,7 +88,6 @@ export default class CompressedOverlayLayer {
8888
formatData(
8989
baseStartTimes: number[],
9090
baseEndTimes: number[],
91-
yScale = 1,
9291
) {
9392
const arr: RectCompressedGeoJSData[] = [];
9493
const startTimes = [...baseStartTimes];
@@ -99,7 +98,7 @@ export default class CompressedOverlayLayer {
9998
// These are swapped because we want to mask out the area inbetween
10099
const startTime = endTimes[i];
101100
const endTime = startTimes[i];
102-
const polygon = scaleCompressedTime(startTime, endTime, this.spectroInfo, yScale, this.scaledWidth, this.scaledHeight);
101+
const polygon = scaleCompressedTime(startTime, endTime, this.spectroInfo, this.scaledWidth, this.scaledHeight);
103102
const newAnnotation: RectCompressedGeoJSData = {
104103
polygon,
105104
};

‎client/src/components/geoJS/layers/editAnnotationLayer.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,6 @@ export default class EditAnnotationLayer {
371371
? spectroToGeoJSon(
372372
annotationData as SpectrogramAnnotation,
373373
this.spectroInfo,
374-
1,
375374
this.scaledWidth,
376375
this.scaledHeight
377376
)
@@ -380,7 +379,6 @@ export default class EditAnnotationLayer {
380379
this.spectroInfo,
381380
-10,
382381
-50,
383-
1,
384382
this.scaledWidth,
385383
this.scaledHeight,
386384
offsetY

‎client/src/components/geoJS/layers/freqLayer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default class FreqLayer extends BaseTextLayer<TextData> {
5151
this.lineData = [];
5252
const lineDist = 16;
5353
annotationData.forEach((annotation: SpectrogramAnnotation) => {
54-
const polygon = spectroToGeoJSon(annotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight);
54+
const polygon = spectroToGeoJSon(annotation, this.spectroInfo, this.scaledWidth, this.scaledHeight);
5555
const {low_freq, high_freq } = annotation;
5656
const [xmin, ymin] = polygon.coordinates[0][0];
5757
const [xmax, ymax] = polygon.coordinates[0][2];

‎client/src/components/geoJS/layers/rectangleLayer.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,11 +119,10 @@ export default class RectangleLayer {
119119
selectedIndex: number | null,
120120
currentUser: string,
121121
colorScale?: d3.ScaleOrdinal<string, string, never>,
122-
yScale = 1,
123122
) {
124123
const arr: RectGeoJSData[] = [];
125124
annotationData.forEach((annotation: SpectrogramAnnotation) => {
126-
const polygon = spectroToGeoJSon(annotation, this.spectroInfo, yScale, this.scaledWidth, this.scaledHeight);
125+
const polygon = spectroToGeoJSon(annotation, this.spectroInfo, this.scaledWidth, this.scaledHeight);
127126
const [xmin, ymin] = polygon.coordinates[0][0];
128127
const [xmax, ymax] = polygon.coordinates[0][2];
129128
// For the compressed view we need to filter out default or NaN numbers

‎client/src/components/geoJS/layers/sequenceLayer.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,6 @@ export default class SequenceLayer {
130130
selectedIndex: number | null,
131131
currentUser: string,
132132
colorScale?: d3.ScaleOrdinal<string, string, never>,
133-
yScale = 1,
134133
) {
135134
const arr: RectGeoJSData[] = [];
136135
const compressedView = !!(this.spectroInfo.compressedWidth);
@@ -141,7 +140,6 @@ export default class SequenceLayer {
141140
this.spectroInfo,
142141
-10,
143142
-50,
144-
yScale,
145143
this.scaledWidth,
146144
this.scaledHeight,
147145
offsetY

‎client/src/components/geoJS/layers/speciesLayer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default class SpeciesLayer extends BaseTextLayer<TextData> {
3838
formatData(annotationData: SpectrogramAnnotation[]) {
3939
this.textData = [];
4040
annotationData.forEach((annotation: SpectrogramAnnotation) => {
41-
const polygon = spectroToGeoJSon(annotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight);
41+
const polygon = spectroToGeoJSon(annotation, this.spectroInfo, this.scaledWidth, this.scaledHeight);
4242
const [xmin, ymin] = polygon.coordinates[0][0];
4343
const [xmax, ymax] = polygon.coordinates[0][2];
4444
// For the compressed view we need to filter out default or NaN numbers

‎client/src/components/geoJS/layers/speciesSequenceLayer.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export default class SpeciesSequenceLayer extends BaseTextLayer<TextData> {
4444
this.spectroInfo,
4545
-10,
4646
-120,
47-
1,
4847
this.scaledWidth,
4948
this.scaledHeight
5049
);

0 commit comments

Comments
 (0)