Skip to content

[POC] Highlight Edges when Task Input/Output is selected #1330

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: master
Choose a base branch
from
Draft

[POC] Highlight Edges when Task Input/Output is selected #1330

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
31 changes: 29 additions & 2 deletions src/components/shared/ReactFlow/FlowCanvas/Edges/SmoothEdge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const SmoothEdge = ({
targetPosition,
style = {},
selected,
data,
}: EdgeProps) => {
const [edgePath] = getBezierPath({
sourceX,
Expand All @@ -21,8 +22,13 @@ const SmoothEdge = ({
targetPosition,
});

const edgeColor = selected ? "#38bdf8" : "#6b7280";
const markerIdSuffix = selected ? "selected" : "default";
const state = selected
? "selected"
: data?.highlighted
? "highlighted"
: "default";

const { edgeColor, markerIdSuffix } = getEdgeMetadata(state);

return (
<>
Expand Down Expand Up @@ -87,3 +93,24 @@ const SmoothEdge = ({
};

export default SmoothEdge;

function getEdgeMetadata(state: "default" | "selected" | "highlighted") {
switch (state) {
case "selected":
return {
edgeColor: "#38bdf8",
markerIdSuffix: "selected",
};
case "highlighted":
return {
edgeColor: "#ec4899",
markerIdSuffix: "highlighted",
};
case "default":
default:
return {
edgeColor: "#6b7280",
markerIdSuffix: "default",
};
}
}
64 changes: 51 additions & 13 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 @@ -19,7 +19,10 @@ type InputHandleProps = {
input: InputSpec;
invalid: boolean;
value?: string;
highlight?: boolean;
highlight?: {
searchHighlight: boolean;
connectionHighlight: boolean;
};
onLabelClick?: (e: ReactMouseEvent<HTMLDivElement>) => void;
onHandleSelectionChange?: (key: string, selected: boolean) => void;
};
Expand Down Expand Up @@ -119,12 +122,14 @@ export const InputHandle = ({
};
}, [selected]);

const { searchHighlight, connectionHighlight } = highlight || {};

return (
<div
className="relative w-full h-fit"
key={input.name}
data-testid={`input-connection-${input.name}`}
data-highlighted={highlight}
data-highlighted={searchHighlight || connectionHighlight}
data-selected={selected}
data-active={active}
>
Expand All @@ -138,8 +143,13 @@ export const InputHandle = ({
className={cn(
"border-0! h-full! w-full! transform-none!",
missing,
searchHighlight &&
!connectionHighlight &&
!selected &&
!active &&
"bg-green-500!",
connectionHighlight && !selected && !active && "bg-pink-500!",
(selected || active) && "bg-blue-500!",
highlight && "bg-green-500!",
state.readOnly && "cursor-pointer!",
)}
onClick={handleHandleClick}
Expand All @@ -163,9 +173,18 @@ export const InputHandle = ({
<div
className={cn(
"text-xs text-gray-800! rounded-md px-2 py-1 truncate",
onLabelClick && !selected && !highlight && "hover:bg-gray-300",
onLabelClick &&
!selected &&
!searchHighlight &&
!connectionHighlight &&
"hover:bg-gray-300",
selected || active ? "bg-blue-200" : "bg-gray-200",
highlight && "bg-green-200",
searchHighlight &&
!connectionHighlight &&
!selected &&
!active &&
"bg-green-200",
connectionHighlight && !selected && !active && "bg-pink-200",
!hasValue && hasDefault && "opacity-50 italic",
)}
onClick={handleLabelClick}
Expand Down Expand Up @@ -206,7 +225,10 @@ export const InputHandle = ({
type OutputHandleProps = {
output: OutputSpec;
value?: string;
highlight?: boolean;
highlight?: {
searchHighlight: boolean;
connectionHighlight: boolean;
};
onLabelClick?: (e: ReactMouseEvent<HTMLDivElement>) => void;
onHandleSelectionChange?: (key: string, selected: boolean) => void;
};
Expand Down Expand Up @@ -302,12 +324,14 @@ export const OutputHandle = ({
};
}, [selected]);

const { searchHighlight, connectionHighlight } = highlight || {};

return (
<div
className="flex items-center justify-end w-full cursor-pointer"
key={output.name}
data-testid={`output-connection-${output.name}`}
data-highlighted={highlight}
data-highlighted={searchHighlight || connectionHighlight}
data-selected={selected}
data-active={active}
>
Expand All @@ -321,9 +345,18 @@ export const OutputHandle = ({
<div
className={cn(
"text-xs text-gray-800! rounded-md px-2 py-1 truncate",
onLabelClick && !selected && !highlight && "hover:bg-gray-300",
onLabelClick &&
!selected &&
!searchHighlight &&
!connectionHighlight &&
"hover:bg-gray-300",
selected || active ? "bg-blue-200" : "bg-gray-200",
highlight && "bg-green-200",
searchHighlight &&
!connectionHighlight &&
!selected &&
!active &&
"bg-green-200",
connectionHighlight && !selected && !active && "bg-pink-200",
)}
onClick={handleLabelClick}
>
Expand All @@ -344,9 +377,14 @@ export const OutputHandle = ({
isConnectable={true}
onClick={handleHandleClick}
className={cn(
"relative! border-0! !w-[12px] !h-[12px] transform-none! translate-x-6 cursor-pointer bg-gray-500!",
"relative! border-0! w-3! h-3! transform-none! translate-x-6 cursor-pointer bg-gray-500!",
searchHighlight &&
!connectionHighlight &&
!selected &&
!active &&
"bg-green-500!",
connectionHighlight && !selected && !active && "bg-pink-500!",
(selected || active) && "bg-blue-500!",
highlight && "bg-green-500!",
state.readOnly && "cursor-pointer!",
)}
data-testid={`output-handle-${output.name}`}
Expand All @@ -355,11 +393,11 @@ export const OutputHandle = ({
);
};

const getOutputHandleId = (outputName: string) => {
export const getOutputHandleId = (outputName: string) => {
return `output_${outputName}`;
};

const getInputHandleId = (inputName: string) => {
export const getInputHandleId = (inputName: string) => {
return `input_${inputName}`;
};

Expand Down
60 changes: 42 additions & 18 deletions src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeInputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import { ComponentSearchFilter } from "@/utils/constants";
import { inputNameToNodeId } from "@/utils/nodes/nodeIdUtils";
import { checkArtifactMatchesSearchFilters } from "@/utils/searchUtils";

import { InputHandle } from "./Handles";
import { useConnectionHighlighting } from "../../hooks/useConnectionHighlighting";
import { getInputHandleId, InputHandle } from "./Handles";
import { getDisplayValue } from "./handleUtils";

interface TaskNodeInputsProps {
Expand All @@ -27,7 +28,7 @@ export function TaskNodeInputs({
expanded,
onBackgroundClick,
}: TaskNodeInputsProps) {
const { inputs, taskSpec, state, select } = useTaskNode();
const { nodeId, inputs, taskSpec, state, select } = useTaskNode();
const { graphSpec } = useComponentSpec();
const {
highlightSearchFilter,
Expand All @@ -36,6 +37,9 @@ export function TaskNodeInputs({
highlightSearchResults,
} = useForcedSearchContext();

const { highlightConnections, clearHighlights, isHandleHighlighted } =
useConnectionHighlighting();

const connection = useConnection();

const [isDragging, setIsDragging] = useState(false);
Expand Down Expand Up @@ -87,31 +91,51 @@ export function TaskNodeInputs({
if (state.readOnly) return;

const input = inputs.find((i) => i.name === inputName);
toggleHighlightRelatedHandles(selected, input);

if (selected) {
toggleHighlightRelatedHandles(true, input);

const handleId = getInputHandleId(inputName);
highlightConnections(nodeId, handleId, "input");
} else {
resetSearchFilter();
clearHighlights();
}
},
[inputs, state.readOnly, toggleHighlightRelatedHandles],
[
inputs,
state.readOnly,
toggleHighlightRelatedHandles,
highlightConnections,
clearHighlights,
resetSearchFilter,
],
);

const checkHighlight = useCallback(
(input: InputSpec) => {
if (
!highlightSearchResults ||
!isValidFilterRequest(currentSearchFilter, {
// Search-based highlighting (green)
const searchHighlight =
highlightSearchResults &&
isValidFilterRequest(currentSearchFilter, {
includesFilter: ComponentSearchFilter.INPUTTYPE,
})
) {
return false;
}
}) &&
checkArtifactMatchesSearchFilters(
currentSearchFilter.searchTerm,
currentSearchFilter.filters,
input,
);

const matchFound = checkArtifactMatchesSearchFilters(
currentSearchFilter.searchTerm,
currentSearchFilter.filters,
input,
);
// Connection-based highlighting (pink)
const handleId = getInputHandleId(input.name);
const connectionHighlight = isHandleHighlighted(nodeId, handleId);

return matchFound;
return {
searchHighlight,
connectionHighlight,
};
},
[currentSearchFilter, highlightSearchResults],
[currentSearchFilter, highlightSearchResults, isHandleHighlighted, nodeId],
);

const handleLabelClick = useCallback(
Expand Down
65 changes: 46 additions & 19 deletions src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeOutputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import { ComponentSearchFilter } from "@/utils/constants";
import { outputNameToNodeId } from "@/utils/nodes/nodeIdUtils";
import { checkArtifactMatchesSearchFilters } from "@/utils/searchUtils";

import { OutputHandle } from "./Handles";
import { useConnectionHighlighting } from "../../hooks/useConnectionHighlighting";
import { getOutputHandleId, OutputHandle } from "./Handles";

type TaskNodeOutputsProps = {
condensed: boolean;
Expand All @@ -31,6 +32,9 @@ export function TaskNodeOutputs({
highlightSearchResults,
} = useForcedSearchContext();

const { highlightConnections, clearHighlights, isHandleHighlighted } =
useConnectionHighlighting();

const connection = useConnection();
const edges = useEdges();

Expand Down Expand Up @@ -78,31 +82,54 @@ export function TaskNodeOutputs({
if (state.readOnly) return;

const output = outputs.find((o) => o.name === outputName);
toggleHighlightRelatedHandles(selected, output);

if (selected) {
// Search-based highlighting (green)
toggleHighlightRelatedHandles(true, output);

// Connection-based highlighting (pink)
const handleId = getOutputHandleId(outputName);
highlightConnections(nodeId, handleId, "output");
} else {
resetSearchFilter();
clearHighlights();
}
},
[outputs, state.readOnly, toggleHighlightRelatedHandles],
[
outputs,
state.readOnly,
toggleHighlightRelatedHandles,
nodeId,
highlightConnections,
clearHighlights,
resetSearchFilter,
],
);

const checkHighlight = useCallback(
(output: OutputSpec) => {
if (
!highlightSearchResults ||
!isValidFilterRequest(currentSearchFilter, {
// Search-based highlighting (green)
const searchHighlight =
highlightSearchResults &&
isValidFilterRequest(currentSearchFilter, {
includesFilter: ComponentSearchFilter.OUTPUTTYPE,
})
) {
return false;
}

const matchFound = checkArtifactMatchesSearchFilters(
currentSearchFilter?.searchTerm,
currentSearchFilter?.filters,
output,
);

return matchFound;
}) &&
checkArtifactMatchesSearchFilters(
currentSearchFilter.searchTerm,
currentSearchFilter.filters,
output,
);

// Connection-based highlighting (pink)
const handleId = getOutputHandleId(output.name);
const connectionHighlight = isHandleHighlighted(nodeId, handleId);

return {
searchHighlight,
connectionHighlight,
};
},
[highlightSearchResults, currentSearchFilter],
[highlightSearchResults, currentSearchFilter, isHandleHighlighted, nodeId],
);

const handleLabelClick = useCallback(
Expand Down
Loading