ENG-1642 Discourse context overlay gets re-triggered every hover in a query block when view is render (#989)

* ENG-1642 Memoize results table to avoid redraws

* spurious includes

* Refactor ResultsView component to simplify menu icon visibility (#1006)

- Removed state management for revealMenuIcons and associated mouse event handlers.
- Introduced a new className for menu icons to control visibility based on interface settings and hover state.
- Updated CSS to manage menu icon display logic, enhancing user experience by streamlining the interface.

This change improves the clarity and maintainability of the ResultsView component.

* remove memo

---------

Co-authored-by: Michael Gartner <mclicks@gmail.com>

Author: maparent

apps/roam/src/components/results-view/ResultsTable.tsx

@@ -160,13 +160,7 @@ export const CellEmbed = ({
   );
 };
 
-export const CellRender = ({
-  content,
-  uid,
-}: {
-  content: string;
-  uid: string;
-}) => {
+const CellRender = ({ content, uid }: { content: string; uid: string }) => {
   const isPage = !!getPageTitleByPageUid(uid);
   const displayString = isPage ? `[[${content}]]` : content;
 

apps/roam/src/components/results-view/ResultsView.tsx

@@ -330,9 +330,7 @@ const ResultsView: ResultsViewComponent = ({
     settings.showSearchFilter,
   );
   const [showInterface, setShowInterface] = useState(settings.showInterface);
-  const [revealMenuIcons, setRevealMenuIcons] = useState(false);
   const [showInputs, setShowInputs] = useState(settings.showInputs);
-  const hideMenuIcons = hideMenu || (!revealMenuIcons && !showInterface);
   const [showAlias, setShowAlias] = useState(settings.showAlias);
   const [isEditAlias, setIsEditAlias] = useState(false);
   const [alias, setAlias] = useState(settings.alias);
@@ -452,13 +450,19 @@ const ResultsView: ResultsViewComponent = ({
     () => views.filter((view) => view.mode !== "hidden").length,
     [views],
   );
+  const menuIconClassName = [
+    "roamjs-query-menu-icons",
+    hideMenu
+      ? ""
+      : showInterface
+        ? "roamjs-query-menu-icons-visible"
+        : "roamjs-query-menu-icons-hover",
+  ].join(" ");
 
   return (
     <div
       className={`roamjs-query-results-view relative w-full mode-${layout.mode}`}
       ref={containerRef}
-      onMouseEnter={() => setRevealMenuIcons(true)}
-      onMouseLeave={() => setRevealMenuIcons(false)}
     >
       {showAlias && (
         <div
@@ -580,10 +584,7 @@ const ResultsView: ResultsViewComponent = ({
       />
       {header}
       <div className="relative">
-        <div
-          style={hideMenuIcons ? { display: "none" } : {}}
-          className="absolute right-0 z-10 p-1"
-        >
+        <div className={menuIconClassName}>
           {onRefresh && (
             <Tooltip content={"Refresh Results"}>
               <Button icon={"refresh"} minimal onClick={() => onRefresh()} />

apps/roam/src/styles/styles.css

@@ -75,6 +75,20 @@
   padding: 8px;
 }
 
+.roamjs-query-menu-icons {
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  display: none;
+  padding: 4px;
+}
+
+.roamjs-query-menu-icons.roamjs-query-menu-icons-visible,
+.roamjs-query-results-view:hover
+  .roamjs-query-menu-icons.roamjs-query-menu-icons-hover {
+  display: block;
+}
+
 /* Solves dot-tags (.#sticky, .#meeting) flashing on when hovering anywhere on the
    Query Table. Roam shows them via .rm-block__self:hover and the entire table lives
    in one block, so we scope visibility to the individual cell instead. */