Tuesday, April 9, 2019

Mobile and Small-Screen Optimization (Round One), addition of support for custom skeleton chains/segments, support for Iodine and Fluorine reactions, and support for free-radical chlorination

Release 4.0.0

The main motivation of this update was to introduce full mobile and small screen device support for the interface. To achieve this goal, two paths were considered: 1) Creating an android and iOS platform app. 2) Modifying and optimizing the existing interface to work on small/smaller screen devices. Eventually, the goal will be to create full fledged iOS and android platform apps, however, for this update the decision was made to keep the existing interface and tune it to work with small screens. The main reasoning for this decision is simply that it was easier to specialize the existing interface for smaller screens than it was to create an entirely new interface. Fortunately, I was also able to take advantage of the Bootstrap framework to allow stylistic changes for different page size breaks with the existing interface.

The first task for small screen optimization was chosen to be optimizing the home, or "splash" page. This was considered a good starting point because it showcases most of the features of the interface and it also is by default the first page the user views. Most stylistic modifications for the smaller screen were straightforward: wrapping text and interactive portions of the page from the same row to the next line to accommodate a smaller screen width, modifying the molecule drawing code to work with a smaller space, and using a carousel tool to display each molecule in the "Explore" section individually rather than displaying all molecules simultaneously.

The next part of the small screen optimization process involved optimizing the Reactions, Pathways, and Contact pages. These stylistic modifications were also straightforward and mainly involved re-positioning the page elements to work on a smaller screen width.

The final, and certainly most time intensive task, was to optimize the molecule design tool. A few chief considerations were made when figuring the best course to take:

  1. A goal was to make the workspace panel containing the molecule being designed/edited as large as possible, thus taking most of or the entire width of the screen in space limited environments.
  2. Given the lower precision of touch events on a mobile device, and the general use of dragging on a mobile device to move the portion of the page currently viewed, the decision was made to move away from the drag and drop method of adding atoms/skeletal chains and towards a click to select a new atom/skeletal chain and click to add the selected item to the existing molecule. This new method is also more similar to other molecule design tools and likely is more familiar to users.
  3. Although dragging on a mobile device is generally associated with moving the portion of the page currently viewed by the user, I also wanted to maintain the ability to pan to different areas of a complex molecule as well as to zoom in and out of the molecule. 
Work began attempting to satisfy the first consideration: as large a workspace panel as possible. Clearly having it take the full width (or nearly the full width) of the screen while maintaining proper height to width ratio was a good place to start. It then became a question of where the panels for the skeletal attachments and individual attachments to be added would be placed. I first attempted to keep the skeletal attachments panel to the left of the workspace and allowed the user to collapse and expand the panel as desired. A similar approach was used to keep the individual atom attachments on the bottom. This ultimately proved unsuccessful as it required the skeletal panel to overlay the molecule workspace when expanded, which resulted in it being difficult to properly place a new skeletal attachment. For example, adding an ethyl side chain to a pentane. I learned from this failed approach that it would be easiest to keep the skeletal and individual atom attachment panels separate from the main workspace panel.

After deciding to keep the panels of skeletal and individual atom attachments separate from and NOT overlaying the main workspace panel, it came time to decide where else on the screen to place the attachment panels. It seemed obvious that the individual atom panel would be placed on the bottom, as it was in that location in the original larger screen interface. As for the skeletal attachment panel, I first placed it above the workspace, but ultimately decided against this approach for two reasons: 1) It made more sense to keep both attachment panels near each other 2) the top of the workspace panel was already associated with the function buttons of the molecule editor (cut, paste, new, etc). With these two reasons in mind, I placed both attachment panels below the workspace panel. 

Transforming from the drag and drop approach of designing a molecule to the click to select an element and click where the element would be placed approached was relatively straight forward. The code was actually designed to abstract and separate the layers of handling interface events and handling the changes to the molecule as much as possible, so I merely had to switch from wiring a drag and drop handler to indicate that an attachment should be added to the molecule to wiring two clicks to indicate the same process. Fortunately, this approach is also more similar to existing, commonly-used molecule design tools and can even be implemented as an alternative to the drag and drop system used for a large size screen.

