How to Publish/Subscribe Events using Custom Javascript Views

interactive
webportal
#1

We recently upgraded to KNIME Analytics Platform 4.0.2 where Plotly JS is added as possible default import in Generic JavaScript View. There are also templates present in Generic JavaScript View -> Templates tab like “2D Scatter Plot (Plotly)”, etc.

We observed that the above template uses knimeService to publish selection events. I could not find any documentation on KNIME website regarding knimeService except this knime blog - https://www.knime.com/blog/from-a-for-analytics-to-z-for-zika-virus .

Is there any documentation available on how to use knimeService and what other functions/features does it provide ?

1 Like

#2

Hello @mayurin,

Thank’s for your question. At this time, the knimeService global variable isn’t fully documented. That being said, here is some commonly used functionality that’s worth mentioning:

Status Checking

  • knimeService.isInteractivityAvailable() - this will return true if the view is part of a composite view with other views (and able to pub/sub events) or false if the view is a single node view.

Notifications/Warnings

  • knimeService.setWarningMessage(msg, id) /
    knimeService.clearWarningMessage(id) /
    knimeService.clearAllWarningMessages() - these methods are available to manipulate the native KNIME warning message (usually seen in the upper right hand corner as a ‘!’ icon)

Selection/Filtering

  • knimeService.setSelectedRows(tableId, selection, callback) /
    knimeService.addRowsToSelection(tableId, selection, callback) /
    knimeService.removeRowsFromSelection(tableId, selection, callback)
    - fires an update of the selection (a JavaScript array of rowIDs) to any subscribers in the composite view. The tableId can be retrieved from the knimeDataTable and the 3rd parameter is the callback function the view used to subscribed to selection events (if applicable). The methods set the globally selected rows, add to the selected rows, or remove rows from the global selection respectively.
  • knimeService.subscribeToSelection(tableId, callback) - registers the view with any selection events published in a composite view for the provided tableId (provided by the knimeDataTable). The callback function receives an event Object which contains the update information.
  • knimeService.unsubscribeSelection(tableId, callback) - deregisters the view from reacting to selection events when they are published in the composite view. Same parameters as in the sub method.
  • knimeService.subscribeToFilter(tableId, callback, filterElement) - registers the view to receive published filter events in the same composite view. TableId is the same as for selection and the callback function receives an event Object with the updated filter information (published by the Interactive Range Slider Filter Widget, or the Interactive Value Filter Widget) and the filterElement parameter can be retrieved using the knimeDataTable.getFilterIds() method.
  • knimeService.unsubscribeFilter(tableId, callback) - deregisters the view from reacting to filter events.
  • knimeService.isRowSelected(tableId, rowId) - returns true if the rowId provided is currently selected, false if not.
  • knimeService.getAllRowsForSelection(tableId) - returns the full global set of currently selected rowIds.

Controls

  • knimeService.addMenuItem(title, icon, element, path, flags) - adds a control element to the native KNIME dropdown menu in the upper right hand corner of the view. Title is the label assigned to the menu item, icon is the String name of an icon from the Font Awesome V4.7.0 library, element is the actual element created with one of the Menu Items methods below, path is an optional parameter (passing null is fine), flags can be: knimeService.CLOSE, .OK, .CANCEL, .LINK, .SMALL_ICON or undefined/null.
  • knimeService.allowFullscreen() - creates a native KNIME ‘fullscreen’ control button in the upper right hand corner of the view if it is in a composite view which allows the user to enter fullscreen mode when it is clicked.
  • knimeService.addButton(id, icon, title, callback) - creates a native KNIME control button in the upper right hand corner of the view provided: (id) the HTML id, (icon) the String name of an icon from the Font Awesome V4.7.0 library, (title) the hover text for the button and (callback) the function to fire when the button is pressed.
  • knimeService.addNavSpacer - adds space between the most recently added button and the next button to be added with the .addButton() method.

Menu Items

(all return elements to be added to the native KNIME dropdown menu using the addMenuItem method)

  • knimeService.createMenuTextField(id, initialValue, callback, immediate)
  • knimeService.createMenuNumberField(id, initialValue, minimum, maximum, step, callback, immediate)
  • knimeService.createMenuSelect(id, initialValue, options, callback)
  • knimeService.createMenuCheckbox(id, initialState, callback, value)
  • knimeService.createMenuRadioButton(id, name, value, callback)
  • knimeService.createInlineMenuRadioButtons(id, name, initialValue, options, callback)
  • knimeService.addMenuDivider() - does not return an element, but adds a horizontal bar to space the vertical distribution of menu items in the KNIME dropdown.

Utility Functions

  • knimeService.log(message) - logs message
  • knimeService.logError(err) - logs error
  • knimeService.inlineSvgStyles(svg) - when provided an SVG element, this method applys all stylesheets available in the scope and context of the view as inline styles if possible.

So this is just a basic overview of the functionality available with the knimeService. There are a handful of other methods available on the knimeService object that I didnt cover here. If you plan on using it extensively in the Generic JavaScript View node or in custom visualization nodes, I would recommend you read through the source to get a better idea of what else is available here. As for official documentation, we are hoping to continue to improve the documentation as best as possible. In the meantime, I hope this overview helps :slight_smile:

Best,
-Ben

5 Likes