From eb5aaaec96fc0fd804a13d0ccceba94673925b71 Mon Sep 17 00:00:00 2001
From: Jeffrey Baumes <jeff.baumes@kitware.com>
Date: Thu, 17 Oct 2024 12:21:16 -0400
Subject: [PATCH 1/3] add tailwind

---
 histomicsui/web_client/views/itemList.js |   4 +-
 histomicsui/webroot.mako                 | 225 +++++++++++++++++++++++
 2 files changed, 227 insertions(+), 2 deletions(-)

diff --git a/histomicsui/web_client/views/itemList.js b/histomicsui/web_client/views/itemList.js
index d3258601..ee9f32f8 100644
--- a/histomicsui/web_client/views/itemList.js
+++ b/histomicsui/web_client/views/itemList.js
@@ -67,8 +67,8 @@ wrap(ItemListWidget, 'render', function (render) {
         const webrootPath = (settings['histomicsui.webroot_path'] || '');
         if (!this.$el.closest('.modal-dialog').length) {
             for (let ix = 0; ix < this.collection.length; ix++) {
-                if (!this.$el.find('.g-item-list li.g-item-list-entry:eq(' + ix + ') .g-hui-open-link').length && this.collection.models[ix].attributes.largeImage) {
-                    this.$el.find('.g-item-list li.g-item-list-entry:eq(' + ix + ') a[class^=g-]:last').after(
+                if (!this.$el.find('.g-item-list .g-item-list-entry:eq(' + ix + ') .g-hui-open-link').length && this.collection.models[ix].attributes.largeImage) {
+                    this.$el.find('.g-item-list .g-item-list-entry:eq(' + ix + ') a[class^=g-]:last').after(
                         `<a class="g-hui-open-link" title="Open in ${brandName}" href="${webrootPath}#?image=${this.collection.models[ix].id}" target="_blank"><i class="icon-link-ext"></i></a>`
                     );
                 }
diff --git a/histomicsui/webroot.mako b/histomicsui/webroot.mako
index b2b6a434..e58b2b13 100644
--- a/histomicsui/webroot.mako
+++ b/histomicsui/webroot.mako
@@ -8,6 +8,231 @@
     % for plugin in pluginCss:
     <link rel="stylesheet" href="${staticPublicPath}/built/plugins/${plugin}/plugin.min.css">
     % endfor
+    <link rel="stylesheet" href="${staticPublicPath}/built/extras/extra.css">
+    <!-- TODO: In Girder 5 install tailwind the right way -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            DEFAULT: 'hsl(var(--primary-h), var(--primary-s), var(--primary-l))',
+                            hover: 'var(--primary-hover)',
+                            content: 'var(--primary-content)',
+                        },
+                        secondary: {
+                            DEFAULT: 'hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l))',
+                            hover: 'var(--secondary-hover)',
+                            content: 'var(--secondary-content)',
+                        },
+                        accent: {
+                            DEFAULT: 'hsl(var(--accent-h), var(--accent-s), var(--accent-l))',
+                            hover: 'var(--accent-hover)',
+                            content: 'var(--accent-content)',
+                        },
+                    },
+                    zIndex: {
+                        '100': '100',
+                    },
+                },
+            },
+            plugins: [],
+            blocklist: ['collapse'], // disable because bootstrap uses it for something else
+        };
+    </script>
+
+<style type="text/tailwindcss">
+    @layer base {
+        :root {
+            /* User-defined hex values */
+            --primary: ${bannerColor};
+            --secondary: ${bannerColor};
+            --accent: ${bannerColor};
+        }
+
+        body {
+            @apply bg-zinc-100;
+        }
+
+        /* Typography Styles */
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            @apply font-bold;
+        }
+
+        h1 {
+            @apply text-4xl;
+        }
+
+        h2 {
+            @apply text-3xl;
+        }
+
+        h3 {
+            @apply text-2xl;
+        }
+
+        h4 {
+            @apply text-xl;
+        }
+
+        h5 {
+            @apply text-lg;
+        }
+
+        h6 {
+            @apply text-base;
+        }
+    }
+
+    @layer components {
+
+        /*
+        Define button styles:
+            1. Sizes
+            2. Colors
+            3. Types
+        */
+
+        .htk-btn {
+            @apply duration-200 ease-in-out inline-flex items-center justify-center px-3 py-[6px] rounded-md text-base tracking-wider transition-all gap-2 h-9;
+        }
+
+        .htk-btn i {
+            @apply leading-[0];
+        }
+
+        /* 1. Sizes */
+
+        .htk-btn.htk-btn-lg {
+            @apply px-4 text-lg h-11;
+        }
+
+        .htk-btn.htk-btn-sm {
+            @apply px-[10px] text-sm h-[30px] gap-1;
+        }
+
+        .htk-btn.htk-btn-xs {
+            @apply px-[7px] rounded text-xs h-[22px] gap-1;
+        }
+
+        /* 2. Colors */
+
+        .htk-btn.htk-btn-primary {
+            @apply bg-primary text-primary-content;
+        }
+
+        .htk-btn.htk-btn-primary:hover {
+            @apply bg-primary-hover;
+        }
+
+        .htk-btn.htk-btn-secondary {
+            @apply bg-secondary text-secondary-content;
+        }
+
+        .htk-btn.htk-btn-secondary:hover {
+            @apply bg-secondary-hover;
+        }
+
+        .htk-btn.htk-btn-accent {
+            @apply bg-accent text-accent-content;
+        }
+
+        .htk-btn.htk-btn-accent:hover {
+            @apply bg-accent-hover;
+        }
+
+        /* 3. Types
+                a. Ghost
+                b. Icon Only
+                c. Disabled
+        */
+
+        /* a. Ghost */
+
+        .htk-btn.htk-btn-ghost {
+            @apply bg-neutral-800 bg-opacity-0;
+        }
+
+        .htk-btn.htk-btn-ghost:hover {
+            @apply bg-opacity-10;
+        }
+
+        /* Primary Color */
+
+        .htk-btn.htk-btn-primary.htk-btn-ghost {
+            background-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0);
+            @apply text-primary;
+        }
+        .htk-btn.htk-btn-primary.htk-btn-ghost:hover {
+            background-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
+        }
+
+        /* Secondary Color */
+
+        .htk-btn.htk-btn-secondary.htk-btn-ghost {
+            background-color: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0);
+            @apply text-secondary;
+        }
+        .htk-btn.htk-btn-secondary.htk-btn-ghost:hover {
+            background-color: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.1);
+        }
+
+        /* Accent Color */
+
+        .htk-btn.htk-btn-accent.htk-btn-ghost {
+            background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0);
+            @apply text-accent;
+        }
+        .htk-btn.htk-btn-accent.htk-btn-ghost:hover {
+            background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
+        }
+
+        /* b. Icon Only */
+
+        .htk-btn.htk-btn-icon {
+            /* "tracking-[0]" ensures icons are always centered when using icon fonts */
+            @apply rounded-full !leading-none text-xl w-9 aspect-square tracking-[0];
+        }
+
+        /* Large */
+
+        .htk-btn.htk-btn-icon.htk-btn-lg {
+            @apply text-2xl w-11;
+        }
+
+        /* Small */
+
+        .htk-btn.htk-btn-icon.htk-btn-sm {
+            @apply text-lg w-[30px];
+        }
+
+        /* X-Small */
+
+        .htk-btn.htk-btn-icon.htk-btn-xs {
+            @apply text-sm w-[22px];
+        }
+
+        /* c. Disabled */
+        .htk-btn.htk-btn-disabled {
+            @apply bg-neutral-200 border border-neutral-300 text-neutral-400 !cursor-not-allowed;
+        }
+
+        /* Use this instead of Tailwind's hidden until we remove bootstrap */
+        /* Required for now to account for the fact that bootstrap has !important on .hidden */
+        .htk-hidden {
+            display: none;
+        }
+    }
+  </style>
+
+
   </head>
   <body>
     <div id="g-global-info-apiroot" class="hide">${apiRoot}</div>

