Skip to content

Commit

Permalink
fix: remove errors during click on target that does not belong to cur…
Browse files Browse the repository at this point in the history 
…rent displayed variant annotations
  • Loading branch information
@paulpestov
paulpestov committed Oct 17, 2024
1 parent d48a87a commit b3d623c
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 35 deletions.
2 changes: 1 addition & 1 deletion src/components/annotations/AnnotationsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ watch(
);
const unsubscribe = TextEventBus.on('click', ({ target }) => {
const unsubscribe = TextEventBus.on('click', ({ target }) => {
// Next we look up which annotations need to be selected
let annotationIds = {};
Expand Down
10 changes: 9 additions & 1 deletion src/components/annotations/variants/VariantsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ allocateWitnessColorInVariantItem()
const annotations = computed<Annotation[]>(() => annotationStore.annotations);
const activeContentUrl = computed<string>(() => contentsStore.activeContentUrl);
const filteredAnnotations = computed<Annotation[]>(() => annotationStore.filteredAnnotations);
const updateTextHighlighting = computed(() =>
// We need to make sure that annotations are loaded (this.annotations),
// the text HTML is present in DOM (this.activeContentUrl is set after DOM update)
Expand All @@ -34,10 +36,16 @@ watch(
);
const unsubscribe = TextEventBus.on('click', ({ target }) => {
const targetIsSelected = parseInt(target.getAttribute('data-annotation-level'), 10) > 0;
const ids = getAnnotationIdsFromTarget(target)
// We check if the found annotation ids are currently displayed in the active tab, if not we skip the handling
const annotations = filteredAnnotations.value.filter((filtered) => ids.find(id => filtered.id === id))
if (annotations.length === 0) return
const targetIsSelected = parseInt(target.getAttribute('data-annotation-level'), 10) > 0
if (annotationStore.isSingleSelectMode) {
if (targetIsSelected) {
annotationStore.removeFilteredAnnotations(ids)
Expand Down
9 changes: 4 additions & 5 deletions src/stores/annotations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export const useAnnotationsStore = defineStore('annotations', () => {

// When filtering by witness it can happen that a target is used for some other active annotation item,
// In that case, we want to keep the level of highlighting it had and

filteredAnnotations.value
.filter(annotation => !activeIds.includes(annotation.id))
.forEach(annotation => {
Expand All @@ -145,11 +145,10 @@ export const useAnnotationsStore = defineStore('annotations', () => {
const selectorIsActive = activeIds.filter(id => selector === AnnotationUtils.generateTargetSelector(activeAnnotations.value[id])).length > 0;
const target = document.querySelector(selector)
if(!target) return;

if (!selectorIsActive && AnnotationUtils.getCurrentLevel(target) < 0) {
AnnotationUtils.highlightTargets(selector, {level: 0});
}

})
}

Expand Down Expand Up @@ -301,7 +300,7 @@ export const useAnnotationsStore = defineStore('annotations', () => {

const addHighlightClickListeners = () => {
const textEl = document.querySelector('#text-content>div>*');

if (!textEl) return;

textEl.addEventListener('click', ({target}) => {
Expand All @@ -317,7 +316,7 @@ export const useAnnotationsStore = defineStore('annotations', () => {
if (!target.dataset.annotation) {
target = getNearestParentAnnotation(target);
}

if (!target) {
return;
}
Expand Down
59 changes: 31 additions & 28 deletions tests/cypress/e2e/variants.cy.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { commonSelectors, ahiqarSelectors, gflSelectors } from '../support/globals';
import { commonSelectors, ahiqarSelectors } from '../support/globals';

const selectors = {
...commonSelectors,
Expand Down Expand Up @@ -33,14 +33,14 @@ const selectors = {
})

Cypress.Commands.add('clickSingleSelectButton', () => {

cy
.get('.panels-wrapper .panel:nth-child(4)')
.find('.panel-header')
.find('.actions')
.children().eq(2)
.find('input[type="checkbox"]')
.click()
.click()
})

Cypress.Commands.add('checkNoAnnotationsAvailable', () => {
Expand All @@ -53,9 +53,6 @@ const selectors = {
.find('span').contains('No Annotations available')
})




describe('VariantsAnnotation', () => {

beforeEach(() => {
Expand All @@ -70,7 +67,7 @@ const selectors = {
describe('Variants items selection', () => {

it('Should display third annotation tab', () => {
cy
cy
.get(selectors.tab)
.children()
.eq(2)
Expand All @@ -80,36 +77,35 @@ const selectors = {
});

it('Should show a list of variant items', () => {
cy
cy
.get(selectors.list)
.should('be.visible')
.children()
.should("have.length", 11)
});


it('select (unselect) a variant item', () => {
// should select a variant item and add its witness after the highlighted text + the highlighted text should become light blue
cy
.get(selectors.list)
.children()
.eq(0)
.click()
.should('have.class', 'active') // the variant item is selected
.should('have.class', 'active') // the variant item is selected
.get('div#MD12675N1l4l2l6l4l40')
.find('span.witnesses')
.find('span').contains('DFM 614') // the witness is added
.parent()
.next()
.invoke('attr', 'data-annotation-level')
.should('eq', '1') // highlighted text should become light blue
.should('eq', '1') // highlighted text should become light blue

// --- select sequentially another variant item ---
.get(selectors.list)
.children()
.eq(1)
.click()
.should('have.class', 'active') // the variant item is selected
.should('have.class', 'active') // the variant item is selected
.get('div#MD12675N1l4l2l6l4l40')
.find('span.witnesses')
.find('span').contains('Ming. syr. 258') // the witness is added
Expand All @@ -134,7 +130,7 @@ const selectors = {
.next()
.invoke('attr', 'data-annotation-level')
.should('eq', '1') // highlighted text should stay light blue (we still have one witness)

// --- unselect the second variant item
.get(selectors.list)
.children()
Expand All @@ -153,14 +149,14 @@ const selectors = {
describe('Witnesses', () => {
it('Deselects a first witness from the dropdown', () => {
cy
// click at one target - useful to see how this target's witnesses list change when we unclick at one witness in drop down
// click at one target - useful to see how this target's witnesses list change when we unclick at one witness in drop down
.wait(500)
.get('div#text-content div#MD12675N1l4l2l6l4l42')
.children()
.eq(1)
.click()
// click at the witness 'Cod. Arab. 236' of the drop down

// click at the witness 'Cod. Arab. 236' of the drop down
.clickWitnessItem('4 Witnesses selected', 'Cod. Arab. 236')

// after this part we check the effects of this click
Expand Down Expand Up @@ -222,7 +218,7 @@ const selectors = {
.children()
.should('have.length',4)
.eq(0)
.checkTextInWitnessItemDescription('Cod. Arab. 236', 'test')
.checkTextInWitnessItemDescription('Cod. Arab. 236', 'test')
// witness description will update once description is there
.checkTextInWitnessItemDescription('DFM 614', 'test')
.checkTextInWitnessItemDescription('Ming. syr. 258', 'test')
Expand Down Expand Up @@ -264,7 +260,15 @@ const selectors = {
.should('not.have.class', 'active')
})

//
it('should not select a target for a different annotation tab', () => {
cy
.get('#MD12675N1l4l2l6l4l58l2')
.click()
.should('have.attr', 'data-annotation-level', '-1')
.get(selectors.list)
.children()
.should('not.have.class', 'active')
})
it('should deselect the highlighted text, remove its witnesses and deselect all related variant items in variants tab', () => {
// unclick at one target
cy
Expand All @@ -290,11 +294,10 @@ const selectors = {
})
})


describe('Single select mode', () => {

it('should hide the variant items when single select mode is on', () => {
cy.wait(500).then(() => {
cy.wait(500).then(() => {
// we wait till the text panel and annotations panel are fully loaded
cy
.clickSingleSelectButton().then(() => {
Expand All @@ -305,18 +308,18 @@ const selectors = {

it('should show variant items of the target as selected when clicking the target in single select mode', () => {

cy.wait(500).then(() => {
cy.wait(500).then(() => {
cy
.clickSingleSelectButton().then(() => {
cy.clickTarget()
cy.get('.panels-wrapper .panel:nth-child(4) .panel-body div#pv_id_6_2_content')
cy.get('.panels-wrapper .panel:nth-child(4) .panel-body div#pv_id_6_2_content')
.find('.annotations-list')
.children().should('have.length', 4)
.each(($li) => {
expect($li).to.have.class('active')
})
})
})
})
})

it('should hide the selected variant items after unclicking the target in single select mode', () => {
Expand All @@ -331,7 +334,7 @@ const selectors = {
.click()
// we expect the selected annotations to be hidden from the tab
cy.checkNoAnnotationsAvailable()
})
})
})

it('should show again all the variant item when we switch off the single select mode', () => {
Expand All @@ -340,12 +343,12 @@ const selectors = {
.clickSingleSelectButton() // set the single select mode
cy
.clickSingleSelectButton() // switch off the single select mode
cy
cy
.get(selectors.list)
.should('be.visible')
.children()
.should("have.length", 11) // we have 11 variant items as in the normal mode - no single select mode
.should("have.length", 11) // we have 11 variant items as in the normal mode - no single select mode
})
})
})
});
})
});

0 comments on commit b3d623c

Please sign in to comment.