react-neuroglancer is a react wrapper around an old fork of neuroglancer. It is used to embbed the neuroglancer viewer into a react application and allow the parent application to interact with the contents of the neuroglancer view and vice versa.
npm install @janelia-flyem/react-neuroglancer
# or
yarn add @janelia-flyem/react-neuroglancerimport Neuroglancer from '@janelia-flyem/react-neuroglancer';
const Example = () => {
return (
<Neuroglancer
perspectiveZoom={80}
viewerState={viewerState}
brainMapsClientId="NOT_A_VALID_ID"
ngServer="https://clio-ng.janelia.org"
onViewerStateChanged={onViewerStateChanged}
/>
);
};The main component that will show the neuroglancer viewer.
| Prop | Type | Default | Description |
|---|---|---|---|
| perspectiveZoom | number | 20 | The starting zoom level of the viewer |
| viewerState | object | {} | The core object that describes the current state of the neuroglancer viewer. |
| brainMapsClientId | string | NOT_A_VALID_ID | Client ID used to access Google brainmaps API |
| eventBindingsToUpdate | object[] | [] | An array of event bindings to change in Neuroglancer. The array format is as follows: [[old-event1, new-event1], [old-event2], old-event3] Here, old-event1's will be unbound and its action will be re-bound to new-event1. The bindings for old-event2 and old-event3 will be removed. Neuroglancer has its own syntax for event descriptors, and here are some examples:'keya', 'shift+keyb' 'control+keyc', 'digit4', 'space', 'arrowleft', 'comma', 'period', 'minus', 'equal', 'bracketleft'. |
| onViewerStateChanged | function | (viewerState) => { return } | A callback function that is called whenever a change is made to the state of the neuroglancer component. This can be used to update values in the containing application. |
| ngServer | url | 'https://neuroglancer-demo.appspot.com/' | Base url for a neuroglancer server that will be used to create external links |
The viewerState should be defined before creating the neuroglancer viewer. Here is a simple example of a state that shows two lawyers in the viewer.
{
layers: {
grayscale: {
type: "image",
source:
"dvid://https://flyem.dvid.io/ab6e610d4fe140aba0e030645a1d7229/grayscalejpeg"
},
segmentation: {
type: "segmentation",
source:
"dvid://https://flyem.dvid.io/d925633ed0974da78e2bb5cf38d01f4d/segmentation"
}
},
perspectiveZoom: 20,
navigation: {
zoomFactor: 8
}
}To see more complicated examples, click on the '{}' button located at the top right in neuroglancer and view the JSON object that is displayed.