From aa17de7110441a27d1dd0a99dad92805be8a6d10 Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 11:28:05 +0100
Subject: [PATCH 01/12] Ensure no duplicate tags are created

---
 internal/worker/worker.go | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/internal/worker/worker.go b/internal/worker/worker.go
index 5faca1f..57b304a 100644
--- a/internal/worker/worker.go
+++ b/internal/worker/worker.go
@@ -112,9 +112,9 @@ func (w *Worker) ProcessRawImage(ctx context.Context, reference oci.Reference) e
 	// Add some basic tags
 	if data.LatestReference != nil {
 		if data.ImageReference.String() == data.LatestReference.String() {
-			data.Tags = append(data.Tags, "up-to-date")
+			data.InsertTag("up-to-date")
 		} else {
-			data.Tags = append(data.Tags, "outdated")
+			data.InsertTag("outdated")
 		}
 
 		// Add tags based on version diff
@@ -123,7 +123,7 @@ func (w *Worker) ProcessRawImage(ctx context.Context, reference oci.Reference) e
 		if currentVersion != nil && currentVersionErr == nil && newVersion != nil && newVersionErr == nil {
 			diff := currentVersion.Diff(newVersion)
 			if diff != "" {
-				data.Tags = append(data.Tags, diff)
+				data.InsertTag(diff)
 			}
 
 			versionDiffSortable = semver.PackInt64(newVersion) - semver.PackInt64(currentVersion)

From 020c4d66849d8209134d8e4b18297eb514186ccc Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 11:28:19 +0100
Subject: [PATCH 02/12] Add Kubernetes namespaces as tags

---
 internal/worker/worker.go | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/internal/worker/worker.go b/internal/worker/worker.go
index 57b304a..da6f666 100644
--- a/internal/worker/worker.go
+++ b/internal/worker/worker.go
@@ -8,6 +8,7 @@ import (
 	"github.com/AlexGustafsson/cupdate/internal/httputil"
 	"github.com/AlexGustafsson/cupdate/internal/models"
 	"github.com/AlexGustafsson/cupdate/internal/oci"
+	"github.com/AlexGustafsson/cupdate/internal/platform/kubernetes"
 	"github.com/AlexGustafsson/cupdate/internal/semver"
 	"github.com/AlexGustafsson/cupdate/internal/store"
 	"github.com/AlexGustafsson/cupdate/internal/workflow/imageworkflow"
@@ -130,6 +131,18 @@ func (w *Worker) ProcessRawImage(ctx context.Context, reference oci.Reference) e
 		}
 	}
 
+	// Add Kubernetes namespace and Docker stack tags
+	for _, node := range image.Graph.Nodes {
+		switch node.Domain {
+		case "kubernetes":
+			if node.Type == kubernetes.ResourceKindCoreV1Namespace {
+				data.InsertTag(node.Name)
+			}
+		case "docker":
+			// Not implemented
+		}
+	}
+
 	result := models.Image{
 		Reference:           data.ImageReference.String(),
 		Created:             data.Created,

From fc61c03b4c814ba9dfd72eb08af153182e94b845 Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 11:59:24 +0100
Subject: [PATCH 03/12] Improve support for Docker Swarm

- Identify tags even when Docker Swarm uses a digest image
- Graph Docker Swarm tasks, services and namespaces
- Add Docker Swarm namespace as a tag
---
 cmd/cupdate/main.go                   | 18 ++++++---
 internal/platform/docker/platform.go  | 56 ++++++++++++++++++++++++++-
 internal/platform/docker/resources.go | 11 +++++-
 internal/worker/worker.go             |  5 ++-
 web/graph.tsx                         |  3 ++
 5 files changed, 83 insertions(+), 10 deletions(-)

diff --git a/cmd/cupdate/main.go b/cmd/cupdate/main.go
index 5c4e5a9..412c0c0 100644
--- a/cmd/cupdate/main.go
+++ b/cmd/cupdate/main.go
@@ -303,7 +303,6 @@ func main() {
 				edges := subgraph.Edges()
 				nodes := subgraph.Nodes()
 
-				// TODO: Rewrite to be more generic (to include Docker?)
 				var namespaceNode *platform.Node
 
 				mappedNodes := make(map[string]models.GraphNode)
@@ -324,6 +323,9 @@ func main() {
 							Type:   string(n.Kind()),
 							Name:   n.Name(),
 						}
+						if node.Type() == "docker/"+docker.ResourceKindSwarmNamespace {
+							namespaceNode = &node
+						}
 					case platform.ImageNode:
 						mappedNodes[node.ID()] = models.GraphNode{
 							Domain: "oci",
@@ -336,8 +338,8 @@ func main() {
 				}
 
 				tags := []string{}
+
 				// Set tags for resources
-				// TODO: Handle for docker as well?
 				if namespaceNode != nil {
 					children := edges[(*namespaceNode).ID()]
 					for childID, isParent := range children {
@@ -355,10 +357,14 @@ func main() {
 						}
 
 						if childNode != nil {
-							resource := (*childNode).(kubernetes.Resource)
-							kind := resource.Kind()
-							if kind.IsSupported() {
-								tags = append(tags, kubernetes.TagName(resource.Kind()))
+							switch resource := (*childNode).(type) {
+							case kubernetes.Resource:
+								kind := resource.Kind()
+								if kind.IsSupported() {
+									tags = append(tags, kubernetes.TagName(resource.Kind()))
+								}
+							case docker.Resource:
+								tags = append(tags, docker.TagName(resource.Kind()))
 							}
 						}
 					}
diff --git a/internal/platform/docker/platform.go b/internal/platform/docker/platform.go
index 61404bc..d1a56f8 100644
--- a/internal/platform/docker/platform.go
+++ b/internal/platform/docker/platform.go
@@ -217,7 +217,19 @@ func (p *Platform) Graph(ctx context.Context) (*graph.Graph[platform.Node], erro
 			continue
 		}
 
-		graph.InsertTree(
+		// Docker Swarm has a preference for digested names, even when started with
+		// a manifest referencing a tag, try to resolve the reference
+		if !reference.HasTag && reference.HasDigest {
+			r, _, ok := strings.Cut(container.Image, "@")
+			if ok {
+				ref, err := oci.ParseReference(r)
+				if err == nil {
+					reference = ref
+				}
+			}
+		}
+
+		tree := []platform.Node{
 			platform.ImageNode{
 				Reference: reference,
 			},
@@ -226,7 +238,46 @@ func (p *Platform) Graph(ctx context.Context) (*graph.Graph[platform.Node], erro
 				id:   fmt.Sprintf("docker/containers/%s", container.ID),
 				name: container.Name(),
 			},
-		)
+		}
+
+		// Add graph nodes for Docker Swarm, if available
+		if container.Labels != nil {
+			if taskID, ok := container.Labels["com.docker.swarm.task.id"]; ok {
+				taskName, ok := container.Labels["com.docker.swarm.task.name"]
+				if !ok {
+					taskName = taskID
+				}
+
+				tree = append(tree, resource{
+					kind: ResourceKindSwarmTask,
+					id:   fmt.Sprintf("docker/swarm/task/%s", taskID),
+					name: taskName,
+				})
+			}
+
+			if serviceID, ok := container.Labels["com.docker.swarm.service.id"]; ok {
+				serviceName, ok := container.Labels["com.docker.swarm.service.name"]
+				if !ok {
+					serviceName = serviceID
+				}
+
+				tree = append(tree, resource{
+					kind: ResourceKindSwarmService,
+					id:   fmt.Sprintf("docker/swarm/service/%s", serviceID),
+					name: serviceName,
+				})
+			}
+
+			if namespace, ok := container.Labels["com.docker.stack.namespace"]; ok {
+				tree = append(tree, resource{
+					kind: ResourceKindSwarmNamespace,
+					id:   fmt.Sprintf("docker/swarm/namespace/%s", namespace),
+					name: namespace,
+				})
+			}
+		}
+
+		graph.InsertTree(tree...)
 	}
 
 	return graph, nil
@@ -237,6 +288,7 @@ type Container struct {
 	Names   []string
 	Image   string
 	ImageID string
+	Labels  map[string]string
 
 	// ... other ignored fields
 }
diff --git a/internal/platform/docker/resources.go b/internal/platform/docker/resources.go
index 0382969..43ef82b 100644
--- a/internal/platform/docker/resources.go
+++ b/internal/platform/docker/resources.go
@@ -9,7 +9,10 @@ import (
 type ResourceKind string
 
 const (
-	ResourceKindContainer = "container"
+	ResourceKindContainer      = "container"
+	ResourceKindSwarmTask      = "swarm/task"
+	ResourceKindSwarmService   = "swarm/service"
+	ResourceKindSwarmNamespace = "swarm/namespace"
 )
 
 type Resource interface {
@@ -49,6 +52,12 @@ func TagName(kind ResourceKind) string {
 	switch kind {
 	case ResourceKindContainer:
 		return "container"
+	case ResourceKindSwarmTask:
+		return "task"
+	case ResourceKindSwarmService:
+		return "service"
+	case ResourceKindSwarmNamespace:
+		return "namespace"
 	default:
 		// Panic as missing entries would be a programming issue, not runtime
 		// bug
diff --git a/internal/worker/worker.go b/internal/worker/worker.go
index da6f666..14bf56a 100644
--- a/internal/worker/worker.go
+++ b/internal/worker/worker.go
@@ -8,6 +8,7 @@ import (
 	"github.com/AlexGustafsson/cupdate/internal/httputil"
 	"github.com/AlexGustafsson/cupdate/internal/models"
 	"github.com/AlexGustafsson/cupdate/internal/oci"
+	"github.com/AlexGustafsson/cupdate/internal/platform/docker"
 	"github.com/AlexGustafsson/cupdate/internal/platform/kubernetes"
 	"github.com/AlexGustafsson/cupdate/internal/semver"
 	"github.com/AlexGustafsson/cupdate/internal/store"
@@ -139,7 +140,9 @@ func (w *Worker) ProcessRawImage(ctx context.Context, reference oci.Reference) e
 				data.InsertTag(node.Name)
 			}
 		case "docker":
-			// Not implemented
+			if node.Type == docker.ResourceKindSwarmNamespace {
+				data.InsertTag(node.Name)
+			}
 		}
 	}
 
diff --git a/web/graph.tsx b/web/graph.tsx
index 3f33d71..f248729 100644
--- a/web/graph.tsx
+++ b/web/graph.tsx
@@ -47,6 +47,9 @@ const titles: Record<string, Record<string, string | undefined> | undefined> = {
   },
   docker: {
     container: 'Container',
+    'swarm/task': 'Task',
+    'swarm/service': 'Service',
+    'swarm/namespace': 'Namespace',
   },
 }
 

From 1ac2fbbef0a30a06e44258f96c8b40e20e7294a3 Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 12:10:26 +0100
Subject: [PATCH 04/12] Namespace namespace tags

---
 internal/worker/worker.go | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/internal/worker/worker.go b/internal/worker/worker.go
index 14bf56a..191c271 100644
--- a/internal/worker/worker.go
+++ b/internal/worker/worker.go
@@ -137,11 +137,11 @@ func (w *Worker) ProcessRawImage(ctx context.Context, reference oci.Reference) e
 		switch node.Domain {
 		case "kubernetes":
 			if node.Type == kubernetes.ResourceKindCoreV1Namespace {
-				data.InsertTag(node.Name)
+				data.InsertTag("namespace:" + node.Name)
 			}
 		case "docker":
 			if node.Type == docker.ResourceKindSwarmNamespace {
-				data.InsertTag(node.Name)
+				data.InsertTag("namespace:" + node.Name)
 			}
 		}
 	}

From e54ebcce4a1f98e436e9dd112208a362e51fdda1 Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 12:18:14 +0100
Subject: [PATCH 05/12] Sort tags lexically, non-prefixed first

With namespaces tags added, the list of tags can be quite long. Make the
order deterministic and prioritize the built-in tags. Place prefixed
tags such as "namespace:monitoring" at the end of the list.
---
 web/components/TagSelect.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/components/TagSelect.tsx b/web/components/TagSelect.tsx
index 47ed0a3..d1ee952 100644
--- a/web/components/TagSelect.tsx
+++ b/web/components/TagSelect.tsx
@@ -12,6 +12,17 @@ const IOS = [
   'iPod',
 ].includes(navigator.platform)
 
+/** Sort tags lexically, putting prefixed tags last. */
+function sortTags(a: Tag, b: Tag): number {
+  if (a.name.includes(':') === b.name.includes(':')) {
+    return a.name.localeCompare(b.name)
+  } else if (a.name.includes(':')) {
+    return 1
+  } else {
+    return -1
+  }
+}
+
 export function TagSelect({
   tags,
   filter,
@@ -39,7 +50,7 @@ export function TagSelect({
             )
           }
         >
-          {tags.map((x) => (
+          {tags.toSorted(sortTags).map((x) => (
             <option key={x.name} value={x.name}>
               {x.name}
             </option>
@@ -97,7 +108,7 @@ export function TagSelect({
       {isOpen && (
         <div className="absolute group-hover:visible -top-4 -left-4 p-2 z-50 text-black dark:text-[#dddddd]">
           <div className="flex flex-col gap-y-2 py-2 px-3 pr-6 bg-white dark:bg-[#292929] border-solid border-[1px] border-[#d0d0d0]/95 dark:border-[#505050] rounded-lg w-max shadow">
-            {tags.map((x) => (
+            {tags.toSorted(sortTags).map((x) => (
               <label key={x.name} className="cursor-pointer">
                 <input
                   type="checkbox"

From cd739fd39e850d0a9d6143400d3e2d26c6344d82 Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 12:24:14 +0100
Subject: [PATCH 06/12] Set max height of tag select

Make sure that the tag select will scroll if there are many tags
available.
---
 web/components/TagSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/TagSelect.tsx b/web/components/TagSelect.tsx
index d1ee952..5be1f00 100644
--- a/web/components/TagSelect.tsx
+++ b/web/components/TagSelect.tsx
@@ -107,7 +107,7 @@ export function TagSelect({
       </svg>
       {isOpen && (
         <div className="absolute group-hover:visible -top-4 -left-4 p-2 z-50 text-black dark:text-[#dddddd]">
-          <div className="flex flex-col gap-y-2 py-2 px-3 pr-6 bg-white dark:bg-[#292929] border-solid border-[1px] border-[#d0d0d0]/95 dark:border-[#505050] rounded-lg w-max shadow">
+          <div className="flex max-h-64 overflow-y-auto flex-col gap-y-2 py-2 px-3 pr-6 bg-white dark:bg-[#292929] border-solid border-[1px] border-[#d0d0d0]/95 dark:border-[#505050] rounded-lg w-max shadow">
             {tags.toSorted(sortTags).map((x) => (
               <label key={x.name} className="cursor-pointer">
                 <input

From 788b24a4a6adcc8d1543a3f7ec2442bf2af6ca02 Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 18:16:35 +0100
Subject: [PATCH 07/12] Sort namespaced tags of image cards

---
 web/components/ImageCard.tsx |  4 ++--
 web/components/TagSelect.tsx | 13 +------------
 web/tags.ts                  | 14 ++++++++++++++
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/web/components/ImageCard.tsx b/web/components/ImageCard.tsx
index 38d5ada..223629e 100644
--- a/web/components/ImageCard.tsx
+++ b/web/components/ImageCard.tsx
@@ -1,7 +1,7 @@
 import type { JSX } from 'react'
 
 import { NavLink } from 'react-router-dom'
-import { TagsByName } from '../tags'
+import { TagsByName, sortTags } from '../tags'
 import { formatRelativeTimeTo } from '../time'
 import { Badge } from './Badge'
 import { ImageLogo } from './ImageLogo'
@@ -89,7 +89,7 @@ export function ImageCard({
         )}
         <p className="text-sm mt-2">{description}</p>
         <div className="flex flex-wrap gap-2 mt-4">
-          {tags.map((x) => (
+          {tags.toSorted(sortTags).map((x) => (
             <NavLink key={x} to={`/?tag=${encodeURIComponent(x)}`}>
               <Badge
                 label={x}
diff --git a/web/components/TagSelect.tsx b/web/components/TagSelect.tsx
index 5be1f00..7cafa8e 100644
--- a/web/components/TagSelect.tsx
+++ b/web/components/TagSelect.tsx
@@ -1,6 +1,6 @@
 import { type JSX, type PropsWithChildren, useRef, useState } from 'react'
 
-import type { Tag } from '../tags'
+import { type Tag, sortTags } from '../tags'
 import { Badge } from './Badge'
 
 const IOS = [
@@ -12,17 +12,6 @@ const IOS = [
   'iPod',
 ].includes(navigator.platform)
 
-/** Sort tags lexically, putting prefixed tags last. */
-function sortTags(a: Tag, b: Tag): number {
-  if (a.name.includes(':') === b.name.includes(':')) {
-    return a.name.localeCompare(b.name)
-  } else if (a.name.includes(':')) {
-    return 1
-  } else {
-    return -1
-  }
-}
-
 export function TagSelect({
   tags,
   filter,
diff --git a/web/tags.ts b/web/tags.ts
index 4ed94e5..2039295 100644
--- a/web/tags.ts
+++ b/web/tags.ts
@@ -112,3 +112,17 @@ export const Tags: Tag[] = [
 export const TagsByName: Record<string, Tag> = Object.fromEntries(
   Tags.map((x) => [x.name, x])
 )
+
+/** Sort tags lexically, putting prefixed tags last. */
+export function sortTags(a: Tag | string, b: Tag | string): number {
+  const aString = typeof a === 'string' ? a : a.name
+  const bString = typeof b === 'string' ? b : b.name
+
+  if (aString.includes(':') === bString.includes(':')) {
+    return aString.localeCompare(bString)
+  } else if (aString.includes(':')) {
+    return 1
+  } else {
+    return -1
+  }
+}

From 6c09349a2dfa9b6c1f7c4cf3f55b64e65a0c7ae7 Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 18:20:24 +0100
Subject: [PATCH 08/12] Update default badge color

---
 web/components/Badge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/Badge.tsx b/web/components/Badge.tsx
index 23b8521..33c134f 100644
--- a/web/components/Badge.tsx
+++ b/web/components/Badge.tsx
@@ -13,7 +13,7 @@ export function Badge({
   className,
   ...rest
 }: Omit<HTMLAttributes<HTMLSpanElement>, 'color'> & BadgeProps): JSX.Element {
-  let backgroundColor = '#CC5889'
+  let backgroundColor = 'light-dark(#3A3FCE, #4349f0)'
   if (typeof color === 'string') {
     backgroundColor = color
   } else if (color !== undefined) {

From c08639810c26f8a154bf5ebfd64a82a06e640663 Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 18:23:34 +0100
Subject: [PATCH 09/12] Add tag colors for Docker Swarm labels

---
 web/tags.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/tags.ts b/web/tags.ts
index 2039295..bcb452c 100644
--- a/web/tags.ts
+++ b/web/tags.ts
@@ -62,6 +62,16 @@ export const Tags: Tag[] = [
     description: 'A kubernetes stateful set',
     color: palette.kubernetes,
   },
+  {
+    name: 'service',
+    description: 'A Docker Swarm service',
+    color: palette.docker,
+  },
+  {
+    name: 'task',
+    description: 'A Docker Swarm task',
+    color: palette.docker,
+  },
   {
     name: 'docker',
     description: 'A docker image',

From 2987de2dd649b21db990c6680cfc5edaf642dcce Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 18:46:24 +0100
Subject: [PATCH 10/12] Mitigate nested anchor tags

Nested anchor tags (as used by the badges of the image card) are not
legal. As we still want the image card to be a proper anchor, let's try
our best to simulate anchors for the badges.

This is not by any means a perfect solution, but will suffice for most
cases.
---
 web/components/ImageCard.tsx | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/web/components/ImageCard.tsx b/web/components/ImageCard.tsx
index 223629e..4c3379b 100644
--- a/web/components/ImageCard.tsx
+++ b/web/components/ImageCard.tsx
@@ -1,6 +1,6 @@
 import type { JSX } from 'react'
 
-import { NavLink } from 'react-router-dom'
+import { NavLink, useNavigate } from 'react-router-dom'
 import { TagsByName, sortTags } from '../tags'
 import { formatRelativeTimeTo } from '../time'
 import { Badge } from './Badge'
@@ -32,6 +32,8 @@ export function ImageCard({
   tags,
   className,
 }: ImageCardProps & { className?: string }): JSX.Element {
+  const navigate = useNavigate()
+
   return (
     <div
       className={`flex gap-x-4 p-4 md:p-6 bg-white dark:bg-[#1e1e1e] rounded-lg shadow ${className || ''}`}
@@ -90,16 +92,34 @@ export function ImageCard({
         <p className="text-sm mt-2">{description}</p>
         <div className="flex flex-wrap gap-2 mt-4">
           {tags.toSorted(sortTags).map((x) => (
-            <NavLink key={x} to={`/?tag=${encodeURIComponent(x)}`}>
-              <Badge
-                label={x}
-                color={TagsByName[x]?.color}
-                className="hover:opacity-90"
-              />
-            </NavLink>
+            <Badge
+              key={x}
+              label={x}
+              color={TagsByName[x]?.color}
+              className="hover:opacity-90"
+              // It's illegal to nest anchors in HTML, so unfortunately we need
+              // to use onClick here
+              onClick={(e) => {
+                e.metaKey || e.ctrlKey
+                  ? openTab(`/?tag=${encodeURIComponent(x)}`)
+                  : navigate(`/?tag=${encodeURIComponent(x)}`)
+                e.preventDefault()
+              }}
+            />
           ))}
         </div>
       </div>
     </div>
   )
 }
+
+function openTab(target: string) {
+  // Using window.open with target _blank creates a new window on Safari, macOS
+  // so use this cross-platform solution instead
+  const a = document.createElement('a')
+
+  a.rel = 'noreferrer'
+  a.target = '_blank'
+  a.href = target
+  a.click()
+}

From 862a0bbd111e2136d500086721e1f3a44e89305f Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Sun, 12 Jan 2025 19:11:32 +0100
Subject: [PATCH 11/12] Sort selected tags first

---
 web/components/ImageCard.tsx | 36 ++++++++++---------
 web/components/TagSelect.tsx | 67 +++++++++++++++++++++---------------
 web/tags.ts                  | 20 ++++++++---
 3 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/web/components/ImageCard.tsx b/web/components/ImageCard.tsx
index 4c3379b..28208bf 100644
--- a/web/components/ImageCard.tsx
+++ b/web/components/ImageCard.tsx
@@ -1,7 +1,7 @@
 import type { JSX } from 'react'
 
 import { NavLink, useNavigate } from 'react-router-dom'
-import { TagsByName, sortTags } from '../tags'
+import { TagsByName, compareTags } from '../tags'
 import { formatRelativeTimeTo } from '../time'
 import { Badge } from './Badge'
 import { ImageLogo } from './ImageLogo'
@@ -91,22 +91,24 @@ export function ImageCard({
         )}
         <p className="text-sm mt-2">{description}</p>
         <div className="flex flex-wrap gap-2 mt-4">
-          {tags.toSorted(sortTags).map((x) => (
-            <Badge
-              key={x}
-              label={x}
-              color={TagsByName[x]?.color}
-              className="hover:opacity-90"
-              // It's illegal to nest anchors in HTML, so unfortunately we need
-              // to use onClick here
-              onClick={(e) => {
-                e.metaKey || e.ctrlKey
-                  ? openTab(`/?tag=${encodeURIComponent(x)}`)
-                  : navigate(`/?tag=${encodeURIComponent(x)}`)
-                e.preventDefault()
-              }}
-            />
-          ))}
+          {tags
+            .toSorted((a, b) => compareTags(a, b))
+            .map((x) => (
+              <Badge
+                key={x}
+                label={x}
+                color={TagsByName[x]?.color}
+                className="hover:opacity-90"
+                // It's illegal to nest anchors in HTML, so unfortunately we need
+                // to use onClick here
+                onClick={(e) => {
+                  e.metaKey || e.ctrlKey
+                    ? openTab(`/?tag=${encodeURIComponent(x)}`)
+                    : navigate(`/?tag=${encodeURIComponent(x)}`)
+                  e.preventDefault()
+                }}
+              />
+            ))}
         </div>
       </div>
     </div>
diff --git a/web/components/TagSelect.tsx b/web/components/TagSelect.tsx
index 7cafa8e..5169994 100644
--- a/web/components/TagSelect.tsx
+++ b/web/components/TagSelect.tsx
@@ -1,6 +1,6 @@
 import { type JSX, type PropsWithChildren, useRef, useState } from 'react'
 
-import { type Tag, sortTags } from '../tags'
+import { type Tag, compareTags } from '../tags'
 import { Badge } from './Badge'
 
 const IOS = [
@@ -39,11 +39,13 @@ export function TagSelect({
             )
           }
         >
-          {tags.toSorted(sortTags).map((x) => (
-            <option key={x.name} value={x.name}>
-              {x.name}
-            </option>
-          ))}
+          {tags
+            .toSorted((a, b) => compareTags(a.name, b.name))
+            .map((x) => (
+              <option key={x.name} value={x.name}>
+                {x.name}
+              </option>
+            ))}
         </select>
         <svg
           role="img"
@@ -97,28 +99,37 @@ export function TagSelect({
       {isOpen && (
         <div className="absolute group-hover:visible -top-4 -left-4 p-2 z-50 text-black dark:text-[#dddddd]">
           <div className="flex max-h-64 overflow-y-auto flex-col gap-y-2 py-2 px-3 pr-6 bg-white dark:bg-[#292929] border-solid border-[1px] border-[#d0d0d0]/95 dark:border-[#505050] rounded-lg w-max shadow">
-            {tags.toSorted(sortTags).map((x) => (
-              <label key={x.name} className="cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={filter.includes(x.name)}
-                  onChange={(e) =>
-                    onChange((current) =>
-                      e.target.checked
-                        ? [...current, x.name]
-                        : current.filter((y) => y !== x.name)
-                    )
-                  }
-                  className="scale-125 cursor-pointer"
-                />
-                <Badge
-                  title={x.description}
-                  label={x.name}
-                  color={x.color}
-                  className="ml-2"
-                />
-              </label>
-            ))}
+            {tags
+              .toSorted((a, b) =>
+                compareTags(
+                  a.name,
+                  b.name,
+                  filter.includes(a.name),
+                  filter.includes(b.name)
+                )
+              )
+              .map((x) => (
+                <label key={x.name} className="cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={filter.includes(x.name)}
+                    onChange={(e) =>
+                      onChange((current) =>
+                        e.target.checked
+                          ? [...current, x.name]
+                          : current.filter((y) => y !== x.name)
+                      )
+                    }
+                    className="scale-125 cursor-pointer"
+                  />
+                  <Badge
+                    title={x.description}
+                    label={x.name}
+                    color={x.color}
+                    className="ml-2"
+                  />
+                </label>
+              ))}
           </div>
         </div>
       )}
diff --git a/web/tags.ts b/web/tags.ts
index bcb452c..74a2e9f 100644
--- a/web/tags.ts
+++ b/web/tags.ts
@@ -123,10 +123,22 @@ export const TagsByName: Record<string, Tag> = Object.fromEntries(
   Tags.map((x) => [x.name, x])
 )
 
-/** Sort tags lexically, putting prefixed tags last. */
-export function sortTags(a: Tag | string, b: Tag | string): number {
-  const aString = typeof a === 'string' ? a : a.name
-  const bString = typeof b === 'string' ? b : b.name
+/** Sort tags lexically, putting prefixed tags last, selected tags first. */
+export function compareTags(
+  a: string,
+  b: string,
+  aSelected?: boolean,
+  bSelected?: boolean
+): number {
+  // Prioritize selected tags
+  if (aSelected === true && bSelected === false) {
+    return -1
+  } else if (aSelected === false && bSelected === true) {
+    return 1
+  }
+
+  const aString = typeof a === 'string' ? a : a
+  const bString = typeof b === 'string' ? b : b
 
   if (aString.includes(':') === bString.includes(':')) {
     return aString.localeCompare(bString)

From d171aeb45e8fec53802682aa18dba293535fc621 Mon Sep 17 00:00:00 2001
From: Alex Gustafsson <alex-gustafsson@live.se>
Date: Mon, 13 Jan 2025 15:53:43 +0100
Subject: [PATCH 12/12] Add support for Docker Compose labels

---
 cmd/cupdate/main.go                   |  2 +-
 internal/platform/docker/platform.go  | 14 +++++++++++++-
 internal/platform/docker/resources.go |  6 ++++++
 internal/worker/worker.go             |  2 ++
 web/graph.tsx                         |  2 ++
 5 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/cmd/cupdate/main.go b/cmd/cupdate/main.go
index 412c0c0..ed25b75 100644
--- a/cmd/cupdate/main.go
+++ b/cmd/cupdate/main.go
@@ -323,7 +323,7 @@ func main() {
 							Type:   string(n.Kind()),
 							Name:   n.Name(),
 						}
-						if node.Type() == "docker/"+docker.ResourceKindSwarmNamespace {
+						if node.Type() == "docker/"+docker.ResourceKindSwarmNamespace || node.Type() == "docker/"+docker.ResourceKindComposeProject {
 							namespaceNode = &node
 						}
 					case platform.ImageNode:
diff --git a/internal/platform/docker/platform.go b/internal/platform/docker/platform.go
index d1a56f8..f1c3c0d 100644
--- a/internal/platform/docker/platform.go
+++ b/internal/platform/docker/platform.go
@@ -240,7 +240,7 @@ func (p *Platform) Graph(ctx context.Context) (*graph.Graph[platform.Node], erro
 			},
 		}
 
-		// Add graph nodes for Docker Swarm, if available
+		// Add graph nodes for Docker Swarm and Compose, if available
 		if container.Labels != nil {
 			if taskID, ok := container.Labels["com.docker.swarm.task.id"]; ok {
 				taskName, ok := container.Labels["com.docker.swarm.task.name"]
@@ -266,6 +266,12 @@ func (p *Platform) Graph(ctx context.Context) (*graph.Graph[platform.Node], erro
 					id:   fmt.Sprintf("docker/swarm/service/%s", serviceID),
 					name: serviceName,
 				})
+			} else if service, ok := container.Labels["com.docker.compose.service"]; ok {
+				tree = append(tree, resource{
+					kind: ResourceKindComposeService,
+					id:   fmt.Sprintf("docker/compose/service/%s", service),
+					name: service,
+				})
 			}
 
 			if namespace, ok := container.Labels["com.docker.stack.namespace"]; ok {
@@ -274,6 +280,12 @@ func (p *Platform) Graph(ctx context.Context) (*graph.Graph[platform.Node], erro
 					id:   fmt.Sprintf("docker/swarm/namespace/%s", namespace),
 					name: namespace,
 				})
+			} else if project, ok := container.Labels["com.docker.compose.project"]; ok {
+				tree = append(tree, resource{
+					kind: ResourceKindComposeProject,
+					id:   fmt.Sprintf("docker/compose/project/%s", project),
+					name: project,
+				})
 			}
 		}
 
diff --git a/internal/platform/docker/resources.go b/internal/platform/docker/resources.go
index 43ef82b..8148c48 100644
--- a/internal/platform/docker/resources.go
+++ b/internal/platform/docker/resources.go
@@ -13,6 +13,8 @@ const (
 	ResourceKindSwarmTask      = "swarm/task"
 	ResourceKindSwarmService   = "swarm/service"
 	ResourceKindSwarmNamespace = "swarm/namespace"
+	ResourceKindComposeProject = "compose/project"
+	ResourceKindComposeService = "compose/service"
 )
 
 type Resource interface {
@@ -58,6 +60,10 @@ func TagName(kind ResourceKind) string {
 		return "service"
 	case ResourceKindSwarmNamespace:
 		return "namespace"
+	case ResourceKindComposeProject:
+		return "project"
+	case ResourceKindComposeService:
+		return "service"
 	default:
 		// Panic as missing entries would be a programming issue, not runtime
 		// bug
diff --git a/internal/worker/worker.go b/internal/worker/worker.go
index 191c271..9539abd 100644
--- a/internal/worker/worker.go
+++ b/internal/worker/worker.go
@@ -142,6 +142,8 @@ func (w *Worker) ProcessRawImage(ctx context.Context, reference oci.Reference) e
 		case "docker":
 			if node.Type == docker.ResourceKindSwarmNamespace {
 				data.InsertTag("namespace:" + node.Name)
+			} else if node.Type == docker.ResourceKindComposeProject {
+				data.InsertTag("project:" + node.Name)
 			}
 		}
 	}
diff --git a/web/graph.tsx b/web/graph.tsx
index f248729..01050c9 100644
--- a/web/graph.tsx
+++ b/web/graph.tsx
@@ -50,6 +50,8 @@ const titles: Record<string, Record<string, string | undefined> | undefined> = {
     'swarm/task': 'Task',
     'swarm/service': 'Service',
     'swarm/namespace': 'Namespace',
+    'compose/service': 'Service',
+    'compose/project': 'Project',
   },
 }