cvat-ui error when open a job with issues

[tzr0125]

Actions before raising this issue

• I searched the existing issues and did not find anything similar.
• I read/searched the docs

Steps to Reproduce

1. create a issue in a job
2. open the job
3. go to the Jobs
4. click on the job I entered earlier

Expected Behavior

No response

Possible Solution

The error may be caused by HiddenIssueLabel.

Context

error:
react-dom.production.min.js:209 Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.Zl [as createPortal] (react-dom.production.min.js:287:319)
at $Te (hidden-issue-label.tsx:65:12)
at qi (react-dom.production.min.js:153:146)
at ys (react-dom.production.min.js:261:496)
at fl (react-dom.production.min.js:246:265)
at dl (react-dom.production.min.js:246:194)
at rl (react-dom.production.min.js:239:172)
at react-dom.production.min.js:123:115
at t.unstable_runWithPriority (scheduler.production.min.js:19:467)
at Va (react-dom.production.min.js:122:325)

Environment

No response

[jfltzngr]

Same happened to me.

Steps to reproduce the issue

• Opened job
• Entered review mode
• Added new issue for one polygon
• Exit the job (didn't press save before)
• reopened the job

Operating system and browser version

Ubuntu 22.04.4
Google Chrome 122.0.6261.111

CVAT version

Server: 2.11.2
Core: 15.0.1
Canvas: 2.20.0
UI: 1.63.1

Error Message

Error
Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Object.ac [as createPortal] (https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:5893949)
    at vve (https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:9365636)
    at Xi (https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:5838853)
    at ws (https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:5884899)
    at xl (https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:5877659)
    at El (https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:5877584)
    at hl (https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:5874607)
    at https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:5826262
    at t.unstable_runWithPriority (https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:6030452)
    at Ya (https://app.cvat.ai/assets/cvat-ui.0f05087389a15f75103f.min.js:2:5825971)

[tzr0125]

When I reproduce the issue using debug mode, the error message provided is:
`Uncaught Error: Target container is not a DOM element.
at Object.createPortal$1 [as createPortal] (react-dom.development.js:24946:1)
at HiddenIssueLabel (hidden-issue-label.tsx:65:12)
at renderWithHooks (react-dom.development.js:14803:1)
at mountIndeterminateComponent (react-dom.development.js:17482:1)
at beginWork (react-dom.development.js:18596:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
at invokeGuardedCallback (react-dom.development.js:292:1)
at beginWork$1 (react-dom.development.js:23203:1)
at performUnitOfWork (react-dom.development.js:22157:1)

The above error occurred in the component:
in HiddenIssueLabel (created by IssueAggregatorComponent)
in IssueAggregatorComponent (created by StandardWorkspaceComponent)
in section (created by BasicLayout)
in BasicLayout (created by Layout)
in Layout (created by StandardWorkspaceComponent)
in StandardWorkspaceComponent (created by AnnotationPageComponent)
in main (created by Basic)
in Basic (created by Content)
in Content (created by AnnotationPageComponent)
in section (created by BasicLayout)
in BasicLayout (created by Layout)
in Layout (created by AnnotationPageComponent)
in AnnotationPageComponent (created by Connect(AnnotationPageComponent))
in Connect(AnnotationPageComponent) (created by Context.Consumer)
in withRouter(Connect(AnnotationPageComponent)) (created by Context.Consumer)
in Route (created by CVATApplication)
in Switch (created by CVATApplication)
in main (created by Basic)
in Basic (created by Content)
in Content (created by CVATApplication)
in section (created by BasicLayout)
in BasicLayout (created by Layout)
in Layout (created by CVATApplication)
in ShortcutsProvider (created by CVATApplication)
in GlobalErrorBoundary (created by Connect(GlobalErrorBoundary))
in Connect(GlobalErrorBoundary) (created by CVATApplication)
in CVATApplication (created by Context.Consumer)
in withRouter(CVATApplication) (created by Connect(withRouter(CVATApplication)))
in Connect(withRouter(CVATApplication))
in Router (created by BrowserRouter)
in BrowserRouter
in Provider`

[bsekachev]

Hello,

Thanks for the report. Please, provide a screen cast how the issue may be reproduced.

[umangapatel123]

@bsekachev @nmanovic I was able to reproduce the issue. The issue is due to improper handling of the canvas ready state in the HiddenIssueLabel. Once we open Canvas, the ready state is set to true. now if we go to any other page it will remain true only. so whenever we open a job, the canvas ready is true so it will try to attach the issue label to the canvas attachment board but it is not properly loaded. so mounting the issue label results in failure.
To solve this problem we need to change the canvas ready state to false whenever we unmount the canvas.

[umangapatel123]

@bsekachev can you please look into it?