To be used for educational and demonstration purposes. Application accepts file(s) in SMILES file format, uses the ChEMBL API methods to convert SMILES string from file to xyz coordinates, having the coordinates, the application utilizes Speck library (source) to display a 3D compound model.

During the development, I found out that Speck is not a true JavaScript library, nor a JQuery plugin, and since I had no time to re-write it to be a Vue.js component, I ended up retrofitting their build to my Vue.js app.

Some key features:

• Written in Vue.js The Progressive JavaScript Framework.
• Demonstrates interaction with ChEMBL API.
• Utilizes Speck for 3D model rendering.
• Has verification procedure and accepts only valid SMILES files.
• Works great in all browsers including mobile! (Thanks to responsive web design)
• Supports multiple files conversion and rendering.
• Features drag-and-drop functionality.
• Uses SASS/SCSS for styling.
• Has thoroughly commented code.

Thanks to GitHub pages, live demo is available HERE.

While the app has responsive design and adapts to any screen size from the smallest iphone to TV, the Speck appears to have some WebGL shader issues which prevent rendering on mobile platforms. Tested both iOS and Android with no luck, it throws the follwing error:

Extension EXT _frag_depth not available

If anyone knows how to fix this without re-writing Speck, please let me know.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.