Skip to content

Add debug mode for viewing ReactFlow Node ids #1016

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

Draft
camielvs wants to merge 1 commit into
base: 10-23-fix_disconnected_output_nodes_when_copy_paste_between_tabs
Choose a base branch
from
Draft

Add debug mode for viewing ReactFlow Node ids #1016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 4 additions & 1 deletion .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,7 @@ VITE_ENABLE_GOOGLE_CLOUD_SUBMITTER=<boolean>

# Github
VITE_REQUIRE_AUTHORIZATION=<boolean>
VITE_GITHUB_CLIENT_ID=<string>
VITE_GITHUB_CLIENT_ID=<string>

# Dev Tools
VITE_ENABLE_DEBUG_MODE=<boolean>
38 changes: 31 additions & 7 deletions src/components/shared/ReactFlow/FlowCanvas/IONode/IONode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,19 @@ import { OutputNameEditor } from "@/components/Editor/IOEditor/OutputNameEditor"
import { getOutputConnectedDetails } from "@/components/Editor/utils/getOutputConnectedDetails";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { BlockStack, InlineStack } from "@/components/ui/layout";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Paragraph } from "@/components/ui/typography";
import { useNodeManager } from "@/hooks/useNodeManager";
import { cn } from "@/lib/utils";
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
import { useContextPanel } from "@/providers/ContextPanelProvider";
import type { IONodeData } from "@/types/nodes";
import { isInputSpec, typeSpecToString } from "@/utils/componentSpec";
import { ENABLE_DEBUG_MODE } from "@/utils/constants";

interface IONodeProps {
type: "input" | "output";
Expand All @@ -24,7 +30,7 @@ interface IONodeProps {
const IONode = ({ type, data, selected = false }: IONodeProps) => {
const { currentGraphSpec, currentSubgraphSpec } = useComponentSpec();
const { setContent, clearContent } = useContextPanel();
const { getHandleNodeId } = useNodeManager();
const { getNodeId, getHandleNodeId } = useNodeManager();

const { spec, readOnly } = data;

Expand All @@ -51,6 +57,7 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
[currentSubgraphSpec.outputs, spec.name],
);

const nodeId = getNodeId(spec.name, type);
const handleNodeType = isInput ? "handle-out" : "handle-in";
const nodeHandleId = getHandleNodeId(spec.name, spec.name, handleNodeType);

Expand Down Expand Up @@ -107,6 +114,11 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
<Card className={cn("border-2 max-w-[300px] p-0", borderColor)}>
<CardHeader className="px-2 py-2.5">
<CardTitle className="break-words">{spec.name}</CardTitle>
{ENABLE_DEBUG_MODE && (
<Paragraph size="xs" tone="subdued">
Node Id: {nodeId}
</Paragraph>
)}
</CardHeader>
<CardContent className="p-2 max-w-[250px]">
<BlockStack gap="2">
Expand Down Expand Up @@ -141,12 +153,24 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
</Paragraph>
</InlineStack>
</BlockStack>
<Handle
id={nodeHandleId}
type={handleType}
position={handlePosition}
className={cn(handleDefaultClassName, handleClassName)}
/>
<Tooltip>
<TooltipTrigger asChild>
<Handle
id={nodeHandleId}
type={handleType}
position={handlePosition}
className={cn(handleDefaultClassName, handleClassName)}
/>
</TooltipTrigger>
<TooltipContent disabled={!ENABLE_DEBUG_MODE}>
<div className="capitalize">
{type} Name: {spec.name}
</div>
<div>Handle Name: {spec.name}</div>
<div>parentNodeId: {nodeId}</div>
<div>handleNodeId: {nodeHandleId}</div>
</TooltipContent>
</Tooltip>
</CardContent>
</Card>
);
Expand Down
89 changes: 55 additions & 34 deletions src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/Handles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useNodeManager } from "@/hooks/useNodeManager";
import { cn } from "@/lib/utils";
import { useTaskNode } from "@/providers/TaskNodeProvider";
import type { InputSpec, OutputSpec } from "@/utils/componentSpec";
import { ENABLE_DEBUG_MODE } from "@/utils/constants";

