From 75a9b39df63ae83b78790ec697ad3c87c4c7b0bb Mon Sep 17 00:00:00 2001 From: Timon Engelke Date: Tue, 30 Mar 2021 17:19:17 +0200 Subject: [PATCH] clean up some deep and confusing call stacks --- .../static/annotations/js/annotations.js | 101 +++++++++--------- 1 file changed, 51 insertions(+), 50 deletions(-) diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js index 37d8e980..74e205dd 100644 --- a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js +++ b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js @@ -563,14 +563,7 @@ function calculateImageScale() { result.attr('id', 'image_list'); oldImageList.replaceWith(result); - gImageList = getImageList(); - - // load first image if current image is not within image set - if (!imageContained) { - await loadAnnotateView(imageList[0].id); - } - - scrollImageList(); + gImageList = imageList.map(image => { return image.id }); } /** @@ -631,21 +624,6 @@ function calculateImageScale() { $('#blurred').prop('checked', annotationElem.data('blurred')).change(); } - /** - * Get the image list from all .annotate_image_link within #image_list. - */ - function getImageList() { - let imageList = []; - $('#image_list').find('.annotate_image_link').each(function(key, elem) { - let imageId = parseInt($(elem).data('imageid')); - if (imageList.indexOf(imageId) === -1) { - imageList.push(imageId); - } - }); - - return imageList; - } - /** * Validate a vector. * @@ -819,6 +797,11 @@ function calculateImageScale() { * @param fromHistory */ async function loadAnnotateView(imageId, fromHistory) { + // load first image if current image is not within image set + if (!gImageList.includes(imageId)) { + console.log('Loading first image because ' + imageId + ' is not contained in the selection'); + imageId = gImageList[0]; + } gEditAnnotationId = undefined; imageId = parseInt(imageId); @@ -838,7 +821,7 @@ function calculateImageScale() { loading.removeClass('hidden'); $('#annotation_type_id').val(gAnnotationType); - let loadImage = displayImage(imageId).then(scrollImageList); + let loadImage = displayImage(imageId); if (!$('#keep_selection').prop('checked')) { $('#concealed').prop('checked', false); @@ -883,9 +866,9 @@ function calculateImageScale() { } /** - * Load the image list from tye server applying a new filter. + * Get the image list from the server applying a new filter. */ - async function loadImageList() { + async function getImageList() { let filterElem = $('#filter_annotation_type'); let filter = filterElem.val(); let params = { @@ -911,7 +894,7 @@ function calculateImageScale() { displayFeedback($('#feedback_image_set_empty')); filterElem.val('').change(); } else { - await displayImageList(data.image_set.images); + return data.image_set.images; } } catch { displayFeedback($('#feedback_connection_error')); @@ -979,7 +962,7 @@ function calculateImageScale() { * Load the previous or the next image * * @param offset integer to add to the current image index - * @return index of the requested image in gImageList + * @return id of the requested image */ async function loadAdjacentImage(offset) { let imageIndex = gImageList.indexOf(gImageId); @@ -994,7 +977,8 @@ function calculateImageScale() { while (imageIndex > imageIndex.length) { imageIndex -= imageIndex.length; } - await loadAnnotateView(gImageList[imageIndex]); + gImageId = gImageList[imageIndex]; + return gImageList[imageIndex]; } /** @@ -1029,9 +1013,10 @@ function calculateImageScale() { /** * Scroll image list to make current image visible. + * @param imageId id of the image to scroll to */ - function scrollImageList() { - let imageLink = $('#annotate_image_link_' + gImageId); + function scrollImageList(imageId) { + let imageLink = $('#annotate_image_link_' + imageId); let list = $('#image_list'); let offset = list.offset().top; @@ -1105,6 +1090,17 @@ function calculateImageScale() { handleAnnotationTypeChange(); } + async function updateFilter() { + handleAnnotationTypeChange(); + let imageList = await getImageList(); + await displayImageList(imageList); + if (!gImageList.includes(gImageId)) { + gImageId = gImageList[0]; + } + scrollImageList(gImageId); + await loadAnnotateView(gImageId); + } + $(document).ready(function() { let get_params = decodeURIComponent(window.location.search.substring(1)).split('&'); @@ -1129,16 +1125,17 @@ function calculateImageScale() { "Content-Type": 'application/json', "X-CSRFTOKEN": gCsrfToken }; - gImageList = getImageList(); - scrollImageList(); - loadAnnotationTypeList(); // W3C standards do not define the load event on images, we therefore need to use // it from window (this should wait for all external sources including images) $(window).on('load', function() { setTool(); - loadAnnotateView(gImageId); - preloadImages(); + getImageList() + .then(displayImageList) + .then(r => { scrollImageList(gImageId) }) + .then(r => { loadAnnotateView(gImageId) }) + .then(r => { preloadImages() }); + loadAnnotationTypeList(); }()); $('.annotation_value').on('input', function() { @@ -1146,8 +1143,8 @@ function calculateImageScale() { }); $('#not_in_image').on('change', handleNotInImageToggle); handleNotInImageToggle(); - $('select#filter_annotation_type').on('change', loadImageList); - $('#filter_update_btn').on('click', loadImageList); + $('select#filter_annotation_type').on('change', updateFilter); + $('#filter_update_btn').on('click', updateFilter); $('select').on('change', function() { document.activeElement.blur(); }); @@ -1180,29 +1177,33 @@ function calculateImageScale() { $('#last_button').click(async function (event) { try { let annotation = getValidAnnotation(true); - let annotationPromise = createAnnotation(annotation); - let imagePromise = loadImageList().then(r => { - return loadAdjacentImage(-1); - }) - await Promise.all([annotationPromise, imagePromise]); + await createAnnotation(annotation); + let imageId = await loadAdjacentImage(-1); + let imageList = await getImageList(); + await displayImageList(imageList); + scrollImageList(imageId); + await loadAnnotateView(imageId); } catch (e) { console.log(e); } }); $('#back_button').click(async function (event) { - await loadAdjacentImage(-1); + let imageId = await loadAdjacentImage(-1); + await loadAnnotateView(imageId); }); $('#skip_button').click(async function (event) { - await loadAdjacentImage(1) + let imageId = await loadAdjacentImage(1); + await loadAnnotateView(imageId); }); $('#next_button').click(async function (event) { try { let annotation = getValidAnnotation(true); - let annotationPromise = createAnnotation(annotation); - let imagePromise = loadImageList().then(r => { - return loadAdjacentImage(1); - }) - await Promise.all([annotationPromise, imagePromise]); + await createAnnotation(annotation); + let imageId = await loadAdjacentImage(1); + let imageList = await getImageList(); + await displayImageList(imageList); + scrollImageList(imageId); + await loadAnnotateView(imageId); } catch (e) { console.log(e); }