Component SDK → Start Development

Start developing your project by writing the needed code and editing the needed files. You will be able to see the effect of your code changes directly on Incorta. Here are the steps to develop your project:

  • Sign in to the Incorta Cloud Admin Portal (CAP).
  • Select a cluster.
  • In the Navigation bar, select Content , and then + New.
  • In the Action bar, select + NewAdd Dashboard.
  • Enter a dashboard name, and then select Add.
  • Select + Add Insight.
  • From the Insight Panel, select Developer Visual.

The Developer Visual automatically connects to your locally installed Component SDK.

  • Start implementing your project by editing the definition.json file, in which you determine the number of trays, the pill settings, and the visualization settings.
  • Proceed with editing or creating all needed .tsx files in the src folder.
  • Add any images or resources you might use to the assets folder.

Changes in your code directly affect the output in the Developer Visual. In other words, the Developer Visual will behave like a simulator to your code.

Project folder structure

This section describes how a project structure appears in your code editor. Each folder and file is designated to serve a purpose while developing your custom visualization.

The following image shows an example of a project folder structure:

As a React developer, you must have experience in managing the tree components. The following table describes the uses of the following files or folders in a custom project.

File/FolderDescription
assetsThe folder where you put all images and icons that you are going to use
distThe folder where all package .inc files are stored
localesThe settings file where you manage properties of displayed names, such as language
node_modulesThe folder where React libraries are installed
package.jsonThe file that contains all settings and configurations of your project
srcThe folder where all development and style files are stored
index.tsxThe main development file
style.lessThe file that will contain the styles of your visualization
definition.jsonThe file that will contain all visualization and pill settings that you will define. For more information about the available predefined settings, refer to Definition.json

Build and package your project

As you develop and test your component in the Incorta Analyzer, you may wish to add it to the marketplace listing either to test it on dashboards, or to publish for consumption by other users. To do this, you’ll need to package and submit your component.

Note

Presently, the Incorta team adds the component for you. In the future, we will expose the ability for you to add components on your own.

  • Ensure that your component works in the Analyzer using the local development server

  • Check the version number for your component in the package.json file

  • In the CLI, create the installable package using the following command: create-incorta-component package.

    The package (with an .inc filename extension) will be saved in the dist folder with the version number embedded in the name.

  • Deliver the .inc package to the Incorta team so they can place it in the marketplace

Note

    •   Please indicate whether the package should be saved as a draft (for further development) or published (globally visible.)
    •   Additionally indicate whether you would like the Incorta team to review your component for verification of safety and security.
    •   After the Incorta team adds your component to the marketplace, it will be available for new insights and to add to dashboards.