Instant JChem Plugins for Canvas Widget

This guide provides step-by-step instructions for installing IJC plugins for Canvas Widget and illustrates their use through practical examples.

• Introduction

• Installing plugins

• Examples

  • Example 1: Custom Drawing in Boolean Field
  • Example 2: Custom Drawing in Datetime Field
  • Example 3: Displaying Parent-Child Entity Relations

• Links to Related Documentation

• Summary

Introduction

The Canvas Widget is a powerful tool for dynamic data visualization, turning numbers and texts into interactive graphs, diagrams, and other easy-to-read graphics. It's a great helper in instrumental analysis, allowing you to individually pick, parameter-select (e.g. selecting the top 5 peaks), zoom, modify or compare data points and much more. Accessible in both grid and form views, the Canvas Widget provides the convenience of analyzing all your data on a single screen.

The following examples provide just a quick glimpse into the Canvas Widget's capabilities. If this tool catches your eye, check out the IJC plugin quickstart guide to build your own plugins.

Should you require a solution precisely tailored to your specific needs, the Instant JChem support team is ready to assist. Contact us via Chemaxon Freshdesk for custom-designed plugins.

Installing Plugins

1. Exemplary plugins are located on the Instant JChem download page.

2. On the aforementioned page, the Browse previous versions option provides access to various version selections.

3. Choose the desired version and download ijc-api-examples.zip file located inside the version folder.

4. Once the ijc-api-examples.zip file has been downloaded, extract the contents.

5. After launching Instant JChem (IJC), click Tools > Plugins option in the Main menu to open plugin interface.

6. In the newly displayed window, choose Downloaded tab and click Add Plugins....

7. Navigate to the plugins folder found within the previously extracted ijc-api-examples directory.

8. Once here, select com.chemaxon.ijc.canvas.examples.rings and com.chemaxon.ijc.canvas.examples.demo plugins and click install.

Upon successful installation, the plugins will be ready-to-use in both grid and form views.

The demo plugin contains renderers for Boolean and datetime fields.

• com.chemaxon.ijc.canvas.examples.demo.BooleanCell is designed to present a graphical designs into Boolean field.

• com.chemaxon.ijc.canvas.examples.demo.ClockCell is designed to present a graphical designs into datetime field.

The rings-plugin contains renderer for calculated field.

• com.chemaxon.ijc.canvas.examples.rings.RingsCell is designed to present grap for a calculated field

• com.chemaxon.ijc.canvas.examples.rings.RingsWidget- for a Form view Canvas widget.

Be aware that the .RingsCell class is utilized in Grid view, while the .RingsWidget class is employed in Form view. This applies to all previously mentioned handler classes.

Examples

Example 1: Custom Drawing in Boolean Field

Leveraging graphical elements for Boolean fields in IJC's grid view offers multiple benefits. Not only it enhances the interface's visual appeal, but also simplifies the process of data analysis. Collectively, the employment of visual elements contributes to a more intuitive and efficient user experience while scanning through the datasets

1. Create a new Boolean field in a grid view.

2. Fill in a few checks and crosses by clicking into the empty cells (this is solely for observing the changes that occur after implementing the Canvas renderer). Right click on the field and choose Customize Widget Settings.

3. Change Cell Renderer: option to Canvas cell renderer. Paste the following handler com.chemaxon.ijc.canvas.examples.demo.BooleanCell into Handler class. Close the Table Widget Settings wizard.
   

4. The Boolean field value is now displayed as an image.
   

5. Various graphic elements (e.g. a green check mark for “true”, a red “x” for “false”) can be used for displaying the Boolean field value. Their shape, colour and size can be easily changed by using a JSON map in the Config field.

Example 2: Custom Drawing in Datetime Field

1. Create new date field and fill in few random dates.

2. Right click on the field and choose Customize Widget Settings. Change Cell Renderer: option to Canvas cell renderer.

3. Enter com.chemaxon.ijc.canvas.examples.demo.ClockCell into Handler class, as in previous example, click OK and close the Customize Widget Settings wizard.

4. Date time is now displayed as clocks.

Example 3: Displaying Parent-Child Entity Relations

For a clearer understanding of the following example, it would be helpful to have a foundational knowledge of parent-child entity relations. Please refer to the Pivoting tutorial for a comprehensive guide on establishing such relationships.

Suppose we want to visually display results from a random experiment conducted on every structure in the dataset three times. With each repetition, the concentration was elevated (for instance, 50mM, 100mM, and 200mM). In simpler terms, each molecule is associated with three measurement outcomes we wish to display.

Visualization in Grid View uUing Canvas Cell Renderer

1. Create New Calculated field as Calculated text field type.

2. Choose name for the new field.

3. Click Add. In the child entity, select the field you wish to display. For our demonstration, we're aiming to show the values in the Result 1 field. Confirm by clicking OK.
   

4. Set the variable Type to List. This configuration ensures that all three result values are enumerated.

5. Enter the Variable name as Expression and click Validate. You should see [1] as a Test Result.
   

6. Click Finish. The values in the field are now visible in [x1,x2,x3] format.

7. Open Customize Widget Settings and switch to Canvas cell renderer.

8. Open Handler Class and copy paste com.chemaxon.ijc.canvas.examples.rings.RingsCell. Click OK and close Widget settings.

9. The values in the field Result 1 are now displayed as rings. Diameters of the rings
   are proportional to the measured values. The bigger the value, the bigger the ring. For higher values, it may be necessary to zoom out to see the corresponding ring.

Visualization in Form View Using Canvas Widget

1. To visualize the rings in a form view, we need to use Wombat data tree since the com.chemaxon.ijc.canvas.examples.rings.RingsWidget serves solely as an example and is designed specifically for Wombat data tree.

2. Open Wombat data tree and select Wombat(compound view) compounds.

3. Once there, switch to the design mode and drag and drop Canvas Widget from the sidebar to any empty place in the form.

4. Right click on the widget and select Customize Widget Settings. Fill in the handler class com.chemaxon.ijc.canvas.examples.rings.RingsWidget, click OK and close the widget settings.

5. The rings are now visible. In the form view, the widget is interactive and can be modified as pleased.

Links to Related Documentation

• For a brief overview of Canvas widget in Instant JChem click here.

• For additional Canvas widget examples click here.

• Interested in building your own plugins? Click here.

Summary

In conclusion, the Canvas Widget stands as a potent tool for dynamic data visualization, transforming numerical and textual data into interactive and easily interpretable graphics. This capability significantly enhances workflow, allowing users to selectively analyze, modify, or compare data. By incorporating plugins, one can tailor the visualizations to specific needs, whether it's displaying spectra or graphs of any kind or complex parent-child entity relations.