Finally, work was done to satisfy the third consideration: allowing the user both to drag the molecule around in the workspace panel and still affording the user the expected functionality of dragging on a mobile page; that is to navigate to a different part of the same page. This was trickier and I'm actually experimenting with the solution for now. As such I more than welcome all feedback on this approach! The approach is as follows. When the user starts a drag on a mobile device with the user's finger over the molecule workspace, the DEFAULT mobile behavior will be executed: the page will move to the position that the user has dragged to. When the user FIRST clicks on the molecule workspace, THEN performs a drag, instead of the page moving the molecule will move around inside the workspace panel. The user may click repeatedly on the molecule workspace to toggle exactly what drag operation does. This seemed to be an appropriate compromise, but I recognize that the user will need to get used to this functionality. With that in mind, the default result of a drag will be to move the position of the page. 

Phew! Compared to the overhaul of the interface for mobile optimization, the rest of the updates were much more minor. They were as follows:
  1. The addition of support for custom skeleton chains/segments. The impetus for this addition was to allow the user to add common elements of a more complex molecule component, such as a benzene ring, without needing to recreate the element from scratch. The user can find the custom skeleton chains/segments by cycling through the arrows in the skeletal attachments panel.
  2. The addition of support for molecules and reactions involving the elements Iodine and Fluorine.
  3. Support for the free-radical Chlorination reaction.
Standards: Similar to modeling for other supported reactions, the Fluorination and Iodination reactions were modeled after this article:  https://en.wikipedia.org/wiki/Halogen_addition_reaction.  The free-radical Chlorination reaction was modeled after this article: https://en.wikipedia.org/wiki/Free-radical_halogenation. No other new standards were introduced with this update. 

Controls: The major change in the controls of the interface involves the molecule design process on a small screen. The user will no longer add elements to a molecule in the design process by dragging an element from either the skeletal or individual atoms panels and then dropping the element on the chosen target in the workspace panel, but rather click an element to select it then click again on the target to add it. To compensate for the lower precision of click events on a smaller screen, I introduced a tolerance variable to play with how easily a click was registered. The tolerance was set at 5 pixels for now. That is any click within 5 pixels (in both dimensions) of the portion of the workspace where the atom is rendered will register as a click on that atom. 

There is also now a tutorial icon button in the upper right of the control button section which will open up all available tutorials on the small screen. I actually recommend following the Intermediate Molecule Design Tutorial to become acquainted with the new process.

Finally, the user can add a custom skeletal segment to the molecule in EITHER small screen mode or normal mode by selecting the "Custom Skeletons" page of the skeletal attachments. 

Future Considerations: One major consideration is potentially allowing the user to CHOOSE between the drag and drop approach or the click to select and click to place approach on all size screens. This would be useful if the user prefers one approach more than the other. Also to be considered is adding a "zig zag" type tool for drawing alkane chains. Finally, to be considered is the best level for the tolerance of a click action. This might even be a feature that is adjustable by the user.

Like the small screen design? Hate it???? Is this making Chemistry any easier yet??? Feel free to respond!!

Friday, January 25, 2019

Introduction of Smart Search feature, fix to bug with the Cumene process reaction, minor stylistic and interface updates, fix for bug of adding a cycloalkane to a smaller linear chain in interface

Release 3.1.0

A pretty exciting update for the search engine with this release! This time, first I'll begin with the interface and search engine bug fixes:

  1. Upon using the Discover feature of the home page, the user will now be greeted with a more friendly message upon selecting a reaction that cannot be applied to the selected molecule.
  2. A minor stylistic fix on the Reactions section was made. For example, see the first reaction of the Calvin cycle, the arrow in the View Reaction panel now looks correct.
  3. Previously, in the interface, the user was unable to design a molecule with a cyclic alkane primary skeleton and a straight-chain alkane attachment (for example propylcyclohexane) by first dragging the straight-chain alkane into the workspace and then adding the cyclic alkane. The user was required to first add the cyclohexane and then add the propyl attachment. Now either order is possible.
  4. A bug was fixed in the search engine for the modeling of the Cumene process reaction. The hydroxylation of benzene now results in the proper search engine modeling of Phenol.

And the exciting part of the update: the introduction of a Smart Search feature for the search engine. This new feature will use a heuristic calculation to guide its pathway search from the origin molecule to the goal molecule. For this release, the heuristic used in the smart search is NOT admissible, that is it will potentially overestimate the cost for the synthesis pathway between any given intermediate molecule and the goal molecule. The synthesis pathway found will thus POSSIBLY be sub-optimal. This was an acceptable trade-off made for the first release/iteration of the smart search. Subsequent releases will use admissible heuristics only to guarantee optimality. I am personally more than happy to explain more of the nature of the heuristic calculation used if you private or direct message me.

