Add forward and backward buttons to navigate time series data with NiiVue

[hanayik]

Is your feature request related to a problem? Please describe.

@nellh , On mobile devices, there is no way to navigate 4D datasets in the new NiiVue viewer. On desktop, users can use the left and right arrows to go forward and backward one volume at a time. There is no elegant way to activate the keyboard on mobile devices to achieve this.

Describe the solution you'd like Create two new buttons above or below the NiiVue React component. On button click, call setFrame4D such as:

// decrement one volume
nv.setFrame4D(nv.volumes[0].id, nv.volumes[0].frame4D - 1);

// increment one volume
nv.setFrame4D(nv.volumes[0].id, nv.volumes[0].frame4D + 1);

You can see an example in the NiiVue online demo here:

https://github.com/niivue/niivue/blob/e51d687cd0c44530646b5f63e7402d48fcc4739e/demos/features/timeseries.html#L60

[neurolabusc]

The latest commits of NiiVue allow can show an interactive timeline in the multiplanar view. Here is a live demo of this feature. If the user clicks on the graph, the image loads the selected volume. To enable this, set autoSizeMultiplanar to true. If this is enabled, the multi-planar view always shows two columns and two rows (whereas if the graph is not enabled the images will either be displayed as one row with three columns (landscape) or two rows with two loumns (portrait) depending on the canvas aspect ratio .

 nv1.setSliceType(nv1.sliceTypeMultiplanar)
 nv1.graph.autoSizeMultiplanar = true;
 nv1.graph.normalizeValues = false;

[hanayik]

@nellh and @effigies, this issue probably doesn't require any action if #3055 is merged in. There's no need for additional OpenNeuro UI components to navigate multiple volumes if the NiiVue graph is displayed, since it responds to click and touch events in the graph tile.