From c8510f8f3f878daf1b2a0846a36d9ce3e363419a Mon Sep 17 00:00:00 2001
From: Sebastien Jourdain <sebastien.jourdain@kitware.com>
Date: Thu, 19 Dec 2024 17:21:23 -0700
Subject: [PATCH] feat(globe): enable globe as accessor

---
 examples/jupyter/xarray-globe.ipynb | 105 ++++++++++++++++
 pan3d/explorers/globe.py            |  77 ++++++++++--
 pan3d/filters/globe.py              |  13 +-
 pan3d/ui/globe.py                   | 189 +++++++++++++++++++---------
 pan3d/ui/vtk_view.py                | 154 +++++++++++++----------
 pan3d/xarray/accessor.py            |  10 ++
 6 files changed, 410 insertions(+), 138 deletions(-)
 create mode 100644 examples/jupyter/xarray-globe.ipynb

diff --git a/examples/jupyter/xarray-globe.ipynb b/examples/jupyter/xarray-globe.ipynb
new file mode 100644
index 0000000..ed8fdc6
--- /dev/null
+++ b/examples/jupyter/xarray-globe.ipynb
@@ -0,0 +1,105 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "d3e629af-a060-4f1e-b821-34114a7694b2",
+   "metadata": {},
+   "source": [
+    "## Load XArray data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "0a67097d-b562-444a-8c2c-ea383d46fa48",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import xarray as xr\n",
+    "\n",
+    "ds = xr.tutorial.load_dataset(\"air_temperature\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "2bb6f93d-0005-4734-9af1-3db0ace2533b",
+   "metadata": {},
+   "source": [
+    "## Show data using Pan3d slicer"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "id": "9a0c47e0-a635-4c95-8bac-382c4e9ab264",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "13609393ee3f4604984a3bb6b11ae634",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "HTML(value='<iframe id=\"pan3d_accessor_1_trame__template_main\" src=\"http://localhost:65515/index.html?ui=main&…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "ds.pan3d.globe"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "4f65f61f-a4ff-4664-bfc4-3758603b7a1b",
+   "metadata": {},
+   "source": [
+    "### Access to VTK source"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c848393f-0022-41c7-b82a-46789b9acc78",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(\"Extents:\", ds.pan3d.globe.source.slice_extents)\n",
+    "print(\"Slice:\", ds.pan3d.globe.source.slices)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "1d0b2248-047b-426b-8a9c-13f83d3915cd",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.15"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/pan3d/explorers/globe.py b/pan3d/explorers/globe.py
index d736ae2..2ab0842 100644
--- a/pan3d/explorers/globe.py
+++ b/pan3d/explorers/globe.py
@@ -6,12 +6,15 @@
     vtkRenderWindow,
 )
 
-# need this unused import to set interactor style
-from vtkmodules.vtkInteractionStyle import vtkInteractorStyleTrackballCamera
+# VTK factory initialization
+from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch  # noqa
+import vtkmodules.vtkRenderingOpenGL2  # noqa
+
+from vtkmodules.vtkInteractionStyle import vtkInteractorStyleTerrain
 from vtkmodules.vtkFiltersGeometry import vtkDataSetSurfaceFilter
 from vtkmodules.vtkInteractionWidgets import vtkOrientationMarkerWidget
 from vtkmodules.vtkRenderingAnnotation import vtkAxesActor
-from vtkmodules.vtkCommonCore import vtkLookupTable
+from vtkmodules.vtkCommonCore import vtkLookupTable, vtkObject
 
 import json
 import traceback
@@ -34,6 +37,9 @@
 
 from pan3d.utils.globe import get_globe, get_globe_textures, get_continent_outlines
 
+# Prevent view-up warning
+vtkObject.GlobalWarningDisplayOff()
+
 
 @TrameApp()
 class GlobeViewer:
@@ -45,7 +51,7 @@ class GlobeViewer:
     relevant data and visualizes it using VTK while interacting with the slice in 2D or 3D.
     """
 
-    def __init__(self, server=None, local_rendering=None):
+    def __init__(self, xarray=None, source=None, server=None, local_rendering=None):
         """Create an instance of the XArrayViewer class.
 
         Parameters:
@@ -62,6 +68,9 @@ def __init__(self, server=None, local_rendering=None):
             - `--wasm`: Use WASM for local rendering
             - `--vtkjs`: Use vtk.js for local rendering
         """
+        self.xarray = xarray
+        self.source = source
+
         self.server = get_server(server, client_type="vue3")
         if self.server.hot_reload:
             self.ctrl.on_server_reload.add(self._build_ui)
@@ -132,11 +141,10 @@ def _setup_vtk(self):
 
         self.render_window.AddRenderer(self.renderer)
         self.interactor.SetRenderWindow(self.render_window)
-        # Following line fixes the unused import problem for setting interaction style
-        (vtkInteractorStyleTrackballCamera)
-        self.interactor.GetInteractorStyle().SetCurrentStyleToTrackballCamera()
+        self.interactor.SetInteractorStyle(vtkInteractorStyleTerrain())
 
-        self.source = vtkXArrayRectilinearSource()
+        if self.source is None:
+            self.source = vtkXArrayRectilinearSource(input=self.xarray)
 
         self.globe = get_globe()
         self.gmapper = vtkPolyDataMapper(input_data_object=self.globe)
@@ -162,6 +170,13 @@ def _setup_vtk(self):
         )
         self.actor = vtkActor(mapper=self.mapper, visibility=0)
 
+        # Camera
+        camera = self.renderer.GetActiveCamera()
+        camera.SetFocalPoint(0, 0, 0)
+        camera.SetPosition(0, -1, 0)
+        camera.SetViewUp(0, 0, 1)
+        self.renderer.ResetCamera()
+
         self.interactor.Initialize()
 
         axes_actor = vtkAxesActor()
@@ -210,6 +225,9 @@ def _build_ui(self, **kwargs):
                 self.render_window,
                 local_rendering=self.local_rendering,
                 widgets=[self.widget],
+                disable_style_toggle=True,
+                disable_roll=True,
+                disable_axis_align=True,
             )
 
             # Scalar bar
@@ -267,6 +285,7 @@ def _build_ui(self, **kwargs):
 
             # Control panel
             ControlPanel(
+                enable_data_selection=(self.source.input is None),
                 source=self.source,
                 toggle="control_expended",
                 load_dataset=self._load_dataset,
@@ -326,10 +345,23 @@ def _on_color_preset(
 
         self.ctrl.view_update()
 
-    @change("opacity")
-    def _on_change_opacity(self, opacity, **_):
-        opacity = float(opacity)
-        self.actor.GetProperty().SetOpacity(opacity)
+    @change("opacity", "representation", "cell_size", "render_shadow")
+    def _on_change_opacity(
+        self, representation, opacity, cell_size, render_shadow, **_
+    ):
+        property = self.actor.property
+        property.render_lines_as_tubes = render_shadow
+        property.render_points_as_spheres = render_shadow
+        property.line_width = cell_size
+        property.point_size = cell_size
+        property.opacity = float(opacity) if representation == 2 else 1
+        property.representation = representation
+
+        self.ctrl.view_update()
+
+    @change("bump_radius")
+    def _on_bump_radius_change(self, bump_radius, **_):
+        self.dglobe.bump_radius = bump_radius
         self.ctrl.view_update()
 
     @change("texture")
@@ -355,6 +387,16 @@ def _import_file_upload(self, files):
     def _process_cli(self, **_):
         args, _ = self.server.cli.parse_known_args()
 
+        # Skip if xarray provided
+        if self.source.input:
+            if not self.source.arrays:
+                self.source.arrays = self.source.available_arrays
+            self.ctrl.xr_update_info(self.source.input, self.source.available_arrays)
+            self.ctrl.source_update_rendering_panel(self.source)
+            self._update_rendering(reset_camera=True)
+            self.state.show_rendering = True
+            return
+
         # import state
         if args.import_state:
             self._import_file_from_path(args.import_state)
@@ -411,6 +453,10 @@ def _load_dataset(self, source, id, order="C", config=None):
                 self.renderer.RemoveActor(self.actor)
                 self.actor.visibility = 0
 
+            # Make sure arrays are available
+            if not self.source.arrays:
+                self.source.arrays = self.source.available_arrays
+
             # Extract UI
             self.ctrl.xr_update_info(self.source.input, self.source.available_arrays)
             self.ctrl.source_update_rendering_panel(self.source)
@@ -531,6 +577,13 @@ def save_dataset(self, file_path):
         self.state.show_save_dialog = False
         return asynchronous.create_task(self._save_dataset(file_path))
 
+    async def _async_display(self):
+        await self.ui.ready
+        self.ui._ipython_display_()
+
+    def _ipython_display_(self):
+        asynchronous.create_task(self._async_display())
+
 
 # -----------------------------------------------------------------------------
 # Main executable
diff --git a/pan3d/filters/globe.py b/pan3d/filters/globe.py
index 56518fd..aad05a3 100644
--- a/pan3d/filters/globe.py
+++ b/pan3d/filters/globe.py
@@ -27,6 +27,7 @@ def __init__(self):
         self.isData = False
         self.radius = 6378
         self.scale = 1.0
+        self._bump_radius = 10
 
     def SetDataLayer(self, isData_):
         if not self.isData == isData_:
@@ -38,6 +39,16 @@ def SetScalingFactor(self, scale_):
             self.scale = float(scale_)
             self.Modified()
 
+    @property
+    def bump_radius(self):
+        return self._bump_radius
+
+    @bump_radius.setter
+    def bump_radius(self, v):
+        if v != self._bump_radius:
+            self._bump_radius = v
+            self.Modified()
+
     def RequestData(self, request, inInfo, outInfo):
         inData = self.GetInputData(inInfo, 0, 0)
         outData = self.GetOutputData(outInfo, 0)
@@ -52,7 +63,7 @@ def RequestData(self, request, inInfo, outInfo):
         outWrap = dsa.WrapDataObject(outData)
         try:
             inPoints = np.array(outWrap.Points)
-            pRadius = (self.radius + 10) if self.isData else self.radius
+            pRadius = (self.radius + self._bump_radius) if self.isData else self.radius
             outPoints = np.array(
                 list(map(lambda x: ProcessPoint(x, pRadius, self.scale), inPoints))
             )
diff --git a/pan3d/ui/globe.py b/pan3d/ui/globe.py
index 7b78340..feb6776 100644
--- a/pan3d/ui/globe.py
+++ b/pan3d/ui/globe.py
@@ -25,6 +25,7 @@ def __init__(self, source, update_rendering):
         self.state.setdefault("max_time_width", 0)
         self.state.setdefault("max_time_index_width", 0)
         self.state.setdefault("dataset_bounds", [0, 1, 0, 1, 0, 1])
+        self.state.setdefault("render_shadow", False)
 
         with self.content:
             v3.VSelect(
@@ -104,25 +105,7 @@ def __init__(self, source, update_rendering):
                 flat=True,
                 variant="solo",
             )
-            with v3.VTooltip(
-                text=("`Opacity: ${opacity.toFixed(2)}`",),
-            ):
-                with html.Template(v_slot_activator="{ props }"):
-                    with html.Div(
-                        classes="d-flex pr-2",
-                        v_bind="props",
-                    ):
-                        v3.VSlider(
-                            classes="pr-3 ml-3",
-                            prepend_icon="mdi-opacity",
-                            v_model=("opacity", 1.0),
-                            min=0.0,
-                            max=1.0,
-                            hide_details=True,
-                            density="compact",
-                            flat=True,
-                            variant="solo",
-                        )
+
             with v3.VTooltip(
                 text=("`NaN Color (${nan_colors[nan_color]})`",),
             ):
@@ -160,25 +143,107 @@ def __init__(self, source, update_rendering):
                                         size="small",
                                         click="toggle",
                                     )
+
+            v3.VDivider()
+            v3.VSelect(
+                placeholder="Globe Texture",
+                prepend_inner_icon="mdi-earth",
+                v_model=("texture", self.state.textures[0]),
+                items=("textures", []),
+                hide_details=True,
+                density="compact",
+                flat=True,
+                variant="solo",
+            )
+            v3.VDivider()
+            v3.VSelect(
+                placeholder="Data Representation",
+                prepend_inner_icon=(
+                    "['mdi-dots-triangle', 'mdi-triangle-outline','mdi-triangle'][representation]",
+                ),
+                v_model=("representation", 2),
+                items=(
+                    "representations",
+                    [
+                        dict(title="Surface", value=2),
+                        dict(title="Wireframe", value=1),
+                        dict(title="Points", value=0),
+                    ],
+                ),
+                hide_details=True,
+                density="compact",
+                flat=True,
+                variant="solo",
+            )
+            v3.VDivider()
             with v3.VTooltip(
-                text=("`Globe texture: ${texture}`",),
+                v_if="representation !== 2",
+                text=(
+                    "`${representation ? 'Line Size' : 'Point Size' }: ${cell_size} - Shadow: ${render_shadow ? 'On': 'Off'}`",
+                ),
             ):
                 with html.Template(v_slot_activator="{ props }"):
                     with html.Div(
                         classes="d-flex pr-2",
                         v_bind="props",
                     ):
-                        v3.VSelect(
-                            placeholder="Globe Texture",
-                            prepend_inner_icon="mdi-earth",
-                            v_model=("texture", self.state.textures[0]),
-                            items=("textures",),
+                        v3.VSlider(
+                            classes="pr-3 ml-3",
+                            prepend_icon="mdi-format-line-weight",
+                            v_model=("cell_size", 1),
+                            min=1,
+                            max=100,
+                            step=1,
                             hide_details=True,
                             density="compact",
                             flat=True,
                             variant="solo",
+                            click_prepend="render_shadow = !render_shadow",
                         )
-                    v3.VDivider()
+            with v3.VTooltip(
+                v_if="representation === 2",
+                text=("`Opacity: ${opacity.toFixed(2)}`",),
+            ):
+                with html.Template(v_slot_activator="{ props }"):
+                    with html.Div(
+                        classes="d-flex pr-2",
+                        v_bind="props",
+                    ):
+                        v3.VSlider(
+                            classes="pr-3 ml-3",
+                            prepend_icon="mdi-circle-opacity",
+                            v_model=("opacity", 1.0),
+                            min=0.0,
+                            max=1.0,
+                            hide_details=True,
+                            density="compact",
+                            flat=True,
+                            variant="solo",
+                        )
+
+            with v3.VTooltip(
+                text=("`Bump Radius: ${bump_radius}`",),
+            ):
+                with html.Template(v_slot_activator="{ props }"):
+                    with html.Div(
+                        classes="d-flex pr-2",
+                        v_bind="props",
+                    ):
+                        v3.VSlider(
+                            classes="pr-3 ml-3",
+                            prepend_icon="mdi-signal-distance-variant",
+                            v_model=("bump_radius", 10),
+                            min=10,
+                            max=1000,
+                            step=10,
+                            hide_details=True,
+                            density="compact",
+                            flat=True,
+                            variant="solo",
+                        )
+
+            v3.VDivider()
+
             # X crop/cut
             with v3.VTooltip(
                 v_if="axis_names?.[0]",
@@ -195,7 +260,7 @@ def __init__(self, source, update_rendering):
                         v3.VRangeSlider(
                             v_if="slice_x_type === 'range'",
                             prepend_icon="mdi-axis-x-arrow",
-                            v_model=("slice_x_range", [0, 1]),
+                            v_model=("slice_x_range", None),
                             min=("slice_extents[axis_names[0]][0]",),
                             max=("slice_extents[axis_names[0]][1]",),
                             step=1,
@@ -244,7 +309,7 @@ def __init__(self, source, update_rendering):
                         v3.VRangeSlider(
                             v_if="slice_y_type === 'range'",
                             prepend_icon="mdi-axis-y-arrow",
-                            v_model=("slice_y_range", [0, 1]),
+                            v_model=("slice_y_range", None),
                             min=("slice_extents[axis_names[1]][0]",),
                             max=("slice_extents[axis_names[1]][1]",),
                             step=1,
@@ -292,7 +357,7 @@ def __init__(self, source, update_rendering):
                         v3.VRangeSlider(
                             v_if="slice_z_type === 'range'",
                             prepend_icon="mdi-axis-z-arrow",
-                            v_model=("slice_z_range", [0, 1]),
+                            v_model=("slice_z_range", None),
                             min=("slice_extents[axis_names[2]][0]",),
                             max=("slice_extents[axis_names[2]][1]",),
                             step=1,
@@ -324,7 +389,7 @@ def __init__(self, source, update_rendering):
                             size="sm",
                             classes="mx-2",
                         )
-                    v3.VDivider()
+            v3.VDivider()
 
             # Slice steps
             with v3.VTooltip(text="Level Of Details / Slice stepping"):
@@ -392,7 +457,7 @@ def __init__(self, source, update_rendering):
                             flat=True,
                             variant="solo",
                         )
-                    v3.VDivider()
+            v3.VDivider()
             v3.VBtn(
                 "Update 3D view",
                 block=True,
@@ -501,6 +566,9 @@ def on_change(self, slice_t, **_):
                 continue
 
             if self.state[f"slice_{axis}_type"] == "range":
+                if self.state[f"slice_{axis}_range"] is None:
+                    continue
+
                 slices[axis_name] = [
                     *self.state[f"slice_{axis}_range"],
                     int(self.state[f"slice_{axis}_step"]),
@@ -541,6 +609,7 @@ def _on_array_selection(self, data_arrays, **_):
 class ControlPanel(v3.VCard):
     def __init__(
         self,
+        enable_data_selection,
         source,
         toggle,
         load_dataset,
@@ -627,31 +696,37 @@ def __init__(
                             classes="mx-1",
                         )
                     with v3.VList(density="compact"):
-                        with v3.VListItem(
-                            title="Export state file",
-                            disabled=("can_load",),
-                            click=f"utils.download('xarray-state.json', trigger('{download_export}'), 'text/plain')",
-                        ):
-                            with html.Template(v_slot_prepend=True):
-                                v3.VIcon("mdi-cloud-download-outline", classes="mr-n5")
+                        if enable_data_selection:
+                            with v3.VListItem(
+                                title="Export state file",
+                                disabled=("can_load",),
+                                click=f"utils.download('xarray-state.json', trigger('{download_export}'), 'text/plain')",
+                            ):
+                                with html.Template(v_slot_prepend=True):
+                                    v3.VIcon(
+                                        "mdi-cloud-download-outline", classes="mr-n5"
+                                    )
+
+                            with v3.VListItem(
+                                title="Import state file",
+                                click="trame.utils.get('document').querySelector('#fileImport').click()",
+                            ):
+                                html.Input(
+                                    id="fileImport",
+                                    hidden=True,
+                                    type="file",
+                                    change=(
+                                        import_file_upload,
+                                        "[$event.target.files]",
+                                    ),
+                                    __events=["change"],
+                                )
+                                with html.Template(v_slot_prepend=True):
+                                    v3.VIcon(
+                                        "mdi-cloud-upload-outline", classes="mr-n5"
+                                    )
+                            v3.VDivider()
 
-                        with v3.VListItem(
-                            title="Import state file",
-                            click="trame.utils.get('document').querySelector('#fileImport').click()",
-                        ):
-                            html.Input(
-                                id="fileImport",
-                                hidden=True,
-                                type="file",
-                                change=(
-                                    import_file_upload,
-                                    "[$event.target.files]",
-                                ),
-                                __events=["change"],
-                            )
-                            with html.Template(v_slot_prepend=True):
-                                v3.VIcon("mdi-cloud-upload-outline", classes="mr-n5")
-                        v3.VDivider()
                         with v3.VListItem(
                             title="Save dataset to disk",
                             disabled=("can_load",),
@@ -664,7 +739,9 @@ def __init__(
                 v_show=(toggle, True),
                 classes="controller-content py-1 mt-10",
             ):
-                DataOrigin(load_dataset)
+                if enable_data_selection:
+                    DataOrigin(load_dataset)
+
                 self.ctrl[xr_update_info] = DataInformation().update_information
                 self.ctrl[source_update_rendering] = RenderingSettings(
                     source,
diff --git a/pan3d/ui/vtk_view.py b/pan3d/ui/vtk_view.py
index 327595a..e1d74bf 100644
--- a/pan3d/ui/vtk_view.py
+++ b/pan3d/ui/vtk_view.py
@@ -14,6 +14,9 @@ def __init__(
         axis_names="axis_names",
         local_rendering=None,
         widgets=None,
+        disable_style_toggle=False,
+        disable_roll=False,
+        disable_axis_align=False,
         **kwargs,
     ):
         super().__init__(classes="pan3d-view", **kwargs)
@@ -103,76 +106,89 @@ def __init__(
                             icon="mdi-crop-free",
                             click=self.ctrl.view_reset_camera,
                         )
-                v3.VDivider(classes="my-1")
-                with v3.VTooltip(text="Toggle between 3D/2D interaction"):
-                    with html.Template(v_slot_activator="{ props }"):
-                        v3.VBtn(
-                            v_bind="props",
-                            flat=True,
-                            density="compact",
-                            icon=("view_3d ? 'mdi-rotate-orbit' : 'mdi-cursor-move'",),
-                            click="view_3d = !view_3d",
-                        )
-                v3.VDivider(classes="my-1")
-                with v3.VTooltip(text="Rotate left 90"):
-                    with html.Template(v_slot_activator="{ props }"):
-                        v3.VBtn(
-                            v_bind="props",
-                            flat=True,
-                            density="compact",
-                            icon="mdi-rotate-left",
-                            click=(self.rotate_camera, "[-1]"),
-                        )
-                with v3.VTooltip(text="Rotate right 90"):
-                    with html.Template(v_slot_activator="{ props }"):
-                        v3.VBtn(
-                            v_bind="props",
-                            flat=True,
-                            density="compact",
-                            icon="mdi-rotate-right",
-                            click=(self.rotate_camera, "[+1]"),
-                        )
-                v3.VDivider(classes="my-1")
-                with v3.VTooltip(
-                    text=(f"`Look toward ${{ {axis_names}[0] || 'X' }}`",)
-                ):
-                    with html.Template(v_slot_activator="{ props }"):
-                        v3.VBtn(
-                            v_bind="props",
-                            flat=True,
-                            density="compact",
-                            icon="mdi-axis-x-arrow",
-                            click=(self.reset_camera_to_axis, "[[1,0,0]]"),
-                        )
-                with v3.VTooltip(text=(f"`Look toward ${{ {axis_names}[1] || 'Y'}}`",)):
-                    with html.Template(v_slot_activator="{ props }"):
-                        v3.VBtn(
-                            v_bind="props",
-                            flat=True,
-                            density="compact",
-                            icon="mdi-axis-y-arrow",
-                            click=(self.reset_camera_to_axis, "[[0,1,0]]"),
-                        )
 
-                with v3.VTooltip(text=(f"`Look toward ${{ {axis_names}[2] || 'Z'}}`",)):
-                    with html.Template(v_slot_activator="{ props }"):
-                        v3.VBtn(
-                            v_bind="props",
-                            flat=True,
-                            density="compact",
-                            icon="mdi-axis-z-arrow",
-                            click=(self.reset_camera_to_axis, "[[0,0,1]]"),
-                        )
-                v3.VDivider(classes="my-1")
-                with v3.VTooltip(text="Look toward at an angle"):
-                    with html.Template(v_slot_activator="{ props }"):
-                        v3.VBtn(
-                            v_bind="props",
-                            flat=True,
-                            density="compact",
-                            icon="mdi-axis-arrow",
-                            click=(self.reset_camera_to_axis, "[[1,1,1]]"),
-                        )
+                if not (disable_style_toggle and disable_roll and disable_axis_align):
+                    v3.VDivider(classes="my-1")
+
+                if not disable_style_toggle:
+                    with v3.VTooltip(text="Toggle between 3D/2D interaction"):
+                        with html.Template(v_slot_activator="{ props }"):
+                            v3.VBtn(
+                                v_bind="props",
+                                flat=True,
+                                density="compact",
+                                icon=(
+                                    "view_3d ? 'mdi-rotate-orbit' : 'mdi-cursor-move'",
+                                ),
+                                click="view_3d = !view_3d",
+                            )
+                    v3.VDivider(classes="my-1")
+                if not disable_roll:
+                    with v3.VTooltip(text="Rotate left 90"):
+                        with html.Template(v_slot_activator="{ props }"):
+                            v3.VBtn(
+                                v_bind="props",
+                                flat=True,
+                                density="compact",
+                                icon="mdi-rotate-left",
+                                click=(self.rotate_camera, "[-1]"),
+                            )
+                    with v3.VTooltip(text="Rotate right 90"):
+                        with html.Template(v_slot_activator="{ props }"):
+                            v3.VBtn(
+                                v_bind="props",
+                                flat=True,
+                                density="compact",
+                                icon="mdi-rotate-right",
+                                click=(self.rotate_camera, "[+1]"),
+                            )
+                    v3.VDivider(classes="my-1")
+
+                if not disable_axis_align:
+                    with v3.VTooltip(
+                        text=(f"`Look toward ${{ {axis_names}[0] || 'X' }}`",)
+                    ):
+                        with html.Template(v_slot_activator="{ props }"):
+                            v3.VBtn(
+                                v_bind="props",
+                                flat=True,
+                                density="compact",
+                                icon="mdi-axis-x-arrow",
+                                click=(self.reset_camera_to_axis, "[[1,0,0]]"),
+                            )
+                    with v3.VTooltip(
+                        text=(f"`Look toward ${{ {axis_names}[1] || 'Y'}}`",)
+                    ):
+                        with html.Template(v_slot_activator="{ props }"):
+                            v3.VBtn(
+                                v_bind="props",
+                                flat=True,
+                                density="compact",
+                                icon="mdi-axis-y-arrow",
+                                click=(self.reset_camera_to_axis, "[[0,1,0]]"),
+                            )
+
+                    with v3.VTooltip(
+                        text=(f"`Look toward ${{ {axis_names}[2] || 'Z'}}`",)
+                    ):
+                        with html.Template(v_slot_activator="{ props }"):
+                            v3.VBtn(
+                                v_bind="props",
+                                flat=True,
+                                density="compact",
+                                icon="mdi-axis-z-arrow",
+                                click=(self.reset_camera_to_axis, "[[0,0,1]]"),
+                            )
+                    v3.VDivider(classes="my-1")
+                    with v3.VTooltip(text="Look toward at an angle"):
+                        with html.Template(v_slot_activator="{ props }"):
+                            v3.VBtn(
+                                v_bind="props",
+                                flat=True,
+                                density="compact",
+                                icon="mdi-axis-arrow",
+                                click=(self.reset_camera_to_axis, "[[1,1,1]]"),
+                            )
 
     def reset_camera_to_axis(self, axis):
         camera = self.renderer.active_camera
diff --git a/pan3d/xarray/accessor.py b/pan3d/xarray/accessor.py
index b89b328..a4e02ab 100644
--- a/pan3d/xarray/accessor.py
+++ b/pan3d/xarray/accessor.py
@@ -32,6 +32,7 @@ def __init__(self, xarray):
         self.accessor_id = 0
         self._viewer_preview = None
         self._viewer_slicer = None
+        self._viewer_globe = None
 
     @property
     def preview(self):
@@ -55,6 +56,15 @@ def slicer(self):
 
         return self._viewer_slicer
 
+    @property
+    def globe(self):
+        from pan3d.explorers.globe import GlobeViewer
+
+        if self._viewer_globe is None:
+            self._viewer_globe = GlobeViewer(xarray=self.xarray, server=self.next_id())
+
+        return self._viewer_globe
+
 
 @xr.register_dataarray_accessor("vtk")
 class VTKAccessor: