Skip to content

fix(1707, 1708): fix path-to-component visibility and hover animation #654

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
timbastin merged 6 commits into from
Feb 27, 2026
Merged

fix(1707, 1708): fix path-to-component visibility and hover animation #654

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
612b639
fix path-to-component visibility and hover animation
juliankepka Feb 19, 2026
fcb50b2
this graph
juliankepka Feb 19, 2026
18007b9
no cursor pointer
juliankepka Feb 19, 2026
3b8880d
added comment
juliankepka Feb 19, 2026
cccd938
comment
juliankepka Feb 19, 2026
bee86f9
copilot fixes
juliankepka Feb 23, 2026
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
13 changes: 13 additions & 0 deletions src/components/DependencyGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ import {
DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { Move } from "lucide-react";

// Types for the context menu
type MenuType = "edge" | "node" | null;
Expand Down Expand Up @@ -181,6 +182,7 @@ const DependencyGraph: FunctionComponent<{
childrenLimitMap,
previousNodesRef.current,
handleExpansionToggle,
enableContextMenu,
);
Comment on lines 182 to 186
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

enableContextMenu is passed into getLayoutedElements, but it’s not included in the useMemo dependency list for computing initialNodes/initialEdges. If enableContextMenu changes (e.g. when vuln state changes), node data.enableContextMenu (and thus cursor/interaction affordance) can stay stale. Add enableContextMenu to the useMemo deps (and ensure downstream state updates run when it toggles).

Copilot uses AI. Check for mistakes.
previousNodesRef.current = nodes;

Expand Down Expand Up @@ -757,6 +759,17 @@ const DependencyGraph: FunctionComponent<{
)}
</Button>
</div>
<div className="absolute z-10 left-2 top-2">
<span className="text-sm text-muted-foreground/60 flex items-center gap-1">
<Move className="h-3 w-3" />
You can interact with this graph
</span>
</div>
{/* Todo: Find a better way to disable edge cursor pointer when context menu
is disabled. This is a bit hacky but works for now. Issue 1708 */}
{!enableContextMenu && (
<style>{`.react-flow__edge.selectable { cursor: grab !important; }`}</style>
)}
<ReactFlow
Comment on lines +778 to 780
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The inline <style> adds a global selector .react-flow__edge.selectable { ... }, which will affect every ReactFlow instance on the page while this component is mounted. Consider scoping the selector to this graph’s container (e.g., prefix with a container class) or using a component-scoped styling approach to avoid cross-component side effects.

Suggested change
<style>{`.react-flow__edge.selectable { cursor: grab !important; }`}</style>
)}
<ReactFlow
<style>{`.dependency-graph-container .react-flow__edge.selectable { cursor: grab !important; }`}</style>
)}
<ReactFlow
className="dependency-graph-container"

Copilot uses AI. Check for mistakes.
nodes={nodes}
nodeTypes={nodeTypes}
Expand Down
6 changes: 5 additions & 1 deletion src/components/DependencyGraphNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export interface DependencyGraphNodeProps {
propagationCount?: number;
propagationRatio?: number;
flow?: number;
enableContextMenu?: boolean;
onExpansionToggle?: (nodeId: string) => void;
};
id: string;
Expand All @@ -98,7 +99,10 @@ export const DependencyGraphNode: FunctionComponent<
width: props.data.nodeWidth,
}}
className={classNames(
"relative border-2 rounded-lg p-3 text-xs text-card-foreground bg-card transition-all cursor-pointer active:cursor-grabbing",
"relative border-2 rounded-lg p-3 text-xs text-card-foreground bg-card transition-all",
props.data.enableContextMenu
? "cursor-pointer active:cursor-grabbing"
: "cursor-grab active:cursor-grabbing",
props.data.vuln
? props.data.vuln.every((v) => v.state === "falsePositive")
? "border-gray-500/50 shadow-md"
Expand Down
2 changes: 2 additions & 0 deletions src/utils/dependencyGraphHelpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,7 @@ export const getLayoutedElements = (
childrenLimitMap: Map<string, number>,
previousNodes: Array<any> = [],
onExpansionToggle?: (nodeId: string) => void,
enableContextMenu?: boolean,
): [
Array<{
id: string;
Expand Down Expand Up @@ -332,6 +333,7 @@ export const getLayoutedElements = (
hasMore: childCount > shownCount,
isLoadMoreNode,
parentId,
enableContextMenu,
remainingCount: parentId
? (childCountMap.get(parentId) || 0) -
(childrenLimitMap.get(parentId) || INITIAL_CHILDREN_TO_SHOW)
Expand Down