# Strange problem with relations UI

**URL:** <https://support.prodi.gy/t/strange-problem-with-relations-ui/4684>\
**Category:** Uncategorized\
**Tags:** bug, usage, front-end, relations\
**Created:** [September 13, 2021, 2:03pm UTC](https://support.prodi.gy/t/strange-problem-with-relations-ui/4684 "2021-09-13T14:03:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ForrestWang](https://avatars.discourse-cdn.com/v4/letter/f/a88e4f/32.png) [@ForrestWang](https://support.prodi.gy/u/ForrestWang)\
**Post date:** [September 13, 2021, 2:03pm UTC](https://support.prodi.gy/t/strange-problem-with-relations-ui/4684/1 "2021-09-13T14:03:48Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/e/e0eef822043770162ccf2fa31e661cfa509f4254.gif)

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](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/6/6619ddf31c194edc909064d742258b01f84e0b66.gif)

My run command is

> prodigy rel.manual relation\_test blank:en ner\_test.jsonl --label=USED-FOR,EVALUATION-FOR

and my configuration is

```python
{
    "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

```python
{
 "_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!

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [September 15, 2021, 12:40am UTC](https://support.prodi.gy/t/strange-problem-with-relations-ui/4684/2 "2021-09-15T00:40:05Z")

</div>

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 🤔 I'll double-check and see if I can reproduce this. Can you tell me which browser and operating system you're using?

---

<div class="post-metadata">

**Author:** ![ForrestWang](https://avatars.discourse-cdn.com/v4/letter/f/a88e4f/32.png) [@ForrestWang](https://support.prodi.gy/u/ForrestWang)\
**Post date:** [September 15, 2021, 1:55am UTC](https://support.prodi.gy/t/strange-problem-with-relations-ui/4684/3 "2021-09-15T01:55:37Z")

</div>

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！