Tomography: display by any dimension

Author: jdavid

caterva2/services/plugins/tomography/__init__.py

@@ -81,15 +81,17 @@ def display(
     base = url(f"plugins/{name}")
     context = {
         "href": f"{base}/display_one/{path}",
-        "pages": arr.shape[0],
+        "shape": arr.shape,
     }
     return templates.TemplateResponse(request, "display.html", context=context)
 
 
-async def __get_image(path, user, i):
+async def __get_image(path, user, ndim, i):
     # Alternatively, call abspath_and_dataprep with the corresponding slice to download data async
     array = await get_container(path, user)
-    content = array[i]
+    index = [slice(None) for x in array.shape]
+    index[ndim] = slice(i, i + 1, 1)
+    content = array[tuple(index)].squeeze()
     return PIL.Image.fromarray(content)
 
 
@@ -99,13 +101,14 @@ async def display_one(
     # Path parameters
     path: pathlib.Path,
     # Query parameters
-    i: int,
+    ndim: int = 0,
+    i: int = 0,
     user: db.User = Depends(optional_user),
 ):
-    img = await __get_image(path, user, i)
+    img = await __get_image(path, user, ndim, i)
 
     base = url(f"plugins/{name}")
-    src = f"{base}/image/{path}?{i=}"
+    src = f"{base}/image/{path}?{ndim=}&{i=}"
 
     width = 768  # Max size
     links = []
@@ -129,11 +132,12 @@ async def image_file(
     # Path parameters
     path: pathlib.Path,
     # Query parameters
+    ndim: int,
     i: int,
     width: int | None = None,
     user: db.User = Depends(optional_user),
 ):
-    img = await __get_image(path, user, i)
+    img = await __get_image(path, user, ndim, i)
     img_file = resize_image(img, width)
 
     def iterfile():

caterva2/services/plugins/tomography/templates/display.html

@@ -1,4 +1,19 @@
-<input type="number" min="0" max="{{ pages - 1 }}" name="i" value="0"
-        hx-get="{{ href }}" hx-target="#image-div">
+<form class="d-inline-flex gap-2" hx-get="{{ href }}" hx-target="#image-div" hx-trigger="change">
+  <select class="form-select" name="ndim" hx-on:change="updateDim(this)">
+    {% for dim in shape %}
+      <option value="{{ loop.index0 }}" data-size="{{ dim }}">Dim {{ loop.index0 }} ({{ dim }})</option>
+    {% endfor %}
+  </select>
+  <input class="form-control" type="number" min="0" max="{{ shape.0 - 1}}" name="i" value="0">
+</form>
 
 <div hx-get="{{ href }}?i=0" hx-trigger="load" id="image-div"></div>
+
+<script>
+  function updateDim(select) {
+    const size = select.selectedOptions[0].getAttribute('data-size');
+    const input = document.querySelector('input[name="i"]');
+    input.setAttribute('max', size - 1);
+    input.value = 0;
+  }
+</script>