Problems with IDOM_FEATURE_INDEX_AS_DEFAULT_KEY

[Archmonger]

Opening this as a discussion first since I'm unsure if this is specific to how Conreq is dynamically generating children.

It seems like IDOM_FEATURE_INDEX_AS_DEFAULT_KEY is functionally broken. Conreq's homepage frequently fails to render tab changes now.

2022-01-23T22:15:43-0800 | ERROR | Failed to render viewport_primary(20681ffeb80, websocket=IdomWebsocket(scope={'type': 'websocket', 'path': '/idom/conreq._core.home.components.homepage/', 'raw_path': b'/idom/conreq._core.home.components.homepage/', 'headers': [(b'host', b'127.0.0.1:7575'), (b'connection', b'Upgrade'), (b'pragma', b'no-cache'), (b'cache-control', b'no-cache'), (b'user-agent', b'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'), (b'upgrade', b'websocket'), (b'origin', b'http://127.0.0.1:7575'), (b'sec-websocket-version', b'13'), (b'accept-encoding', b'gzip, deflate, br'), (b'accept-language', b'en-US,en;q=0.9'), (b'cookie', b'jazzy_menu=open; csrftoken=lHZ7OnR0GDvQdpiYuHK4qMEnQ0LBLLHgRByEOQBwdtbIV9SrFdgwTOVVt0XLQt5b; sessionid=bacssy75qobjb0g7i3x9mwlus9bbbpbx'), (b'sec-websocket-key', b'cQm+MVpDmwK3kKue/dFjBg=='), (b'sec-websocket-extensions', b'permessage-deflate; client_max_window_bits')], 'query_string': b'kwargs=%7B%7D', 'client': ['127.0.0.1', 64816], 'server': ['127.0.0.1', 7575], 'subprotocols': [], 'asgi': {'version': '3.0'}, 'cookies': {'jazzy_menu': 'open', 'csrftoken': 'lHZ7OnR0GDvQdpiYuHK4qMEnQ0LBLLHgRByEOQBwdtbIV9SrFdgwTOVVt0XLQt5b', 'sessionid': 'bacssy75qobjb0g7i3x9mwlus9bbbpbx'}, 'session': <django.utils.functional.LazyObject object at 0x0000020681972A00>, 'user': <channels.auth.UserLazyObject object at 0x0000020681972490>, 'path_remaining': '', 'url_route': {'args': (), 'kwargs': {'view_id': 'conreq._core.home.components.homepage'}}}, close=<bound method AsyncWebsocketConsumer.close of <django_idom.websocket.consumer.IdomAsyncWebsocketConsumer object at 0x0000020681972760>>, disconnect=<bound method IdomAsyncWebsocketConsumer.disconnect of <django_idom.websocket.consumer.IdomAsyncWebsocketConsumer object at 0x0000020681972760>>, view_id='conreq._core.home.components.homepage'), 
state=HomepageState(page_title='Loading...', viewport_selector='primary', viewport_primary=Viewport(component=<function user_management at 0x0000020680E943A0>, selector='primary', html_class='', padding=True, auth='user'), viewport_secondary=None, modal_state=ModalState(show=False, size='lg', centered=True, kwargs={}), modal=None), set_state=<function _CurrentState.__init__.<locals>.dispatch at 0x00000206820A10D0>)
Traceback (most recent call last):
  File "C:\Users\username\Repositories\Conreq\.venv\lib\site-packages\idom\core\layout.py", line 488, in _update_component_model_state
    old_life_cycle_state = old_model_state.life_cycle_state
