`_,
-otherwise users will see the standard web login screen.
-Once logged-in (as a regular user or public user), the data displayed will
-include all data accessible to that user via the normal OMERO permissions.
-
-
-Default UI
-----------
-
-This view supports minimal functionality required for browsing the hierarchy
-from Groups -> Projects -> Datasets -> Images. Screen/Plate/Well data is
-not supported in this UI.
-
-The home page will display all the available groups that the user can access, with a random
-thumbnail from each group. The number of Projects, Datasets and Images within each group
-will also be displayed.
-
-.. image:: https://ome.github.io/omero-gallery/images/gallery.png
-
-
-On browsing into a group, the Projects and 'orphaned' Datasets will be shown in a similar layout.
-
-.. image:: https://ome.github.io/omero-gallery/images/show_group.png
-
-Projects are shown with 5 thumbnails from each Dataset. Clicking 'All Images' will load all the remaining thumbnails
-from a chosen Dataset (or you can browse to the Dataset itself by clicking the Dataset name link).
-
-.. image:: https://ome.github.io/omero-gallery/images/show_project.png
-
-Clicking a thumbnail will take you directly to the full image viewer.
-
-.. image:: https://ome.github.io/omero-gallery/images/webgateway_viewer.png
-
-
-Categories UI
--------------
+IDR.gallery overview
+====================
-This view was originally developed for use in the IDR and can be seen at
+This UI was developed for use in the IDR and can be seen at
https://idr.openmicroscopy.org/. In the IDR, a "Study" is a Project or Screen
and they are annotated with Key-Value data in the form of Map Annotations,
for example ``Study Type: 3D-tracking``.
@@ -98,8 +54,8 @@ https://github.com/ome/omero-mapr/ is installed then you can:
* Find Studies containing Images that match queries on their Map Annotations.
-Configuring the Categories UI
------------------------------
+Configuring the UI
+------------------
**omero.web.gallery.category_queries:**
To enable the Categories UI, you must set ``omero.web.gallery.category_queries``.
@@ -181,16 +137,6 @@ these will be shown in a dropdown menu::
**omero.web.gallery.favicon:**
Set a URL to a favicon to use for the browser.
-**omero.web.gallery.subheading_html:**
-Set some HTML to show as a sub-heading on the home page, within a tag::
-
- $ omero config set omero.web.gallery.subheading_html "This is an image gallery using OMERO ."
-
-**omero.web.gallery.footer_html:**
-Set some HTML to show as a footer on each page::
-
- $ omero config set omero.web.gallery.footer_html "Blog "
-
**omero.web.gallery.study_short_name:**
This specifies a short name for Screen or Project to show above the study Image
in the categories or search page, instead of the default 'Project: 123'.
@@ -211,6 +157,7 @@ like: ``idr0001-graml-sysgro/screenA``::
Release process
---------------
+- occasionally update `totalImages` and other fallback counts in loadStudyStats()
- review and update the [CHANGELOG](https://github.com/ome/omero-gallery/blob/master/CHANGELOG.md)
- run ``bumpversion release`` to remove the dev suffix and create a signed tag
- run ``bumpversion --no-tag patch`` to bump the version to the next dev suffix
@@ -220,9 +167,9 @@ Release process
License
-------
-OMERO.gallery is released under the AGPL.
+`idr_gallery`` is released under the AGPL.
Copyright
---------
-2016-2021, The Open Microscopy Environment
+2016-2022, The Open Microscopy Environment
diff --git a/idr_gallery/__init__.py b/idr_gallery/__init__.py
new file mode 100644
index 00000000..e27e1686
--- /dev/null
+++ b/idr_gallery/__init__.py
@@ -0,0 +1 @@
+default_app_config = 'idr_gallery.apps.GalleryAppConfig'
diff --git a/omero_gallery/apps.py b/idr_gallery/apps.py
similarity index 89%
rename from omero_gallery/apps.py
rename to idr_gallery/apps.py
index 747ae501..baa74387 100644
--- a/omero_gallery/apps.py
+++ b/idr_gallery/apps.py
@@ -3,7 +3,7 @@
#
#
#
-# Copyright (c) 2016 University of Dundee.
+# Copyright (c) 2016-2022 University of Dundee.
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
@@ -28,5 +28,5 @@
class GalleryAppConfig(AppConfig):
- name = "omero_gallery"
- label = "gallery"
+ name = "idr_gallery"
+ label = "idr_gallery"
diff --git a/idr_gallery/data/background_images.py b/idr_gallery/data/background_images.py
new file mode 100644
index 00000000..cbd84ed5
--- /dev/null
+++ b/idr_gallery/data/background_images.py
@@ -0,0 +1,120 @@
+
+IDR_IMAGES = [
+ {
+ "src": "webclient/render_image/13965767/294/0/",
+ "title": "idr0124 Esteban: Heart morphogenesis",
+ "image_id": 13965767,
+ "thumbnail": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8KCwkMEQ8SEhEPERATFhwXExQaFRARGCEYGhwdHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCABgAGADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD4yHJwKsxWrHBf5R15q9penNOrMFG1eXkY4VR7n+laNlqemabdOYrX7bIMGJ2UcN6YOeM/Wulwp0Y80/el/Knb73br5a97HRTo31k7Lv8A5Lr+QzS9Ea6ikfzra2WP7zTPjb9R2/Gp9/hmyJDvc37gYxG21c/Xj+tPZLrUbhIdQBALbk0+3IDEnqzH+E9+efpUkkMdgI0n0SCOMNlt4LO3tmqUsRVWj5VtZaeXTX5v7zvUIQXux+crv8Nl6Mr2+t6QZwr6ChiAwvzbmJ9/X0r0G1udOsbE3Nta2liyKFnhCAMpIHYHg+tcxpGk6XdXNpqVnE0MMEuZw+Cu0Andk8DtXK65qSzaxPNZ5EG87ATnPPWudXc3z9O/fz2OqliJYJKdSKlfbbtv/XmvT0S6nsrq5RgsTsSCRjOPb6f/AFq5/U9JsJbh5g4iRm4CqODn068+tYumau0CNzhm55Xp61ag1QzvM7TLEzZKkrnoOPp0FdcW0krN2XT/AIDv951wxWDrpKaV+1v+GN+9QCCaAWNqtvGgbZHGMjjk5xwR6nrmuS1eGyeMqkGy5DEvjt/9atHUdcYRItqw81/v87gDjGcViSM7uxYl26uxPJrqwlGEqcnPWCej6t/Pdvr0S+ZxZvVoVZKFLV/hbf8AryMyaJojzyvZh0NR10NtZG/LBuEjQb26Ac8fjWVq9hJp135EhzlQw4x1rDH4H6vJuGsfy0v/AF56a7njyw81T9rb3TSvNRtYrOSx02GTMwCyTO3LDPQL2zU9rY3OlXgiLQrdMgYzZDCBeuQfXHf8BWfpEbx7r3af3bBIzjjef8B/StSeOG2eKxuGkRnKtct12gdFFcUY8see+rOmEnNcz0fTol/X/BNaxvIbezFxCohcP+628GT1Zj1PfisjVbq4vSzyTl3Zj8vOF+ldFJpiNZqrPsDgeWF5GP8AZqC30GBQJJHeUg/MM4XPccfrXq4KWHpcyqN822ltL7vV779NvM3q4fETaitkciYbswmIzMEPJQNx+IpscMcLDeNzdSOvH9K7SexsgGQ2sagdVwMkUps4oLUwwxxwiRucdfzPtSlXwtGf7qm+bu3f8OVa+v3Gf1GcnaUl+JxasCAAoBx271BIxibK4xnkVdnVYru5QD5UkIHFUrkbzhRzn8MVvim5YOnWekvu/rY4EmpOI5J4lTO3k9QKt20wij3uOQcjiqKWxI5Jz9OKszNsjRXVcEbuBg/jSo1a0VzVlZJaaaX7tAot7HV6ZCILExgCRpcPIoGDkjoMe1Zfj63SOCxm37pHDISTk4XABP61Y0G/nLRm6kP2MHYDtHyntVHxyG8y3B2/ImDgEZJJ+b8a8+pGfvSd7vfbovx6u/kfT42pSllvuLsvT/hyqk9sbm3tomcQRMAGPUknlsVs6JYNrPjyCznwyvcFpd/9xfmOfwHSuWgGydQ+QDxnrXb+FVkk1rVZbEATLpckka5Clmwudp7nr0rnmv3V+qv/AJ6/1/wPKwa+sVEmuq08tf0R6XbeV4h027RbQW8cjulpeyopI2/KNo7jNcfoWh6jpun3FpqFo8EzO7BnU5IzjI9QcZGKteAoNTFoZ9Kvxd3VqUJtCchkZdxwcgrgn25FdjoGoW/iIvHqNn5N1Yv5Nxb7io8tj/rBnoeOBz0PqK87DVakajjO73ta19nff8Pw6H1ChDFqFSaalZ2ts+/lddtGeR+FrxU1K7F+8rhYS23cPn57g+nJx7Vau5I1jmuJXwg5XB9PT37VX+J6w6P4uSfSz5eU3AjHJyQTjtn0rLj1aS4tMbirvNudgAM9+vrmvpY0niMVGlGyu0rWel/013fr1Pn5VfqnNQqbwvr3/Ez543jlbzOXb94zDnGaaVVYWZzt2kYUjqPrVjyi9xh+N7YAAyevYe1blposUJSS4dJ5nPAz8o9h6/WvZzDkwcmnG0ldRi+i1XM+uu+urWuidjzqNCVb4durMK00++vctFEEjAzufv8AhUepWNxZAee6sr57eldnCCmBIiqR82DweOtc54t8yWUHCrGEIU568814ccVWrycpSb3dtlor7eh04jB0aFK6d2WPCl1FOYobjYqomEyOp/xrX8ZaULzQ5LmPbvhUyljxlR6/hjiuJ0a9mtXZF5ikK7hj0OR9K9SjWC88GX0ttcRSr9ncScnIbafX/PNc9OLlDe9/V+dvvvs9U32O/BVI4rCzoN62/Lt/SPK0VZEY54+nSui8D6vb6VrFtPeQLK0WQjMfuqykH+f51zSgh8jGQe/SrXL7lb5JAPT8eK9WjGjjk6Uo2qW2f2v+D2/q3h0K1TDTVWHRo9j+Hekvb67dahYwH+z7uMOhA+YHk7Mjtnn8qXxg8/hjUZbzR45jPegyzrIFmUDHG0E54JHqBnvXk1jqeo6fG9us0hhkHzqHbB+uD+orrtP8WeVp9tDeQxXVrG+VeT55kXup9sYw3tXizyyrg6yqSWkXs9LeT0fZd07dT6jCZphqlL2bTj1vfZ+Xlr6r8Tz3Wb671G/kubx2eVjznsKqxSvGTtPB6j1r1Dxb4b0bU9Lg1LRnEZmVnjHl7Ux1wW7Htk8djXmV1by28rRyKVIODkYwfQ+hrN1XOTqRevXuvu6draWttsfOYvC1aE7yd79e5fXWpY3DQ29vD+68tti/f5zk5zz71r2Pi9oYkR7KJpAxLSOS27PYj09hjPfNcqiMxwBk1raXot1c3Ee6CSRNw3KnUgnHXtXRTliK3M0r9W2lp5t9PvHQxNfn91/16f5HoNjc2erWQmj+WVFCshx8rH+IHHOf/rVk+LtJuZpImEZyP3brnBB989/Udq6/RPDraXpcri1MqqCx4GSQOgPQn0rP8PJrOrTTDXbOe2VWZjNPnkEn5QOpYcfgKqvj6NHE80LWad1u/K6euqu7b2a0uetXg5RVKtpNrp+H9fgY/hrwtazIYLtCjdWcngKBk4H4da6G9sV8P/D66S4K/vo3KbU5JbgAn6Ec+1dBDp9rG3kuzRzKu7L42567QOvTHrXN/F2/itPDK2EcrGSecFl3cFUHXA49B+JrP2zk0k3Z73XTutbeWlttdtOn2FLC4eU+XVJq78/z/wCCeVRgSZVyAp74pZHx8j5eJDlR2+tV0nDqBkRuOp7N/hVgOxCpL90j5ePevUjVw+PSjL3Z9z5hOUE+XVBDP1VwSo6E8kf41YgaRCstuWDbhjacZycf5FQBIuRvJzyQDU+cglTtAx06Yr3sJh6tSk6eJnGWmnV26t9Ha3XfRPTQy5uWV4o6rwf4kay1BbS+xFabWimiVMKSTwdvQHPXHBrS8b6PbWNrBfxwi4hHKtvBJXOcFT1A9OMc4rgEcOWVGO85+h+ld/4P19b3Q5dCvL2G0uo8SW00w3ISDna/r6fSvmcyy72fLjMK9+z+9euuqfqkfQ4HG/WL0Kz1W233dv63ucamlSSbrq3h2wtkqxwq9+OvHQjHtW74e1KTTjHdXMMs0Ij2qEYDAzzk9R046d6v2/hbU7ye5kMUdnAVUi5ivAYZAD0GOo9jjFdFGvg+w1FWvNXilkljSIwgtsDDjdhcgciscPm1KdGVOdFNPezS1+eifpp08i6GEcZc9+Xze2vqlf8A4O+mujpviDTb21hMLqXJISOTICN1IPb9aknvHlV/s8allJJcNhc9MYPJ4I/Oqsup+GbW2lhklgQxgZVowp9cgEjFVdQ1KztLIalK0MMMm3Db92V9P/re9c9avU524ycYrXXV7W6q2vdddXpt7Lxt42502uq/Hv8An+BOsjiYPlAEKhmUElieOnJ/CvMvibqK3WtTQo6SRwExIygc888jqM5rsb7xVb22lxzpDLa3EsbvGSmcLnC+wLcnnouK8kvpfMmPOcVlQ5lGpWqXu9Frpru/Oy0/7e+/wc1xjdNU1K99X+n+e3QiqWO4mjAUOSo/hPI/KoqKyPATa2NKK4juW8uT9wzfdKnCZ7ZB6VPFuUkN1GVxmscVeilM4B3KHUYIJxu7ce9exlWZPC11Kev6Fv8AeRae4uRHI3P3R8uPWpRNG0Shwwkzy2eP/wBdQlv4XX8xQRG24j5OOldlJ1KU5ToSThL7L/rcV9LNamrealO1qtvIy3kBAzvG1lx6N1qpE2mkcm7Df3QyjB9elUwpU8OOnIqaMQGYSy/MioXYdMnHT865MTQpNOoo8vdf5Neq3X+RqqsptX/r79Tu7Sx0y30f7WkQkdgm3c2XLenP68cVptBa3djbTX7Wy/YpjO3G5XPZQCThc4z615tAup3yK0SiC2RiQVOyNT3Oe5qzPqxtrX7Hbzb4RHhgV435yXHfPT8q8N0JVZaPRdey/wA/6XQ9KGMhBXcNLfeQeJtUF3dytCZNjOWBdyzMT1Y5+g+g4rCp0jl3JNNrepNSdlstF6HkVajqScmf/9k="
+ },
+ {
+ "light": True,
+ "src": "webgateway/render_image_region/13461816/0/0/?tile=3,2,4,1024,512",
+ "title": "idr0096 Tratwal: Marrowquant",
+ "image_id": 13461816,
+ },
+ {
+ "src": "webgateway/render_image_region/9846152/45/0/?tile=4,0,0,1024,512",
+ "title": "idr0048 Abdeladim: Chroms",
+ "image_id": 9846152,
+ },
+ {
+ "light": True,
+ "src": "webgateway/render_image_region/13383922/0/0/?region=412,1224,1536,1024",
+ "title": "idr0043 Uhlen: Human Protein Atlas",
+ "image_id": 13383922,
+ },
+ {
+ "src": "webclient/render_image/4990991/0/0/?c=1|144:2250$0000FF,-2|972:2528$FFFFFF,3|126:3456$FF0000,4|131:2749$00FF00",
+ "title": "idr0050 Springer: Cyto-skeletal systems",
+ "image_id": 4990991,
+ },
+ {
+ "src": "webgateway/render_image/9846154/268/0/?region=1024,0,2048,1024&c=1|4283:12901$FF00FF,2|1278:8356$FFFF00",
+ "title": "idr0085 Walsh: MF-HREM",
+ "image_id": 9846154,
+ },
+ {
+ "src": "webclient/render_image/9753804/0/0/",
+ "title": "idr0056 Stojic: Long noncoding RNA",
+ "image_id": 9753804,
+ },
+ {
+ "src": "webgateway/render_image/9836841/0/0/",
+ "title": "idr0077 Valuchova: Flower lightsheet",
+ "image_id": 9836841,
+ },
+]
+
+CELL_IMAGES = [
+ {
+ "src": "webgateway/render_image/13417268/34/0/?c=1|5000:13880$FF0000,2|10353:50528$00FF00,3|14416:36737$0000FF",
+ "title": "idr0107 Morgan: HEI10",
+ "image_id": 13417268,
+ },
+ {
+ "src": "webgateway/render_image/12570400/0/0/?c=1|91:1391$fire.lut",
+ "title": "idr0093 Mueller: Genome-wide siRNA screen",
+ "image_id": 12570400,
+ },
+ {
+ "src": "webclient/render_image/4991918/0/0/?c=1|28:178$00FF00,3|22:110$FF0000",
+ "title": "idr0050 Springer: Cyto-skeletal systems",
+ "image_id": 4991918,
+ },
+ {
+ "light": True,
+ "src": "webgateway/render_image/9846137/92/0/?c=1|85:153$hilo.lut&m=c",
+ "title": "idr0086 Miron: Chromatin micrographs",
+ "image_id": 9846137,
+ },
+ {
+ "src": "webgateway/render_image/3005394/0/0/",
+ "title": "idr0028 Pascual-Vargas: Rho GTPases",
+ "image_id": 3005394,
+ },
+ {
+ "src": "webclient/render_image/9753804/0/0/",
+ "title": "idr0056 Stojic: Long noncoding RNA",
+ "image_id": 9753804,
+ },
+ {
+ "src": "webclient/render_image/3231645/0/0/?c=1|464:8509$FF0000,2|518:21105$00FF00,3|519:19845$0000FF",
+ "title": "idr0033 Rohban: Cell painting",
+ "image_id": 3231645,
+ },
+]
+
+TISSUE_IMAGES = [
+ {
+ "light": True,
+ "src": "webgateway/render_image_region/13461816/0/0/?tile=3,2,4,1024,512",
+ "title": "idr0096 Tratwal: Marrowquant",
+ "image_id": 13461816,
+ },
+ {
+ "src": "webgateway/render_image_region/8343616/0/0/?region=2048,6072,2024,1024&c=1|0:105$red_hot.lut&m=c",
+ "title": "idr0066 Voigt: Meso SPIM",
+ "image_id": 8343616,
+ },
+ {
+ "src": "webgateway/render_image_region/9846152/45/0/?tile=4,0,0,1024,512",
+ "title": "idr0048 Abdeladim: Chroms",
+ "image_id": 9846152,
+ },
+ {
+ "light": True,
+ "src": "webgateway/render_image_region/13383922/0/0/?region=412,1224,1536,1024",
+ "title": "idr0043 Uhlen: Human Protein Atlas",
+ "image_id": 13383922,
+ },
+ {
+ "src": "webgateway/render_image/9846154/268/0/?region=1024,0,2048,1024&c=1|4283:12901$FF00FF,2|1278:8356$FFFF00",
+ "title": "idr0085 Walsh: MF-HREM",
+ "image_id": 9846154,
+ },
+ {
+ "src": "webgateway/render_image/9836841/0/0/",
+ "title": "idr0077 Valuchova: Flower lightsheet",
+ "image_id": 9836841,
+ }
+]
diff --git a/idr_gallery/data/tabs.py b/idr_gallery/data/tabs.py
new file mode 100644
index 00000000..5535b8f0
--- /dev/null
+++ b/idr_gallery/data/tabs.py
@@ -0,0 +1,34 @@
+TABS = [
+ {
+ "title": "Exploring IDR",
+ "text": "",
+ "videos": [
+ {
+ "id": "N9Den172mHo",
+ "title": "From publication to IDR",
+ "text": "Find a specific IDR study from a publication. View images and Regions of Interest (ROIs) in IDR. Explore study metadata.",
+ },
+ {
+ "id": "gjVZut7fL4E",
+ "title": "From gene to phenotypes",
+ "text": "Query images by gene. Explore retrieved images and metadata, including associated phenotypes. View images in context of a plate.",
+ },
+ {
+ "id": "rG-qAHZl-p0",
+ "title": "From compound to analytics",
+ "text": "Query images by compound. Find SARS-CoV-2 dataset. Explore images in relation to analytical data submitted by authors.",
+ },
+ ],
+ },
+ {
+ "title": "Analyze Data",
+ "text": "
The IDR server is built with OMERO , allowing access to all image data and metadata via an open API in Python, R, Java, MATLAB and REST/JSON. See the OMERO API guide for more information.
For examples of analysis tools working with OMERO to access and analyze data, see the analysis tools guide .
",
+ "videos": [
+ {
+ "id": "2qeJbudXnp4",
+ "title": "Compound analysis: SARS-CoV-2",
+ "text": "Build analysis environment. Access metadata and images. Calculate IC50 and download. Explore dose-response curves.",
+ }
+ ],
+ },
+]
diff --git a/omero_gallery/gallery_settings.py b/idr_gallery/gallery_settings.py
similarity index 54%
rename from omero_gallery/gallery_settings.py
rename to idr_gallery/gallery_settings.py
index 4c79a614..67992f96 100644
--- a/omero_gallery/gallery_settings.py
+++ b/idr_gallery/gallery_settings.py
@@ -31,14 +31,24 @@
["BASE_URL",
None,
str_slash,
- ("Base URL to use for JSON AJAX requests."
- " e.g. 'https://demo.openmicroscopy.org'."
+ ("Base URL to use for non-gallery JSON AJAX requests."
+ " e.g. 'https://idr.openmicroscopy.org/'."
" This allows data to be loaded from another OMERO server."
" The default behaviour is to use the current server.")],
+ "omero.web.gallery.gallery_index":
+ ["GALLERY_INDEX",
+ None,
+ str_slash,
+ ("Base gallery URL to use for gallery JSON AJAX requests."
+ " e.g. 'https://idr.openmicroscopy.org/' is gallery index on IDR."
+ " This allows data to be loaded from another OMERO server, e.g. run"
+ " locally or on test server, but load data from IDR."
+ " Default behaviour is to use current server idr_gallery_index")],
+
"omero.web.gallery.category_queries":
["CATEGORY_QUERIES",
- ('{}'),
+ ('{"others":{ "label": "Others", "query": "LAST200:date", "index": 10 },"lightsheet":{"label":"Light-sheet imaging","index":0,"query":"Imaging Method:light sheet fluorescence microscopy OR Imaging Method:light sheet fluorescence microscopy, SPIM"},"infection":{"label":"Infection studies","index":1,"query":"Study Type:infection"},"timelapse":{"label":"Time-lapse imaging","index":2,"query":"Study Type:time OR Study Type:5D OR Study Type:3D-tracking"},"lightsheet":{"label":"Light sheet fluorescence microscopy","index":3,"query":"Imaging Method: light sheet fluorescence microscopy OR Imaging Method: light sheet fluorescence microscopy, SPIM"},"proteinlocalization":{"label":"Protein localization studies","index":4,"query":"Study Type:protein localization"},"histology":{"label":"Digital pathology imaging","index":5,"query":"Study Type:histology"},"yeast":{"label":"Yeast studies","index":6,"query":"Organism: Saccharomyces cerevisiae OR Organism:Schizosaccharomyces pombe"},"humancellscreen":{"label":"High-content screening (human)","index":7,"query":"Organism:Homo sapiens AND Study Type:high content screen"}}'),
json.loads,
("If this is configured then the gallery Home Page shows a list"
" of categories containing Projects and Screens that match the"
@@ -51,7 +61,7 @@
"omero.web.gallery.filter_keys":
["FILTER_KEYS",
- ('[]'),
+ ('[{"label": "Name (IDR number)", "value": "Name" }, "Imaging Method", "License", "Organism", "Publication Authors", "Publication Title", "Screen Technology Type", "Screen Type", "Study Type"]'),
json.loads,
("If this is configured then we allow filtering of Screens and"
" Projects by Key:Value pairs linked to them. This list allows us"
@@ -60,7 +70,7 @@
"omero.web.gallery.filter_mapr_keys":
["FILTER_MAPR_KEYS",
- ('[]'),
+ ('["antibody","cellline","compound","gene","phenotype","sirna"]'),
json.loads,
("If this is configured then we allow filtering of Screens and"
" Projects by OMERO.mapr. This is a list of mapr_config IDs, such"
@@ -78,7 +88,7 @@
"omero.web.gallery.super_categories":
["SUPER_CATEGORIES",
- ('{}'),
+ ('{"cell": {"label": "Cell - IDR","title": "Welcome to Cell-IDR","query": "Sample Type:cell"},"tissue": {"label": "Tissue - IDR","title": "Welcome to Tissue-IDR","query": "Sample Type:tissue"}}'),
json.loads,
("Optional config to provide top-level categories, similar to"
" category_queries, using the same config format and 'query' syntax."
@@ -87,16 +97,12 @@
" can be used for page title, otherwise the 'label' is used.")],
"omero.web.gallery.title":
- ["GALLERY_TITLE", "OMERO.gallery", str,
+ ["GALLERY_TITLE", "IDR: Image Data Resource", str,
"Page for gallery, shown when category_queries is set."],
- "omero.web.gallery.heading":
- ["GALLERY_HEADING", "Welcome to OMERO.gallery", str,
- "Main heading on the home page shown when category_queries is set."],
-
"omero.web.gallery.top_right_links":
["TOP_RIGHT_LINKS",
- ('[]'),
+ ('[{"text":"About","href":"https://idr.openmicroscopy.org/about/index.html","submenu":[{"text":"Overview","href":"https://idr.openmicroscopy.org/about/index.html"},{"text":"Published studies","href":"https://idr.openmicroscopy.org/about/studies.html"},{"text":"Linked resources","href":"https://idr.openmicroscopy.org/about/linked-resources.html"},{"text":"API Access","href":"https://idr.openmicroscopy.org/about/api.html"},{"text":"Data download","href":"https://idr.openmicroscopy.org/about/download.html"},{"text":"Image Tools Resource (ITR)","href":"https://idr.openmicroscopy.org/about/itr.html"},{"text":"Analysis Environments","href":"https://idr.openmicroscopy.org/about/analysis-environments.html"},{"text":"Deployment","href":"https://idr.openmicroscopy.org/about/deployment.html"},{"text":"FAQ","href":"https://idr.openmicroscopy.org/about/faq/"}]},{"text":"Submissions","href":"https://idr.openmicroscopy.org/about/submission.html","submenu":[{"text":"Overview","href":"https://idr.openmicroscopy.org/about/submission.html"},{"text":"Screens","href":"https://idr.openmicroscopy.org/about/screens.html"},{"text":"Experiments","href":"https://idr.openmicroscopy.org/about/experiments.html"}]}]'),
json.loads,
("List of {'text':'Text','href':'www.url'} links for top-right of"
" page. If a link contains 'submenu':[ ] with more links,"
@@ -104,38 +110,25 @@
"omero.web.gallery.top_left_logo":
["TOP_LEFT_LOGO",
- ('{}'),
+ ('{"src": "https://idr.openmicroscopy.org/about/img/logos/logo-idr.svg","href": "/"}'),
json.loads,
("Logo image and link. e.g."
" {'src':'url.png','href':'www.url', 'alt':'Image alt text'}"
" href can be URL name for reverse(url_name). If href is omitted,"
- " it will default to 'webgallery_index'")],
-
- "omero.web.gallery.footer_html":
- ["FOOTER_HTML",
- (''),
- str,
- ("HTML to go in the footer. If this is set to 'IDR' then"
- " we show the footer for the IDR site.")],
-
- "omero.web.gallery.subheading_html":
- ["SUBHEADING_HTML",
- (''),
- str,
- ("HTML to show as a sub-heading, within a <p> tag.")],
+ " it will default to 'idr_gallery_index'")],
"omero.web.gallery.favicon":
["FAVICON",
- (''),
+ ("https://idr.openmicroscopy.org/about/img/logos/favicon-idr.ico"),
str,
("URL to favicon.")],
"omero.web.gallery.study_short_name":
["STUDY_SHORT_NAME",
- ('[]'),
+ ('[{"key": "Name", "regex": "^(.*?)-.*?(.)$", "template": "$1$2"}]'),
json.loads,
("Gets a short name for Screen or Project to show above the"
- " study Image in the categories or search page, instead of"
+ " study Image in the search page, instead of"
" the default 'Project: 123'. The list allows us"
" to try multiple methods, using the first that works. Each object"
" in the list has e.g. {'key': 'Name'}. The 'key' can be Name,"
@@ -143,6 +136,13 @@
" If a 'regex' and 'template' are specified, we try"
" name.replace(regex, template).")],
+ "omero.web.gallery.idr_studies_url":
+ ["IDR_STUDIES_URL",
+ 'https://raw.githubusercontent.com/IDR/idr.openmicroscopy.org/master/_data/studies.tsv',
+ str,
+ "URL to IDR studies as a tsv table"
+ ],
+
}
process_custom_settings(sys.modules[__name__], 'GALLERY_SETTINGS_MAPPING')
diff --git a/omero_gallery/settings.py b/idr_gallery/settings.py
similarity index 69%
rename from omero_gallery/settings.py
rename to idr_gallery/settings.py
index 906117eb..fd9adf15 100644
--- a/omero_gallery/settings.py
+++ b/idr_gallery/settings.py
@@ -5,5 +5,5 @@
# We can directly manipulate the settings
# E.g. link to the 'top links' in webclient page header
-# 'webgallery_index' is name in urls.py
-# settings.TOP_LINKS.append(["Gallery", "webgallery_index"])
+# 'idr_gallery_index' is name in urls.py
+# settings.TOP_LINKS.append(["Gallery", "idr_gallery_index"])
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.css b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.css
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.css
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.css
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.css.map b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.css.map
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.css.map
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.css.map
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.min.css b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.min.css
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.min.css
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap-theme.min.css
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.css b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.css
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.css
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.css
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.css.map b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.css.map
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.css.map
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.css.map
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.min.css b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.min.css
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.min.css
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/css/bootstrap.min.css
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.eot b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.eot
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.eot
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.eot
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.svg b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.svg
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.svg
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.svg
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.ttf b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.ttf
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.ttf
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.ttf
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.woff b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.woff
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.woff
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/fonts/glyphicons-halflings-regular.woff
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/js/bootstrap.js b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/js/bootstrap.js
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/js/bootstrap.js
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/js/bootstrap.js
diff --git a/omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/js/bootstrap.min.js b/idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/js/bootstrap.min.js
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/bootstrap-3.1.1/js/bootstrap.min.js
rename to idr_gallery/static/idr_gallery/3rdparty/bootstrap-3.1.1/js/bootstrap.min.js
diff --git a/omero_gallery/static/gallery/3rdparty/foundation/foundation.min.css b/idr_gallery/static/idr_gallery/3rdparty/foundation/foundation.min.css
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/foundation/foundation.min.css
rename to idr_gallery/static/idr_gallery/3rdparty/foundation/foundation.min.css
diff --git a/omero_gallery/static/gallery/3rdparty/foundation/foundation.min.js b/idr_gallery/static/idr_gallery/3rdparty/foundation/foundation.min.js
similarity index 100%
rename from omero_gallery/static/gallery/3rdparty/foundation/foundation.min.js
rename to idr_gallery/static/idr_gallery/3rdparty/foundation/foundation.min.js
diff --git a/idr_gallery/static/idr_gallery/autocomplete.js b/idr_gallery/static/idr_gallery/autocomplete.js
new file mode 100644
index 00000000..999342eb
--- /dev/null
+++ b/idr_gallery/static/idr_gallery/autocomplete.js
@@ -0,0 +1,153 @@
+
+// ------ AUTO-COMPLETE -------------------
+
+document.getElementById('maprConfig').onchange = (event) => {
+ document.getElementById('maprQuery').value = '';
+ let value = event.target.value.replace('mapr_', '');
+ let placeholder = `Type to filter values...`;
+ if (mapr_settings[value]) {
+ placeholder = `Type ${mapr_settings[value]['default'][0]}...`;
+ }
+ document.getElementById('maprQuery').placeholder = placeholder;
+ // Show all autocomplete options...
+ $("#maprQuery").focus();
+
+ // render();
+}
+
+function showAutocomplete(event) {
+ var configId = document.getElementById("maprConfig").value;
+ var autoCompleteValue = event.target.value;
+
+ if (configId.indexOf('mapr_') != 0) {
+ // If not MAPR search, show all auto-complete results
+ autoCompleteValue = '';
+ }
+
+ $("#maprQuery").autocomplete("search", autoCompleteValue);
+}
+
+document.getElementById('maprQuery').onfocus = function (event) {
+ showAutocomplete(event);
+};
+
+document.getElementById('maprQuery').onclick = function (event) {
+ showAutocomplete(event);
+};
+
+function showSpinner() {
+ document.getElementById('spinner').style.visibility = 'visible';
+}
+function hideSpinner() {
+ document.getElementById('spinner').style.visibility = 'hidden';
+}
+
+// Initial setup...
+$("#maprQuery")
+ .keyup(event => {
+ if (event.which == 13) {
+ let configId = document.getElementById("maprConfig").value;
+ console.log(`${GALLERY_HOME}search/?query=${configId}:${event.target.value}`)
+ // document.location.href = `${GALLERY_HOME}search/?query=${configId}:${event.target.value}`;
+ }
+ })
+ .autocomplete({
+ autoFocus: false,
+ delay: 1000,
+ source: function (request, response) {
+
+ // if configId is not from mapr, we filter on mapValues...
+ let configId = document.getElementById("maprConfig").value;
+ if (configId.indexOf('mapr_') != 0) {
+
+ let matches;
+ if (configId === 'Name') {
+ matches = model.getStudiesNames(request.term);
+ } else if (configId === 'Group') {
+ matches = model.getStudiesGroups(request.term);
+ } else {
+ matches = model.getKeyValueAutoComplete(configId, request.term);
+ }
+ response(matches);
+ return;
+ }
+
+ // Don't handle empty query for mapr
+ if (request.term.length == 0) {
+ return;
+ }
+
+ // Auto-complete to filter by mapr...
+ configId = configId.replace('mapr_', '');
+ let case_sensitive = false;
+
+ let requestData = {
+ case_sensitive: case_sensitive,
+ }
+ let url;
+ if (request.term.length === 0) {
+ // Try to list all top-level values.
+ // This works for 'wild-card' configs where number of values is small e.g. Organism
+ // But will return empty list for e.g. Gene
+ url = `${BASE_URL}mapr/api/${configId}/`;
+ requestData.orphaned = true
+ } else {
+ // Find auto-complete matches
+ url = `${BASE_URL}mapr/api/autocomplete/${configId}/`;
+ requestData.value = case_sensitive ? request.term : request.term.toLowerCase();
+ requestData.query = true; // use a 'like' HQL query
+ }
+ showSpinner();
+ $.ajax({
+ dataType: "json",
+ type: 'GET',
+ url: url,
+ data: requestData,
+ success: function (data) {
+ hideSpinner();
+ if (request.term.length === 0) {
+ // Top-level terms in 'maps'
+ if (data.maps && data.maps.length > 0) {
+ let terms = data.maps.map(m => m.id);
+ terms.sort();
+ response(terms);
+ }
+ }
+ else if (data.length > 0) {
+ response($.map(data, function (item) {
+ return item;
+ }));
+ } else {
+ response([{ label: 'No results found.', value: -1 }]);
+ }
+ },
+ error: function (data) {
+ hideSpinner();
+ response([{ label: 'Loading auto-complete terms failed. Server may be busy.', value: -1 }]);
+ }
+ });
+ },
+ minLength: 0,
+ open: function () { },
+ close: function () {
+ // $(this).val('');
+ return false;
+ },
+ focus: function (event, ui) { },
+ select: function (event, ui) {
+ if (ui.item.value == -1) {
+ // Ignore 'No results found'
+ return false;
+ }
+ // show temp message in case loading search page is slow
+ $(this).val("loading search results...");
+ // Load search page...
+ let configId = document.getElementById("maprConfig").value;
+ document.location.href = `${GALLERY_HOME}search/?query=${configId}:${ui.item.value}`;
+ return false;
+ }
+ }).data("ui-autocomplete")._renderItem = function (ul, item) {
+ return $("<li>")
+ .append("<a>" + item.label + "</a>")
+ .appendTo(ul);
+ }
diff --git a/idr_gallery/static/idr_gallery/categories.js b/idr_gallery/static/idr_gallery/categories.js
new file mode 100644
index 00000000..52fbc1d3
--- /dev/null
+++ b/idr_gallery/static/idr_gallery/categories.js
@@ -0,0 +1,319 @@
+// Copyright (C) 2019-2022 University of Dundee & Open Microscopy Environment.
+// All rights reserved.
+
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+// NB: SOURCE FILES are under /src. Compiled files are under /static/
+
+// loaded below
+let mapr_settings = {};
+
+// Model for loading Projects, Screens and their Map Annotations
+let model = new StudiesModel();
+
+model.subscribe('thumbnails', (event, data) => {
+ // Will get called when each batch of thumbnails is loaded
+ renderThumbnails(data);
+});
+
+
+let getTooltipContent = (reference) => {
+ return reference.querySelector(".idr_tooltip").innerHTML;
+}
+
+function renderStudyContainers(containers) {
+ return ['screen', 'project'].map(objType => {
+ let studies = containers[objType];
+ let count = studies.length;
+ if (count == 0) return;
+ // Link to first Project or Screen
+ return `<a target="_blank" href="${BASE_URL}webclient/?show=${studies[studies.length - 1].objId}">${count} ${objType == 'project' ? 'Experiment' : 'Screen'}${count === 1 ? '' : 's'}</a>`;
+ }).filter(Boolean).join(", ");
+}
+
+function studyHtml(study, studyObj) {
+ let idrId = study.Name.split("-")[0];
+ let authors = model.getStudyValue(study, "Publication Authors") || " ";
+ authors = authors.split(",")[0];
+ let title = escapeHTML(getStudyTitle(model, study));
+ let pubmed = studyObj["pubmed_id"];
+ return `
+ <div class="studyThumb" style="${study.thumbnail ? 'background-image: url(' + study.thumbnail + ')' : ''}" data-authors="${authors}" data-title="${title}" data-idrid="${idrId}" data-obj_type="${study.type}" data-obj_id="${study.id}">
+ <div class="idr_tooltip">
+ <div style="float: right">
+ ${pubmed ? `<a target="_blank" href="${pubmed}"> ${authors} et. al </a>` : `<b> ${authors} et. al </b>`}
+ </div>
+ <div style="margin-bottom:5px">${idrId}</div>
+ <div style="width: 300px; display:flex">
+ <div style="width:96px; position: relative" title="Open image viewer">
+ <a class="viewer_link" target="_blank" href="${ BASE_URL }webclient/img_detail/${ study.image?.id }/">
+ <img class="tooltipThumb" src="${study.thumbnail ? study.thumbnail : ''}"></img>
+ <i class="fas fa-eye"></i>
+ </a>
+ </div>
+ <div style="width:204px; margin-left: 7px">
+ <div style="float: left">${renderStudyContainers(studyObj)}</div>
+ <div style="float: right; font-weight: bold">${imageCount(idrId)}</div>
+ <div style="clear: both"></div>
+ <span title="${studyObj["description"]}">
+ ${title}
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ `}
+
+
+// ------------ Render -------------------------
+
+function render() {
+
+ const groupByType = document.getElementById("groupByType").checked;
+ document.getElementById('studies').innerHTML = "";
+
+ // we group by 'idr00ID' and show Screens and Experiments
+ let studyContainers = {};
+ // go through all Screens and Experiments...
+ model.studies.forEach(study => {
+ let idrId = study.Name.split("-")[0];
+ if (!studyContainers[idrId]) {
+ // data for each study:
+ studyContainers[idrId] = {
+ 'screen': [], 'project': [],
+ 'description': "",
+ 'pubmed_id': ""
+ }
+ }
+ let objType = study.objId.split("-")[0]; // 'screen' or 'project'
+ studyContainers[idrId][objType].push(study);
+ studyContainers[idrId]["description"] = model.getStudyDescription(study);
+ let pubmed = model.getStudyValue(study, 'PubMed ID');
+ if (pubmed) {
+ studyContainers[idrId]["pubmed_id"] = pubmed.split(" ")[1];
+ }
+ });
+
+
+ let idrIds = [];
+
+ let html = "";
+ if (!groupByType) {
+ // Show all studies...
+ html = model.studies.map(study => {
+ let idrId = study.Name.split("-")[0];
+ // Ignore multiple projects/screens from same study/publication
+ if (idrIds.includes(idrId)) {
+ return '';
+ }
+ idrIds.push(idrId);
+ return studyHtml(study, studyContainers[idrId]);
+ }).join("");
+ } else {
+ // group by Categories
+ let categories = Object.keys(CATEGORY_QUERIES);
+ // Sort by index
+ categories.sort(function (a, b) {
+ let idxA = CATEGORY_QUERIES[a].index;
+ let idxB = CATEGORY_QUERIES[b].index;
+ return (idxA > idxB ? 1 : idxA < idxB ? -1 : 0);
+ });
+
+ let allIds = [];
+
+ html = categories.map(category => {
+
+ let cat = CATEGORY_QUERIES[category];
+ let query = cat.query;
+
+ // Find matching studies
+ let matches = model.filterStudiesByMapQuery(query);
+ if (matches.length == 0) return '';
+
+ let catIds = [];
+
+ let catThumbs = matches.map(study => {
+ let idrId = study.Name.split("-")[0];
+ // Ignore multiple projects/screens from same study/publication
+ if (cat.label !== "Others" && catIds.includes(idrId)) {
+ return '';
+ }
+ if (cat.label === "Others" && allIds.includes(idrId)) {
+ return '';
+ }
+ catIds.push(idrId);
+ allIds.push(idrId);
+ return studyHtml(study, studyContainers[idrId]);
+ }).join("");
+
+ return `
+ <div style="clear:left">
+ <div style="color:#666">${cat.label}</div>
+ <div>
+ ${catThumbs}
+ </div>
+ </div>`
+ }).join("");
+ }
+
+ document.getElementById('studies').innerHTML = html;
+
+ // tooltips - NB: updated when thumbnails loaded
+ tippy('.studyThumb', {
+ content: getTooltipContent,
+ trigger: 'mouseenter click', // click to show - eg. on mobile
+ theme: 'light-border',
+ offset: [0, 2],
+ allowHTML: true,
+ moveTransition: 'transform 2s ease-out',
+ interactive: true, // allow click
+ });
+}
+
+
+// --------- Render utils -----------
+
+function imageCount(idrId) {
+ if (!model.studyStats) return "";
+
+ let containers = model.studyStats[idrId];
+ if (!containers) return "";
+
+ let imgCount = containers.map(row => row["5D Images"])
+ .reduce((total, value) => total + parseInt(value, 10), 0);
+ return new Intl.NumberFormat().format(imgCount) + " Image" + (imgCount != "1" ? "s" : "");
+}
+
+function renderThumbnails(data) {
+ // data is {'project-1': {'image':{'id': 2}, 'thumbnail': 'data:image/jpeg;base64,/9j/4AAQSkZ...'}}
+ for (let id in data) {
+ let obj_type = id.split('-')[0];
+ let obj_id = id.split('-')[1];
+ let elements = document.querySelectorAll(`div[data-obj_type="${obj_type}"][data-obj_id="${obj_id}"]`);
+ // This updates small grid thumbnails and the tooltip images
+ for (let e = 0; e < elements.length; e++) {
+ // Find all studies matching the study ID and set src on image
+ let element = elements[e];
+ element.style.backgroundImage = `url(${data[id].thumbnail})`;
+ // tooltip content is child of this element
+ let thumb = element.querySelector(".tooltipThumb");
+ if (thumb) {
+ thumb.src = data[id].thumbnail;
+ }
+ // add viewer-link for tooltip
+ let link = element.querySelector(".viewer_link");
+ if (link) {
+ let url = `${BASE_URL}webclient/img_detail/${data[id].image.id}/`;
+ link.href = url;
+ }
+ // update tooltips
+ if (element._tippy) {
+ element._tippy.setContent(getTooltipContent(element));
+ }
+ }
+ }
+}
+
+
+
+// ----------- Load / Filter Studies --------------------
+
+model.loadStudyStats(IDR_STUDIES_URL, function (stats) {
+ // Load stats and show spinning counters...
+
+ // In case studies.tsv loading from github fails, show older values
+ let totalImages = 12840301;
+ let tbTotal = 307;
+ let studyCount = 104;
+
+ if (stats) {
+ let studyIds = Object.keys(stats);
+ // remove grouping of containers by idrId
+ let containers = Object.values(stats).flatMap(containers => containers);
+
+ if (SUPER_CATEGORY) {
+ try {
+ // filter studies and containers by cell or tissue
+ let query = SUPER_CATEGORY.query.split(":"); // e.g. "Sample Type:tissue"
+ studyIds = studyIds.filter(studyId => stats[studyId].some(row => row[query[0]] == query[1]));
+ let filtered = containers.filter(row => row[query[0]] == query[1]);
+ if (filtered.length != 0) {
+ // in case we filter out everything!
+ containers = filtered;
+ }
+ } catch (error) {
+ console.log("Failed to filter studies stats by category")
+ }
+ }
+ let imageCounts = containers.map(row => row["5D Images"]);
+ totalImages = imageCounts.reduce((total, value) => total + parseInt(value, 10), 0);
+ let tbCounts = containers.map(row => row["Size (TB)"]);
+ tbTotal = tbCounts.reduce((total, value) => total + parseFloat(value, 10), 0);
+ studyCount = studyIds.length;
+ }
+
+ animateValue(document.getElementById("imageCount"), 0, totalImages, 1500);
+ animateValue(document.getElementById("tbCount"), 0, tbTotal, 1500);
+ animateValue(document.getElementById("studyCount"), 0, studyCount, 1500);
+});
+
+
+async function init() {
+
+ // Do the loading and render() when done...
+ await model.loadStudies();
+
+ // Immediately filter by Super category
+ if (SUPER_CATEGORY && SUPER_CATEGORY.query) {
+ model.studies = model.filterStudiesByMapQuery(SUPER_CATEGORY.query);
+ }
+
+ // start loading thumbnails in batches... triggers render() when loaded
+ model.loadStudiesThumbnails();
+
+ render();
+
+ document.getElementById("groupByType").addEventListener("change", function (event) {
+ render();
+ })
+
+
+ // Load MAPR config
+ fetch(BASE_URL + 'mapr/api/config/')
+ .then(response => response.json())
+ .then(data => {
+ mapr_settings = data;
+
+ let options = FILTER_MAPR_KEYS.map(key => {
+ let config = mapr_settings[key];
+ if (config) {
+ return `<option value="mapr_${key}">${config.label}</option>`;
+ } else {
+ return "";
+ }
+ });
+ if (options.length > 0) {
+ document.getElementById('maprKeys').innerHTML = options.join("\n");
+ // Show the <optgroup> and the whole form
+ document.getElementById('maprKeys').style.display = 'block';
+ document.getElementById('search-form').style.display = 'block';
+ }
+ })
+ .catch(function (err) {
+ console.log("mapr not installed (config not available)");
+ });
+
+}
+
+init();
diff --git a/omero_gallery/static/gallery/css/idr.css b/idr_gallery/static/idr_gallery/css/idr.css
similarity index 100%
rename from omero_gallery/static/gallery/css/idr.css
rename to idr_gallery/static/idr_gallery/css/idr.css
diff --git a/omero_gallery/static/gallery/css/openmicroscopy.css b/idr_gallery/static/idr_gallery/css/openmicroscopy.css
similarity index 100%
rename from omero_gallery/static/gallery/css/openmicroscopy.css
rename to idr_gallery/static/idr_gallery/css/openmicroscopy.css
diff --git a/omero_gallery/static/gallery/images/favicon.ico b/idr_gallery/static/idr_gallery/images/favicon.ico
similarity index 100%
rename from omero_gallery/static/gallery/images/favicon.ico
rename to idr_gallery/static/idr_gallery/images/favicon.ico
diff --git a/idr_gallery/static/idr_gallery/images/logo-idr-dark.svg b/idr_gallery/static/idr_gallery/images/logo-idr-dark.svg
new file mode 100644
index 00000000..f329dff5
--- /dev/null
+++ b/idr_gallery/static/idr_gallery/images/logo-idr-dark.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 288.5 112" style="enable-background:new 0 0 288.5 112;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#303030;}
+</style>
+<g id="text">
+ <g>
+ <path class="st0" d="M124.4,78.4V22c0-2.9,0.7-5.1,2-6.6s3.1-2.2,5.2-2.2c2.2,0,3.9,0.7,5.3,2.2c1.4,1.4,2.5,3.7,2.5,6.6v56.4
+ c0,3-1.1,5-2.5,6.4c-1.4,1.5-3.1,2.2-5.3,2.2c-2.1,0-3.8-0.7-5.2-2.2C125,83.3,124.4,81.3,124.4,78.4z"/>
+ <path class="st0" d="M164.1,14H183c4.9,0,9.1,0.9,12.6,1.8s6.7,2.6,9.6,5.1c7.5,6.4,11.2,16.1,11.2,29.1c0,4.3-0.4,8.2-1.1,11.8
+ c-0.7,3.5-1.9,6.7-3.5,9.6s-3.6,5.4-6,7.6c-1.9,1.7-4,3.1-6.3,4.2c-2.3,1-4.7,1.8-7.3,2.2c-2.6,0.4-5.6,0.6-8.9,0.6h-18.9
+ c-2.6,0-4.6-0.4-6-1.2c-1.3-0.8-2.1-1.9-2.5-3.4c-0.4-1.4-0.6-3.3-0.6-5.6V23.3c0-3.1,0.6-5.4,2-6.8S160.9,14,164.1,14z
+ M169.3,25.9v48.3h11.4c2.4,0,4.3-0.1,5.7-0.2s2.8-0.2,4.2-0.7c1.5-0.5,2.7-1.3,3.8-2.2c4.9-4.1,7.3-11.2,7.3-21.2
+ c0-7.1-1.1-12.4-3.2-15.9s-4.8-5.8-7.9-6.7c-3.1-1-6.9-1.4-11.3-1.4L169.3,25.9L169.3,25.9z"/>
+ <path class="st0" d="M248.6,56h-4.3v22.4c0,3-1.5,5.3-2.8,6.7s-3.1,2.1-5.2,2.1c-2.3,0-4.1-0.7-5.4-2.2s-2.6-3.7-2.6-6.6V23.3
+ c0-3.1,1.4-5.4,2.8-6.8s3.7-2.5,6.8-2.5h23.6c3.3,0,6,0.1,8.3,0.4s4.4,1.3,6.2,2.1c2.2,0.9,4.2,2.3,6,4.1c1.7,1.8,3,3.8,3.9,6.1
+ s1.3,4.8,1.3,7.4c0,5.3-1.5,9.6-4.5,12.8s-7.6,5.5-13.7,6.8c2.6,1.4,5,3.4,7.4,6.1c2.3,2.7,4.4,5.5,6.3,8.5c1.8,3,3.3,5.7,4.3,8.2
+ s1.5,4.1,1.5,5s-0.3,1.9-0.9,2.8s-1.4,1.7-2.5,2.2c-1,0.5-2.2,0.8-3.6,0.8c-1.6,0-3-0.4-4.1-1.1c-1.1-0.8-2.1-1.7-2.9-2.9
+ s-1.9-2.9-3.2-5.2l-5.8-9.7c-2.1-3.5-3.9-6.2-5.6-8.1c-1.6-1.9-3.3-2.5-5-3.2C253.3,56.3,251.2,56,248.6,56z M256.9,26h-12.6v19
+ h12.2c3.5,0,6.4-0.3,8.8-0.9c2.4-0.6,4.2-1.6,5.4-3.1c1.3-1.4,1.9-3.4,1.9-6c0-2-0.5-3.7-1.5-5.2s-2.4-2-4.2-2.8
+ C265.2,26.3,261.9,26,256.9,26z"/>
+ </g>
+</g>
+<g id="logomark">
+ <g>
+ <path class="st0" d="M40,64H8c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h32c4.4,0,8,3.6,8,8l0,0C48,60.4,44.4,64,40,64z"/>
+ <path class="st0" d="M96,64H64c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h32c4.4,0,8,3.6,8,8l0,0C104,60.4,100.4,64,96,64z"/>
+ <path class="st0" d="M80,40H24c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h56c4.4,0,8,3.6,8,8l0,0C88,36.4,84.4,40,80,40z"/>
+ <path class="st0" d="M80,88H24c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h56c4.4,0,8,3.6,8,8l0,0C88,84.4,84.4,88,80,88z"/>
+ <path class="st0" d="M64,16H40c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h24c4.4,0,8,3.6,8,8l0,0C72,12.4,68.4,16,64,16z"/>
+ <path class="st0" d="M64,112H40c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h24c4.4,0,8,3.6,8,8l0,0C72,108.4,68.4,112,64,112z"/>
+ </g>
+</g>
+</svg>
diff --git a/omero_gallery/static/gallery/images/omero.svg b/idr_gallery/static/idr_gallery/images/omero.svg
similarity index 100%
rename from omero_gallery/static/gallery/images/omero.svg
rename to idr_gallery/static/idr_gallery/images/omero.svg
diff --git a/omero_gallery/static/gallery/images/transparent.png b/idr_gallery/static/idr_gallery/images/transparent.png
similarity index 100%
rename from omero_gallery/static/gallery/images/transparent.png
rename to idr_gallery/static/idr_gallery/images/transparent.png
diff --git a/idr_gallery/static/idr_gallery/model.js b/idr_gallery/static/idr_gallery/model.js
new file mode 100644
index 00000000..6e4a11a1
--- /dev/null
+++ b/idr_gallery/static/idr_gallery/model.js
@@ -0,0 +1,648 @@
+"use strict";
+
+// Copyright (C) 2019-2022 University of Dundee & Open Microscopy Environment.
+// All rights reserved.
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+// NB: SOURCE FILES are under /src. Compiled files are under /static/
+
+class StudiesModel {
+ constructor() {
+ this.base_url = BASE_URL;
+ this.studies = [];
+ this.images = {};
+ this.pubSubObject = $({});
+ return this;
+ }
+
+ subscribe() {
+ this.pubSubObject.on.apply(this.pubSubObject, arguments);
+ }
+
+ unsubscribe() {
+ this.pubSubObject.off.apply(this.pubSubObject, arguments);
+ }
+
+ publish() {
+ this.pubSubObject.trigger.apply(this.pubSubObject, arguments);
+ }
+
+ getStudyById(typeId) {
+ // E.g. 'project-1', or 'screen-2'
+ var objType = typeId.split('-')[0];
+ var id = typeId.split('-')[1];
+
+ for (var i = 0; i < this.studies.length; i++) {
+ var study = this.studies[i];
+
+ if (study['@id'] == id && study['@type'].split('#')[1].toLowerCase() == objType) {
+ return study;
+ }
+ }
+ }
+
+ getStudiesNames(filterQuery) {
+ var names = this.studies.map(function (s) {
+ return s.Name;
+ });
+
+ if (filterQuery) {
+ names = names.filter(function (name) {
+ return name.toLowerCase().indexOf(filterQuery) > -1;
+ });
+ }
+
+ names.sort(function (a, b) {
+ return a.toLowerCase() > b.toLowerCase() ? 1 : -1;
+ });
+ return names;
+ }
+
+ getStudiesGroups(filterQuery) {
+ var names = [];
+ this.studies.forEach(function (study) {
+ var groupName = study['omero:details'].group.Name;
+
+ if (names.indexOf(groupName) === -1) {
+ names.push(groupName);
+ }
+ });
+
+ if (filterQuery) {
+ names = names.filter(function (name) {
+ return name.toLowerCase().indexOf(filterQuery) > -1;
+ });
+ }
+
+ names.sort(function (a, b) {
+ return a.toLowerCase() > b.toLowerCase() ? 1 : -1;
+ });
+ return names;
+ }
+
+ getStudyValue(study, key) {
+ if (!study.mapValues) return;
+
+ for (var i = 0; i < study.mapValues.length; i++) {
+ var kv = study.mapValues[i];
+
+ if (kv[0] === key) {
+ return kv[1];
+ }
+ }
+ }
+
+ getStudyTitle(study) {
+ var title;
+
+ for (var i = 0; i < TITLE_KEYS.length; i++) {
+ title = model.getStudyValue(study, TITLE_KEYS[i]);
+ if (title) {
+ break;
+ }
+ }
+ if (!title) {
+ title = study.Name;
+ }
+ return title;
+ }
+
+ getStudyDescription(study, title) {
+
+ if (!title) {
+ title = this.getStudyTitle(study);
+ }
+ let desc = study.Description;
+ let studyDesc = "";
+ if (desc) {
+ // If description contains title, use the text that follows
+ if (title.length > 0 && desc.indexOf(title) > -1) {
+ desc = desc.split(title)[1];
+ }
+ // Remove blank lines (and first 'Experiment Description' line)
+ studyDesc = desc.split('\n').filter(function (l) {
+ return l.length > 0;
+ }).filter(function (l) {
+ return l !== 'Experiment Description' && l !== 'Screen Description';
+ }).join('\n');
+
+ if (studyDesc.indexOf('Version History') > 1) {
+ studyDesc = studyDesc.split('Version History')[0];
+ }
+ }
+ return studyDesc;
+ }
+
+ getStudyValues(study, key) {
+ if (!study.mapValues) {
+ return [];
+ }
+ var matches = [];
+ for (var i = 0; i < study.mapValues.length; i++) {
+ var kv = study.mapValues[i];
+ if (kv[0] === key) {
+ matches.push(kv[1]);
+ }
+ }
+ return matches;
+ }
+
+ getKeyValueAutoComplete(key, inputText) {
+ var _this = this;
+
+ inputText = inputText.toLowerCase(); // Get values for key from each study
+
+ var values = [];
+ this.studies.forEach(function (study) {
+ var v = _this.getStudyValues(study, key);
+
+ for (var i = 0; i < v.length; i++) {
+ values.push(v[i]);
+ }
+ }); // We want values that match inputText
+ // Except for "Publication Authors", where we want words
+ // Create dict of {lowercaseValue: origCaseValue}
+
+ var matchCounts = values.reduce(function (prev, value) {
+ var matches = [];
+
+ if (key == "Publication Authors") {
+ // Split surnames, ignoring AN initials.
+ var names = value.split(/,| and | & /).map(function (n) {
+ // Want the surname from e.g. 'Jan Ellenberg' or 'Held M' or 'Øyvind Ødegård-Fougner'
+ var words = n.split(" ").filter(function (w) {
+ return w.match(/[a-z]/g);
+ });
+ if (words && words.length == 1) return words[0]; // Surname only
+
+ return words && words.length > 1 ? words.slice(1).join(" ") : '';
+ }).filter(function (w) {
+ return w.length > 0;
+ });
+ matches = names.filter(function (name) {
+ return name.toLowerCase().indexOf(inputText) > -1;
+ });
+ } else if (value.toLowerCase().indexOf(inputText) > -1) {
+ matches.push(value);
+ }
+
+ matches.forEach(function (match) {
+ if (!prev[match.toLowerCase()]) {
+ // key is lowercase, value is original case
+ prev[match.toLowerCase()] = {
+ value: match,
+ count: 0
+ };
+ } // also keep count of matches
+
+ prev[match.toLowerCase()].count++;
+ });
+ return prev;
+ }, {}); // Make into list and sort by:
+ // match at start of phrase > match at start of word > other match
+
+ var matchList = [];
+
+ for (key in matchCounts) {
+ var matchScore = 1;
+
+ if (key.indexOf(inputText) == 0) {
+ // best match if our text STARTS WITH inputText
+ matchScore = 3;
+ } else if (key.indexOf(" " + inputText) > -1) {
+ // next best if a WORD starts with inputText
+ matchScore = 2;
+ } // Make a list of sort score, orig text (NOT lowercase keys) and count
+
+ matchList.push([matchScore, matchCounts[key].value, matchCounts[key].count]);
+ } // Sort by the matchScore (hightest first)
+
+
+ matchList.sort(function (a, b) {
+ if (a[0] < b[0]) return 1;
+ if (a[0] > b[0]) return -1; // equal score. Sort by value (lowest first)
+
+ if (a[1].toLowerCase() > b[1].toLowerCase()) return 1;
+ return -1;
+ }); // Return the matches
+
+ return matchList.map(function (m) {
+ // Auto-complete uses {label: 'X (n)', value: 'X'}
+ return {
+ label: "".concat(m[1], " (").concat(m[2], ")"),
+ value: m[1]
+ };
+ }).filter(function (m) {
+ return m.value.length > 0;
+ });
+ }
+
+ async loadStudies() {
+ // Load Projects AND Screens, sort them and render...
+ await Promise.all([
+ fetch(this.base_url + "api/v0/m/projects/?childCount=true"),
+ fetch(this.base_url + "api/v0/m/screens/?childCount=true"),
+ ]).then(responses =>
+ Promise.all(responses.map(res => res.json()))
+ ).then(([projects, screens]) => {
+ this.studies = projects.data;
+ this.studies = this.studies.concat(screens.data);
+
+ // ignore empty studies with no images
+ this.studies = this.studies.filter(study => study['omero:childCount'] > 0);
+
+ // sort by name, reverse
+ this.studies.sort(function (a, b) {
+ var nameA = a.Name.toUpperCase();
+ var nameB = b.Name.toUpperCase();
+ if (nameA < nameB) {
+ return 1;
+ }
+ if (nameA > nameB) {
+ return -1;
+ }
+
+ // names must be equal
+ return 0;
+ });
+
+ }).catch((err) => {
+ console.error(err);
+ });
+
+ // Load Map Annotations
+ await this.loadStudiesMapAnnotations();
+ }
+
+ loadStudiesThumbnails() {
+ let url = GALLERY_INDEX + "gallery-api/thumbnails/";
+
+ let toFind = this.studies.map(study => study.objId.replace("-", "="));
+ let batchSize = 10;
+ while (toFind.length > 0) {
+ let data = toFind.slice(0, batchSize).join("&");
+ fetch(url + '?' + data)
+ .then(response => response.json())
+ .then(data => {
+ for (let studyId in data) {
+ let study = this.getStudyById(studyId);
+ if (data[studyId]) {
+ study.image = data[studyId].image;
+ study.thumbnail = data[studyId].thumbnail;
+ }
+ }
+ this.publish("thumbnails", data);
+ });
+ toFind = toFind.slice(batchSize);
+ }
+ }
+
+ async loadStudiesMapAnnotations() {
+ let url = this.base_url + "webclient/api/annotations/?type=map";
+ let data = this.studies
+ .map(study => `${study['@type'].split('#')[1].toLowerCase()}=${study['@id']}`)
+ .join("&");
+ url += '&' + data;
+ await fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ // populate the studies array...
+ // dict of {'project-1' : key-values}
+ let annsByParentId = {};
+ data.annotations.forEach(ann => {
+ let key = ann.link.parent.class; // 'ProjectI'
+ key = key.substr(0, key.length - 1).toLowerCase();
+ key += '-' + ann.link.parent.id; // project-1
+ if (!annsByParentId[key]) {
+ annsByParentId[key] = [];
+ }
+ annsByParentId[key] = annsByParentId[key].concat(ann.values);
+ });
+ // Add mapValues to studies...
+ this.studies = this.studies.map(study => {
+ // Also set 'type':'screen', 'objId': 'screen-123'
+ study.type = study['@type'].split('#')[1].toLowerCase();
+ study.id = study['@id'];
+ study.objId = `${study.type}-${study['@id']}`;
+ let values = annsByParentId[study.objId];
+ if (values) {
+ study.mapValues = values;
+ let releaseDate = this.getStudyValue(study, 'Release Date');
+ if (releaseDate) {
+ study.date = new Date(releaseDate);
+ if (isNaN(study.date.getTime())) {
+ study.date = undefined;
+ }
+ }
+ }
+ return study;
+ });
+
+ })
+ }
+
+ filterStudiesAnyText(text) {
+ // Search for studies with text in their keys, values, or description.
+ // Returns a list of matching studies. Each study is returned along with text matches
+ // [study, ["key: value", "description"]]
+ let regexes = text.split(" ").map(token => new RegExp(token, "i"))
+ function matchSome(str) {
+ return regexes.some(re => re.test(str));
+ }
+ const re = new RegExp(text, "i")
+ return this.studies.map(study => {
+ let mapValues = [];
+ if (study.mapValues) {
+ mapValues = study.mapValues.map(kv => kv.join(": "));
+ }
+ let studyStrings = mapValues.concat([study.Description]);
+
+ // we want ALL the search tokens to match at least somewhere in studyStrings
+ let match = regexes.every(re => studyStrings.some(str => re.test(str)))
+ if (!match) return;
+
+ // return [study, "key: value string showing matching text"]
+ let matches = mapValues.filter(matchSome);
+ if (matchSome(study.Description)) {
+ matches.push(study.Description);
+ }
+ return [study, matches]
+ }).filter(Boolean);
+ }
+
+ filterStudiesByMapQuery(query) {
+ if (query.startsWith("FIRST") || query.startsWith("LAST")) {
+ // E.g. query is 'FIRST10:date' sort by 'date' and return first 10
+ var limit = parseInt(query.replace('FIRST', '').replace('LAST', ''));
+ var attr = query.split(':')[1];
+ var desc = query.startsWith("FIRST") ? -1 : 1; // first filter studies, remove those that don't have 'attr'
+
+ var sorted = this.studies.filter(function (study) {
+ return study[attr] !== undefined;
+ }).sort(function (a, b) {
+ var aVal = a[attr];
+ var bVal = b[attr]; // If string, use lowercase
+
+ aVal = aVal.toLowerCase ? aVal.toLowerCase() : aVal;
+ bVal = bVal.toLowerCase ? bVal.toLowerCase() : bVal;
+ return aVal < bVal ? desc : aVal > bVal ? -desc : 0;
+ });
+ return sorted.slice(0, limit);
+ }
+
+ var matches = this.studies.filter(function (study) {
+ // If no key-values loaded, filter out
+ if (!study.mapValues) {
+ return false;
+ }
+
+ var match = false; // first split query by AND and OR
+
+ var ors = query.split(' OR ');
+ ors.forEach(function (term) {
+ var allAnds = true;
+ var ands = term.split(' AND ');
+ ands.forEach(function (mustMatch) {
+ var queryKeyValue = mustMatch.split(":");
+ var valueMatch = false; // check all key-values (may be duplicate keys) for value that matches
+
+ for (var i = 0; i < study.mapValues.length; i++) {
+ var kv = study.mapValues[i];
+
+ if (kv[0] === queryKeyValue[0]) {
+ var value = queryKeyValue[1].trim();
+
+ if (value.substr(0, 4) === 'NOT ') {
+ value = value.replace('NOT ', '');
+
+ if (kv[1].toLowerCase().indexOf(value.toLowerCase()) == -1) {
+ valueMatch = true;
+ }
+ } else if (kv[1].toLowerCase().indexOf(value.toLowerCase()) > -1) {
+ valueMatch = true;
+ }
+ }
+ }
+ // if not found, then our AND term fails
+ if (!valueMatch) {
+ allAnds = false;
+ }
+ });
+
+ if (allAnds) {
+ match = true;
+ }
+ });
+ return match;
+ });
+ return matches;
+ }
+
+ loadImage(obj_type, obj_id, callback) {
+ // Get a sample image ID for 'screen' or 'project'
+ let key = `${obj_type}-${obj_id}`;
+
+ // check cache
+ if (this.images[key]) {
+ callback(this.images[key]);
+ return;
+ }
+
+ let url = `${GALLERY_INDEX}gallery-api/${obj_type}s/${obj_id}/images/?limit=1`
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ let images = data.data;
+ if (images.length > 0) {
+ this.images[key] = images[0]
+ }
+ callback(this.images[key]);
+ return;
+ })
+ }
+
+ loadStudyStats = function (url, callback) {
+ let self = this;
+ $.get(url, function (data) {
+ let tsvRows = data.split('\n');
+ let columns;
+ // read tsv => dicts
+ let rowsAsObj = tsvRows.map(function (row, count) {
+ let values = row.split('\t');
+ if (count == 0) {
+ columns = values;
+ return;
+ }
+ if (values.length === 0) return;
+ let row_data = {};
+ for (let c = 0; c < values.length; c++) {
+ if (c < columns.length) {
+ row_data[columns[c]] = values[c];
+ }
+ }
+ return row_data
+ }).filter(Boolean);
+
+ // Group rows by Study
+ let stats = {};
+ rowsAsObj.forEach(row => {
+ let studyName = row["Study"];
+ if (!studyName) return;
+ let studyId = studyName.split("-")[0];
+ if (!stats[studyId]) {
+ stats[studyId] = [];
+ }
+ stats[studyId].push(row);
+ });
+
+ self.studyStats = stats;
+
+ if (callback) {
+ callback(stats);
+ }
+ }).fail(function () {
+ console.log("Failed to load studies.tsv")
+ if (callback) {
+ callback();
+ }
+ });
+ }
+}
+
+function animateValue(obj, start, end, duration) {
+ // https://css-tricks.com/animating-number-counters/
+ let startTimestamp = null;
+ const step = (timestamp) => {
+ if (!startTimestamp) startTimestamp = timestamp;
+ let progress = Math.min((timestamp - startTimestamp) / duration, 1);
+ // If we want easing...
+ // progress = Math.sin(Math.PI * progress / 2);
+ let number = Math.floor(progress * (end - start) + start);
+ obj.innerHTML = new Intl.NumberFormat().format(number);
+ if (progress < 1) {
+ window.requestAnimationFrame(step);
+ }
+ };
+ window.requestAnimationFrame(step);
+}
+
+function toTitleCase(text) {
+ if (!text || text.length == 0) return text;
+ return text[0].toUpperCase() + text.slice(1);
+}
+
+var getStudyShortName = function getStudyShortName(study) {
+ var shortName = "".concat(toTitleCase(study.type), ": ").concat(study.id);
+
+ if (STUDY_SHORT_NAME) {
+ for (var i = 0; i < STUDY_SHORT_NAME.length; i++) {
+ var key = STUDY_SHORT_NAME[i]['key'];
+ var value = void 0;
+ var newShortName = void 0;
+
+ if (key === 'Name' || key === 'Description') {
+ value = study[key];
+ }
+
+ if (!value) {
+ value = model.getStudyValue(study, key);
+ }
+
+ if (!value) {
+ continue;
+ }
+
+ if (STUDY_SHORT_NAME[i]['regex'] && STUDY_SHORT_NAME[i]['template']) {
+ var re = new RegExp(STUDY_SHORT_NAME[i]['regex']);
+ var template = STUDY_SHORT_NAME[i]['template'];
+ newShortName = value.replace(re, template);
+ } else {
+ newShortName = value;
+ }
+
+ if (newShortName) {
+ shortName = newShortName;
+ break;
+ }
+ }
+ }
+
+ return shortName;
+}; // startsWith polyfill for IE
+
+
+if (!String.prototype.startsWith) {
+ String.prototype.startsWith = function (search, pos) {
+ return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;
+ };
+} // Object.assign polyfill for IE
+
+
+if (typeof Object.assign !== 'function') {
+ // Must be writable: true, enumerable: false, configurable: true
+ Object.defineProperty(Object, "assign", {
+ value: function assign(target, varArgs) {
+ // .length of function is 2
+ 'use strict';
+
+ if (target === null || target === undefined) {
+ throw new TypeError('Cannot convert undefined or null to object');
+ }
+
+ var to = Object(target);
+
+ for (var index = 1; index < arguments.length; index++) {
+ var nextSource = arguments[index];
+
+ if (nextSource !== null && nextSource !== undefined) {
+ for (var nextKey in nextSource) {
+ // Avoid bugs when hasOwnProperty is shadowed
+ if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+ to[nextKey] = nextSource[nextKey];
+ }
+ }
+ }
+ }
+
+ return to;
+ },
+ writable: true,
+ configurable: true
+ });
+}
+
+
+function getStudyTitle(model, study) {
+ let title;
+ for (let i = 0; i < TITLE_KEYS.length; i++) {
+ title = model.getStudyValue(study, TITLE_KEYS[i]);
+ if (title) {
+ break;
+ }
+ }
+ if (!title) {
+ title = study.Name;
+ }
+ return title;
+}
+
+const escapeHTML = str =>
+ str.replace(
+ /[&<>'"]/g,
+ tag =>
+ ({
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ "'": ''',
+ '"': '"'
+ }[tag] || tag)
+ );
diff --git a/src/search.js b/idr_gallery/static/idr_gallery/search.js
similarity index 58%
rename from src/search.js
rename to idr_gallery/static/idr_gallery/search.js
index 69c82a5f..fcc833dd 100644
--- a/src/search.js
+++ b/idr_gallery/static/idr_gallery/search.js
@@ -18,25 +18,13 @@
// Model for loading Projects, Screens and their Map Annotations
let model = new StudiesModel();
-let mapr_settings;
-function renderStudyKeys() {
- if (FILTER_KEYS.length > 0) {
- let html = FILTER_KEYS
- .map(key => {
- if (key.label && key.value) {
- return `<option value="${ key.value }">${ key.label }</option>`
- }
- return `<option value="${ key }">${ key }</option>`
- })
- .join("\n");
- document.getElementById('studyKeys').innerHTML = html;
- // Show the <optgroup> and the whole form
- document.getElementById('studyKeys').style.display = 'block';
- document.getElementById('search-form').style.display = 'block';
- }
-}
-renderStudyKeys();
+model.subscribe('thumbnails', (event, data) => {
+ // Will get called when each batch of thumbnails is loaded
+ renderThumbnails(data);
+});
+
+let mapr_settings;
// FIRST, populate forms from query string
@@ -47,7 +35,7 @@ function populateInputsFromSearch() {
for (var i = 0; i < searchParams.length; i++) {
var paramSplit = searchParams[i].split('=');
if (paramSplit[0] === 'query') {
- query = paramSplit[1].replace(/%20/g, " ");
+ query = paramSplit[1].replace(/%20/g, " ");
}
}
if (query) {
@@ -60,7 +48,7 @@ function populateInputsFromSearch() {
let key = configId.replace('mapr_', '');
let placeholder = `Type to filter values...`;
if (mapr_settings && mapr_settings[key]) {
- placeholder = `Type ${ mapr_settings[key]['default'][0]}...`;
+ placeholder = `Type ${mapr_settings[key]['default'][0]}...`;
}
document.getElementById('maprQuery').placeholder = placeholder;
}
@@ -76,33 +64,33 @@ function filterStudiesByMapr(value) {
let configId = document.getElementById("maprConfig").value.replace("mapr_", "");
document.getElementById('studies').innerHTML = "";
let key = mapr_settings[value] ? mapr_settings[value].all.join(" or ") : value;
- showFilterSpinner(`Finding images with ${ configId }: ${ value }...`);
+ showFilterSpinner(`Finding images with ${configId}: ${value}...`);
// Get all terms that match (NOT case_sensitive)
- let url = `${ BASE_URL }mapr/api/${ configId }/?value=${ value }&case_sensitive=false&orphaned=true`;
+ let url = `${BASE_URL}mapr/api/${configId}/?value=${value}&case_sensitive=false&orphaned=true`;
$.getJSON(url, (data) => {
let maprTerms = data.maps.map(term => term.id);
- let termUrls = maprTerms.map(term => `${ BASE_URL }mapr/api/${ configId }/?value=${ term }`);
+ let termUrls = maprTerms.map(term => `${BASE_URL}mapr/api/${configId}/?value=${term}`);
// Get results for All terms
Promise.all(termUrls.map(url => fetch(url)))
- .then(responses => Promise.all(responses.map(res => res.json())))
- .then((responses) => {
- hideFilterSpinner();
+ .then(responses => Promise.all(responses.map(res => res.json())))
+ .then((responses) => {
+ hideFilterSpinner();
- // filter studies by each response
- let studiesByTerm = responses.map(data => filterStudiesByMaprResponse(data));
+ // filter studies by each response
+ let studiesByTerm = responses.map(data => filterStudiesByMaprResponse(data));
- renderMaprMessage(studiesByTerm, maprTerms);
+ renderMaprMessage(studiesByTerm, maprTerms);
- // Show table for each...
- studiesByTerm.forEach((studies, idx) => {
- if (studies.length > 0) {
- renderMaprResultsTable(studies, maprTerms[idx]);
- }
- });
- })
+ // Show table for each...
+ studiesByTerm.forEach((studies, idx) => {
+ if (studies.length > 0) {
+ renderMaprResultsTable(studies, maprTerms[idx]);
+ }
+ });
+ })
// .fail(() => {
// document.getElementById('filterCount').innerHTML = "Request failed. Server may be busy."
// })
@@ -113,8 +101,8 @@ function filterStudiesByMapr(value) {
function filterStudiesByMaprResponse(data) {
// filter studies by 'screens' and 'projects'
let imageCounts = {};
- data.screens.forEach(s => {imageCounts[`screen-${ s.id }`] = s.extra.counter});
- data.projects.forEach(s => {imageCounts[`project-${ s.id }`] = s.extra.counter});
+ data.screens.forEach(s => { imageCounts[`screen-${s.id}`] = s.extra.counter });
+ data.projects.forEach(s => { imageCounts[`project-${s.id}`] = s.extra.counter });
let filterFunc = study => {
let studyId = study['@type'].split('#')[1].toLowerCase() + '-' + study['@id'];
@@ -149,9 +137,9 @@ function renderMaprMessage(studiesByTerm, maprTerms) {
key = mapr_settings[key].label;
}
filterMessage = `<p class="filterMessage">
- Found <strong>${ imageCount }</strong> images with
+ Found <strong>${imageCount}</strong> images with
<strong>${key}</strong>: <strong>${terms}</strong>
- in <strong>${ studyCount }</strong> stud${ studyCount == 1 ? 'y' : 'ies' }</strong></p>`;
+ in <strong>${studyCount}</strong> stud${studyCount == 1 ? 'y' : 'ies'}</strong></p>`;
}
document.getElementById('filterCount').innerHTML = filterMessage;
}
@@ -161,9 +149,9 @@ function renderMaprResultsTable(maprData, term) {
let configId = document.getElementById("maprConfig").value.replace("mapr_", "");
let elementId = 'maprResultsTable' + term;
let html = `
- <h2>${ term }</h2>
+ <h2>${term}</h2>
<table class='maprResultsTable' style='margin-top:20px'>
- <tbody data-id='${ elementId }'>
+ <tbody data-id='${elementId}'>
<tr>
<th>Study ID</th>
<th>Organism</th>
@@ -185,7 +173,7 @@ document.getElementById('maprConfig').onchange = (event) => {
let value = event.target.value.replace('mapr_', '');
let placeholder = `Type to filter values...`;
if (mapr_settings[value]) {
- placeholder = `Type ${ mapr_settings[value]['default'][0]}...`;
+ placeholder = `Type ${mapr_settings[value]['default'][0]}...`;
}
document.getElementById('maprQuery').placeholder = placeholder;
// Show all autocomplete options...
@@ -235,121 +223,121 @@ function hideFilterSpinner() {
}
$("#maprQuery")
- .keyup(event => {
- if (event.which == 13) {
- $(event.target).autocomplete( "close" );
- filterAndRender();
- // Add to browser history. Handled by onpopstate on browser Back
- let configId = document.getElementById("maprConfig").value;
- window.history.pushState({}, "", `?query=${ configId }:${ event.target.value }`);
- }
- })
- .autocomplete({
+ .keyup(event => {
+ if (event.which == 13) {
+ $(event.target).autocomplete("close");
+ filterAndRender();
+ // Add to browser history. Handled by onpopstate on browser Back
+ let configId = document.getElementById("maprConfig").value;
+ window.history.pushState({}, "", `?query=${configId}:${event.target.value}`);
+ }
+ })
+ .autocomplete({
autoFocus: false,
delay: 1000,
- source: function( request, response ) {
+ source: function (request, response) {
- // if configId is not from mapr, we filter on mapValues...
- let configId = document.getElementById("maprConfig").value;
- if (configId.indexOf('mapr_') != 0) {
+ // if configId is not from mapr, we filter on mapValues...
+ let configId = document.getElementById("maprConfig").value;
+ if (configId.indexOf('mapr_') != 0) {
- let matches;
- if (configId === 'Name') {
- matches = model.getStudiesNames(request.term);
- } else if (configId === 'Group') {
- matches = model.getStudiesGroups(request.term);
- } else {
- matches = model.getKeyValueAutoComplete(configId, request.term);
- }
- response(matches);
-
- // When not mapr, we filter while typing
- filterAndRender();
- return;
+ let matches;
+ if (configId === 'Name') {
+ matches = model.getStudiesNames(request.term);
+ } else if (configId === 'Group') {
+ matches = model.getStudiesGroups(request.term);
+ } else {
+ matches = model.getKeyValueAutoComplete(configId, request.term);
}
+ response(matches);
- // Don't handle empty query for mapr
- if (request.term.length == 0) {
- return;
- }
+ // When not mapr, we filter while typing
+ filterAndRender();
+ return;
+ }
- // Auto-complete to filter by mapr...
- configId = configId.replace('mapr_', '');
- let case_sensitive = false;
+ // Don't handle empty query for mapr
+ if (request.term.length == 0) {
+ return;
+ }
- let requestData = {
- case_sensitive: case_sensitive,
- }
- let url;
- if (request.term.length === 0) {
- // Try to list all top-level values.
- // This works for 'wild-card' configs where number of values is small e.g. Organism
- // But will return empty list for e.g. Gene
- url = `${ BASE_URL }mapr/api/${ configId }/`;
- requestData.orphaned = true
- } else {
- // Find auto-complete matches
- url = `${ BASE_URL }mapr/api/autocomplete/${ configId }/`;
- requestData.value = case_sensitive ? request.term : request.term.toLowerCase();
- requestData.query = true; // use a 'like' HQL query
- }
+ // Auto-complete to filter by mapr...
+ configId = configId.replace('mapr_', '');
+ let case_sensitive = false;
+
+ let requestData = {
+ case_sensitive: case_sensitive,
+ }
+ let url;
+ if (request.term.length === 0) {
+ // Try to list all top-level values.
+ // This works for 'wild-card' configs where number of values is small e.g. Organism
+ // But will return empty list for e.g. Gene
+ url = `${BASE_URL}mapr/api/${configId}/`;
+ requestData.orphaned = true
+ } else {
+ // Find auto-complete matches
+ url = `${BASE_URL}mapr/api/autocomplete/${configId}/`;
+ requestData.value = case_sensitive ? request.term : request.term.toLowerCase();
+ requestData.query = true; // use a 'like' HQL query
+ }
- showSpinner();
- $.ajax({
- dataType: "json",
- type : 'GET',
- url: url,
- data: requestData,
- success: function(data) {
- hideSpinner();
- if (request.term.length === 0) {
- // Top-level terms in 'maps'
- if (data.maps && data.maps.length > 0) {
- let terms = data.maps.map(m => m.id);
- terms.sort();
- response(terms);
- }
- }
- else if (data.length > 0) {
- response( $.map( data, function(item) {
- return item;
- }));
- } else {
- response([{ label: 'No results found.', value: -1 }]);
- }
- },
- error: function(data) {
- hideSpinner();
- // E.g. status 504 for timeout
- response([{ label: 'Loading auto-complete terms failed. Server may be busy.', value: -1 }]);
+ showSpinner();
+ $.ajax({
+ dataType: "json",
+ type: 'GET',
+ url: url,
+ data: requestData,
+ success: function (data) {
+ hideSpinner();
+ if (request.term.length === 0) {
+ // Top-level terms in 'maps'
+ if (data.maps && data.maps.length > 0) {
+ let terms = data.maps.map(m => m.id);
+ terms.sort();
+ response(terms);
}
- });
+ }
+ else if (data.length > 0) {
+ response($.map(data, function (item) {
+ return item;
+ }));
+ } else {
+ response([{ label: 'No results found.', value: -1 }]);
+ }
+ },
+ error: function (data) {
+ hideSpinner();
+ // E.g. status 504 for timeout
+ response([{ label: 'Loading auto-complete terms failed. Server may be busy.', value: -1 }]);
+ }
+ });
},
minLength: 0,
- open: function() {},
- close: function() {
- // $(this).val('');
- return false;
+ open: function () { },
+ close: function () {
+ // $(this).val('');
+ return false;
},
- focus: function(event,ui) {},
- select: function(event, ui) {
- if (ui.item.value == -1) {
- // Ignore 'No results found'
- return false;
- }
- $(this).val(ui.item.value);
- filterAndRender();
- // Add to browser history. Handled by onpopstate on browser Back
- let configId = document.getElementById("maprConfig").value;
- window.history.pushState({}, "", `?query=${ configId }:${ ui.item.value }`);
-
+ focus: function (event, ui) { },
+ select: function (event, ui) {
+ if (ui.item.value == -1) {
+ // Ignore 'No results found'
return false;
+ }
+ $(this).val(ui.item.value);
+ filterAndRender();
+ // Add to browser history. Handled by onpopstate on browser Back
+ let configId = document.getElementById("maprConfig").value;
+ window.history.pushState({}, "", `?query=${configId}:${ui.item.value}`);
+
+ return false;
}
-}).data("ui-autocomplete")._renderItem = function( ul, item ) {
- return $( "<li>" )
- .append( "<a>" + item.label + "</a>" )
- .appendTo( ul );
-}
+ }).data("ui-autocomplete")._renderItem = function (ul, item) {
+ return $("<li>")
+ .append("<a>" + item.label + "</a>")
+ .appendTo(ul);
+ }
// ------------ Render -------------------------
@@ -401,14 +389,14 @@ function renderMapr(maprData, term) {
let linkFunc = (studyData) => {
let type = studyData['@type'].split('#')[1].toLowerCase();
let maprKey = configId.replace('mapr_', '');
- return `/mapr/${ maprKey }/?value=${ term }&show=${ type }-${ studyData['@id'] }`;
+ return `/mapr/${maprKey}/?value=${term}&show=${type}-${studyData['@id']}`;
}
- let elementSelector = `[data-id="${ elementId }"]`;
+ let elementSelector = `[data-id="${elementId}"]`;
maprData.forEach(s => renderStudy(s, elementSelector, linkFunc, maprHtml));
// load images for each study...
- $(`[data-id="${ elementId }"] tr`).each(function() {
+ $(`[data-id="${elementId}"] tr`).each(function () {
// load children in MAPR jsTree query to get images
let element = this;
let studyId = element.id;
@@ -420,35 +408,35 @@ function renderMapr(maprData, term) {
let maprValue = term;
// We want to link to the dataset or plate...
let imgContainer;
- let url = `${ BASE_URL }mapr/api/${ configId }/${ childType }/?value=${ maprValue }&id=${ objId }`;
+ let url = `${BASE_URL}mapr/api/${configId}/${childType}/?value=${maprValue}&id=${objId}`;
fetch(url)
.then(response => response.json())
.then(data => {
let firstChild = data[childType][0];
- imgContainer = `${ firstChild.extra.node }-${ firstChild.id }`;
- let imagesUrl = `${ BASE_URL }mapr/api/${ configId }/images/?value=${ maprValue }&id=${ firstChild.id }&node=${ firstChild.extra.node }`;
+ imgContainer = `${firstChild.extra.node}-${firstChild.id}`;
+ let imagesUrl = `${BASE_URL}mapr/api/${configId}/images/?value=${maprValue}&id=${firstChild.id}&node=${firstChild.extra.node}`;
return fetch(imagesUrl);
})
.then(response => response.json())
.then(data => {
let html = data.images.slice(0, 3).map(i => `
- <a href="${ BASE_URL }webclient/img_detail/${ i.id }/"
+ <a href="${BASE_URL}webclient/img_detail/${i.id}/"
target="_blank" title="Open image in viewer" class="maprViewerLink">
<div>
- <img class="thumbnail" src="${ STATIC_DIR }images/transparent.png"
- data-src="${ BASE_URL }webgateway/render_thumbnail/${ i.id }/">
+ <img class="thumbnail" src="${STATIC_DIR}images/transparent.png"
+ data-src="${BASE_URL}webgateway/render_thumbnail/${i.id}/">
<i class="fas fa-eye"></i>
</div>
</a>`).join("");
- let linkHtml = `<a target="_blank" href="${ BASE_URL }mapr/${ configId }/?value=${ maprValue }&show=${ imgContainer }">
+ let linkHtml = `<a target="_blank" href="${BASE_URL}mapr/${configId}/?value=${maprValue}&show=${imgContainer}">
more...
</a>`
// Find the container and add placeholder images html
- $("#"+element.id + " .exampleImages").html(html);
- $("#"+element.id + " .exampleImagesLink").append(linkHtml);
+ $("#" + element.id + " .exampleImages").html(html);
+ $("#" + element.id + " .exampleImagesLink").append(linkHtml);
// Update the src to load the thumbnails. Timeout to let placeholder render while we wait for thumbs
setTimeout(() => {
- $('img', "#"+element.id).each((index, img) => {
+ $('img', "#" + element.id).each((index, img) => {
img.src = img.dataset.src;
});
}, 0);
@@ -478,7 +466,7 @@ function render(filterFunc) {
configId = (mapr_settings && mapr_settings[configId]) || configId;
let maprValue = document.getElementById('maprQuery').value;
filterMessage = `<p class="filterMessage">
- Found <strong>${ studiesToRender.length }</strong> studies with
+ Found <strong>${studiesToRender.length}</strong> studies with
<strong>${configId}</strong>: <strong>${maprValue}</strong></p>`;
}
document.getElementById('filterCount').innerHTML = filterMessage;
@@ -486,13 +474,14 @@ function render(filterFunc) {
// By default, we link to the study itself in IDR...
let linkFunc = (studyData) => {
let type = studyData['@type'].split('#')[1].toLowerCase();
- return `${ BASE_URL }webclient/?show=${ type }-${ studyData['@id'] }`;
+ return `${BASE_URL}webclient/?show=${type}-${studyData['@id']}`;
}
let htmlFunc = studyHtml;
studiesToRender.forEach(s => renderStudy(s, '#studies', linkFunc, htmlFunc));
- loadStudyThumbnails();
+ // loadStudyThumbnails();
+ model.loadStudiesThumbnails();
}
@@ -506,11 +495,11 @@ function noStudiesMessage() {
let others = [];
for (let cat in SUPER_CATEGORIES) {
if (SUPER_CATEGORIES[cat].label !== currLabel) {
- others.push(`<a href="${GALLERY_INDEX}${ cat }/search/?query=${configId}:${maprQuery}">${ SUPER_CATEGORIES[cat].label }</a>`);
+ others.push(`<a href="${GALLERY_HOME}${cat}/search/?query=${configId}:${maprQuery}">${SUPER_CATEGORIES[cat].label}</a>`);
}
}
if (others.length > 0) {
- filterMessage += " Try " + others.join (" or ");
+ filterMessage += " Try " + others.join(" or ");
}
}
return filterMessage;
@@ -520,42 +509,19 @@ function noStudiesMessage() {
function renderStudy(studyData, elementSelector, linkFunc, htmlFunc) {
// Add Project or Screen to the page
- let title;
- for (let i=0; i<TITLE_KEYS.length; i++) {
- title = model.getStudyValue(studyData, TITLE_KEYS[i]);
- if (title) {
- break;
- }
- }
- if (!title) {
- title = studyData.Name;
- }
+ var title = model.getStudyTitle(studyData);
+
let type = studyData['@type'].split('#')[1].toLowerCase();
let studyLink = linkFunc(studyData);
// save for later
studyData.title = title;
- let desc = studyData.Description;
- let studyDesc;
- if (desc) {
- // If description contains title, use the text that follows
- if (title.length > 0 && desc.indexOf(title) > -1) {
- desc = desc.split(title)[1];
- }
- // Remove blank lines (and first 'Experiment Description' line)
- studyDesc = desc.split('\n')
- .filter(l => l.length > 0)
- .filter(l => l !== 'Experiment Description' && l !== 'Screen Description')
- .join('\n');
- if (studyDesc.indexOf('Version History') > 1) {
- studyDesc = studyDesc.split('Version History')[0];
- }
- }
+ var studyDesc = model.getStudyDescription(studyData, title);
let shortName = getStudyShortName(studyData);
let authors = model.getStudyValue(studyData, "Publication Authors") || "";
- let div = htmlFunc({studyLink, studyDesc, shortName, title, authors, BASE_URL, type}, studyData);
+ let div = htmlFunc({ studyLink, studyDesc, shortName, title, authors, BASE_URL, type }, studyData);
document.querySelector(elementSelector).appendChild(div);
}
@@ -569,24 +535,24 @@ function studyHtml(props, studyData) {
}
let author = props.authors.split(',')[0] || '';
if (author) {
- author = `${ author } et al.`;
+ author = `${author} et al.`;
author = author.length > 23 ? author.slice(0, 20) + '...' : author;
}
let html = `
<div style='white-space:nowrap'>
- ${ props.shortName }
- ${ pubmed ? `<a class='pubmed' target="_blank" href="${ pubmed }"> ${ author }</a>` : author}
+ ${props.shortName}
+ ${pubmed ? `<a class='pubmed' target="_blank" href="${pubmed}"> ${author}</a>` : author}
</div>
<div class="studyImage">
- <a target="_blank" href="${ props.studyLink }">
+ <a target="_blank" href="${props.studyLink}">
<div style="height: 100%; width: 100%">
<div class="studyText">
- <p title='${ props.studyDesc }'>
- ${ props.title }
+ <p title='${props.studyDesc}'>
+ ${props.title}
</p>
</div>
<div class="studyAuthors">
- ${ props.authors }
+ ${props.authors}
</div>
</div>
</a>
@@ -596,7 +562,7 @@ function studyHtml(props, studyData) {
</a>
</div>
`
- var div = document.createElement( "div" );
+ var div = document.createElement("div");
div.innerHTML = html;
div.id = props.type + '-' + studyData['@id'];
div.dataset.obj_type = props.type;
@@ -608,17 +574,17 @@ function studyHtml(props, studyData) {
function maprHtml(props, studyData) {
let html = `
<td>
- <a target="_blank" href="${ props.studyLink }" />
- ${ props.shortName }
+ <a target="_blank" href="${props.studyLink}" />
+ ${props.shortName}
</a>
</td>
- <td>${ model.getStudyValue(studyData, 'Organism')}</td>
- <td>${ studyData.imageCount }</td>
- <td title="${ props.title }">${ props.title.slice(0,40) }${ props.title.length > 40 ? '...' : '' }</td>
+ <td>${model.getStudyValue(studyData, 'Organism')}</td>
+ <td>${studyData.imageCount}</td>
+ <td title="${props.title}">${props.title.slice(0, 40)}${props.title.length > 40 ? '...' : ''}</td>
<td class='exampleImages'>loading...</td>
<td class='exampleImagesLink'></td>
`
- var tr = document.createElement( "tr" );
+ var tr = document.createElement("tr");
tr.innerHTML = html;
tr.id = props.type + '-' + studyData['@id'];
tr.dataset.obj_type = props.type;
@@ -627,54 +593,50 @@ function maprHtml(props, studyData) {
}
-function loadStudyThumbnails() {
-
- let ids = [];
- // Collect study IDs 'project-1', 'screen-2' etc
- $('div.study').each(function() {
- let obj_id = $(this).attr('data-obj_id');
- let obj_type = $(this).attr('data-obj_type');
- if (obj_id && obj_type) {
- ids.push(obj_type + '-' + obj_id);
- }
- });
-
- // Load images
- model.loadStudiesThumbnails(ids, (data) => {
- // data is e.g. { project-1: {thumbnail: base64data, image: {id:1}} }
- for (let id in data) {
- if (!data[id]) continue; // may be null
- let obj_type = id.split('-')[0];
- let obj_id = id.split('-')[1];
- let elements = document.querySelectorAll(`div[data-obj_type="${obj_type}"][data-obj_id="${obj_id}"]`);
- for (let e=0; e<elements.length; e++) {
- // Find all studies matching the study ID and set src on image
- let element = elements[e];
- let studyImage = element.querySelector('.studyImage');
- if (data[id].thumbnail) {
- studyImage.style.backgroundImage = `url(${ data[id].thumbnail })`;
- }
- // viewer link
- if (data[id].image && data[id].image.id) {
- let iid = data[id].image.id;
- let link = `${ BASE_URL }webclient/img_detail/${ iid }/`;
- element.querySelector('a.viewerLink').href = link;
- }
+function renderThumbnails(data) {
+
+ // data is e.g. { project-1: {thumbnail: base64data, image: {id:1}} }
+ for (let id in data) {
+ if (!data[id]) continue; // may be null
+ let obj_type = id.split('-')[0];
+ let obj_id = id.split('-')[1];
+ let elements = document.querySelectorAll(`div[data-obj_type="${obj_type}"][data-obj_id="${obj_id}"]`);
+ for (let e = 0; e < elements.length; e++) {
+ // Find all studies matching the study ID and set src on image
+ let element = elements[e];
+ let studyImage = element.querySelector('.studyImage');
+ if (data[id].thumbnail) {
+ studyImage.style.backgroundImage = `url(${data[id].thumbnail})`;
+ }
+ // viewer link
+ if (data[id].image && data[id].image.id) {
+ let iid = data[id].image.id;
+ let link = `${BASE_URL}webclient/img_detail/${iid}/`;
+ element.querySelector('a.viewerLink').href = link;
}
}
- });
+ }
}
// ----------- Load / Filter Studies --------------------
-// Do the loading and render() when done...
-model.loadStudies(() => {
+async function init() {
+ // Do the loading and render() when done...
+ await model.loadStudies();
+
// Immediately filter by Super category
if (SUPER_CATEGORY && SUPER_CATEGORY.query) {
model.studies = model.filterStudiesByMapQuery(SUPER_CATEGORY.query);
}
+
+ // load thumbs for all studies, even if not needed
+ // URL will be same each time (before filtering) so response will be cached
+ model.loadStudiesThumbnails();
+
filterAndRender();
-});
+}
+
+init();
// Handle browser Back and Forwards - redo filtering
window.onpopstate = (event) => {
@@ -692,7 +654,7 @@ fetch(BASE_URL + 'mapr/api/config/')
let options = FILTER_MAPR_KEYS.map(key => {
let config = mapr_settings[key];
if (config) {
- return `<option value="mapr_${ key }">${ config.label }</option>`;
+ return `<option value="mapr_${key}">${config.label}</option>`;
} else {
return "";
}
@@ -704,6 +666,6 @@ fetch(BASE_URL + 'mapr/api/config/')
document.getElementById('search-form').style.display = 'block';
}
populateInputsFromSearch();
- }).catch(function(err) {
+ }).catch(function (err) {
console.log("mapr not installed (config not available)");
});
diff --git a/omero_gallery/static/gallery/studies.css b/idr_gallery/static/idr_gallery/studies.css
similarity index 71%
rename from omero_gallery/static/gallery/studies.css
rename to idr_gallery/static/idr_gallery/studies.css
index d6232283..1a038989 100644
--- a/omero_gallery/static/gallery/studies.css
+++ b/idr_gallery/static/idr_gallery/studies.css
@@ -149,34 +149,3 @@ maprText {
position: relative;
border-radius: 10px;
}
-
-/* Always show scrollbars https://gist.github.com/IceCreamYou/cd517596e5847a88e2bb0a091da43fb4 */
-::-webkit-scrollbar-track:vertical {
- border-left: 1px solid #E7E7E7;
- box-shadow: 1px 0 1px 0 #F6F6F6 inset, -1px 0 1px 0 #F6F6F6 inset;
-}
-
-::-webkit-scrollbar-track:horizontal {
- border-top: 1px solid #E7E7E7;
- box-shadow: 0 1px 1px 0 #F6F6F6 inset, 0 -1px 1px 0 #F6F6F6 inset;
-}
-
-::-webkit-scrollbar {
- -webkit-appearance: none;
- background-color: #FAFAFA;
- width: 16px;
-}
-
-::-webkit-scrollbar-thumb {
- background-clip: padding-box;
- background-color: #C1C1C1;
- border-color: transparent;
- border-radius: 9px 8px 8px 9px;
- border-style: solid;
- border-width: 3px 3px 3px 4px; /* Workaround because margins aren't supported */
- box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-}
-
-::-webkit-scrollbar-thumb:hover {
- background-color: rgba(0, 0, 0, 0.5);
-}
diff --git a/idr_gallery/templates/idr_gallery/background_carousel.html b/idr_gallery/templates/idr_gallery/background_carousel.html
new file mode 100644
index 00000000..184bda15
--- /dev/null
+++ b/idr_gallery/templates/idr_gallery/background_carousel.html
@@ -0,0 +1,171 @@
+<style>
+ .marketing-background {
+ position: absolute;
+ background-position: center;
+ width: 100%;
+ background-size: cover;
+ height: 400px;
+ height: 100%;
+ top: 0;
+ left: 0;
+ transition: left 1s;
+ }
+
+ .prev {
+ left: -100%
+ }
+
+ .next {
+ left: 100%
+ }
+
+ .bg_controls {
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ color: white;
+ font-size: 200%;
+ display: flex;
+ }
+
+ .bg_controls div {
+ width: 14px;
+ height: 14px;
+ border: solid white 1px;
+ border-radius: 50%;
+ cursor: pointer;
+ margin: 7px;
+ background-color: transparent;
+ transition: border-color 1s, background-color 1s;
+ position: static;
+ }
+
+ .dark .bg_controls div {
+ border-color: #222222;
+ }
+
+ .bg_controls .selected {
+ background-color: rgba(255, 255, 255, .9);
+ }
+
+ .dark .bg_controls .selected {
+ background-color: rgba(0, 0, 0, 0.5);
+ }
+
+ .bg_controls div:hover {
+ opacity: 0.75;
+ }
+
+ .bg_controls div.selected:hover {
+ opacity: 1;
+ }
+
+ .bg_viewer_link {
+ display: block;
+ position: absolute;
+ right: 10px;
+ font-size: 24px;
+ color: white;
+ top: 24px;
+ visibility: hidden;
+ }
+
+ a.bg_viewer_link:hover {
+ color: white;
+ }
+
+ .dark .bg_viewer_link {
+ color: #222222;
+ }
+
+ .bg_controls .selected .bg_viewer_link {
+ visibility: visible;
+ }
+</style>
+
+{% for img in idr_images %}
+<div class="marketing-background {% if not forloop.first %}next{% endif %}" data-src="{{ base_url }}{{ img.src }}"
+ style="background-image: url('{{ img.thumbnail }}');" {% if img.light %}data-light="true" {% endif %}></div>
+{% endfor %}
+
+<div class="bg_controls">
+ {% for img in idr_images %}
+ <div {% if forloop.first %}class="selected" {% endif %} title="{{ img.title }}">
+
+ <a class="bg_viewer_link" style="right:45px; font-size:20px; margin-top:1px" title="Browse background image metadata" target="_blank"
+ href="{{ base_url }}webclient/?show=image-{{ img.image_id }}">
+ <i class="fas fa-info"></i>
+ </a>
+
+ <a class="bg_viewer_link" title="Open background image in viewer" target="_blank"
+ href="{{ base_url }}webclient/img_detail/{{ img.image_id }}/">
+ <i class="fas fa-eye"></i>
+ </a>
+
+ </div>
+ {% endfor %}
+</div>
+
+<script>
+ $(function () {
+
+ function renderHeaderBg(clickedIndex) {
+ var isLight;
+ $(".marketing-background").each(function (index, el) {
+ let $bgImg = $(el);
+ $bgImg.css('left', (clickedIndex - index) * -100 + '%');
+ if (clickedIndex == index) {
+ isLight = $bgImg.data("light");
+ }
+ if (clickedIndex == index || clickedIndex + 1 == index || clickedIndex - 1 == index) {
+ // load the image (data-src => src) for current background 'previous' and 'next'
+ let src = $bgImg.attr("data-src");
+ if (src) {
+ let i = new Image();
+ $bgImg.removeAttr("data-src"); // don't process again
+ i.onload = function () {
+ // pre-load before updating background, to avoid black while loading
+ $bgImg.css('background-image', "url('" + src + "')")
+ };
+ i.src = src;
+ }
+ }
+ });
+ $(`.bg_controls div`).removeClass('selected');
+ $(`.bg_controls div:nth-child(${clickedIndex + 1})`).addClass('selected');
+
+ if (isLight) {
+ $(".marketing-hero").addClass("dark");
+ } else {
+ $(".marketing-hero").removeClass("dark");
+ }
+ }
+
+ // header background carousel controls
+ $(".bg_controls div").on("click", function (event) {
+ // ignore click on viewer link
+ if (event.target.tagName == 'I') return;
+ let $target = $(event.target);
+ let clickedIndex = $(".bg_controls div").removeClass('selected').index($target);
+ renderHeaderBg(clickedIndex);
+ });
+
+ function logKey(e) {
+ // ignore keyboard events from input elements
+ if (document.activeElement.tagName == "INPUT") return;
+ let $selected = $(".bg_controls .selected");
+ let index = $(".bg_controls div").index($selected);
+ let count = $(".bg_controls>div").length;
+ if (e.code == "ArrowRight" && (index + 1) < count) {
+ index += 1;
+ } else if (e.code == "ArrowLeft" && index > 0) {
+ index -= 1;
+ }
+ renderHeaderBg(index);
+ }
+ document.addEventListener('keyup', logKey);
+
+ // make sure initial state (controls) are correct
+ renderHeaderBg(0);
+ });
+</script>
diff --git a/omero_gallery/templates/webgallery/categories/base.html b/idr_gallery/templates/idr_gallery/base.html
similarity index 87%
rename from omero_gallery/templates/webgallery/categories/base.html
rename to idr_gallery/templates/idr_gallery/base.html
index f4f68088..e74be5d4 100644
--- a/omero_gallery/templates/webgallery/categories/base.html
+++ b/idr_gallery/templates/idr_gallery/base.html
@@ -10,28 +10,26 @@
{% if favicon %}
<link rel="shortcut icon" type="image/x-icon" href="{{ favicon }}">
{% else %}
- <link rel="shortcut icon" type="image/x-icon" href="{% static 'gallery/images/favicon.ico' %}">
+ <link rel="shortcut icon" type="image/x-icon" href="{% static 'idr_gallery/images/favicon.ico' %}?_={{VERSION}}">
{% endif %}
<link rel="stylesheet" type="text/css" media="all" href="//fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic">
<link rel="stylesheet" type="text/css" media="all" href="//fonts.googleapis.com/css?family=Nunito">
- <link href="{% static 'gallery/3rdparty/foundation/foundation.min.css' %}" rel="stylesheet">
- <link href="{% static 'gallery/css/openmicroscopy.css' %}" rel="stylesheet">
- <link href="{% static 'gallery/css/idr.css' %}" rel="stylesheet">
+ <link href="{% static 'idr_gallery/3rdparty/foundation/foundation.min.css' %}?_={{VERSION}}" rel="stylesheet">
+ <link href="{% static 'idr_gallery/css/openmicroscopy.css' %}?_={{VERSION}}" rel="stylesheet">
+ <link href="{% static 'idr_gallery/css/idr.css' %}?_={{VERSION}}" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
- <!-- fetch polyfill for IE -->
- <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0.0/dist/fetch.umd.min.js"></script>
<!-- Babel polfill (Symbol, Promise) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
- <script src="{% static 'gallery/3rdparty/foundation/foundation.min.js' %}"></script>
+ <script src="{% static 'idr_gallery/3rdparty/foundation/foundation.min.js' %}"></script>
<script src="{{ base_url }}about/js/version.js"></script>
- <script src="{% static 'gallery/model.js' %}"></script>
- <link href="{% static 'gallery/studies.css' %}" rel="stylesheet">
+ <script src="{% static 'idr_gallery/model.js' %}?_={{VERSION}}"></script>
+ <link href="{% static 'idr_gallery/studies.css' %}?_={{VERSION}}" rel="stylesheet">
</head>
<body>
@@ -92,10 +90,8 @@
<hr class="whitespace">
- {% if footer_html %}
<div class="callout large secondary">
<div class="row">
- {% if footer_html == 'IDR' %}
<div class="row small-up-2 medium-up-5 large-up-5">
<div class="column"><a href="https://www.openmicroscopy.org/" target="_blank"><img class="thumbnail their-logo" src="{{ base_url }}about/img/logos/ome-logo-200.png" alt="OME"></a></div>
<div class="column"><a href="https://www.eurobioimaging.eu/" target="_blank"><img class="thumbnail their-logo" src="{{ base_url }}about/img/logos/eurobioimaging_logo.png" alt="Euro-Bioimaging"></a></div>
@@ -105,7 +101,7 @@
</div>
<hr class="whitespace">
<div class="large-12 columns text-center">
- <p>© 2016-2020 University of Dundee & Open Microscopy Environment. <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
+ <p>© 2016-2022 University of Dundee & Open Microscopy Environment. <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
<p>OMERO is distributed under the terms of the GNU GPL. For more information, visit <a href="https://www.openmicroscopy.org">openmicroscopy.org</a></p>
</div>
<hr class="whitespace">
@@ -119,12 +115,8 @@
<a href="https://www.twitter.com/idrstatus" target="_blank"><i class="fab fa-fw fa-twitter"></i> @IDRstatus</a></li>
</div>
</div>
- {% else %}
- {{ footer_html|safe }}
- {% endif %}
</div>
</div>
- {% endif %}
<script>
$(document).foundation();
diff --git a/idr_gallery/templates/idr_gallery/index.html b/idr_gallery/templates/idr_gallery/index.html
new file mode 100644
index 00000000..27ef0555
--- /dev/null
+++ b/idr_gallery/templates/idr_gallery/index.html
@@ -0,0 +1,513 @@
+{% extends "idr_gallery/base.html" %}
+
+{% block content %}
+
+<script>
+ // Various global constants from omero config set...
+ var FILTER_KEYS = {{ filter_keys| safe }};
+ var FILTER_MAPR_KEYS = {{ filter_mapr_keys| safe }};
+ var TITLE_KEYS = {{ TITLE_KEYS| safe }};
+ var STUDY_SHORT_NAME = {{ STUDY_SHORT_NAME| safe }};
+ // e.g. GALLEY_INDEX/api-gallery/thumbnails for loading from IDR
+ const GALLERY_INDEX = "{{ gallery_index }}";
+ // this is the home of this app, e.g. for GALLERY_HOME/search/
+ const GALLERY_HOME = "{% url 'idr_gallery_index' %}";
+ const BASE_URL = "{{ base_url }}";
+ const IDR_STUDIES_URL = "{{ IDR_STUDIES_URL }}";
+ const CATEGORY_QUERIES = {{ category_queries| safe }};
+ var SUPER_CATEGORY {% if super_category %} = {{ super_category | safe }} {% endif %};
+</script>
+
+<script src="https://unpkg.com/@popperjs/core@2"></script>
+<script src="https://unpkg.com/tippy.js@6"></script>
+<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/backdrop.css" />
+<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light-border.css" />
+
+<style>
+ body {
+ background-color: #f6f6f9;
+ }
+
+ header div {
+ position: relative;
+ }
+
+ .marketing-hero {
+ overflow: hidden;
+ position: relative;
+ padding: 40px 10px 25px;
+ background: black;
+ box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 50%);
+ }
+
+ a.sites-button.large {
+ min-width: 150px;
+ font-size: 1.15rem;
+ display: block;
+ width: fit-content;
+ margin: 15px 7px;
+ }
+
+ .cats {
+ display: flex;
+ justify-content: center;
+ }
+
+ #search-form {
+ padding-top: 10px;
+ }
+
+ .hero-subheader {
+ margin-bottom: 5px;
+ font-size: 1.15rem;
+ transition: background-color 1s, color 1s, box-shadow 1s;
+ }
+
+ .dark .hero-subheader {
+ color: #333333;
+ background-color: rgba(255, 255, 255, 0.5);
+ box-shadow: 0px 0px 15px 15px rgb(255 255 255 / 50%);
+ }
+
+ .stats {
+ position: relative;
+ text-align: center;
+ font-size: 1.7rem;
+ color: #333;
+ }
+
+ #studies {
+ overflow-x: hidden;
+ overflow-y: auto;
+ max-height: 350px;
+ }
+
+ .studyThumb {
+ float: left;
+ position: relative;
+ margin: 1px 0 1px 2px;
+ height: 50px;
+ width: 50px;
+ overflow: hidden;
+ background: no-repeat center;
+ background-size: cover;
+ background-color: #eee;
+ }
+
+ .studyThumb div {
+ height: 100%;
+ width: 100%;
+ }
+
+ .switchLabel {
+ font-size: 1.0rem;
+ display: inline;
+ vertical-align: middle;
+ position: relative;
+ bottom: 1px;
+ color: #666;
+ }
+
+ /* https://www.w3schools.com/howto/howto_css_switch.asp */
+ /* The switch - the box around the slider */
+ .switch {
+ top: 3px;
+ position: relative;
+ display: inline-block;
+ width: 33px;
+ height: 20px;
+ }
+
+ /* Hide default HTML checkbox */
+ .switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ /* The slider */
+ .sliderToggle {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ .sliderToggle:before {
+ position: absolute;
+ content: "";
+ height: 16px;
+ width: 16px;
+ left: 2px;
+ bottom: 2px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ input:checked+.sliderToggle {
+ background-color: #333333;
+ }
+
+ input:checked+.sliderToggle:before {
+ -webkit-transform: translateX(13px);
+ -ms-transform: translateX(13px);
+ transform: translateX(13px);
+ }
+
+ /* Rounded sliders */
+ .sliderToggle.round {
+ border-radius: 9px;
+ }
+
+ .sliderToggle.round:before {
+ border-radius: 50%;
+ }
+
+ .panel {
+ background: white;
+ -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
+ box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
+ padding: 15px;
+ width: 100%;
+ }
+
+ @media screen and (min-width: 64em) {
+ #tabs {
+ min-height: 635px;
+ }
+ }
+
+ .panel .tabs {
+ border-width: 0;
+ border-bottom-width: 1px;
+ }
+
+ .tabs-title>a[aria-selected=true] {
+ background: transparent;
+ border-bottom: solid #333 2px;
+ }
+
+ .tabs-title>a:focus {
+ background: transparent;
+ }
+
+ /* .twitter-timeline is just while loading twitter */
+ .tabs-title.is-active a,
+ .tabs-title a,
+ .panel>a.twitter-timeline {
+ color: #292F33;
+ font-weight: 300;
+ font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif;
+ font-size: 21px;
+ line-height: 24px;
+ padding: 5px 25px 9px 25px;
+ margin-bottom: -1px;
+ }
+
+ .tabs-content {
+ border: none;
+ }
+
+ .tabs-panel {
+ padding: 15px 0 0 0;
+ }
+
+ .tabs-panel .row {
+ margin-bottom: 15px;
+ }
+
+ .tabs-panel .large-6 iframe {
+ height: 156px;
+ }
+
+ .tabs-panel .large-12 iframe {
+ height: 312px;
+ }
+
+ .tabs-panel .row:last-child {
+ margin-bottom: 0;
+ }
+
+ .expandVideo {
+ position: absolute;
+ bottom: 0;
+ right: -5px;
+ background-color: white;
+ padding: 5px;
+ border-radius: 50%;
+ }
+
+ .large-12 .expandVideo {
+ transform: rotate(180deg);
+ }
+
+ .logo-hero {
+ opacity: 1;
+ transition: opacity 1s;
+ }
+
+ /* hide the white logo when parent has .dark */
+ .dark .logo-hero {
+ opacity: 0;
+ }
+
+ /* tooltip content hidden */
+ .studyThumb .idr_tooltip {
+ display: none;
+ }
+
+ /* tooltip viewer link */
+ .tippy-content a .fa-eye {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ color: white
+ }
+
+ .tippy-content a:hover .fa-eye {
+ color: #1e94e6;
+ }
+
+ .tooltipThumb {
+ float: right;
+ }
+
+ mark {
+ background: yellow;
+ }
+
+ #filterText {
+ display: inline;
+ width: 200px;
+ margin: 0;
+ }
+</style>
+
+
+<header class="marketing-hero">
+
+ {% include 'idr_gallery/background_carousel.html' %}
+ <div class="row homepage text-center">
+ <div class="medium-12 columns">
+ <div style="display: inline-block; position: relative; width:160px; height:62px; margin-bottom: 20px;">
+ <img style="left: 0; position: absolute; width:160px; margin-bottom: 20px;"
+ src="{% static 'idr_gallery/images/logo-idr-dark.svg' %}" alt="IDR logo" class="logo-dark" />
+ <img style="left: 0; position: absolute; width:160px; margin-bottom: 20px;"
+ src="https://idr.openmicroscopy.org/about/img/logos/logo-idr-white.svg" alt="IDR logo" class="logo-hero">
+ </div>
+ <!-- <h1 class="hero-main-header">Image Data Resource</h1> -->
+ <h2 class="hero-subheader small-10 medium-10 large-10 small-offset-1 medium-offset-1 large-offset-1">
+ The Image Data Resource (IDR) is a public repository of image datasets from published scientific studies,
+ where the community can submit, search and access high-quality bio-image data.
+ </h2>
+ <div class="cats">
+ {% for c, data in super_categories.items %}
+ <a href="{% url 'gallery_super_category' super_category=c %}" class="large button sites-button" +
+ style="margin-right: 10px; {% if c == category %}background-color: #ffc107{% endif %}">{{ data.label }}</a>
+ {% endfor %}
+ </div>
+ </div>
+ </div>
+
+ <div id='search-form' class="row horizontal">
+ <div class="small-12 medium-4 large-4 columns">
+ <select id="maprConfig">
+ {% if filter_keys %}
+ <optgroup id="studyKeys" label="Study Attributes">
+ {% for key in filter_keys %}
+ <option value="{% if key.value %}{{ key.value }}{% else %}{{ key }}{% endif %}">
+ {% if key.label %}{{ key.label }}{% else %}{{ key }}{% endif %}
+ </option>`
+ {% endfor %}
+ </optgroup>
+ {% endif %}
+ <optgroup id="maprKeys" style='display:none' label="Image Attributes">
+ <!-- Map-Annotation keys loaded here -->
+ </optgroup>
+ </select>
+ </div>
+ <div style="position: relative" class="small-12 medium-8 large-8 columns">
+ <input id="maprQuery" type="text" placeholder="Type to filter values...">
+ <svg id="spinner" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sync" role="img"
+ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-sync fa-w-16 fa-spin fa-lg">
+ <path fill="currentColor"
+ d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
+ class=""></path>
+ </svg>
+ </div>
+ </div>
+</header>
+
+<div class="row horizontal" style="position: relative; margin-top: 25px; margin-bottom: 15px">
+ <div class="small-12 medium-12 large-12 columns">
+ <div class="panel" style="float: left; width: 100%; color: #333">
+ <div class="stats small-12 medium-4 large-4 columns">
+ <span id="studyCount"></span> Studies
+ </div>
+ <div class="stats small-12 medium-4 large-4 columns">
+ <span id="imageCount"></span> Images
+ </div>
+ <div class="stats small-12 medium-4 large-4 columns">
+ <span id="tbCount"></span> TB
+ </div>
+ </div>
+ </div>
+</div>
+<div class="row horizontal" style="position: relative">
+ <div class="small-12 medium-12 large-12 columns">
+ <div class="panel" style="float: left">
+ <form>
+ <label class="switchLabel">Group Studies by type</label>
+ <label class="switch" style="margin-right: 20px">
+ <input id="groupByType" type="checkbox">
+ <span class="sliderToggle round"></span>
+ </label>
+ <!-- Don't show filter controls for now... -->
+ <div style="display:none;">
+ <label class="switchLabel">or Filter by:</label>
+ <input type="text" id="filterText" placeholder="authors or keywords" />
+ </div>
+ <span class="switchLabel" id="filterResults" style="margin-left: 10px"></span>
+ </form>
+ <div id="studies">
+ <!-- Placeholder thumbnails - updated by render() once studies have loaded -->
+ <script>document.write((new Array(100)).fill(`<div class="studyThumb"></div>`).join(""))</script>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="row horizontal" style="position: relative; margin-top: 15px; margin-bottom: 15px">
+ <div class="stats small-12 medium-9 large-8 columns" style="position: relative">
+ </div>
+</div>
+
+<div class="row horizontal" style="position: relative;">
+ <div class="small-12 medium-12 large-8 columns" style>
+ <div class="panel" id="tabs">
+ <ul class="tabs" data-tabs id="example-tabs">
+ {% for tab in TABS %}
+ <li class="tabs-title {% if forloop.first %} is-active {% endif %}">
+ <a href="#panel{{ forloop.counter }}" {% if forloop.first %} aria-selected="true" {% endif %}>
+ {{ tab.title }}
+ </a>
+ </li>
+ {% endfor %}
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs">
+ {% for tab in TABS %}
+ <div class="tabs-panel {% if forloop.first %} is-active {% endif %}" id="panel{{ forloop.counter }}">
+ {{ tab.text|safe }}
+ {% for video in tab.videos %}
+ <div class="row horizontal">
+ <div class="small-6 medium-6 large-6 columns" style="position: relative;">
+ <iframe id="youtube" width="100%" height="100%" src="https://www.youtube.com/embed/{{ video.id }}"
+ title="YouTube video player" frameborder="0"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+ </iframe>
+ <button title="Expand video" class="expandVideo"><i class="fas fa-angle-right"></i><i
+ class="fas fa-angle-right"></i></button>
+ </div>
+ <div class="columns small-6 medium-6 large-6">
+ <h3>{{video.title}}</h3>
+ {{video.text}}
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+ </div>
+
+ <div class="small-12 medium-12 large-4 columns">
+ <div class="panel" style="padding: 10px">
+ <a class="twitter-timeline" data-height="610" href="https://twitter.com/IDRnews?ref_src=twsrc%5Etfw">
+ Tweets by IDRnews
+ </a>
+ <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+ </div>
+ </div>
+</div>
+
+</div>
+
+<script src="{% static 'idr_gallery/categories.js' %}?_={{VERSION}}"></script>
+<script src="{% static 'idr_gallery/autocomplete.js' %}?_={{VERSION}}"></script>
+
+<script>
+
+ // handle expand/collapse of videos >>
+ $("#tabs").on("click", ".expandVideo", function () {
+ let $row = $(this).closest(".row");
+ // toggle from 2 columns to 1
+ $('.columns', $row).toggleClass("small-12 medium-12 large-12")
+ .toggleClass("small-6 medium-6 large-6");
+ });
+
+ // Handle filtering studies when user types in [filter] text input
+ $("#filterText").on("keyup", function (event) {
+ let text = event.target.value;
+
+ if (text.length == 0) {
+ render();
+ document.getElementById('filterResults').innerHTML = "";
+ return;
+ }
+
+ let results = model.filterStudiesAnyText(text);
+ let html = results.map(studyText => {
+ let [study, matchingStrings] = studyText;
+
+ let regexes = text.split(" ").map(token => new RegExp(token, "i"))
+ function markup(string) {
+ return regexes.reduce((prev, regex) => prev.replace(regex, "<mark>$&</mark>"), string)
+ }
+ let matchingString = matchingStrings.map(markup).join('<br>');
+ let idrId = study.Name.split('-')[0];
+ let pubmed = model.getStudyValue(study, 'PubMed ID')?.split(" ")[1];
+ let authors = model.getStudyValue(study, "Publication Authors") || " ";
+ authors = authors.split(",")[0];
+
+ return `<tr style="font-size: 13px">
+ <td>
+ ${idrId}<br>
+ <span style="white-space:nowrap">${pubmed ? `<a target="_blank" href="${pubmed}"> ${authors} et. al </a>` : `<b> ${authors} et. al </b>`}</span><br>
+ <a target="_blank" href="${BASE_URL}webclient/?show=${study.objId}">
+ <img src="${study.thumbnail}"/><br>
+ ${study.Name.split("/").pop()}
+ </a>
+ </td>
+ <td>${matchingString}</td>
+ </tr>`
+ }).join("\n");
+
+ if (results.length == 0) {
+ html = "No studies found"
+ if (SUPER_CATEGORY) {
+ if (SUPER_CATEGORY.id === "cell") {
+ html += ` in Cell IDR. Try searching <a href="${GALLERY_INDEX}">all Studies in IDR</a>.`;
+ } else if (SUPER_CATEGORY.id === "tissue") {
+ html += ` in Tissue IDR. Try searching <a href="${GALLERY_INDEX}">all Studies in IDR</a>.`;
+ }
+ } else {
+ html += ". Try searching for Image attributes above."
+ }
+ }
+
+ let containerCount = results.length;
+ let idrIds = results.map(r => r[0].Name.split("-")[0]);
+ let studyCount = (new Set(idrIds)).size;
+
+ document.getElementById('filterResults').innerHTML = `found ${containerCount} containers in ${studyCount} studies`;
+ document.getElementById('studies').innerHTML = `<table>${html}</table>`;
+ });
+</script>
+
+{% endblock %}
diff --git a/omero_gallery/templates/webgallery/categories/search.html b/idr_gallery/templates/idr_gallery/search.html
similarity index 77%
rename from omero_gallery/templates/webgallery/categories/search.html
rename to idr_gallery/templates/idr_gallery/search.html
index ac19241d..5fc71751 100644
--- a/omero_gallery/templates/webgallery/categories/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -1,5 +1,5 @@
-{% extends "webgallery/categories/base.html" %}
+{% extends "idr_gallery/base.html" %}
{% block content %}
@@ -57,8 +57,15 @@ <h2 class="search-by">Search by:</h2>
<div style="padding:0" class="small-12 medium-4 large-3 columns">
<select id="maprConfig">
<optgroup id="studyKeys" style='display:none' label="Study Attributes">
- <!-- Map-Annotation keys loaded here -->
- </optgroup>
+ {% if filter_keys %}
+ <optgroup id="studyKeys" label="Study Attributes">
+ {% for key in filter_keys %}
+ <option value="{% if key.value %}{{ key.value }}{% else %}{{ key }}{% endif %}">
+ {% if key.label %}{{ key.label }}{% else %}{{ key }}{% endif %}
+ </option>`
+ {% endfor %}
+ </optgroup>
+ {% endif %}
<optgroup id="maprKeys" style='display:none' label="Image Attributes">
</optgroup>
</select>
@@ -72,7 +79,7 @@ <h2 class="search-by">Search by:</h2>
{% if category %}
href="{% url 'gallery_super_category' super_category=category %}"
{% else %}
- href="{% url 'webgallery_index' %}"
+ href="{% url 'idr_gallery_index' %}"
{% endif %}
>X</a>
</div>
@@ -97,18 +104,22 @@ <h2 class="search-by">Search by:</h2>
<script>
// Various global constants from omero config set...
- var FILTER_KEYS = {{ filter_keys|escape|safe }};
- var FILTER_MAPR_KEYS = {{ filter_mapr_keys|escape|safe }};
- const GALLERY_INDEX = "{% url 'webgallery_index' %}";
+ var FILTER_KEYS = {{ filter_keys|safe }};
+ var FILTER_MAPR_KEYS = {{ filter_mapr_keys|safe }};
+ // e.g. GALLEY_INDEX/api-gallery/thumbnails for loading from IDR
+ const GALLERY_INDEX = "{{ gallery_index }}";
+ // this is the home of this app, e.g. for GALLERY_HOME/search/
+ const GALLERY_HOME = "{% url 'idr_gallery_index' %}";
const BASE_URL = "{{ base_url }}";
- const CATEGORY_QUERIES = {{ category_queries|escape|safe }};
- var TITLE_KEYS = {{ TITLE_KEYS|escape|safe }};
- var STUDY_SHORT_NAME = {{ STUDY_SHORT_NAME|escape|safe }};
- var SUPER_CATEGORIES = {{ SUPER_CATEGORIES|escape|safe }};
- var SUPER_CATEGORY {% if super_category %} = {{ super_category|escape|safe }} {% endif %};
+ const CATEGORY_QUERIES = {{ category_queries|safe }};
+ var TITLE_KEYS = {{ TITLE_KEYS|safe }};
+ var STUDY_SHORT_NAME = {{ STUDY_SHORT_NAME|safe }};
+ var SUPER_CATEGORIES = {{ SUPER_CATEGORIES|safe }};
+ var SUPER_CATEGORY {% if super_category %} = {{ super_category|safe }} {% endif %};
var STATIC_DIR = "{% static 'gallery/' %}";
</script>
-<script src="{% static 'gallery/search.js' %}"></script>
+<script src="{% static 'idr_gallery/search.js' %}?_={{VERSION}}"></script>
+<script src="{% static 'idr_gallery/autocomplete.js' %}?_={{VERSION}}"></script>
{% endblock %}
diff --git a/idr_gallery/urls.py b/idr_gallery/urls.py
new file mode 100644
index 00000000..75e09d56
--- /dev/null
+++ b/idr_gallery/urls.py
@@ -0,0 +1,25 @@
+from django.conf.urls import url
+from .gallery_settings import SUPER_CATEGORIES
+
+from . import views
+
+urlpatterns = [
+ # index 'home page' of the idr_gallery app
+ url(r'^$', views.index, name='idr_gallery_index'),
+
+ # All settings as JSON
+ url(r'^gallery_settings/$', views.gallery_settings),
+
+ # Search page shows Projects / Screens filtered by Map Annotation
+ url(r'^search/$', views.index, {'super_category': None, 'template': 'idr_gallery/search.html'}),
+
+ # Supports e.g. ?project=1&project=2&screen=3
+ url(r'^gallery-api/thumbnails/$', views.api_thumbnails,
+ name='idr_gallery_api_thumbnails'),
+]
+
+for c in SUPER_CATEGORIES:
+ urlpatterns.append(url(r'^%s/$' % c, views.index, {'super_category': c},
+ name="gallery_super_category"))
+ urlpatterns.append(url(r'^%s/search/$' % c, views.index,
+ {'super_category': c, 'template': 'idr_gallery/search.html'}))
diff --git a/idr_gallery/version.py b/idr_gallery/version.py
new file mode 100644
index 00000000..237b47d6
--- /dev/null
+++ b/idr_gallery/version.py
@@ -0,0 +1,4 @@
+
+# This can be loaded via the app.
+# It will be updated by bumpversion
+VERSION = '3.4.2.dev0'
diff --git a/idr_gallery/views.py b/idr_gallery/views.py
new file mode 100644
index 00000000..d1fbd521
--- /dev/null
+++ b/idr_gallery/views.py
@@ -0,0 +1,178 @@
+from django.http import Http404
+from django.urls import reverse, NoReverseMatch
+import json
+import logging
+import base64
+
+import omero
+from omero.rtypes import wrap, rlong
+from omeroweb.webclient.decorators import login_required, render_response
+from omeroweb.api.decorators import login_required as api_login_required
+from omeroweb.api.api_settings import API_MAX_LIMIT
+
+try:
+ from omero_marshal import get_encoder
+except ImportError:
+ get_encoder = None
+
+from . import gallery_settings as settings
+from .data.background_images import IDR_IMAGES, TISSUE_IMAGES, CELL_IMAGES
+from .data.tabs import TABS
+from .version import VERSION
+
+logger = logging.getLogger(__name__)
+MAX_LIMIT = max(1, API_MAX_LIMIT)
+
+@login_required()
+@render_response()
+def index(request, super_category=None, conn=None, **kwargs):
+ """
+ Home page shows a list of groups OR a set of 'categories' from
+ user-configured queries.
+ """
+
+ category_queries = settings.CATEGORY_QUERIES
+ # template is different for '/search' page
+ context = {'template': kwargs.get('template', "idr_gallery/index.html")}
+ context['favicon'] = settings.FAVICON
+ context['gallery_title'] = settings.GALLERY_TITLE
+ context['top_right_links'] = settings.TOP_RIGHT_LINKS
+ context['top_left_logo'] = settings.TOP_LEFT_LOGO
+ context['IDR_STUDIES_URL'] = settings.IDR_STUDIES_URL
+ try:
+ href = context['top_left_logo'].get('href', 'idr_gallery_index')
+ context['top_left_logo']['href'] = reverse(href)
+ except NoReverseMatch:
+ pass
+ # used by /search page
+ context['SUPER_CATEGORIES'] = json.dumps(settings.SUPER_CATEGORIES)
+ context['filter_keys'] = settings.FILTER_KEYS
+ context['TITLE_KEYS'] = json.dumps(settings.TITLE_KEYS)
+ context['STUDY_SHORT_NAME'] = json.dumps(settings.STUDY_SHORT_NAME)
+ context['filter_mapr_keys'] = json.dumps(
+ settings.FILTER_MAPR_KEYS)
+ context['super_categories'] = settings.SUPER_CATEGORIES
+ category = settings.SUPER_CATEGORIES.get(super_category)
+ if category is not None:
+ category['id'] = super_category
+ context['super_category'] = json.dumps(category)
+ context['category'] = super_category
+ base_url = reverse('index')
+ if settings.BASE_URL is not None:
+ base_url = settings.BASE_URL
+ context['base_url'] = base_url
+ context['gallery_index'] = reverse('idr_gallery_index')
+ if settings.GALLERY_INDEX is not None:
+ context['gallery_index'] = settings.GALLERY_INDEX
+ context['category_queries'] = json.dumps(category_queries)
+ context["idr_images"] = IDR_IMAGES
+ if super_category == "cell":
+ context["idr_images"] = CELL_IMAGES
+ elif super_category == "tissue":
+ context["idr_images"] = TISSUE_IMAGES
+ context["TABS"] = TABS
+ context["VERSION"] = VERSION
+ return context
+
+
+@render_response()
+def gallery_settings(request):
+ """Return all settings as JSON."""
+
+ attrs = ['CATEGORY_QUERIES',
+ 'GALLERY_TITLE',
+ 'FILTER_KEYS',
+ 'TITLE_KEYS',
+ 'FILTER_MAPR_KEYS',
+ 'SUPER_CATEGORIES',
+ 'BASE_URL',
+ 'TOP_RIGHT_LINKS',
+ 'TOP_LEFT_LOGO',
+ 'FAVICON',
+ 'STUDY_SHORT_NAME',
+ ]
+
+ context = {}
+ for attr in attrs:
+ try:
+ context[attr] = getattr(settings, attr)
+ except AttributeError:
+ pass
+
+ return context
+
+
+def _get_study_images(conn, obj_type, obj_id, limit=1, offset=0, tag_text=None):
+
+ query_service = conn.getQueryService()
+ params = omero.sys.ParametersI()
+ params.addId(obj_id)
+ params.theFilter = omero.sys.Filter()
+ params.theFilter.limit = wrap(limit)
+ params.theFilter.offset = wrap(offset)
+ and_text_value = ""
+ if tag_text is not None:
+ params.addString("tag_text", tag_text)
+ and_text_value = " and annotation.textValue = :tag_text"
+
+ if obj_type == "project":
+ query = "select i from Image as i"\
+ " left outer join i.datasetLinks as dl"\
+ " join dl.parent as dataset"\
+ " left outer join dataset.projectLinks"\
+ " as pl join pl.parent as project"\
+ " left outer join i.annotationLinks as al"\
+ " join al.child as annotation"\
+ " where project.id = :id%s" % and_text_value
+
+ elif obj_type == "screen":
+ query = ("select i from Image as i"
+ " left outer join i.wellSamples as ws"
+ " join ws.well as well"
+ " join well.plate as pt"
+ " left outer join pt.screenLinks as sl"
+ " join sl.parent as screen"
+ " left outer join i.annotationLinks as al"\
+ " join al.child as annotation"\
+ " where screen.id = :id%s"
+ " order by well.column, well.row" % and_text_value)
+
+ objs = query_service.findAllByQuery(query, params, conn.SERVICE_OPTS)
+
+ return objs
+
+
+@render_response()
+@api_login_required() # 403 JsonResponse if not logged in
+def api_thumbnails(request, conn=None, **kwargs):
+ """
+ Return data like
+ { project-1: {thumbnail: base64data, image: {id:1}} }
+ """
+ project_ids = request.GET.getlist('project')
+ screen_ids = request.GET.getlist('screen')
+
+ image_ids = {}
+ for obj_type, ids in zip(['project', 'screen'], [project_ids, screen_ids]):
+ for obj_id in ids:
+ images = _get_study_images(conn, obj_type, obj_id, tag_text="Study Example Image")
+ if len(images) == 0:
+ # None found with Tag - just load untagged image
+ images = _get_study_images(conn, obj_type, obj_id)
+ if len(images) > 0:
+ image_ids[images[0].id.val] = "%s-%s" % (obj_type, obj_id)
+
+ thumbnails = conn.getThumbnailSet([rlong(i) for i in image_ids.keys()], 96)
+ rv = {}
+ for i, obj_id in image_ids.items():
+ rv[obj_id] = {"image": {'id': i}}
+ try:
+ t = thumbnails[i]
+ if len(t) > 0:
+ # replace thumbnail urls by base64 encoded image
+ rv[obj_id]["thumbnail"] = ("data:image/jpeg;base64,%s" %
+ base64.b64encode(t).decode("utf-8"))
+
+ except KeyError:
+ logger.error("Thumbnail not available. (img id: %d)" % i)
+ return rv
diff --git a/omero_gallery/__init__.py b/omero_gallery/__init__.py
deleted file mode 100644
index 6417a94b..00000000
--- a/omero_gallery/__init__.py
+++ /dev/null
@@ -1 +0,0 @@
-default_app_config = 'omero_gallery.apps.GalleryAppConfig'
diff --git a/omero_gallery/static/gallery/categories.js b/omero_gallery/static/gallery/categories.js
deleted file mode 100644
index a7005c3b..00000000
--- a/omero_gallery/static/gallery/categories.js
+++ /dev/null
@@ -1,369 +0,0 @@
-"use strict";
-
-// Copyright (C) 2019-2020 University of Dundee & Open Microscopy Environment.
-// All rights reserved.
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <http://www.gnu.org/licenses/>.
-// NB: SOURCE FILES are under /src. Compiled files are under /static/
-// loaded below
-var mapr_settings = {}; // Model for loading Projects, Screens and their Map Annotations
-
-var model = new StudiesModel(); // ----- event handling --------
-
-document.getElementById('maprConfig').onchange = function (event) {
- document.getElementById('maprQuery').value = '';
- var value = event.target.value.replace('mapr_', '');
- var placeholder = "Type to filter values...";
-
- if (mapr_settings[value]) {
- placeholder = "Type ".concat(mapr_settings[value]['default'][0], "...");
- }
-
- document.getElementById('maprQuery').placeholder = placeholder; // Show all autocomplete options...
-
- $("#maprQuery").focus();
- render();
-};
-
-document.getElementById('maprQuery').onfocus = function (event) {
- $("#maprQuery").autocomplete("search", event.target.value);
-}; // ------ AUTO-COMPLETE -------------------
-
-
-function showSpinner() {
- document.getElementById('spinner').style.visibility = 'visible';
-}
-
-function hideSpinner() {
- document.getElementById('spinner').style.visibility = 'hidden';
-}
-
-$("#maprQuery").keyup(function (event) {
- if (event.which == 13) {
- var configId = document.getElementById("maprConfig").value;
- document.location.href = "search/?query=".concat(configId, ":").concat(event.target.value);
- }
-}).autocomplete({
- autoFocus: false,
- delay: 1000,
- source: function source(request, response) {
- // if configId is not from mapr, we filter on mapValues...
- var configId = document.getElementById("maprConfig").value;
-
- if (configId.indexOf('mapr_') != 0) {
- var matches;
-
- if (configId === 'Name') {
- matches = model.getStudiesNames(request.term);
- } else if (configId === 'Group') {
- matches = model.getStudiesGroups(request.term);
- } else {
- matches = model.getKeyValueAutoComplete(configId, request.term);
- }
-
- response(matches);
- return;
- } // Don't handle empty query for mapr
-
-
- if (request.term.length == 0) {
- return;
- } // Auto-complete to filter by mapr...
-
-
- configId = configId.replace('mapr_', '');
- var case_sensitive = false;
- var requestData = {
- case_sensitive: case_sensitive
- };
- var url;
-
- if (request.term.length === 0) {
- // Try to list all top-level values.
- // This works for 'wild-card' configs where number of values is small e.g. Organism
- // But will return empty list for e.g. Gene
- url = "".concat(BASE_URL, "mapr/api/").concat(configId, "/");
- requestData.orphaned = true;
- } else {
- // Find auto-complete matches
- url = "".concat(BASE_URL, "mapr/api/autocomplete/").concat(configId, "/");
- requestData.value = case_sensitive ? request.term : request.term.toLowerCase();
- requestData.query = true; // use a 'like' HQL query
- }
-
- showSpinner();
- $.ajax({
- dataType: "json",
- type: 'GET',
- url: url,
- data: requestData,
- success: function success(data) {
- hideSpinner();
-
- if (request.term.length === 0) {
- // Top-level terms in 'maps'
- if (data.maps && data.maps.length > 0) {
- var terms = data.maps.map(function (m) {
- return m.id;
- });
- terms.sort();
- response(terms);
- }
- } else if (data.length > 0) {
- response($.map(data, function (item) {
- return item;
- }));
- } else {
- response([{
- label: 'No results found.',
- value: -1
- }]);
- }
- },
- error: function error(data) {
- hideSpinner();
- response([{
- label: 'Error occured.',
- value: -1
- }]);
- }
- });
- },
- minLength: 0,
- open: function open() {},
- close: function close() {
- // $(this).val('');
- return false;
- },
- focus: function focus(event, ui) {},
- select: function select(event, ui) {
- if (ui.item.value == -1) {
- // Ignore 'No results found'
- return false;
- } // show temp message in case loading search page is slow
-
-
- $(this).val("loading search results..."); // Load search page...
-
- var configId = document.getElementById("maprConfig").value;
- document.location.href = "search/?query=".concat(configId, ":").concat(ui.item.value);
- return false;
- }
-}).data("ui-autocomplete")._renderItem = function (ul, item) {
- return $("<li>").append("<a>" + item.label + "</a>").appendTo(ul);
-}; // ------------ Render -------------------------
-
-
-function render() {
- document.getElementById('studies').innerHTML = "";
- var categories = Object.keys(CATEGORY_QUERIES); // Sort by index
-
- categories.sort(function (a, b) {
- var idxA = CATEGORY_QUERIES[a].index;
- var idxB = CATEGORY_QUERIES[b].index;
- return idxA > idxB ? 1 : idxA < idxB ? -1 : 0;
- }); // Link to the study in webclient...
-
- var linkFunc = function linkFunc(studyData) {
- var type = studyData['@type'].split('#')[1].toLowerCase();
- return "".concat(BASE_URL, "webclient/?show=").concat(type, "-").concat(studyData['@id']);
- };
-
- categories.forEach(function (category) {
- var cat = CATEGORY_QUERIES[category];
- var query = cat.query; // Find matching studies
-
- var matches = model.filterStudiesByMapQuery(query);
- if (matches.length == 0) return;
- var elementId = cat.label;
- var div = document.createElement("div"); // If only ONE category...
-
- if (categories.length == 1) {
- // list studies in a grid, without category.label
- div.innerHTML = "<div id=\"".concat(elementId, "\" class=\"row horizontal studiesLayout\"></div>");
- div.className = "row";
- } else {
- div.innerHTML = "\n <h1 title=\"".concat(query, "\" style=\"margin-left:10px\">\n ").concat(cat.label, " (").concat(matches.length, ")\n </h1>\n <div class=\"category\">\n <div id=\"").concat(elementId, "\"></div>\n </div>\n ");
- }
-
- document.getElementById('studies').appendChild(div);
- matches.forEach(function (study) {
- return renderStudy(study, elementId, linkFunc);
- });
- }); // Now we iterate all Studies in DOM, loading image ID for link and thumbnail
-
- loadStudyThumbnails();
-}
-
-function renderStudy(studyData, elementId, linkFunc) {
- // Add Project or Screen to the page
- var title;
-
- for (var i = 0; i < TITLE_KEYS.length; i++) {
- title = model.getStudyValue(studyData, TITLE_KEYS[i]);
-
- if (title) {
- break;
- }
- }
-
- if (!title) {
- title = studyData.Name;
- }
-
- var type = studyData['@type'].split('#')[1].toLowerCase();
- var studyLink = linkFunc(studyData); // save for later
-
- studyData.title = title;
- var desc = studyData.Description;
- var studyDesc;
-
- if (desc) {
- // If description contains title, use the text that follows
- if (title.length > 0 && desc.indexOf(title) > -1) {
- desc = desc.split(title)[1];
- } // Remove blank lines (and first 'Experiment Description' line)
-
-
- studyDesc = desc.split('\n').filter(function (l) {
- return l.length > 0;
- }).filter(function (l) {
- return l !== 'Experiment Description' && l !== 'Screen Description';
- }).join('\n');
-
- if (studyDesc.indexOf('Version History') > 1) {
- studyDesc = studyDesc.split('Version History')[0];
- }
- }
-
- var shortName = getStudyShortName(studyData);
- var authors = model.getStudyValue(studyData, "Publication Authors") || ""; // Function (and template) are defined where used in index.html
-
- var html = studyHtml({
- studyLink: studyLink,
- studyDesc: studyDesc,
- shortName: shortName,
- title: title,
- authors: authors,
- BASE_URL: BASE_URL,
- type: type
- }, studyData);
- var div = document.createElement("div");
- div.innerHTML = html;
- div.className = "row study ";
- div.dataset.obj_type = type;
- div.dataset.obj_id = studyData['@id'];
- document.getElementById(elementId).appendChild(div);
-} // --------- Render utils -----------
-
-
-function studyHtml(props, studyData) {
- var pubmed = model.getStudyValue(studyData, 'PubMed ID');
-
- if (pubmed) {
- pubmed = pubmed.split(" ")[1];
- }
-
- ;
- var author = props.authors.split(',')[0] || '';
-
- if (author) {
- author = "".concat(author, " et al.");
- author = author.length > 23 ? author.slice(0, 20) + '...' : author;
- }
-
- return "\n <div style='white-space:nowrap'>\n ".concat(props.shortName, "\n ").concat(pubmed ? "<a class='pubmed' target=\"_blank\" href=\"".concat(pubmed, "\"> ").concat(author, "</a>") : author, "\n </div>\n <div class=\"studyImage\">\n <a target=\"_blank\" href=\"").concat(props.studyLink, "\">\n <div style=\"height: 100%; width: 100%\">\n <div class=\"studyText\">\n <p title='").concat(props.studyDesc || '', "'>\n ").concat(props.title, "\n </p>\n </div>\n <div class=\"studyAuthors\">\n ").concat(props.authors, "\n </div>\n </div>\n </a>\n <a class=\"viewerLink\" title=\"Open image in viewer\" target=\"_blank\"\n href=\"\">\n <i class=\"fas fa-eye\"></i>\n </a>\n </div>\n ");
-}
-
-function loadStudyThumbnails() {
- var ids = []; // Collect study IDs 'project-1', 'screen-2' etc
-
- $('div.study').each(function () {
- var obj_id = $(this).attr('data-obj_id');
- var obj_type = $(this).attr('data-obj_type');
-
- if (obj_id && obj_type) {
- ids.push(obj_type + '-' + obj_id);
- }
- }); // Load images
-
- model.loadStudiesThumbnails(ids, function (data) {
- // data is e.g. { project-1: {thumbnail: base64data, image: {id:1}} }
- for (var id in data) {
- var obj_type = id.split('-')[0];
- var obj_id = id.split('-')[1];
- var elements = document.querySelectorAll("div[data-obj_type=\"".concat(obj_type, "\"][data-obj_id=\"").concat(obj_id, "\"]"));
-
- for (var e = 0; e < elements.length; e++) {
- // Find all studies matching the study ID and set src on image
- var element = elements[e];
- var studyImage = element.querySelector('.studyImage');
- studyImage.style.backgroundImage = "url(".concat(data[id].thumbnail, ")"); // viewer link
-
- var iid = data[id].image.id;
- var link = "".concat(BASE_URL, "webclient/img_detail/").concat(iid, "/");
- element.querySelector('a.viewerLink').href = link;
- }
- }
- });
-}
-
-function renderStudyKeys() {
- if (FILTER_KEYS.length > 0) {
- var html = FILTER_KEYS.map(function (key) {
- if (key.label && key.value) {
- return "<option value=\"".concat(key.value, "\">").concat(key.label, "</option>");
- }
-
- return "<option value=\"".concat(key, "\">").concat(key, "</option>");
- }).join("\n");
- document.getElementById('studyKeys').innerHTML = html; // Show the <optgroup> and the whole form
-
- document.getElementById('studyKeys').style.display = 'block';
- document.getElementById('search-form').style.display = 'block';
- }
-}
-
-renderStudyKeys(); // ----------- Load / Filter Studies --------------------
-// Do the loading and render() when done...
-
-model.loadStudies(function () {
- // Immediately filter by Super category
- if (SUPER_CATEGORY && SUPER_CATEGORY.query) {
- model.studies = model.filterStudiesByMapQuery(SUPER_CATEGORY.query);
- }
-
- render();
-}); // Load MAPR config
-
-fetch(BASE_URL + 'mapr/api/config/').then(function (response) {
- return response.json();
-}).then(function (data) {
- mapr_settings = data;
- var options = FILTER_MAPR_KEYS.map(function (key) {
- var config = mapr_settings[key];
-
- if (config) {
- return "<option value=\"mapr_".concat(key, "\">").concat(config.label, "</option>");
- } else {
- return "";
- }
- });
-
- if (options.length > 0) {
- document.getElementById('maprKeys').innerHTML = options.join("\n"); // Show the <optgroup> and the whole form
-
- document.getElementById('maprKeys').style.display = 'block';
- document.getElementById('search-form').style.display = 'block';
- }
-})["catch"](function (err) {
- console.log("mapr not installed (config not available)");
-});
\ No newline at end of file
diff --git a/omero_gallery/static/gallery/model.js b/omero_gallery/static/gallery/model.js
deleted file mode 100644
index 541d084d..00000000
--- a/omero_gallery/static/gallery/model.js
+++ /dev/null
@@ -1,627 +0,0 @@
-"use strict";
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-// Copyright (C) 2019-2020 University of Dundee & Open Microscopy Environment.
-// All rights reserved.
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <http://www.gnu.org/licenses/>.
-// NB: SOURCE FILES are under /src. Compiled files are under /static/
-var StudiesModel = function StudiesModel() {
- "use strict";
-
- this.base_url = BASE_URL;
- this.studies = [];
- this.images = {};
- return this;
-};
-
-StudiesModel.prototype.getStudyById = function getStudyById(typeId) {
- // E.g. 'project-1', or 'screen-2'
- var objType = typeId.split('-')[0];
- var id = typeId.split('-')[1];
-
- for (var i = 0; i < this.studies.length; i++) {
- var study = this.studies[i];
-
- if (study['@id'] == id && study['@type'].split('#')[1].toLowerCase() == objType) {
- return study;
- }
- }
-};
-
-StudiesModel.prototype.getStudiesNames = function getStudiesNames(filterQuery) {
- var names = this.studies.map(function (s) {
- return s.Name;
- });
-
- if (filterQuery) {
- names = names.filter(function (name) {
- return name.toLowerCase().indexOf(filterQuery) > -1;
- });
- }
-
- names.sort(function (a, b) {
- return a.toLowerCase() > b.toLowerCase() ? 1 : -1;
- });
- return names;
-};
-
-StudiesModel.prototype.getStudiesGroups = function getStudiesGroups(filterQuery) {
- var names = [];
- this.studies.forEach(function (study) {
- var groupName = study['omero:details'].group.Name;
-
- if (names.indexOf(groupName) === -1) {
- names.push(groupName);
- }
- });
-
- if (filterQuery) {
- names = names.filter(function (name) {
- return name.toLowerCase().indexOf(filterQuery) > -1;
- });
- }
-
- names.sort(function (a, b) {
- return a.toLowerCase() > b.toLowerCase() ? 1 : -1;
- });
- return names;
-};
-
-StudiesModel.prototype.getStudyValue = function getStudyValue(study, key) {
- if (!study.mapValues) return;
-
- for (var i = 0; i < study.mapValues.length; i++) {
- var kv = study.mapValues[i];
-
- if (kv[0] === key) {
- return kv[1];
- }
- }
-};
-
-StudiesModel.prototype.getStudyValues = function getStudyValues(study, key) {
- if (!study.mapValues) {
- return [];
- }
-
- var matches = [];
-
- for (var i = 0; i < study.mapValues.length; i++) {
- var kv = study.mapValues[i];
-
- if (kv[0] === key) {
- matches.push(kv[1]);
- }
- }
-
- return matches;
-};
-
-StudiesModel.prototype.getKeyValueAutoComplete = function getKeyValueAutoComplete(key, inputText) {
- var _this = this;
-
- inputText = inputText.toLowerCase(); // Get values for key from each study
-
- var values = [];
- this.studies.forEach(function (study) {
- var v = _this.getStudyValues(study, key);
-
- for (var i = 0; i < v.length; i++) {
- values.push(v[i]);
- }
- }); // We want values that match inputText
- // Except for "Publication Authors", where we want words
- // Create dict of {lowercaseValue: origCaseValue}
-
- var matchCounts = values.reduce(function (prev, value) {
- var matches = [];
-
- if (key == "Publication Authors") {
- // Split surnames, ignoring AN initials.
- var names = value.split(/,| and | & /).map(function (n) {
- // Want the surname from e.g. 'Jan Ellenberg' or 'Held M' or 'Øyvind Ødegård-Fougner'
- var words = n.split(" ").filter(function (w) {
- return w.match(/[a-z]/g);
- });
- if (words && words.length == 1) return words[0]; // Surname only
-
- return words && words.length > 1 ? words.slice(1).join(" ") : '';
- }).filter(function (w) {
- return w.length > 0;
- });
- matches = names.filter(function (name) {
- return name.toLowerCase().indexOf(inputText) > -1;
- });
- } else if (value.toLowerCase().indexOf(inputText) > -1) {
- matches.push(value);
- }
-
- matches.forEach(function (match) {
- if (!prev[match.toLowerCase()]) {
- // key is lowercase, value is original case
- prev[match.toLowerCase()] = {
- value: match,
- count: 0
- };
- } // also keep count of matches
-
-
- prev[match.toLowerCase()].count++;
- });
- return prev;
- }, {}); // Make into list and sort by:
- // match at start of phrase > match at start of word > other match
-
- var matchList = [];
-
- for (key in matchCounts) {
- var matchScore = 1;
-
- if (key.indexOf(inputText) == 0) {
- // best match if our text STARTS WITH inputText
- matchScore = 3;
- } else if (key.indexOf(" " + inputText) > -1) {
- // next best if a WORD starts with inputText
- matchScore = 2;
- } // Make a list of sort score, orig text (NOT lowercase keys) and count
-
-
- matchList.push([matchScore, matchCounts[key].value, matchCounts[key].count]);
- } // Sort by the matchScore (hightest first)
-
-
- matchList.sort(function (a, b) {
- if (a[0] < b[0]) return 1;
- if (a[0] > b[0]) return -1; // equal score. Sort by value (lowest first)
-
- if (a[1].toLowerCase() > b[1].toLowerCase()) return 1;
- return -1;
- }); // Return the matches
-
- return matchList.map(function (m) {
- // Auto-complete uses {label: 'X (n)', value: 'X'}
- return {
- label: "".concat(m[1], " (").concat(m[2], ")"),
- value: m[1]
- };
- }).filter(function (m) {
- return m.value.length > 0;
- });
-};
-
-StudiesModel.prototype.loadStudies = function loadStudies(callback) {
- var _this2 = this;
-
- // Load Projects AND Screens, sort them and render...
- Promise.all([fetch(this.base_url + "api/v0/m/projects/?childCount=true"), fetch(this.base_url + "api/v0/m/screens/?childCount=true")]).then(function (responses) {
- return Promise.all(responses.map(function (res) {
- return res.json();
- }));
- }).then(function (_ref) {
- var _ref2 = _slicedToArray(_ref, 2),
- projects = _ref2[0],
- screens = _ref2[1];
-
- _this2.studies = projects.data;
- _this2.studies = _this2.studies.concat(screens.data); // ignore empty studies with no images
-
- _this2.studies = _this2.studies.filter(function (study) {
- return study['omero:childCount'] > 0;
- }); // sort by name, reverse
-
- _this2.studies.sort(function (a, b) {
- var nameA = a.Name.toUpperCase();
- var nameB = b.Name.toUpperCase();
-
- if (nameA < nameB) {
- return 1;
- }
-
- if (nameA > nameB) {
- return -1;
- } // names must be equal
-
-
- return 0;
- }); // load Map Anns for Studies...
-
-
- _this2.loadStudiesMapAnnotations(callback);
- })["catch"](function (err) {
- console.error(err);
- });
-};
-
-StudiesModel.prototype.loadStudiesThumbnails = function loadStudiesThumbnails(ids, callback) {
- var _this3 = this;
-
- var url = GALLERY_INDEX + "gallery-api/thumbnails/"; // remove duplicates
-
- ids = _toConsumableArray(new Set(ids)); // find any thumbnails we already have in hand...
-
- var found = {};
- var toFind = [];
- ids.forEach(function (id) {
- var study = _this3.getStudyById(id);
-
- if (study && study.image && study.thumbnail) {
- found[id] = {
- image: study.image,
- thumbnail: study.thumbnail
- };
- } else {
- toFind.push(id);
- }
- });
-
- if (Object.keys(found).length > 0) {
- callback(found);
- }
-
- toFind = toFind.map(function (id) {
- return id.replace('-', '=');
- });
- var batchSize = 10;
-
- while (toFind.length > 0) {
- var data = toFind.slice(0, batchSize).join("&");
- fetch(url + '?' + data).then(function (response) {
- return response.json();
- }).then(function (data) {
- for (var studyId in data) {
- var study = _this3.getStudyById(studyId);
-
- if (data[studyId]) {
- study.image = data[studyId].image;
- study.thumbnail = data[studyId].thumbnail;
- }
- }
-
- if (callback) {
- callback(data);
- }
- });
- toFind = toFind.slice(batchSize);
- }
-};
-
-StudiesModel.prototype.loadStudiesMapAnnotations = function loadStudiesMapAnnotations(callback) {
- var _this4 = this;
-
- var url = this.base_url + "webclient/api/annotations/?type=map";
- var data = this.studies.map(function (study) {
- return "".concat(study['@type'].split('#')[1].toLowerCase(), "=").concat(study['@id']);
- }).join("&");
- url += '&' + data;
- fetch(url).then(function (response) {
- return response.json();
- }).then(function (data) {
- // populate the studies array...
- // dict of {'project-1' : key-values}
- var annsByParentId = {};
- data.annotations.forEach(function (ann) {
- var key = ann.link.parent["class"]; // 'ProjectI'
-
- key = key.substr(0, key.length - 1).toLowerCase();
- key += '-' + ann.link.parent.id; // project-1
-
- if (!annsByParentId[key]) {
- annsByParentId[key] = [];
- }
-
- annsByParentId[key] = annsByParentId[key].concat(ann.values);
- }); // Add mapValues to studies...
-
- _this4.studies = _this4.studies.map(function (study) {
- // Also set 'type':'screen', 'objId': 'screen-123'
- study.type = study['@type'].split('#')[1].toLowerCase();
- study.id = study['@id'];
- study.objId = "".concat(study.type, "-").concat(study['@id']);
- var values = annsByParentId[study.objId];
-
- if (values) {
- study.mapValues = values;
-
- var releaseDate = _this4.getStudyValue(study, 'Release Date');
-
- if (releaseDate) {
- study.date = new Date(releaseDate);
-
- if (isNaN(study.date.getTime())) {
- study.date = undefined;
- }
- }
- }
-
- return study;
- });
-
- if (callback) {
- callback();
- }
-
- ;
- });
-};
-
-StudiesModel.prototype.filterStudiesByMapQuery = function filterStudiesByMapQuery(query) {
- if (query.startsWith("FIRST") || query.startsWith("LAST")) {
- // E.g. query is 'FIRST10:date' sort by 'date' and return first 10
- var limit = parseInt(query.replace('FIRST', '').replace('LAST', ''));
- var attr = query.split(':')[1];
- var desc = query.startsWith("FIRST") ? -1 : 1; // first filter studies, remove those that don't have 'attr'
-
- var sorted = this.studies.filter(function (study) {
- return study[attr] !== undefined;
- }).sort(function (a, b) {
- var aVal = a[attr];
- var bVal = b[attr]; // If string, use lowercase
-
- aVal = aVal.toLowerCase ? aVal.toLowerCase() : aVal;
- bVal = bVal.toLowerCase ? bVal.toLowerCase() : bVal;
- return aVal < bVal ? desc : aVal > bVal ? -desc : 0;
- });
- return sorted.slice(0, limit);
- }
-
- var matches = this.studies.filter(function (study) {
- // If no key-values loaded, filter out
- if (!study.mapValues) {
- return false;
- }
-
- var match = false; // first split query by AND and OR
-
- var ors = query.split(' OR ');
- ors.forEach(function (term) {
- var allAnds = true;
- var ands = term.split(' AND ');
- ands.forEach(function (mustMatch) {
- var queryKeyValue = mustMatch.split(":");
- var valueMatch = false; // check all key-values (may be duplicate keys) for value that matches
-
- for (var i = 0; i < study.mapValues.length; i++) {
- var kv = study.mapValues[i];
-
- if (kv[0] === queryKeyValue[0]) {
- var value = queryKeyValue[1].trim();
-
- if (value.substr(0, 4) === 'NOT ') {
- value = value.replace('NOT ', '');
-
- if (kv[1].toLowerCase().indexOf(value.toLowerCase()) == -1) {
- valueMatch = true;
- }
- } else if (kv[1].toLowerCase().indexOf(value.toLowerCase()) > -1) {
- valueMatch = true;
- }
- }
- } // if not found, then our AND term fails
-
-
- if (!valueMatch) {
- allAnds = false;
- }
- });
-
- if (allAnds) {
- match = true;
- }
- });
- return match;
- });
- return matches;
-};
-
-StudiesModel.prototype.loadImage = function loadImage(obj_type, obj_id, callback) {
- var _this5 = this;
-
- // Get a sample image ID for 'screen' or 'project'
- var key = "".concat(obj_type, "-").concat(obj_id); // check cache
-
- if (this.images[key]) {
- callback(this.images[key]);
- return;
- }
-
- var limit = 20;
-
- if (obj_type == 'screen') {
- var url = "".concat(this.base_url, "api/v0/m/screens/").concat(obj_id, "/plates/");
- url += '?limit=1'; // just get first plate
-
- fetch(url).then(function (response) {
- return response.json();
- }).then(function (data) {
- obj = data.data[0]; // Jump into the 'middle' of plate to make sure Wells have images
- // NB: Some plates don't have Well at each Row/Column spot. Well_count < Rows * Cols * 0.5
-
- var offset = Math.max(0, parseInt(obj.Rows * obj.Columns * 0.25) - limit);
- var url = "".concat(_this5.base_url, "api/v0/m/plates/").concat(obj['@id'], "/wells/?limit=").concat(limit, "&offset=").concat(offset);
- return fetch(url);
- }).then(function (response) {
- return response.json();
- }).then(function (data) {
- var wellSample;
-
- for (var w = 0; w < data.data.length; w++) {
- if (data.data[w].WellSamples) {
- wellSample = data.data[w].WellSamples[0];
- }
- }
-
- if (!wellSample) {
- console.log('No WellSamples in first Wells!', data);
- return;
- }
-
- _this5.images[key] = wellSample.Image;
- callback(_this5.images[key]);
- return;
- });
- } else if (obj_type == 'project') {
- var _url = "".concat(this.base_url, "api/v0/m/projects/").concat(obj_id, "/datasets/");
-
- _url += '?limit=1'; // just get first plate
-
- fetch(_url).then(function (response) {
- return response.json();
- }).then(function (data) {
- obj = data.data[0];
-
- if (!obj) {
- // No Dataset in Project: ' + obj_id;
- return;
- }
-
- var url = "".concat(_this5.base_url, "api/v0/m/datasets/").concat(obj['@id'], "/images/?limit=1");
- return fetch(url);
- }) // Handle undefined if no Datasets in Project...
- .then(function (response) {
- return response ? response.json() : {};
- }).then(function (data) {
- if (data && data.data && data.data[0]) {
- var image = data.data[0];
- _this5.images[key] = image;
- callback(_this5.images[key]);
- }
- })["catch"](function (error) {
- console.error("Error loading Image for Project: " + obj_id, error);
- });
- }
-};
-
-StudiesModel.prototype.getStudyImage = function getStudyImage(obj_type, obj_id, callback) {
- var _this6 = this;
-
- // Get a sample image ID for 'screen' or 'project'
- var key = "".concat(obj_type, "-").concat(obj_id); // check cache
-
- if (this.images[key]) {
- callback(this.images[key]);
- return;
- }
-
- var url = "".concat(GALLERY_INDEX, "gallery-api/").concat(obj_type, "s/").concat(obj_id, "/images/?limit=1");
- fetch(url).then(function (response) {
- return response.json();
- }).then(function (data) {
- var images = data.data;
-
- if (images.length > 0) {
- _this6.images[key] = images[0];
- }
-
- callback(_this6.images[key]);
- return;
- });
-};
-
-function toTitleCase(text) {
- if (!text || text.length == 0) return text;
- return text[0].toUpperCase() + text.slice(1);
-}
-
-var getStudyShortName = function getStudyShortName(study) {
- var shortName = "".concat(toTitleCase(study.type), ": ").concat(study.id);
-
- if (STUDY_SHORT_NAME) {
- for (var i = 0; i < STUDY_SHORT_NAME.length; i++) {
- var key = STUDY_SHORT_NAME[i]['key'];
- var value = void 0;
- var newShortName = void 0;
-
- if (key === 'Name' || key === 'Description') {
- value = study[key];
- }
-
- if (!value) {
- value = model.getStudyValue(study, key);
- }
-
- if (!value) {
- continue;
- }
-
- if (STUDY_SHORT_NAME[i]['regex'] && STUDY_SHORT_NAME[i]['template']) {
- var re = new RegExp(STUDY_SHORT_NAME[i]['regex']);
- var template = STUDY_SHORT_NAME[i]['template'];
- newShortName = value.replace(re, template);
- } else {
- newShortName = value;
- }
-
- if (newShortName) {
- shortName = newShortName;
- break;
- }
- }
- }
-
- return shortName;
-}; // startsWith polyfill for IE
-
-
-if (!String.prototype.startsWith) {
- String.prototype.startsWith = function (search, pos) {
- return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;
- };
-} // Object.assign polyfill for IE
-
-
-if (typeof Object.assign !== 'function') {
- // Must be writable: true, enumerable: false, configurable: true
- Object.defineProperty(Object, "assign", {
- value: function assign(target, varArgs) {
- // .length of function is 2
- 'use strict';
-
- if (target === null || target === undefined) {
- throw new TypeError('Cannot convert undefined or null to object');
- }
-
- var to = Object(target);
-
- for (var index = 1; index < arguments.length; index++) {
- var nextSource = arguments[index];
-
- if (nextSource !== null && nextSource !== undefined) {
- for (var nextKey in nextSource) {
- // Avoid bugs when hasOwnProperty is shadowed
- if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
- to[nextKey] = nextSource[nextKey];
- }
- }
- }
- }
-
- return to;
- },
- writable: true,
- configurable: true
- });
-}
\ No newline at end of file
diff --git a/omero_gallery/static/gallery/search.js b/omero_gallery/static/gallery/search.js
deleted file mode 100644
index fa8ff60e..00000000
--- a/omero_gallery/static/gallery/search.js
+++ /dev/null
@@ -1,697 +0,0 @@
-"use strict";
-
-// Copyright (C) 2019-2020 University of Dundee & Open Microscopy Environment.
-// All rights reserved.
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <http://www.gnu.org/licenses/>.
-// NB: SOURCE FILES are under /src. Compiled files are under /static/
-// Model for loading Projects, Screens and their Map Annotations
-var model = new StudiesModel();
-var mapr_settings;
-
-function renderStudyKeys() {
- if (FILTER_KEYS.length > 0) {
- var html = FILTER_KEYS.map(function (key) {
- if (key.label && key.value) {
- return "<option value=\"".concat(key.value, "\">").concat(key.label, "</option>");
- }
-
- return "<option value=\"".concat(key, "\">").concat(key, "</option>");
- }).join("\n");
- document.getElementById('studyKeys').innerHTML = html; // Show the <optgroup> and the whole form
-
- document.getElementById('studyKeys').style.display = 'block';
- document.getElementById('search-form').style.display = 'block';
- }
-}
-
-renderStudyKeys(); // FIRST, populate forms from query string
-
-function populateInputsFromSearch() {
- var search = window.location.search.substr(1);
- var query = '';
- var searchParams = search.split('&');
-
- for (var i = 0; i < searchParams.length; i++) {
- var paramSplit = searchParams[i].split('=');
-
- if (paramSplit[0] === 'query') {
- query = paramSplit[1].replace(/%20/g, " ");
- }
- }
-
- if (query) {
- var splitIndex = query.indexOf(':');
- var configId = query.slice(0, splitIndex);
- var value = query.slice(splitIndex + 1);
-
- if (configId && value) {
- document.getElementById("maprConfig").value = configId;
- document.getElementById("maprQuery").value = value;
- var key = configId.replace('mapr_', '');
- var placeholder = "Type to filter values...";
-
- if (mapr_settings && mapr_settings[key]) {
- placeholder = "Type ".concat(mapr_settings[key]['default'][0], "...");
- }
-
- document.getElementById('maprQuery').placeholder = placeholder;
- }
- }
-}
-
-populateInputsFromSearch(); // ------------ Handle MAPR searching or filtering ---------------------
-
-function filterStudiesByMapr(value) {
- $('#studies').removeClass('studiesLayout');
- var configId = document.getElementById("maprConfig").value.replace("mapr_", "");
- document.getElementById('studies').innerHTML = "";
- var key = mapr_settings[value] ? mapr_settings[value].all.join(" or ") : value;
- showFilterSpinner("Finding images with ".concat(configId, ": ").concat(value, "...")); // Get all terms that match (NOT case_sensitive)
-
- var url = "".concat(BASE_URL, "mapr/api/").concat(configId, "/?value=").concat(value, "&case_sensitive=false&orphaned=true");
- $.getJSON(url, function (data) {
- var maprTerms = data.maps.map(function (term) {
- return term.id;
- });
- var termUrls = maprTerms.map(function (term) {
- return "".concat(BASE_URL, "mapr/api/").concat(configId, "/?value=").concat(term);
- }); // Get results for All terms
-
- Promise.all(termUrls.map(function (url) {
- return fetch(url);
- })).then(function (responses) {
- return Promise.all(responses.map(function (res) {
- return res.json();
- }));
- }).then(function (responses) {
- hideFilterSpinner(); // filter studies by each response
-
- var studiesByTerm = responses.map(function (data) {
- return filterStudiesByMaprResponse(data);
- });
- renderMaprMessage(studiesByTerm, maprTerms); // Show table for each...
-
- studiesByTerm.forEach(function (studies, idx) {
- if (studies.length > 0) {
- renderMaprResultsTable(studies, maprTerms[idx]);
- }
- });
- }); // .fail(() => {
- // document.getElementById('filterCount').innerHTML = "Request failed. Server may be busy."
- // })
- });
-}
-
-function filterStudiesByMaprResponse(data) {
- // filter studies by 'screens' and 'projects'
- var imageCounts = {};
- data.screens.forEach(function (s) {
- imageCounts["screen-".concat(s.id)] = s.extra.counter;
- });
- data.projects.forEach(function (s) {
- imageCounts["project-".concat(s.id)] = s.extra.counter;
- });
-
- var filterFunc = function filterFunc(study) {
- var studyId = study['@type'].split('#')[1].toLowerCase() + '-' + study['@id'];
- return imageCounts.hasOwnProperty(studyId);
- };
-
- var filteredStudies = model.studies.filter(filterFunc).map(function (study) {
- var studyId = study['@type'].split('#')[1].toLowerCase() + '-' + study['@id'];
- var studyData = Object.assign({}, study);
- studyData.imageCount = imageCounts[studyId];
- return studyData;
- });
- return filteredStudies;
-}
-
-function renderMaprMessage(studiesByTerm, maprTerms) {
- // for each term e.g. TOP2, top2 etc sum image counts from each study
- var imageCount = studiesByTerm.reduce(function (count, studies) {
- return count + studies.reduce(function (count, study) {
- return count + study.imageCount;
- }, 0);
- }, 0);
- var studyCount = studiesByTerm.reduce(function (count, studies) {
- return count + studies.length;
- }, 0);
- var terms = maprTerms.join('/');
- var filterMessage = "";
-
- if (studyCount === 0) {
- filterMessage = noStudiesMessage();
- } else {
- var configId = document.getElementById("maprConfig").value.replace('mapr_', '');
- var key = configId;
-
- if (mapr_settings && mapr_settings[configId]) {
- key = mapr_settings[key].label;
- }
-
- filterMessage = "<p class=\"filterMessage\">\n Found <strong>".concat(imageCount, "</strong> images with\n <strong>").concat(key, "</strong>: <strong>").concat(terms, "</strong>\n in <strong>").concat(studyCount, "</strong> stud").concat(studyCount == 1 ? 'y' : 'ies', "</strong></p>");
- }
-
- document.getElementById('filterCount').innerHTML = filterMessage;
-}
-
-function renderMaprResultsTable(maprData, term) {
- var configId = document.getElementById("maprConfig").value.replace("mapr_", "");
- var elementId = 'maprResultsTable' + term;
- var html = "\n <h2>".concat(term, "</h2>\n <table class='maprResultsTable' style='margin-top:20px'>\n <tbody data-id='").concat(elementId, "'>\n <tr>\n <th>Study ID</th>\n <th>Organism</th>\n <th>Image count</th>\n <th>Title</th>\n <th>Sample Images</th>\n <th>Link</th>\n </tr>\n </tbody>\n </table>");
- $('#studies').append(html);
- renderMapr(maprData, term);
-} // ----- event handling --------
-
-
-document.getElementById('maprConfig').onchange = function (event) {
- document.getElementById('maprQuery').value = '';
- var value = event.target.value.replace('mapr_', '');
- var placeholder = "Type to filter values...";
-
- if (mapr_settings[value]) {
- placeholder = "Type ".concat(mapr_settings[value]['default'][0], "...");
- }
-
- document.getElementById('maprQuery').placeholder = placeholder; // Show all autocomplete options...
-
- $("#maprQuery").focus();
- render();
-}; // We want to show auto-complete options when user
-// clicks on the field.
-
-
-function showAutocomplete(event) {
- var configId = document.getElementById("maprConfig").value;
- var autoCompleteValue = event.target.value;
-
- if (configId.indexOf('mapr_') != 0) {
- // If not MAPR search, show all auto-complete results
- autoCompleteValue = '';
- }
-
- $("#maprQuery").autocomplete("search", autoCompleteValue);
-}
-
-document.getElementById('maprQuery').onfocus = function (event) {
- showAutocomplete(event);
-};
-
-document.getElementById('maprQuery').onclick = function (event) {
- showAutocomplete(event);
-}; // ------ AUTO-COMPLETE -------------------
-
-
-function showSpinner() {
- document.getElementById('spinner').style.visibility = 'visible';
-}
-
-function hideSpinner() {
- document.getElementById('spinner').style.visibility = 'hidden';
-} // timeout to avoid flash of spinner
-
-
-var filterSpinnerTimout;
-
-function showFilterSpinner(message) {
- filterSpinnerTimout = setTimeout(function () {
- document.getElementById('filterSpinnerMessage').innerHTML = message ? message : '';
- document.getElementById('filterSpinner').style.display = 'block';
- }, 500);
-}
-
-function hideFilterSpinner() {
- clearTimeout(filterSpinnerTimout);
- document.getElementById('filterSpinnerMessage').innerHTML = '';
- document.getElementById('filterSpinner').style.display = 'none';
-}
-
-$("#maprQuery").keyup(function (event) {
- if (event.which == 13) {
- $(event.target).autocomplete("close");
- filterAndRender(); // Add to browser history. Handled by onpopstate on browser Back
-
- var configId = document.getElementById("maprConfig").value;
- window.history.pushState({}, "", "?query=".concat(configId, ":").concat(event.target.value));
- }
-}).autocomplete({
- autoFocus: false,
- delay: 1000,
- source: function source(request, response) {
- // if configId is not from mapr, we filter on mapValues...
- var configId = document.getElementById("maprConfig").value;
-
- if (configId.indexOf('mapr_') != 0) {
- var matches;
-
- if (configId === 'Name') {
- matches = model.getStudiesNames(request.term);
- } else if (configId === 'Group') {
- matches = model.getStudiesGroups(request.term);
- } else {
- matches = model.getKeyValueAutoComplete(configId, request.term);
- }
-
- response(matches); // When not mapr, we filter while typing
-
- filterAndRender();
- return;
- } // Don't handle empty query for mapr
-
-
- if (request.term.length == 0) {
- return;
- } // Auto-complete to filter by mapr...
-
-
- configId = configId.replace('mapr_', '');
- var case_sensitive = false;
- var requestData = {
- case_sensitive: case_sensitive
- };
- var url;
-
- if (request.term.length === 0) {
- // Try to list all top-level values.
- // This works for 'wild-card' configs where number of values is small e.g. Organism
- // But will return empty list for e.g. Gene
- url = "".concat(BASE_URL, "mapr/api/").concat(configId, "/");
- requestData.orphaned = true;
- } else {
- // Find auto-complete matches
- url = "".concat(BASE_URL, "mapr/api/autocomplete/").concat(configId, "/");
- requestData.value = case_sensitive ? request.term : request.term.toLowerCase();
- requestData.query = true; // use a 'like' HQL query
- }
-
- showSpinner();
- $.ajax({
- dataType: "json",
- type: 'GET',
- url: url,
- data: requestData,
- success: function success(data) {
- hideSpinner();
-
- if (request.term.length === 0) {
- // Top-level terms in 'maps'
- if (data.maps && data.maps.length > 0) {
- var terms = data.maps.map(function (m) {
- return m.id;
- });
- terms.sort();
- response(terms);
- }
- } else if (data.length > 0) {
- response($.map(data, function (item) {
- return item;
- }));
- } else {
- response([{
- label: 'No results found.',
- value: -1
- }]);
- }
- },
- error: function error(data) {
- hideSpinner(); // E.g. status 504 for timeout
-
- response([{
- label: 'Loading auto-complete terms failed. Server may be busy.',
- value: -1
- }]);
- }
- });
- },
- minLength: 0,
- open: function open() {},
- close: function close() {
- // $(this).val('');
- return false;
- },
- focus: function focus(event, ui) {},
- select: function select(event, ui) {
- if (ui.item.value == -1) {
- // Ignore 'No results found'
- return false;
- }
-
- $(this).val(ui.item.value);
- filterAndRender(); // Add to browser history. Handled by onpopstate on browser Back
-
- var configId = document.getElementById("maprConfig").value;
- window.history.pushState({}, "", "?query=".concat(configId, ":").concat(ui.item.value));
- return false;
- }
-}).data("ui-autocomplete")._renderItem = function (ul, item) {
- return $("<li>").append("<a>" + item.label + "</a>").appendTo(ul);
-}; // ------------ Render -------------------------
-
-
-function filterAndRender() {
- var configId = document.getElementById("maprConfig").value;
- var value = document.getElementById("maprQuery").value;
-
- if (!value) {
- render();
- return;
- }
-
- if (configId.indexOf('mapr_') != 0) {
- // filter studies by Key-Value pairs
- var filterFunc = function filterFunc(study) {
- var toMatch = value.toLowerCase();
-
- if (configId === 'Name') {
- return study.Name.toLowerCase().indexOf(toMatch) > -1;
- }
-
- if (configId === 'Group') {
- var group = study['omero:details'].group;
- return group.Name.toLowerCase().indexOf(toMatch) > -1;
- } // Filter by Map-Annotation Key-Value
-
-
- var show = false;
-
- if (study.mapValues) {
- study.mapValues.forEach(function (kv) {
- if (kv[0] === configId && kv[1].toLowerCase().indexOf(toMatch) > -1) {
- show = true;
- }
- });
- }
-
- return show;
- };
-
- render(filterFunc);
- } else {
- filterStudiesByMapr(value);
- }
-}
-
-function renderMapr(maprData, term) {
- maprData.sort(function (a, b) {
- return a.Name > b.Name ? 1 : -1;
- });
- var elementId = 'maprResultsTable' + term;
- var configId = document.getElementById("maprConfig").value;
-
- var linkFunc = function linkFunc(studyData) {
- var type = studyData['@type'].split('#')[1].toLowerCase();
- var maprKey = configId.replace('mapr_', '');
- return "/mapr/".concat(maprKey, "/?value=").concat(term, "&show=").concat(type, "-").concat(studyData['@id']);
- };
-
- var elementSelector = "[data-id=\"".concat(elementId, "\"]");
- maprData.forEach(function (s) {
- return renderStudy(s, elementSelector, linkFunc, maprHtml);
- }); // load images for each study...
-
- $("[data-id=\"".concat(elementId, "\"] tr")).each(function () {
- // load children in MAPR jsTree query to get images
- var element = this;
- var studyId = element.id;
- var objId = studyId.split("-")[1];
- var objType = studyId.split("-")[0];
- if (!objId || !objType) return;
- var childType = objType === "project" ? "datasets" : "plates";
- var configId = document.getElementById("maprConfig").value.replace('mapr_', '');
- var maprValue = term; // We want to link to the dataset or plate...
-
- var imgContainer;
- var url = "".concat(BASE_URL, "mapr/api/").concat(configId, "/").concat(childType, "/?value=").concat(maprValue, "&id=").concat(objId);
- fetch(url).then(function (response) {
- return response.json();
- }).then(function (data) {
- var firstChild = data[childType][0];
- imgContainer = "".concat(firstChild.extra.node, "-").concat(firstChild.id);
- var imagesUrl = "".concat(BASE_URL, "mapr/api/").concat(configId, "/images/?value=").concat(maprValue, "&id=").concat(firstChild.id, "&node=").concat(firstChild.extra.node);
- return fetch(imagesUrl);
- }).then(function (response) {
- return response.json();
- }).then(function (data) {
- var html = data.images.slice(0, 3).map(function (i) {
- return "\n <a href=\"".concat(BASE_URL, "webclient/img_detail/").concat(i.id, "/\"\n target=\"_blank\" title=\"Open image in viewer\" class=\"maprViewerLink\">\n <div>\n <img class=\"thumbnail\" src=\"").concat(STATIC_DIR, "images/transparent.png\"\n data-src=\"").concat(BASE_URL, "webgateway/render_thumbnail/").concat(i.id, "/\">\n <i class=\"fas fa-eye\"></i>\n </div>\n </a>");
- }).join("");
- var linkHtml = "<a target=\"_blank\" href=\"".concat(BASE_URL, "mapr/").concat(configId, "/?value=").concat(maprValue, "&show=").concat(imgContainer, "\">\n more...\n </a>"); // Find the container and add placeholder images html
-
- $("#" + element.id + " .exampleImages").html(html);
- $("#" + element.id + " .exampleImagesLink").append(linkHtml); // Update the src to load the thumbnails. Timeout to let placeholder render while we wait for thumbs
-
- setTimeout(function () {
- $('img', "#" + element.id).each(function (index, img) {
- img.src = img.dataset.src;
- });
- }, 0);
- });
- });
-}
-
-function render(filterFunc) {
- $('#studies').addClass('studiesLayout');
- document.getElementById('studies').innerHTML = "";
-
- if (!filterFunc) {
- document.getElementById('filterCount').innerHTML = "";
- return;
- }
-
- var studiesToRender = model.studies;
-
- if (filterFunc) {
- studiesToRender = model.studies.filter(filterFunc);
- }
-
- var filterMessage = "";
-
- if (studiesToRender.length === 0) {
- filterMessage = noStudiesMessage();
- } else if (studiesToRender.length < model.studies.length) {
- var configId = document.getElementById("maprConfig").value.replace('mapr_', '');
- configId = mapr_settings && mapr_settings[configId] || configId;
- var maprValue = document.getElementById('maprQuery').value;
- filterMessage = "<p class=\"filterMessage\">\n Found <strong>".concat(studiesToRender.length, "</strong> studies with\n <strong>").concat(configId, "</strong>: <strong>").concat(maprValue, "</strong></p>");
- }
-
- document.getElementById('filterCount').innerHTML = filterMessage; // By default, we link to the study itself in IDR...
-
- var linkFunc = function linkFunc(studyData) {
- var type = studyData['@type'].split('#')[1].toLowerCase();
- return "".concat(BASE_URL, "webclient/?show=").concat(type, "-").concat(studyData['@id']);
- };
-
- var htmlFunc = studyHtml;
- studiesToRender.forEach(function (s) {
- return renderStudy(s, '#studies', linkFunc, htmlFunc);
- });
- loadStudyThumbnails();
-} // When no studies match the filter, show message/link.
-
-
-function noStudiesMessage() {
- var filterMessage = "No matching studies.";
-
- if (SUPER_CATEGORY) {
- var currLabel = SUPER_CATEGORY.label;
- var configId = document.getElementById("maprConfig").value;
- var maprQuery = document.getElementById("maprQuery").value;
- var others = [];
-
- for (var cat in SUPER_CATEGORIES) {
- if (SUPER_CATEGORIES[cat].label !== currLabel) {
- others.push("<a href=\"".concat(GALLERY_INDEX).concat(cat, "/search/?query=").concat(configId, ":").concat(maprQuery, "\">").concat(SUPER_CATEGORIES[cat].label, "</a>"));
- }
- }
-
- if (others.length > 0) {
- filterMessage += " Try " + others.join(" or ");
- }
- }
-
- return filterMessage;
-}
-
-function renderStudy(studyData, elementSelector, linkFunc, htmlFunc) {
- // Add Project or Screen to the page
- var title;
-
- for (var i = 0; i < TITLE_KEYS.length; i++) {
- title = model.getStudyValue(studyData, TITLE_KEYS[i]);
-
- if (title) {
- break;
- }
- }
-
- if (!title) {
- title = studyData.Name;
- }
-
- var type = studyData['@type'].split('#')[1].toLowerCase();
- var studyLink = linkFunc(studyData); // save for later
-
- studyData.title = title;
- var desc = studyData.Description;
- var studyDesc;
-
- if (desc) {
- // If description contains title, use the text that follows
- if (title.length > 0 && desc.indexOf(title) > -1) {
- desc = desc.split(title)[1];
- } // Remove blank lines (and first 'Experiment Description' line)
-
-
- studyDesc = desc.split('\n').filter(function (l) {
- return l.length > 0;
- }).filter(function (l) {
- return l !== 'Experiment Description' && l !== 'Screen Description';
- }).join('\n');
-
- if (studyDesc.indexOf('Version History') > 1) {
- studyDesc = studyDesc.split('Version History')[0];
- }
- }
-
- var shortName = getStudyShortName(studyData);
- var authors = model.getStudyValue(studyData, "Publication Authors") || "";
- var div = htmlFunc({
- studyLink: studyLink,
- studyDesc: studyDesc,
- shortName: shortName,
- title: title,
- authors: authors,
- BASE_URL: BASE_URL,
- type: type
- }, studyData);
- document.querySelector(elementSelector).appendChild(div);
-} // --------- Render utils -----------
-
-
-function studyHtml(props, studyData) {
- var pubmed = model.getStudyValue(studyData, 'PubMed ID');
-
- if (pubmed) {
- pubmed = pubmed.split(" ")[1];
- }
-
- var author = props.authors.split(',')[0] || '';
-
- if (author) {
- author = "".concat(author, " et al.");
- author = author.length > 23 ? author.slice(0, 20) + '...' : author;
- }
-
- var html = "\n <div style='white-space:nowrap'>\n ".concat(props.shortName, "\n ").concat(pubmed ? "<a class='pubmed' target=\"_blank\" href=\"".concat(pubmed, "\"> ").concat(author, "</a>") : author, "\n </div>\n <div class=\"studyImage\">\n <a target=\"_blank\" href=\"").concat(props.studyLink, "\">\n <div style=\"height: 100%; width: 100%\">\n <div class=\"studyText\">\n <p title='").concat(props.studyDesc, "'>\n ").concat(props.title, "\n </p>\n </div>\n <div class=\"studyAuthors\">\n ").concat(props.authors, "\n </div>\n </div>\n </a>\n <a class=\"viewerLink\" title=\"Open image in viewer\" target=\"_blank\"\n href=\"\">\n <i class=\"fas fa-eye\"></i>\n </a>\n </div>\n ");
- var div = document.createElement("div");
- div.innerHTML = html;
- div.id = props.type + '-' + studyData['@id'];
- div.dataset.obj_type = props.type;
- div.dataset.obj_id = studyData['@id'];
- div.className = "row study ";
- return div;
-}
-
-function maprHtml(props, studyData) {
- var html = " \n <td>\n <a target=\"_blank\" href=\"".concat(props.studyLink, "\" />\n ").concat(props.shortName, "\n </a>\n </td>\n <td>").concat(model.getStudyValue(studyData, 'Organism'), "</td>\n <td>").concat(studyData.imageCount, "</td>\n <td title=\"").concat(props.title, "\">").concat(props.title.slice(0, 40)).concat(props.title.length > 40 ? '...' : '', "</td>\n <td class='exampleImages'>loading...</td>\n <td class='exampleImagesLink'></td>\n ");
- var tr = document.createElement("tr");
- tr.innerHTML = html;
- tr.id = props.type + '-' + studyData['@id'];
- tr.dataset.obj_type = props.type;
- tr.dataset.obj_id = studyData['@id'];
- return tr;
-}
-
-function loadStudyThumbnails() {
- var ids = []; // Collect study IDs 'project-1', 'screen-2' etc
-
- $('div.study').each(function () {
- var obj_id = $(this).attr('data-obj_id');
- var obj_type = $(this).attr('data-obj_type');
-
- if (obj_id && obj_type) {
- ids.push(obj_type + '-' + obj_id);
- }
- }); // Load images
-
- model.loadStudiesThumbnails(ids, function (data) {
- // data is e.g. { project-1: {thumbnail: base64data, image: {id:1}} }
- for (var id in data) {
- if (!data[id]) continue; // may be null
-
- var obj_type = id.split('-')[0];
- var obj_id = id.split('-')[1];
- var elements = document.querySelectorAll("div[data-obj_type=\"".concat(obj_type, "\"][data-obj_id=\"").concat(obj_id, "\"]"));
-
- for (var e = 0; e < elements.length; e++) {
- // Find all studies matching the study ID and set src on image
- var element = elements[e];
- var studyImage = element.querySelector('.studyImage');
-
- if (data[id].thumbnail) {
- studyImage.style.backgroundImage = "url(".concat(data[id].thumbnail, ")");
- } // viewer link
-
-
- if (data[id].image && data[id].image.id) {
- var iid = data[id].image.id;
- var link = "".concat(BASE_URL, "webclient/img_detail/").concat(iid, "/");
- element.querySelector('a.viewerLink').href = link;
- }
- }
- }
- });
-} // ----------- Load / Filter Studies --------------------
-// Do the loading and render() when done...
-
-
-model.loadStudies(function () {
- // Immediately filter by Super category
- if (SUPER_CATEGORY && SUPER_CATEGORY.query) {
- model.studies = model.filterStudiesByMapQuery(SUPER_CATEGORY.query);
- }
-
- filterAndRender();
-}); // Handle browser Back and Forwards - redo filtering
-
-window.onpopstate = function (event) {
- populateInputsFromSearch();
- filterAndRender();
-}; // Load MAPR config
-
-
-fetch(BASE_URL + 'mapr/api/config/').then(function (response) {
- return response.json();
-}).then(function (data) {
- mapr_settings = data;
- var options = FILTER_MAPR_KEYS.map(function (key) {
- var config = mapr_settings[key];
-
- if (config) {
- return "<option value=\"mapr_".concat(key, "\">").concat(config.label, "</option>");
- } else {
- return "";
- }
- });
-
- if (options.length > 0) {
- document.getElementById('maprKeys').innerHTML = options.join("\n"); // Show the <optgroup> and the whole form
-
- document.getElementById('maprKeys').style.display = 'block';
- document.getElementById('search-form').style.display = 'block';
- }
-
- populateInputsFromSearch();
-})["catch"](function (err) {
- console.log("mapr not installed (config not available)");
-});
\ No newline at end of file
diff --git a/omero_gallery/templates/webgallery/base/base.html b/omero_gallery/templates/webgallery/base/base.html
deleted file mode 100644
index 0449cdf2..00000000
--- a/omero_gallery/templates/webgallery/base/base.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="">
- <meta name="author" content="">
- <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
-
- <title>{% block title %}{% endblock %}
-
-
-
-
-
-
-
- {% block navbar %}
-
- {% endblock %}
-
-
-
-
- {% block body %}
- {% endblock %}
-
-
-
-
-