Case Study: Spectral Overlay Tool

Introduction

I landed some work with Biosearch Technologies, a biotechnology company in Petaluma, California that designs and manufactures nucleic acid-based products. They approached me to help them out with one of their new campaigns to promote their various products and renovated services through an all new microsite called qPCR Design Lab.

The work would be split between me and The Spider, a website development company also hired by Biosearch Technologies in San Francisco. I would be responsible for developing the site’s spectral overlay tool and the branded HTML5 game.

This particular case study will only focus on the spectral overlay tool.

The spectral overlay tool is a web application that visualizes the absorption and emission spectra for common fluorescent dyes and quenchers. Users can overlay them as multiplexed sets according to recommended combinations for each qPCR device.

Application Requirements

So, like most of technology included the campaign, the previous spectral overlay tool was in serious need of renovation. The first version was built from Flash, and support for the platform has been weakening lately in favor of HTML5. Biosearch Technologies sent me some feature requirements, branding guidelines, and the following technological requirements:

1. The tool must use HTML5 technologies.
2. The tool must support use on both desktop and mobile.

Drawing the Charts

So the first question obvious question was, "How am I going to draw these charts?"" I went through a few JavaScript charting libraries, but eventually I decided to use the Google Visualization API.

Most of the libraries supported the core feature requirement which is the ability to draw line charts, but ultimately I decided to use the Google Visualization API over all of them because of its clear and thorough documentation. After I skimmed through it, I knew that by choosing this API I wouldn’t run into too many problems since there would always be something to answer my questions.

In the end I believe I made the right decision because I didn’t run into any significant problems during development thanks to the docs and I really enjoyed using the API a lot.

Bootstrap Bandwagon

When the desktop and mobile support requirement popped up, not gonna lie, my first thought was just like what many web engineers these days would have... "Let’s use Bootstrap."

Bootstrap was still extremely helpful at the end of the day, but very early in development I decided to scrap the grid in favor of custom CSS which was something I wasn’t expecting. After the first few builds of the application, I realized that while the Bootstrap grid is extremely easy to use, some of the columns were awkwardly proportioned at some screen sizes or the layout would transition into its mobile version too early. In order to get specific dimensions and have fine control over how they adjust on screen size change, I needed to write custom CSS.

Data Management

Biosearch Technologies gave me the graph data in the form of CSV, but I wanted the application to run with JSON because it’s more flexible than CSV and JavaScript can handle it really easily.

To convert the data, I wrote a little Python script that converts the CSV to JSON. After the conversion, the JSON is then read in by the application. This makes it so that even Biosearch Technologies employees can update the graph data by themselves without me. All they need to do is convert their CSV to JSON and overwrite the existing JSON folder and the application will be updated.

Scaffolding & Task Running

I wanted to try out some new things in my workflow so I decided to use Yeoman. I really enjoyed using it since it setup the file structure and the project dependencies for me, saving me a lot of time when starting to work.

The most significant thing Yeoman introduced to me though was Grunt. Grunt’s tasks save me a ton of time! It can run the server for me, auto-refresh the browser when files are updated, compile SASS to CSS, run JSHint to lint my JavaScript, and run unit tests. All I need to do is type in one command and Grunt will do everything for me automatically in the background until I tell it to stop. What’s also nice is that I can build a production version of the tool where Grunt will compile all of the relevant files to reduce the amount of HTTP requests and minify it to reduce the file sizes of the codebase, making the live version of the application faster to download.

Grunt is so useful that now I use it in almost every frontend project I work on.

Conclusion

qPCR Design Lab went live on October 23, 2014. You can view the spectral overlay tool online here.

Genetic Engineering News awarded qPCR Design Lab the Best of Web in vol. 35, no. 4.