A motivating example for introducing a heuristic was the search to find a synthesis pathway from benzene to 2-acetoxybenzoic acid (aspirin) using ONLY the Pathway Calculations search option. This search had actually been previously accomplished utilizing both the Pathway Calculations and the MolGen Reactions search options. However, removing the MolGen Reactions search option (which basically provided a very strong hint for the search engine to begin with converting benzene to phenol), would result in a search timed out. The goal was to find such a synthesis pathway without the strong hint.

As I introduced the smart search option using a heuristic, I actually discovered the aforementioned bug in the modeling of the Cumene process reaction. Figuring it was more essential/urgent to fix the modeling bug, I went ahead and did so before proceeding with implementing the smart search feature. Low and behold, fixing this bug actually resulted in a successful synthesis pathway search from Benzene to Aspirin using ONLY the Pathway Calculations search option! There was no longer a time out issue! Running the following search for a pathway from Benzene to Aspirin using ONLY the pathway calculations search (and NOT the smart search feature) will now successfully find the synthesis pathway.

As I had already begun working on implementing the smart search feature, I went ahead and finished that feature as well. I ran benchmark tests on my local development environment and did indeed find that the search performs faster with the Smart Search feature turned on. Tests can actually be performed on www.organicchemmaster.com as well as the user wishes, comparing the search WITHOUT the Smart Search feature to the search WITH the Smart Seach feature. The user SHOULD see a shorter search time for the latter, but I have less control in performing benchmark tests on the server that hosts www.organicchemmaster.com than I do in my local environment.

Standards: Per usual, IUPAC naming rules were followed. Specifically, in this case the fix to the interface allowing the user to attach a cyclic alkane to a straight-chain alkane results in the properly named molecule: the cyclic alkane being designated the parent skeleton chain and taking naming precedence. Of note, the heuristic used for the Smart Search feature is by design NOT an admissible heuristic for this release/iteration. It will thus NOT necessarily guarantee an optimal synthesis pathway. Turning the feature off will STILL result in an optimal and complete (if there is one) synthesis pathway.

Controls: The only significant update to the controls is adding the new Smart Search feature option. This option can be selected in the "Search" checkbox section under the options popup.

Future Considerations: Obviously, we will eventually want the Smart Search feature to use an admissible heuristic to guarantee optimality of the pathway search. There will be a lot of choices to be taken into consideration to improve the heuristic(s) used in terms of trading off heuristic function calculation time and search time. That said, I am looking forward to utilizing the more power this update provides to the search engine !

Tuesday, December 11, 2018

Upgrade to SSL site and addition of user accounts

Release 3.0.0

Although this update does not bring any interesting interface or search engine changes, it nevertheless is a pretty major milestone for the site as a whole as it involves a transition to the secure https protocol as well as the introduction of user logins.

In order to use the most secure login tools, it was necessary to migrate the site to use the ASP.NET Core framework. Once this migration was finished, two login processes were created: 1) The process to allow the user to log in with an account specifically for the site. 2) The process to allow the user to use open authentication to log in with a Google account. The hope is that this flexibility will allow the user to log in in his or her preferred manner.

I am excited about the doors that having user logins will open such as personalized stored pathways and the ability to interact with other site users! The login page can be reached at: https://www.organicchemmaster.com/Identity/Account/Login and the register for account page can be reached at: https://www.organicchemmaster.com/Identity/Account/Register .

Sunday, November 4, 2018

Introduction of Intermediate Molecule Design and Intermediate Pathway Search Tutorials, fix of nomenclature bug

Release 2.11.1

A shorter update than last time, two more new tutorials were added: 1) An intermediate molecule design tutorial and 2) An intermediate pathway search tutorial.

The goals for the new intermediate level tutorials were:

  1. Get the user comfortable with designing a molecule with a more complex base skeleton.
  2. Familiarize the user with the two methods of changing types of bonds between two atoms in a molecule: clicking on the existing bond, and selecting a new bond type from the drop down list in the inspector.
  3. Familiarize the user with the New (+), Undo, Redo, Copy, and Paste control buttons.
  4. Introduce the process of adding more complex side chains to the molecule, such as acetyl groups, to the user.
  5. Familiarize the user with the process of using the zoom in, zoom out, and drag controls to edit/create more complex molecules.
  6. Familiarize the user with a more complicated pathway search. This includes using the MolGen Reaction database as a source for the pathway search and a longer time limit, of one minute, to perform the search. 
  7. Introduce the user to a pathway search that has real world applications as part of the tutorial. 
