Remove page tooltip for memory ranges (#315)

* Remove page tooltip for memory ranges

* improve spacing

Author: krystian50

package-lock.json

@@ -25,7 +25,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.7",
     "@reduxjs/toolkit": "^2.2.8",
     "@tanstack/react-virtual": "^3.10.9",
     "@typeberry/block": "0.0.1-447d5c4",

package.json

@@ -30,11 +30,13 @@ export const MemoryCell = ({
   selectedAddress,
   index,
   findMemoryForWorker,
+  isPageTooltipDisabled = false,
 }: {
   value: number;
   address: number;
   selectedAddress: number | null;
   index: number;
+  isPageTooltipDisabled?: boolean;
   findMemoryForWorker: FindMemoryForWorkerType;
 }) => {
   const workers = useAppSelector(selectWorkers);
@@ -66,7 +68,7 @@ export const MemoryCell = ({
       >
         {isEqualAcrossWorkers ? (
           <TooltipProvider>
-            <Tooltip delayDuration={100}>
+            <Tooltip delayDuration={100} open={isPageTooltipDisabled ? false : undefined}>
               <TooltipTrigger>
                 {valueToNumeralSystem(value, numeralSystem, numeralSystem ? 2 : 3, false)}
               </TooltipTrigger>

src/components/MemoryPreview/MemoryInfinite.tsx

@@ -4,7 +4,7 @@ import { INPUT_STYLES } from "@/components/ui/input";
 import { Card } from "@/components/ui/card";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Label } from "@/components/ui/label";
-import { Edit3, Check, HelpCircle, ArrowUp, ArrowDown, Trash } from "lucide-react";
+import { Edit3, Check, ArrowUp, ArrowDown, Trash } from "lucide-react";
 import { loadMemoryRangeAllWorkers, selectMemoryRangesForFirstWorker } from "@/store/workers/workersSlice";
 import { useAppDispatch, useAppSelector } from "@/store/hooks";
 import { AddressInput, MemoryCell } from "./MemoryInfinite";
@@ -210,54 +210,48 @@ function MemoryRangeRow({
         </div>
       </div>
 
-      <div className="mt-2 text-sm font-mono">
+      <div className="mt-4 mb-2 mx-2 text-sm font-mono">
         <div style={{ maxHeight: "100px", overflowY: "auto" }}>
           {flatData.length === 0 ? (
             <div>(no data)</div>
           ) : (
             flatData.map((byte, idx) => (
-              <MemoryCell
-                index={idx}
-                address={draftStart + idx}
-                value={byte}
-                selectedAddress={null}
-                findMemoryForWorker={findMemoryForWorkerRange(matchingRange?.startAddress || 0)}
-              />
+              <Popover>
+                <PopoverTrigger>
+                  <MemoryCell
+                    index={idx}
+                    address={draftStart + idx}
+                    value={byte}
+                    selectedAddress={null}
+                    findMemoryForWorker={findMemoryForWorkerRange(matchingRange?.startAddress || 0)}
+                    isPageTooltipDisabled
+                  />
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-2">
+                  <a
+                    href={`https://papi.fluffylabs.dev/?data=${uint8ToHex(new Uint8Array(flatData))}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="underline text-blue-600 block mb-2"
+                  >
+                    Open codec tool
+                  </a>
+
+                  {!interpretResult ? (
+                    <div>(no data)</div>
+                  ) : (
+                    <div className="text-sm space-y-1 font-mono">
+                      {interpretResult.map((interpretation) => (
+                        <div key={interpretation}>{interpretation}</div>
+                      ))}
+                    </div>
+                  )}
+                </PopoverContent>
+              </Popover>
             ))
           )}
         </div>
       </div>
-
-      <div className="mt-2">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="ghost" size="sm" className="flex gap-1 items-center">
-              <HelpCircle className="h-4 w-4" />
-              Interpretations
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto p-2">
-            <a
-              href={`https://papi.fluffylabs.dev/?data=${uint8ToHex(new Uint8Array(flatData))}`}
-              target="_blank"
-              rel="noreferrer"
-              className="underline text-blue-600 block mb-2"
-            >
-              Open codec tool
-            </a>
-
-            {!interpretResult ? (
-              <div>(no data)</div>
-            ) : (
-              <div className="text-sm space-y-1 font-mono">
-                {interpretResult.map((interpretation) => (
-                  <div key={interpretation}>{interpretation}</div>
-                ))}
-              </div>
-            )}
-          </PopoverContent>
-        </Popover>
-      </div>
     </Card>
   );
 }