@iot-app-kit/scene-composer

Note

This package includes some code from other libraries listed in THIRD-PARTY-LICENSES.

@iot-app-kit/scene-composer

Build command

Run the following command to build the package. The library will be built and copied to the dist folder.

npm run build

UI Tests

Pre-requisites: You need to have Docker installed locally to run UI Tests, we rely on it to provide the necessary browsers to generate consistent screenshots.

Commands:

# Run all tests once
npm run test:ui

# Check for flaky tests
npm run test:ui:reliability

# Update snapshots
npm run test:ui:update

If you want to run the tests locally for whatever reason, as opposed to the docker image, you can run the same commands with the --production flag, which will run them without docker:

# Run all tests once
npm run test:ui --production

# Check for flaky tests
npm run test:ui:reliability --production

Analyze command

You can use the following tool to analyze the releasing bundle content:

npm install -g source-map-explorer # run this only once

source-map-explorer dist/index.js

Storybook

To make the storybook site run:

npm run bootstrap # only needed first time and run at repo root level
npm run build-storybook # run at this package
npm run start -w packages/scene-composer

Optionally, if you want to pre-load AWS credentials from a local profile, you can set the AWS_PROFILE argument on the command line:

AWS_PROFILE=AppKit npm run start -w packages/scene-composer

If you want to have an AWS Scene pull live data from your TwinMaker workspace you can add a queryJson to the storybook arguments. Because it's a JSON and not kept as part of the URL parameters the query will have to be reset if you refresh the page. Below is an example query for a single TwinMaker property value.

[
  {
    "entityId": "f913470a-d011-45ca-ac84-3265f6327105",
    "componentName": "MetabolicCageOne",
    "properties": [{ "propertyName": "Temperature" }]
  }
]
'''

When using an query for live data the default data range is the last 5 minutes.  You can change this by setting the viewportDurationSecs fields to a custom value.  The field expects a number in seconds.  It does not currently support setting a fixed start and end date range for a viewport so  it work best when you have a way to regularly inject live sample date.

- [Storybook Intro](https://storybook.js.org/docs/react/get-started/introduction)

## Debugging
Scene composer is embedded with a custom logging system based on [debugjs](https://www.npmjs.com/package/debug). With this being a complex component with lots of potential things going on, this system allows you to filter logs based on more specific attributes, and ultimately reduces noise.

What you will notice is by default, there are very few messages in the browser console, this is because they are hidden by default from the end user, so you need to enable them in local storage. To do this, run this command in your browser console:

```javascript
localStorage.debug = '*'; // by default gives you all logging output
localStorage.debug = '*,-verbose:*'; // don't show verbose logging
localStorage.debug = 'ruleEvaluator*'; // only show messages related to the ruleEvaluator component