Using the @iot-app-kit/* in version 10.2.0 after migration from 9.15.0 the visualisation interrupts.

[ck-c8y]

Describe the bug
When using the @iot-app-kit/* in version 10.2.0 after migration from 9.15.0 the visualisation interrupts.
Pls. see the screenshots below.

To Reproduce
Steps to reproduce the behavior:
Build plugin using the following dependencies:

{
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/cdk": "^16.2.11",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@angular/upgrade": "^16.2.0",
    "@aws-sdk/client-iottwinmaker": "^3.569.0",
    "@aws-sdk/credential-providers": "^3.569.0",
    "@c8y/bootstrap": "1019.21.1",
    "@c8y/client": "1019.21.1",
    "@c8y/devkit": "1019.21.1",
    "@c8y/ngx-components": "1019.21.1",
    "@c8y/style": "1019.21.1",
    "@iot-app-kit/components": "10.2.0",
    "@iot-app-kit/core": "10.2.0",
    "@iot-app-kit/react-components": "10.2.0",
    "@iot-app-kit/scene-composer": "10.2.0",
    "@iot-app-kit/source-iottwinmaker": "10.2.0",
    "@ngx-formly/core": "^6.3.0",
    "@ngx-translate/core": "14.0.0",
    "ngx-bootstrap": "11.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.0",
    "rxjs": "~7.8.1",
    "three": "^0.151.3",
    "util": "^0.12.5",
    "zone.js": "~0.13.0"
  },
}

produces a Cumulocity plugin where the current datapoint disappear while being refreshed.
In the screenshot below the values for Wind Speed, Power Actual, Power Actual disappear every 1 second for a short while and overlay (linear, rotation) turn white.
The same works when using:

{
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/cdk": "^16.2.11",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@angular/upgrade": "^16.2.0",
    "@aws-sdk/client-iottwinmaker": "^3.569.0",
    "@aws-sdk/credential-providers": "^3.569.0",
    "@c8y/bootstrap": "1019.21.1",
    "@c8y/client": "1019.21.1",
    "@c8y/devkit": "1019.21.1",
    "@c8y/ngx-components": "1019.21.1",
    "@c8y/style": "1019.21.1",
    "@iot-app-kit/components": "9.15.0",
    "@iot-app-kit/core": "9.15.0",
    "@iot-app-kit/react-components": "9.15.0",
    "@iot-app-kit/scene-composer": "9.15.0",
    "@iot-app-kit/source-iottwinmaker": "9.15.0",
    "@ngx-formly/core": "^6.3.0",
    "@ngx-translate/core": "14.0.0",
    "ngx-bootstrap": "11.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.0",
    "rxjs": "~7.8.1",
    "three": "^0.151.3",
    "util": "^0.12.5",
    "zone.js": "~0.13.0"
  },
}

Expected behavior
The update of datapoints in the scene using 10.2.0 should not interrupt. The update of in 9.15.0

Screenshots
Interruption using 10.2.0:

Works using 9.15.0:

[mitchlee-amzn]

Thank you for reporting, I have moved this to our backlog.

[cshang2017]

Hi @sagIoTPower,
Could you provide more detail of the observation?
1/ The issue relates with dataoverlay, correct?
2/ There is a refresh logic to update data for each 1 second, correct?
3/ With iot-app-kit 9.15.0, "values for Wind Speed, Power Actual, Power Actual" looks smooth and constantly updating with latest value, correct?
4/ With iot-app-kit 10.2.0, "Wind Speed, Power Actual, Power Actual disappear every 1 second for a short while and overlay (linear, rotation) turn white", correct?
4.1/ Does above value come back with correct value as version 9.15.0 does, but disappears shortly?
4.2/ Does the issue repeat for every 1 second? Or it is constantly turn white all the time?

[ck-c8y]

Hi @cshang2017,
Could you provide more detail of the observation?

1/ The issue relates with dataoverlay, correct?

• Yes, it is only related to overlays. The glb image is always rendered correctly.

2/ There is a refresh logic to update data for each 1 second, correct?

• Yes, the values are updated every 1 sec

3/ With iot-app-kit 9.15.0, "values for Wind Speed, Power Actual, Power Actual" looks smooth and constantly updating with latest value, correct?

• Yes, that is the case.

4/ With iot-app-kit 10.2.0, "Wind Speed, Power Actual, Power Actual disappear every 1 second for a short while and overlay (linear, rotation) turn white", correct?

4.1/ Does above value come back with correct value as version 9.15.0 does, but disappears shortly?

• Yes, the correcty values and the display come back for a short time an then turn white again

4.2/ Does the issue repeat for every 1 second? Or it is constantly turn white all the time?

• It repeat every 1 sec. Then the values in the overlays are rendered correctly for a short moment and then turn white again.

If I may add, I use Angular and wrap the react components:

@Component({
  selector: "twinmaker-sceneviewer",
  standalone: true,
  imports: [CommonModule, CoreModule, ReactComponentDirective],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div *ngIf="props">
      <div
        style="min-height: 680px;"
        [reactComponent]="SceneViewer"
        [props]="props$ | async"
      ></div>
    </div>
    <div [reactComponent]="WebglContext"></div>
  `,
})

[haweston]

We reverted the zustand version in the recent release, can you check if you still experience this bug in the latest version of the package?

[chejimmy]

Issue should be fixed by previous comment.
Feel free to reopen if further assistance is needed 🙏