SVG polygon selectors: trailing space breaks area computation

[hsellik]

Hi,

Firstly, thanks for the awesome work!

I am having trouble with Annotorious OpenSeadragon Plugin and it's probably related to Annotorious as well.

I can select annotations inside other annotations if create them myself. However, I am not able to select any annotation which was created in an annotation created by setAnnotations() method.

There are following cases: A) I create an annotation and create another inside it - I can select everything B) I create an annotation inside an annotation created by setAnnotations - I can only select the parent C) I create an annotation around an annotation created by setAnnotations - I can select everything D) Both annotations are created by setAnnotations and one is in another - I can only select the parent, but sometimes I can select everything

It's as if the annotations created by setAnnotations are for some reason making me unable to select other annotations inside them.

Has anyone encountered something like this? Any way to change this behaviour?

[rsimon]

Hi @hsellik,

I wasn't able to reproduce this. Are you perhaps using AnnotoriousOSD v2.7.0? If so, this might have a different reason. It's not related to annotations created manually vs. via setAnnotations, but a bug with hit testing. (The clicks would pick the smallest annotation who's bounding box intersected with the mouse - even if the mouse was actually outside the annotation shape.) See also: https://github.com/recogito/annotorious-openseadragon/issues/100

In case this is your problem, an upgrade to Annotorious OSD v2.7.1 will fix it.

If not, would it be possible for you to set up an online code sample, so I can try to reproduce it?

[rsimon]

P.S.: can you post some examples of annotations you are setting with setAnnotations? And are any errors showing up in the error console?

[hsellik]

Thanks for the quick feedback. I'm using 2.7.1. I'll try to make a reproduction package and get back to you.

[rsimon]

Ok, weird. My suspicion is still that there might be something specific with the annotations... (I could definitely not reproduce it with a "minimal standard" setup, and rectangle/polygon annotations. Any particular shapes (or annotation bodies?) you are using?

I'll try to make a reproduction package and get back to you.

Perfect, thx.

[hsellik]

They are all the same, with the following structure:

[{
    "@context": "http://www.w3.org/ns/anno.jsonld",
    "id": "seg0",
    "type": "Annotation",
    "body": [{
        "type": "TextualBody",
        "purpose": "tagging",
        "value": "primary caries/cavity"
    }],
    "target": {
        "selector": [{
            "type": "SvgSelector",
            "value": "<svg><polygon points='1818,889 1852,889 1853,889 1863,893 1864,893 1866,895 1867,896 1867,898 1868,899 1869,914 1869,915 1864,933 1864,934 1848,954 1847,955 1844,955 1843,955 1840,958 1839,959 1833,961 1832,962 1809,962 1808,962 1802,959 1801,959 1792,950 1791,949 1785,932 1784,931 1784,910 1784,909 1789,903 1789,902 1796,897 1797,896 1806,892 1807,891 1818,889 '></polygon></svg>"
        }]
    }
},...
]

It looks like this and breaks when I have many annotations:

I tried to only leave only 2 annotations, the box (also a polygon) and one tooth annotation that I couldn't select before. Then it worked for some reason. I'll try to see if I can create the situation with only a few annotations.

[rsimon]

Ok, thanks for this. That's really helpful. I ran into a similar issue previously, with the 2D index library truncating results during the hit testing. I'll try to reproduce with more annotations.

[hsellik]

@rsimon , could you try this and see if you can select the inner annotation?

viewer.open({
    type: 'image',
    url: 'https://www.expatica.com/app/uploads/2018/11/best-castles-in-europe-1920x1080.jpg',
  });
anno.setAnnotations([
    {
      '@context': 'http://www.w3.org/ns/anno.jsonld',
      id: 'seg18',
      type: 'Annotation',
      body: [{ type: 'TextualBody', purpose: 'tagging', value: '47' }],
      target: {
        selector: [
          {
            type: 'SvgSelector',
            value:
              "<svg><polygon points='1019,816 1038,817 1039,817 1047,823 1048,823 1067,845 1068,846 1078,849 1079,850 1092,851 1093,851 1107,856 1108,856 1110,858 1111,859 1111,861 1112,862 1111,897 1111,898 1102,909 1102,910 1090,920 1089,920 1058,951 1057,952 1040,966 1039,967 1020,979 1019,979 1001,994 1000,994 996,999 995,1000 959,1030 958,1031 950,1036 949,1037 942,1039 941,1040 932,1040 931,1040 925,1038 924,1038 923,1037 922,1037 922,1029 922,1028 929,1013 929,1012 946,990 946,989 969,964 970,963 975,949 975,948 969,943 968,942 958,944 957,944 952,949 951,950 945,953 944,953 902,982 901,983 889,989 888,990 882,991 881,992 871,992 870,992 868,990 867,989 866,970 866,969 868,961 868,960 877,948 877,947 893,931 894,930 912,916 912,915 921,910 922,910 931,903 932,903 952,884 953,883 965,867 965,866 969,863 970,862 973,856 973,855 982,843 982,842 998,826 999,825 1011,818 1012,817 1019,816 '></polygon></svg>",
          },
        ],
      },
    },
    {
      '@context': 'http://www.w3.org/ns/anno.jsonld',
      id: 'seg19',
      type: 'Annotation',
      body: [{ type: 'TextualBody', purpose: 'tagging', value: 'primary caries/cavity' }],
      target: {
        selector: [
          {
            type: 'SvgSelector',
            value:
              "<svg><polygon points='1062,854 1086,856 1087,856 1101,862 1102,862 1107,877 1108,878 1108,891 1108,892 1102,903 1102,904 1069,940 1068,941 1065,942 1064,943 1054,943 1053,943 1048,939 1047,938 1043,929 1042,928 1040,917 1039,916 1039,887 1039,886 1042,877 1042,876 1051,862 1051,861 1057,856 1058,855 1062,854 '></polygon></svg>",
          },
        ],
      },
    },
  ]);

[rsimon]

Ok, thanks for this. Yes, I can reproduce the problem! It looks like hit detection works. (Gets both annotations when the mouse is over both, as it should; and follows the outlines exactly.) But: then sorting by area doesn't properly work.

I need to re-check the area calculation formula... probably a small issue only. I'll keep you posted.

[rsimon]

Hah - well that was a fun one. Area computation works. However, it's thrown off-track by a small issue in your data: you have trailing spaces in your polyogn points attribute. (See the space between 854 and '):

<svg><polygon points='1062,854 1086,856 [...] ,854 '></polygon></svg>

If you erase that, area computation works, and mouseover/select behavior works.

<svg><polygon points='1062,854 1086,856 [...] ,854'></polygon></svg>

I'll make sure input is sanitization will catch this in the future, i.e. next release will work. Meanwhile, it looks like you can work around by just removing the trailing spaces.

[hsellik]

Haha, didn't expect that. Thanks for looking into this! :)

[rsimon]

This is now fixed in the core Selector handling code in Annotorious standard: https://github.com/recogito/annotorious/commit/0a91e3e38032934acf1c6a9fb6547a9cebf7f18b