Skip to content

fix xyflow import and update dependencies #1

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

Open
elf-pavlik wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix xyflow import and update dependencies #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8084253
fix errors
elf-pavlik Jun 23, 2026
605c70b
update dependencies
elf-pavlik Jun 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
18 changes: 9 additions & 9 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,18 @@
},
"dependencies": {
"@radix-ui/colors": "^3.0.0",
"likec4": "latest",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-use": "^17.6.0",
"likec4": "^1.58.0",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-use": "^17.6.1",
"roughjs": "^4.6.6"
},
"devDependencies": {
"@types/react": "^19.1.16",
"@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "^5.0.4",
"typescript": "^5.9.2",
"vite": "^7.1.11"
"@types/react": "^19.2.17",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.2",
"typescript": "^6.0.3",
"vite": "^8.0.16"
},
"stackblitz": {
"installDependencies": true
Expand Down
30 changes: 15 additions & 15 deletions src/CustomNodes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
ElementActions,
ElementData,
ElementNodeContainer,
XYFlow,
xyflow,
elementNode,
useDiagram,
useLikeC4Styles
Expand Down Expand Up @@ -33,7 +33,7 @@ export const ElementNode = elementNode(({ nodeModel, nodeProps }) => {
<ElementActions {...nodeProps}
extraButtons={[{
key: 'bolt',
icon: <IconBolt/>,
icon: <IconBolt />,
onClick(e) {
e.stopPropagation();
open(nodeModel.id);
Expand All @@ -42,10 +42,10 @@ export const ElementNode = elementNode(({ nodeModel, nodeProps }) => {
/>
<DefaultHandles />
{(isHoveredOrSelected && nodeModel.element.hasMetadata()) && (
<XYFlow.NodeToolbar
<xyflow.NodeToolbar
isVisible
offset={0}
position={XYFlow.Position.Top}
position={xyflow.Position.Top}
align={'center'}
data-likec4-color={nodeProps.data.color}
// ❇️ This is a class from styles.css
Expand All @@ -60,30 +60,30 @@ export const ElementNode = elementNode(({ nodeModel, nodeProps }) => {
<div className='metadata'>
{Object.entries(nodeModel.element.getMetadata()).map(([key, value]) => (
<Fragment key={key}>
<div data-metadata-key>{key}</div>
<div data-metadata-value>{value}</div>
</Fragment>))}
<div data-metadata-key>{key}</div>
<div data-metadata-value>{value}</div>
</Fragment>))}
Comment on lines +63 to +65

@coderabbitai coderabbitai Bot Jun 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Add a stable key to the mapped Fragment.

Line 63 renders list items without a key, which can produce reconciliation glitches and React warnings.

Proposed fix 
-                {Object.entries(metadata).map(([key, value]) => (
-                  <Fragment>
+                {Object.entries(metadata).map(([key, value]) => (
+                  <Fragment key={key}>
                     <div data-metadata-key>{key}</div>
                     <div data-metadata-value>{value}</div>
-                  </Fragment>))}
+                  </Fragment>
+                ))}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div data-metadata-key>{key}</div>
<div data-metadata-value>{value}</div>
</Fragment>))}
{Object.entries(metadata).map(([key, value]) => (
<Fragment key={key}>
<div data-metadata-key>{key}</div>
<div data-metadata-value>{value}</div>
</Fragment>
))}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/CustomNodes.tsx` around lines 63 - 65, The Fragment component in the map
function rendering metadata items is missing a stable key prop, which causes
React reconciliation issues and warnings. Add a key prop to the Fragment element
and use the key variable from the metadata iteration as the value, since it
serves as a unique and stable identifier for each item being rendered.

</div>
<div style={{ display: 'flex', gap: 8 }}>
<button onClick={(e) => {
e.stopPropagation();
diagram.openElementDetails(nodeModel.id)
}}>
e.stopPropagation();
diagram.openElementDetails(nodeModel.id)
}}>
Open Details
</button>
<button onClick={(e) => {
e.stopPropagation();
diagram.focusNode(nodeModel.id)
}}
e.stopPropagation();
diagram.focusNode(nodeModel.id)
}}
>Focus</button>
</div>
</div>
</XYFlow.NodeToolbar>
</xyflow.NodeToolbar>
)}
</ElementNodeContainer>
);
})

const IconBolt = () => (
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2.02c-5.51 0-9.98 4.47-9.98 9.98s4.47 9.98 9.98 9.98 9.98-4.47 9.98-9.98S17.51 2.02 12 2.02zm0 17.96c-4.4 0-7.98-3.58-7.98-7.98S7.6 4.02 12 4.02 19.98 7.6 19.98 12 16.4 19.98 12 19.98zM12.75 5l-4.5 8.5h3.14V19l4.36-8.5h-3z"></path></svg>
<svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2.02c-5.51 0-9.98 4.47-9.98 9.98s4.47 9.98 9.98 9.98 9.98-4.47 9.98-9.98S17.51 2.02 12 2.02zm0 17.96c-4.4 0-7.98-3.58-7.98-7.98S7.6 4.02 12 4.02 19.98 7.6 19.98 12 16.4 19.98 12 19.98zM12.75 5l-4.5 8.5h3.14V19l4.36-8.5h-3z"></path></svg>
)