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!!