The chosen molecules for the tutorials were benzene and aspirin (2-acetoxybenzoic acid). Fortunately, the framework was already in place for creating the two new tutorials, so not much of the interface needed to be modified at all. The two new tutorials are up as the Intermediate Molecule Design tutorial and the Intermediate Pathway Search tutorial.

Additionally, one nomenclature bug was fixed. Previously, a molecule that contained a side chain of methyl that in turn contained two or more of the same functional group would NOT properly display the multiple group prefix (di, tri) in the radical name. One example of this (dihydroxymethyl)cyclohexane. This was previously, incorrectly named as (hydroxymethyl)cyclohexane, even with two hydroxyl groups attached to the methyl radical.This bug was actually discovered while creating the molecule 2-acetoxy-1-(dihydroxymethyl)benzene, a molecule the user will create on the way to creating aspirin.

Thanks! Again, keep the comments and emails support@organicchemmaster.com coming!

Friday, October 19, 2018

Introduction of Basical Molecule Design and Basic Pathway Search Tutorials, Undo/Redo feature, and create molecule by IUPAC name feature

Release 2.11.0

This update was directly inspired by a comment on the previous post:

Hi, is there any intro-level text or blog post you recommend before using your tool?

Great question! I think it was indeed high time some sort of introductory text or tutorial was, for lack of better word, introduced. I played with a few options: creating a blog post detailing how to get started, creating some sort of slide based demonstration, and finally implementing an interactive tutorial. I still might add the first two options, but I was most excited about the interactive tutorial; not only would it provide the most hands on way to introduce the tool to a new user, it would also serve as a great way to clean up/test the interface while designing the tutorial. Which in fact it did quite a bit.

The three goals for the first round of tutorials were: 
  1. Get the user able to create/design a simple molecule via the interface by physically adding and attaching the atoms of the molecule. In this case, ethanol (ethan-1-ol) was chosen as a good example molecule because it is simple in structure, a very well known molecule, and very readily reactive. 
  2. Get the user able to use the create molecule by IUPAC name feature. This feature involves the user typing the IUPAC (or common) molecule name in the appropriate field, then viewing the resulting molecule in the interface. Essentially, this is the opposite of the first goal: going from the IUPAC name to the molecule structure rather than vice versa. Ethanal (commonly acetaldehyde) was chosen as it also has a simple structure and can be formed via an oxidation of ethanol.
  3. Get the user able to perform a simple pathway search between two molecules. In this case, ethanol and ethanal, logically chosen because they were created in the first two steps.
The second goal actually required adding the feature of creating a molecule by IUPAC name to the main molecule workspace page. This feature was already on the home/splash page in the first section, so it just needed to be added to the molecule workspace page as well. The user can now click on the molecule name, enter a new molecule name, press enter, and see the new molecule created in the workspace.

After the create molecule by IUPAC name feature was finished, it became clear during the tutorial implementation process that having undo functionality would be VERY helpful. Namely to provide step by step instructions on successfully completing each tutorial, it would be necessary to undo a user's step if it was incorrect. That is, for the first goal of creating ethanol, if the user added a Chlorine atom to ethane, for example, we would want to undo the addition of Chlorine and instead instruct the user to add an Oxygen/Hydroxyl group. Undo/redo functionality had been on the plate for a while now, so it seemed like a perfect time to implement it. For now, the maximum amount of undos/redos allowed was set to five, though this may be changed in the future.

With both the undo/redo feature and the create molecule by IUPAC name feature implemented, it was possible to finish the tutorials in mind to accomplish the three goals listed above. The first two goals were accomplished with the Basic Molecule Design and Creation tutorial. The third goal was accomplished with the Basic Pathway Search tutorial.

Standards: No significant new standards were introduced. Per normal, all existing IUPAC naming rules were followed.

Controls: The controls for the undo/redo functionality should be straightforward. The icons at the top control bar of the workspace are now enabled to allow the user to click undo and redo when desired. In the case of an undo or a redo not being possible/allowed, that particular icon will be disabled.

