From 3fded14b72d4fb715b06b4a1ef786b4fe5c6575e Mon Sep 17 00:00:00 2001
From: nikkikapadia <nikki.kapadia@sentry.io>
Date: Mon, 17 Mar 2025 16:11:16 -0400
Subject: [PATCH 1/2] visual hover and active interactions

---
 .../views/explore/components/schemaHintsDrawer.tsx  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/static/app/views/explore/components/schemaHintsDrawer.tsx b/static/app/views/explore/components/schemaHintsDrawer.tsx
index 3f2f2c582a3f78..476c234bc5a2f5 100644
--- a/static/app/views/explore/components/schemaHintsDrawer.tsx
+++ b/static/app/views/explore/components/schemaHintsDrawer.tsx
@@ -114,7 +114,8 @@ const CheckboxLabelContainer = styled('div')`
   justify-content: space-between;
   width: 100%;
   gap: ${space(1)};
-  padding-right: ${space(0.5)};
+  cursor: pointer;
+  padding-right: ${space(0.25)};
 `;
 
 const CheckboxLabel = styled('span')`
@@ -129,13 +130,21 @@ const StyledMultipleCheckbox = styled(MultipleCheckbox)`
 
 const StyledMultipleCheckboxItem = styled(MultipleCheckbox.Item)`
   width: 100%;
-  padding: ${space(1)} 0;
+  padding: ${space(1)} ${space(0.5)};
   border-top: 1px solid ${p => p.theme.border};
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {
     width: 100%;
   }
 
+  &:hover {
+    background-color: ${p => p.theme.backgroundSecondary};
+  }
+
+  &:active {
+    background-color: ${p => p.theme.gray100};
+  }
+
   &:last-child {
     border-bottom: 1px solid ${p => p.theme.border};
   }

From c2f2c46a1f45bf55e888d0a5ba07f852a2cb4dc2 Mon Sep 17 00:00:00 2001
From: nikkikapadia <nikki.kapadia@sentry.io>
Date: Mon, 17 Mar 2025 16:47:04 -0400
Subject: [PATCH 2/2] show selected tags sorted at the top

---
 .../explore/components/schemaHintsDrawer.tsx  | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/static/app/views/explore/components/schemaHintsDrawer.tsx b/static/app/views/explore/components/schemaHintsDrawer.tsx
index 476c234bc5a2f5..f728ca4e1aa9bb 100644
--- a/static/app/views/explore/components/schemaHintsDrawer.tsx
+++ b/static/app/views/explore/components/schemaHintsDrawer.tsx
@@ -29,14 +29,28 @@ function SchemaHintsDrawer({hints}: SchemaHintsDrawerProps) {
     return filterQuery.getFilterKeys();
   }, [exploreQuery]);
 
-  const sortedHints = useMemo(() => {
-    return hints.toSorted((a, b) => {
-      // may need to fix this if we don't want to ignore the prefix
-      const aWithoutPrefix = prettifyTagKey(a.key).replace(/^_/, '');
-      const bWithoutPrefix = prettifyTagKey(b.key).replace(/^_/, '');
-      return aWithoutPrefix.localeCompare(bWithoutPrefix);
+  const sortedSelectedHints = useMemo(() => {
+    const sortedKeys = selectedFilterKeys.toSorted((a, b) => {
+      return prettifyTagKey(a).localeCompare(prettifyTagKey(b));
     });
-  }, [hints]);
+    return sortedKeys
+      .map(key => hints.find(hint => hint.key === key))
+      .filter(tag => !!tag);
+  }, [hints, selectedFilterKeys]);
+
+  const sortedHints = useMemo(() => {
+    return [
+      ...new Set([
+        ...sortedSelectedHints,
+        ...hints.toSorted((a, b) => {
+          // may need to fix this if we don't want to ignore the prefix
+          const aWithoutPrefix = prettifyTagKey(a.key).replace(/^_/, '');
+          const bWithoutPrefix = prettifyTagKey(b.key).replace(/^_/, '');
+          return aWithoutPrefix.localeCompare(bWithoutPrefix);
+        }),
+      ]),
+    ];
+  }, [hints, sortedSelectedHints]);
 
   const handleCheckboxChange = useCallback(
     (hint: Tag) => {