Neural Activity Visualizer

AngularJS Component test

The neural-activity-visualizer Javascript app, enables web-browser visualisation of electrophysiology datafiles in any format supported by the Neo library. It makes use of the Neo Viewer REST API.
The visualizer-view component requires the source (url of file) attribute. There are also optional height (height of visualization panel), downsamplefactor (factor by which data should be downsampled to improve loading time with default value 1 for no downsampling)), iotype (manually specify the file type) attributes.

Example Usage

<head>
    ...

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-resource.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.51.1/plotly.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/NeuralEnsemble/neo-viewer@master/js/angularjs/src/visualizer.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/NeuralEnsemble/neo-viewer@master/js/angularjs/src/services.js"></script>
</head>
<body>
    <div class="container">
        ...

        <div class="row" ng-app="neo-visualizer">
            <visualizer-view
                source="https://object.cscs.ch/v1/AUTH_c0a333ecf7c045809321ce9d9ecdfdea/Migliore_2018_CA1/exp_data/abf-int-bAC/Ivy_960711AHP3/96711008.abf"
                height=300>
            </visualizer-view>
        </div>
    </div>
</body>

Example With Spike Trains

Example With Dynamic Source

You can input a custom data file URL below.

<div ng-controller="URLFormController">
    <form class="form-inline">
        <div class="form-group">
            <label for="dataFileURL">URL of data file:</label>
            <input type="text" class="form-control" ng-model="dataFileURL" id="dataFileURL" placeholder="enter data file URL here" style="width: 600px;">
        </div>
    </form>

    <visualizer-view ng-if="dataFileURL"
        source="{{dataFileURL}}"
        height=300>
    </visualizer-view>
</div>

Examples of multiple file types

NeoViewer supports a variety of filetypes. The dropdown below provides examples of several such file formats that can be visualized.

This project has received funding from the European Union’s Horizon 2020 Framework Programme for Research and Innovation under the Specific Grant Agreements No. 785907 and No. 945539 (Human Brain Project SGA2 and SGA3).

If you encounter any problems, please let us know.