Description
Discussed in #488
Originally posted by jgburford August 30, 2021
When using IDOM 0.32.0 I'm getting the following error in the browser console:
Uncaught (in promise) TypeError: undefined has no properties
applyOperation http://127.0.0.1:8000/client/_snowpack/pkg/common/index-6ddd8323.js:322
move http://127.0.0.1:8000/client/_snowpack/pkg/common/index-6ddd8323.js:151
applyOperation http://127.0.0.1:8000/client/_snowpack/pkg/common/index-6ddd8323.js:304
applyPatch http://127.0.0.1:8000/client/_snowpack/pkg/common/index-6ddd8323.js:343
applyPatchInplace http://127.0.0.1:8000/client/_snowpack/pkg/common/mount-01d35dc3.js:193
applyPatch http://127.0.0.1:8000/client/_snowpack/pkg/common/mount-01d35dc3.js:378
onmessage http://127.0.0.1:8000/client/_snowpack/pkg/common/mount-01d35dc3.js:442
This error text is from the Firefox console. Chrome also produces a similar error.
I've included the code I'm using below.
Background: I'm using IDOM to experiment with linguistics-related software, specifically new approaches for working with parallel corpuses -- source and translated works, side by side, or in this case, on top of one another. There are two panes (WorkSentDiv), each displaying a single sentence in one of the works, and each having buttons to move forward and backward through the sentences. The works dict contains dummy corpus data to be loaded in each of the panes. The RangeWords component allows segments of the sentences to be highlighted.
How to reproduce the error:
In the top pane, continue clicking the "Next" button. After initial load, whenever the sentence id reaches 3, the next click of "Next" always produces the error. The client side fails to update, but the server-side state (sid) shows as updated.
At this point, clicking the "Next" button in the bottom pane causes the interface to update.
Continuing to move back and forth in the upper pane, its text becomes mangled.
import idom
import random
@idom.component
def RangeWords(text):
highlight_range, set_highlight_range = idom.hooks.use_state([])
def update_range(index):
if highlight_range == []:
set_highlight_range([index])
elif highlight_range == [index]:
set_highlight_range([])
elif index in [highlight_range[-1], highlight_range[0]]:
set_highlight_range([index])
elif index < highlight_range[0]:
set_highlight_range(list(range(index, highlight_range[0] + 1)))
else:
set_highlight_range(list(range(highlight_range[0], index + 1)))
divs = [
idom.html.div({
'onClick': lambda e, i=i: update_range(i),
'style': {
'backgroundColor': 'aquamarine' if i in highlight_range else 'white',
'display':'inline',
'padding':'5px'
}
},
word,
key=str(random.random())
)
for i,word in enumerate(text.split())
]
return idom.html.div({
'style': {
'width':'95%',
'display':'flex',
'flex-wrap':'wrap',
'margin':'5px'}
},
divs
)
@idom.component
def WorkSentDiv(tfname):
sid, set_sid = idom.hooks.use_state(0)
works = {'bubs': ["it was the best of times, it was the blurst of times.",
"they will break upon this fortress like water on rock.",
"ah those heady days of yore.",
"forge ahead, no matter the cost.",
"bring me the head of alfredo garcia.",
"there were monsters aboard that ship, and truly we were them."],
'zugzug': ["나도너도나도 웰웰웰 아하아하.",
"섬웨어 오버 더 레인보.",
"유 캔트 듀 댓 온 테레비즌.",
"컴퓨터 프로그램잉.",
"어메이징 테일즈.",
"대츠 오케이!",
"데르즈 노 비지니스 라이크 쇼 비지니스"]}
def get_stext(tfname, sid):
if sid < len(works[tfname]):
return works[tfname][sid]
else:
return "no more sentences"
def btn_click(count):
if sid + count < 0:
return
set_sid(sid + count)
return idom.html.div(
idom.html.div(f"sentence id: {sid}"),
idom.html.button({'onClick': lambda e:btn_click(-1)}, "Prev"),
idom.html.button({'onClick': lambda e:btn_click(1)}, "Next"),
RangeWords(get_stext(tfname, sid))
)
@idom.component
def DualWorkView():
return idom.html.div(
WorkSentDiv("bubs"),
WorkSentDiv("zugzug")
)
idom.run(DualWorkView)</div>