This is the figurl visualization frontend that corresponds to the sortingview Python package.
(The naming is weird. This should probably be called sortingview-gui instead, and we will likely change the name in the future.)
Figurl pairs a visualization HTML bundle with a piece of data. The sortingview Python project is in charge of generating and preparing the data, uploading it to the cloud, and creating the figURL (figurl URL). Here is an example:
The d query parameter points to the data object, and the v query parameter points to the HTML bundle in the cloud, which is the compiled version of this project.
When the visualizations in this package are improved, a new HTML bundle is generated and uploaded to the cloud bucket. If there are no breaking changes to the data spec, the developer should not increment the deploy version so that it overwrites the existing bundle, and all visualizations (past, present, and future) will point to the improved view. However, if there are breaking changes, then a new version should be created, for example gs://figurl/spikesortingview-8 becomes gs://figurl/spikesortingview-9. The sortingview Python package should then be updated to conform with the new data spec and to point to the new version of the HTML bundle.
For a more in-depth description of how figurl works, see the figurl docs.
If you would like to contribute to this project, either by enhancing existing views or by creating new views, you'll need to set up a local development environment.
git clone <this-repo>Open this workspace in VS Code.
cd spikesortingview
code .Install the recommended VS Code extensions
cd spikesortingview
yarn installThis will install a large number of packages in the node_modules/ folder
# In VS Code terminal
yarn startIf all works as intended, you will get a development server listening on port 3000.
Point your browser (preferably Chrome) to http://localhost:3000. You should get "Waiting for data" message. The reason it is not showing anything interesting is because this page is meant to be embedded as a figurl figure. Navigate to
You should see a bunch of spike-sorting-related plots. Notice that the v query parameter is pointing to the local development server. Therefore it will auto-load changes you make to the source code. In production, that same view is available at
Notice in this case the v parameter points to the production HTML bundle in the cloud.
With the development server listening on port 3000 and the URL pointing to v=http://localhost:3000, you can see your changes to the source code live in the browser, which is really convenient. (This mostly works. Some types of changes require restarting the development server and/or reloading the page.)
To test this, let's change the text "Select one or more units to view cross-correlograms" (appears in the lower-right box) to "I am testing my development setup". In VS Code, search the project (Ctrl+shift+F) for the string "Select one or more units to view cross-correlograms" (you'll find it in CrossCorrelogramsView.tsx) and change it to a different string. Upon saving the file, you'll see the development server quickly update the compilation, and the changes will take effect in the browser. Now switch it back to the original text.
The source code is organized into a flat structure with modular libraries in the src/libraries folder. They are not really libraries, but we call them libraries because the plan is to eventually separate them out into external packages. Within the libraries folder, the prefix of the subdirectory reflects the type of module
view-* is a plugin view (see below)component-* is a React component that is not a plugin viewcontext-* is a React context for providing global stateutil-* is a utility module that is usually not a React componentViews are the building-blocks of the spikesortingview GUI. Each widget or sub-widget in a sortingview figure comes from a View. Each View has a type string, a data spec, and a React component.
See src/View.tsx and src/ViewData.ts for the list of Views and the data spec for each view.
The entry point to the project is src/index.tsx which imports src/App.tsx.
This project was created by Create-React-App which manages the project configuration, including the Webpack configuration. The developer will be saved from a very large number of headaches, so we should do whatever we can to avoid ejecting.
While developing locally is a lovely experience, eventually you will want others to see what you have created. This is just a matter of (a) building the bundle and (b) uploading it to a Google Cloud Storage Bucket. An example script for doing this is devel/deploy.sh. In fact this is the script used to deploy the production version (you need to have permission to upload to that bucket). When you want someone to see some changes you have made, you will probably want to upload to a different bucket, or to a different target directory in the production bucket. Then, when you share the URL, just be sure to redefine the v query parameter to point to your bundle.
Here, we'll assume you are creating a new view called Starlight.
view-starlight.index.ts, StarlightViewData.ts, and StarlightView.tsx.To test this out, you'll need to generate a figURL from a Python script. Make a copy of devel/dev_example.py and modify it to reflect your new View (you'll at least need to change the 'type' variable).
When you run the script, you'll get a figURL printed in the terminal. If you open that in the browser, you'll see an error message, because the cloud HTML bundle does not yet include your new view. Change the v query parameter in the URL to point to your local development server (http://localhost:3000) and you should be able to see your new view in action.
Once you have developed and tested your new view, you can incorporate it into the project by making pull requests to this repo and to the sortingview repo. On the sortingview side, you'll need to add your View class to the sortingview/views folder and edit __init__.py in that folder.
Congratulations, you have contributed a View to spikesortingview!