Chrysalis needs to handle cases when loading keymaps from json that don't have the right # of layers.

[oscar-schwarz]

Describe the bug
I exported a layout from the web version of the app and tried to import it again.
On selection of the file the site goes white and in the console it says
Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Obviously that error is not very useful so I ran the app on my local machine to get a nicer react error:

Warning: React has detected a change in the order of Hooks called by Overview. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useState                   useState
3. useRef                     useRef
4. useEffect                  useEffect
5. useRef                     useRef
6. useEffect                  useEffect
7. useRef                     useRef
8. useEffect                  useEffect
9. useState                   useState
10. useEffect                 useEffect
11. useState                  useState
12. useState                  useState
13. useState                  useState
14. useState                  useState
15. useState                  useState
16. useState                  useState
17. useState                  useState
18. useState                  useState
19. useState                  useState
20. undefined                 useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at Overview (http://localhost:8080/main.bundle.js:81184:40)
    at div
    at http://localhost:8080/main.bundle.js:828:66
    at Box (http://localhost:8080/main.bundle.js:60536:72)
    at Editor (http://localhost:8080/main.bundle.js:84017:40)
    at div
    at FocusHandlerImpl (http://localhost:8080/main.bundle.js:2836:5)
    at FocusHandler (http://localhost:8080/main.bundle.js:2807:19)
    at RouterImpl (http://localhost:8080/main.bundle.js:2712:5)
    at Location (http://localhost:8080/main.bundle.js:2541:23)
   ...

Uncaught Error: Rendered more hooks than during the previous render.
    at updateWorkInProgressHook (react-dom.development.js:16507:1)
    at updateReducer (react-dom.development.js:16568:1)
    at updateState (react-dom.development.js:17004:1)
    at Object.useState (react-dom.development.js:17915:1)
    at useState (react.development.js:1622:1)
    at HamburgerMenu (Overview.js:79:45)
    at Overview.js:173:12
    at Array.map (<anonymous>)
    at Overview (Overview.js:129:29)
    at renderWithHooks (react-dom.development.js:16305:1)
   ...

The above error occurred in the <Overview> component:

    at Overview (http://localhost:8080/main.bundle.js:81184:40)
    at div
    at http://localhost:8080/main.bundle.js:828:66
    at Box (http://localhost:8080/main.bundle.js:60536:72)
    at Editor (http://localhost:8080/main.bundle.js:84017:40)
    at div
    at FocusHandlerImpl (http://localhost:8080/main.bundle.js:2836:5)
    at FocusHandler (http://localhost:8080/main.bundle.js:2807:19)
    at RouterImpl (http://localhost:8080/main.bundle.js:2712:5)
    at Location (http://localhost:8080/main.bundle.js:2541:23)
    at Router
    at main
    ...



Uncaught Error: Rendered more hooks than during the previous render.
    at updateWorkInProgressHook (react-dom.development.js:16507:1)
    at updateReducer (react-dom.development.js:16568:1)
    at updateState (react-dom.development.js:17004:1)
    at Object.useState (react-dom.development.js:17915:1)
    at useState (react.development.js:1622:1)
    at HamburgerMenu (Overview.js:79:45)
    at Overview.js:173:12
    at Array.map (<anonymous>)
    at Overview (Overview.js:129:29)
    at renderWithHooks (react-dom.development.js:16305:1)
    ...
    React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.

The above error occurred in the <LocationProvider> component:

    at LocationProvider (http://localhost:8080/main.bundle.js:2561:5)
    at div
    at http://localhost:8080/main.bundle.js:828:66
    at Box (http://localhost:8080/main.bundle.js:60536:72)
    at div
    at DndProvider (http://localhost:8080/main.bundle.js:196535:11)
    at ThemeProvider (http://localhost:8080/main.bundle.js:57946:5)
    at ThemeProvider (http://localhost:8080/main.bundle.js:59028:5)
    at ThemeProvider (http://localhost:8080/main.bundle.js:55115:14)
    at StyledEngineProvider (http://localhost:8080/main.bundle.js:58129:5)
    at Suspense
    at App (http://localhost:8080/main.bundle.js:76119:40)
    at GlobalContextProvider (http://localhost:8080/main.bundle.js:76747:49)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.


Uncaught Error: Rendered more hooks than during the previous render.
    at updateWorkInProgressHook (react-dom.development.js:16507:1)
    at updateReducer (react-dom.development.js:16568:1)
    at updateState (react-dom.development.js:17004:1)
    at Object.useState (react-dom.development.js:17915:1)
    at useState (react.development.js:1622:1)
    at HamburgerMenu (Overview.js:79:45)
    at Overview.js:173:12
    at Array.map (<anonymous>)
    at Overview (Overview.js:129:29)
    at renderWithHooks (react-dom.development.js:16305:1)

I haven't worked with react yet, this doesn't look very useful to me but is most likely more useful than the other error.

To Reproduce
Steps to reproduce the behavior:

1. Connect a Keyboardio Atreus with the latest firmware
2. Click on "Backup and Restore layouts"
3. Click on "Restore from File..." and select the JSON from above
4. Now the page should be white and an error should be displayed in the console

Expected behavior
No error occurs and layout gets imported correctly.

Screenshots
The error on https://chrysalis.keyboard.io

Interestingly the layout seems to load and the error occurs afterwards

Heres is the debug file from the "Report a problem" page: debug.txt

[obra]

Unfortunately, the web based version isn't backwards compatible with the old desktop version.

…

On Thu, Aug 15, 2024 at 11:06 AM Oscar Schwarz ***@***.***> wrote: *Describe the bug* I exported a layout <https://github.com/user-attachments/files/16628254/Chrysalis_Keyboardio-Atreus_layout_2024-08-15_19-19-02.json> from the web version of the app and imported it into the desktop version. After trying to save the layout I get TypeError: Cannot read properties of undefined (reading 'length') After reconnecting to the keyboard the layout is scrambled on some layers. *To Reproduce* Steps to reproduce the behavior: 1. Connect a Keyboardio Atreus with the latest firmware 2. Click on "Backup and Restore" 3. Click on "Load from File..." and select the JSON from above 4. Click on "Import" 5. In the Layout Editor try to save 6. Now the error should be displayed *Expected behavior* No error occurs and layout gets saved correctly. *Screenshots* chrysalis-debug.json.txt <https://github.com/user-attachments/files/16628449/chrysalis-debug.json.txt> *Desktop (please complete the following information):* - OS: Linux - Chrysalis Version: 0.13.3 — Reply to this email directly, view it on GitHub <#1346>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAALC2CQXKSTK77HQXLJYV3ZRTU2TAVCNFSM6AAAAABMSUVZCOVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ3DQNRSGYYDSMQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[oscar-schwarz]

I see. The only reason I tried the desktop version was because on the web version the import fails too. I will edit this report later so it resembles the web bug.

[obra]

Sure thing. That should absolutely work. The debug log from the web import attempt would be very helpful.

Best,
Jesse

[oscar-schwarz]

I updated the issue so that it represents the web bug.

[oscar-schwarz]

I managed to repair my layout json by comparing it to a similar working file export. Heres the diff. It seems the structure of the last layer was messed up. But that it the applications fault. I havent messed with that file. But I have no idea how to reproduce that wrong export behaviour.

[obra]

That looks like it was missing a layer. Do you happen to know what firmware revision you were coming from?

…

On Fri, Aug 16, 2024 at 3:35 AM Oscar Schwarz ***@***.***> wrote: I managed to repair my layout json by comparing it to a similar working file export. Heres the diff <https://github.com/user-attachments/files/16636151/repair_layout.txt>. It seems the structure of the last layer was messed up. But that it the applications fault. I havent messed with that file. But I have no idea how to reproduce that wrong export behaviour. — Reply to this email directly, view it on GitHub <#1346 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAALC2ENEPYKKZEEXTGOPXLZRXIYHAVCNFSM6AAAAABMSUVZCOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTGI3DINZWGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[oscar-schwarz]

Sadly not. But I know it was a version without mouse and macro support and layer 8 and 9 were greyed out in Chrysalis.

[obra]

Interesting! I don't think we ever shipped an 'official' firmware without mouse support. But that gives me an idea of what might be causing the problem. I'll retitle this bug, but it sounds like Chrysalis isn't robust enough when loading keymaps that don't have enough layers.

…

On Fri, Aug 16, 2024 at 9:42 AM Oscar Schwarz ***@***.***> wrote: Sadly not. But I know it was a version without mouse and macro support and layer 8 and 9 were greyed out in Chrysalis. — Reply to this email directly, view it on GitHub <#1346 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAALC2EBU33BUSTL5G3RJWTZRYTZFAVCNFSM6AAAAABMSUVZCOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTHAZDMMBSGQ> . You are receiving this because you commented.Message ID: ***@***.***>