Skip to content

Second set of random UI fixes #353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 27, 2025
Merged

Second set of random UI fixes #353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8b0a1de
Fix typos.
tomusdrw Mar 26, 2025
2769142
Improve mobile settings.
tomusdrw Mar 27, 2025
acdda06
Make logo clickable.
tomusdrw Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 40 additions & 46 deletions src/components/DebuggerSettings/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ import { setServiceId, setStepsToPerform } from "@/store/debugger/debuggerSlice"
import { Button } from "../ui/button";
import { NumeralSystemContext } from "@/context/NumeralSystemContext";
import { valueToNumeralSystem } from "../Instructions/utils";
import { useContext, useState } from "react";
import { ReactNode, useContext, useState } from "react";
import { setAllWorkersServiceId } from "@/store/workers/workersSlice";
import { isSerializedError } from "@/store/utils";
import { logger } from "@/utils/loggerService";
import { ToggleDarkMode } from "@/packages/ui-kit/DarkMode/ToggleDarkMode";
import { Separator } from "../ui/separator";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
import { Popover, PopoverContent } from "../ui/popover";
import { PopoverTrigger } from "@radix-ui/react-popover";

function stringToNumber<T>(value: string, cb: (x: string) => T): T {
try {
Expand Down Expand Up @@ -58,17 +59,7 @@ export const DebuggerSettingsContent = ({ openStorage }: { openStorage: () => vo

<div className="p-4 mt-2 flex justify-between items-center mb-4">
<span className="block text-xs font-bold">
Service id{" "}
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="ml-2 text-brand-dark dark:text-brand" height="18px" />
</TooltipTrigger>
<TooltipContent>
<p>Provide storage service id </p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<WithHelp help="JAM Service Id of executing code">Service ID</WithHelp>
</span>
<Input
className={commonClass}
Expand All @@ -83,20 +74,15 @@ export const DebuggerSettingsContent = ({ openStorage }: { openStorage: () => vo

<div className="p-4 flex justify-between items-center mb-4">
<span className="block text-xs font-bold">
Number of batched steps{" "}
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="ml-2 text-brand-dark dark:text-brand" height="18px" />
</TooltipTrigger>
<TooltipContent>
<p>
To speed up execution PVMs can run multiple steps internally after clicking "Run". This may lead
to inaccurate stops in case the execution diverges between them.
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<WithHelp
help={`To speed up execution PVMs can run multiple steps internally
after clicking "Run". This may lead to inaccurate stops in case
the execution diverges between them.
`}
>
<span className="max-sm:hidden">Number of batched steps</span>
<span className="sm:hidden">Batched steps</span>
</WithHelp>
</span>
<Input
className={commonClass}
Expand All @@ -113,32 +99,24 @@ export const DebuggerSettingsContent = ({ openStorage }: { openStorage: () => vo
</div>
<div className="p-4 flex justify-between items-center mb-2">
<span className="block text-xs font-bold">
Storage Value{" "}
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="ml-2 text-brand-dark dark:text-brand" height="18px" />
</TooltipTrigger>
<TooltipContent>
<p>
Set storage for read & write host calls. Confirm empty, if you want to process. Storage can be
modified by running program.
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<WithHelp
help={`Configure storage for read & write host calls.
Confirm empty, if you want to process.
Storage can be modified by the program execution.`}
>
Service Storage
</WithHelp>
</span>

<div className="flex">
<Button variant="outlineBrand" onClick={() => openStorage()} className={commonClass}>
Set storage
</Button>

{debuggerState.storage !== null && (
<span className="flex items-center ml-3">
<CheckCircle color="green" className="mr-2" /> Storage provided
<CheckCircle color="green" className="mr-2" />
</span>
)}
<Button variant="outlineBrand" onClick={() => openStorage()} className={commonClass}>
{debuggerState.storage !== null ? "Modify Storage" : "Configure Storage"}
</Button>
</div>
</div>

Expand All @@ -148,3 +126,19 @@ export const DebuggerSettingsContent = ({ openStorage }: { openStorage: () => vo
</>
);
};

function WithHelp({ help, children }: { help: string; children: ReactNode }) {
return (
<>
{children}{" "}
<Popover>
<PopoverTrigger className="h-5 p-0.5 align-bottom cursor-pointer hover:bg-brand/20 rounded-xl" tabIndex={1}>
<InfoIcon className="inline-block text-brand-dark dark:text-brand" height="100%" />
</PopoverTrigger>
<PopoverContent className="max-w-[300px]">
<p className="text-justify text-xs">{help}</p>
</PopoverContent>
</Popover>
</>
);
}
26 changes: 12 additions & 14 deletions src/components/ErrorWarningTooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@radix-ui/react-tooltip";
import { Tooltip, TooltipTrigger, TooltipContent } from "@radix-ui/react-tooltip";
import { TriangleAlertIcon } from "lucide-react";
import classNames from "classnames";

Expand All @@ -9,18 +9,16 @@ export const ErrorWarningTooltip = (props: {
variant: "dark" | "light";
}) => {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<TriangleAlertIcon className={classNames("text-red-500", props.classNames)} />
</TooltipTrigger>
<TooltipContent
side={props.side || "bottom"}
className={`border-[1px] rounded-md ${props.variant === "dark" ? "bg-[#242424]" : "bg-[#fff]"} p-2 mt-2 text-red-500 z-10`}
>
<p>{props.msg}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Tooltip>
<TooltipTrigger>
<TriangleAlertIcon className={classNames("text-red-500", props.classNames)} />
</TooltipTrigger>
<TooltipContent
side={props.side || "bottom"}
className={`border-[1px] rounded-md ${props.variant === "dark" ? "bg-[#242424]" : "bg-[#fff]"} p-2 mt-2 text-red-500 z-10`}
>
<p>{props.msg}</p>
</TooltipContent>
</Tooltip>
);
};
20 changes: 9 additions & 11 deletions src/components/HostCalls/HostCallsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { DebuggerEcalliStorage } from "@/types/pvm";
import { isSerializedError } from "@/store/utils";
import { ChevronLeft, InfoIcon } from "lucide-react";
import { Separator } from "../ui/separator";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";

const isEcalliWriteOrRead = (exitArg?: number) => {
return exitArg === 2 || exitArg === 3;
Expand Down Expand Up @@ -74,16 +74,14 @@ export const HostCallsContent = ({ onSetStorage }: { onSetStorage: () => void })
<div className="mt-6 px-6 overflow-y-auto">
<span className="text-md text-foreground font-bold mb-2 flex">
Storage{" "}
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="ml-2 text-brand-dark dark:text-brand" height="18px" />
</TooltipTrigger>
<TooltipContent>
<p>Please provide JSON storage or confirm empty</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="ml-2 text-brand-dark dark:text-brand" height="18px" />
</TooltipTrigger>
<TooltipContent>
<p>Please provide JSON storage or confirm empty</p>
</TooltipContent>
</Tooltip>
</span>
<div className="pt-1 mt-2">
<TrieInput onChange={(v) => setNewStorage(v)} initialRows={storage} />
Expand Down
48 changes: 23 additions & 25 deletions src/components/Instructions/InstructionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { ProgramRow } from "./InstructionsTable";
import { useAppSelector } from "@/store/hooks.ts";
import { selectWorkers, WorkerState } from "@/store/workers/workersSlice.ts";
import { cn, hexToRgb } from "@/lib/utils.ts";
import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip.tsx";
import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "@/components/ui/tooltip.tsx";
import { useIsDarkMode } from "@/packages/ui-kit/DarkMode/utils";
import { selectProgram } from "@/store/debugger/debuggerSlice.ts";
import { getStatusColor } from "@/utils/colors";
Expand Down Expand Up @@ -211,31 +211,29 @@ export const InstructionItem = forwardRef(
};

return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>{renderContent()}</TooltipTrigger>
<TooltipPortal>
{pvmsDiverged ? (
<TooltipContent side="left">
{workersWithCurrentPc.map((worker, index) => (
<div key={index}>
<span>{worker.id} - PC:</span>
<span className="pl-3">
<span>
{valueToNumeralSystem(getWorkerValueFromState(worker, "currentState", "pc"), numeralSystem)}
</span>
<Tooltip>
<TooltipTrigger asChild>{renderContent()}</TooltipTrigger>
<TooltipPortal>
{pvmsDiverged ? (
<TooltipContent side="left">
{workersWithCurrentPc.map((worker, index) => (
<div key={index}>
<span>{worker.id} - PC:</span>
<span className="pl-3">
<span>
{valueToNumeralSystem(getWorkerValueFromState(worker, "currentState", "pc"), numeralSystem)}
</span>
</div>
))}
</TooltipContent>
) : (
<TooltipContent side="bottom" className="m-0 p-0">
{renderTooltipContentInstructionInfo()}
</TooltipContent>
)}
</TooltipPortal>
</Tooltip>
</TooltipProvider>
</span>
</div>
))}
</TooltipContent>
) : (
<TooltipContent side="bottom" className="m-0 p-0">
{renderTooltipContentInstructionInfo()}
</TooltipContent>
)}
</TooltipPortal>
</Tooltip>
);
},
);
Expand Down
98 changes: 47 additions & 51 deletions src/components/MemoryPreview/MemoryInfinite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import classNames from "classnames";
import { isSerializedError, LOAD_MEMORY_CHUNK_SIZE, MEMORY_SPLIT_STEP } from "@/store/utils";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useInView } from "react-intersection-observer";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TooltipPortal } from "@/components/ui/tooltip.tsx";
import { Tooltip, TooltipContent, TooltipTrigger, TooltipPortal } from "@/components/ui/tooltip.tsx";
import React from "react";
import { addressFormatter, findMemoryForWorker, FindMemoryForWorkerType } from "./utils";
import { Search } from "../SearchInput";
Expand Down Expand Up @@ -72,57 +72,53 @@ export const MemoryCell = ({
)}
>
{isEqualAcrossWorkers ? (
<TooltipProvider>
<Tooltip delayDuration={100} open={isPageTooltipDisabled ? false : undefined}>
<TooltipTrigger>{valueToNumeralSystem(value, numeralSystem, numeralSystem ? 2 : 3, false)}</TooltipTrigger>

<TooltipPortal>
<TooltipContent>
<div className="font-poppins grid grid-cols-[minmax(0,auto),minmax(0,auto)]">
Page={Math.floor(address / PAGE_SIZE)}
</div>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
<Tooltip delayDuration={100} open={isPageTooltipDisabled ? false : undefined}>
<TooltipTrigger>{valueToNumeralSystem(value, numeralSystem, numeralSystem ? 2 : 3, false)}</TooltipTrigger>

<TooltipPortal>
<TooltipContent>
<div className="font-poppins grid grid-cols-[minmax(0,auto),minmax(0,auto)]">
Page={Math.floor(address / PAGE_SIZE)}
</div>
</TooltipContent>
</TooltipPortal>
</Tooltip>
) : (
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<span
className="font-inconsolata"
dangerouslySetInnerHTML={{
__html: numeralSystem ? "&quest;&#8288;&quest;&#8288;" : "&quest;&#8288;&quest;&#8288;&quest;&#8288;",
// This is a fix for ?? : ??? because ? adds a break after which causes the whole line to break into two lines
}}
/>
</TooltipTrigger>

<TooltipPortal>
<TooltipContent>
<div className="font-inconsolata grid grid-cols-[minmax(0,auto),minmax(0,auto)]">
{workers.map((worker) => (
<React.Fragment key={worker.id}>
<div>
<span>{worker.id}</span>
</div>
<div className="pl-3">
<span>
{valueToNumeralSystem(
findMemoryForWorker(worker, address)?.bytes[index],
numeralSystem,
numeralSystem ? 2 : 3,
false,
)}
</span>
</div>
</React.Fragment>
))}
</div>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<span
className="font-inconsolata"
dangerouslySetInnerHTML={{
__html: numeralSystem ? "&quest;&#8288;&quest;&#8288;" : "&quest;&#8288;&quest;&#8288;&quest;&#8288;",
// This is a fix for ?? : ??? because ? adds a break after which causes the whole line to break into two lines
}}
/>
</TooltipTrigger>

<TooltipPortal>
<TooltipContent>
<div className="font-inconsolata grid grid-cols-[minmax(0,auto),minmax(0,auto)]">
{workers.map((worker) => (
<React.Fragment key={worker.id}>
<div>
<span>{worker.id}</span>
</div>
<div className="pl-3">
<span>
{valueToNumeralSystem(
findMemoryForWorker(worker, address)?.bytes[index],
numeralSystem,
numeralSystem ? 2 : 3,
false,
)}
</span>
</div>
</React.Fragment>
))}
</div>
</TooltipContent>
</TooltipPortal>
</Tooltip>
)}
</span>
);
Expand Down
Loading
Loading