@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

Changelog

10.12.0 (2024-09-13)

Features

• add alarm data source query (32fe5c7)
• add timezone docs (8995f92)
• adding timezone support to dashboard/widgets (6435b90)
• dashboard: add new RE components to dynamic assets tab (c588848)
• dashboard: use new RE components to update dashboard RE for modeled and unmodeled data (d7db11e)
• react-components: add auto resolution and batching (073029f)
• react-components: add hook for get asset property value history (c708b4a)
• react-components: add hook for latest asset property value (ce9ec7c)
• react-components: add useLatestAlarmPropertyValue hook to fetch alarm prop vals in useAlarms (18aa854)
• react-components: implement request functions and hooks to build clients (2ca7e6c)
• react-components: initiali implementation for useTimeSeriesData (50db88f)
• react-components: useAlarms hook (7103db6)
• react-components: useDescribeAssets and useDescribeAssetModels queries implemented (bfb07e1)
• scene: alphabetize camera drop down (960f195)
• sitewise-alarms: add useAlarmModels hook to fetch iot events alarm models in useAlarms (c4c4986)

Bug Fixes

• add timeZone prop to DashboardViewWrapper (21f9b15)
• dashboard-dynamic-asset: asset name should be shown on refresh in dropdown (d799487)
• dashboard-RE-improvements: add timezone + sig digits to dynamic tab (8a6b3ed)
• dashboard: add descriptions to all RE tables (f7b4f0c)
• dashboard: add descriptions to all tables in RE (c7aff00)
• dashboard: add timezone support for new RE (2d4b5dd)
• dashboard: assetName displays conditionally in config panel for linechart (85496ab)
• dashboard: fast follow improvements for new RE (ea8c93c)
• dashboard: fast follow to clean up messy code for table cell render (649f75d)
• dashboard: fix flaky test in dashboard (6fe3285)
• dashboard: label matches kpi name (f675d11)
• dashboard: migration for sitewise component + blackpearl widget types (c91a0e9)
• dashboard: re reflects significant digits + timezone support for unmodeled (195be67)
• dashboard: reenable gestures in edit mode (16bd88f)
• filter component models from query editor (8245b6d)
• prevent creating new chart when iconn is dragged over different chart type (7feff77)
• react-components: ensure enabled flag is never undefined for queries (eb95ef4)
• react-components: remove flaky test in new RE (9e15637)
• react-components: skip flaky test in new RE (e7928d3)
• timeZone: wrap timezone setState in useEffect (6cd74a1)
• update timezone docs based on feedback (17be12d)