From 9277382a25320065cba61f173fde3d5e81b822c7 Mon Sep 17 00:00:00 2001
From: Nate Lanza <natelanzadevelopment@gmail.com>
Date: Mon, 18 Mar 2024 16:15:39 -0600
Subject: [PATCH] Fix display name for intersections in element sidebar

---
 .../upset/src/components/ElementView/ElementQueries.tsx  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/upset/src/components/ElementView/ElementQueries.tsx b/packages/upset/src/components/ElementView/ElementQueries.tsx
index 086ef4ce..17b0d105 100644
--- a/packages/upset/src/components/ElementView/ElementQueries.tsx
+++ b/packages/upset/src/components/ElementView/ElementQueries.tsx
@@ -25,6 +25,7 @@ export const ElementQueries = () => {
   const data = useRecoilValue(dataAtom);
   const rows = flattenedOnlyRows(data, provenance.getState());
   const bookmarked = useRecoilValue(bookmarkedIntersectionSelector);
+  const currentIntersectionDisplayName = currentIntersection?.elementName.replaceAll("~&~", " & ") || "";
 
   return (
     <>
@@ -87,21 +88,21 @@ export const ElementQueries = () => {
             backgroundColor: 'rgba(0,0,0,0.2)',
           })}
           icon={<SquareIcon fontSize={'1em' as any} />}
-          aria-label={`Selected intersection ${currentIntersection.elementName}, size ${currentIntersection.size}`}
+          aria-label={`Selected intersection ${currentIntersectionDisplayName}, size ${currentIntersection.size}`}
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
               actions.bookmarkIntersection(
                 currentIntersection.id,
-                currentIntersection.elementName,
+                currentIntersectionDisplayName,
                 currentIntersection.size,
               );
             }
           }}
-          label={`${currentIntersection.elementName} - ${currentIntersection.size}`}
+          label={`${currentIntersectionDisplayName} - ${currentIntersection.size}`}
           onDelete={() => {
             actions.bookmarkIntersection(
               currentIntersection.id,
-              currentIntersection.elementName,
+              currentIntersectionDisplayName,
               currentIntersection.size,
             );
           }}