Show link to plate viewer on dataset page

[jluethi]

The vizarr viewer links on the dataset page are very useful!

Currently, we only link to the individual images, e.g. the full zarr url. For example:
https://fractal.mls.uzh.ch/vizarr/?source=https://fractal.mls.uzh.ch/vizarr/data/data/active/jluethi/Fractal/20240723_23well_benchmark/20200812-CardiomyocyteDifferentiation14-Cycle1_mip.zarr/B/03/0

A thing that is also super useful is linking to the plate view. By going to this url:
https://fractal.mls.uzh.ch/vizarr/?source=https://fractal.mls.uzh.ch/vizarr/data/data/active/jluethi/Fractal/20240723_23well_benchmark/20200812-CardiomyocyteDifferentiation14-Cycle1_mip.zarr
(just removing the sub path to row, col & image)
We see:

We have metadata about whether a dataset has plates and what plates are available in the image list:

The goal would be that:
If there are plates in the image list
Show selector for which plate to load. And show a button for "view plate" that send the user to the link above.

This should be displayed above the image list for the moment. I may have additional ideas of where we expose this in the future :)

---

How do we get the plate url? I'd say we take the first zarr_url with the plate attribute. Given its zarr_url, we reconstruct the plate url. I see 2 ways:

1. We already extract the base path to avoid displaying it. We can just to base path + plate name
2. We could also look at the full zarr_url, find the plate name in the url & drop everything after that from the url

[jluethi]

We should go with something like point 2: Drop the last 3 elements of the zarr_url

Reason: The plate attribute is not actually enforced to be correctly matching the file name

[tcompa]

Example of image list

zarr_url, plate
/some/plate1.zarr/B/03/0, "plate1"
/some/plate1.zarr/B/04/0, "plate1"
/some/plate2.zarr/A/03/0, "plate2"

1. Check If "plate" is one of the images attributes, otherwise stop.
2. Write component on top of image list, with message "Detected 2 plates, choose one to view it (dropdown showing "plate1" or "plate2")
3. User clicks "plate1"
   • If no image with plate1 is currently available, make an API call filtering for plate=plate1 and asking for page-size =1
   • GIven the zarr_url of one plate1 image, remote the last three levels
   • Create vizarr link, and display a "View" button (next to the dropdown, not in the image list)

[zonia3000]

Example of View plate button (notice the URL previewed in the bottom of the screenshot):

If the zarr URL is not valid (it has less than 3 elements) an error is displayed:

[jluethi]

This looks like a great start for this feature! 👏🏻

Minor wording suggestion:
"This dataset contains 3 plates. Select which plate you want to view"

[tcompa]

I tested #562, and it works as expected.

I imported this dataset

{
  "name": "test-2",
  "zarr_dir": "/tmp/some/path/",
  "images": [
    { "zarr_url": "/tmp/some/path/plate1/we/ll/a", "origin": null, "attributes": { "plate": "plate1" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate1/we/ll/b", "origin": null, "attributes": { "plate": "plate1" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate1/we/ll/c", "origin": null, "attributes": { "plate": "plate1" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate1/we/ll/d", "origin": null, "attributes": { "plate": "plate1" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate1/we/ll/e", "origin": null, "attributes": { "plate": "plate1" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate1/we/ll/f", "origin": null, "attributes": { "plate": "plate1" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate1/we/ll/g", "origin": null, "attributes": { "plate": "plate1" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate1/we/ll/h", "origin": null, "attributes": { "plate": "plate1" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate2/we/ll/a", "origin": null, "attributes": { "plate": "plate2" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate2/we/ll/b", "origin": null, "attributes": { "plate": "plate2" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate2/we/ll/c", "origin": null, "attributes": { "plate": "plate2" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate2/we/ll/d", "origin": null, "attributes": { "plate": "plate2" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate2/we/ll/e", "origin": null, "attributes": { "plate": "plate2" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate2/we/ll/f", "origin": null, "attributes": { "plate": "plate2" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate2/we/ll/g", "origin": null, "attributes": { "plate": "plate2" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate2/we/ll/h", "origin": null, "attributes": { "plate": "plate2" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate3/we/ll/a", "origin": null, "attributes": { "plate": "plate3" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate3/we/ll/b", "origin": null, "attributes": { "plate": "plate3" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate3/we/ll/c", "origin": null, "attributes": { "plate": "plate3" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate3/we/ll/d", "origin": null, "attributes": { "plate": "plate3" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate3/we/ll/e", "origin": null, "attributes": { "plate": "plate3" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate3/we/ll/f", "origin": null, "attributes": { "plate": "plate3" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate3/we/ll/g", "origin": null, "attributes": { "plate": "plate3" }, "types": {} },
    { "zarr_url": "/tmp/some/path/plate3/we/ll/h", "origin": null, "attributes": { "plate": "plate3" }, "types": {} }
  ],
  "filters": {
    "attributes": {},
    "types": {}
  }
}

and got this page

---

The "View" button of the first image points to http://localhost:3000/?source=http://localhost:3000/data/tmp/some/path/plate1/we/ll/a.

---

I selected "plate2", and got

where the "View" button points to http://localhost:3000/?source=http://localhost:3000/data/tmp/some/path/plate2