Strange problem with relations UI

Hello,
I met a strange problem when using rel.manual. when I dragged the scrollbar to the right and turned to the next sentence, part of the sentence disappeared just like this.

1

I think it’s caused by this sentence because after I removed this sentence, this problem didn’t occur anymore.

There are some other observations that may be helpful:

  1. If I don’t move scrollbar to the right, this problem won’t happen.
  2. if I return to this sentence, move scrollbar to the right and then move back to the start, this problem will be solved. Below is the demonstration.

2

My run command is

prodigy rel.manual relation_test blank:en ner_test.jsonl --label=USED-FOR,EVALUATION-FOR

and my configuration is

{
    "port": 9090,
    "host": "0.0.0.0",
    "ui_lang": "en",
    "feed_overlap": true,
    "custom_theme": {
        "cardMaxWidth": "80%",
        "relationHeight": 225
    }
}

The NER result of the sentence with problem is

{
 "_id": "173856-1",
 "text": "The key advantage of our coupled model is to provide us with the flexibility of 1) incorporating joint features on the bundled tags to implicitly learn the loose mapping between heterogeneous annotations, and 2) exploring separate features on one-side tags to overcome the data sparseness problem of using only bundled tags.",
 "spans": [
  {
   "start": 25,
   "end": 38,
   "token_start": 5,
   "token_end": 6,
   "label": "\u65b9\u6cd5"
  },
  {
   "start": 97,
   "end": 111,
   "token_start": 18,
   "token_end": 19,
   "label": "\u5176\u4ed6\u5b66\u672f\u7528\u8bed"
  },
  {
   "start": 119,
   "end": 131,
   "token_start": 22,
   "token_end": 23,
   "label": "\u5176\u4ed6\u5b66\u672f\u7528\u8bed"
  },
  {
   "start": 156,
   "end": 203,
   "token_start": 28,
   "token_end": 32,
   "label": "\u5176\u4ed6\u5b66\u672f\u7528\u8bed"
  },
  {
   "start": 178,
   "end": 203,
   "token_start": 31,
   "token_end": 32,
   "label": "\u5176\u4ed6\u5b66\u672f\u7528\u8bed"
  },
  {
   "start": 231,
   "end": 239,
   "token_start": 39,
   "token_end": 39,
   "label": "\u5176\u4ed6\u5b66\u672f\u7528\u8bed"
  },
  {
   "start": 273,
   "end": 296,
   "token_start": 48,
   "token_end": 50,
   "label": "\u4efb\u52a1"
  },
  {
   "start": 311,
   "end": 323,
   "token_start": 54,
   "token_end": 55,
   "label": "\u5176\u4ed6\u5b66\u672f\u7528\u8bed"
  }
 ],
 "meta": {
  "translation": "\u6211\u4eec\u7684\u8026\u5408\u6a21\u578b\u7684\u5173\u952e\u4f18\u52bf\u662f\u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86\u7075\u6d3b\u6027\uff1a1\uff09\u5c06\u8054\u5408\u7279\u5f81\u5408\u5e76\u5230\u6346\u7ed1\u6807\u7b7e\u4e0a\uff0c\u9690\u5f0f\u5b66\u4e60\u5f02\u6784\u6ce8\u91ca\u4e4b\u95f4\u7684\u677e\u6563\u6620\u5c04\uff1b2\uff09\u63a2\u7d22\u5355\u4fa7\u6807\u7b7e\u4e0a\u7684\u5355\u72ec\u7279\u5f81\uff0c\u4ee5\u514b\u670d\u4ec5\u4f7f\u7528\u6346\u7ed1\u6807\u7b7e\u7684\u6570\u636e\u7a00\u758f\u95ee\u9898\u3002"
 },
 "source": "ACL-2015-abstract",
 "paper_id": "9446888",
 "_input_hash": 724492719,
 "_task_hash": -64118877,
 "tokens": [
  {
   "text": "The",
   "start": 0,
   "end": 3,
   "id": 0,
   "ws": true
  },
  {
   "text": "key",
   "start": 4,
   "end": 7,
   "id": 1,
   "ws": true
  },
  {
   "text": "advantage",
   "start": 8,
   "end": 17,
   "id": 2,
   "ws": true
  },
  {
   "text": "of",
   "start": 18,
   "end": 20,
   "id": 3,
   "ws": true
  },
  {
   "text": "our",
   "start": 21,
   "end": 24,
   "id": 4,
   "ws": true
  },
  {
   "text": "coupled",
   "start": 25,
   "end": 32,
   "id": 5,
   "ws": true
  },
  {
   "text": "model",
   "start": 33,
   "end": 38,
   "id": 6,
   "ws": true
  },
  {
   "text": "is",
   "start": 39,
   "end": 41,
   "id": 7,
   "ws": true
  },
  {
   "text": "to",
   "start": 42,
   "end": 44,
   "id": 8,
   "ws": true
  },
  {
   "text": "provide",
   "start": 45,
   "end": 52,
   "id": 9,
   "ws": true
  },
  {
   "text": "us",
   "start": 53,
   "end": 55,
   "id": 10,
   "ws": true
  },
  {
   "text": "with",
   "start": 56,
   "end": 60,
   "id": 11,
   "ws": true
  },
  {
   "text": "the",
   "start": 61,
   "end": 64,
   "id": 12,
   "ws": true
  },
  {
   "text": "flexibility",
   "start": 65,
   "end": 76,
   "id": 13,
   "ws": true
  },
  {
   "text": "of",
   "start": 77,
   "end": 79,
   "id": 14,
   "ws": true
  },
  {
   "text": "1",
   "start": 80,
   "end": 81,
   "id": 15,
   "ws": false
  },
  {
   "text": ")",
   "start": 81,
   "end": 82,
   "id": 16,
   "ws": true
  },
  {
   "text": "incorporating",
   "start": 83,
   "end": 96,
   "id": 17,
   "ws": true
  },
  {
   "text": "joint",
   "start": 97,
   "end": 102,
   "id": 18,
   "ws": true
  },
  {
   "text": "features",
   "start": 103,
   "end": 111,
   "id": 19,
   "ws": true
  },
  {
   "text": "on",
   "start": 112,
   "end": 114,
   "id": 20,
   "ws": true
  },
  {
   "text": "the",
   "start": 115,
   "end": 118,
   "id": 21,
   "ws": true
  },
  {
   "text": "bundled",
   "start": 119,
   "end": 126,
   "id": 22,
   "ws": true
  },
  {
   "text": "tags",
   "start": 127,
   "end": 131,
   "id": 23,
   "ws": true
  },
  {
   "text": "to",
   "start": 132,
   "end": 134,
   "id": 24,
   "ws": true
  },
  {
   "text": "implicitly",
   "start": 135,
   "end": 145,
   "id": 25,
   "ws": true
  },
  {
   "text": "learn",
   "start": 146,
   "end": 151,
   "id": 26,
   "ws": true
  },
  {
   "text": "the",
   "start": 152,
   "end": 155,
   "id": 27,
   "ws": true
  },
  {
   "text": "loose",
   "start": 156,
   "end": 161,
   "id": 28,
   "ws": true
  },
  {
   "text": "mapping",
   "start": 162,
   "end": 169,
   "id": 29,
   "ws": true
  },
  {
   "text": "between",
   "start": 170,
   "end": 177,
   "id": 30,
   "ws": true
  },
  {
   "text": "heterogeneous",
   "start": 178,
   "end": 191,
   "id": 31,
   "ws": true
  },
  {
   "text": "annotations",
   "start": 192,
   "end": 203,
   "id": 32,
   "ws": false
  },
  {
   "text": ",",
   "start": 203,
   "end": 204,
   "id": 33,
   "ws": true
  },
  {
   "text": "and",
   "start": 205,
   "end": 208,
   "id": 34,
   "ws": true
  },
  {
   "text": "2",
   "start": 209,
   "end": 210,
   "id": 35,
   "ws": false
  },
  {
   "text": ")",
   "start": 210,
   "end": 211,
   "id": 36,
   "ws": true
  },
  {
   "text": "exploring",
   "start": 212,
   "end": 221,
   "id": 37,
   "ws": true
  },
  {
   "text": "separate",
   "start": 222,
   "end": 230,
   "id": 38,
   "ws": true
  },
  {
   "text": "features",
   "start": 231,
   "end": 239,
   "id": 39,
   "ws": true
  },
  {
   "text": "on",
   "start": 240,
   "end": 242,
   "id": 40,
   "ws": true
  },
  {
   "text": "one",
   "start": 243,
   "end": 246,
   "id": 41,
   "ws": false
  },
  {
   "text": "-",
   "start": 246,
   "end": 247,
   "id": 42,
   "ws": false
  },
  {
   "text": "side",
   "start": 247,
   "end": 251,
   "id": 43,
   "ws": true
  },
  {
   "text": "tags",
   "start": 252,
   "end": 256,
   "id": 44,
   "ws": true
  },
  {
   "text": "to",
   "start": 257,
   "end": 259,
   "id": 45,
   "ws": true
  },
  {
   "text": "overcome",
   "start": 260,
   "end": 268,
   "id": 46,
   "ws": true
  },
  {
   "text": "the",
   "start": 269,
   "end": 272,
   "id": 47,
   "ws": true
  },
  {
   "text": "data",
   "start": 273,
   "end": 277,
   "id": 48,
   "ws": true
  },
  {
   "text": "sparseness",
   "start": 278,
   "end": 288,
   "id": 49,
   "ws": true
  },
  {
   "text": "problem",
   "start": 289,
   "end": 296,
   "id": 50,
   "ws": true
  },
  {
   "text": "of",
   "start": 297,
   "end": 299,
   "id": 51,
   "ws": true
  },
  {
   "text": "using",
   "start": 300,
   "end": 305,
   "id": 52,
   "ws": true
  },
  {
   "text": "only",
   "start": 306,
   "end": 310,
   "id": 53,
   "ws": true
  },
  {
   "text": "bundled",
   "start": 311,
   "end": 318,
   "id": 54,
   "ws": true
  },
  {
   "text": "tags",
   "start": 319,
   "end": 323,
   "id": 55,
   "ws": false
  },
  {
   "text": ".",
   "start": 323,
   "end": 324,
   "id": 56,
   "ws": false
  }
 ],
 "_view_id": "spans_manual",
 "answer": "accept",
 "_timestamp": 1631537690,
 "_annotator_id": "raw_data-1-zjj",
 "_session_id": "raw_data-1-zjj"
}

Thanks for your help!

Hi! What's going on here under the hood is that the relations UI will only render what's currently visible and needs to be rendered, to make the interface more efficient. So as you scroll, the content on the left or right will be drawn.

For some reason, this seems to be going wrong here or not resetting corrrectly :thinking: I'll double-check and see if I can reproduce this. Can you tell me which browser and operating system you're using?

server operating system: ubuntu 20.04
my pc operating system: Windows 10 professional, version 21H1
browser: Chrome
I can also provide the complete test data(just 6 simple examples) if necessary.
Thanks!