AttributeError: life_cycle_state

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "C:\Users\username\Repositories\Conreq\.venv\lib\site-packages\idom\core\layout.py", line 202, in _render_component
    self._render_model(old_state, new_state, raw_model)
  File "C:\Users\username\Repositories\Conreq\.venv\lib\site-packages\idom\core\layout.py", line 239, in _render_model
    self._render_model_children(old_state, new_state, raw_model.get("children", []))
  File "C:\Users\username\Repositories\Conreq\.venv\lib\site-packages\idom\core\layout.py", line 372, in _render_model_children
    new_child_state = _update_component_model_state(
  File "C:\Users\username\Repositories\Conreq\.venv\lib\site-packages\idom\core\layout.py", line 490, in _update_component_model_state
    raise ValueError(
ValueError: Failed to render layout at '/children/4/children/0' with key 0 - prior element with this key wasn't a component

[Archmonger]

@rmorshea This issue might be bigger than IDOM_FEATURE_INDEX_AS_DEFAULT_KEY. After setting idom.config.IDOM_FEATURE_INDEX_AS_DEFAULT_KEY = 0 there's still a whole load of rendering issues with IDOM 0.35.x.
Needed to be set an an environ, not by setting the value directly.

---

The issues with IDOM_FEATURE_INDEX_AS_DEFAULT_KEY can easily be reproduced by clicking on sidebar elements. I've confirmed none of these issues exist with 0.34.0. And all issues go away if setting IDOM_FEATURE_INDEX_AS_DEFAULT_KEY=0.

Conreq Issues observed on 0.35.x

• Sometimes a sidebar click event wont change the viewport
• Failed to render layout at '/children/4/children/0' with key 0
• Sometimes the "viewport tabs" list on the right won't highlight any entries.

Something notable is I am running with IDOM_DEBUG_MODE turned on and I don't get any warnings regarding child keys.

[rmorshea]

Part of the reason you're not getting any warning is because you're passing children with *args. IDOM assumes that children passed as positional arguments are static. Children passed in a list or tuple are understood to be potentially dynamic (i.e. the number or order of children may change) and checks to see if they have keys.

[Archmonger]

Makes sense. Is there any way for the framework to warn against using the unpack operator without keys?

To my knowledge the answer is no, but thought I'd bring it up since someone else is likely to make the same mistake as me.

If the answer is no, the docs should have some very simple examples of dynamic children passed down as a list, coupled with warnings against using the unpack operator. The current examples doesn't really fit the bill here due to the use of DataList. The second example on that page is being used in an awkward context so it also doesn't fit.

Also, from a technical perspective why do things seem to work as expected when IDOM_FEATURE_INDEX_AS_DEFAULT_KEY is off?

[rmorshea]

There's two approaches to checking for *args usages.

• Statically - in the idom-flake plugin try to identify *args usages (I don't know if this is even possible though).
• Change the syntax from div(...) to div[...] because div[*args] is invalid syntax.

I'm torn about the latter option because it might seem off-putting to people.

[rmorshea]

If IDOM_FEATURE_INDEX_AS_DEFAULT_KEY=0 then all elements always get a unique key (i.e. it's randomly generate). I think this is somewhat explained here. You can google search for "React keys random" and probably find other articles.

[Archmonger]

It actually should be possible to follow the AST within flake8 and identify unpack operators.

I'll create an issue for this over on the idom-flake repo, but it'll be a while before I have time to develop that.

[rmorshea]

Created an issue #613 for this.

[Archmonger]

I've confirmed the resolution within 0.35.2 worked.

[Archmonger]

I've attempted using a list instead of the unpack operator for the debug tabs. The result was the VDOM dict being rendered as a string on the page. Is this an IDOM bug, or have I done the syntax wrong? Do I need to avoid constructing the list via unpack?

# Relevant LOCs
            [
                *(  # Debug tabs
                    sidebar_group(
                        websocket,
                        state,
                        set_state,
                        group,
                        top_tabs=config._homepage.debug_nav_tabs,
                    )
                    for group in nav_tabs
                    if group == "Debug" and websocket.scope["user"].is_staff and DEBUG
                )
            ],

The original LOC looked like this

[rmorshea]

The unpack is definitely redundant, but since it's only redundant I'm not quite sure what's going on there. It looks like there's an enclosing parenthesis so maybe the VDOM element is in a tuple? Things seem to be working though. The following example renders correctly:

from idom import component, html, run


@component
def Example():
    return html.div(
        [html.button(i) for i in range(3)],
        html.button(0),
        html.button(2),
        html.button(2),
    )


run(Example)

[rmorshea]

This should be fixed shortly: #614

[Archmonger]

This solution works for resetting the default tab but is extremely inelegant, and for unknown reasons makes renders take upwards of 5 seconds.

def tabbed_viewport( ... ):
    ...
    prev_tabs, set_prev_tabs = idom.hooks.use_state(None)
    all_tabs = (top_tabs or []) + tabs + (bottom_tabs or [])
    if collections.Counter(prev_tabs) != collections.Counter(all_tabs):
        set_prev_tabs(all_tabs)
        set_tab_state(
            TabbedViewportState(
                _default_tab(top_tabs, tabs, bottom_tabs, default_tab=default_tab)
            )
        )
    ...

[rmorshea]

Can you create a minimal reproducible example and open a new discussion? It's a little hard to figure out what might be happening in context.

[Archmonger]

Sure.

We could also do a tag up later tonight or right now if you want a quick demo.

[rmorshea]

Let's do now.

[Archmonger]

Invite has been sent

[Archmonger]

Gonna paste this here before I have to go. The minimum reproducible example will need the following (and a little more)

@component
def parent():
   state, set_state = idom.hooks.use_state( ... )
   return div( child_wrapper(state, set_state), key=str(uuid4()) )

@component
def child(state, set_state):
   child_state, set_child_state = idom.hooks.use_state( ... )
   ...

   return something()

def child_wrapper(state, set_state):
   return my_component(state, set_state)

Will need to add in some buttons within the parent to switch between multiple children as well.

[rmorshea]

Was able to reproduce: #622