@knime/ui-extension-service

v1.0.2

Published

a day ago

KNIME UI Extension Service for KNIME Analytics Platform

Downloads

5,386

0High
0Medium
0Low

knime

KNIME® UI Extension Service

This repository is maintained by the KNIME UI Extensions Development Team.

This repository contains the frontend wrapper that implements adapter pattern between data providers (back-end services) and data consumers (e.g. KNIME Views).

Usage as npm package

Run npm i @knime/ui-extension-service to install dependency.
Instantiate and use desired services as shown below

import { JsonDataService } from "@knime/ui-extension-service";
this.jsonDataService = await JsonDataService.getInstance();
this.initialData = await this.jsonDataService.initialData();

Usage as IIFE

Custom UI component implementations can also use this package to interface with the KNIME® Analytics Platform.

To access this functionality within a component, simply add the provided IIFE build output as <script> content in the HTML scope. This output is found in the dist/knime-ui-extension-service.min.js bundle and will automatically execute the JavaScript necessary to provide access to the API.

Note: In all cases, it's important to load the IIFE content into the HTML document before the UI component implementation so the API is loaded and available in the custom context.

There are two options to use included in the dist folder (use only one at a time):

knime-ui-extension-service.min.js a minified production build of the package
knime-ui-extension-service.dev.js a documented package build intended for development/debugging

There are a number of ways to include this bundle in a component implementation:

Document `<head>`

The simplest method is to copy the content directly into the HTML document <head> as <script> tag content:

<!doctype html>
...
<head>
  ...
  <script type="text/javascript">
    // Copy contents here
  </script>
  ...
</head>
...

Local/Remote File System

If the component is being served by a filesystem or server, the path to the min.js file can also be included as the src of the <script> tag in the <head> of the document:

<!doctype html>
...
<head>
  ... // NOTE: Update the path to the correct resource location for your
  filesystem or server.
  <script src="./dist/knime-ui-extension-service.min.js"></script>
  ...
</head>
...

Accessing the Package

Once loaded, the package will be available in the global scope of the view under the namespace window.KnimeUIExtensionService; which includes the classes, functionality and types of this package. To include the JSDoc comments in the document, adjust the IIFE file content (described in the above sections) to use the .dev.js build file instead of the .min.js file.

Development

Prerequisites

Install Node.js, see version in package.json.

Newer versions may also work, but have not been tested.

Install dependencies

npm install

Git hooks

When committing your changes, a couple of commit hooks will run via husky.

pre-commit hook to lint and format the changes in your stage zone (via lintstaged)
prepare-commit-msg hook to format your commit message to conform with the required format by KNIME. In order for this to work you must set environment variables with your Atlassian email and API token. Refer to @knime/eslint-config/scripts/README.md for more information.

Testing

Running unit tests

This project contains unit tests written with jest. They are run with

npm run test:unit

Linting

npm run lint

Security audit

npm provides a check against known security issues of used dependencies. Run it by calling

npm run audit

Build production version

Bundles with rollup into esmodule format and an IIFE bundle.

npm run build

Join the Community!

KNIME Forum