From 611380c57e0b5721bf3c6e3fd20430b1bea1f15b Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Fri, 11 Oct 2024 16:42:28 -0400
Subject: [PATCH 2/3] Add and support app buttons.

This requires an appropriately new version in large_image.

Future work is to support app icons.  Those should probably be
configurable before any are merged in.
---
 histomicsui/web_client/views/itemList.js | 35 +++++++++++++++++-------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/histomicsui/web_client/views/itemList.js b/histomicsui/web_client/views/itemList.js
index d3258601..577e9ba1 100644
--- a/histomicsui/web_client/views/itemList.js
+++ b/histomicsui/web_client/views/itemList.js
@@ -4,7 +4,7 @@ import {wrap} from '@girder/core/utilities/PluginUtils';
 import {AccessType} from '@girder/core/constants';
 import {restRequest} from '@girder/core/rest';
 import events from '@girder/core/events';
-import ItemListWidget from '@girder/core/views/widgets/ItemListWidget';
+import ItemListWidget from '@girder/large_image/views/itemList';
 
 import {HuiSettings} from './utils';
 
@@ -63,17 +63,32 @@ wrap(ItemListWidget, 'render', function (render) {
     }
 
     HuiSettings.getSettings().then((settings) => {
-        const brandName = (settings['histomicsui.brand_name'] || '');
-        const webrootPath = (settings['histomicsui.webroot_path'] || '');
-        if (!this.$el.closest('.modal-dialog').length) {
-            for (let ix = 0; ix < this.collection.length; ix++) {
-                if (!this.$el.find('.g-item-list li.g-item-list-entry:eq(' + ix + ') .g-hui-open-link').length && this.collection.models[ix].attributes.largeImage) {
-                    this.$el.find('.g-item-list li.g-item-list-entry:eq(' + ix + ') a[class^=g-]:last').after(
-                        `<a class="g-hui-open-link" title="Open in ${brandName}" href="${webrootPath}#?image=${this.collection.models[ix].id}" target="_blank"><i class="icon-link-ext"></i></a>`
-                    );
+        const brandName = (settings['histomicsui.brand_name'] || 'HistomicsUI');
+        const webrootPath = (settings['histomicsui.webroot_path'] || 'histomics');
+
+        ItemListWidget.registeredApplications.histomicsui = {
+            name: brandName,
+            // icon:
+            check: (modelType, model) => {
+                if (modelType !== 'item' || !model.get('largeImage')) {
+                    return false;
+                }
+                const li = model.get('largeImage');
+                if (!li.fileId || li.expected === true) {
+                    return false;
                 }
+                let priority = 0;
+                try {
+                    if (model.get('meta') && model.get('meta').dicom && model.get('meta').dicom.Modality && model.get('meta').dicom.Modality !== 'SM') {
+                        priority = 1;
+                    }
+                } catch (e) {}
+                return {
+                    url: `${webrootPath}#?image=${model.id}`,
+                    priority: priority
+                };
             }
-        }
+        };
         if (this.accessLevel >= AccessType.WRITE) {
             adjustView.call(this, settings);
         }

From f8312919bbc7c7885ec764c5ba6172a0edbe407f Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Mon, 12 Jan 2026 15:28:53 -0500
Subject: [PATCH 3/3] Fix a style in the wip-style branch

---
 histomicsui/webroot.mako | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/histomicsui/webroot.mako b/histomicsui/webroot.mako
index e58b2b13..0ec6ce9f 100644
--- a/histomicsui/webroot.mako
+++ b/histomicsui/webroot.mako
@@ -230,6 +230,11 @@
             display: none;
         }
     }
+    .h-annotation {
+        [class*=" icon-"]:before, [class^=icon-]:before {
+        margin-right: 0;
+        }
+    }
   </style>