The user can utilize the create molecule by IUPAC name feature as follows: 1) Click on the molecule name or the text "Click to enter molecule name" if one the workspace is currently blank. 2) Enter the IUPAC or common name of the desired molecule. (Note: this feature does not yet support EVERY possible molecule, but that indeed is the goal eventually.) 3) Click "enter".

Beginning the two tutorials that were added should be straightforward. The user can either click the "Open Tutorials" button in the Instructions panel, or click on one of the tutorial links on the Help page.

Future Considerations: The two added tutorials seem to be enough to get the user started. However, of course more tutorials for advanced molecule creation/design and pathway searches need to be added. Also, we MAY increase the possible number of undo steps. Finally, the create molecule by IUPAC name feature will eventually be improved to add a certain level of tolerance. That is, we would expect the user entering "1, 3-dichlorobutane" to result in the same molecule as "1,3-dichlorobutane". That extra space should be considered a tolerable discrepancy.

I greatly appreciate the user's comment and absolutely welcome more! Please go ahead and comment!

Monday, August 13, 2018

Addition of support for Cumene process, introduction of timeout feature for search engine, redesign of search engine result display, and addition of copy search link feature

Release 2.10.0

The impetus for this update was to enhance the user experience with the search engine interface. This was realized by three main improvements:

  1. More detailed information and feedback on the results of the pathway search. The results panel now shows: the result status, the start and goal molecules of the search, the number of steps in the pathway found (if one was found), the total search time, the search tools used, and the optimization.
  2. Addition of get link to pathway search button, which results in copying a link containing the search parameters to the user's clipboard. Similar to the get link to molecule button, the user can paste the generated link in a browser URL window and repeat the search with the same parameters. 
  3. Introduction of the search time limit feature. As searches are getting more and more complex with support for additional reactions, the timeout feature serves as sort of a "safety limit" to allow control over how long a search runs and if necessary stop it. The current limit choices are: 15 seconds, 30 seconds, 1 minute, and no limit. 
Additionally, support for the Cumene process reaction, a reaction allowing the hydroxylation of benzene to produce phenol, was added. This reaction is useful for extending the possible syntheses pathways of both Tylenol and Aspirin to begin with benzene. 

Standards: Similar to modeling for other support reactions, support for the Cumene process reaction was modeled after the description found here: https://en.wikipedia.org/wiki/Cumene_process. Otherwise no new IUPAC naming rules were added.

Controls: The additional information and feedback of the results are included in the same modal that shows the progress bar and the link to the pathway (if the search was a success). The get link to pathway search button was added to that same modal. The search time limit feature was added to the settings/options drop up menu of the reaction interface below the Optimize and Search settings. The user can select the time limit from the select list.

Future Considerations: It is clear after this update the pathway search engine can benefit from refinement to improve the speed and the robustness of the search algorithms. Of course the goal is to ultimately deliver all possible synthesis pathways in a short amount of time!

And finally a HUGE encouragement to go ahead and comment in the blog if you are so inclined, and/or to visit our contact page. We appreciate it!

Thursday, July 26, 2018

Introduction of two new features to the Interface: Locked Mode and Get Link to Molecule

Release 2.9.2

This release introduces two new, relatively minor Interface features: edit locked mode and get link to molecule functionality.

The edit locked mode will allow the user to view and inspect the created molecule without being concerned about inadvertently modifying it. I anticipate that this will be useful for larger, more complex molecules where the user might wish to pan and zoom in on a particular part of the molecule. In particular the user can drag the view of the molecule on the screen without worrying about clicking an atom to alter stereochemistry or a bond to change the bond type. I also anticipate this will be useful eventually on a mobile interface that does not support a hover event; the user can click on an atom to inspect it without modifying it.

The get link to molecule button is straightforward. Clicking on the button will copy a link to the current molecule to the operating system clipboard.

Controls - Use of the lock/unlock icon in the workspace toolbar will allow the user to toggle between edit locked mode and edit unlocked mode. Simply clicking the share icon in the molecule properties panel (next to the PubChem and Google search icons) will copy a link to the molecule.

Future Considerations - The link feature will likely be expanded to also allow the user to quickly get a link to a reaction pathway calculation.

Mobile and Small-Screen Optimization (Round One), addition of support for custom skeleton chains/segments, support for Iodine and Fluorine reactions, and support for free-radical chlorination

Release 4.0.0 The main motivation of this update was to introduce full mobile and small screen device support for the interface. To achie...