Opening framework causes "Maximum call stack size exceeded" in treeLayout.ts

[stanbilliet]

Hi,

First of all, thank you for making OpenCASE available. I'm currently testing OpenCASE with a CASE 1.1 proof of concept based on one of our curriculum frameworks.

I encountered an issue when opening a framework and wanted to report it here.

Description

When I open a CASE 1.1 framework from the Your Frameworks overview, the framework appears to load successfully, but the OpenCASE frontend subsequently crashes and displays a blank page.

The browser console reports:

Uncaught RangeError: Maximum call stack size exceeded
    at calcWidth (treeLayout.ts:38:21)
    at Array.map (<anonymous>)
    at calcWidth (treeLayout.ts:48:24)
    at Array.map (<anonymous>)
    at calcWidth (treeLayout.ts:48:24)
    at Array.map (<anonymous>)
    at calcWidth (treeLayout.ts:48:24)
    ...

React subsequently reports:

An error occurred in the <AppInner> component.

Consider adding an error boundary to your tree to customize error handling behavior.

Steps to reproduce

1. Import or mirror a CASE 1.1 framework into OpenCASE.
2. Go to Your Frameworks.
3. Click the framework.
4. The framework starts loading.
5. The framework view becomes completely blank.
6. The browser console reports Maximum call stack size exceeded in treeLayout.ts.

The framework used in my test is:

• Title: Leerplan Basisonderwijs
• Type: Curriculum
• CASE version: 1.1
• CFItems: approximately 1309
• CFAssociations: approximately 2081

Expected behaviour

The mirrored framework should open and be displayed in the OpenCASE framework viewer/editor.

Actual behaviour

The framework cannot be opened.

After clicking the framework, the application view becomes blank and the JavaScript execution eventually fails with:

RangeError: Maximum call stack size exceeded

The stack trace repeatedly points to the recursive calcWidth() function in treeLayout.ts.

Network request

The framework package itself appears to be retrieved successfully.

The following request returns HTTP 200:

GET /ims/case/v1p1/CFPackages/8c4af584-d249-5177-a2ac-73a559c83ea2
HTTP 200

The response contains the framework data and is several megabytes in size.

The crash therefore appears to occur after the framework has been retrieved, while the frontend is processing or rendering the framework.

Additional observation

While inspecting the CASE package, I noticed a self-referencing isRelatedTo association for CFItem WT.288:

{
  "associationType": "isRelatedTo",
  "originNodeURI": {
    "title": "WT.288",
    "identifier": "23ed40ce-6481-4ccf-873f-f5fe604cdb0d"
  },
  "destinationNodeURI": {
    "title": "WT.288",
    "identifier": "23ed40ce-6481-4ccf-873f-f5fe604cdb0d"
  }
}

Both the origin and destination therefore point to the same CFItem:

WT.288 → WT.288

I cannot confirm whether this association is related to the crash, but I'm including it as additional debugging information because the stack trace shows continuous recursion in treeLayout.ts.

The hierarchical isChildOf structure itself does not appear to contain the same issue based on my initial inspection.

Console output

[App] Fetching definitions catalogue for tenant: system

[App] Definitions loaded:
{
  CFItemTypes: 109,
  CFSubjects: 58,
  CFConcepts: 34,
  CFLicenses: 5,
  CFAssociationGroupings: 25
}

Uncaught RangeError: Maximum call stack size exceeded
    at calcWidth (treeLayout.ts:38:21)
    at Array.map (<anonymous>)
    at calcWidth (treeLayout.ts:48:24)
    at Array.map (<anonymous>)
    at calcWidth (treeLayout.ts:48:24)
    at Array.map (<anonymous>)
    at calcWidth (treeLayout.ts:48:24)
    at Array.map (<anonymous>)
    at calcWidth (treeLayout.ts:48:24)
    ...

Environment

• OpenCASE: current development/main version
• Browser: Google Chrome 152
• Operating system: Windows
• Deployment: self-hosted Docker deployment
• CASE specification: CASE 1.1

Additional debugging information

I have the following available if useful for reproducing the issue:

• HAR export containing the request and response
• screenshots of the framework overview
• screenshot of the blank framework view
• browser console output
• the CASE framework/package that triggers the issue

I'd be happy to provide these if they would help with investigating the problem.

Thank you for taking a look at this, and thank you for your work on OpenCASE.