Skip to content

refactor: update dependencies and improve graph handling #697

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
Anchel123 wants to merge 42 commits into
base: staging
Choose a base branch
from
Open

refactor: update dependencies and improve graph handling #697

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
eaef11e
refactor: update dependencies and improve graph handling
Anchel123 Jun 1, 2026
98fc391
feat: enhance combobox type safety and element menu positioning
Anchel123 Jul 8, 2026
94953fc
feat: update API proxy target and add element menu tests
Anchel123 Jul 8, 2026
b14ed9e
feat: improve graph element handling and enhance toolbar accessibility
Anchel123 Jul 8, 2026
7b0cde0
fix: resolve build and compilation errors
Anchel123 Jul 8, 2026
da01b49
Fix remaining PR #697 code quality issues
Anchel123 Jul 8, 2026
b86d5f9
Improve path zoom handling and remove unnecessary state updates
Anchel123 Jul 8, 2026
bcf5e7a
Reduce link zoom multiplier to 1.1x for better spacing
Anchel123 Jul 8, 2026
bf30fd7
Remove automatic path zoom - just highlight paths without forcing zoom
Anchel123 Jul 8, 2026
d64403e
fix: improve path zoom behavior - zoom all paths on response, then zo…
Anchel123 Jul 8, 2026
babe0ba
fix: add graphId to ForceGraph for incremental data updates
Anchel123 Jul 8, 2026
6745207
fix: update @falkordb/canvas dependency to version 0.2.5
Anchel123 Jul 9, 2026
4807a29
fix: improve element menu removal test for deterministic assertions
Anchel123 Jul 9, 2026
0bb7392
fix: update API proxy target to local development server
Anchel123 Jul 9, 2026
d063625
fix: set viewport in browser context to ensure desktop layout on page…
Anchel123 Jul 9, 2026
d14b29d
Merge branch 'staging' into add-layouts
Anchel123 Jul 12, 2026
e39f528
fix: resolve combobox crash from repo objects and legacy graph name l…
Anchel123 Jul 12, 2026
a18f422
fix: compose AsyncGraphQuery graph name immediately for explicit bran…
Anchel123 Jul 13, 2026
8492264
fix: normalize /api/list_repos payload for both string[] and object b…
Anchel123 Jul 13, 2026
eb13fa6
fix(e2e): seed synthesized CALLS edges into the actual indexed graph
Anchel123 Jul 13, 2026
0875796
fix(e2e): correct category checkbox order and metrics panel read race
Anchel123 Jul 13, 2026
89166c6
fix: update API proxy target to use the production URL
Anchel123 Jul 20, 2026
7463dff
Revert "fix: update API proxy target to use the production URL"
Anchel123 Jul 20, 2026
7b5c156
test(e2e): wait for element menu to appear after right-click
Naseem77 Jul 23, 2026
4d4e727
test(e2e): select category checkboxes by label instead of index
Naseem77 Jul 23, 2026
8cde46f
test(e2e): fix metrics panel poll to parse '<n> Nodes' text
Naseem77 Jul 23, 2026
9f5f56a
fix(api): resolve repo_info metadata lookup for full graph keys
Naseem77 Jul 23, 2026
56aa648
test(e2e): focus a node before right-clicking canvas center
Naseem77 Jul 23, 2026
d87b7e9
fix: address unresolved PR review feedback
Anchel123 Jul 23, 2026
ec3289a
fix: resolve new PR review comments
Anchel123 Jul 23, 2026
8b72a66
fix: address latest PR review threads
Anchel123 Jul 23, 2026
ba2054d
fix: address latest review comments
Anchel123 Jul 23, 2026
dfe62ff
fix: address newest PR review findings
Anchel123 Jul 23, 2026
d6b7c2a
fix: align canvas with local React 19 setup
Anchel123 Jul 23, 2026
56b496b
fix: update dependencies and improve component implementations
Anchel123 Jul 23, 2026
cb2f7c9
chore: downgrade React and React DOM to version 18.3.1 and update cor…
Anchel123 Jul 23, 2026
3639af3
fix: correct insertIndex calculation in RemoveLastPath function
Anchel123 Jul 23, 2026
84fcd20
fix: address latest review comments
Anchel123 Jul 23, 2026
1b53c48
fix: avoid duplicate graph existence lookup
Anchel123 Jul 23, 2026
2fa562f
chore: upgrade React and related dependencies; refactor DataPanel com…
Anchel123 Jul 23, 2026
42424e0
fix: address latest review comments
Anchel123 Jul 23, 2026
bffa01b
fix: guard element menu repo URL for links
Anchel123 Jul 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
205 changes: 28 additions & 177 deletions app/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"preview": "vite preview"
},
"dependencies": {
"@falkordb/canvas": "^0.0.44",
"@falkordb/canvas": "file:../../falkordb-canvas",
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
"@radix-ui/react-checkbox": "^1.1.4",
Comment thread
Anchel123 marked this conversation as resolved.
"@radix-ui/react-dialog": "^1.1.6",
Comment thread
Anchel123 marked this conversation as resolved.
"@radix-ui/react-dropdown-menu": "^2.1.6",
Expand Down
25 changes: 12 additions & 13 deletions app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Labels } from './components/labels';
import { Toolbar } from './components/toolbar';
import { cn, GraphRef, Message, Path, PathData, PathNode } from '@/lib/utils';
import type { GraphNode } from '@falkordb/canvas';
import { graphDataToData } from '@falkordb/canvas';
import { Toaster } from '@/components/ui/toaster';
import GTM from './GTM';
import { Button } from '@/components/ui/button';
Expand Down Expand Up @@ -79,7 +80,8 @@ export default function App() {
const [menuOpen, setMenuOpen] = useState(false)
const [chatOpen, setChatOpen] = useState(false)
const [searchNode, setSearchNode] = useState<PathNode>({});
const [cooldownTicks, setCooldownTicks] = useState<number | undefined>(0)
const [cooldownTicks, setCooldownTicks] = useState<number | undefined>(undefined)
const [animation, setAnimation] = useState(false)
const [optionsOpen, setOptionsOpen] = useState(false)
const [messages, setMessages] = useState<Message[]>([]);
const [query, setQuery] = useState('');
Expand Down Expand Up @@ -174,8 +176,6 @@ export default function App() {
const g = Graph.create(json.entities, graphName)
setGraph(g)

if (cooldownTicks === 0) setCooldownTicks(-1)

setIsPathResponse(false)
chatPanel.current?.expand()
// @ts-ignore
Expand Down Expand Up @@ -225,8 +225,6 @@ export default function App() {
if (!chartNode) {
chartNode = graph.extend({ nodes: [node], edges: [] }).nodes[0]

if (cooldownTicks === 0) setCooldownTicks(-1)

setZoomedNodes([chartNode])
graph.visibleLinks(true, [chartNode!.id])

Expand All @@ -251,7 +249,7 @@ export default function App() {
currentData.nodes.push(graphNode)
}

canvas.setGraphData(currentData)
canvas.setGraphData(graphDataToData(currentData))


setTimeout(() => {
Expand Down Expand Up @@ -280,7 +278,7 @@ export default function App() {
}
})

canvas.setGraphData(currentData)
canvas.setGraphData(graphDataToData(currentData))
}

setTimeout(() => {
Expand Down Expand Up @@ -324,9 +322,8 @@ export default function App() {
}
});

canvas.setGraphData(currentData);
canvas.setGraphData(graphDataToData(currentData));

setCooldownTicks(cooldownTicks === undefined ? undefined : -1);
setHasHiddenElements(graph.getElements().some(element => !element.visible));
}

Expand Down Expand Up @@ -540,6 +537,8 @@ export default function App() {
setSearchNode={setSearchNode}
cooldownTicks={cooldownTicks}
setCooldownTicks={setCooldownTicks}
animation={animation}
setAnimation={setAnimation}
onCategoryClick={(name, show) => onCategoryClick(name, show, desktopChartRef)}
handleDownloadImage={handleDownloadImage}
zoomedNodes={zoomedNodes}
Expand Down Expand Up @@ -574,7 +573,6 @@ export default function App() {
setIsPathResponse={setIsPathResponse}
paths={paths}
setPaths={setPaths}
setCooldownTicks={setCooldownTicks}
/>
</Panel>
</PanelGroup>
Expand Down Expand Up @@ -667,6 +665,8 @@ export default function App() {
searchNode={searchNode}
cooldownTicks={cooldownTicks}
setCooldownTicks={setCooldownTicks}
animation={animation}
setAnimation={setAnimation}
onCategoryClick={(name, show) => onCategoryClick(name, show, mobileChartRef)}
handleDownloadImage={handleDownloadImage}
zoomedNodes={zoomedNodes}
Expand Down Expand Up @@ -705,7 +705,6 @@ export default function App() {
setChatOpen={setChatOpen}
paths={paths}
setPaths={setPaths}
setCooldownTicks={setCooldownTicks}
/>
</DrawerContent>
</Drawer>
Expand All @@ -723,8 +722,8 @@ export default function App() {
<Toolbar
className='bg-transparent absolute -top-14 left-0 w-full justify-between px-6'
canvasRef={mobileChartRef}
setCooldownTicks={setCooldownTicks}
cooldownTicks={cooldownTicks}
animation={animation}
setAnimation={setAnimation}
/>
<Input
className='border-2 border-border'
Expand Down
34 changes: 18 additions & 16 deletions app/src/components/ForceGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,12 @@ interface Props {
linkLineDash: (link: any) => number[]
onZoom: () => void
onEngineStop: () => void
cooldownTicks: number | undefined
animation: boolean
backgroundColor?: string
foregroundColor?: string
}


const convertToCanvasData = (graphData: GraphData): Data => ({
nodes: graphData.nodes.filter(n => n.visible).map(({ id, category, color, visible, isPath, isPathSelected, data }) => ({
id,
Expand Down Expand Up @@ -66,7 +67,7 @@ export default function ForceGraph({
nodeCanvasObject,
nodePointerAreaPaint,
linkLineDash,
cooldownTicks,
animation,
backgroundColor = "#FFFFFF",
foregroundColor = "#000000"
}: Props) {
Expand Down Expand Up @@ -94,12 +95,12 @@ export default function ForceGraph({
canvasRef.current.setForegroundColor(foregroundColor)
}, [canvasRef, backgroundColor, foregroundColor, canvasLoaded])

// Update cooldown ticks
// Update animation state on canvas
useEffect(() => {
if (!canvasRef.current || !canvasLoaded) return

canvasRef.current.setCooldownTicks(cooldownTicks === -1 ? undefined : cooldownTicks)
}, [canvasRef, cooldownTicks, canvasLoaded])
canvasRef.current.setAnimation(animation)
}, [canvasRef, animation, canvasLoaded])

// Map node click handler
const handleNodeClick = useCallback((node: GraphNode, event: MouseEvent) => {
Expand Down Expand Up @@ -158,23 +159,24 @@ export default function ForceGraph({
useEffect(() => {
if (!canvasRef.current || !canvasLoaded) return
canvasRef.current.setConfig({
autoStopOnSettle: false,
// nodes will display node.data.captionsKeys in the canvas
captionsKeys: ["name", "title"],
onNodeClick: handleNodeClick,
onNodeRightClick: handleNodeRightClick,
onNodeHover: handleNodeHover,
isNodeSelected: isNodeSelected,
onLinkClick: handleLinkClick,
onLinkRightClick: handleLinkRightClick,
onLinkHover: handleLinkHover,
isLinkSelected: isLinkSelected,
onBackgroundClick,
onBackgroundRightClick,
onEngineStop: handleEngineStop,
node: { nodeCanvasObject, nodePointerAreaPaint },
linkLineDash,
onZoom
eventHandlers: {
onNodeClick: handleNodeClick,
onNodeRightClick: handleNodeRightClick,
onNodeHover: handleNodeHover,
onLinkClick: handleLinkClick,
onLinkRightClick: handleLinkRightClick,
onLinkHover: handleLinkHover,
onBackgroundClick,
onBackgroundRightClick,
onEngineStop: handleEngineStop,
onZoom
}
})
}, [
handleNodeClick,
Expand Down
Loading
Loading