npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@iot-app-kit/scene-composer

v12.1.0

Published

AWS IoT TwinMaker Scene Composer Library

Downloads

2,999

Readme

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