type InputHandleProps = {
input: InputSpec;
Expand All @@ -34,7 +35,7 @@ export const InputHandle = ({
onHandleSelectionChange,
}: InputHandleProps) => {
const { getInputHandleNodeId } = useNodeManager();
const { taskId, nodeId, state } = useTaskNode();
const { taskId, nodeId, state, name } = useTaskNode();

const fromHandle = useConnection((connection) => connection.fromHandle?.id);
const toHandle = useConnection((connection) => connection.toHandle?.id);
Expand Down Expand Up @@ -131,23 +132,33 @@ export const InputHandle = ({
data-active={active}
>
<div className="absolute -translate-x-6 flex items-center h-3 w-3">
<Handle
ref={handleRef}
type="target"
id={handleId}
position={Position.Left}
isConnectable={true}
className={cn(
"border-0! h-full! w-full! transform-none!",
missing,
(selected || active) && "bg-blue-500!",
highlight && "bg-green-500!",
state.readOnly && "cursor-pointer!",
)}
onClick={handleHandleClick}
data-invalid={invalid}
data-testid={`input-handle-${input.name}`}
/>
<Tooltip>
<TooltipTrigger asChild>
<Handle
ref={handleRef}
type="target"
id={handleId}
position={Position.Left}
isConnectable={true}
className={cn(
"border-0! h-full! w-full! transform-none!",
missing,
(selected || active) && "bg-blue-500!",
highlight && "bg-green-500!",
state.readOnly && "cursor-pointer!",
)}
onClick={handleHandleClick}
data-invalid={invalid}
data-testid={`input-handle-${input.name}`}
/>
</TooltipTrigger>
<TooltipContent disabled={!ENABLE_DEBUG_MODE}>
<div>Task Name: {name}</div>
<div>Handle Name: {input.name}</div>
<div>parentNodeId: {nodeId}</div>
<div>handleNodeId: {handleId}</div>
</TooltipContent>
</Tooltip>
</div>
<div
className={cn(
Expand Down Expand Up @@ -221,7 +232,7 @@ export const OutputHandle = ({
onHandleSelectionChange,
}: OutputHandleProps) => {
const { getOutputHandleNodeId } = useNodeManager();
const { taskId, nodeId, state } = useTaskNode();
const { taskId, nodeId, state, name } = useTaskNode();

const fromHandle = useConnection((connection) => connection.fromHandle?.id);
const toHandle = useConnection((connection) => connection.toHandle?.id);
Expand Down Expand Up @@ -339,21 +350,31 @@ export const OutputHandle = ({
</div>
)}
</div>
<Handle
ref={handleRef}
type="source"
id={handleId}
position={Position.Right}
isConnectable={true}
onClick={handleHandleClick}
className={cn(
"relative! border-0! !w-[12px] !h-[12px] transform-none! translate-x-6 cursor-pointer bg-gray-500!",
(selected || active) && "bg-blue-500!",
highlight && "bg-green-500!",
state.readOnly && "cursor-pointer!",
)}
data-testid={`output-handle-${output.name}`}
/>
<Tooltip>
<TooltipTrigger asChild>
<Handle
ref={handleRef}
type="source"
id={handleId}
position={Position.Right}
isConnectable={true}
onClick={handleHandleClick}
className={cn(
"relative! border-0! !w-[12px] !h-[12px] transform-none! translate-x-6 cursor-pointer bg-gray-500!",
(selected || active) && "bg-blue-500!",
highlight && "bg-green-500!",
state.readOnly && "cursor-pointer!",
)}
data-testid={`output-handle-${output.name}`}
/>
</TooltipTrigger>
<TooltipContent disabled={!ENABLE_DEBUG_MODE}>
<div>Task Name: {name}</div>
<div>Handle Name: {output.name}</div>
<div>parentNodeId: {nodeId}</div>
<div>handleNodeId: {handleId}</div>
</TooltipContent>
</Tooltip>
</div>
);
};
Expand Down
60 changes: 37 additions & 23 deletions src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { useComponentSpec } from "@/providers/ComponentSpecProvider";
import { useContextPanel } from "@/providers/ContextPanelProvider";
import { useTaskNode } from "@/providers/TaskNodeProvider";
import { isCacheDisabled } from "@/utils/cache";
import { ENABLE_DEBUG_MODE } from "@/utils/constants";
import { getSubgraphDescription, isSubgraph } from "@/utils/subgraphUtils";

import {
Expand Down Expand Up @@ -254,25 +255,40 @@ const TaskNodeCard = () => {
ref={nodeRef}
onDoubleClick={handleDoubleClick}
>
<CardHeader className="border-b border-slate-200 px-2 py-2.5 flex flex-row justify-between items-start">
<CardHeader className="border-b border-slate-200 px-2 py-2.5 items-start">
<BlockStack>
<InlineStack gap="2" blockAlign="center" wrap="nowrap">
{isSubgraphNode && isSubgraphNavigationEnabled && (
<QuickTooltip content={`Subgraph: ${subgraphDescription}`}>
<Icon name="Workflow" size="sm" className="text-blue-600" />
</QuickTooltip>
<InlineStack
gap="2"
align="space-between"
blockAlign="start"
wrap="nowrap"
className="w-full"
>
<InlineStack gap="2" blockAlign="center" wrap="nowrap">
{isSubgraphNode && isSubgraphNavigationEnabled && (
<QuickTooltip content={`Subgraph: ${subgraphDescription}`}>
<Icon name="Workflow" size="sm" className="text-blue-600" />
</QuickTooltip>
)}
{disabledCache && !readOnly && (
<QuickTooltip
content="Cache Disabled"
className="whitespace-nowrap"
>
<Icon name="ZapOff" size="sm" className="text-orange-400" />
</QuickTooltip>
)}
<CardTitle className="break-words text-left text-xs text-slate-900">
{name}
</CardTitle>
</InlineStack>
{isRemoteComponentLibrarySearchEnabled ? (
<PublishedComponentBadge componentRef={taskSpec.componentRef}>
{digestMarkup}
</PublishedComponentBadge>
) : (
digestMarkup
)}
{disabledCache && !readOnly && (
<QuickTooltip
content="Cache Disabled"
className="whitespace-nowrap"
>
<Icon name="ZapOff" size="sm" className="text-orange-400" />
</QuickTooltip>
)}
<CardTitle className="break-words text-left text-xs text-slate-900">
{name}
</CardTitle>
</InlineStack>
{taskId &&
taskId !== name &&
Expand All @@ -283,12 +299,10 @@ const TaskNodeCard = () => {
)}
</BlockStack>

{isRemoteComponentLibrarySearchEnabled ? (
<PublishedComponentBadge componentRef={taskSpec.componentRef}>
{digestMarkup}
</PublishedComponentBadge>
) : (
digestMarkup
{ENABLE_DEBUG_MODE && (
<Text size="xs" tone="subdued">
Node Id: {nodeId}
</Text>
)}
</CardHeader>
<CardContent className="p-2 flex flex-col gap-2">
Expand Down
6 changes: 6 additions & 0 deletions src/components/ui/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,21 @@ function TooltipTrigger({
interface TooltipContentProps
extends React.ComponentProps<typeof TooltipPrimitive.Content> {
arrowClassName?: string;
disabled?: boolean;
}

function TooltipContent({
className,
sideOffset = 0,
children,
arrowClassName,
disabled,
...props
}: TooltipContentProps) {
if (disabled) {
return null;
}

return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
Expand Down
3 changes: 3 additions & 0 deletions src/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
/* Environment Config */
export const ENABLE_DEBUG_MODE =
import.meta.env.VITE_ENABLE_DEBUG_MODE === "true";

export const ABOUT_URL =
import.meta.env.VITE_ABOUT_URL || "https://cloud-pipelines.net/";

Expand Down