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
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)
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'}
.