Comma Chameleon

Comma Chameleon is a desktop CSV editor (built with Electron.js) that provides a simple interface for editing data.

Developed by the ODI as a proof of concept, it has now been replaced by Data Curator (GitHub).

Summary of features

Validate your CSV on the fly using CSVlint, so you can be sure your data is reuse-ready before you publish it
Comma Chameleon lets you export your data as a Data Package, ready for publication and reuse
Integrate with Octopub and publish your data to Github

Download and Install App

Choose a platform from the Releases page.

Drag the application to your applications folder. If you encounter a warning message informing you the application cannot be opened due to emanating from an unknown developer try the following. This occurs due to Mac OS quarantining applications where it cannot determine the certificate used to sign the application.
Steps:

Right click the app, then option+click on Open.

Development

Requirements

node and npm

You can use npm to install all relevant packages and development dependencies using the following set of commands. Node and Bower install the dependencies contained in package.json and bower.json respectively

npm install -g bower electron
npm install
bower install

External (non-JS) dependencies

Comma Chameleon relies on CSVlint.sh to carry out CSV validation. This is not included in the repo, and is downloaded and installed by the build.js script. As with the page build script, this script is also run when the app is started with the npm start command.

Development: Running the full application locally

To open the app run:

npm start

This will download the non-JS dependencies (namely CSVlint.sh), build the handlebars views (from comma-chameleon/views-content) and start the app.

Application Architecture

Comma Chameleon is built using Electron.js, a framework that allows developers to build desktop applications using web technology.

There are two parts of the application, the main process and the renderer process. The main process deals with things like carrying out file operations, validating CSVs, rendering views, and exporting to Github. The renderer acts very much like client side JS in a web browser, dealing with things like presentation, and user interactions.

IPC messaging

Electron passes and listens for messages between main and renderer using the IPC module, one for the main process and one for the renderer process.

For example, when importing an Excel file, the main process reads the Excel file and opens a new window in the renderer process. Once the window has opened, the main process sends the worksheet names to the renderer process, which are then displayed to the user. Once a user selects a worksheet, the renderer process sends a message back to the main process, and the main process converts the relevant worksheet to CSV and loads it into a new window.

Views

To keep things DRY, the HTML views are written using Handlebars, see the views-content folder. The views are then built using the page-build.js script, which also gets run when the app is started with the npm start command.

Tests

Electron-Mocha has been adopted for testing, it enables both DOM and node.js testing and provides command line options to enable testing of both.

Assuming you have installed electron-mocha globally (via npm i electron-mocha -g), you can run the tests like this:

npm test

Or to run the main and renderer tests separately, you can run:

npm run test-main  # run tests for the runtime components provided by Electron
npm run test-renderer # run tests that execute client side

Otherwise you can run:

electron-mocha test/main/
electron-mocha --renderer test/renderer/ # run tests that execute client side

Deployment: Packaging

Building a new package

(This assumes you're running OSX)

Install gulp

brew install wine # This allows us to specify the icon for Windows pacakges
npm i electron-packager -g
gulp build

You can also build a package for a specific platform by running gulp build --platform={one of 'linux', 'darwin' or 'win32'}.