Adding javascript generated SVGs to a KNIME table

Hello everyone,

I am currently fiddling with the Javascript views (thanks to @miguelalba for his short tutorial at this point) and I wondered if I can generate an SVG per row and append it to the data table in KNIME. Since I can’t find any documentation on that I would greatly appreciate your help.

One approach I thought of is to generate each SVG in an array and pass it to the ViewValue object, but I can’t find out if the values are synchronized between Javascript and Java.

Best,
Morris

Hi Morris,

I am happy to hear that the tutorial is helping somehow. I do not fully understand what you are doing with the SVG images in the table. Do you want to generate images in the Javascript view and have them returned in the node model to output them in the output KNIME table?

KNIME has if I recall correctly some AbstractImageWizardNodeModel implementations for PNG, SVG, etc. But these classes only return one SVG image from the JS view. If you want to generate many images, you could simply return them as SVG strings in the view value, for example an images array. Once you have these SVG strings in the node model it would be simple to add them to the KNIME table as a column. You could use the SVGCell to have them rendered.

PS. I have not used these classes in a while and may have made a typo.

Best,
Miguel

1 Like

Hey Miguel,

thank you for your answer. I tried this approach and it didn’t work, so I will describe my process and maybe you can spot the problem.

The view I want to implement was initially programmed for a React application. So I copied the React code and load the required React libraries with knimeService.loadConditionally before I define my window.namespace function where everything else is. Then, in the init function, I load React with requirejs and render the element to the DOM and save the SVGs to the string array. The elements are rendered fine in the view, and the SVG string are saved to the ViewValue, but the strings are not saved in the corresponding java object used in KNIME.

One issue might be that the requirejs call is asynchronous, but since there is no documentation on the knimeService, I did not find any other way than to use requirejs.

Any tips would be appreciated.

Best,
Morris

Hi Morris,

the problem with the SVG strings not saved might be in the view value class or the getComponentValue method. If you could share some of the code I could look into it.

Regarding requireJS I used it to load a JS library that KNIME had trouble with. If I recall correctly it is only invoked after creating the view. I used it in https://github.com/SiLeBAT/FSK-Lab/blob/master/de.bund.bfr.knime.fsklab.nodes/js-src/de/bund/bfr/knime/fsklab/nodes/neweditor/editor.js through the knimeService that actually uses requireJS with a lot of help from Christian Albrecht at RequireJS relative paths breaks some libraries submodules.

Hope that helps,
Miguel

1 Like

Dear Miguel,

thank you for your offer. I managed to remove the requireJS part by adding the libraries as a custom web dependency.
My getComponentValue is simply returning the internal javascript value object, and I don’t see anything different from my implementation of the view value to official ones. I upload the code for these two classes in case you find the time to take a look at it. They are renamed to .txt so I could upload it. Thank you for your help!

Best,
Morris

ForcePlotViewValue.txt (2.2 KB) form.txt (38.6 KB)

Hi Morris,

I looked a little into the view. Have you debugged when you assign the SVG strings at line 961.
this._value.forcePlotsSVG[rowIndex] = this.getSVG(i); inside createForcePlot. It these SVGs are fine also in the getComponentValue you might have a deserialization issue and a warning in the terminal. Although the view value seems fine.

Also another thing you might want to consider is at line 951, you are also checking that the first SVG is not empty or null. But if you use your node one time and save correctly the SVGs, the second time you open your node the first SVG would not be empty or null and the new SVGs would never replace the olds ones.

Best,
Miguel

1 Like

Dear Miguel,

thank you for your feedback. The SVG generation works perfectly, when I generate the view and call getComponentValue the correct value is displayed. But it is not returned to java. I created a simple project where I set a simple log message to the ViewValue object, but even that is not returned to java. I don’t know if I did something wrong in the project setup or if it’s a framework error. Do you know any way I could solve this? Or do you know the KNIME person one should talk to concerning javascript views?

Best,
Morris

Hi Morris,

sorry for writting so late. That seems a deserialization issue. If you could share your minimal project I could look into it and try to reproduce it. Anyway @albrecht can definitely help much more than I.

Best,
Miguel

1 Like